mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 02:36:15 -04:00
Prettify code
This commit is contained in:
Lucas Larroche
parent
868e5d20cb
commit
5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
|
|
@ -29,7 +29,6 @@ $enable-transitions: true !default;
|
|||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -51,12 +50,12 @@ $breakpoints: (
|
|||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
// Viewports
|
||||
$viewports: (
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
sm: 510px,
|
||||
md: 700px,
|
||||
lg: 920px,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ details {
|
|||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
content: '';
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
|
|
@ -67,7 +67,6 @@ details {
|
|||
|
||||
// Open
|
||||
&[open] {
|
||||
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
|
||||
|
|
@ -77,13 +76,13 @@ details {
|
|||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
details{
|
||||
details {
|
||||
summary {
|
||||
&::after {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ 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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ nav {
|
|||
|
||||
// Vertical Nav
|
||||
aside {
|
||||
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Progress
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -11,25 +10,23 @@
|
|||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
// Styles
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -55,7 +52,13 @@ progress {
|
|||
// Indeterminate state
|
||||
@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%) top left / 150% 150% no-repeat;
|
||||
background: var(--progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--progress-color) 30%,
|
||||
var(--progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Button
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -35,7 +34,6 @@ button::-moz-focus-inner,
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -59,7 +57,8 @@ a[role="button"] {
|
|||
--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;
|
||||
|
|
@ -73,10 +72,8 @@ a[role="button"] {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +86,8 @@ a[role="button"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +106,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +118,6 @@ input[type="reset"] {
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
|
|
@ -135,7 +133,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +152,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -200,9 +200,8 @@ input[type="submit"],
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
&[disabled] {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Code
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -15,7 +14,7 @@ code,
|
|||
kbd,
|
||||
samp {
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875em; // 2
|
||||
font-size: 0.875em; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -24,7 +23,6 @@ pre {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -41,7 +39,7 @@ kbd {
|
|||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -60,7 +58,6 @@ pre {
|
|||
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-tag-color);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Embedded content
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
|
||||
// Color
|
||||
[type="color"] {
|
||||
|
||||
// Wrapper
|
||||
@mixin color-wrapper {
|
||||
padding: 0;
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
border: none;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
|
|
@ -42,15 +41,15 @@
|
|||
[type="time"],
|
||||
[type="week"] {
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Time
|
||||
[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
|
|
@ -64,7 +63,7 @@
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -80,7 +79,8 @@
|
|||
margin-left: 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);
|
||||
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);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
|
|
@ -92,31 +92,29 @@
|
|||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
|
||||
&::-ms-browse {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
|
@ -125,14 +123,14 @@
|
|||
// Range
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-track: 0.25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
$border-thumb: 2px;
|
||||
|
||||
// Styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
|
|
@ -145,8 +143,7 @@
|
|||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -175,8 +172,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -221,7 +217,9 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
padding-left: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.75rem
|
||||
) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -.125em;
|
||||
margin-right: .375em;
|
||||
margin-top: -0.125em;
|
||||
margin-right: 0.375em;
|
||||
margin-left: 0;
|
||||
margin-inline-end: .375em;
|
||||
margin-inline-end: 0.375em;
|
||||
margin-inline-start: 0;
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375em;
|
||||
margin-right: 0.375em;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35em;
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,9 +74,9 @@
|
|||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: 0.1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Form elements
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -106,16 +105,14 @@ textarea {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
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)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -145,10 +142,9 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -169,10 +165,8 @@ textarea {
|
|||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -221,21 +215,23 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[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-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: 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 .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
|
@ -247,9 +243,10 @@ textarea {
|
|||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(
|
||||
--form-element-valid-active-border-color
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -262,9 +259,10 @@ textarea {
|
|||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(
|
||||
--form-element-invalid-active-border-color
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -276,7 +274,7 @@ textarea {
|
|||
select,
|
||||
textarea {
|
||||
&[aria-invalid] {
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -300,7 +298,6 @@ textarea {
|
|||
|
||||
// Select
|
||||
select {
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
|
|
@ -313,16 +310,16 @@ select {
|
|||
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 .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
select {
|
||||
select {
|
||||
&:not([multiple]):not([size]) {
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Miscs
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -23,8 +22,7 @@ hr {
|
|||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Table
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -19,7 +18,6 @@ table {
|
|||
text-indent: 0; // 3
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Typography
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -18,7 +17,7 @@ strong {
|
|||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -46,7 +45,6 @@ ul ul {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -79,11 +77,8 @@ a {
|
|||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition),
|
||||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -98,7 +93,6 @@ a {
|
|||
}
|
||||
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
|
@ -231,7 +225,7 @@ ul li {
|
|||
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
|
|
@ -243,9 +237,9 @@ blockquote {
|
|||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-right: none;
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
border-inline-start: .25rem solid var(--blockquote-border-color);
|
||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@if ($enable-class-container and $enable-classes) {
|
||||
|
||||
/**
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +13,6 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
||||
tab-size: 4; // 5
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
background-color: var(--background-color);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Wrapper to make any content responsive across all viewports
|
||||
figure {
|
||||
display: block;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Container and responsive spacings for header, main, footer
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -14,7 +13,6 @@ main {
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -35,7 +33,6 @@ body {
|
|||
|
||||
// Centered viewport
|
||||
@if $enable-viewport {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $enable-semantic-container: true;
|
|||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ $enable-viewport: false;
|
|||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -10,32 +10,32 @@
|
|||
@import "themes/default";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@import "content/code"; // pre, code, ...
|
||||
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
|
||||
// Utilities
|
||||
@import "utilities/loading"; // aria-busy=true
|
||||
@import "utilities/tooltip"; // data-tooltip
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
@import "utilities/loading"; // aria-busy=true
|
||||
@import "utilities/tooltip"; // data-tooltip
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
* You can export only the modules you need
|
||||
*/
|
||||
|
||||
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
|
|
@ -19,7 +18,6 @@ $enable-transitions: false;
|
|||
// Enable overriding with !important
|
||||
$enable-important: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
@ -30,32 +28,20 @@ $enable-important: false;
|
|||
@import "themes/default";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/progress"; // progress
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote, ...
|
||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
|
||||
// Utilities
|
||||
// @import "utilities/loading"; // aria-busy=true
|
||||
// @import "utilities/tooltip"; // data-tooltip
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Navy-Grey
|
||||
$grey-hue: 205 !default;
|
||||
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||
$grey-50: hsl($grey-hue, 20%, 94%) !default;
|
||||
$grey-100: hsl($grey-hue, 18%, 86%) !default;
|
||||
$grey-200: hsl($grey-hue, 16%, 77%) !default;
|
||||
$grey-300: hsl($grey-hue, 14%, 68%) !default;
|
||||
|
|
@ -13,53 +13,53 @@ $grey-900: hsl($grey-hue, 30%, 15%) !default;
|
|||
|
||||
// Light Blue
|
||||
$primary-hue: 195 !default;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||||
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||||
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||||
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||||
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||||
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||||
$primary-50: hsl($primary-hue, 90%, 94%) !default;
|
||||
$primary-100: hsl($primary-hue, 88%, 86%) !default;
|
||||
$primary-200: hsl($primary-hue, 86%, 77%) !default;
|
||||
$primary-300: hsl($primary-hue, 84%, 68%) !default;
|
||||
$primary-400: hsl($primary-hue, 82%, 59%) !default;
|
||||
$primary-500: hsl($primary-hue, 80%, 50%) !default;
|
||||
$primary-600: hsl($primary-hue, 85%, 41%) !default;
|
||||
$primary-700: hsl($primary-hue, 90%, 32%) !default;
|
||||
$primary-800: hsl($primary-hue, 95%, 23%) !default;
|
||||
$primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||||
|
||||
// Black & White
|
||||
$black: #000 !default;
|
||||
$white: #FFF !default;
|
||||
$white: #fff !default;
|
||||
|
||||
// Amber
|
||||
$amber-50: #FFF8E1 !default;
|
||||
$amber-100: #FFECB3 !default;
|
||||
$amber-200: #FFE082 !default;
|
||||
$amber-300: #FFD54F !default;
|
||||
$amber-400: #FFCA28 !default;
|
||||
$amber-500: #FFC107 !default;
|
||||
$amber-600: #FFB300 !default;
|
||||
$amber-700: #FFA000 !default;
|
||||
$amber-800: #FF8F00 !default;
|
||||
$amber-900: #FF6F00 !default;
|
||||
$amber-50: #fff8e1 !default;
|
||||
$amber-100: #ffecb3 !default;
|
||||
$amber-200: #ffe082 !default;
|
||||
$amber-300: #ffd54f !default;
|
||||
$amber-400: #ffca28 !default;
|
||||
$amber-500: #ffc107 !default;
|
||||
$amber-600: #ffb300 !default;
|
||||
$amber-700: #ffa000 !default;
|
||||
$amber-800: #ff8f00 !default;
|
||||
$amber-900: #ff6f00 !default;
|
||||
|
||||
// Green
|
||||
$green-50: #E8F5E9 !default;
|
||||
$green-100: #C8E6C9 !default;
|
||||
$green-200: #A5D6A7 !default;
|
||||
$green-300: #81C784 !default;
|
||||
$green-400: #66BB6A !default;
|
||||
$green-500: #4CAF50 !default;
|
||||
$green-600: #43A047 !default;
|
||||
$green-700: #388E3C !default;
|
||||
$green-800: #2E7D32 !default;
|
||||
$green-900: #1B5E20 !default;
|
||||
$green-50: #e8f5e9 !default;
|
||||
$green-100: #c8e6c9 !default;
|
||||
$green-200: #a5d6a7 !default;
|
||||
$green-300: #81c784 !default;
|
||||
$green-400: #66bb6a !default;
|
||||
$green-500: #4caf50 !default;
|
||||
$green-600: #43a047 !default;
|
||||
$green-700: #388e3c !default;
|
||||
$green-800: #2e7d32 !default;
|
||||
$green-900: #1b5e20 !default;
|
||||
|
||||
// Red
|
||||
$red-50: #FFEBEE !default;
|
||||
$red-100: #FFCDD2 !default;
|
||||
$red-200: #EF9A9A !default;
|
||||
$red-300: #E57373 !default;
|
||||
$red-400: #EF5350 !default;
|
||||
$red-500: #F44336 !default;
|
||||
$red-600: #E53935 !default;
|
||||
$red-700: #D32F2F !default;
|
||||
$red-800: #C62828 !default;
|
||||
$red-900: #B71C1C !default;
|
||||
$red-50: #ffebee !default;
|
||||
$red-100: #ffcdd2 !default;
|
||||
$red-200: #ef9a9a !default;
|
||||
$red-300: #e57373 !default;
|
||||
$red-400: #ef5350 !default;
|
||||
$red-500: #f44336 !default;
|
||||
$red-600: #e53935 !default;
|
||||
$red-700: #d32f2f !default;
|
||||
$red-800: #c62828 !default;
|
||||
$red-900: #b71c1c !default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Default: Dark theme
|
||||
@mixin dark {
|
||||
|
||||
// Document
|
||||
color-scheme: dark;
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
|
@ -21,19 +20,19 @@
|
|||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-500, .25)};
|
||||
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-500, .25)};
|
||||
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||
--contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
|
|
@ -64,7 +63,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 30%, 50%)};
|
||||
--code-property-color: #{hsl(185, 30%, 50%)};
|
||||
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||
--code-value-color: #{hsl(40, 10%, 50%)};
|
||||
--code-comment-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Accordion (<details>)
|
||||
|
|
@ -106,7 +105,9 @@
|
|||
// Card (<article>)
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
|
||||
0 0.125rem 2rem #{rgba($black, 0.12)},
|
||||
0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Progress
|
||||
|
|
@ -114,19 +115,19 @@
|
|||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-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-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-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-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-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");
|
||||
--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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// Default: Light theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
color-scheme: light;
|
||||
--background-color: #{$white};
|
||||
|
|
@ -22,19 +21,19 @@
|
|||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-600, .125)};
|
||||
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, .125)};
|
||||
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
|
|
@ -65,7 +64,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-900};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
|
|
@ -86,7 +85,7 @@
|
|||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color:#{mix($grey-50, $white)};
|
||||
--table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
|
|
@ -95,7 +94,7 @@
|
|||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #{hsl(330, 40%, 50%)};
|
||||
--code-property-color: #{hsl(185, 40%, 40%)};
|
||||
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||
--code-value-color: #{hsl(40, 20%, 50%)};
|
||||
--code-comment-color: #{$grey-300};
|
||||
|
||||
// Accordion (<details>)
|
||||
|
|
@ -106,7 +105,9 @@
|
|||
// Card (<article>)
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
|
||||
0 0.125rem 2rem #{rgba($grey-900, 0.08)},
|
||||
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Progress
|
||||
|
|
@ -114,19 +115,19 @@
|
|||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
|
||||
// Icons
|
||||
--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-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-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-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-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-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-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");
|
||||
--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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// 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;
|
||||
|
||||
// Responsive typography
|
||||
@if $enable-responsive-typography {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
// Borders
|
||||
--border-radius: .25rem;
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
|
||||
|
|
@ -55,22 +55,20 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Transitions
|
||||
--transition: .2s ease-in-out;
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if $enable-responsive-spacings {
|
||||
|
||||
// Sectionning
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
|
|
@ -98,7 +96,6 @@
|
|||
|
||||
// Card (<article>)
|
||||
article {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
|
|
@ -203,7 +200,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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue