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

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