diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:11:00 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-30 22:52:23 +0200 |
| commit | 3a3baddad1c801d77dc398d2c6980f3c14f4a47c (patch) | |
| tree | 9e06aef730504470111c010e53a1857f7b01ab83 /htdocs/src/scss/abstracts/mixins | |
| parent | c3045b163e74b42c0a0e71c646740c76d3bb5ba1 (diff) | |
chore: move htdocs to repo root
Diffstat (limited to 'htdocs/src/scss/abstracts/mixins')
| -rw-r--r-- | htdocs/src/scss/abstracts/mixins/_css-vars.scss | 20 | ||||
| -rw-r--r-- | htdocs/src/scss/abstracts/mixins/_media-queries.scss | 81 |
2 files changed, 0 insertions, 101 deletions
diff --git a/htdocs/src/scss/abstracts/mixins/_css-vars.scss b/htdocs/src/scss/abstracts/mixins/_css-vars.scss deleted file mode 100644 index 8e31c96..0000000 --- a/htdocs/src/scss/abstracts/mixins/_css-vars.scss +++ /dev/null @@ -1,20 +0,0 @@ -/// Declare a set of CSS variables properly prefixed. -/// -/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88 -/// -/// @param {List} $variables - A list of variable name and value. -/// @param {Bool} $root - Set vars at root. -/// @param {String} $prefix - The variables prefix. -@mixin set-vars($variables, $root: true, $prefix: "dap") { - @if $root { - :root { - @each $name, $value in $variables { - --#{$prefix}-#{$name}: #{$value}; - } - } - } @else { - @each $name, $value in $variables { - --#{$prefix}-#{$name}: #{$value}; - } - } -} diff --git a/htdocs/src/scss/abstracts/mixins/_media-queries.scss b/htdocs/src/scss/abstracts/mixins/_media-queries.scss deleted file mode 100644 index fcaea4b..0000000 --- a/htdocs/src/scss/abstracts/mixins/_media-queries.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use "../variables" as var; - -/// Media query: media type -/// @param {String} $type - Media type: all, screen, print, retina. -/// @example scss - `@media only screen` equivalent is: -/// @include media("screen"); -@mixin media($type) { - @if $type == "retina" { - $type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; - } @else if $type == "screen" or $type == "print" { - $type: "only #{$type}"; - } - - @media #{$type} { - @content; - } -} - -/// Media query: min-width / max-width -/// @param {String} $from - min-width breakpoint. -/// @param {String} $until - max-width breakpoint. -/// @example scss - `@media (min-width: "md")` equivalent is: -/// @include dimensions("md"); -@mixin dimensions($from: null, $until: null) { - $query: ""; - - @if $from { - @if type-of($from) == "string" { - $size: map-get(var.$breakpoints, $from); - $query: "(min-width: #{$size})"; - } @else { - @error "`$from` must be a string."; - } - } - - @if $from and $until { - $query: $query + " and "; - } - - @if $until { - @if type-of($until) == "string" { - $size: map-get(var.$breakpoints, $until); - $size: calc(#{$size} - 1px); - $query: $query + "(max-width: #{$size})"; - } @else { - @error "`$until` must be a string."; - } - } - - @media #{$query} { - @content; - } -} - -/// Media query: prefers-reduced-motion -/// @param {String} $value - Media query value: `no-preference` or `reduce`. -/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is: -/// @include motion("reduce"); -@mixin motion($value) { - @if $value == "no-preference" or $value == "reduce" { - @media (prefers-reduced-motion: #{$value}) { - @content; - } - } @else { - @error "Allowed values are `no-preference` and `reduce`."; - } -} - -/// Media query: any-pointer -/// @param {String} $value - Media query value: `fine`, `coarse` or `none`. -/// @example scss - @media (any-pointer: "fine") equivalent is: -/// @include pointer("fine"); -@mixin pointer($value) { - @if $value == "fine" or $value == "coarse" or $value == "none" { - @media (any-pointer: #{$value}) { - @content; - } - } @else { - @error "Allowed values are `fine`, `coarse` and `none`."; - } -} |
