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