mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: breakpoints

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 15:39:36 +07:00
parent ab37deb10c
commit b477bb6c96
9 changed files with 115 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

35
scss/layout/_container.scss
View file

@ -1,3 +1,4 @@
@use "sass:map";
@use "../settings" as *;
@if ($enable-class-container and $enable-classes) {
@ -15,29 +16,17 @@
}
.container {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
$first-breakpoint: true;
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}
}

5
scss/layout/_grid.scss
View file

@ -1,3 +1,4 @@
@use "sass:map";
@use "../settings" as *;
@if ($enable-classes and $enable-grid) {
@ -13,8 +14,8 @@
grid-template-columns: 1fr;
margin: 0;
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
@if map.get($breakpoints, "lg") {
@media (min-width: map.get(map.get($breakpoints, "lg"), "breakpoint")) {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}

38
scss/layout/_sectioning.scss
View file

@ -1,3 +1,4 @@
@use "sass:map";
@use "../settings" as *;
/**
@ -32,33 +33,18 @@ main {
// Semantic container
@if $enable-semantic-container {
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
// Centered viewport
@if $enable-viewport {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0;
padding-left: 0;
}
}
@if map-get($breakpoints, "md") and $enable-viewport {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
@if map-get($breakpoints, "lg") and $enable-viewport {
@media (min-width: map-get($breakpoints, "lg")) {
max-width: map-get($viewports, "lg");
}
}
@if map-get($breakpoints, "xl") and $enable-viewport {
@media (min-width: map-get($breakpoints, "xl")) {
max-width: map-get($viewports, "xl");
$first-breakpoint: true;
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
@each $key, $values in $breakpoints {
@if $values {
@media (min-width: map.get($values, "breakpoint")) {
max-width: map.get($values, "viewport");
@if $first-breakpoint {
$first-breakpoint: false;
padding-right: 0;
padding-left: 0;
}
}
}
}