extract @k8slens/icon

Signed-off-by: Gabriel <gaccettola@mirantis.com>
2025-05-20 05:10:56 +00:00 · 2023-05-30 20:48:35 +02:00
1 parent 7a4f30ab61
commit 25b89adcf1
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.Icon {
+  --size: 21px;
+  --small-size: 18px;
+  --smallest-size: 16px;
+  --big-size: 32px;
+  --color-active: var(--iconActiveColor);
+  --bgc-active: var(--iconActiveBackground);
+  --focus-color: var(--icon-focus-color, var(--blue));
+
+  display: inline-flex;
+  flex-shrink: 0;
+  font-style: normal;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  user-select: none;
+  box-sizing: content-box; // allow to use padding for outer spacing
+  -webkit-user-select: none; /* safari */
+  -moz-user-select: none; /* firefox */
+
+  font-size: var(--size);
+  width: var(--size);
+  height: var(--size);
+
+  &.smallest {
+    font-size: var(--smallest-size);
+    width: var(--smallest-size);
+    height: var(--smallest-size);
+  }
+
+  &.small {
+    font-size: var(--small-size);
+    width: var(--small-size);
+    height: var(--small-size);
+  }
+
+  &.big {
+    font-size: var(--big-size);
+    width: var(--big-size);
+    height: var(--big-size);
+  }
+
+  // material-icon
+  &.material {
+    > .icon {
+      font-family: "Material Icons";
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      display: inline-block;
+      line-height: 1;
+      text-transform: none;
+      letter-spacing: normal;
+      word-wrap: normal;
+      white-space: nowrap;
+      direction: ltr;
+
+      /* Support for all WebKit browsers. */
+      -webkit-font-smoothing: antialiased;
+      /* Support for Safari and Chrome. */
+      text-rendering: optimizeLegibility;
+      /* Support for Firefox. */
+      -moz-osx-font-smoothing: grayscale;
+      /* Support for IE. */
+      font-feature-settings: 'liga';
+    }
+  }
+
+  // inline svg icon
+  &.svg {
+    box-sizing: content-box;
+
+    > .icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    svg {
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+
+      * {
+        fill: currentColor;
+      }
+
+      line {
+        stroke: currentColor;
+      }
+    }
+  }
+
+  &.disabled {
+    opacity: .5;
+    color: inherit !important;
+    cursor: not-allowed !important;
+  }
+
+  &.sticker {
+    background: var(--colorOk);
+    color: var(--textColorAccent);
+    border-radius: 50%;
+    box-sizing: content-box;
+    padding: 8px * 0.5;
+  }
+
+  &.active {
+    color: var(--color-active);
+    box-shadow: 0 0 0 2px var(--iconActiveBackground);
+    background-color: var(--iconActiveBackground);
+  }
+
+  &.interactive {
+    cursor: pointer;
+    transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
+    border-radius: var(--border-radius);
+
+    &.focusable:focus-visible {
+      box-shadow: 0 0 0 2px var(--focus-color);
+    }
+
+    &:hover {
+      @extend .active;
+    }
+  }
+}