Added a screen offset utility class

webpixels · Dec 8, 2022 · fc9cd74 · fc9cd74
1 parent 0a36dc8
commit fc9cd74
Showing 1 changed file with 24 additions and 14 deletions.
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"],