mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 11:16:15 -04:00
chore: lint with prettier on build
This commit is contained in:
Lucas Larroche
parent
bf62c8ce09
commit
670826069b
40 changed files with 221 additions and 233 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// Output color in RGB format
|
||||
@function to-rgb($color) {
|
||||
@return unquote("rgb(#{red($color)}, #{green($color)}, #{blue($color)})");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $enable-semantic-container: false !default;
|
|||
// Enable .container and .container-fluid
|
||||
$enable-class-container: true !default;
|
||||
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
||||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -113,4 +113,4 @@ details {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ article {
|
|||
> footer {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||||
var(--block-spacing-horizontal);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
|
|
@ -33,4 +32,4 @@ article {
|
|||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,7 @@ li[role="list"] > ul {
|
|||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
|
|
@ -89,11 +88,10 @@ details[role="list"] {
|
|||
|
||||
&:not([role]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||
var(--border-width) * 2
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) *
|
||||
2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
|
|
@ -102,9 +100,8 @@ details[role="list"] {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
|
|
@ -205,4 +202,4 @@ li[role="list"] {
|
|||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,8 +45,7 @@ dialog {
|
|||
|
||||
> header,
|
||||
> footer {
|
||||
padding: calc(var(--block-spacing-vertical) * 0.5)
|
||||
var(--block-spacing-horizontal);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||
}
|
||||
|
||||
> header {
|
||||
|
|
@ -135,7 +134,7 @@ dialog {
|
|||
|
||||
dialog {
|
||||
animation-duration: ($animation-duration * 4);
|
||||
animation-name: modal-overlay ;
|
||||
animation-name: modal-overlay;
|
||||
|
||||
> article {
|
||||
animation-delay: $animation-duration;
|
||||
|
|
@ -165,4 +164,4 @@ dialog {
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,8 +41,7 @@ nav {
|
|||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--nav-element-spacing-vertical)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
|
||||
// Minimal support for buttons and forms elements
|
||||
> * {
|
||||
|
|
@ -111,8 +110,7 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
|
@ -138,4 +136,4 @@ aside {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,13 +53,9 @@ progress {
|
|||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(--progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--progress-color) 30%,
|
||||
var(--progress-background-color) 30%
|
||||
)
|
||||
linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: transparent;
|
||||
|
|
@ -86,4 +82,4 @@ progress {
|
|||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,8 +48,7 @@ input[type="reset"],
|
|||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
|
|
@ -63,9 +62,8 @@ input[type="reset"],
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
|
|
@ -83,7 +81,6 @@ input[type="reset"],
|
|||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
|
|
@ -152,8 +149,7 @@ input[type="reset"],
|
|||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
|
|
@ -176,8 +172,9 @@ input[type="reset"],
|
|||
// Button [disabled]
|
||||
// Links without href are disabled by default
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||
:where(fieldset[disabled])
|
||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||
a[role="button"]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,4 +88,4 @@ kbd {
|
|||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,4 +45,4 @@ img {
|
|||
// Hide the overflow in IE
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,9 +102,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
|
|
@ -149,8 +148,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -178,8 +176,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
transform var(--transition);
|
||||
transition: background-color var(--transition), transform var(--transition);
|
||||
}
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
|
|
@ -228,12 +225,11 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
}
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
|
|
@ -262,11 +258,11 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
|||
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
|
||||
&[aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,7 +127,6 @@
|
|||
[type="radio"]:checked,
|
||||
[type="checkbox"][role="switch"],
|
||||
[type="checkbox"][role="switch"]:checked {
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
}
|
||||
|
|
@ -135,4 +134,4 @@
|
|||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,8 +144,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|||
select,
|
||||
textarea {
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
// Commons styles
|
||||
|
|
@ -165,9 +164,8 @@ textarea {
|
|||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition),
|
||||
color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -200,7 +198,8 @@ textarea {
|
|||
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
:where(fieldset[disabled])
|
||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
|
|
@ -212,16 +211,11 @@ textarea[disabled],
|
|||
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-right: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-right: calc(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;
|
||||
}
|
||||
@else {
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !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);
|
||||
|
|
@ -248,8 +242,7 @@ textarea[disabled],
|
|||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
}
|
||||
|
|
@ -263,8 +256,7 @@ textarea[disabled],
|
|||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
}
|
||||
|
|
@ -275,7 +267,7 @@ textarea[disabled],
|
|||
[dir="rtl"] {
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"] ){
|
||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -343,4 +335,4 @@ label {
|
|||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ hr {
|
|||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,4 +29,4 @@ template {
|
|||
// Add the correct display in IE 9-
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,4 +47,4 @@ table {
|
|||
background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -261,4 +261,4 @@ del {
|
|||
// selection
|
||||
::selection {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,4 +39,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,4 +45,4 @@
|
|||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@
|
|||
min-width: 0; // HACK for childs in overflow
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@ figure {
|
|||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@
|
|||
|
||||
section {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,4 +67,4 @@ main {
|
|||
padding: var(--block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,4 +34,4 @@ progress,
|
|||
[type="radio"],
|
||||
[type="range"] {
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,14 +110,26 @@
|
|||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($black, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25) )};
|
||||
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
|
||||
$box-shadow-blur-strengh * 0.029
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
||||
$box-shadow-blur-strengh * 0.067
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
|
||||
$box-shadow-blur-strengh * 0.125
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
|
||||
$box-shadow-blur-strengh * 0.225
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
|
||||
$box-shadow-blur-strengh * 0.417
|
||||
)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
|
||||
$black,
|
||||
$box-shadow-opacity
|
||||
)},
|
||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
|
|
@ -153,7 +165,7 @@
|
|||
--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='#{to-rgb($grey-300)}' 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='#{to-rgb($grey-300)}' 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-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='#{to-rgb($green-800)}' 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");
|
||||
|
||||
|
||||
// Document
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,14 +110,26 @@
|
|||
$box-shadow-opacity: 0.06;
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow:
|
||||
#{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{($box-shadow-blur-strengh * 0.067)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{($box-shadow-blur-strengh * 0.125)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{($box-shadow-blur-strengh * 0.225)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
|
||||
--card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
|
||||
$box-shadow-blur-strengh * 0.029
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
||||
$box-shadow-blur-strengh * 0.067
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
|
||||
$box-shadow-blur-strengh * 0.125
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
|
||||
$box-shadow-blur-strengh * 0.225
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
|
||||
$box-shadow-blur-strengh * 0.417
|
||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
|
||||
$grey-900,
|
||||
$box-shadow-opacity
|
||||
)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};
|
||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
|
|
@ -151,9 +163,9 @@
|
|||
--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='#{to-rgb($red-800)}' 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='#{to-rgb($white)}' 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='#{to-rgb($grey-700)}' 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='#{to-rgb($grey-700)}' 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-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='#{to-rgb($grey-700)}' 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-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='#{to-rgb($green-700)}' 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");
|
||||
|
||||
|
||||
// Document
|
||||
color-scheme: light;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
// 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";
|
||||
--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;
|
||||
|
|
@ -136,7 +135,6 @@
|
|||
|
||||
// Modal
|
||||
dialog > article {
|
||||
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
|
||||
|
|
@ -237,9 +235,9 @@ 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 {
|
||||
|
|
|
|||
|
|
@ -49,4 +49,4 @@ textarea,
|
|||
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
||||
|
||||
// Cursor
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
|
|
@ -10,7 +9,6 @@
|
|||
|
||||
// Everyting except form elements
|
||||
[aria-busy="true"]:not(input, select, textarea) {
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
|
|
@ -20,7 +18,7 @@
|
|||
border-right-color: transparent;
|
||||
content: "";
|
||||
vertical-align: text-bottom;
|
||||
vertical-align: -.125em; // Visual alignment
|
||||
vertical-align: -0.125em; // Visual alignment
|
||||
animation: spinner 0.75s linear infinite;
|
||||
opacity: var(--loading-spinner-opacity);
|
||||
}
|
||||
|
|
@ -55,4 +53,4 @@ a {
|
|||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,4 +24,4 @@
|
|||
transition-duration: 0s !important; // 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,31 +20,31 @@
|
|||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
padding: .25rem .5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
content: attr(data-tooltip);
|
||||
color: var(--tooltip-color);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight);
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
// Caret
|
||||
&[data-placement="top"]::after,
|
||||
&::after {
|
||||
padding: 0;
|
||||
transform: translate(-50%, 0rem);
|
||||
border-top: .3rem solid;
|
||||
border-right: .3rem solid transparent;
|
||||
border-left: .3rem solid transparent;
|
||||
border-top: 0.3rem solid;
|
||||
border-right: 0.3rem solid transparent;
|
||||
border-left: 0.3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: "";
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
&::after {
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
transform: translate(-50%, .25rem);
|
||||
transform: translate(-50%, 0.25rem);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-50%, -.3rem);
|
||||
border: .3rem solid transparent;
|
||||
border-bottom: .3rem solid;
|
||||
|
||||
&:after {
|
||||
transform: translate(-50%, -0.3rem);
|
||||
border: 0.3rem solid transparent;
|
||||
border-bottom: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,13 +73,13 @@
|
|||
right: 100%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translate(-.25rem, -50%);
|
||||
transform: translate(-0.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-left: .3rem solid;
|
||||
|
||||
&:after {
|
||||
transform: translate(0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-left: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,13 +90,13 @@
|
|||
right: auto;
|
||||
bottom: auto;
|
||||
left: 100%;
|
||||
transform: translate(.25rem, -50%);
|
||||
transform: translate(0.25rem, -50%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
transform: translate(-.3rem, -50%);
|
||||
border: .3rem solid transparent;
|
||||
border-right: .3rem solid;
|
||||
|
||||
&:after {
|
||||
transform: translate(-0.3rem, -50%);
|
||||
border: 0.3rem solid transparent;
|
||||
border-right: 0.3rem solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,67 +109,64 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
|
||||
// Animations, excluding touch devices
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
&[data-placement="bottom"]:focus,
|
||||
&[data-placement="bottom"]:hover
|
||||
&:focus,
|
||||
&[data-placement="bottom"]:hover &:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-top;
|
||||
}
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-top;
|
||||
animation-name: tooltip-caret-slide-top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[data-placement="bottom"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-bottom;
|
||||
animation-name: tooltip-caret-slide-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[data-placement="left"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-left;
|
||||
animation-name: tooltip-caret-slide-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&[data-placement="right"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
animation-name: tooltip-caret-slide-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -177,21 +174,21 @@
|
|||
|
||||
@keyframes tooltip-slide-top {
|
||||
from {
|
||||
transform: translate(-50%, .75rem);
|
||||
transform: translate(-50%, 0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.25rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-caret-slide-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.25rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
|
|
@ -199,80 +196,80 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-slide-bottom {
|
||||
from {
|
||||
transform: translate(-50%, -.75rem);
|
||||
transform: translate(-50%, -0.75rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, .25rem);
|
||||
transform: translate(-50%, 0.25rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-caret-slide-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.5rem);
|
||||
transform: translate(-50%, -0.5rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -.3rem);
|
||||
transform: translate(-50%, -0.3rem);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-slide-left {
|
||||
from {
|
||||
transform: translate(.75rem, -50%);
|
||||
transform: translate(0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.25rem, -50%);
|
||||
transform: translate(-0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-caret-slide-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(.05rem, -50%);
|
||||
transform: translate(0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.3rem, -50%);
|
||||
transform: translate(0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-slide-right {
|
||||
from {
|
||||
transform: translate(-.75rem, -50%);
|
||||
transform: translate(-0.75rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(.25rem, -50%);
|
||||
transform: translate(0.25rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes tooltip-caret-slide-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-.05rem, -50%);
|
||||
transform: translate(-0.05rem, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-.3rem, -50%);
|
||||
transform: translate(-0.3rem, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue