mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 16:46:14 -04:00
feat: remove spacings multipliers
This commit is contained in:
Lucas Larroche
parent
aaba94868f
commit
875207f082
11 changed files with 6 additions and 291 deletions
|
|
@ -75,78 +75,6 @@
|
|||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
--pico-text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
72
css/pico.css
72
css/pico.css
|
|
@ -77,78 +77,6 @@
|
|||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
--pico-text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -75,78 +75,6 @@
|
|||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 4.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1536px) {
|
||||
article {
|
||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.25);
|
||||
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2.25);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
--pico-text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -20,10 +20,6 @@ $enable-semantic-container: false !default;
|
|||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
// Fixed spacings if disabled
|
||||
$enable-responsive-spacings: true !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed root element size (rem) if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
|
|
|||
|
|
@ -172,71 +172,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if $enable-responsive-spacings {
|
||||
// Landmarks and section
|
||||
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
|
||||
#{$semantic-root-element} > header,
|
||||
#{$semantic-root-element} > main,
|
||||
#{$semantic-root-element} > footer,
|
||||
section {
|
||||
@each $key, $values in $breakpoints {
|
||||
@if $values {
|
||||
@media (min-width: map.get($values, "breakpoint")) {
|
||||
$multiplier: 2;
|
||||
@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;
|
||||
} @else if $key == "xxl" {
|
||||
$multiplier: 4.5;
|
||||
}
|
||||
|
||||
#{$css-var-prefix}block-spacing-vertical: calc(
|
||||
var(#{$css-var-prefix}spacing) * $multiplier
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
@if map.get($modules, "components/card") {
|
||||
article {
|
||||
@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;
|
||||
} @else if $key == "xxl" {
|
||||
$multiplier: 2.25;
|
||||
}
|
||||
|
||||
#{$css-var-prefix}block-spacing-vertical: calc(
|
||||
var(#{$css-var-prefix}spacing) * $multiplier
|
||||
);
|
||||
#{$css-var-prefix}block-spacing-horizontal: calc(
|
||||
var(#{$css-var-prefix}spacing) * $multiplier
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
@if map.get($modules, "content/link") {
|
||||
a {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue