mirror of
https://github.com/picocss/pico.git
synced 2025-02-22 00:04:36 -05:00
chore: lint with prettier on build
This commit is contained in:
Lucas Larroche
parent
bf62c8ce09
commit
670826069b
3
.prettierrc
Normal file
3
.prettierrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"printWidth": 100
|
||||
}
|
||||
@ -7,9 +7,8 @@
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--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;
|
||||
@ -188,9 +187,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 {
|
||||
@ -269,8 +268,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
|
||||
@ -376,8 +374,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
@ -482,8 +479,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
|
||||
File diff suppressed because one or more lines are too long
20
css/pico.css
20
css/pico.css
@ -7,9 +7,8 @@
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--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;
|
||||
@ -193,9 +192,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 {
|
||||
@ -274,8 +273,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
|
||||
@ -381,8 +379,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
@ -487,8 +484,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,9 +2,8 @@
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--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;
|
||||
@ -188,9 +187,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 {
|
||||
@ -269,8 +268,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
|
||||
@ -376,8 +374,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
@ -482,8 +479,7 @@ kbd {
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: var(--card-background-color);
|
||||
--card-box-shadow:
|
||||
0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
--card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
|
||||
0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
|
||||
0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
|
||||
0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
|
||||
|
||||
File diff suppressed because one or more lines are too long
13
package.json
13
package.json
@ -29,18 +29,20 @@
|
||||
},
|
||||
"scripts": {
|
||||
"✨": "run-s build",
|
||||
"build": "run-s \"build:*\" --silent",
|
||||
"build": "run-s lint \"build:*\" --silent",
|
||||
"watch": "nodemon -q --watch scss/ --ext scss --exec 'run-s build'",
|
||||
"build:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
|
||||
"lint": "run-s \"lint:*\" --silent",
|
||||
"lint:prettier": "prettier --write --loglevel silent 'scss/**/*.scss'",
|
||||
"lint:sort-scss": "postcss --config scss ./scss/**/*.scss --replace",
|
||||
"build:css": "sass --style expanded --source-map --embed-sources --no-error-css scss/:css/",
|
||||
"build:autoprefix": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
|
||||
"build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
|
||||
"prebuild": "echo '\\033[32m[@picocss/pico] ✨ Start\\033[0m'",
|
||||
"prebuild:sort-scss": "echo '[@picocss/pico] ✨ Clean SCSS files'",
|
||||
"prebuild": "echo '\\033[96m[@picocss/pico] ✨ Start\\033[0m'",
|
||||
"prelint": "echo '[@picocss/pico] ✨ Lint'",
|
||||
"prebuild:css": "echo '[@picocss/pico] ✨ Compile'",
|
||||
"prebuild:autoprefix": "echo '[@picocss/pico] ✨ Autoprefix'",
|
||||
"prebuild:minify": "echo '[@picocss/pico] ✨ Minify'",
|
||||
"postbuild:minify": "echo '\\033[32m[@picocss/pico] ✨ Build done\\033[0m'"
|
||||
"postbuild:minify": "echo '\\033[32m[@picocss/pico] ✨ Done\\033[0m'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.12",
|
||||
@ -51,6 +53,7 @@
|
||||
"postcss": "^8.4.17",
|
||||
"postcss-cli": "^10.0.0",
|
||||
"postcss-scss": "^4.0.5",
|
||||
"prettier": "2.7.1",
|
||||
"sass": "^1.55.0"
|
||||
},
|
||||
"browserslist": [
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -53,11 +53,7 @@ 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;
|
||||
|
||||
|
||||
@ -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,7 +172,8 @@ 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;
|
||||
|
||||
@ -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 {
|
||||
@ -232,8 +229,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,8 +21,7 @@ hr {
|
||||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">)
|
||||
|
||||
@ -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">)
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -20,16 +20,16 @@
|
||||
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;
|
||||
@ -42,9 +42,9 @@
|
||||
&::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,18 +109,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@ -134,7 +131,7 @@
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-bottom;
|
||||
}
|
||||
|
||||
@ -149,7 +146,7 @@
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-left;
|
||||
}
|
||||
|
||||
@ -164,7 +161,7 @@
|
||||
&:hover {
|
||||
&::before,
|
||||
&::after {
|
||||
animation-duration: .2s;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: tooltip-slide-right;
|
||||
}
|
||||
|
||||
@ -177,11 +174,11 @@
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -191,7 +188,7 @@
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -.25rem);
|
||||
transform: translate(-50%, -0.25rem);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
@ -202,11 +199,11 @@
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -216,22 +213,22 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -241,22 +238,22 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -266,11 +263,11 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -910,6 +910,11 @@ postcss@^8.4.17:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
prettier@2.7.1:
|
||||
version "2.7.1"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
|
||||
integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
|
||||
|
||||
pretty-hrtime@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user