diff --git a/src/index.html b/src/index.html index aa8a572..c7bb262 100644 --- a/src/index.html +++ b/src/index.html @@ -22,7 +22,7 @@ - +

Animadio Lab

@@ -30,25 +30,25 @@

Colors

Hues

-

Grayscale

-
@@ -58,25 +58,25 @@

Background Colors

Hues

-

Grayscale

-
@@ -87,19 +87,19 @@

Fonts

Font Families

-

Fonts

+

Font Style & Weight

@@ -109,90 +109,109 @@

Text

Text Align

-

Text Transform

Text Decoration Line

Text Decoration Style

Text Decoration Color

-

Display

+

Boxes

-

Flex

- -
- -
-

Grid

- -
+

Border Style

-
-

Gap

- +
- +
-

Place Content

- +

Border Width

+ +
-

Place Items

- +

Border Color

+ +
-

Place Self

- +

Border Radius

+ +
diff --git a/src/scss/_anima.scss b/src/scss/_anima.scss index 4ab95d4..e6fd4c5 100644 --- a/src/scss/_anima.scss +++ b/src/scss/_anima.scss @@ -100,13 +100,6 @@ $animation-direction: ( animation-duration: var(--animation-duration); } -// ********** OPTIONS MIXIN ********** -@mixin anima($class, $property, $value) { - .anima-#{$class} { - #{$property}: #{$value}; - } -} - /********** ANIMATION NAME **********/ @each $key, $value in $transforms { @include states("anima-#{$key}", "animation-name", $key); @@ -115,10 +108,10 @@ $animation-direction: ( /********** ANIMATION OPTIONS **********/ @each $type, $option in $animation-options { @each $key, $value in $option { - @include anima($key, "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); + @include default("anima-#{$key}", "animation-#{$type}", "var(--animation-#{$type}-#{$key})"); } } @each $key, $value in $animation-direction { - @include anima($key, "animation-direction", $value); + @include default("anima-#{$key}", "animation-direction", $value); } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index a70383b..79d0c44 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -8,6 +8,12 @@ $breakpoints: ( ) !default; // ********** MAIN MIXINS ********** +@mixin default($class, $property, $value) { + .#{$class} { + #{$property}: #{$value}; + } +} + @mixin global($class, $property, $value) { .#{$class}, .#{$class}-all > * { @@ -133,7 +139,7 @@ $text-align: ( ) !default; @each $key, $value in $text-align { - @include global("#{$key}", "text-align", $value); + @include default("#{$key}", "text-align", $value); } /********** TEXT TRANSFORM **********/ @@ -149,12 +155,11 @@ $trans: ( /********** TEXT DECORATION LINE **********/ $text-decoration-line: ( - "none": none, "over": overline, "through": line-through ) !default; -[class*="deco"] { +.deco { text-decoration-line: underline; } diff --git a/src/scss/_boxes.scss b/src/scss/_boxes.scss index aa0a660..7a478b2 100644 --- a/src/scss/_boxes.scss +++ b/src/scss/_boxes.scss @@ -1,30 +1,3 @@ -// ********** BOXES ********** -$box-none: ( - "none": "", - "top-none": "-top", - "right-none": "-right", - "bottom-none": "-bottom", - "left-none": "-left", -) !default; - -$box-size: ( - "sm": "", - "md": "", - "lg": "", - "top-sm": "-top", - "top-md": "-top", - "top-lg": "-top", - "right-sm": "-right", - "right-md": "-right", - "right-lg": "-right", - "bot-sm": "-bottom", - "bot-md": "-bottom", - "bot-lg": "-bottom", - "left-sm": "-left", - "left-md": "-left", - "left-lg": "-left" -) !default; - /********** CONTAINER **********/ $containers: ( "50": 50%, @@ -60,27 +33,14 @@ $containers: ( } /********** MARGIN **********/ -$margin-sm: 5px !default; -$margin-md: 10px !default; -$margin-lg: 20px !default; - $margins: ( - "none": 0, - "sm": $margin-sm, - "md": $margin-md, - "lg": $margin-lg, - "top-sm": $margin-sm, - "top-md": $margin-md, - "top-lg": $margin-lg, - "right-sm": $margin-sm, - "right-md": $margin-md, - "right-lg": $margin-lg, - "bot-sm": $margin-sm, - "bot-md": $margin-md, - "bot-lg": $margin-lg, - "left-sm": $margin-sm, - "left-md": $margin-md, - "left-lg": $margin-lg + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px ) !default; [class*="mar-"] { @@ -89,12 +49,8 @@ $margins: ( } } -@each $key, $value in $box-none { - @include global("mar-#{$key}", "margin#{$value}", "var(--margin-none)"); -} - -@each $key, $value in $box-size { - @include global("mar-#{$key}", "margin#{$value}", "var(--margin-#{$key})"); +@each $key, $value in $margins { + @include global("mar-#{$key}", "margin", "var(--margin-#{$key})"); } /********** BORDER **********/ @@ -115,8 +71,8 @@ $border-width: ( ) !default; $border-radius: ( - "curve": 20px, - "round": 50px, + "curve": 10px, + "round": 20px, "circle": 50% ) !default; @@ -127,6 +83,9 @@ $border-radius: ( @each $key, $value in $border-radius { --border-radius-#{$key}: #{$value}; } +} + +.bord { border-style: solid; } @@ -151,27 +110,14 @@ $border-radius: ( } /********** PADDING **********/ -$padding-sm: 5px !default; -$padding-md: 10px !default; -$padding-lg: 20px !default; - $paddings: ( - "none": 0, - "sm": $padding-sm, - "md": $padding-md, - "lg": $padding-lg, - "top-sm": $padding-sm, - "top-md": $padding-md, - "top-lg": $padding-lg, - "right-sm": $padding-sm, - "right-md": $padding-md, - "right-lg": $padding-lg, - "bot-sm": $padding-sm, - "bot-md": $padding-md, - "bot-lg": $padding-lg, - "left-sm": $padding-sm, - "left-md": $padding-md, - "left-lg": $padding-lg + "none": 0, + "tn": 2px, + "sm": 5px, + "md": 10px, + "lg": 20px, + "xl": 50px, + "wd": 100px ) !default; [class*="pad-"] { @@ -180,12 +126,8 @@ $paddings: ( } } -@each $key, $value in $box-none { - @include global("pad-#{$key}", "padding#{$value}", "var(--padding-none)"); -} - -@each $key, $value in $box-size { - @include global("pad-#{$key}", "padding#{$value}", "var(--padding-#{$key})"); +@each $key, $value in $paddings { + @include global("pad-#{$key}", "padding", "var(--padding-#{$key})"); } /********** HEIGHT **********/ diff --git a/src/scss/_display.scss b/src/scss/_display.scss index 325077a..282c85c 100644 --- a/src/scss/_display.scss +++ b/src/scss/_display.scss @@ -91,7 +91,7 @@ $gap: ( } @mixin gap($size, $type) { - [class*="gap-"][class*="-#{$size}#{$type}"] { + [class*="gap-"][class*="-#{$type}#{$size}"] { gap: var(--gap#{$size}); } } diff --git a/src/scss/_tags.scss b/src/scss/_tags.scss index 22d6873..971af74 100644 --- a/src/scss/_tags.scss +++ b/src/scss/_tags.scss @@ -26,6 +26,7 @@ body { --body-line-height: 1.6; --body-margin: auto; --body-max-width: 2000px; + --body-overflow: break-word; --body-padding: 0; margin: var(--body-margin); padding: var(--body-padding); @@ -33,6 +34,7 @@ body { line-height: var(--body-line-height); font-size: var(--body-font-size); font-family: var(--sans-serif); + overflow-wrap: var(--body-overflow); } main {