openecomp-ui/resources/scss/modules/_versionsPage.scss

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