diff options
Diffstat (limited to 'public/projects/react-small-apps/apps/todos/src/sass/abstracts')
3 files changed, 41 insertions, 0 deletions
diff --git a/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss new file mode 100644 index 0000000..e1733dc --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss @@ -0,0 +1,24 @@ +@use "sass:math"; + +/// Create a triangle with CSS. +/// @link https://sass-lang.com/documentation/at-rules/control/if#else-if +@mixin triangle($size, $color, $direction) { + height: 0; + width: 0; + + border-color: transparent; + border-style: solid; + border-width: math.div($size, 2); + + @if $direction == up { + border-bottom-color: $color; + } @else if $direction == right { + border-left-color: $color; + } @else if $direction == down { + border-top-color: $color; + } @else if $direction == left { + border-right-color: $color; + } @else { + @error "Unknown direction #{$direction}."; + } +} diff --git a/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_placeholders.scss b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_placeholders.scss new file mode 100644 index 0000000..565959c --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_placeholders.scss @@ -0,0 +1,5 @@ +%list-reset { + list-style-type: none; + margin: 0; + padding: 0; +} diff --git a/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_variables.scss b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_variables.scss new file mode 100644 index 0000000..8f1717e --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/sass/abstracts/_variables.scss @@ -0,0 +1,12 @@ +$background-color: hsl(0, 0%, 100%); +$foreground-color: hsl(0, 0%, 0%); +$foreground-color-alt: hsl(0, 0%, 100%); +$primary-color: hsl(209, 54%, 32%); +$primary-color-light: hsl(209, 54%, 37%); +$primary-color-dark: hsl(209, 54%, 27%); +$secondary-color: hsl(32, 92%, 86%); +$secondary-color-light: hsl(32, 92%, 91%); +$secondary-color-dark: hsl(32, 92%, 81%); +$shadow-color: rgba(26, 57, 86, 0.55); +$done-color: hsl(32, 63%, 50%); +$delete-color: hsl(0, 63%, 50%); |