175 lines
4.0 KiB
SCSS
175 lines
4.0 KiB
SCSS
@mixin width-sizing($map: $widths, $prefix: '.') {
|
|
@each $name, $value in $map {
|
|
@if $name == default {
|
|
#{$prefix}w {
|
|
width: $value;
|
|
}
|
|
} @else {
|
|
#{$prefix}w-#{'' + selector-escape($name)} {
|
|
width: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*!markdown
|
|
|
|
---
|
|
title: Width
|
|
---
|
|
|
|
| Class | Properties |
|
|
| ----------- | ------------------------ |
|
|
| w-px | width: 0.0625rem |
|
|
| w-0 | width: 0 |
|
|
| w-none | width: 0 |
|
|
| w-0\.5 | width: 0.125rem |
|
|
| w-1 | width: 0.25rem |
|
|
| w-1\.5 | width: 0.375rem |
|
|
| w-2 | width: 0.5rem |
|
|
| w-2\.5 | width: 0.625rem |
|
|
| w-3 | width: 0.75rem |
|
|
| w-3\.5 | width: 0.875rem |
|
|
| w-4 | width: 1rem |
|
|
| w-5 | width: 1.25rem |
|
|
| w-6 | width: 1.5rem |
|
|
| w-7 | width: 1.75rem |
|
|
| w-8 | width: 2rem |
|
|
| w-9 | width: 2.25rem |
|
|
| w-10 | width: 2.5rem |
|
|
| w-11 | width: 2.75rem |
|
|
| w-12 | width: 3rem |
|
|
| w-14 | width: 3.5rem |
|
|
| w-16 | width: 4rem |
|
|
| w-18 | width: 4.5rem |
|
|
| w-20 | width: 5rem |
|
|
| w-24 | width: 6rem |
|
|
| w-28 | width: 7rem |
|
|
| w-32 | width: 8rem |
|
|
| w-36 | width: 9rem |
|
|
| w-40 | width: 10rem |
|
|
| w-44 | width: 11rem |
|
|
| w-48 | width: 12rem |
|
|
| w-52 | width: 13rem |
|
|
| w-56 | width: 14rem |
|
|
| w-60 | width: 15rem |
|
|
| w-64 | width: 16rem |
|
|
| w-72 | width: 18rem |
|
|
| w-80 | width: 20rem |
|
|
| w-96 | width: 24rem |
|
|
| w-auto | width: auto |
|
|
| w-1x | width: 1em |
|
|
| w-2x | width: 2em |
|
|
| w-3x | width: 3em |
|
|
| w-1\/2 | width: 50% |
|
|
| w-1\/3 | width: 33.333333% |
|
|
| w-2\/3 | width: 66.666667% |
|
|
| w-1\/4 | width: 25% |
|
|
| w-2\/4 | width: 50% |
|
|
| w-3\/4 | width: 75% |
|
|
| w-1\/5 | width: 20% |
|
|
| w-2\/5 | width: 40% |
|
|
| w-3\/5 | width: 60% |
|
|
| w-4\/5 | width: 80% |
|
|
| w-1\/6 | width: 16.666667% |
|
|
| w-2\/6 | width: 33.333333% |
|
|
| w-3\/6 | width: 50% |
|
|
| w-4\/6 | width: 66.666667% |
|
|
| w-5\/6 | width: 83.333333% |
|
|
| w-1\/12 | width: 8.333333% |
|
|
| w-2\/12 | width: 16.666667% |
|
|
| w-3\/12 | width: 25% |
|
|
| w-4\/12 | width: 33.333333% |
|
|
| w-5\/12 | width: 41.666667% |
|
|
| w-6\/12 | width: 50% |
|
|
| w-7\/12 | width: 58.333333% |
|
|
| w-8\/12 | width: 66.666667% |
|
|
| w-9\/12 | width: 75% |
|
|
| w-10\/12 | width: 83.333333% |
|
|
| w-11\/12 | width: 91.666667% |
|
|
| w-full | width: 100% |
|
|
| w-screen | width: 100vw |
|
|
| w-min | width: min-content |
|
|
| w-max | width: max-content |
|
|
| min-w-0 | min-width: 0px |
|
|
| min-w-full | min-width: 100% |
|
|
| min-w-min | min-width: min-content |
|
|
| min-w-max | min-width: max-content |
|
|
| max-w-none | max-width: none |
|
|
| max-w-0 | max-width: 0rem |
|
|
| max-w-xs | max-width: 20rem |
|
|
| max-w-sm | max-width: 24rem |
|
|
| max-w-md | max-width: 28rem |
|
|
| max-w-lg | max-width: 32rem |
|
|
| max-w-xl | max-width: 36rem |
|
|
| max-w-2xl | max-width: 42rem |
|
|
| max-w-3xl | max-width: 48rem |
|
|
| max-w-4xl | max-width: 56rem |
|
|
| max-w-5xl | max-width: 64rem |
|
|
| max-w-6xl | max-width: 72rem |
|
|
| max-w-7xl | max-width: 80rem |
|
|
| max-w-full | max-width: 100% |
|
|
| max-w-min | max-width: min-content |
|
|
| max-w-max | max-width: max-content |
|
|
| max-w-prose | max-width: 65ch |
|
|
|
|
|
|
*/
|
|
|
|
@mixin min-width-sizing($map: $minWidths, $prefix: '.') {
|
|
@each $name, $value in $map {
|
|
@if $name == default {
|
|
#{$prefix}min-w {
|
|
min-width: $value;
|
|
}
|
|
} @else {
|
|
#{$prefix}min-w-#{'' + selector-escape($name)} {
|
|
min-width: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin max-width-sizing($map: $maxWidths, $prefix: '.') {
|
|
@each $name, $value in $map {
|
|
@if $name == default {
|
|
#{$prefix}max-w {
|
|
max-width: $value;
|
|
}
|
|
} @else {
|
|
#{$prefix}max-w-#{'' + selector-escape($name)} {
|
|
max-width: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin make-widths($prefix: '.') {
|
|
@include width-sizing($widths, $prefix);
|
|
#{$prefix}min-w-0 {
|
|
min-width: 0px;
|
|
}
|
|
|
|
#{$prefix}min-w-full {
|
|
min-width: 100%;
|
|
}
|
|
|
|
#{$prefix}min-w-min {
|
|
min-width: min-content;
|
|
}
|
|
|
|
#{$prefix}min-w-max {
|
|
min-width: max-content;
|
|
}
|
|
|
|
@include max-width-sizing($maxWidths, $prefix);
|
|
@include min-width-sizing($minWidths, $prefix);
|
|
}
|
|
|
|
@include make-widths();
|
|
@each $deivce in map-keys($devices) {
|
|
@include media-device($deivce) {
|
|
@include make-widths('.' + selector-escape($deivce + ':'));
|
|
}
|
|
}
|