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

   1 $image-icon-normal-size: 20px;
   2
   3 .icon-component {
   4   display: inline-flex;
   5   align-items: center;
   6
   7   &.clickable:hover {
   8     cursor: pointer;
   9   }
  10   .icon-label {
  11     color: $blue;
  12   }
  13   &.disabled {
  14     .icon-label {
  15       color: $tlv-light-gray;
  16                         opacity: 0.7;
  17     }
  18   }
  19   .icon {
  20     width: $image-icon-normal-size;
  21     height: $image-icon-normal-size;
  22     margin: 0 6px;
  23     background-repeat: no-repeat;
  24
  25     &.trash {
  26       background-image: url($trash-icon);
  27     }
  28
  29     &.artifacts {
  30       background-image: url($artifacts-icon);
  31     }
  32
  33     &.base {
  34       background-image: url($base-module-icon);
  35     }
  36
  37     &.module {
  38       background-image: url($module-icon);
  39     }
  40
  41     &.pencil {
  42       background-image: url($pencil-icon);
  43     }
  44
  45     &.check {
  46       background-image: url($check-icon);
  47       width: 30px;
  48       height: 30px;
  49     }
  50
  51     &.download {
  52       background-image: url($download-icon);
  53       width: 16px;
  54       height: 14px;
  55     }
  56
  57     &.upload {
  58       background-image: url($upload-icon);
  59       width: 16px;
  60       height: 14px;
  61     }
  62     &.validation-artifacts {
  63       width: 13px;
  64       height: 17px;
  65       position: relative;
  66       top: 3px;
  67       background-image: url($artifacts-regular-icon);
  68       &.selected {
  69         background-image: url($artifacts-selected-icon);
  70       }
  71     }
  72     &.network {
  73       background-image: url($network-icon);
  74       width: 12px;
  75       height: 12px;
  76       &.selected {
  77         background-image: url($network-selected-icon);
  78       }
  79     }
  80     &.validation-other {
  81       background-image: url($others-icon);
  82       width: 12px;
  83       height: 12px;
  84       &.selected {
  85         background-image: url($others-selected-icon);
  86       }
  87     }
  88     &.volume {
  89       width: 15px;
  90       height: 16px;
  91       background-image: url($volume-icon);
  92       &.selected {
  93         background-image: url($volume-selected-icon);
  94       }
  95     }
  96     &.zip {
  97       background-image: url($zip-icon);
  98       height: 23px;
  99       width: 29px;
 100       &.selected {
 101         background-image: url($zip-selected-icon);
 102       }
 103     }
 104     &.heat {
 105       background-image: url($heat-icon);
 106       height: 14px;
 107       width: 16px;
 108       &.selected {
 109         background-image: url($heat-selected-icon);
 110       }
 111     }
 112     &.env {
 113       background-image: url($env-icon);
 114       height: 15px;
 115       width: 16px;
 116       &.selected {
 117         background-image: url($env-selected-icon);
 118       }
 119     }
 120     &.error {
 121       width: 14px;
 122       min-width: 14px;
 123       height: 14px;
 124       background-image: url($error-icon-sm);
 125     }
 126     &.warning {
 127       height: 13px;
 128       width: 15px;
 129       min-width: 15px;
 130       background-image: url($warning-icon-sm);
 131     }
 132     &.error-lg {
 133       width: 17px;
 134       min-width: 17px;
 135       height: 17px;
 136       background-image: url($error-icon-lg);
 137     }
 138     &.warning-lg {
 139       width: 19px;
 140       min-width: 19px;
 141       height: 17px;
 142       background-image: url($warning-icon-lg);
 143     }
 144     &.chevron-up {
 145       background-image: url($chevron_down);
 146       transform: rotate(180deg);
 147       height: 7px;
 148       width: 11px;
 149     }
 150     &.chevron-down {
 151       background-image: url($chevron_down);
 152       height: 7px;
 153       width: 11px;
 154     }
 155     &.go-to-overview {
 156       background-image: url($go-to-overview-icon);
 157       height: 15px;
 158       width: 18px;
 159       &.disabled {
 160         background-image: url($go-to-overview-disabled-icon);
 161       }
 162     }
 163   }
 164 }