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

chore: replace @import with @use

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 11:44:10 +07:00
parent a6f0d0ca74
commit 51a68ce0fc
39 changed files with 1197 additions and 1659 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,7 @@
// Commons Styles
@use "sass:map";
@use "../../settings";
// Commons Styles:
:root {
// Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
@ -8,27 +11,27 @@
--font-size: 16px;
// Responsive typography
@if $enable-responsive-typography {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if settings.$enable-responsive-typography {
@if map-get(settings.$breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
--font-size: 17px;
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
@if map-get(settings.$breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) {
--font-size: 18px;
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
@if map-get(settings.$breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
--font-size: 19px;
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
@if map-get(settings.$breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) {
--font-size: 20px;
}
}
@ -49,7 +52,7 @@
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@if ($enable-classes and $enable-grid) {
@if (settings.$enable-classes and settings.$enable-grid) {
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
}
@ -75,32 +78,32 @@
}
// Responsives spacings
@if $enable-responsive-spacings {
@if settings.$enable-responsive-spacings {
// Sectioning
#{$semantic-root-element} > header,
#{$semantic-root-element} > main,
#{$semantic-root-element} > footer,
#{settings.$semantic-root-element} > header,
#{settings.$semantic-root-element} > main,
#{settings.$semantic-root-element} > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get(settings.$breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
@if map-get(settings.$breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
@if map-get(settings.$breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
@if map-get(settings.$breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -108,26 +111,26 @@
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get(settings.$breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
@if map-get(settings.$breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
@if map-get(settings.$breakpoints, "lg") {
@media (min-width: map-get(settings.$breakpoints, "lg")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
@if map-get(settings.$breakpoints, "xl") {
@media (min-width: map-get(settings.$breakpoints, "xl")) {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@ -138,15 +141,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(settings.$breakpoints, "sm") {
@media (min-width: map-get(settings.$breakpoints, "sm")) {
--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(settings.$breakpoints, "md") {
@media (min-width: map-get(settings.$breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
@ -159,7 +162,7 @@ a {
--text-decoration: none;
// Secondary & Contrast
@if $enable-classes {
@if settings.$enable-classes {
&.secondary,
&.contrast {
--text-decoration: underline;