🔧 chore(_constants.scss): Move all inline image values to

constants
Spiderpig86 · Sep 15, 2022 · 6b5a999 · 6b5a999
1 parent adad0c4
commit 6b5a999
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 4 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -51,6 +51,7 @@
 */
 /* Breakpoints */
 /* Fonts */
+/* Images */
 /************
  * DEFAULTS *
  ************/
@@ -14787,6 +14788,130 @@ ul .divider::after {
   filter: var(--cirrus-blur);
 }
 
+@media screen and (min-width: 640px) {
+  .u-blur-none-sm {
+    --cirrus-blur: blur(0);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xs-sm {
+    --cirrus-blur: blur(0.25rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-sm-sm {
+    --cirrus-blur: blur(0.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-md-sm {
+    --cirrus-blur: blur(1rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-lg-sm {
+    --cirrus-blur: blur(1.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xl-sm {
+    --cirrus-blur: blur(3rem);
+    filter: var(--cirrus-blur);
+  }
+}
+@media screen and (min-width: 768px) {
+  .u-blur-none-md {
+    --cirrus-blur: blur(0);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xs-md {
+    --cirrus-blur: blur(0.25rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-sm-md {
+    --cirrus-blur: blur(0.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-md-md {
+    --cirrus-blur: blur(1rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-lg-md {
+    --cirrus-blur: blur(1.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xl-md {
+    --cirrus-blur: blur(3rem);
+    filter: var(--cirrus-blur);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .u-blur-none-lg {
+    --cirrus-blur: blur(0);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xs-lg {
+    --cirrus-blur: blur(0.25rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-sm-lg {
+    --cirrus-blur: blur(0.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-md-lg {
+    --cirrus-blur: blur(1rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-lg-lg {
+    --cirrus-blur: blur(1.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xl-lg {
+    --cirrus-blur: blur(3rem);
+    filter: var(--cirrus-blur);
+  }
+}
+@media screen and (min-width: 1280px) {
+  .u-blur-none-xl {
+    --cirrus-blur: blur(0);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xs-xl {
+    --cirrus-blur: blur(0.25rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-sm-xl {
+    --cirrus-blur: blur(0.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-md-xl {
+    --cirrus-blur: blur(1rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-lg-xl {
+    --cirrus-blur: blur(1.5rem);
+    filter: var(--cirrus-blur);
+  }
+
+  .u-blur-xl-xl {
+    --cirrus-blur: blur(3rem);
+    filter: var(--cirrus-blur);
+  }
+}
 .u-clear-left {
   clear: left !important;
 }

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -50,6 +50,7 @@
 */
 /* Breakpoints */
 /* Fonts */
+/* Images */
 /************
  * DEFAULTS *
  ************/

diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -51,6 +51,7 @@
 */
 /* Breakpoints */
 /* Fonts */
+/* Images */
 /************
  * DEFAULTS *
  ************/

diff --git a/src/cirrus-all.scss b/src/cirrus-all.scss
@@ -26,6 +26,7 @@
             ROUND: true,
             SHADOWS: true,
             LETTER-SPACING: true,
+            BLUR: true,
         ),
     ),
 );

diff --git a/src/components/form-ext.scss b/src/components/form-ext.scss
@@ -16,7 +16,7 @@ $generate-utility: should-generate-classes($FORMS-EXT);
         /* Checkbox */
         &.form-ext-checkbox {
             .form-ext-input:checked ~ .form-ext-label:after {
-                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
+                background-image: url($img-checkbox);
             }
 
             .form-ext-label:before {
@@ -27,7 +27,7 @@ $generate-utility: should-generate-classes($FORMS-EXT);
         /* Radio Button */
         &.form-ext-radio {
             .form-ext-input:checked ~ .form-ext-label:after {
-                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
+                background-image: url($img-radio);
             }
 
             .form-ext-label:before {

diff --git a/src/components/forms.scss b/src/components/forms.scss
@@ -92,7 +92,7 @@ $generate-utility: should-generate-classes($FORMS);
         &.search {
             background-repeat: no-repeat;
             background-position: left 0.6rem center;
-            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>'); /* NEEDS FIXING */
+            background-image: url($img-search); /* NEEDS FIXING */
             padding-left: 2rem !important;
             -webkit-appearance: none; /* Fix Safari issue */
         }

diff --git a/src/internal/_constants.scss b/src/internal/_constants.scss
@@ -12,3 +12,9 @@ $font-size-s: 0.875rem;
 $font-size-m: 1rem;
 $font-size-l: 1.25rem;
 $font-size-xl: 1.5rem;
+
+/* Images */
+$img-chevron: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E";
+$img-search: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>';
+$img-checkbox: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E";
+$img-radio: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E";
diff --git a/src/internal/_flags.scss b/src/internal/_flags.scss
@@ -15,6 +15,7 @@ $MARGIN-PADDING: 'MARGIN-PADDING';
 $RESET: 'RESET';
 
 // Components
+$ACCORDION: 'ACCORDION';
 $AVATAR: 'AVATAR';
 $BREADCRUMB: 'BREADCRUMB';
 $BUTTON: 'BUTTON';