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                 }
  72
  73                 .save-submit-cancel-container {
  74                         display: flex;
  75                         align-items: center;
  76                         height: 100%;
  77
  78                         .action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section {
  79                                 display: flex;
  80                                 align-items: center;
  81                                 height: 100%;
  82
  83                                 .vc-submit-button {
  84                                         border: 1px solid $dark-gray;
  85                                         width: 94px;
  86                                         height: 30px;
  87                                         border-radius: 2px;
  88                                         padding-top: 5px;
  89                                         padding-left: 10px;
  90                                         margin-left: 10px;
  91                                         margin-right: 10px;
  92
  93                                         &:hover:not(.disabled) {
  94                                                 cursor: pointer;
  95                                                 background-color: $tlv-light-gray;
  96                                         }
  97
  98                                         &.disabled {
  99                                                 border-color: $light-gray;
 100                                         }
 101
 102                                         .vc-v-submit {
 103                                                 width: 11px;
 104                                                 height: 8px;
 105                                                 margin-right: 10px;
 106                                                 position: relative;
 107                                                 top: -1px;
 108                                         }
 109                                 }
 110
 111                                 .version-control-buttons {
 112                                         display: flex;
 113                                 }
 114
 115                                 .action-button-wrapper {
 116                                         display: flex;
 117                                         align-items: center;
 118                                         height: 70px;
 119
 120                                         &:hover:not(.disabled) {
 121                                                 background-color: $tlv-light-gray;
 122                                         }
 123
 124                                         &:active:not(.disabled) {
 125                                                 background-color: $light-gray;
 126                                         }
 127
 128                                         .action-buttons-svg {
 129                                                 padding-left: 10px;
 130                                                 padding-right: 10px;
 131
 132                                                 .svg-icon {
 133                                                         fill: $text-black;
 134                                                         height: 20px;
 135
 136                                                         &, &.__version-controller-save { width: 20px; }
 137                                                         &.__version-controller-permissions { width: 32px; }
 138                                                         &.__version-controller-undo, &.__version-controller-revert { width: 20px; }
 139                                                         &.__version-controller-sync, &.__version-controller-commit { width: 28px; }
 140                                                 }
 141                                         }
 142
 143                                         .version-controller-permissions {
 144                                                 width: 32px;
 145                                                 height: 20px;
 146                                                 fill: $dark-gray;
 147                                         }
 148                                 }
 149
 150                                 .action-button-label {
 151                                         display: block;
 152                                         font-size: $icon-font-size;
 153                                         font-family: $icon-font-family;
 154                                         height: 1em;
 155                                         margin-top: 5px;
 156                                         margin-bottom: 0;
 157                                 }
 158
 159                                 .onboarding-overlay {
 160                                         margin-top: -6px;
 161                                         .permissions-overlay {
 162                                                 width: 237px;
 163
 164                                                 .permissions-overlay-header {
 165                                                         text-align: left;
 166                                                         color: $blue;
 167                                                         padding-bottom: 15px;
 168                                                         padding-top: 15px;
 169                                                         border-bottom: 1px solid $light-gray;
 170                                                         .permissions-overlay-header-title {
 171                                                                 margin-left: 20px;
 172                                                         }
 173                                                 }
 174                                                 .permissions-overlay-content {
 175                                                         max-height: 290px;
 176                                                         overflow-y: auto;
 177                                                         padding-left: 10px;
 178                                                         padding-right: 10px;
 179                                                         .contributor {
 180                                                                 &:last-child {
 181                                                                         border-bottom: none;
 182                                                                 }
 183                                                                 border-bottom: 1px solid $tlv-light-gray;
 184                                                                 .contributor-content {
 185                                                                         padding-top: 12px;
 186                                                                         padding-bottom: 10px;
 187                                                                         margin-left: 10px;
 188                                                                         display: flex;
 189                                                                         .contributor-icon-circle {
 190                                                                                 &.selected {
 191                                                                                         border: 1px solid $blue;
 192                                                                                 }
 193
 194                                                                                 border-radius: 65px;
 195                                                                                 padding: 2px;
 196                                                                                 width: 32px;
 197                                                                                 height: 32px;
 198                                                                                 margin-top: 4px;
 199                                                                                 .contributer-icon {
 200                                                                                         width: 26px;
 201                                                                                         border-radius: 50px;
 202                                                                                         height: 26px;
 203                                                                                         margin-top: 0px;
 204                                                                                         .__user {
 205                                                                                                 height: 18px;
 206                                                                                                 width: 16px;
 207                                                                                                 stroke: $blue;
 208                                                                                                 fill: transparent;
 209                                                                                                 margin-left: 5px;
 210                                                                                                 margin-top: 3px;
 211                                                                                         }
 212                                                                                         &.selected {
 213                                                                                                 border: 1px solid $blue;
 214                                                                                                 background-color: $blue;
 215                                                                                                 .__user {
 216                                                                                                         stroke: $white;
 217                                                                                                         margin-left: 4px;
 218                                                                                                 }
 219                                                                                         }
 220                                                                                 }
 221                                                                         }
 222
 223                                                                         .contributer-info {
 224                                                                                 padding-left: 11px;
 225                                                                                 .contributer-name {
 226                                                                                         @extend .body-2-semibold;
 227                                                                                         text-transform: uppercase;
 228                                                                                         color: $dark-gray;
 229                                                                                 }
 230                                                                                 .contributer-role {
 231                                                                                         @extend .body-3;
 232                                                                                         color: $gray;
 233                                                                                         display: flex;
 234                                                                                         text-transform: lowercase;
 235                                                                                         p:first-letter {
 236                                                                                                 text-transform: uppercase;
 237                                                                                         }
 238                                                                                         justify-content: space-between;
 239                                                                                 }
 240                                                                         }
 241                                                                 }
 242                                                         }
 243                                                 }
 244                                                 .permissions-overlay-footer {
 245                                                         .manage-permissions-btn {
 246                                                                 @extend .body-2-semibold;
 247                                                                 margin-top: 20px;
 248                                                                 padding-top: 10px;
 249                                                                 padding-bottom: 10px;
 250                                                                 color: $blue;
 251                                                                 text-align: center;
 252                                                                 cursor: pointer;
 253                                                                 background-color: $tlv-gray;
 254                                                         }
 255                                                 }
 256
 257                                         }
 258                                 }
 259                         }
 260                 }
 261                 .vc-nav-item-close {
 262                         display: flex;
 263                         padding-left: 18px;
 264                         padding-top: 3px;
 265                         align-self: center;
 266                         @extend .body-1;
 267                         color: $gray;
 268                         cursor: pointer;
 269                         border-left: $gray thin solid;
 270                 }
 271         }
 272 }