Adds variabgles to border-with modules. Adds one more step to scale

tachyons-css · Jul 12, 2023 · 88dd6ac · 88dd6ac
1 parent c8158e6
commit 88dd6ac
Showing 1 changed file with 25 additions and 20 deletions.
diff --git a/src/_border-widths.css b/src/_border-widths.css
@@ -12,6 +12,7 @@
      2 = 2nd step in border-width scale
      3 = 3rd step in border-width scale
      4 = 4th step in border-width scale
+     5 = 5th step in border-width scale
 
    Media Query Extensions:
      -s = small
@@ -20,11 +21,12 @@
 
 */
 
-.bw0 { border-width: 0; }
-.bw1 { border-width: 1px; }
-.bw2 { border-width: 2px; }
-.bw3 { border-width: 4px; }
-.bw4 { border-width: 8px; }
+.bw0 { border-width: var(--border-width-0,0); }
+.bw1 { border-width: var(--border-width-1,1px); }
+.bw2 { border-width: var(--border-width-2,2px); }
+.bw3 { border-width: var(--border-width-3,4px); }
+.bw4 { border-width: var(--border-width-4,8px); }
+.bw5 { border-width: var(--border-width-5,16px); }
 
 /* Resets */
 .bt-0 { border-top-width: 0; }
@@ -33,35 +35,38 @@
 .bl-0 { border-left-width: 0; }
 
 @media (--breakpoint-small) {
-  .bw0-s { border-width: 0; }
-  .bw1-s { border-width: 1px; }
-  .bw2-s { border-width: 2px; }
-  .bw3-s { border-width: 4px; }
-  .bw4-s { border-width: 8px; }
+  .bw0-s { border-width: var(--border-width-0,0); }
+  .bw1-s { border-width: var(--border-width-1,1px); }
+  .bw2-s { border-width: var(--border-width-2,2px); }
+  .bw3-s { border-width: var(--border-width-3,4px); }
+  .bw4-s { border-width: var(--border-width-4,8px); }
+  .bw5-s { border-width: var(--border-width-5,16px); }
   .bt-0-s { border-top-width: 0; }
   .br-0-s { border-right-width: 0; }
   .bb-0-s { border-bottom-width: 0; }
   .bl-0-s { border-left-width: 0; }
 }
 
 @media (--breakpoint-medium) {
-  .bw0-m { border-width: 0; }
-  .bw1-m { border-width: 1px; }
-  .bw2-m { border-width: 2px; }
-  .bw3-m { border-width: 4px; }
-  .bw4-m { border-width: 8px; }
+  .bw0-m { border-width: var(--border-width-0,0); }
+  .bw1-m { border-width: var(--border-width-1,1px); }
+  .bw2-m { border-width: var(--border-width-2,2px); }
+  .bw3-m { border-width: var(--border-width-3,4px); }
+  .bw4-m { border-width: var(--border-width-4,8px); }
+  .bw5-m { border-width: var(--border-width-5,16px); }
   .bt-0-m { border-top-width: 0; }
   .br-0-m { border-right-width: 0; }
   .bb-0-m { border-bottom-width: 0; }
   .bl-0-m { border-left-width: 0; }
 }
 
 @media (--breakpoint-large) {
-  .bw0-l { border-width: 0; }
-  .bw1-l { border-width: 1px; }
-  .bw2-l { border-width: 2px; }
-  .bw3-l { border-width: 4px; }
-  .bw4-l { border-width: 8px; }
+  .bw0-l { border-width: var(--border-width-0,0); }
+  .bw1-l { border-width: var(--border-width-1,1px); }
+  .bw2-l { border-width: var(--border-width-2,2px); }
+  .bw3-l { border-width: var(--border-width-3,4px); }
+  .bw4-l { border-width: var(--border-width-4,8px); }
+  .bw5-l { border-width: var(--border-width-5,16px); }
   .bt-0-l { border-top-width: 0; }
   .br-0-l { border-right-width: 0; }
   .bb-0-l { border-bottom-width: 0; }