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);
|
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 {
|
a {
|
||||||
--pico-text-decoration: underline;
|
--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);
|
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 {
|
a {
|
||||||
--pico-text-decoration: underline;
|
--pico-text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -75,78 +75,6 @@
|
||||||
filter: brightness(0) invert(1);
|
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 {
|
a {
|
||||||
--pico-text-decoration: underline;
|
--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
|
// Fluid layout if disabled
|
||||||
$enable-viewport: true !default;
|
$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
|
// Enable responsive typography
|
||||||
// Fixed root element size (rem) if disabled
|
// Fixed root element size (rem) if disabled
|
||||||
$enable-responsive-typography: true !default;
|
$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
|
// Link
|
||||||
@if map.get($modules, "content/link") {
|
@if map.get($modules, "content/link") {
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue