openecomp-ui/resources/scss/components/_versionController.scss

   1 .version-controller-bar {
   2     display: flex;
   3     min-height: 70px;
   4     border-bottom: 1px solid $tlv-light-gray;
   5     background-color: transparent;
   6
   7     .vc-container {
   8         display: flex;
   9         flex: 1;
  10         align-self: center;
  11         background-color: transparent;
  12         justify-content: space-between;
  13         align-items: center;
  14         padding-left: 16px;
  15         padding-right: 40px;
  16
  17         .vc-separator {
  18             border-left: 1px solid $tlv-light-gray;
  19             height: 37px;
  20             margin-left: 5px;
  21             margin-right: 5px;
  22         }
  23
  24         .version-status-container {
  25             display: flex;
  26             height: 30px;
  27
  28             .version-selector-more-versions {
  29                 color: $blue;
  30                 cursor: pointer;
  31             }
  32
  33             .version-selector {
  34                 margin-top: 0px;
  35                 padding-right: 10px;
  36                 margin-right: 15px;
  37                 margin-left: 10px;
  38                 border-color: $light-gray;
  39                 border-radius: 2px;
  40                 width: 243px;
  41                 height: 30px;
  42                 @extend .body-1;
  43             }
  44
  45             .version-section {
  46                 .form-group {
  47                     margin-right: 20px;
  48
  49                     .input-options {
  50                         border: none;
  51
  52                         .input-options-select {
  53                             padding-top: 4px;
  54                         }
  55                     }
  56                 }
  57             }
  58
  59             .vc-status {
  60                 display: flex;
  61                 padding-left: 20px;
  62                 border-left: $light-gray thin solid;
  63
  64                 .status-text {
  65                     align-self: center;
  66                     margin-top: 2px;
  67                     @extend .heading-5;
  68                     color: $dark-gray;
  69                 }
  70             }
  71             .depricated-item-status {
  72                 @extend .body-3;
  73                 color: $white;
  74                 background-color: $dark-purple;
  75                 margin-left: 10px;
  76                 padding: 1px 10px;
  77                 align-self: center;
  78                 border-radius: 3px;
  79             }
  80         }
  81
  82         .save-submit-cancel-container {
  83             display: flex;
  84             align-items: center;
  85             height: 100%;
  86
  87             .action-buttons,
  88             .collaborator-action-buttons,
  89             .vc-save-section,
  90             .vc-submit-section {
  91                 display: flex;
  92                 align-items: center;
  93                 height: 100%;
  94
  95                 .vc-submit-button {
  96                     border: 1px solid $dark-gray;
  97                     width: 94px;
  98                     height: 30px;
  99                     border-radius: 2px;
 100                     padding-top: 5px;
 101                     padding-left: 10px;
 102                     margin-left: 10px;
 103                     margin-right: 10px;
 104
 105                     &:hover:not(.disabled) {
 106                         cursor: pointer;
 107                         background-color: $tlv-light-gray;
 108                     }
 109
 110                     &.disabled {
 111                         border-color: $light-gray;
 112                     }
 113
 114                     .vc-v-submit {
 115                         width: 11px;
 116                         height: 8px;
 117                         margin-right: 10px;
 118                         position: relative;
 119                         top: -1px;
 120                     }
 121                 }
 122
 123                 .version-control-buttons {
 124                     display: flex;
 125                 }
 126
 127                 .action-button-wrapper {
 128                     display: flex;
 129                     align-items: center;
 130                     height: 70px;
 131
 132                     &:hover:not(.disabled) {
 133                         background-color: $tlv-light-gray;
 134                     }
 135
 136                     &:active:not(.disabled) {
 137                         background-color: $light-gray;
 138                     }
 139
 140                     .action-buttons-svg {
 141                         padding-left: 10px;
 142                         padding-right: 10px;
 143
 144                         .svg-icon {
 145                             fill: $text-black;
 146                             height: 20px;
 147
 148                             &,
 149                             &.__version-controller-save {
 150                                 width: 20px;
 151                             }
 152                             &.__version-controller-permissions {
 153                                 width: 32px;
 154                             }
 155                             &.__version-controller-undo,
 156                             &.__version-controller-revert {
 157                                 width: 20px;
 158                             }
 159                             &.__version-controller-sync,
 160                             &.__version-controller-commit {
 161                                 width: 28px;
 162                             }
 163                         }
 164                     }
 165
 166                     .version-controller-permissions {
 167                         width: 32px;
 168                         height: 20px;
 169                         fill: $dark-gray;
 170                     }
 171                 }
 172
 173                 .action-button-label {
 174                     display: block;
 175                     font-size: $icon-font-size;
 176                     font-family: $icon-font-family;
 177                     height: 1em;
 178                     margin-top: 5px;
 179                     margin-bottom: 0;
 180                 }
 181
 182                 .onboarding-overlay {
 183                     margin-top: -6px;
 184                     .permissions-overlay {
 185                         width: 237px;
 186
 187                         .permissions-overlay-header {
 188                             text-align: left;
 189                             color: $blue;
 190                             padding-bottom: 15px;
 191                             padding-top: 15px;
 192                             border-bottom: 1px solid $light-gray;
 193                             .permissions-overlay-header-title {
 194                                 margin-left: 20px;
 195                             }
 196                         }
 197                         .permissions-overlay-content {
 198                             max-height: 290px;
 199                             overflow-y: auto;
 200                             padding-left: 10px;
 201                             padding-right: 10px;
 202                             .contributor {
 203                                 &:last-child {
 204                                     border-bottom: none;
 205                                 }
 206                                 border-bottom: 1px solid $tlv-light-gray;
 207                                 .contributor-content {
 208                                     padding-top: 12px;
 209                                     padding-bottom: 10px;
 210                                     margin-left: 10px;
 211                                     display: flex;
 212                                     .contributor-icon-circle {
 213                                         &.selected {
 214                                             border: 1px solid $blue;
 215                                         }
 216
 217                                         border-radius: 65px;
 218                                         padding: 2px;
 219                                         width: 32px;
 220                                         height: 32px;
 221                                         margin-top: 4px;
 222                                         .contributer-icon {
 223                                             width: 26px;
 224                                             border-radius: 50px;
 225                                             height: 26px;
 226                                             margin-top: 0px;
 227                                             .__user {
 228                                                 height: 18px;
 229                                                 width: 16px;
 230                                                 stroke: $blue;
 231                                                 fill: transparent;
 232                                                 margin-left: 5px;
 233                                                 margin-top: 3px;
 234                                             }
 235                                             &.selected {
 236                                                 border: 1px solid $blue;
 237                                                 background-color: $blue;
 238                                                 .__user {
 239                                                     stroke: $white;
 240                                                     margin-left: 4px;
 241                                                 }
 242                                             }
 243                                         }
 244                                     }
 245
 246                                     .contributer-info {
 247                                         padding-left: 11px;
 248                                         .contributer-name {
 249                                             @extend .body-2-semibold;
 250                                             text-transform: uppercase;
 251                                             color: $dark-gray;
 252                                         }
 253                                         .contributer-role {
 254                                             @extend .body-3;
 255                                             color: $gray;
 256                                             display: flex;
 257                                             text-transform: lowercase;
 258                                             p:first-letter {
 259                                                 text-transform: uppercase;
 260                                             }
 261                                             justify-content: space-between;
 262                                         }
 263                                     }
 264                                 }
 265                             }
 266                         }
 267                         .permissions-overlay-footer {
 268                             .manage-permissions-btn {
 269                                 @extend .body-2-semibold;
 270                                 margin-top: 20px;
 271                                 padding-top: 10px;
 272                                 padding-bottom: 10px;
 273                                 color: $blue;
 274                                 text-align: center;
 275                                 cursor: pointer;
 276                                 background-color: $tlv-gray;
 277                             }
 278                         }
 279                     }
 280                 }
 281             }
 282         }
 283         .vc-nav-item-close {
 284             display: flex;
 285             padding-left: 18px;
 286             padding-top: 3px;
 287             align-self: center;
 288             @extend .body-1;
 289             color: $gray;
 290             cursor: pointer;
 291             border-left: $gray thin solid;
 292         }
 293     }
 294 }