Merge pull request #30 from webpixels/1.2

1.2
webpixels · Dec 8, 2022 · 524cdc4 · 524cdc4
2 parents bb10ad9 + fc9cd74
commit 524cdc4
Show file tree

Hide file tree

Showing 18 changed files with 88 additions and 44 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.2",
+  "version": "1.2.3",
   "version_short": "1.2",
   "license": "MIT",
   "style": "dist/index.css",

diff --git a/scss/components/navbars/_navbar.scss b/scss/components/navbars/_navbar.scss
@@ -24,8 +24,9 @@
 .navbar-nav {
   --#{$prefix}nav-link-padding-x: #{$navbar-nav-link-padding-x};
   --#{$prefix}nav-link-padding-y: #{$navbar-nav-link-padding-y};
-
-  > .nav-item > .nav-link {
+
+  > .nav-item > .nav-link,
+  > .nav-link {
     background-color: var(--#{$prefix}navbar-bg);
     color: var(--#{$prefix}navbar-color);
     padding-top: var(--#{$prefix}navbar-nav-link-padding-y);

diff --git a/scss/core/variables/_grid.scss b/scss/core/variables/_grid.scss
@@ -6,12 +6,12 @@
 // scss-docs-start grid-breakpoints
 
 $breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-    lg: 992px,
-    xl: 1200px,
-    xxl: 1400px
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
 ) !default;
 
 $grid-breakpoints: if(map-has-key($theme, breakpoints), map-get($theme, breakpoints), $breakpoints);
@@ -22,11 +22,11 @@ $grid-breakpoints: if(map-has-key($theme, breakpoints), map-get($theme, breakpoi
 
 // scss-docs-start container-max-widths
 $container-max-widths: (
-    sm: 540px,
-    md: 720px,
-    lg: 960px,
-    xl: 1140px,
-    xxl: 1360px
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1360px
 ) !default;
 // scss-docs-end container-max-widths
 

diff --git a/scss/extra.scss b/scss/extra.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v1.2.2 (https://webpixels.io/)
+ * Webpixels CSS v1.2.3 (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.2 (https://webpixels.io/)
+ * Webpixels CSS v1.2.3 (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.2 (https://webpixels.io/)
+ * Webpixels CSS v1.2.3 (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.2 (https://webpixels.io/)
+ * Webpixels CSS v1.2.3 (https://webpixels.io/)
  * Copyright 2022 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */

diff --git a/scss/utilities/_utilities.scss b/scss/utilities/_utilities.scss
@@ -472,6 +472,39 @@ $utilities: map-merge($utilities, (
     values: auto hidden visible scroll
   ),
 
+  // Scroll
+  "scroll-behaviour": (
+    property: scroll-behaviour,
+    class: scroll,
+    values: auto smooth
+  ),
+  "scroll-snap-align": (
+    property: scroll-snap-align,
+    class: scroll-snap,
+    values: start end center none
+  ),
+  "scroll-snap-stop": (
+    property: scroll-snap-stop,
+    class: scroll-snap,
+    values: normal always
+  ),
+  "scroll-snap-type": (
+    property: scroll-snap-type,
+    class: scroll-snap,
+    values: (
+      none: none,
+      x: x var(--x-scroll-snap-strictness),
+      y: y var(--x-scroll-snap-strictness),
+      both: both var(--x-scroll-snap-strictness),
+    )
+  ),
+  "scroll-snap-strictness": (
+    css-var: true,
+    css-variable-name: scroll-snap-strictness,
+    class: scroll-snap,
+    values: mandatory proximity
+  ),
+
   // Transitions
   "transition-property": (
     property: transition-property,

diff --git a/scss/utilities/static/_helpers.scss b/scss/utilities/static/_helpers.scss
@@ -20,28 +20,38 @@
 //
 
 .scrollable-x {
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .scrollable-y {
-    white-space: nowrap;
-    overflow-x: hidden;
-    overflow-y: auto;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
+  white-space: nowrap;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 
+// Screen offset based on screen sizes
+@each $size, $value in $screen-widths {
+  .offset-left-#{$size} {
+    padding-left: max($grid-gutter-width * 0.5, calc((100% - $value) / 2 + $grid-gutter-width * 0.5));
+  }
+  .offset-right-#{$size} {
+    padding-right: max($grid-gutter-width * 0.5, calc((100% - $value) / 2 + $grid-gutter-width * 0.5));
+  }
+}
+
 // Fading elements
 
 [class*="faded"],

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