workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss

   1 .overview-page {
   2   @include body-1;
   3   color: $dark-gray;
   4   overflow-y: auto;
   5   height: 100vh;
   6
   7   .overview-content {
   8     display: flex;
   9     flex-wrap: wrap;
  10     min-height: 775px;
  11
  12     .overview-separator {
  13       border-left: 1px solid $silver;
  14     }
  15
  16     .workflow-details {
  17       @extend .flex;
  18       @media (min-width: 1076px) {
  19         @include sticky(30px);
  20       }
  21       max-height: 600px;
  22       padding: 0 45px 0 56px;
  23       flex-direction: column;
  24
  25       .description-part {
  26         padding-top: 20px;
  27         textarea{
  28           height: 200px;
  29         }
  30       }
  31
  32       .save-description {
  33         display: flex;
  34         justify-content: flex-end;
  35       }
  36
  37       .version-info-part {
  38         background-color: $light-silver;
  39         margin-top: 25px;
  40         padding: 20px;
  41         box-sizing: border-box;
  42         .label {
  43           @include body-1;
  44           margin-bottom: 5px;
  45         }
  46         .value {
  47           margin-bottom: 20px;
  48           &:last-child {
  49             margin-bottom: 0;
  50           }
  51         }
  52       }
  53     }
  54
  55     .workflow-versions {
  56       display: flex;
  57       flex: 2;
  58     }
  59   }
  60
  61   .overview-header {
  62     display: flex;
  63     margin: 35px 60px 35px 60px;
  64     color: $blue;
  65     justify-content: space-between;
  66     .title {
  67       display: flex;
  68       @include heading-1;
  69       text-transform: uppercase;
  70     }
  71     .go-catalog-btn {
  72         fill: $blue;
  73         @include heading-4;
  74         &:hover {
  75           fill: $light-blue;
  76           color: $light-blue;
  77           cursor: pointer;
  78         }
  79         .svg-icon {
  80           width: 16px;
  81           height: 16px;
  82         }
  83     }
  84     .restore-btn {
  85       margin-left: 20px;
  86     }
  87     .archive-btn {
  88       margin-left: 20px;
  89       fill: $gray;
  90       &:hover {
  91         fill: $blue;
  92         color: $light-blue;
  93         cursor: pointer;
  94       }
  95     }
  96   }
  97
  98   @mixin version-page-box-shadow() {
  99     box-shadow: 1px 1px 0 0 rgba(24, 24, 24, 0.06);
 100   }
 101
 102   @mixin version-page-sub-title(){
 103     color: $text-black;
 104     text-transform: uppercase;
 105     border-bottom: 1px solid $light-gray;
 106     padding: 12px 0 10px 45px;
 107   }
 108
 109   .versions-page-view {
 110     padding: 0 56px 0 45px;
 111     display: flex;
 112     flex: 2;
 113     flex-direction: column;
 114
 115     .create-new-version {
 116       @extend .text-uppercase;
 117       display: flex;
 118       flex-direction: row-reverse;
 119       color: $blue;
 120       margin-left: auto;
 121       cursor: pointer;
 122     }
 123     .newVersionDisabled > *, .svg-icon-wrapper{
 124       pointer-events: none;
 125       color: $gray;
 126     }
 127     .version-page-header {
 128       display: flex;
 129       justify-content: space-between;
 130       .versions-page-title {
 131         @include heading-1;
 132         text-transform: uppercase;
 133         margin-bottom: 29px;
 134         color: $blue;
 135       }
 136       .depricate-btn-wrapper {
 137         display: flex;
 138         justify-content: flex-end;
 139         margin-bottom: 10px;
 140       }
 141     }
 142
 143     .versions-page-list-and-tree {
 144       display: flex;
 145       margin-top: 10px;
 146
 147       .version-tree-wrapper {
 148         display: flex;
 149         flex-direction: column;
 150         transition: all 1s ease;
 151         @include version-page-box-shadow();
 152
 153         .version-tree-title-container {
 154           @include body-1-emphasis();
 155           @media (min-width: 1076px) {
 156             @include sticky(1px);
 157           }
 158           background-color: $light-silver;
 159           display: flex;
 160           align-items: center;
 161           height: 40px;
 162           @include version-page-sub-title();
 163           padding-right: 10px;
 164
 165           .version-tree-full-screen {
 166             margin-left: auto;
 167           }
 168         }
 169
 170         .tree-view {
 171           flex: 1;
 172           border-left: 1px solid $silver;
 173           &:last-child {
 174             border-bottom: 1px solid $silver;
 175           }
 176           .node:not(.selectedNode):hover {
 177             .outer-circle, .inner-circle {
 178               transform: scale(1.1);
 179             }
 180           }
 181         }
 182       }
 183     }
 184
 185     .version-list {
 186       @extend .flex;
 187       flex-direction: column;
 188
 189       .version-list-items {
 190         @extend .flex-column;
 191
 192         .item-version, .item-status {
 193           font-size: 12px;
 194           font-weight: 600;
 195         }
 196         .version-item-row {
 197           &:last-child {
 198             border-bottom: 1px solid $silver;
 199           }
 200         }
 201       }
 202
 203       .version-item-row {
 204         $row-hover-color: lighten($blue, 54%);
 205         $row-active-color: lighten($blue, 51%);
 206         cursor: $cursor-pointer;
 207
 208         display: flex;
 209         align-items: center;
 210         padding: 15px 30px;
 211         @include version-page-box-shadow();
 212         height: 70px;
 213         max-height: 70px;
 214
 215         &:hover {
 216           background-color: $row-hover-color;
 217         }
 218
 219         &.selected {
 220           box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
 221           background-color: $row-active-color;
 222
 223           &:hover {
 224             box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
 225           }
 226         }
 227
 228         &.header-row {
 229           height: 40px;
 230           background-color: $light-silver;
 231           @media (min-width: 1076px) {
 232             @include sticky(1px);
 233           }
 234           @include body-1-emphasis();
 235           @include version-page-sub-title();
 236           padding: 15px 27px;
 237
 238           &:hover {
 239             pointer-events: none;
 240             &:active {
 241               @include version-page-box-shadow();
 242             }
 243           }
 244           .header-field.actions {
 245             margin-right: 57px;
 246           }
 247         }
 248
 249         .version-item-field {
 250           @extend .flex;
 251           margin-right: 10px;
 252
 253           &.item-version, &.item-status {
 254             flex: 0 1 10%;
 255             color: $text-black;
 256           }
 257
 258           &.item-description, &.item-last-edited {
 259             @include body-1;
 260           }
 261
 262           &.item-description, &.header-description {
 263             flex: 1 1 0;
 264           }
 265
 266           &.item-description > .description-text {
 267             margin-right: 10px;
 268             @include ellipsis($max-width: 280px);
 269             width: initial;
 270           }
 271
 272           &.item-actions {
 273             display: flex;
 274             flex: 1 1 3%;
 275             justify-content: space-between;
 276           }
 277
 278           &.item-select, &.item-create {
 279             @include body-1;
 280             flex: 0 1 auto;
 281             margin-right: 0;
 282
 283             .svg-icon-wrapper {
 284               fill: $blue;
 285               color: $blue;
 286
 287               &[disabled] {
 288                 cursor: default;
 289               }
 290
 291               .svg-icon {
 292                 width: 16px;
 293                 height: 16px;
 294               }
 295
 296               &:hover:not([disabled]) {
 297                 fill: $dark-blue;
 298                 color: $dark-blue;
 299               }
 300             }
 301           }
 302
 303         }
 304
 305         /* To keep ellipsis hider's background the same color as row background */
 306         &:not(.selected):hover .item-description > .description-text:after {
 307           background: $row-hover-color;
 308         }
 309
 310         &:hover:active .item-description > .description-text:after {
 311           background: $row-active-color;
 312         }
 313
 314       }
 315
 316     }
 317
 318     &.clickable {
 319       cursor: pointer;
 320     }
 321   }
 322
 323 }
 324
 325 .inputinput-selector {
 326   padding-right: 10px;
 327   border-color: $light-gray;
 328   border-radius: 2px;
 329   width: 100%;
 330   height: 30px;
 331   @include body-1;
 332
 333   &:disabled {
 334     @extend .disabled;
 335     background-color: $silver;
 336   }
 337 }