diff --git a/index.html b/index.html index f6108e3..862522b 100644 --- a/index.html +++ b/index.html @@ -1,1020 +1,1435 @@ - - - + + - @ztimson/css-utils - + + + +
- -
-
-

@ztimson/css-utils

-
-

CSS Utils is a css library based on bootstrap. At 1/3 the size, its all the utilities without the bloat.

-

Some additional utilities have been added & a few have been renamed to conform to convention or remove redundancy.

-
+ + -

Setup

-
-

Install

-

NPM

- 

-// Install
-npm install @ztimson/css-utils
+			
+			

 
-// Import one of: (CSS/minified/SCSS)
-@import url("@ztimson/css-utils/dist/css-utils.css");
+				
+				

+					

+						☀︎
+						

+							

+						

+						☽
+					

+					
CSS Utility Library

+					
@ztimson/css-utils

+					
Bootstrap-inspired utilities at half the size. All theming through CSS variables — no build step required.

+					

+						
< 100 KBUncompressed

+						

+						
20+Utility Groups

+						

+						
CSS varsRuntime Theming

+					

+				

+
+				
+				

+					

+						
Install
setup
+					

+					

+						
NPM

+						
npm install @ztimson/css-utils

+						
Import (pick one)

+						
@import url("@ztimson/css-utils/dist/css-utils.css");
 @import url("@ztimson/css-utils/dist/css-utils.min.css");
-@import url("@ztimson/css-utils/src/main.scss");
-				

-				

-				
Script Tags

-				

-<!-- Include one of -->
-<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css" ></link>
-<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.min.css" ></link>
-<link rel="stylesheet" href="https://css.zakscode.com/src/main.scss" ></link>
-				

-			

-			

-				
Theming

-				
Theming is minimal since its so opinionated. Its all done through CSS variables allowing runtime manipulation without having to recompile.

-				

-// Theme colors -- what ever you like
---theme-backdrop: #dddddd; // Background color of body, not to be confused with `--theme-clear`
---theme-primary: #ff0000;
---theme-accent: #0000ff;
---theme-info: #6157cc;
---theme-success: #65c147;
---theme-warn: #d88750;
---theme-danger: #bf4f4f;
---theme-black: black;
---theme-white: white;
+@import url("@ztimson/css-utils/src/main.scss");

+						
CDN

+						
<link rel="stylesheet" href="https://css.zakscode.com/dist/css-utils.css">

+					

+				

 
-// Misc
---theme-animation: 0.2s linear; // Animation style
---theme-content-width: 1100px; // Max width of `.clamped` content
---theme-font: Arial, sans-serif; // Forces font globally
+				
+				

+					

+						
Theming
setup
+					

+					

+						
All theming through CSS variables — swap them at runtime without recompiling.

+						
:root {
+	--theme-primary: #4979de;
+	--theme-primary-contrast: black;
+	--theme-accent: #2caec0;
+	--theme-accent-contrast: black;
+
+	--theme-info: #6157cc;
+	--theme-success: #65c147;
+	--theme-warn: #d88750;
+	--theme-danger: #bf4f4f;
+	--theme-black: black;
+	--theme-white: white;
+
+	--theme-animation: 0.2s linear;
+	--theme-content-width: 1100px;
+	--theme-font: 'Arial', sans-serif;
+}
 
-// Light theme
 .theme-light {
-  --theme-clear: #ffffff; // Content background (Usually white or off-black which contrasts --theme-text)
-  --theme-text: #000000; // Text color (Should contrast --theme-clear)
-  --theme-muted: #6c757d; // Muted text color (Should have less than contrast than --theme-text)
+	--theme-background: #fafafa;
+	--theme-background-contrast: white;
+
+	--theme-surface: #ffffff;
+	--theme-border: #E5E7EB;
+	--theme-muted: #6c757d;
+	--theme-text: #000000;
+
+	--theme-lighter: rgba(255, 255, 255, 0.05);
+	--theme-darker: rgba(0, 0, 0, 0.05);
 }
 
-// Dark theme
-.theme-dark {
-  --theme-clear: #2e2e2e; // Content background (Usually white or off-black which contrasts --theme-text)
-  --theme-text: #ffffff; // Text color (Should contrast --theme-clear)
-  --theme-muted: #cccccc; // Muted text color (Should have less than contrast than --theme-text)
-}
+.theme-dark  {
+	--theme-background: #1a1a1a;
+	--theme-background-contrast: black;
 
-// Multiple themes can be toggled via CSS classes
-.theme-custom {
-  ...
-}
-				

+	--theme-surface: #2e2e2e;
+	--theme-border: #374151;
+	--theme-muted: #cccccc;
+	--theme-text: #ffffff;
 
-				
The generated breakpoints & margin/padding sizes can also be adjusted through SCSS.

-				

-$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size
-$sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc...
-				

-			

-
-			
Utilities

-			

-				
Alignment

-				
.align-[x|y]-[xs|sm|md|lg|xl]-[start|end]

-				


-				
text-align & vertical-align are used with align-x & align-y respectively.

-				

-					

-						

-							
.align-x-start

-						

-						

-							
.align-x

-						

-						

-							
.align-x-end

-						

-					

-					
-						
-							
-							
-							
-						
-					

-								.align-y-end
-							
-								.align-y
-							
-								.align-y-start
-							

-				

-			

-
-			

-				
Animations

-				
.animate-[color|none|opacity|pos|trans]

-				


-				
Style changes will be animated using the --theme-animation variable

-				

-					

-						
.animate

-					

-					

-						

-					

-				

-				

-					

-						
.animate-color

-					

-					

-						

-					

-				

-				

-					

-						
.animate-opacity

-					

-					

-						

-					

-				

-				

-					

-						
.animate-none

-					

-					

-						

-					

-				

-				

-					

-						
.animate-pos

-					

-					

-						

-					

-				

-				

-					

-						
.animate-trans

-					

-					

-						

+	--theme-lighter: rgba(255, 255, 255, 0.1);
+	--theme-darker: rgba(0, 0, 0, 0.1);
+}
- -
+ +
+
+

Fixes

utility +
+

Opt-in opinionated resets. Apply .fix to enable all, or use granular classes.

+
+ .[no-]fix + .[no-]fix-anchor + .[no-]fix-button + .[no-]fix-dom + .[no-]fix-focus + .[no-]fix-font + .reset +
+
+
Anchor fix example
+
+ This link uses .fix-anchor — styled with theme color, underlines on hover with cursor +
+
+ This link uses .no-fix / reset — inherits all styles, no decoration +
+
+
-
-

Borders

-

Color

-
.b-[accent|black|danger|info|muted|primary|success|text|warn|white]
-

-
-
.b-accent
-
.b-black
-
.b-danger
-
.b-info
-
.b-muted
-
.b-primary
-
.b-success
-
.b-text
-
.b-warn
-
.b-white
-
-
-

Radius

-
.br-[0-5]
-

-
-
.br-0
-
.br-1
-
.br-2
-
.br-3
-
.br-4
-
.br-5
-
.br-pill
-
.br-circle
-
-
-

Style

-
.b-[xs|sm|md|lg|xl]-[dash|dot|double|none|solid]
-

-
-
.b-dash
-
.b-dot
-
.b-double
-
.b-none
-
.b-solid
-
-
-

Width

-
.b[b|e|s|t]-[xs|sm|md|lg|xl]-[0-5]
-

-
-
.b-0
-
.b-1
-
.b-2
-
.b-3
-
.b-4
-
.b-5
-
-
-
.bb-5
-
.be-5
-
.bs-5
-
.bt-5
-
-
+ +
+
+

Misc

utility +
-
-

Colors

-

Background

-
.bg-[accent|backdrop|black|clear|danger|info|muted|primary|success|transparent|text|warn|white]
-

-
-
.bg-accent
-
.bg-backdrop
-
.bg-black
-
.bg-container
-
.bg-danger
-
.bg-info
-
.bg-muted
-
.bg-primary
-
.bg-success
-
.bg-transparent
-
.bg-text
-
.bg-warn
-
.bg-white
-
-
-

Borders

-
.b-[accent|black|clear|danger|info|muted|primary|success|text|warn|white]
-

-
-
.b-accent
-
.b-black
-
.b-danger
-
.b-info
-
.b-muted
-
.b-primary
-
.b-success
-
.b-text
-
.b-warn
-
.b-white
-
-
-

Foreground

-
.fg-[accent|black|danger|info|muted|primary|success|text|warn|white]
-

-
-
.fg-accent
-
.fg-black
-
.fg-clear
-
.fg-danger
-
.fg-info
-
.fg-muted
-
.fg-primary
-
.fg-success
-
.fg-text
-
.fg-warn
-
.fg-white
-
-
- -
-

Cursors

-
.curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|hover|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]
-

-
-
.curs-alias
-
.curs-auto
-
.curs-cell
-
.curs-col-resize
-
.curs-copy
-
.curs-crosshair
-
.curs-default
-
.curs-grab
-
.curs-grabbing
-
.curs-help
-
.curs-hover
-
.curs-move
-
.curs-not-allowed
-
.curs-pointer
-
.curs-progress
-
.curs-row-resize
-
.curs-text
-
.curs-none
-
.curs-wait
-
.curs-vertical-text
-
.curs-zoom-in
-
.curs-zoom-out
-
-
- -
-

Display

-
.d-[xs|sm|md|lg|xl]-[block|flex|grid|inline|inline-block|inline-flex|inline-grid|none|table|table-cell|table-row]
-
- -
-

Flex

-

Direction

-
.flex-[xs|sm|md|lg|xl]-[c|r|rc|rr]
-

-
-
-
.flex-c
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.flex-cr
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
-
-
-
.flex-r
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.flex-rr
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
-

Justify / Align

-
.justify-[xs|sm|md|lg|xl]-[around|between|center|end|evenly|start]
-

-
-
-
.justify-start
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.justify-center
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.justify-end
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
-
-
.justify-around
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.justify-between
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.justify-evenly
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
-
.align-[xs|sm|md|lg|xl]-[content|items|self]-[baseline|center|end|start|stretch]
-

-
-
.align-self-baseline
-
.align-self-center
-
.align-self-end
-
.align-self-start
-
.align-self-stretch
-
-
-

Order

-
.order-[xs|sm|md|lg|xl]-[0-5]
-

-
-
.order-5
-
.order-4
-
.order-3
-
.order-2
-
.order-1
-
.order-0
-
-
-

Size

-
.flex-[xs|sm|md|lg|xl]-[grow|shrink]-[0-3]
-

-
-
.flex-grow-1
-
.flex-shrink-1
-
-
-
.flex-grow-1
-
.flex-grow-2
-
-
-
.flex-fill-[even]
-

-
-
.flex-fill (Matches content ratio)
-
.flex-fill
-
.flex-fill
-
-
-
.flex-fill-even (Doesn't match content ratio)
-
.flex-fill-even
-
.flex-fill-even
-
-
-

Wrap

-
.flex-[xs|sm|md|lg|xl]-[nowrap|wrap]
-

-
-
-
.flex-nowrap
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
.flex-wrap
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
- -
-

Float

-
.float-[xs|sm|md|lg|xl]-[end|none|start]
-

-
-
.float-none
-
.float-end
-
.float-start
-
-
- -
-

Font Style

-

Decoration

-
.fs-[italic|none|strike|underline]
-

-
- .fs-italic - .fs-none - .fs-strike - .fs-underline -
-
-

Size

-
.fs-[1-7]
-

-
- .fs-1 - .fs-2 - .fs-3 - .fs-4 - .fs-5 - .fs-6 - .fs-7 -
-
-

Weight

-
.fs-[bold|bolder|lighter|normal]
-

-
- .fs-bold - .fs-bolder - .fs-lighter - .fs-normal -
-
-

Wrapping

-
.fs-[break|nowrap|truncate|wrap]
-

-
- - - - - - - - - - - - - - - - - -
.fs-break - Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit -
.fs-nowrap - Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit -
.fs-truncate - Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit -
.fs-wrap - Lorem ipsum dolor sit amet elitr sit. Consetetur dolore in ipsum consetetur in voluptua ut accusam consetetur commodo voluptua amet dolore ipsum. Sit amet sit -
-
-
- -
-

Hover

-
.curs-hover|.hover
-

-
-
.curs-hover
-
.hover
-
-
- -
-

Object Fit

-
.fit-[contain|cover|fill|scale|none]
-

-
-
- logo - .fit-contain -
-
- logo - .fit-cover -
-
- logo - .fit-fill -
-
- logo - .fit-scale -
-
- logo - .fit-none -
-
-
- -
-
-

Overflow

-
.overflow-[x|y]-[auto|hidden|scroll|visible]
-

-
-
-
- .overflow-auto +
+
Center — .center
+
+
+ .center
-
-
- .overflow-hidden +
+ +
+
Clamp — .clamp
+
+
+ .clamp — restricted to --theme-content-width
-
-
- .overflow-scroll +
+ +
+
Anchor — .anchor-c .anchor-e .anchor-s
+
+
.anchor-s
+
.anchor-c
+
.anchor-e
+
+
+
+
+
+ + +
+
+

Animate

utility +
+
.animate-[color|none|opacity|pos|trans]
+

Controlled by --theme-animation. Each variant limits which CSS properties transition.

+
+
+ .animate +
+
+
+ .animate-color +
+
+
+ .animate-opacity +
+
+
+ .animate-pos +
+
+
+ .animate-trans +
+
+
+ .animate-none +
+
+
+
+ + +
+
+

Borders

utility +
+ + +
+
Width — .b[b|e|s|t]-[bp]-[0–5]
+
+
.b-0
+
.b-1
+
.b-2
+
.b-3
+
.b-4
+
.b-5
+
+
+
.bt-3
+
.bb-3
+
.bs-3
+
.be-3
+
+
+ + +
+
Radius — .br-[0–5|circle|pill] + corners .brt- .brb- .brs- .bre-
+
+
.br-0
+
.br-1
+
.br-2
+
.br-3
+
.br-4
+
.br-5
+
.br-pill
+
.br-circle
+
+
+
.brt-3
+
.brb-3
+
.brs-3
+
.bre-3
+
.brtl-3
+
.brtr-3
+
.brbl-3
+
.brbr-3
+
+
+ + +
+
Style — .b-[dash|dot|double|none|solid]
+
+
.b-dash
+
.b-dot
+
.b-double
+
.b-solid
+
.b-none
+
+
+ + +
+
Color — .b-[color]
+
+
.b-primary
+
.b-accent
+
.b-info
+
.b-success
+
.b-warn
+
.b-danger
+
.b-muted
+
.b-text
+
.b-surface
+
.b-border
+
.b-background
+
.b-background-contrast
+
.b-primary-contrast
+
.b-accent-contrast
+
.b-lighter
+
.b-darker
+
.b-black
+
.b-white
+
+
+
+ + +
+
+

Colors

utility +
+ + +
+
Background — .bg-[color]
+
+
.bg-primary
+
.bg-primary-contrast
+
.bg-accent
+
.bg-accent-contrast
+
.bg-info
+
.bg-success
+
.bg-warn
+
.bg-danger
+
.bg-surface
+
.bg-background
+
.bg-background-contrast
+
.bg-muted
+
.bg-text
+
.bg-border
+
.bg-lighter
+
.bg-darker
+
.bg-black
+
.bg-white
+
.bg-transparent
+
.bg-container
+
+ +
Lighter / Darker variants — .bg-[color]-lighter .bg-[color]-darker
+
+
.bg-primary-lighter
+
.bg-primary
+
.bg-primary-darker
+
.bg-success-lighter
+
.bg-success
+
.bg-success-darker
+
.bg-danger-lighter
+
.bg-danger
+
.bg-danger-darker
+
.bg-warn-lighter
+
.bg-warn
+
.bg-warn-darker
+
.bg-accent-lighter
+
.bg-accent
+
.bg-accent-darker
+
.bg-info-lighter
+
.bg-info
+
.bg-info-darker
+
.bg-muted-lighter
+
.bg-muted
+
.bg-muted-darker
+
.bg-surface-lighter
+
.bg-surface
+
.bg-surface-darker
+
+
+ + +
+
Foreground — .fg-[color]
+
+ .fg-primary + .fg-primary-contrast + .fg-accent + .fg-accent-contrast + .fg-info + .fg-success + .fg-warn + .fg-danger + .fg-muted + .fg-text + .fg-surface + .fg-border + .fg-background + .fg-background-contrast + .fg-lighter + .fg-darker + .fg-black + .fg-white +
+
+ + +
+
Alignment — .align-x[-start|-end] .align-y[-start|-end]
+
+
.align-x-start
+
.align-x (center)
+
.align-x-end
+ + + + + + +
.align-y-start.align-y.align-y-end
+
+
+
+ + +
+
+

Cursors

utility +
+
.curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]
+
+
.curs-alias
+
.curs-auto
+
.curs-cell
+
.curs-col-resize
+
.curs-copy
+
.curs-crosshair
+
.curs-default
+
.curs-grab
+
.curs-grabbing
+
.curs-help
+
.curs-move
+
.curs-not-allowed
+
.curs-pointer
+
.curs-progress
+
.curs-row-resize
+
.curs-text
+
.curs-none
+
.curs-wait
+
.curs-vertical-text
+
.curs-zoom-in
+
.curs-zoom-out
+
+
+ + +
+
+

Display

utility +
+
.d-[bp]-[block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|table-row|table-cell|none]
+
+ .d-block + .d-inline + .d-inline-block + .d-flex + .d-inline-flex + .d-grid + .d-inline-grid + .d-table + .d-table-row + .d-table-cell + .d-none + .d-md-none + .d-lg-flex +
+
+
.d-inline-block
+
.d-inline
+
+
.d-none (hidden)
+
+ ← .d-none is not rendered +
+
+ + +
+
+

Flex

utility +
+ +
+
Direction — .flex-[bp]-[c|cr|r|rr] .flex-inline-[bp]-[c|cr|r|rr]
+
+
+ .flex-c +
1
+
2
+
3
+
+
+
1
+
2
+
3
+ .flex-cr +
+
+ .flex-r +
1
+
2
+
3
+
+
+ .flex-rr +
1
+
2
+
3
-
-
- .overflow-visible +
+ +
+
Justify — .justify-[start|center|end|between|around|evenly]
+
+
.justify-start
A
B
C
+
.justify-center
A
B
C
+
.justify-end
A
B
C
+
.justify-between
A
B
C
+
.justify-around
A
B
C
+
.justify-evenly
A
B
C
+
+
+ +
+
Align Items / Self / Content
+
+
.align-self-start
+
.align-self-center
+
.align-self-end
+
.align-self-stretch
+
+
+ +
+
Grow / Shrink / Fill
+
+
+
.flex-grow-1
+
.flex-grow-2
+
.flex-grow-3
+
+
+
.flex-fill
+
.flex-fill
+
.flex-fill-even
+
.flex-fill-even
+
+
+
.flex-shrink-0
+
.flex-shrink-1
+
+
+
+ +
+
Wrap
+
+
+
.flex-nowrap
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
+
.flex-wrap
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
+
+ +
+
Order — .order-[0–5]
+
+
#1 / .order-5
+
#2 / .order-1
+
#3 / .order-3
+
#4 / .order-2
+
+
+ +
+
Gap — .gap-[0–5]
+
+
+ .gap-0 +
+
A
B
C
+
+
+
+ .gap-1 +
+
A
B
C
+
+
+
+ .gap-2 +
+
A
B
C
+
+
+
+ .gap-3 +
+
A
B
C
+
+
+
+ .gap-4 +
+
A
B
C
+
+
+
+ .gap-5 +
+
A
B
C
+
-
-
-

Opacity

-
.opacity-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]
-

-
-
.o-0
-
.o-10
-
.o-20
-
.o-30
-
.o-40
-
.o-50
-
.o-60
-
.o-70
-
.o-80
-
.o-90
-
.o-100
+ +
+
+

Float

utility +
+
.float-[bp]-[start|end|none]
+
+
.float-end
+
.float-start
+
.float-none — stays in flow
+
-
-
-

Position

-
.pos-[abs|rel|static|stick]
-

-

Anchor

-
.anchor-[c|e|s]
-

-
-
.anchor-s
-
.anchor-c
-
.anchor-e
-
-
-
-

Position

-
.[bottom|end|start|top]-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]
-

-
-
.top-0 .start-0
-
.top-0 .end-0
-
.top-50 .start-50
-
.bottom-50 .end-50
-
.bottom-0 .start-0
-
.bottom-0 .end-0
-
.center
-
-
+ +
+
+

Font Style

utility +
-
-

Shadows

-
.shadow-[drop|none|white]
-

-
-
.shadow
+
+
Size — .fs-[1–7]
+
+ .fs-1 — 1rem + .fs-2 — 1.25rem + .fs-3 — 1.5rem + .fs-4 — 1.75rem + .fs-5 — 2rem + .fs-6 — 2.25rem + .fs-7 — 2.5rem +
+
+ +
+
Weight
+
+ .fs-lighter + .fs-normal + .fs-bold + .fs-bolder +
+
+ +
+
Style & Decoration
+
+ .fs-italic + .fs-norm (normal) + .fs-underline + .fs-strike + .fs-strike.fs-underline + .fs-none +
+
+ +
+
Transform
+
+ .fs-lowercase EXAMPLE + .fs-uppercase example + .fs-capitalize example text +
+
+ +
+
Wrapping
+
+
+ .fs-truncate +
Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
+
+
+ .fs-nowrap +
Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor.
+
+
+ .fs-wrap +
Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+
+
+ .fs-break +
Superlongwordthatwouldnormallyoverflowbutbreakswithfsbreakclassapplied.
+
+
+
+
+ + +
+
+

Hover

utility +
+
.hover   .curs-hover
+
+
.hover — hover me (brightness)
+
.curs-hover — pointer + brightness
+
+
+ + +
+
+

Object Fit

utility +
+
.fit-[bp]-[contain|cover|fill|scale|none]
+
+
+
+ + + + +
+ .fit-contain +
+
+
+ + + + +
+ .fit-cover +
+
+
+ + + + +
+ .fit-fill +
+
+
+ + + + +
+ .fit-scale +
+
+
+ + + + +
+ .fit-none +
+
+
+ + +
+
+

Opacity

utility +
+
.o-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]
+
+
0
+
10
+
20
+
25
+
30
+
33
+
34
+
40
+
50
+
60
+
66
+
70
+
75
+
80
+
90
+
100
+
+
+ + +
+
+

Overflow

utility +
+
.overflow-[x|y]-[auto|hidden|scroll|visible]
+
+
+
+
.overflow-auto
+
+ .overflow-auto +
+
+
+
.overflow-hidden
+
+ .overflow-hidden +
+
+
+
.overflow-scroll
+
+ .overflow-scroll +
+
+
+
.overflow-x-auto — scrolls horizontally
+
+ .overflow-x-auto +
+
+
+
.overflow-y-auto
scrolls
vertically
here
+
+ .overflow-y-auto +
+
+
+ + +
+
+

Position

utility +
+ +
+
Type — .pos-[abs|fix|rel|static|stick]
+
+ .pos-abs (absolute) + .pos-fix (fixed) + .pos-rel (relative) + .pos-static + .pos-stick (sticky) +
+
+ +
+
Coordinates — .[top|bottom|start|end]-[0–100]
+
+
.top-0 .start-0
+
.top-0 .end-0
+
.center
+
.bottom-0 .start-0
+
.bottom-0 .end-0
+
+
+ +
+
Anchor — .anchor-[c|e|s]
+
+
.anchor-s
+
.anchor-c
+
.anchor-e
+
+
+
+ + +
+
+

Shadows

utility +
+ +
+
Elevation — .shadow .shadow-[1–5] .shadow-none
+
+
+
+ .shadow-1 + inputs +
+
+
+ .shadow-2 + cards +
+
+
+ .shadow / .shadow-3 + dropdowns +
+
+
+ .shadow-4 + modals +
+
+
+ .shadow-5 + drawers +
+
+
+ .shadow-none +
+
+
+ +
+
Directional — .shadow-[top|bottom|start|end]
+
+
.shadow-top
+
.shadow-bottom
+
.shadow-start
+
.shadow-end
+
+
+ +
+
Colored — .shadow-[primary|accent|info|success|warn|danger]
+
+
+
+ .shadow-primary +
+
+
+ .shadow-accent +
+
+
+ .shadow-info +
+
+
+ .shadow-success +
+
+
+ .shadow-warn +
+
+
+ .shadow-danger +
+
+
+ +
+
Inset — .shadow-inset-[1|2]
+
+
.shadow-inset-1
+
.shadow-inset-2
+
+
+ +
+
Drop (filter-based, respects SVG/PNG shape) — .shadow-drop-sm .shadow-drop .shadow-drop-lg
+
+
+ + + + .shadow-drop-sm +
+
+ + + + .shadow-drop +
+
+ + + + .shadow-drop-lg +
+

Unlike box-shadow, filter drop-shadow follows the actual shape of irregular elements.

+
+
+
+ + +
+
+

User Select

utility +
+
.select-[all|auto|none|text]
+
+
.select-all — click to select all
+
.select-auto — default behavior
+
.select-none — cannot select this
+
.select-text — text only selection
+
+
+ + +
+
+

Size

utility +
+
.w-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]
+
.h-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100|auto]
+
+
.w-25
+
.w-50
+
.w-75
+
.w-100
+
+
+
.h-25
+
.h-50
+
.h-75
+
.h-100
+
+
+ + +
+
+

Spacing

utility +
+
Margin: .m[b|e|s|t|x|y]-[bp]-[0–5|auto]
+
Padding: .p[b|e|s|t|x|y]-[bp]-[0–5]
+
+
.m-0 .p-0
+
.m-1 .p-1
+
.m-2 .p-2
+
.m-3 .p-3
+
.m-4 .p-4
+
+
+
.mt-3
+
.mb-3
+
.ms-3
+
.me-3
+
.mx-3
+
.my-3
+
.mx-auto
+
+
+
Directional padding
+
+
.pt-3
+
.pb-3
+
.ps-3
+
.pe-3
+
.px-3
+
.py-3
+
+
+
+ + +
+
+

Visibility

utility +
+
.[hidden|visible]-[bp]
+
+
+
+ +
+
.visible
+
+

Note: .hidden uses visibility:hidden — it preserves layout space. Use .d-none to remove from flow entirely.

+
+
+ + +
+
+

Z-Index

utility +
+
.z-[0–5]
- logo - - .shadow-drop
- .shadow-white - -
-
.shadow-none
-
-
- -
-

Size

-
-
-

Height

-
.h-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]
-

-
-
-
.h-100
-
-
-
.h-10
-
.h-90
-
-
-
.h-20
-
.h-80
-
-
-
.h-25
-
.h-75
-
-
-
.h-30
-
.h-70
-
-
-
.h-34
-
.h-66
-
-
-
.h-40
-
.h-60
-
-
-
.h-50
-
.h-50
-
-
-
-
-

Width

-
.w-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]
-

-
-
-
.h-100
-
-
-
.h-10
-
.h-90
-
-
-
.h-20
-
.h-80
-
-
-
.h-25
-
.h-75
-
-
-
.h-30
-
.h-70
-
-
-
.h-34
-
.h-66
-
-
-
.h-40
-
.h-60
-
-
-
.h-50
-
.h-50
-
-
+
z-5
+
z-4
+
z-3
+
z-2
+
z-1
+
z-0
-
-
-

Spacing

-
Margin: .m[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5|auto]
-
-
Padding: .p[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5]
-

-
-
-
.m-0
.p-0
-
-
-
.m-1
.p-1
-
-
-
.m-2
.p-2
-
-
-
.m-3
.p-3
-
-
-
.m-4
.p-4
-
-
-
.m-5
.p-5
-
-
-
-
-
.mb-3
.pb-3
-
-
-
.me-3
.pe-3
-
-
-
.ms-3
.ps-3
-
-
-
.mt-3
.pt-3
-
-
-
.mx-3
.px-3
-
-
-
.my-3
.py-3
-
-
-
-
.mx-auto
.p-3
-
-
- -
-

User Select

-
.select-[all|auto|none|text]
-

-
.select-all
-
.select-auto
-
.select-none
-
.select-text
-
- -
-

Visibility

-
.[hidden|visible]-[xs|sm|md|lg|xl]
-

-
-
- -
-
.visible
-
-
- -
-

Z-Index

-
.z-[0-5]
-

-
-
-
z-5
-
z-4
-
z-3
-
z-2
-
z-1
-
z-0
-
-
-
- -
-
- -
-
- -
-
- Table of Contents -
+
+
diff --git a/package-lock.json b/package-lock.json index e0b99e6..d9d657f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,29 +1,30 @@ { "name": "@ztimson/css-utils", - "version": "1.3.4", + "version": "1.3.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ztimson/css-utils", - "version": "1.3.4", + "version": "1.3.5", "license": "MIT", "devDependencies": { "sass": "^1.80.6" } }, "node_modules/@parcel/watcher": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz", - "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz", + "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==", "dev": true, "hasInstallScript": true, + "license": "MIT", "optional": true, "dependencies": { - "detect-libc": "^1.0.3", + "detect-libc": "^2.0.3", "is-glob": "^4.0.3", - "micromatch": "^4.0.5", - "node-addon-api": "^7.0.0" + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.4" }, "engines": { "node": ">= 10.0.0" @@ -33,29 +34,29 @@ "url": "https://opencollective.com/parcel" }, "optionalDependencies": { - "@parcel/watcher-android-arm64": "2.5.0", - "@parcel/watcher-darwin-arm64": "2.5.0", - "@parcel/watcher-darwin-x64": "2.5.0", - "@parcel/watcher-freebsd-x64": "2.5.0", - "@parcel/watcher-linux-arm-glibc": "2.5.0", - "@parcel/watcher-linux-arm-musl": "2.5.0", - "@parcel/watcher-linux-arm64-glibc": "2.5.0", - "@parcel/watcher-linux-arm64-musl": "2.5.0", - "@parcel/watcher-linux-x64-glibc": "2.5.0", - "@parcel/watcher-linux-x64-musl": "2.5.0", - "@parcel/watcher-win32-arm64": "2.5.0", - "@parcel/watcher-win32-ia32": "2.5.0", - "@parcel/watcher-win32-x64": "2.5.0" + "@parcel/watcher-android-arm64": "2.6.0", + "@parcel/watcher-darwin-arm64": "2.6.0", + "@parcel/watcher-darwin-x64": "2.6.0", + "@parcel/watcher-freebsd-x64": "2.6.0", + "@parcel/watcher-linux-arm-glibc": "2.6.0", + "@parcel/watcher-linux-arm-musl": "2.6.0", + "@parcel/watcher-linux-arm64-glibc": "2.6.0", + "@parcel/watcher-linux-arm64-musl": "2.6.0", + "@parcel/watcher-linux-x64-glibc": "2.6.0", + "@parcel/watcher-linux-x64-musl": "2.6.0", + "@parcel/watcher-win32-arm64": "2.6.0", + "@parcel/watcher-win32-x64": "2.6.0" } }, "node_modules/@parcel/watcher-android-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", - "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz", + "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "android" @@ -69,13 +70,14 @@ } }, "node_modules/@parcel/watcher-darwin-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", - "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz", + "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" @@ -89,13 +91,14 @@ } }, "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", - "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz", + "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" @@ -109,13 +112,14 @@ } }, "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", - "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz", + "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "freebsd" @@ -129,13 +133,17 @@ } }, "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", - "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz", + "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -149,13 +157,17 @@ } }, "node_modules/@parcel/watcher-linux-arm-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", - "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz", + "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -169,13 +181,17 @@ } }, "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", - "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz", + "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -189,13 +205,17 @@ } }, "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", - "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz", + "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -209,13 +229,17 @@ } }, "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", - "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz", + "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -229,13 +253,17 @@ } }, "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", - "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz", + "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -249,33 +277,14 @@ } }, "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", - "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz", + "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==", "cpu": [ "arm64" ], "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", - "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", - "cpu": [ - "ia32" - ], - "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" @@ -289,13 +298,14 @@ } }, "node_modules/@parcel/watcher-win32-x64": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", - "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz", + "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" @@ -308,71 +318,46 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/braces": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", - "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", - "dev": true, - "optional": true, - "dependencies": { - "fill-range": "^7.1.1" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/chokidar": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", - "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", "dev": true, + "license": "MIT", "dependencies": { - "readdirp": "^4.0.1" + "readdirp": "^5.0.0" }, "engines": { - "node": ">= 14.16.0" + "node": ">= 20.19.0" }, "funding": { "url": "https://paulmillr.com/funding/" } }, "node_modules/detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", "dev": true, + "license": "Apache-2.0", "optional": true, - "bin": { - "detect-libc": "bin/detect-libc.js" - }, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/fill-range": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", - "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", - "dev": true, - "optional": true, - "dependencies": { - "to-regex-range": "^5.0.1" - }, "engines": { "node": ">=8" } }, "node_modules/immutable": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", - "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", - "dev": true + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", + "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==", + "dev": true, + "license": "MIT" }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "dev": true, + "license": "MIT", "optional": true, "engines": { "node": ">=0.10.0" @@ -383,6 +368,7 @@ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "dev": true, + "license": "MIT", "optional": true, "dependencies": { "is-extglob": "^2.1.1" @@ -391,57 +377,36 @@ "node": ">=0.10.0" } }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, - "optional": true, - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/micromatch": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", - "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", - "dev": true, - "optional": true, - "dependencies": { - "braces": "^3.0.3", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=8.6" - } - }, "node_modules/node-addon-api": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "dev": true, + "license": "MIT", "optional": true }, "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, + "license": "MIT", "optional": true, "engines": { - "node": ">=8.6" + "node": ">=12" }, "funding": { "url": "https://github.com/sponsors/jonschlinkert" } }, "node_modules/readdirp": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", - "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz", + "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==", "dev": true, + "license": "MIT", "engines": { - "node": ">= 14.16.0" + "node": ">= 20.19.0" }, "funding": { "type": "individual", @@ -449,20 +414,21 @@ } }, "node_modules/sass": { - "version": "1.80.6", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", - "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", + "version": "1.102.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.102.0.tgz", + "integrity": "sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==", "dev": true, + "license": "MIT", "dependencies": { - "chokidar": "^4.0.0", - "immutable": "^4.0.0", + "chokidar": "^5.0.0", + "immutable": "^5.1.5", "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" }, "engines": { - "node": ">=14.0.0" + "node": ">=20.19.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" @@ -473,22 +439,10 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "dev": true, + "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, - "optional": true, - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } } } } diff --git a/package.json b/package.json index 4001198..f9e4ea7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ztimson/css-utils", - "version": "1.3.5", + "version": "2.0.0", "description": "CSS Utility Classes", "readme": "README.md", "scripts": { diff --git a/src/main.scss b/src/main.scss index 1a1f393..3278f20 100644 --- a/src/main.scss +++ b/src/main.scss @@ -5,9 +5,11 @@ // Colors :root { // Theme colors -- what ever you like - --theme-backdrop: #dddddd; - --theme-primary: #ff0000; - --theme-accent: #0000ff; + --theme-primary: #4979de; + --theme-primary-contrast: black; + --theme-accent: #2caec0; + --theme-accent-contrast: black; + --theme-info: #6157cc; --theme-success: #65c147; --theme-warn: #d88750; @@ -16,28 +18,41 @@ --theme-white: white; // Misc - --theme-border: black; - --theme-animation: 0.2s linear; // Animation style - --theme-content-width: 1100px; // Max width of clamped content + --theme-animation: 0.2s linear; + --theme-content-width: 1100px; --theme-font: Arial, sans-serif; // Light theme &, .theme-light { - --theme-clear: #ffffff; // Content background (Usually white or off-black) - --theme-text: #000000; // Text color (Should contrast bg-primary) - --theme-muted: #6c757d; // Muted text color (Should have less contrast against bg-primary) + --theme-background: #fafafa; + --theme-background-contrast: white; + + --theme-surface: #ffffff; + --theme-border: #E5E7EB; + --theme-muted: #6c757d; + --theme-text: #000000; + + --theme-lighter: rgba(255, 255, 255, 0.05); + --theme-darker: rgba(0, 0, 0, 0.05); } // Dark theme .theme-dark { - --theme-clear: #2e2e2e; // Content background (Usually white or off-black) - --theme-text: #ffffff; // Text color (Should contrast bg-primary) - --theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary) + --theme-background: #1a1a1a; + --theme-background-contrast: black; + + --theme-surface: #2e2e2e; + --theme-border: #374151; + --theme-muted: #cccccc; + --theme-text: #ffffff; + + --theme-lighter: rgba(255, 255, 255, 0.1); + --theme-darker: rgba(0, 0, 0, 0.1); } } -$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size -$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc... +$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); +$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Don't edit past this point =============================================================================== @@ -46,38 +61,21 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); // "Fixes" ================================================================================================== -// Optional opinionated styling to clean up CSS defaults - -.fix-anchor, .fix:not(.no-anchor-fix) { +// Base resets applied like Bootstrap's reboot +.fix-anchor { a, a:not([href]) { cursor: pointer; color: var(--theme-primary); - &:not(:hover):not(:focus) { text-decoration: none; } + text-decoration: none; &:hover, &:focus { text-decoration: underline; } } } -.no-fix, .no-anchor-fix { - a, a:not([href]) { - cursor: auto; - color: inherit; - text-decoration: inherit; - } +.fix-button { + button:not(:disabled) { cursor: pointer; } } -.fix-button, .fix:not(.no-button-fix) { - button:not(:disabled) { - cursor: pointer; - } -} - -.no-fix, .no-button-fix { - button:not(:disabled) { - cursor: auto; - } -} - -.fix-dom, .fix:not(.no-dom-fix) { +.fix-dom { &, html, body { height: 100%; width: 100%; @@ -85,40 +83,19 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); padding: 0; overflow: auto; color: var(--theme-text); - background-color: var(--theme-backdrop); + background-color: var(--theme-background); } - * { box-sizing: border-box; } } -.no-fix, .no-dom-fix { - &, html, body { - height: auto; - width: auto; - margin: revert; - padding: revert; - overflow: visible; - color: revert; - background-color: transparent; - } - * { box-sizing: content-box; } -} - -.fix-focus, .fix:not(.no-focus-fix) { +.fix-focus { * { outline: inherit; -webkit-tap-highlight-color: transparent; } } -.no-fix, .no-focus-fix { - * { - outline: revert; - -webkit-tap-highlight-color: auto; - } -} - -.fix-font, .fix:not(.no-font-fix) { +.fix-font { color: var(--theme-text); font-family: var(--theme-font), sans-serif; @@ -132,21 +109,44 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); h6 { font-weight: 500; font-size: 1rem; } } -.no-fix, .no-font-fix { - color: revert; - font-family: revert; - p, input, select, textarea, button { font-size: revert; } - h1, h2, h3, h4, h5, h6, p { margin: revert; } - h1, h2, h3, h4, h5, h6 { font-weight: revert; font-size: revert; } +.fix-scrollbar { + * { + scrollbar-width: thin; + scrollbar-color: var(--theme-primary) var(--theme-background); + } + + *::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + *::-webkit-scrollbar-track { + background: var(--theme-background); + } + + *::-webkit-scrollbar-thumb { + background-color: var(--theme-primary); + border-radius: 4px; + border: 2px solid var(--theme-background); + } + + *::-webkit-scrollbar-thumb:hover { + background-color: var(--theme-accent); + } } -.reset { - all: revert !important; +// Apply all fixes by default (like Bootstrap) +.fix { + @extend .fix-anchor; + @extend .fix-button; + @extend .fix-dom; + @extend .fix-focus; + @extend .fix-font; + @extend .fix-scrollbar; } // Misc ===================================================================================================== -// Center .center { position: absolute; left: 50%; @@ -154,9 +154,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); transform: translate(-50%, -50%); } -// Clamp (Restrict page width for large screens) .clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); } +.reset { all: revert !important; } + // Utilities ================================================================================================ // Anchor @@ -194,40 +195,73 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); .brbr-#{$s}, .brb-#{$s}, .bre-#{$s}, .br-#{$s} { border-bottom-right-radius: $size !important; } } -// Colors - Background -.bg-backdrop { background-color: var(--theme-backdrop) !important; } -.bg-black { background-color: var(--theme-black) !important; } -.bg-white { background-color: var(--theme-white) !important; } +// Border - Style +.b-dash { border-style: dashed !important; } +.b-dot { border-style: dotted !important; } +.b-double { border-style: double !important; } +.b-none { border-style: none !important; } +.b-solid { border-style: solid !important; } + +// Colors - Shared mixin for efficiency +@mixin color-variant($name, $bg-var, $fg-var: null) { + .b-#{$name} { border-color: var(--theme-#{$bg-var}) !important; } + .bg-#{$name} { + background-color: var(--theme-#{$bg-var}) !important; + @if $fg-var { + color: var(--theme-#{$fg-var}); + text-decoration-color: var(--theme-#{$fg-var}); + } + } + .fg-#{$name} { + color: var(--theme-#{$bg-var}) !important; + text-decoration-color: var(--theme-#{$bg-var}) !important; + } +} + +@include color-variant('black', 'black'); +@include color-variant('white', 'white'); +@include color-variant('background', 'background'); +@include color-variant('background-contrast', 'background-contrast'); +@include color-variant('primary', 'primary', 'primary-contrast'); +@include color-variant('primary-contrast', 'primary-contrast'); +@include color-variant('accent', 'accent', 'accent-contrast'); +@include color-variant('accent-contrast', 'accent-contrast'); +@include color-variant('surface', 'surface'); +@include color-variant('border', 'border'); +@include color-variant('text', 'text'); +@include color-variant('muted', 'muted'); +@include color-variant('lighter', 'lighter'); +@include color-variant('darker', 'darker'); +@include color-variant('info', 'info'); +@include color-variant('success', 'success'); +@include color-variant('warn', 'warn'); +@include color-variant('danger', 'danger'); + .bg-transparent { background-color: transparent !important; } .bg-container { background-color: var(--theme-clear) !important; color: var(--theme-text) !important; } -@each $color in ('primary', 'accent', 'text', 'info', 'success', 'warn', 'danger', 'muted') { - .bg-#{$color} { + +// Lighter/Darker pseudo variants +@each $color in ('primary', 'accent', 'background', 'surface', 'info', 'success', 'warn', 'danger', 'muted') { + .bg-#{$color}-lighter, .bg-#{$color}-darker { position: relative; z-index: 1; - } - .bg-#{$color}::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--theme-#{$color}); - filter: saturate(.5) brightness(150%); - border-radius: inherit; - z-index: -1; - } -} + color: var(--theme-#{$color}-contrast); + text-decoration-color: var(--theme-#{$color}-contrast); -// Colors - Foreground -@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') { - .fg-#{$color} { - color: var(--theme-#{$color}) !important; - text-decoration-color: var(--theme-#{$color}) !important; + &::before { + content: ''; + position: absolute; + inset: 0; + background-color: var(--theme-#{$color}); + border-radius: inherit; + z-index: -1; + } } + .bg-#{$color}-lighter::before { filter: saturate(.5) brightness(150%); } + .bg-#{$color}-darker::before { filter: saturate(.5) brightness(50%); } } // Cursors @@ -240,9 +274,9 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); .fs-bold { font-weight: 500 !important; } .fs-normal { font-weight: normal !important; } .fs-italic { font-style: italic !important; } -.fs-none { font-style: normal !important; } +.fs-norm { font-style: normal !important; } .fs-lighter { font-weight: lighter !important; } -.fs-no-dec { text-decoration: none !important; } +.fs-none { text-decoration: none !important; } .fs-strike { text-decoration: line-through !important; } .fs-underline { text-decoration: underline !important; } .fs-strike.fs-underline { text-decoration: line-through underline !important; } @@ -275,15 +309,18 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); .fs-capitalize { text-transform: capitalize !important; } // Hover -.curs-hover:hover, .hover:hover { filter: brightness(125%) !important; } -.curs-hover:hover { - cursor: pointer; - user-select: none; +.hover:hover { filter: brightness(125%) !important; } +.curs-hover { + &:hover { + filter: brightness(125%) !important; + cursor: pointer; + user-select: none; + } } // Opacity @each $div in $divisible { - .o-#{$div} { opacity: #{$div}#{'%'} !important; } + .o-#{$div} { opacity: #{$div * 0.01} !important; } } // Overflow @@ -299,17 +336,38 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); } @each $div in $divisible { - .bottom-#{$div} { bottom: #{$div}#{'%'} !important; } - .end-#{$div} { right: #{$div}#{'%'} !important; } - .start-#{$div} { left: #{$div}#{'%'} !important; } - .top-#{$div} { top: #{$div}#{'%'} !important; } + .bottom-#{$div} { bottom: #{$div * 1%} !important; } + .end-#{$div} { right: #{$div * 1%} !important; } + .start-#{$div} { left: #{$div * 1%} !important; } + .top-#{$div} { top: #{$div * 1%} !important; } } // Shadows -.shadow { box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 !important; } -.shadow-drop { filter: drop-shadow(0px 1px 2.5px black) !important; } -.shadow-white { filter: drop-shadow(0px 1px 2.5px white) !important; } .shadow-none { box-shadow: none !important; } +.shadow-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important; } +.shadow-2 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08) !important; } +.shadow,.shadow-3 { box-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08) !important; } +.shadow-4 { box-shadow: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.06) !important; } +.shadow-5 { box-shadow: 0 20px 25px rgba(0,0,0,0.12), 0 10px 10px rgba(0,0,0,0.06) !important; } +.shadow-top { box-shadow: 0 -4px 6px rgba(0,0,0,0.08) !important; } +.shadow-bottom { box-shadow: 0 4px 6px rgba(0,0,0,0.08) !important; } +.shadow-start { box-shadow: -4px 0 6px rgba(0,0,0,0.08) !important; } +.shadow-end { box-shadow: 4px 0 6px rgba(0,0,0,0.08) !important; } +.shadow-inset-1 { box-shadow: inset 0 1px 2px rgba(0,0,0,0.10) !important; } +.shadow-inset-2 { box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important; } +.shadow-drop-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)) !important; } +.shadow-drop { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.30)) !important; } +.shadow-drop-lg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)) !important; } +@each $color, $value in ( + 'primary': #2d5dc5, + 'accent': #15439a, + 'info': #6157cc, + 'success': #65c147, + 'warn': #d88750, + 'danger': #bf4f4f +) { + .shadow-#{$color} { box-shadow: 0 4px 14px rgba($value, 0.35) !important; } +} // User Select @each $s in ('all', 'auto', 'none', 'text') { @@ -323,7 +381,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); // Breakpoint rules @mixin utilities($bp) { - @if $bp != null { $bp: '-#{$bp}'; } + @if $bp != null { $bp: '-#{$bp}'; } @else { $bp: ''; } // Alignment .align-x#{$bp} { text-align: center !important; } @@ -386,7 +444,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); display: inline-flex !important; flex-direction: row-reverse !important; } - .flex#{$bp}-fill { flex: 1 1 auto; } + .flex#{$bp}-fill { flex: 1 1 auto !important; } .flex#{$bp}-fill-even { flex-basis: 0 !important; flex-grow: 1 !important; @@ -414,15 +472,15 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); } // Height - .h-auto { height: auto !important; } + .h#{$bp}-auto { height: auto !important; } @each $div in $divisible { - .h#{$bp}-#{$div} { height: #{$div}#{'%'} !important; } + .h#{$bp}-#{$div} { height: #{$div * 1%} !important; } } // Width - .w-auto { width: auto !important; } + .w#{$bp}-auto { width: auto !important; } @each $div in $divisible { - .w#{$bp}-#{$div} { width: #{$div}#{'%'} !important; } + .w#{$bp}-#{$div} { width: #{$div * 1%} !important; } } // Object Fit @@ -432,52 +490,60 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); .fit#{$bp}-scale { object-fit: scale-down !important; } .fit#{$bp}-none { object-fit: none !important; } - .m#{$bp}-auto { margin: auto !important; } // Margin - .mx#{$bp}-auto { // Margin + // Margin auto + .m#{$bp}-auto { margin: auto !important; } + .mx#{$bp}-auto { margin-left: auto !important; margin-right: auto !important; } - .my#{$bp}-auto { // Margin + .my#{$bp}-auto { margin-top: auto !important; margin-bottom: auto !important; } // Visibility - .visible#{$bp} { visibility: visible !important; } - .hidden#{$bp} { visibility: hidden !important; } + .visible#{$bp} { visibility: visible !important; } + .hidden#{$bp} { visibility: hidden !important; } @each $s, $size in $sizes { - .gap#{$bp}-#{$s} { gap: $size !important; } // Gap - .b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !important; } // Border - .m#{$bp}-#{$s} { margin: $size !important; } // Margin - .p#{$bp}-#{$s} { padding: $size !important; } // Padding - .mx#{$bp}-#{$s} { // Margin + .gap#{$bp}-#{$s} { gap: $size !important; } + .b#{$bp}-#{$s} { + border-width: #{$s}px !important; + border-style: solid; + border-color: var(--theme-border); + } + .m#{$bp}-#{$s} { margin: $size !important; } + .p#{$bp}-#{$s} { padding: $size !important; } + .mx#{$bp}-#{$s} { margin-left: $size !important; margin-right: $size !important; } - .px#{$bp}-#{$s} { // Padding + .px#{$bp}-#{$s} { padding-left: $size !important; padding-right: $size !important; } - .my#{$bp}-#{$s} { // Margin + .my#{$bp}-#{$s} { margin-top: $size !important; margin-bottom: $size !important; } - .py#{$bp}-#{$s} { // Padding + .py#{$bp}-#{$s} { padding-top: $size !important; padding-bottom: $size !important; } - - .order#{$bp}-#{$s} { order: $s !important; } // Flex order + .order#{$bp}-#{$s} { order: $s !important; } } @each $d, $dir in $direction { - .m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin + .m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } @each $s, $size in $sizes { - .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-border) !important; } // Border - .m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin - .p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding + .b#{$d}#{$bp}-#{$s} { + border-#{$dir}-width: #{$s}px !important; + border-#{$dir}-style: solid; + border-#{$dir}-color: var(--theme-border); + } + .m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } + .p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } } } } @@ -489,17 +555,3 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); @include utilities($breakpoint); } } - -// Border - Colors -@each $color in ('black', 'white', 'primary', 'accent', 'info', 'success', 'text', 'warn', 'danger', 'muted') { - .b-#{$color} { border-color: var(--theme-#{$color}) !important; } -} - -// Border - Style -.b-dash { border-style: dashed !important; } -.b-dot-dash { border-style: dot-dash !important; } -.b-dot-dot-dash { border-style: dot-dot-dash !important; } -.b-dot { border-style: dotted !important; } -.b-double { border-style: double !important; } -.b-none { border-style: none !important; } -.b-solid { border-style: solid !important; }