99 lines
2.6 KiB
SCSS
99 lines
2.6 KiB
SCSS
/*
|
|
|
|
MAX WIDTHS
|
|
|
|
*/
|
|
|
|
.mw-100 { max-width: 100%; }
|
|
.mw-75 { max-width: 75%; }
|
|
.mw-50 { max-width: 50%; }
|
|
.mw-25 { max-width: 25%; }
|
|
|
|
.mw1 { max-width: 1rem; }
|
|
.mw2 { max-width: 2rem; }
|
|
.mw3 { max-width: 4rem; }
|
|
.mw4 { max-width: 8rem; }
|
|
.mw5 { max-width: 16rem; }
|
|
.mw6 { max-width: 32rem; }
|
|
.mw7 { max-width: 48rem; }
|
|
.mw8 { max-width: 64rem; }
|
|
.mw9 { max-width: 96rem; }
|
|
.mw10 { max-width: 128rem; }
|
|
|
|
.mw-none { max-width: none; }
|
|
.mw-max { max-width: max-content; }
|
|
.mw-min { max-width: min-content; }
|
|
.mw-fit { max-width: fit-content; }
|
|
.mw-fill { max-width: fill-available; }
|
|
|
|
@include break(not-small) {
|
|
.mw-100-ns { max-width: 100%; }
|
|
.mw-75-ns { max-width: 75%; }
|
|
.mw-50-ns { max-width: 50%; }
|
|
.mw-25-ns { max-width: 25%; }
|
|
|
|
.mw1-ns { max-width: 1rem; }
|
|
.mw2-ns { max-width: 2rem; }
|
|
.mw3-ns { max-width: 4rem; }
|
|
.mw4-ns { max-width: 8rem; }
|
|
.mw5-ns { max-width: 16rem; }
|
|
.mw6-ns { max-width: 32rem; }
|
|
.mw7-ns { max-width: 48rem; }
|
|
.mw8-ns { max-width: 64rem; }
|
|
.mw9-ns { max-width: 96rem; }
|
|
.mw10-ns { max-width: 128rem; }
|
|
|
|
.mw-none-ns { max-width: none; }
|
|
.mw-max-ns { max-width: max-content; }
|
|
.mw-min-ns { max-width: min-content; }
|
|
.mw-fit-ns { max-width: fit-content; }
|
|
.mw-fill-ns { max-width: fill-available; }
|
|
}
|
|
|
|
@include break(medium) {
|
|
.mw-100-m { max-width: 100%; }
|
|
.mw-75-m { max-width: 75%; }
|
|
.mw-50-m { max-width: 50%; }
|
|
.mw-25-m { max-width: 25%; }
|
|
|
|
.mw1-m { max-width: 1rem; }
|
|
.mw2-m { max-width: 2rem; }
|
|
.mw3-m { max-width: 4rem; }
|
|
.mw4-m { max-width: 8rem; }
|
|
.mw5-m { max-width: 16rem; }
|
|
.mw6-m { max-width: 32rem; }
|
|
.mw7-m { max-width: 48rem; }
|
|
.mw8-m { max-width: 64rem; }
|
|
.mw9-m { max-width: 96rem; }
|
|
.mw10-m { max-width: 128rem; }
|
|
|
|
.mw-none-m { max-width: none; }
|
|
.mw-max-m { max-width: max-content; }
|
|
.mw-min-m { max-width: min-content; }
|
|
.mw-fit-m { max-width: fit-content; }
|
|
.mw-fill-m { max-width: fill-available; }
|
|
}
|
|
|
|
@include break(large) {
|
|
.mw-100-l { max-width: 100%; }
|
|
.mw-75-l { max-width: 75%; }
|
|
.mw-50-l { max-width: 50%; }
|
|
.mw-25-l { max-width: 25%; }
|
|
|
|
.mw1-l { max-width: 1rem; }
|
|
.mw2-l { max-width: 2rem; }
|
|
.mw3-l { max-width: 4rem; }
|
|
.mw4-l { max-width: 8rem; }
|
|
.mw5-l { max-width: 16rem; }
|
|
.mw6-l { max-width: 32rem; }
|
|
.mw7-l { max-width: 48rem; }
|
|
.mw8-l { max-width: 64rem; }
|
|
.mw9-l { max-width: 96rem; }
|
|
.mw10-l { max-width: 128rem; }
|
|
|
|
.mw-none-l { max-width: none; }
|
|
.mw-max-l { max-width: max-content; }
|
|
.mw-min-l { max-width: min-content; }
|
|
.mw-fit-l { max-width: fit-content; }
|
|
.mw-fill-l { max-width: fill-available; }
|
|
}
|