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-medium;
  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.trash-o {
  61
  62                                 fill: $dark-gray;
  63                         }
  64                         .svg-icon.error-circle {
  65                                 fill: $red;
  66                         }
  67                         .svg-icon.check-circle {
  68                                 fill: $green;
  69                         }
  70                         .select-action-table-row {
  71                                 display: flex;
  72                                 flex: 1;
  73                                 border: 1px solid;
  74                                 border-color: $light-gray;
  75                                 &.has-error {
  76                                         border-color: $red;
  77                                 }
  78                                 .select-action-table-cell {
  79                                         flex: 1;
  80                                         border-right: 1px solid;
  81                                         border-color: $light-gray;
  82                                         @extend .body-1;
  83                                         .dropdown-multi-select {
  84                                                 .form-group {
  85                                                         .Select{
  86                                                                 &.is-open {
  87                                                                         border: 1px solid $blue;
  88                                                                 }
  89                                                         }
  90                                                 }
  91                                         }
  92                                         .form-group {
  93                                                 margin: 0;
  94                                                 .Select-control {
  95                                                         height:36px;
  96                                                         border: none;
  97                                                         .is-open {
  98                                                                 border-left-color: $blue;
  99                                                                 border-right-color: $blue;
 100                                                         }
 101                                                         .Select-value, .Select-placeholder, .Select-input {
 102                                                                 padding-left: 20px;
 103                                                                 padding-right: 50px;
 104                                                                 padding-top: 4px;
 105
 106                                                         }
 107                                                         .Select-placeholder {
 108                                                                 color: $dark-gray;
 109                                                         }
 110                                                         .Select-arrow-zone {
 111                                                                 padding-right: 15px;
 112                                                         }
 113                                                 }
 114                                         }
 115                                         &:last-child {
 116                                                 border-right: none;
 117                                         }
 118                                 }
 119                                 .Select-menu-outer {
 120                                                 border-left: 1px solid $blue;
 121                                                 border-right: 1px solid $blue;
 122                                                 border-bottom: 1px solid $blue;
 123                                                 overflow: auto;
 124                                                 .Select-menu {
 125                                                         display: inline-block;
 126                                                         .Select-option {
 127                                                                 width: 100%;
 128                                                                 display: inline-block;
 129                                                                 border-bottom: 1px solid $light-gray;
 130                                                                 &:hover {
 131                                                                         background-color: $blue;
 132                                                                         color: $white;
 133                                                                         &.is-focused {
 134                                                                                 background-color: $blue;
 135                                                                         }
 136                                                                         &.is-focused {
 137                                                                                 background-color: $blue;
 138                                                                         }
 139                                                                 }
 140                                                                 &.is-selected {
 141                                                                         background-color: transparent;
 142                                                                 }
 143                                                                 &.is-focused {
 144                                                                         background-color: transparent;
 145                                                                 }
 146                                                         }
 147                                                 }
 148                                         }
 149                         }
 150                 }
 151         }
 152 }