eSales Media Git repositories
Browse code

Initial commit

Benjamin Roth authored on16/03/2023 20:22:35
Showing1 changed files
files/base/layout/css/scaffolding/spacing.scss
History View file @c584c6c
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,141 @@
1 
+html body {
2 
+  @for $n from 0 through 50 {
3 
+    // Padding
4 
+    .p-#{$n}px {
5 
+      padding: #{$n}px !important;
6 
+    }
7 
+
8 
+    .ps-#{$n}px {
9 
+      padding-left: #{$n}px !important;
10 
+    }
11 
+
12 
+    .pe-#{$n}px {
13 
+      padding-right: #{$n}px !important;
14 
+    }
15 
+
16 
+    .pt-#{$n}px {
17 
+      padding-top: #{$n}px !important;
18 
+    }
19 
+
20 
+    .pb-#{$n}px {
21 
+      padding-bottom: #{$n}px !important;
22 
+    }
23 
+
24 
+    .px-#{$n}px {
25 
+      padding-left: #{$n}px !important;
26 
+      padding-right: #{$n}px !important;
27 
+    }
28 
+
29 
+    .py-#{$n}px {
30 
+      padding-top: #{$n}px !important;
31 
+      padding-bottom: #{$n}px !important;
32 
+    }
33 
+
34 
+    // Margin
35 
+    .m-#{$n}px {
36 
+      margin: #{$n}px !important;
37 
+    }
38 
+
39 
+    .ms-#{$n}px {
40 
+      margin-left: #{$n}px !important;
41 
+    }
42 
+
43 
+    .me-#{$n}px {
44 
+      margin-right: #{$n}px !important;
45 
+    }
46 
+
47 
+    .mt-#{$n}px {
48 
+      margin-top: #{$n}px !important;
49 
+    }
50 
+
51 
+    .mb-#{$n}px {
52 
+      margin-bottom: #{$n}px !important;
53 
+    }
54 
+
55 
+    .mx-#{$n}px {
56 
+      margin-left: #{$n}px !important;
57 
+      margin-right: #{$n}px !important;
58 
+    }
59 
+
60 
+    .my-#{$n}px {
61 
+      margin-top: #{$n}px !important;
62 
+      margin-bottom: #{$n}px !important;
63 
+    }
64 
+  }
65 
+
66 
+
67 
+  /* Gap rules for grid layout */
68 
+
69 
+  @for $n from 0 through 50 {
70 
+    .gap-#{$n}px {
71 
+      gap: #{$n}px;
72 
+    }
73 
+  }
74 
+
75 
+
76 
+  /* Gap rules for flex-rows */
77 
+
78 
+  @for $n from 0 through 50 {
79 
+    .row {
80 
+      &.g-#{$n}px {
81 
+        --bs-gutter-y: 0px;
82 
+        margin: calc(-#{$n}px / 2);
83 
+
84 
+
85 
+        > * {
86 
+          padding: calc(#{$n}px / 2);
87 
+        }
88 
+
89 
+      }
90 
+
91 
+      &.gx-#{$n}px {
92 
+        --bs-gutter-y: 0px;
93 
+        margin-left: calc(-#{$n}px / 2);
94 
+        margin-right: calc(-#{$n}px / 2);
95 
+
96 
+        > * {
97 
+          padding-left: calc(#{$n}px / 2);
98 
+          padding-right: calc(#{$n}px / 2);
99 
+        }
100 
+
101 
+      }
102 
+
103 
+      &.gy-#{$n}px {
104 
+        --bs-gutter-y: 0px;
105 
+        margin-top: calc(-#{$n}px / 2);
106 
+        margin-bottom: calc(-#{$n}px / 2);
107 
+
108 
+        > * {
109 
+          padding-top: calc(#{$n}px / 2);
110 
+          padding-bottom: calc(#{$n}px / 2);
111 
+        }
112 
+
113 
+      }
114 
+    }
115 
+  }
116 
+
117 
+  .row {
118 
+    //margin-top: calc(-1 * var(--bs-gutter-y) / 2);
119 
+    //margin-bottom: calc(-1 * calc(var(--bs-gutter-y) / 2));
120 
+
121 
+
122 
+    &:not([class*="gy-"]) {
123 
+      --bs-gutter-y: var(--bs-gutter-x);
124 
+    }
125 
+
126 
+    > * {
127 
+      margin-top: 0;
128 
+      padding-left: calc(var(--bs-gutter-x) / 2);
129 
+      padding-right: calc(var(--bs-gutter-x) / 2);
130 
+      padding-top: calc(var(--bs-gutter-y));
131 
+      //padding-bottom: calc(var(--bs-gutter-y) / 2);
132 
+    }
133 
+  }
134 
+}
135 
+
136 
+.row {
137 
+  &:not([class*="gy-"]):not([class*="g-"]):not([class*="gx-"]) {
138 
+    --bs-gutter-y: calc(#{$grid-gutter-width} / 2);
139 
+    --bs-gutter-x: calc(#{$grid-gutter-width} / 2);
140 
+  }
141 
+}