mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into dev

Browse source
This commit is contained in:
Lucas Larroche 2021-12-19 09:50:15 +07:00
commit 6a6d67dbab
83 changed files with 1825 additions and 2353 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/components/_accordion.scss
View file

@ -1,5 +1,6 @@
/**
* Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV
*/
details {
@ -41,8 +42,8 @@ details {
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-size: 1rem auto;
background-repeat: no-repeat;
background-size: 1rem auto;
content: "";
@if $enable-transitions {

2
scss/components/_progress.scss
View file

@ -21,10 +21,10 @@ progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// Styles
display: inline-block;
appearance: none;
width: 100%;
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);

2
scss/content/_button.scss
View file

@ -65,8 +65,8 @@ a[role="button"] {
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;

6
scss/content/_code.scss
View file

@ -13,8 +13,8 @@ pre,
code,
kbd,
samp {
font-size: 0.875em; // 2
font-family: var(--font-family); // 1
font-size: 0.875em; // 2
}
// Prevent overflow of the container in all browsers (opinionated)
@ -29,11 +29,11 @@ pre {
pre,
code,
kbd {
border-radius: var(--border-radius);
background: var(--code-background-color);
color: var(--code-color);
font-weight: var(--font-weight);
line-height: initial;
border-radius: var(--border-radius);
}
code,
@ -48,9 +48,9 @@ pre {
overflow-x: auto;
> code {
background: transparent;
display: block;
padding: var(--spacing);
background: transparent;
font-size: 14px;
line-height: var(--line-height);
}

10
scss/content/_form-alt-input-types.scss
View file

@ -34,7 +34,7 @@
}
// Date & Time
:not([dir="rtl"]) {
:not(:dir(rtl)) {
[type="date"],
[type="datetime-local"],
[type="month"],
@ -42,8 +42,8 @@
[type="week"] {
background-image: var(--icon-date);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
@ -77,8 +77,8 @@
--color: var(--secondary-inverse);
margin-right: calc(var(--spacing) / 2);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) / 2);
margin-inline-start: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
@ -87,8 +87,8 @@
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--color);
font-weight: var(--font-weight);
font-size: 1rem;
font-weight: var(--font-weight);
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@ -222,8 +222,8 @@
) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-size: 1rem auto;
background-repeat: no-repeat;
background-size: 1rem auto;
}
// Cancel button

8
scss/content/_form-checkbox-radio.scss
View file

@ -13,8 +13,8 @@
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: 0.375em;
margin-inline-start: 0;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -30,8 +30,8 @@
--border-color: var(--primary);
background-image: var(--icon-checkbox);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
background-size: 0.75em auto;
}
& ~ label {
@ -49,8 +49,8 @@
--border-color: var(--primary);
background-image: var(--icon-minus);
background-position: center;
background-size: 0.75em auto;
background-repeat: no-repeat;
background-size: 0.75em auto;
}
}
@ -115,8 +115,8 @@
&::before {
margin-right: 0;
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
margin-inline-end: 0;
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
}
}
}

22
scss/content/_form.scss
View file

@ -14,10 +14,10 @@ optgroup,
select,
textarea {
margin: 0; // 2
font-size: 1rem; // 1
line-height: var(--line-height); // 1
font-family: inherit; // 1
font-size: 1rem; // 1
letter-spacing: inherit; // 2
line-height: var(--line-height); // 1
}
// Show the overflow in IE.
@ -223,19 +223,19 @@ textarea {
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal) !important;
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
} @else {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
}
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
@ -282,12 +282,8 @@ textarea {
input,
select,
textarea {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid],
&[aria-invalid="true"],
&[aria-invalid="false"] {
background-position: center left 0.75rem;
}
&[aria-invalid] {
background-position: center left 0.75rem;
}
}
}
@ -320,12 +316,12 @@ select {
&:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
padding-inline-start: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron);
background-position: center right 0.75rem;
background-size: 1rem auto;
background-repeat: no-repeat;
background-size: 1rem auto;
}
}

23
scss/content/_miscs.scss
View file

@ -27,6 +27,29 @@ template {
}
}
// Add the correct styles in Edge 18-, IE, and Safari
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
// Add the correct display in IE 9-
canvas {
display: inline-block;

2
scss/content/_table.scss
View file

@ -27,8 +27,8 @@ td {
padding: calc(var(--spacing) / 2) var(--spacing);
border-bottom: var(--border-width) solid var(--table-border-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-weight: var(--font-weight);
text-align: left;
text-align: start;
}

14
scss/content/_typography.scss
View file

@ -61,9 +61,9 @@ ul {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-style: normal;
font-weight: var(--font-weight);
font-size: var(--font-size);
font-weight: var(--font-weight);
font-style: normal;
}
// Links
@ -135,9 +135,9 @@ h6 {
margin-top: 0;
margin-bottom: var(--typography-spacing-vertical);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
}
h1 {
@ -191,8 +191,8 @@ hgroup {
> *:last-child {
--color: var(--muted-color);
--font-weight: unset;
font-size: 1rem;
font-family: unset;
font-size: 1rem;
}
}
@ -211,8 +211,8 @@ ul,
ol {
padding-right: 0;
padding-left: var(--spacing);
padding-inline-start: var(--spacing);
padding-inline-end: 0;
padding-inline-start: var(--spacing);
li {
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
@ -238,8 +238,8 @@ blockquote {
padding: var(--spacing);
border-right: none;
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
border-inline-start: 0.25rem solid var(--blockquote-border-color);
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);

10
scss/layout/_document.scss
View file

@ -32,14 +32,14 @@
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
text-rendering: optimizeLegibility;
background-color: var(--background-color);
color: var(--color);
font-weight: var(--font-weight);
font-size: var(--font-size);
line-height: var(--line-height); // 1
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height); // 1
text-rendering: optimizeLegibility;
cursor: default; // 4
tab-size: 4; // 5
}

1
scss/pico.scss
View file

@ -31,7 +31,6 @@
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/modal"; // dialog
@import "components/nav"; // nav
@import "components/progress"; // progress

9
scss/postcss.config.js
View file

@ -1,9 +0,0 @@
module.exports = {
syntax: "postcss-scss",
map: false,
plugins: {
"css-declaration-sorter": {
order: "smacss"
}
}
}

12
scss/themes/default/_dark.scss
View file

@ -112,9 +112,6 @@
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);
@ -127,13 +124,12 @@
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

12
scss/themes/default/_light.scss
View file

@ -112,9 +112,6 @@
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
// Progress
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);
@ -127,13 +124,12 @@
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

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

@ -120,27 +120,6 @@
}
}
}
// Modal
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@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($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
}
}
// Link

4
scss/utilities/_loading.scss
View file

@ -18,10 +18,10 @@
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: '';
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
@ -29,8 +29,8 @@
&::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
margin-inline-start: 0;
}
}

30
scss/utilities/_tooltip.scss
View file

@ -23,14 +23,14 @@
transform: translate(-50%, -.25rem);
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
content: attr(data-tooltip);
color: var(--tooltip-color);
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
font-size: .875rem;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
content: attr(data-tooltip);
opacity: 0;
pointer-events: none;
}
@ -44,33 +44,25 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: '';
color: var(--tooltip-background-color);
content: '';
}
// Display
&:focus,
&:hover {
&::before,
&::after {
opacity: 1;
@if $enable-transitions {
animation-name: slide;
animation-duration: .2s;
}
}
}
// Animations, excluding touch devices
@if $enable-transitions {
@media (hover: hover) and (pointer: fine) {
&:focus,
&:hover {
&::before,
&::after {
animation-duration: .2s;
animation-name: slide;
}
&::after {
animation-name: slideCaret;
}
&::after {
@if $enable-transitions {
animation-name: slideCaret;
}
}
}