summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components/_icon.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components/_icon.scss')
-rw-r--r--openecomp-ui/resources/scss/components/_icon.scss164
1 files changed, 164 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
new file mode 100644
index 0000000000..c80055d055
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_icon.scss
@@ -0,0 +1,164 @@
+$image-icon-normal-size: 20px;
+
+.icon-component {
+ display: inline-flex;
+ align-items: center;
+
+ &.clickable:hover {
+ cursor: pointer;
+ }
+ .icon-label {
+ color: $blue;
+ }
+ &.disabled {
+ .icon-label {
+ color: $tlv-light-gray;
+ opacity: 0.7;
+ }
+ }
+ .icon {
+ width: $image-icon-normal-size;
+ height: $image-icon-normal-size;
+ margin: 0 6px;
+ background-repeat: no-repeat;
+
+ &.trash {
+ background-image: url($trash-icon);
+ }
+
+ &.artifacts {
+ background-image: url($artifacts-icon);
+ }
+
+ &.base {
+ background-image: url($base-module-icon);
+ }
+
+ &.module {
+ background-image: url($module-icon);
+ }
+
+ &.pencil {
+ background-image: url($pencil-icon);
+ }
+
+ &.check {
+ background-image: url($check-icon);
+ width: 30px;
+ height: 30px;
+ }
+
+ &.download {
+ background-image: url($download-icon);
+ width: 16px;
+ height: 14px;
+ }
+
+ &.upload {
+ background-image: url($upload-icon);
+ width: 16px;
+ height: 14px;
+ }
+ &.validation-artifacts {
+ width: 13px;
+ height: 17px;
+ position: relative;
+ top: 3px;
+ background-image: url($artifacts-regular-icon);
+ &.selected {
+ background-image: url($artifacts-selected-icon);
+ }
+ }
+ &.network {
+ background-image: url($network-icon);
+ width: 12px;
+ height: 12px;
+ &.selected {
+ background-image: url($network-selected-icon);
+ }
+ }
+ &.validation-other {
+ background-image: url($others-icon);
+ width: 12px;
+ height: 12px;
+ &.selected {
+ background-image: url($others-selected-icon);
+ }
+ }
+ &.volume {
+ width: 15px;
+ height: 16px;
+ background-image: url($volume-icon);
+ &.selected {
+ background-image: url($volume-selected-icon);
+ }
+ }
+ &.zip {
+ background-image: url($zip-icon);
+ height: 23px;
+ width: 29px;
+ &.selected {
+ background-image: url($zip-selected-icon);
+ }
+ }
+ &.heat {
+ background-image: url($heat-icon);
+ height: 14px;
+ width: 16px;
+ &.selected {
+ background-image: url($heat-selected-icon);
+ }
+ }
+ &.env {
+ background-image: url($env-icon);
+ height: 15px;
+ width: 16px;
+ &.selected {
+ background-image: url($env-selected-icon);
+ }
+ }
+ &.error {
+ width: 14px;
+ min-width: 14px;
+ height: 14px;
+ background-image: url($error-icon-sm);
+ }
+ &.warning {
+ height: 13px;
+ width: 15px;
+ min-width: 15px;
+ background-image: url($warning-icon-sm);
+ }
+ &.error-lg {
+ width: 17px;
+ min-width: 17px;
+ height: 17px;
+ background-image: url($error-icon-lg);
+ }
+ &.warning-lg {
+ width: 19px;
+ min-width: 19px;
+ height: 17px;
+ background-image: url($warning-icon-lg);
+ }
+ &.chevron-up {
+ background-image: url($chevron_down);
+ transform: rotate(180deg);
+ height: 7px;
+ width: 11px;
+ }
+ &.chevron-down {
+ background-image: url($chevron_down);
+ height: 7px;
+ width: 11px;
+ }
+ &.go-to-overview {
+ background-image: url($go-to-overview-icon);
+ height: 15px;
+ width: 18px;
+ &.disabled {
+ background-image: url($go-to-overview-disabled-icon);
+ }
+ }
+ }
+}