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

   1 .select-action-table-view {
   2     .svg-icon-wrapper {
   3         flex-direction: row;
   4         .svg-icon {
   5             &:not(.__plus) {
   6                 margin-left: 5px;
   7                 margin-right: 5px;
   8                 width: 16px;
   9                 height: 16px;
  10             }
  11         }
  12     }
  13     .dummy-icon {
  14         background-color: $white;
  15         fill: $white;
  16         .locked {
  17             fill: $white;
  18         }
  19     }
  20
  21     .select-action-table-controllers {
  22         display: flex;
  23         .svg-icon-wrapper {
  24             &:hover {
  25                 cursor: pointer;
  26             }
  27             &:first-child {
  28                 margin-left: auto;
  29             }
  30         }
  31     }
  32     .select-action-table {
  33         display: flex;
  34         flex-direction: column;
  35         border-color: $light-gray;
  36
  37         .select-action-table-headers {
  38             display: flex;
  39             background-color: $tlv-light-gray;
  40             border-color: inherit;
  41             .select-action-table-header {
  42                 @extend .body-1-semibold;
  43                 flex: 1;
  44                 border-top: 1px solid;
  45                 border-right: 1px solid;
  46                 border-color: inherit;
  47                 padding: 8px 0 7px 20px;
  48                 &:first-child {
  49                     border-left: 1px solid;
  50                     border-color: inherit;
  51                 }
  52             }
  53         }
  54         .select-action-table-row-wrapper {
  55             display: flex;
  56             flex-direction: row;
  57             margin-bottom: 14px;
  58             .svg-icon-wrapper.hideDelete {
  59                 .svg-icon {
  60                     fill: $white;
  61                 }
  62             }
  63             .select-action-table-row {
  64                 display: flex;
  65                 flex: 1;
  66                 border: 1px solid;
  67                 border-color: $light-gray;
  68                 &.has-error {
  69                     border-color: $red;
  70                 }
  71
  72                 .select-action-table-cell {
  73                     flex: 1;
  74                     border-right: 1px solid;
  75                     border-color: $light-gray;
  76                     @extend .body-1;
  77                     .dropdown-multi-select {
  78                         .form-group {
  79                             .Select {
  80                                 &.is-open {
  81                                     border: 1px solid $blue;
  82                                 }
  83                             }
  84                         }
  85                     }
  86                     .form-group {
  87                         margin: 0;
  88                         .Select-control {
  89                             height: 36px;
  90                             border: none;
  91                             .is-open {
  92                                 border-left-color: $blue;
  93                                 border-right-color: $blue;
  94                             }
  95                             .Select-value,
  96                             .Select-placeholder,
  97                             .Select-input {
  98                                 padding-left: 20px;
  99                                 padding-right: 50px;
 100                                 padding-top: 4px;
 101                             }
 102                             .Select-placeholder {
 103                                 color: $dark-gray;
 104                             }
 105                             .Select-arrow-zone {
 106                                 padding-right: 15px;
 107                             }
 108                         }
 109                     }
 110                     &:last-child {
 111                         border-right: none;
 112                     }
 113                 }
 114                 .Select-menu-outer {
 115                     border-left: 1px solid $blue;
 116                     border-right: 1px solid $blue;
 117                     border-bottom: 1px solid $blue;
 118                     overflow: auto;
 119                     .Select-menu {
 120                         .Select-option {
 121                             overflow: hidden;
 122                             text-overflow: ellipsis;
 123                             border-bottom: 1px solid $light-gray;
 124                             &:hover {
 125                                 background-color: $blue;
 126                                 color: $white;
 127                                 &.is-focused {
 128                                     background-color: $blue;
 129                                 }
 130                                 &.is-focused {
 131                                     background-color: $blue;
 132                                 }
 133                             }
 134                             &.is-selected {
 135                                 background-color: transparent;
 136                             }
 137                             &.is-focused {
 138                                 background-color: transparent;
 139                             }
 140                         }
 141                     }
 142                 }
 143             }
 144         }
 145     }
 146 }