X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/eb2eb95bfbfe8c777c4192ea434a0e999edf3a51..2aff714cb52d85d39824728d70b3272bb4fd5064:/src/wolnelektury/static/2022/styles/utils/_mixins.scss?ds=inline diff --git a/src/wolnelektury/static/2022/styles/utils/_mixins.scss b/src/wolnelektury/static/2022/styles/utils/_mixins.scss index 137b9bddb..6ecb4911f 100644 --- a/src/wolnelektury/static/2022/styles/utils/_mixins.scss +++ b/src/wolnelektury/static/2022/styles/utils/_mixins.scss @@ -13,177 +13,107 @@ font-size: calculateRem($size); } -/* Photoshop letter spacing */ -@function tracking($target) { - @return ($target / 1000) * 1rem; -} -@mixin tracking($target) { - letter-spacing: tracking($target); -} -/* Float fix */ -@mixin clearfix { - &:after { - content: ""; - display: table; - clear: both; - } -} +/* Breakpoints */ +$tablet: 1024px; -/* Input placeholder selector */ -@mixin placeholder { - $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; - @each $placeholder in $placeholders { - &:#{$placeholder}-placeholder { - @content; - } - } -} -@mixin keyframes($animation-name) { - @keyframes #{$animation-name} { - @content; - } -} - -@keyframes slide-up { - from { - opacity: 0; - } - to { - opacity: 1; - transform: translate(0,0); - } -} +// under... -@mixin cascading { - @for $i from 1 through 14 { - &:nth-child(#{$i}) { - animation: slide-up 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards #{$i * 0.1}s; - } - } -} +$break2: 360px; +$break3: 520px; +$break4: 680px; +$break5: 840px; +// somewhere here -- widen? +$break-wide: 1172px; -$scrimStops: 0% 0%, 26.2% 19%, 45.9% 34%, 61.8% 47%, 72.2% 56.5%, 80.6% 65%, 87.4% 73%, 92.5% 80.2%, 95.8% 86.1%, 97.9% 91%, 99.2% 95.2%, 99.8% 98.2%, 100% 100%; +$screen-md: 1418px; -@function getColorStop($colorTo, $colorFrom, $weight, $stop) { - @return mix($colorFrom, $colorTo, $weight) $stop; -} +$B2: $break2; +$B3: $break3; +$B4: $break4; +$B5: $break5; -@function getColorStops($colorTo, $colorFrom) { - $stops: (); - @each $scrimStop in $scrimStops { - $stops: append($stops, getColorStop($colorTo, $colorFrom, nth($scrimStop, 1), nth($scrimStop, 2)), comma) - } - @return $stops; -} +$break-menu: $break5; +$break-footer: $break5; +$break-flow: $break5; -@function scrim-linear-gradient($args...) { - @if (length($args) == 2) { - @return linear-gradient(#{getColorStops(nth($args, 1), nth($args, 2))}); - } - @return linear-gradient(#{nth($args, 1)}, #{getColorStops(nth($args, 2), nth($args, 3))}); -} -@function unicode($str) { - @return unquote("\"") + $str + unquote("\""); +@mixin rwd($canvas) { + //@if $canvas == 'phone' { + //} @else if $... + @media only screen and (min-width: $canvas) { + @content; + } } -/* Breakpoints */ -$phone: 450px; -$smartphone: 767px; -$tablet: 1024px; -$only-desktop: 1025px; -$screen-xs: 1280px; -$screen-sm: 1368px; -$screen-md: 1418px; -$screen-xl: 1680px; - - -@mixin mq($breakpoint) { - @media only screen and (max-width: $breakpoint) { +/* + // Print styles + @else if $canvas == 'print' { + @media print { @content; } + } } -@mixin rwd($canvas) { +*/ - // Really Small devices - @if $canvas == 'phone' { - @media only screen and (max-width: $phone) { - @content; - } - } - // Smartphones - @else if $canvas == 'smartphone' { - @media only screen and (max-width: $smartphone) { - @content; - } - } - @else if $canvas == 'smartphone-portrait' { - @media only screen and (max-width: $smartphone) and (orientation: portrait) { - @content; +.only-l { + display: none; + @include rwd($break5) { + display: block; } - } - @else if $canvas == 'smartphone-landscape' { - @media only screen and (max-width: $smartphone) and (orientation: landscape) { - @content; +} +.only-s { + display: block; + @include rwd($break5) { + display: none; } - } +} - // Tablets - @else if $canvas == 'tablet' { - @media only screen and (max-width: $tablet) { - @content; +.lay-row { + display: flex; + flex-direction: row; + column-gap: 16px; +} +.lay-col { + display: flex; + flex-direction: column; +} +.lay-spread { + justify-content: space-between; +} +.lay-l-row { + @include rwd($break5) { + display: flex; + flex-direction: row; } - } - @else if $canvas == 'tablet-portrait' { - @media only screen and (max-width: $tablet) and (orientation: portrait) { - @content; +} +.lay-l-block { + @include rwd($break5) { + display: block; } - } - @else if $canvas == 'tablet-landscape' { - @media only screen and (max-width: $tablet) and (orientation: landscape) { - @content; +} +.lay-s-col-rev { + flex-direction: column-reverse; + @include rwd($break5) { + flex-direction: row; } - } +} +.lay-grow { + flex-grow: 1; +} - // Screens - @else if $canvas == 'screen-xs' { - @media only screen and (max-width: $screen-xs) { - @content; - } - } - @else if $canvas == 'screen-sm' { - @media only screen and (max-width: $screen-sm) { - @content; - } - } - @else if $canvas == 'screen-md' { - @media only screen and (max-width: $screen-md) { - @content; - } - } - @else if $canvas == 'screen-xl' { - @media only screen and (max-width: $screen-xl) { - @content; - } - } - // More than tablets - @else if $canvas == 'only-desktop' { - @media only screen and (min-width: 1025px) { - @content; - } - } - // Print styles - @else if $canvas == 'print' { - @media print { - @content; - } - } +$max-logical-viewport-width: 1140px + 32px; +@mixin lvw($property, $size) { + #{$property}: $size * $max-logical-viewport-width / 100; + + @include rwd($break-wide) { + #{$property}: $size * 1vw; + } }