diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 2454ed7..14df8d9 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -42,3 +42,12 @@ jobs: uses: ztimson/actions/tag@develop with: tag: ${{env.VERSION}} + + docs: + name: Publish CDN & Docs + needs: build + uses: ztimson/actions/.github/workflows/docker.yaml@develop + with: + name: ztimson/css-utils + repository: ${{github.server_url}}/${{github.repository}}.git + pass: ${{secrets.DEPLOY_TOKEN}} diff --git a/.npmignore b/.npmignore index 51eeed6..9e8cd77 100644 --- a/.npmignore +++ b/.npmignore @@ -4,4 +4,3 @@ node_modules .editorconfig .gitignore CODEOWNERS -index.html diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..9c5c3c5 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,16 @@ +# Build application +FROM node:alpine as build + +RUN mkdir /app +WORKDIR /app +COPY . . +RUN if [ ! -d "node_modules" ]; then npm i; fi && \ + if [ ! -d "dist/css-utils.css" ]; then npm run build; fi + +# Use Nginx to serve +FROM nginx:1.23-alpine + +COPY --from=build /app/dist /usr/share/nginx/html/dist +COPY src /usr/share/nginx/html/src +COPY index.html /usr/share/nginx/html +COPY wave.webp /usr/share/nginx/html diff --git a/index.html b/index.html index 5ae92bc..0293902 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,997 @@ - + + + + + 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");
+@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;
+
+// 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
+
+// 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)
+}
+
+// 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)
+}
+
+// Multiple themes can be toggled via CSS classes
+.theme-custom {
+  ...
+}
+
+ +

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

+
+
+
+
+
+ + +
+ +
+

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
+
+
+ +
+

Colors

+

Background

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

+
+
.bg-accent
+
.bg-backdrop
+
.bg-black
+
.bg-clear
+
.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|line-through|none|underline]
+

+
+ .fs-italic + .fs-line-through + .fs-none + .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 +
+
+
+
+ .overflow-hidden +
+
+
+
+ .overflow-scroll +
+
+
+
+ .overflow-visible +
+
+
+
+ +
+

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
+
+
+ +
+

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
+
+
+ +
+

Shadows

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

+
+
.shadow
+
+ 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
+
+
+
+
+
+ +
+

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.json b/package.json index add3afb..852f9b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ztimson/css-utils", - "version": "1.0.1", + "version": "1.0.2", "description": "CSS Utility Classes", "readme": "README.md", "scripts": { diff --git a/src/main.scss b/src/main.scss index a16cd4d..76b1159 100644 --- a/src/main.scss +++ b/src/main.scss @@ -4,7 +4,7 @@ // Colors :root { - // Theme colors, what ever you like + // Theme colors -- what ever you like --theme-backdrop: #dddddd; --theme-primary: #ff0000; --theme-accent: #0000ff; @@ -15,7 +15,7 @@ --theme-black: black; --theme-white: white; - // Mic + // Misc --theme-animation: 0.2s linear; // Animation style --theme-content-width: 1100px; // Max width of clamped content --theme-font: Arial, sans-serif; @@ -33,15 +33,15 @@ --theme-text: #ffffff; // Text color (Should contrast bg-primary) --theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary) } - } +$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... + // Don't edit past this point =============================================================================== -$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); $direction: ('s': 'left', 't': 'top', 'e': 'right', 'b': 'bottom'); -$divisible: (0, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100); -$sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); +$divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); // "Fixes" ================================================================================================== @@ -56,20 +56,18 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re } .fix-button, .fix { - button { + button:not(:disabled) { cursor: pointer; } } -.fix-code, .fix { - code { - display: block; - white-space: pre; - font-family: monospace; - background: rgb(30, 30, 30); - color: #00cb00; - overflow: auto; - } +.fix-code code, code.fix { + display: block; + white-space: pre; + font-family: monospace; + background: rgb(30, 30, 30); + color: #00cb00; + overflow: auto; } .fix-dom, .fix { @@ -83,7 +81,11 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re background-color: var(--theme-backdrop); } - hr { opacity: 50%; } + hr { + border-bottom: 1px solid black; + width: 100%; + opacity: 50%; + } * { box-sizing: border-box; } } @@ -112,8 +114,27 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re option { color: black !important; } +// Misc ===================================================================================================== + +// Center +.center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +// Clamp (Restrict page width for large screens) +.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); } + + // Utilities ================================================================================================ +// Anchor +.anchor-c { transform: translate(-50%, -50%); } +.anchor-e { transform: translate(-100%, -50%); } +.anchor-s { transform: translate(0, -50%); } + // Animate .animate { transition: var(--theme-animation); } .animate-none { transition: none !important; } @@ -121,14 +142,17 @@ option { color: black !important; } transition: var(--theme-animation); transition-property: color, background-color; } +.animate-opacity { + transition: var(--theme-animation); + transition-property: opacity; +} .animate-pos { transition: var(--theme-animation); transition-property: height, width, left, right, top, bottom; } - -// Border - Colors -@each $color in ('black', 'white', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') { - .b-#{$color} { border-color: var(--theme-#{$color}) !important; } +.animate-trans { + transition: var(--theme-animation); + transition-property: transform; } // Border - Radius @@ -143,17 +167,17 @@ option { color: black !important; } // Colors - Background .bg-backdrop { background-color: var(--theme-backdrop) !important; } -.bg-black { background-color: var(--theme-white) !important; } +.bg-black { background-color: var(--theme-black) !important; } +.bg-white { background-color: var(--theme-white) !important; } +.bg-transparent { background-color: transparent !important; } .bg-clear { background-color: var(--theme-clear) !important; color: var(--theme-text) !important; } -.bg-transparent { background-color: transparent !important; } -.bg-white { background-color: var(--theme-white) !important; } -@each $color in ('primary', 'secondary', 'text', 'info', 'success', 'warn', 'danger', 'muted') { +@each $color in ('primary', 'accent', 'text', 'info', 'success', 'warn', 'danger', 'muted') { .bg-#{$color} { position: relative; - color: white; + z-index: 1; } .bg-#{$color}::before { content: ''; @@ -163,41 +187,31 @@ option { color: black !important; } right: 0; bottom: 0; background-color: var(--theme-#{$color}); - opacity: 0.2; + filter: saturate(.5) brightness(150%); border-radius: inherit; + z-index: -1; } } -// Center -.center { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - -// Clamp (Restrict page width for large screens) -.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); } - // Colors - Foreground -@each $color in ('black', 'white', 'text', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') { +@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') { .fg-#{$color} { color: var(--theme-#{$color}) !important; } } // Cursors -@each $name in ('auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'zoom-in', 'zoom-out') { +@each $name in ('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-#{$name} { cursor: #{$name} !important; } } // Font .fs-bolder { font-weight: bolder !important; } -.fs-bold { font-weight: bold !important; } -.fs-clear { font-style: normal !important; } +.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-lighter { font-weight: lighter !important; } .fs-line-through { text-decoration: line-through !important; } -.fs-none { text-decoration: none !important; } -.fs-normal { font-weight: normal !important; } +.fs-no-dec { text-decoration: none !important; } .fs-underline { text-decoration: underline !important; } .fs-7 { font-size: 2.5rem !important; } .fs-6 { font-size: 2.25rem !important; } @@ -206,6 +220,26 @@ option { color: black !important; } .fs-3 { font-size: 1.5rem !important; } .fs-2 { font-size: 1.25rem !important; } .fs-1 { font-size: 1rem !important; } +.fs-break { + word-wrap: break-word !important; + word-break: break-word !important; +} +.fs-truncate { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} +.fs-nowrap { + white-space: nowrap !important; + text-wrap: nowrap !important; +} +.fs-wrap { + white-space: normal !important; + text-wrap: pretty !important; +} +.fs-lowercase { text-transform: lowercase !important; } +.fs-uppercase { text-transform: uppercase !important; } +.fs-capitalize { text-transform: capitalize !important; } // Height .h-auto { height: auto !important; } @@ -214,44 +248,46 @@ option { color: black !important; } } // Hover -.hover:hover { filter: brightness(125%) !important; } +.curs-hover:hover, .hover:hover { filter: brightness(125%) !important; } +.curs-hover:hover { + cursor: pointer; + user-select: none; +} // Opacity @each $div in $divisible { .o-#{$div} { opacity: #{$div}#{'%'} !important; } } -// Z-index +// Overflow +@each $opt in ('auto', 'hidden', 'scroll', 'visible') { + .overflow-#{$opt} { overflow: #{$opt} !important; } + .overflow-x-#{$opt} { overflow-x: #{$opt} !important; } + .overflow-y-#{$opt} { overflow-y: #{$opt} !important; } +} + +// Position +@each $p, $pos in ('abs': 'absolute', 'fix': 'fixed', 'rel': 'relative', 'static': 'static', 'stick': 'sticky') { + .pos-#{$p} { position: #{$pos} !important; } +} + @each $div in $divisible { - .z-#{$div} { z-index: #{$div} !important; } + .bottom-#{$div} { bottom: #{$div}#{'%'} !important; } + .end-#{$div} { right: #{$div}#{'%'} !important; } + .start-#{$div} { left: #{$div}#{'%'} !important; } + .top-#{$div} { top: #{$div}#{'%'} !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; } -// Text -.text-break { - word-wrap: break-word !important; - word-break: break-word !important; +// User Select +@each $s in ('all', 'auto', 'none', 'text') { + .select-#{$s} { user-select: #{$s} !important; } } -.text-truncate { - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; -} -.text-nowrap { - white-space: nowrap !important; - text-wrap: nowrap !important; -} -.text-wrap { - white-space: normal !important; - text-wrap: pretty !important; -} - -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } // Width .w-auto { width: auto !important; } @@ -259,15 +295,11 @@ option { color: black !important; } .w-#{$div} { width: #{$div}#{'%'} !important; } } -// User Select -@each $s in ('all', 'auto', 'none', 'text') { - .select-#{$s} { user-select: #{$s} !important; } +// Z-index +@each $s, $ignore in $sizes { + .z-#{$s} { z-index: #{$s} !important; } } -// Visibility -.visible { visibility: visible !important; } -.hidden { visibility: hidden !important; } - // Breakpoint rules @mixin utilities($bp) { @if $bp != null { $bp: '-#{$bp}'; } @@ -280,26 +312,17 @@ option { color: black !important; } .align-y#{$bp}-start { vertical-align: top !important; } .align-y#{$bp}-end { vertical-align: bottom !important; } - // Border - Style - .b#{$bp}-dash { border-style: dashed !important; } - .b#{$bp}-dot-dash { border-style: dot-dash !important; } - .b#{$bp}-dot-dot-dash { border-style: dot-dot-dash !important; } - .b#{$bp}-dot { border-style: dotted !important; } - .b#{$bp}-double { border-style: double !important; } - .b#{$bp}-none { border-style: none !important; } - .b#{$bp}-solid { border-style: solid !important; } - // Display - @each $display in (block, inline, inline-block, grid, inline-grid, table, table-row, table-cell, none) { + @each $display in (block, inline, inline-block, 'flex', 'inline-flex' grid, inline-grid, table, table-row, table-cell, none) { .d#{$bp}-#{$display} { display: #{$display} !important; } } // Flex - .align#{$bp}-start { align-content: start !important; } - .align#{$bp}-end { align-content: end !important; } - .align#{$bp}-center { align-content: center !important; } - .align#{$bp}-baseline { align-content: baseline !important; } - .align#{$bp}-stretch { align-content: stretch !important; } + .align-content#{$bp}-start { align-content: start !important; } + .align-content#{$bp}-end { align-content: end !important; } + .align-content#{$bp}-center { align-content: center !important; } + .align-content#{$bp}-baseline { align-content: baseline !important; } + .align-content#{$bp}-stretch { align-content: stretch !important; } .align-items#{$bp}-start { align-items: start !important; } .align-items#{$bp}-end { align-items: end !important; } .align-items#{$bp}-center { align-items: center !important; } @@ -343,14 +366,18 @@ option { color: black !important; } flex-direction: row-reverse !important; } .flex#{$bp}-fill { flex: 1 1 auto; } - .flex#{$bp}-expand { + .flex#{$bp}-fill-even { flex-basis: 0 !important; flex-grow: 1 !important; } - .flex#{$bp}-grow-1 { flex-grow: 1 !important; } - .flex#{$bp}-shrink-1 { flex-shrink: 1 !important; } .flex#{$bp}-grow-0 { flex-grow: 0 !important; } .flex#{$bp}-shrink-0 { flex-shrink: 0 !important; } + .flex#{$bp}-grow-1 { flex-grow: 1 !important; } + .flex#{$bp}-shrink-1 { flex-shrink: 1 !important; } + .flex#{$bp}-grow-2 { flex-grow: 2 !important; } + .flex#{$bp}-shrink-2 { flex-shrink: 2 !important; } + .flex#{$bp}-grow-3 { flex-grow: 3 !important; } + .flex#{$bp}-shrink-3 { flex-shrink: 3 !important; } .flex#{$bp}-nowrap { flex-wrap: nowrap !important; } .flex#{$bp}-wrap { flex-wrap: wrap !important; } .justify#{$bp}-start { justify-content: start !important; } @@ -372,26 +399,24 @@ option { color: black !important; } .fit#{$bp}-scale { object-fit: scale-down !important; } .fit#{$bp}-none { object-fit: none !important; } - // Overflow - @each $opt in ('auto', 'hidden', 'scroll', 'visible') { - .overflow#{$bp}-#{$opt} { overflow: #{$opt} !important; } - .overflow-x#{$bp}-#{$opt} { overflow-x: #{$opt} !important; } - .overflow-y#{$bp}-#{$opt} { overflow-y: #{$opt} !important; } + .m#{$bp}-auto { margin: auto !important; } // Margin + .mx#{$bp}-auto { // Margin + margin-left: auto !important; + margin-right: auto !important; + } + .my#{$bp}-auto { // Margin + margin-top: auto !important; + margin-bottom: auto !important; } - // Position - @each $pos in ('absolute', 'fixed', 'relative', 'static', 'sticky') { - .pos#{$bp}-#{$pos} { position: #{$pos} !important; } - } + // Visibility + .visible#{$bp} { visibility: visible !important; } + .hidden#{$bp} { visibility: hidden !important; } @each $s, $size in $sizes { - .b#{$bp}-#{$s} { border: #{$s}px solid !important; } // Border + .b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-muted) !important; } // Border .m#{$bp}-#{$s} { margin: $size !important; } // Margin .p#{$bp}-#{$s} { padding: $size !important; } // Padding - .bx#{$bp}-#{$s} { // Border - border-left: #{$s}px solid !important; - border-right: #{$s}px solid !important; - } .mx#{$bp}-#{$s} { // Margin margin-left: $size !important; margin-right: $size !important; @@ -400,10 +425,6 @@ option { color: black !important; } padding-left: $size !important; padding-right: $size !important; } - .by#{$bp}-#{$s} { // Border - border-top: #{$s}px solid !important; - border-bottom: #{$s}px solid !important; - } .my#{$bp}-#{$s} { // Margin margin-top: $size !important; margin-bottom: $size !important; @@ -414,9 +435,13 @@ option { color: black !important; } } .order#{$bp}-#{$s} { order: $s !important; } // Flex order + } - @each $d, $dir in $direction { - .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid !important; } // Border + @each $d, $dir in $direction { + .m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin + + @each $s, $size in $sizes { + .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-muted) !important; } // Border .m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin .p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding } @@ -424,11 +449,23 @@ option { color: black !important; } } @include utilities(null); -@media print { - @include utilities('print'); -} +@media print { @include utilities('print'); } @each $breakpoint, $min-width in $breakpoints { @media (min-width: #{$min-width}) { @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; } diff --git a/wave.webp b/wave.webp new file mode 100644 index 0000000..681234c Binary files /dev/null and b/wave.webp differ