mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
refactor: breakpoints
This commit is contained in:
Lucas Larroche
parent
ab37deb10c
commit
b477bb6c96
9 changed files with 115 additions and 165 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@use "sass:map";
|
||||
|
||||
// Config
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ $enable-viewport: true !default;
|
|||
$enable-responsive-spacings: true !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed root element size if disabled
|
||||
// Fixed root element size (rem) if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
||||
// Enable .classes
|
||||
|
|
@ -38,38 +40,37 @@ $enable-transitions: true !default;
|
|||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
// Breakpoints, viewports and root font size
|
||||
$breakpoints: () !default;
|
||||
$breakpoints: map.deep-merge(
|
||||
(
|
||||
// Small (landscape phones)
|
||||
sm: (
|
||||
breakpoint: 576px,
|
||||
viewport: 510px,
|
||||
root-font-size: 17px,
|
||||
),
|
||||
// Medium (tablets)
|
||||
md: (
|
||||
breakpoint: 768px,
|
||||
viewport: 700px,
|
||||
root-font-size: 18px,
|
||||
),
|
||||
// Large (desktops)
|
||||
lg: (
|
||||
breakpoint: 992px,
|
||||
viewport: 920px,
|
||||
root-font-size: 19px,
|
||||
),
|
||||
// Extra large (large desktops)
|
||||
xl: (
|
||||
breakpoint: 1200px,
|
||||
viewport: 1130px,
|
||||
root-font-size: 20px,
|
||||
),
|
||||
),
|
||||
$breakpoints
|
||||
);
|
||||
|
||||
// xs: Extra small (portrait phones)
|
||||
// sm: Small(landscape phones)
|
||||
// md: Medium(tablets)
|
||||
// lg: Large(desktops)
|
||||
// xl: Extra large (large desktops)
|
||||
|
||||
// NOTE:
|
||||
// To provide an easy and fine styling on each breakpoint
|
||||
// we didn't use @each, @mixin or @include.
|
||||
// That means you need to edit each CSS selector file to add a breakpoint
|
||||
|
||||
// Breakpoints
|
||||
// 'null' disable the breakpoint
|
||||
$breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
// Viewports
|
||||
$viewports: (
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
sm: 510px,
|
||||
md: 700px,
|
||||
lg: 920px,
|
||||
xl: 1130px
|
||||
) !default;
|
||||
|
||||
// Shortcut for CSS vars prefix
|
||||
// // Shortcut for CSS vars prefix
|
||||
$✨: --#{$css-var-prefix};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
/**
|
||||
|
|
@ -33,15 +34,15 @@ dialog {
|
|||
max-height: calc(100vh - var(#{$✨}spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
@if map.get($breakpoints, "sm") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
|
||||
max-width: map.get(map.get($breakpoints, "sm"), "viewport");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
max-width: map.get(map.get($breakpoints, "md"), "viewport");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// Theming
|
||||
@use "themes/default";
|
||||
|
||||
// // Layout
|
||||
// Layout
|
||||
@use "layout/document"; // html
|
||||
@use "layout/sectioning"; // body, header, main, footer
|
||||
@use "layout/container"; // .container, .container-fluid
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
@use "layout/grid"; // .grid
|
||||
@use "layout/scroller"; // figure
|
||||
|
||||
// // Content
|
||||
// Content
|
||||
@use "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@use "content/button"; // button, a[role="button"], type="button", type="submit" ...
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
@use "forms/input-range"; // type="range"
|
||||
@use "forms/input-search"; // type="search"
|
||||
|
||||
// // Components
|
||||
// Components
|
||||
@use "components/accordion"; // details, summary
|
||||
@use "components/card"; // article
|
||||
@use "components/dropdown"; // dropdown
|
||||
|
|
@ -41,6 +41,6 @@
|
|||
@use "components/progress"; // progress
|
||||
@use "components/tooltip"; // data-tooltip
|
||||
|
||||
// // Utilities
|
||||
// Utilities
|
||||
@use "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@use "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
|
|
@ -11,29 +11,13 @@
|
|||
#{$✨}font-weight: 400;
|
||||
#{$✨}font-size: 16px;
|
||||
|
||||
// Responsive typography
|
||||
// Responsive root font size
|
||||
@if $enable-responsive-typography {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}font-size: 20px;
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
#{$✨}font-size: map.get($values, "root-font-size");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,54 +69,42 @@
|
|||
#{$semantic-root-element} > main,
|
||||
#{$semantic-root-element} > footer,
|
||||
section {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 4);
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
$multiplier: 1;
|
||||
@if $key == "sm" {
|
||||
$multiplier: 2.5;
|
||||
} @else if $key == "md" {
|
||||
$multiplier: 3;
|
||||
} @else if $key == "lg" {
|
||||
$multiplier: 3.5;
|
||||
} @else if $key == "xl" {
|
||||
$multiplier: 4;
|
||||
}
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * $multiplier);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 2);
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
$multiplier: 1;
|
||||
@if $key == "sm" {
|
||||
$multiplier: 1.25;
|
||||
} @else if $key == "md" {
|
||||
$multiplier: 1.5;
|
||||
} @else if $key == "lg" {
|
||||
$multiplier: 1.75;
|
||||
} @else if $key == "xl" {
|
||||
$multiplier: 2;
|
||||
}
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * $multiplier);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -142,15 +114,15 @@
|
|||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if map.get($breakpoints, "sm") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
@if map.get($breakpoints, "md") {
|
||||
@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue