Merge pull request #32 from webpixels/1.2

1.2
webpixels · Dec 30, 2022 · 236e9d2 · 236e9d2
2 parents 6956f0a + 113e4c7
commit 236e9d2
Show file tree

Hide file tree

Showing 17 changed files with 139 additions and 124 deletions.
diff --git a/dist/extra.css b/dist/extra.css
diff --git a/dist/extra.css.map b/dist/extra.css.map
diff --git a/dist/index.css b/dist/index.css
diff --git a/dist/index.css.map b/dist/index.css.map
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.css.map b/dist/main.css.map
diff --git a/dist/utility.css b/dist/utility.css
diff --git a/dist/utility.css.map b/dist/utility.css.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@webpixels/css",
   "description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "version_short": "1.2",
   "license": "MIT",
   "style": "dist/index.css",

diff --git a/scss/core/variables/_sizing.scss b/scss/core/variables/_sizing.scss
@@ -29,13 +29,20 @@ $percentage-sizers: map-merge((
     15\/10: 150%,
 ), $percentage-sizers);
 
-// This variable affects the `.pc-*`, `.max-pc-*` classes.
+// This variable affects the `.w-screen-*`, `.max-w-screen-*` classes.
+$screen-width-sm: 640px !default;
+$screen-width-md: 768px !default;
+$screen-width-lg: 1024px !default;
+$screen-width-xl: 1280px !default;
+$screen-width-xxl: 1536px !default;
+
+// Map
 $screen-widths: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $screen-widths: map-merge((
-    screen-sm: 640px,
-    screen-md: 768px,
-    screen-lg: 1024px,
-    screen-xl: 1280px,
-    screen-xxl: 1536px
+  screen-sm: $screen-width-sm,
+  screen-md: $screen-width-md,
+  screen-lg: $screen-width-lg,
+  screen-xl: $screen-width-xl,
+  screen-xxl: $screen-width-xxl
 ), $screen-widths);
diff --git a/scss/extra.scss b/scss/extra.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v1.2.4 (https://webpixels.io/)
+ * Webpixels CSS v1.2.5 (https://webpixels.io/)
  * Copyright 2022 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/index.scss b/scss/index.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v1.2.4 (https://webpixels.io/)
+ * Webpixels CSS v1.2.5 (https://webpixels.io/)
  * Copyright 2022 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/light.scss b/scss/light.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v1.2.4 (https://webpixels.io/)
+ * Webpixels CSS v1.2.5 (https://webpixels.io/)
  * Copyright 2022 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/main.scss b/scss/main.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v1.2.4 (https://webpixels.io/)
+ * Webpixels CSS v1.2.5 (https://webpixels.io/)
  * Copyright 2022 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/utilities/static/_gradient.scss b/scss/utilities/static/_gradient.scss
@@ -28,6 +28,14 @@
     background-image: linear-gradient(to top left, var(--#{$prefix}gradient)) !important;
   }
 
+  // For transparent values
+  .start-transparent,
+  .start-transparent-hover:hover {
+    --#{$prefix}start-color: transparent;
+    --#{$prefix}gradient: var(--#{$prefix}start-color), var(--#{$prefix}end-color, rgba(0, 0, 0, 0));
+  }
+
+  // For color values
   @each $color, $value in $colors {
     $end-color: rgba(0, 0, 0, 0);
     .start-#{$color},
@@ -37,6 +45,12 @@
     }
   }
 
+  .middle-transparent,
+  .middle-transparent-hover:hover {
+    --#{$prefix}middle-color: transparent;
+    --#{$prefix}gradient: var(--#{$prefix}start-color), var(--#{$prefix}middle-color), var(--#{$prefix}end-color, rgba(0, 0, 0, 0));
+  }
+
   @each $color, $value in $colors {
     $end-color: rgba($value, 0);
     .middle-#{$color},
@@ -46,6 +60,11 @@
     }
   }
 
+  .end-transparent,
+  .end-transparent-hover:hover {
+    --#{$prefix}end-color: transparent;
+  }
+
   @each $color, $value in $colors {
     .end-#{$color},
     .end-#{$color}-hover:hover {