mirror of
https://github.com/picocss/pico.git
synced 2025-04-30 12:59:12 -04:00
refactor: prefix css vars
This commit is contained in:
Lucas Larroche
parent
cba8f385c2
commit
c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
|
|
@ -1,157 +1,158 @@
|
|||
@use "sass:map";
|
||||
@use "../../settings";
|
||||
@use "../../settings" as *;
|
||||
|
||||
// Commons Styles:
|
||||
:root {
|
||||
// Typography
|
||||
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
|
||||
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
#{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
|
||||
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
#{$✨}line-height: 1.5;
|
||||
#{$✨}font-weight: 400;
|
||||
#{$✨}font-size: 16px;
|
||||
|
||||
// Responsive typography
|
||||
@if settings.$enable-responsive-typography {
|
||||
@if map-get(settings.$breakpoints, "sm") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
@if $enable-responsive-typography {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "md") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "md")) {
|
||||
--font-size: 18px;
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "lg") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "lg")) {
|
||||
--font-size: 19px;
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--font-size: 20px;
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Borders
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
#{$✨}border-radius: 0.25rem;
|
||||
#{$✨}border-width: 1px;
|
||||
#{$✨}outline-width: 3px;
|
||||
|
||||
// Spacings
|
||||
--spacing: 1rem;
|
||||
#{$✨}spacing: 1rem;
|
||||
|
||||
// Spacings for typography elements
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
#{$✨}typography-spacing-vertical: 1.5rem;
|
||||
|
||||
// Spacings for body > header, body > main, body > footer, section, article
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||
|
||||
@if (settings.$enable-classes and settings.$enable-grid) {
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
@if ($enable-classes and $enable-grid) {
|
||||
#{$✨}grid-spacing-vertical: 0;
|
||||
#{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
|
||||
}
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
#{$✨}form-element-spacing-vertical: 0.75rem;
|
||||
#{$✨}form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Spacings for nav component
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
#{$✨}nav-element-spacing-vertical: 1rem;
|
||||
#{$✨}nav-element-spacing-horizontal: 0.5rem;
|
||||
#{$✨}nav-link-spacing-vertical: 0.5rem;
|
||||
#{$✨}nav-link-spacing-horizontal: 0.5rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
|
||||
|
||||
// Transitions
|
||||
--transition: 0.2s ease-in-out;
|
||||
#{$✨}transition: 0.2s ease-in-out;
|
||||
|
||||
// Modal (<dialog>)
|
||||
--modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if settings.$enable-responsive-spacings {
|
||||
@if $enable-responsive-spacings {
|
||||
// Sectioning
|
||||
#{settings.$semantic-root-element} > header,
|
||||
#{settings.$semantic-root-element} > main,
|
||||
#{settings.$semantic-root-element} > footer,
|
||||
#{$semantic-root-element} > header,
|
||||
#{$semantic-root-element} > main,
|
||||
#{$semantic-root-element} > footer,
|
||||
section {
|
||||
@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, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@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, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@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, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
@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, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@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, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@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, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get(settings.$breakpoints, "xl") {
|
||||
@media (min-width: map-get(settings.$breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal
|
||||
dialog > article {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||
|
||||
@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, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2.5);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 3);
|
||||
#{$✨}block-spacing-horizontal: calc(var(#{$✨}spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -159,20 +160,20 @@
|
|||
|
||||
// Link
|
||||
a {
|
||||
--text-decoration: none;
|
||||
#{$✨}text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
@if settings.$enable-classes {
|
||||
@if enable-classes {
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
#{$✨}text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
--font-size: 0.875em;
|
||||
#{$✨}font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Headings
|
||||
|
|
@ -182,42 +183,42 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
#{$✨}font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
#{$✨}font-size: 2rem;
|
||||
#{$✨}typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
#{$✨}font-size: 1.75rem;
|
||||
#{$✨}typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
#{$✨}font-size: 1.5rem;
|
||||
#{$✨}typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
#{$✨}font-size: 1.25rem;
|
||||
#{$✨}typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
#{$✨}font-size: 1.125rem;
|
||||
#{$✨}typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
// Forms elements
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
#{$✨}border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
#{$✨}border-width: 3px;
|
||||
}
|
||||
|
||||
// Table
|
||||
|
|
@ -225,12 +226,12 @@ thead,
|
|||
tfoot {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
#{$✨}border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead, tfoot) > * > td {
|
||||
--font-size: 0.875em;
|
||||
#{$✨}font-size: 0.875em;
|
||||
}
|
||||
|
||||
// Code
|
||||
|
|
@ -238,11 +239,11 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono",
|
||||
"Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
#{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
|
||||
"Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
|
||||
"Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
#{$✨}font-weight: bolder;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue