mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -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

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

69
scss/_settings.scss
View file

@ -1,3 +1,5 @@
@use "sass:map";
// Config // Config
// –––––––––––––––––––– // ––––––––––––––––––––
@ -22,7 +24,7 @@ $enable-viewport: true !default;
$enable-responsive-spacings: true !default; $enable-responsive-spacings: true !default;
// Enable responsive typography // Enable responsive typography
// Fixed root element size if disabled // Fixed root element size (rem) if disabled
$enable-responsive-typography: true !default; $enable-responsive-typography: true !default;
// Enable .classes // Enable .classes
@ -38,38 +40,37 @@ $enable-transitions: true !default;
// Enable overriding with !important // Enable overriding with !important
$enable-important: true !default; $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) // // Shortcut for CSS vars prefix
// 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
$✨: --#{$css-var-prefix}; $✨: --#{$css-var-prefix};

13
scss/components/_modal.scss
View file

@ -1,3 +1,4 @@
@use "sass:map";
@use "../settings" as *; @use "../settings" as *;
/** /**
@ -33,15 +34,15 @@ dialog {
max-height: calc(100vh - var(#{$✨}spacing) * 2); max-height: calc(100vh - var(#{$✨}spacing) * 2);
overflow: auto; overflow: auto;
@if map-get($breakpoints, "sm") { @if map.get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
max-width: map-get($viewports, "sm"); max-width: map.get(map.get($breakpoints, "sm"), "viewport");
} }
} }
@if map-get($breakpoints, "md") { @if map.get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) { @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
max-width: map-get($viewports, "md"); max-width: map.get(map.get($breakpoints, "md"), "viewport");
} }
} }

27
scss/layout/_container.scss
View file

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

5
scss/layout/_grid.scss
View file

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

32
scss/layout/_sectioning.scss
View file

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

8
scss/pico.scss
View file

@ -6,7 +6,7 @@
// Theming // Theming
@use "themes/default"; @use "themes/default";
// // Layout // Layout
@use "layout/document"; // html @use "layout/document"; // html
@use "layout/sectioning"; // body, header, main, footer @use "layout/sectioning"; // body, header, main, footer
@use "layout/container"; // .container, .container-fluid @use "layout/container"; // .container, .container-fluid
@ -14,7 +14,7 @@
@use "layout/grid"; // .grid @use "layout/grid"; // .grid
@use "layout/scroller"; // figure @use "layout/scroller"; // figure
// // Content // Content
@use "content/typography"; // a, headings, p, ul, blockquote, ... @use "content/typography"; // a, headings, p, ul, blockquote, ...
@use "content/embedded"; // audio, canvas, iframe, img, svg, video @use "content/embedded"; // audio, canvas, iframe, img, svg, video
@use "content/button"; // button, a[role="button"], type="button", type="submit" ... @use "content/button"; // button, a[role="button"], type="button", type="submit" ...
@ -31,7 +31,7 @@
@use "forms/input-range"; // type="range" @use "forms/input-range"; // type="range"
@use "forms/input-search"; // type="search" @use "forms/input-search"; // type="search"
// // Components // Components
@use "components/accordion"; // details, summary @use "components/accordion"; // details, summary
@use "components/card"; // article @use "components/card"; // article
@use "components/dropdown"; // dropdown @use "components/dropdown"; // dropdown
@ -41,6 +41,6 @@
@use "components/progress"; // progress @use "components/progress"; // progress
@use "components/tooltip"; // data-tooltip @use "components/tooltip"; // data-tooltip
// // Utilities // Utilities
@use "utilities/accessibility"; // -ms-touch-action, aria-* @use "utilities/accessibility"; // -ms-touch-action, aria-*
@use "utilities/reduce-motion"; // prefers-reduced-motion @use "utilities/reduce-motion"; // prefers-reduced-motion

98
scss/themes/default/_styles.scss
View file

@ -11,30 +11,14 @@
#{$✨}font-weight: 400; #{$✨}font-weight: 400;
#{$✨}font-size: 16px; #{$✨}font-size: 16px;
// Responsive typography // Responsive root font size
@if $enable-responsive-typography { @if $enable-responsive-typography {
@if map-get($breakpoints, "sm") { @each $key, $values in $breakpoints {
@media (min-width: map-get($breakpoints, "sm")) { @if $values {
#{$✨}font-size: 17px; @media (min-width: map.get($values, "breakpoint")) {
#{$✨}font-size: map.get($values, "root-font-size");
} }
} }
@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;
}
} }
} }
@ -85,54 +69,42 @@
#{$semantic-root-element} > main, #{$semantic-root-element} > main,
#{$semantic-root-element} > footer, #{$semantic-root-element} > footer,
section { section {
@if map-get($breakpoints, "sm") { @each $key, $values in $breakpoints {
@media (min-width: map-get($breakpoints, "sm")) { @if $values {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5); @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);
} }
@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);
} }
} }
} }
// Card (<article>) // Card (<article>)
article { article {
@if map-get($breakpoints, "sm") { @each $key, $values in $breakpoints {
@media (min-width: map-get($breakpoints, "sm")) { @if $values {
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25); @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);
} }
@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);
} }
} }
} }
@ -142,15 +114,15 @@
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
#{$✨}block-spacing-horizontal: var(#{$✨}spacing); #{$✨}block-spacing-horizontal: var(#{$✨}spacing);
@if map-get($breakpoints, "sm") { @if map.get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map.get(map.get($breakpoints, "sm"), "breakpoint")) {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
} }
} }
@if map-get($breakpoints, "md") { @if map.get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) { @media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3); #{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5); #{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
} }