Skip to content

Commit

Permalink
Merge pull request #170 from philippebeck/dev
Browse files Browse the repository at this point in the history 
Release 5.5.0
  • Loading branch information
@philippebeck
philippebeck authored Dec 9, 2022
2 parents 3229f7f + 376ff42 commit 6ecad1e
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 175 deletions.
181 changes: 100 additions & 81 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,33 @@
</style>
</head>

<body class="center bg-black">
<body class="container-90sm-80md-70lg center bg-black">
<h1 class="violet">Animadio Lab</h1>

<section>
<h2>Colors</h2>

<section>
<h3>Hues</h3>
<ul class="flex-col gap-1tn items-center width-sm-all">
<li class="red">Red</li>
<li class="orange">Orange</li>
<li class="yellow">Yellow</li>
<li class="green">Green</li>
<li class="sky">Sky</li>
<li class="blue">Blue</li>
<li class="violet">Violet</li>
<li class="pink">Pink</li>
<ul class="flex-col gap-tn1 items-center width-md-all">
<li class="red">Red : class="red"</li>
<li class="orange">Orange : class="orange"</li>
<li class="yellow">Yellow : class="yellow"</li>
<li class="green">Green : class="green"</li>
<li class="sky">Sky : class="sky"</li>
<li class="blue">Blue : class="blue"</li>
<li class="violet">Violet : class="violet"</li>
<li class="pink">Pink : class="pink"</li>
</ul>
</section>

<section>
<h3>Grayscale</h3>
<ul class="flex-col gap-1tn items-center width-sm-all">
<li class="bg-white black">Black</li>
<li class="gray">Gray</li>
<li class="silver">Silver</li>
<li class="white">White</li>
<ul class="flex-col gap-tn1 items-center width-md-all">
<li class="bg-white black">Black : class="black"</li>
<li class="gray">Gray : class="gray"</li>
<li class="silver">Silver : class="silver"</li>
<li class="white">White : class="white"</li>
</ul>
</section>
</section>
Expand All @@ -58,25 +58,25 @@ <h2>Background Colors</h2>

<section>
<h3>Hues</h3>
<ul class="flex-col gap-1tn items-center width-sm-all white-all">
<li class="bg-red">Red</li>
<li class="bg-orange">Orange</li>
<li class="bg-yellow">Yellow</li>
<li class="bg-green">Green</li>
<li class="bg-sky">Sky</li>
<li class="bg-blue">Blue</li>
<li class="bg-violet">Violet</li>
<li class="bg-pink">Pink</li>
<ul class="flex-col gap-tn1 items-center width-md-all white-all">
<li class="bg-red">Red : class="bg-red"</li>
<li class="bg-orange">Orange : class="bg-orange"</li>
<li class="bg-yellow">Yellow : class="bg-yellow"</li>
<li class="bg-green">Green : class="bg-green"</li>
<li class="bg-sky">Sky : class="bg-sky"</li>
<li class="bg-blue">Blue : class="bg-blue"</li>
<li class="bg-violet">Violet : class="bg-violet"</li>
<li class="bg-pink">Pink : class="bg-pink"</li>
</ul>
</section>

<section>
<h3>Grayscale</h3>
<ul class="flex-col gap-1tn items-center width-sm-all">
<li class="white bg-black">Black</li>
<li class="white bg-gray">Gray</li>
<li class="white bg-silver">Silver</li>
<li class="black bg-white">White</li>
<ul class="flex-col gap-tn1 items-center width-md-all">
<li class="white bg-black">Black : class="bg-black"</li>
<li class="white bg-gray">Gray : class="bg-gray"</li>
<li class="white bg-silver">Silver : class="bg-silver"</li>
<li class="black bg-white">White : class="bg-white"</li>
</ul>
</section>
</section>
Expand All @@ -87,19 +87,19 @@ <h2>Fonts</h2>
<section>
<h3>Font Families</h3>
<ul>
<li class="serif">Times, Serif</li>
<li class="sans-serif">Helvetica, Sans-Serif</li>
<li class="monospace">Courier, Monospace</li>
<li class="cursive">Mistral, Cursive</li>
<li class="fantasy">Impact, Fantasy</li>
<li class="serif">Times, Serif : class="serif"</li>
<li class="sans-serif">Helvetica, Sans-Serif : class="sans-serif"</li>
<li class="monospace">Courier, Monospace : class="monospace"</li>
<li class="cursive">Mistral, Cursive : class="cursive"</li>
<li class="fantasy">Impact, Fantasy <span class="serif">: class="fantasy"</span></li>
</ul>
</section>

<section>
<h3>Fonts</h3>
<h3>Font Style & Weight</h3>
<ul>
<li class="bold">Bold</li>
<li class="italic">Italic</li>
<li class="bold">Bold : class="bold"</li>
<li class="italic">Italic : class="italic"</li>
</ul>
</section>
</section>
Expand All @@ -109,90 +109,109 @@ <h2>Text</h2>

<section>
<h3>Text Align</h3>
<ul class="flex-col gap-1tn items-center width-sm-all">
<li class="center">Center</li>
<li class="justify">Justify</li>
<li class="left">Left</li>
<li class="right">Right</li>
<ul class="flex-col gap-tn1 items-center width-md-all">
<li class="center">Center : class="center"</li>
<li class="justify">Justify : class="justify"</li>
<li class="left">Left : class="left"</li>
<li class="right">Right : class="right"</li>
</ul>
</section>

<section>
<h3>Text Transform</h3>
<ul>
<li class="cap">Capitalize</li>
<li class="up">Uppercase</li>
<li class="low">Lowercase</li>
<li class="cap">Capitalize : class="cap"</li>
<li class="up">Uppercase : class="up"</li>
<li class="low">Lowercase : class="low"</li>
</ul>
</section>

<section>
<h3>Text Decoration Line</h3>
<ul>
<li class="deco-none">None</li>
<li class="deco">Underline</li>
<li class="deco-over">Overline</li>
<li class="deco-through">Line-Through</li>
<li class="deco">Underline : class="deco"</li>
<li class="deco-over">Overline : class="deco-over"</li>
<li class="deco-through">Line-Through : class="deco-through"</li>
</ul>
</section>

<section>
<h3>Text Decoration Style</h3>
<ul>
<li class="deco-dash">Dashed</li>
<li class="deco-dot">Dotted</li>
<li class="deco-double">Double</li>
<li class="deco">Solid</li>
<li class="deco-wavy">Wavy</li>
<li class="deco deco-dash">Dashed : class="deco deco-dash"</li>
<li class="deco deco-dot">Dotted : class="deco deco-dot"</li>
<li class="deco deco-double">Double : class="deco deco-double"</li>
<li class="deco">Solid : class="deco"</li>
<li class="deco deco-wavy">Wavy : class="deco deco-wavy"</li>
</ul>
</section>

<section>
<h3>Text Decoration Color</h3>
<ul>
<li class="deco-red">Red</li>
<li class="deco-orange">Orange</li>
<li class="deco-yellow">Yellow</li>
<li class="deco-green">Green</li>
<li class="deco-sky">Sky</li>
<li class="deco-blue">Blue</li>
<li class="deco-violet">Violet</li>
<li class="deco-pink">Pink</li>
<li class="deco deco-red">Red : class="deco deco-red"</li>
<li class="deco deco-orange">Orange : class="deco deco-orange"</li>
<li class="deco deco-yellow">Yellow : class="deco deco-yellow"</li>
<li class="deco deco-green">Green : class="deco deco-green"</li>
<li class="deco deco-sky">Sky : class="deco deco-sky"</li>
<li class="deco deco-blue">Blue : class="deco deco-blue"</li>
<li class="deco deco-violet">Violet : class="deco deco-violet"</li>
<li class="deco deco-pink">Pink : class="deco deco-pink"</li>
</ul>
</section>
</section>

<section>
<h2>Display</h2>
<h2>Boxes</h2>

<section>
<h3>Flex</h3>

</section>

<section>
<h3>Grid</h3>

</section>
<h3>Border Style</h3>

<section>
<h3>Gap</h3>

<ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
<li class="bord-dash">Dashed : class="bord-dash"</li>
<li class="bord-dot">Dotted : class="bord-dot"</li>
<li class="bord">Solid : class="bord"</li>
<li class="bord-double">Double : class="bord-double"</li>
<li class="bord-groove">Groove : class="bord-groove"</li>
<li class="bord-ridge">Ridge : class="bord-ridge"</li>
<li class="bord-in">Inset : class="bord-in"</li>
<li class="bord-out">Outset : class="bord-out"</li>
</ul>
</section>

<section>
<h3>Place Content</h3>

<h3>Border Width</h3>

<ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
<li class="bord bord-sm">Small : class="bord bord-sm"</li>
<li class="bord bord-md">Medium : class="bord bord-md"</li>
<li class="bord bord-lg">Large : class="bord bord-lg"</li>
</ul>
</section>

<section>
<h3>Place Items</h3>

<h3>Border Color</h3>

<ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
<li class="bord bord-red">Red : class="bord bord-red"</li>
<li class="bord bord-orange">Orange : class="bord bord-orange"</li>
<li class="bord bord-yellow">Yellow : class="bord bord-yellow"</li>
<li class="bord bord-green">Green : class="bord bord-green"</li>
<li class="bord bord-sky">Sky : class="bord bord-sky"</li>
<li class="bord bord-blue">Blue : class="bord bord-blue"</li>
<li class="bord bord-violet">Violet : class="bord bord-violet"</li>
<li class="bord bord-pink">Pink : class="bord bord-pink"</li>
</ul>
</section>

<section>
<h3>Place Self</h3>

<h3>Border Radius</h3>

<ul class="flex-col gap-tn1 items-center width-md-all violet-all bg-white-all">
<li class="bord-curve">Curve : class="bord-curve"</li>
<li class="bord-round">Round : class="bord-round"</li>
<li class="bord-circle">Circle : class="bord-circle"</li>
</ul>
</section>
</section>
</body>
Expand Down
11 changes: 2 additions & 9 deletions src/scss/_anima.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}
11 changes: 8 additions & 3 deletions src/scss/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ $breakpoints: (
) !default;

// ********** MAIN MIXINS **********
@mixin default($class, $property, $value) {
.#{$class} {
#{$property}: #{$value};
}
}

@mixin global($class, $property, $value) {
.#{$class},
.#{$class}-all > * {
Expand Down Expand Up @@ -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 **********/
Expand All @@ -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;
}

Expand Down
Loading

0 comments on commit 6ecad1e

Please sign in to comment.