feat: special button styles and variables (#29)

aziontech · Nov 13, 2024 · a518a0d · a518a0d
1 parent 8a49314
commit a518a0d
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 3 deletions.
diff --git a/src/azion-dark/_custom.scss b/src/azion-dark/_custom.scss
@@ -1 +1,2 @@
-@import './custom/selection'
+@import './custom/selection';
+@import './custom/special-button';
diff --git a/src/azion-dark/custom/_special-button.scss b/src/azion-dark/custom/_special-button.scss
@@ -0,0 +1,56 @@
+.special-button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 1px;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  transition: background-color 0.3s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    filter: blur(12px);
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 1),  /* white */
+      rgba(0, 20, 255, 1),     /* violet */
+      rgba(255, 120, 0, 1)     /* orange */
+    );
+    animation: rotate-background 8s linear infinite;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  &:hover .special-button-content {
+      background-color: var(--special-button-hover-bg);
+      box-shadow: inset 0 0 0 0px var(--surface-border);
+  }
+}
+
+.special-button-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.75rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  background-color: var(--special-button-bg);
+  transition: background-color 0.3s ease;
+  box-shadow: inset 0 0 0 .5px var(--surface-border);
+}
+
+@keyframes rotate-background {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/azion-light/_custom.scss b/src/azion-light/_custom.scss
@@ -1 +1,2 @@
-@import './custom/selection'
+@import './custom/selection';
+@import './custom/special-button';
diff --git a/src/azion-light/custom/_special-button.scss b/src/azion-light/custom/_special-button.scss
@@ -0,0 +1,56 @@
+.special-button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 1px;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  transition: background-color 0.3s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    filter: blur(12px);
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 1),  /* white */
+      rgba(0, 20, 255, 1),     /* violet */
+      rgba(255, 120, 0, 1)     /* orange */
+    );
+    animation: rotate-background 8s linear infinite;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  &:hover .special-button-content {
+      background-color: var(--special-button-hover-bg);
+      box-shadow: inset 0 0 0 0px var(--surface-border);
+  }
+}
+
+.special-button-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.75rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  background-color: var(--special-button-bg);
+  transition: background-color 0.3s ease;
+  box-shadow: inset 0 0 0 .5px var(--surface-border);
+}
+
+@keyframes rotate-background {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/azion/_custom.scss b/src/azion/_custom.scss
@@ -1 +1,2 @@
-@import './custom/selection'
+@import './custom/selection';
+@import './custom/special-button';
diff --git a/src/azion/_variables.scss b/src/azion/_variables.scss
@@ -227,6 +227,8 @@ $colors: (
   --carousel-indicator: #e9ecef20;
   --carousel-indicator-highlight: #ededed;
   --carousel-indicator-hover: #dee2e640;
+  --special-button-bg: rgba(23, 23, 23, 0.85);
+  --special-button-hover-bg: rgba(23, 23, 23, 0.25);
 }
 
 :root.azion.azion-light {
@@ -387,4 +389,6 @@ $colors: (
   --carousel-indicator: #e9ecef;
   --carousel-indicator-highlight: #1c1c1c;
   --carousel-indicator-hover: #dee2e6;
+  --special-button-bg: rgba(255, 255, 255);
+  --special-button-hover-bg: rgba(255, 255, 255, 0.85);
 }
diff --git a/src/azion/custom/_special-button.scss b/src/azion/custom/_special-button.scss
@@ -0,0 +1,57 @@
+.special-button {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    padding: 1px;
+    background-color: transparent;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    transition: background-color 0.3s ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      filter: blur(12px);
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 1),  /* white */
+        rgba(0, 20, 255, 1),     /* violet */
+        rgba(255, 120, 0, 1)     /* orange */
+      );
+      animation: rotate-background 8s linear infinite;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &:hover .special-button-content {
+        background-color: var(--special-button-hover-bg);
+        box-shadow: inset 0 0 0 0px var(--surface-border);
+    }
+  }
+
+  .special-button-content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0 0.75rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    background-color: var(--special-button-bg);
+    transition: background-color 0.3s ease;
+    box-shadow: inset 0 0 0 .5px var(--surface-border);
+  }
+
+  @keyframes rotate-background {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+