border-gradient mixin

appwrite · Sep 1, 2023 · cf92464 · cf92464
1 parent 8bcd9c8
commit cf92464
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss
@@ -1,14 +1,14 @@
 @use '../abstract' as *;
 
 .#{$p}-button {
-  --p-button-border-radius: var(--border-radius-small);
-  --p-button-border-size: #{pxToRem(1)};
+  --m-border-radius: var(--border-radius-small);
+  --m-border-size: #{pxToRem(1)};
 
   background: linear-gradient(135deg, hsl(var(--aw-color-primary-500)) 0%, hsl(var(--aw-color-primary-500)) 61%, hsl(var(--aw-color-secondary-100)) 100%);
   background-origin: border-box;
   display:flex; justify-content:center; align-items:center; align-self:start; gap:pxToRem(8);
   padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40);
-  border-radius:var(--p-button-border-radius); border:solid var(--p-button-border-size) transparent;
+  border-radius:var(--m-border-radius); border:solid var(--m-border-size) transparent;
   text-align:center; transition:var(--transition); user-select:none; color:hsl(var(--aw-color-neutral-0)); font-weight: 500;
 
   .#{$p}-inline-tag { margin-inline-end:pxToRem(-2); background:rgba(255, 255, 255, 0.24); }
@@ -25,25 +25,11 @@
   &:where(#{$disabled}) { opacity:0.4; cursor:initial; }
 
   &.is-secondary {
-    background-image:none;
+    background-image: none;
     position: relative;
     border-width: 0;
 
-
-
-    &::before,
-	  &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--p-button-border-radius);
-      border: var(--p-button-border-size) solid transparent;
-      background: var(--p-button-border-gradient) border-box;
-      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: destination-out;
-      mask-composite: exclude;
-      pointer-events: none;
-    }
+    @include border-gradient;
 
     .#{$p}-inline-tag {
       background:rgba(255, 64, 120, 0.10);
@@ -61,15 +47,15 @@
       }
 
       &::before {
-        --p-button-border-gradient: linear-gradient(
+        --m-border-gradient: linear-gradient(
           to bottom,
           rgba(253, 54, 110, 0.48) 0%,
           rgba(253, 54, 110, 0) 180%
         );
       }
 
       &::after {
-        --p-button-border-gradient: radial-gradient(
+        --m-border-gradient: radial-gradient(
           42.86% 42.86% at 50.55% -0%,
           rgba(255, 255, 255, 0.2) 0%,
           rgba(255, 255, 255, 0) 100%
@@ -82,14 +68,14 @@
 
 
         &::before {
-          --p-button-border-gradient: linear-gradient(
+          --m-border-gradient: linear-gradient(
             180deg, rgba(253, 54, 110, 0.64) 0%,
             rgba(253, 54, 110, 0.00) 163.1%
             );
           }
 
           &::after {
-            --p-button-border-gradient: radial-gradient(
+            --m-border-gradient: radial-gradient(
               42.86% 42.86% at 50.55% 0%,
               rgba(255, 255, 255, 0.20) 0%,
               rgba(255, 255, 255, 0.00) 100%
@@ -102,12 +88,12 @@
         box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
 
         &::before {
-          --p-button-border-gradient: 
+          --m-border-gradient: 
           linear-gradient(180deg, rgba(253, 54, 110, 0.64) 0%, rgba(253, 54, 110, 0.00) 163.1%);
         }
 
         &::after {
-          --p-button-border-gradient: 
+          --m-border-gradient: 
           radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.00) 100%);
         }
 
@@ -130,12 +116,12 @@
       }
 
       &::before {
-        --p-button-border-gradient: 
+        --m-border-gradient: 
         linear-gradient(180deg, rgba(253, 54, 110, 0.19) 0%, rgba(253, 54, 110, 0.48) 100%);
       }
 
       &::after {
-        --p-button-border-gradient: 
+        --m-border-gradient: 
         radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%);
       }
 

diff --git a/src/scss/abstract/mixins/_border-gradient.scss b/src/scss/abstract/mixins/_border-gradient.scss
@@ -0,0 +1,18 @@
+@mixin border-gradient {
+  position: relative;
+
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--m-border-radius);
+    border: var(--m-border-size) solid transparent;
+    background: var(--m-border-gradient) border-box;
+    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+}
diff --git a/src/scss/abstract/mixins/_index.scss b/src/scss/abstract/mixins/_index.scss
@@ -2,4 +2,5 @@
 @forward "break-word";
 @forward "scroll";
 @forward "numeric-badge";
-@forward "checked-badge";
+@forward "checked-badge";
+@forward "border-gradient";