mirror of
https://github.com/picocss/pico.git
synced 2025-02-22 00:04:36 -05:00
feat: optional parent selector
This commit is contained in:
Lucas Larroche
parent
9ea68c42e0
commit
ef2100499b
@ -38,6 +38,11 @@ $enable-transitions: true !default;
|
||||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
// Optional parent selector
|
||||
// If defined, all HTML tags are wrapped with this selector
|
||||
// :root is not wrapped
|
||||
$parent-selector: "" !default;
|
||||
|
||||
// Breakpoints, viewports and root font size
|
||||
$breakpoints: () !default;
|
||||
$breakpoints: map.deep-merge(
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
* Accordion (<details>)
|
||||
*/
|
||||
|
||||
details {
|
||||
#{$parent-selector} details {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
details {
|
||||
#{$parent-selector} details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
* Card (<article>)
|
||||
*/
|
||||
|
||||
article {
|
||||
#{$parent-selector} article {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
padding: var(#{$css-var-prefix}block-spacing-vertical)
|
||||
var(#{$css-var-prefix}block-spacing-horizontal);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// Container
|
||||
// ––––––––––––––––––––
|
||||
details.dropdown {
|
||||
#{$parent-selector} details.dropdown {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
// Container type accordion
|
||||
// inside a nav
|
||||
// ––––––––––––––––––––
|
||||
nav details.dropdown {
|
||||
#{$parent-selector} nav details.dropdown {
|
||||
// Override height
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -46,7 +46,7 @@
|
||||
// Bouton as a select
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details.dropdown summary:not([role]) {
|
||||
#{$parent-selector} details.dropdown summary:not([role]) {
|
||||
height: calc(
|
||||
1rem *
|
||||
var(#{$css-var-prefix}line-height) +
|
||||
@ -122,7 +122,7 @@
|
||||
|
||||
// Dropdown inside a nav
|
||||
// ––––––––––––––––––––
|
||||
nav details.dropdown {
|
||||
#{$parent-selector} nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
|
||||
// Submenu
|
||||
// ––––––––––––––––––––
|
||||
details.dropdown summary + ul {
|
||||
#{$parent-selector} details.dropdown summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
@ -226,14 +226,14 @@
|
||||
// Button opened
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Menu opened
|
||||
// ––––––––––––––––––––
|
||||
// 1. Inside container type accordion
|
||||
details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
+ ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
@ -249,7 +249,7 @@
|
||||
// Close for dropdown
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details.dropdown[open] summary {
|
||||
#{$parent-selector} details.dropdown[open] summary {
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
@ -264,7 +264,7 @@
|
||||
}
|
||||
// Label
|
||||
// ––––––––––––––––––––
|
||||
label > details.dropdown {
|
||||
#{$parent-selector} label > details.dropdown {
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
||||
form {
|
||||
#{$parent-selector} form {
|
||||
&[role="search"],
|
||||
&[role="group"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[role="search"] {
|
||||
#{$parent-selector} [role="search"] {
|
||||
> * {
|
||||
&:first-child {
|
||||
border-top-left-radius: 5rem;
|
||||
@ -27,8 +27,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
[role="search"],
|
||||
[role="group"] {
|
||||
#{$parent-selector} [role="search"],
|
||||
#{$parent-selector} [role="group"] {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
// Everything except form elements
|
||||
[aria-busy="true"]:not(input, select, textarea, html) {
|
||||
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
@ -33,12 +33,12 @@
|
||||
}
|
||||
|
||||
// Buttons and links
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[role="button"],
|
||||
a {
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [role="button"],
|
||||
#{$parent-selector} a {
|
||||
&[aria-busy="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
#{$css-var-prefix}scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
dialog {
|
||||
#{$parent-selector} dialog {
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
|
||||
@ -18,12 +18,12 @@
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
nav,
|
||||
nav ul {
|
||||
#{$parent-selector} nav,
|
||||
#{$parent-selector} nav ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav {
|
||||
#{$parent-selector} nav {
|
||||
justify-content: space-between;
|
||||
|
||||
ol,
|
||||
@ -118,7 +118,7 @@
|
||||
}
|
||||
|
||||
// Vertical Nav
|
||||
aside {
|
||||
#{$parent-selector} aside {
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
@ -143,7 +143,7 @@
|
||||
|
||||
// Breadcrumb RTL
|
||||
[dir="rtl"] {
|
||||
nav {
|
||||
#{$parent-selector} nav {
|
||||
&[aria-label="breadcrumb"] {
|
||||
& ul li {
|
||||
&:not(:last-child) {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||
progress {
|
||||
#{$parent-selector} progress {
|
||||
display: inline-block; // 1
|
||||
vertical-align: baseline; // 2
|
||||
}
|
||||
@ -21,7 +21,7 @@
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
#{$parent-selector} progress {
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@ -84,7 +84,7 @@
|
||||
|
||||
[dir="rtl"] {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
progress:indeterminate {
|
||||
#{$parent-selector} progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
* Tooltip ([data-tooltip])
|
||||
*/
|
||||
|
||||
[data-tooltip] {
|
||||
#{$parent-selector} [data-tooltip] {
|
||||
position: relative;
|
||||
|
||||
&:not(a, button, input) {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
button {
|
||||
#{$parent-selector} button {
|
||||
margin: 0; // 2
|
||||
overflow: visible; // 3
|
||||
font-family: inherit; // 1
|
||||
@ -22,22 +22,22 @@
|
||||
}
|
||||
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"] {
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"],
|
||||
[type="file"]::file-selector-button,
|
||||
[role="button"] {
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button,
|
||||
#{$parent-selector} [role="button"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
|
||||
@ -85,18 +85,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
[type="submit"],
|
||||
[type="reset"],
|
||||
[type="button"] {
|
||||
#{$parent-selector} [type="submit"],
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="button"] {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
// Secondary
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||
[type="reset"],
|
||||
[type="file"]::file-selector-button {
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
@ -117,7 +117,7 @@
|
||||
}
|
||||
|
||||
// Contrast
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
|
||||
@ -137,7 +137,7 @@
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
@ -151,7 +151,8 @@
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
||||
[type="reset"].outline {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
|
||||
@ -163,7 +164,8 @@
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||
#{$parent-selector}
|
||||
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
|
||||
|
||||
@ -174,8 +176,8 @@
|
||||
}
|
||||
} @else {
|
||||
// Secondary button without .class
|
||||
[type="reset"],
|
||||
[type="file"]::file-selector-button {
|
||||
#{$parent-selector} [type="reset"],
|
||||
#{$parent-selector} [type="file"]::file-selector-button {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
|
||||
@ -196,8 +198,10 @@
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled])
|
||||
#{$parent-selector}
|
||||
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
|
||||
@ -13,21 +13,21 @@
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd,
|
||||
#{$parent-selector} samp {
|
||||
font-size: 0.875em; // 2
|
||||
font-family: var(#{$css-var-prefix}font-family); // 1
|
||||
}
|
||||
|
||||
pre code {
|
||||
#{$parent-selector} pre code {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
pre {
|
||||
#{$parent-selector} pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -35,9 +35,9 @@
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
border-radius: var(#{$css-var-prefix}border-radius);
|
||||
background: var(#{$css-var-prefix}code-background-color);
|
||||
color: var(#{$css-var-prefix}code-color);
|
||||
@ -45,13 +45,13 @@
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
#{$parent-selector} code,
|
||||
#{$parent-selector} kbd {
|
||||
display: inline-block;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
#{$parent-selector} pre {
|
||||
display: block;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
overflow-x: auto;
|
||||
@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
#{$parent-selector} kbd {
|
||||
background-color: var(#{$css-var-prefix}code-kbd-background-color);
|
||||
color: var(#{$css-var-prefix}code-kbd-color);
|
||||
vertical-align: baseline;
|
||||
|
||||
@ -12,42 +12,42 @@
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
#{$parent-selector} :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
audio,
|
||||
video {
|
||||
#{$parent-selector} audio,
|
||||
#{$parent-selector} video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add the correct display in iOS 4-7
|
||||
audio:not([controls]) {
|
||||
#{$parent-selector} audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
:where(iframe) {
|
||||
#{$parent-selector} :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// 1. Remove the border on images inside links in IE 10.
|
||||
// 2. Responsive by default
|
||||
img {
|
||||
#{$parent-selector} img {
|
||||
max-width: 100%; // 2
|
||||
height: auto; // 2
|
||||
border-style: none; // 1
|
||||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
:where(svg:not([fill])) {
|
||||
#{$parent-selector} :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hide the overflow in IE
|
||||
svg:not(:root) {
|
||||
#{$parent-selector} svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
* Link
|
||||
*/
|
||||
|
||||
:where(a:not([role="button"])),
|
||||
[role="link"] {
|
||||
#{$parent-selector} :where(a:not([role="button"])),
|
||||
#{$parent-selector} [role="link"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
|
||||
#{$css-var-prefix}background-color: transparent;
|
||||
#{$css-var-prefix}underline: var(#{$css-var-prefix}primary-underline);
|
||||
@ -61,7 +61,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
#{$parent-selector} a {
|
||||
&[role="button"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
hr {
|
||||
#{$parent-selector} hr {
|
||||
height: 0; // 2
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
border: 0;
|
||||
@ -22,8 +22,8 @@
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
[hidden],
|
||||
template {
|
||||
#{$parent-selector} [hidden],
|
||||
#{$parent-selector} template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
// Add the correct display in IE 9-
|
||||
canvas {
|
||||
#{$parent-selector} canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
:where(table) {
|
||||
#{$parent-selector} :where(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
@ -24,8 +24,8 @@
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
#{$parent-selector} th,
|
||||
#{$parent-selector} td {
|
||||
padding: calc(var(#{$css-var-prefix}spacing) / 2) var(#{$css-var-prefix}spacing);
|
||||
border-bottom: var(#{$css-var-prefix}border-width)
|
||||
solid
|
||||
@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
// Footer
|
||||
tfoot {
|
||||
#{$parent-selector} tfoot {
|
||||
th,
|
||||
td {
|
||||
border-top: var(#{$css-var-prefix}border-width)
|
||||
@ -50,7 +50,7 @@
|
||||
|
||||
// Striped
|
||||
@if enable-classes {
|
||||
table {
|
||||
#{$parent-selector} table {
|
||||
&.striped {
|
||||
tbody tr:nth-child(odd) th,
|
||||
tbody tr:nth-child(odd) td {
|
||||
|
||||
@ -12,37 +12,37 @@
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
b,
|
||||
strong {
|
||||
#{$parent-selector} b,
|
||||
#{$parent-selector} strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||
sub,
|
||||
sup {
|
||||
#{$parent-selector} sub,
|
||||
#{$parent-selector} sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
#{$parent-selector} sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
#{$parent-selector} sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
#{$parent-selector} address,
|
||||
#{$parent-selector} blockquote,
|
||||
#{$parent-selector} dl,
|
||||
#{$parent-selector} ol,
|
||||
#{$parent-selector} p,
|
||||
#{$parent-selector} pre,
|
||||
#{$parent-selector} table,
|
||||
#{$parent-selector} ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
@ -51,12 +51,12 @@
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
#{$parent-selector} h1,
|
||||
#{$parent-selector} h2,
|
||||
#{$parent-selector} h3,
|
||||
#{$parent-selector} h4,
|
||||
#{$parent-selector} h5,
|
||||
#{$parent-selector} h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
@ -66,39 +66,40 @@
|
||||
font-family: var(#{$css-var-prefix}font-family);
|
||||
}
|
||||
|
||||
h1 {
|
||||
#{$parent-selector} h1 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h1-color);
|
||||
}
|
||||
h2 {
|
||||
#{$parent-selector} h2 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h2-color);
|
||||
}
|
||||
h3 {
|
||||
#{$parent-selector} h3 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h3-color);
|
||||
}
|
||||
h4 {
|
||||
#{$parent-selector} h4 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h4-color);
|
||||
}
|
||||
h5 {
|
||||
#{$parent-selector} h5 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h5-color);
|
||||
}
|
||||
h6 {
|
||||
#{$parent-selector} h6 {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a block
|
||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
#{$parent-selector}
|
||||
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(#{$css-var-prefix}typography-spacing-top);
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
#{$parent-selector} p {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Heading group
|
||||
hgroup {
|
||||
#{$parent-selector} hgroup {
|
||||
margin-bottom: var(#{$css-var-prefix}typography-spacing-vertical);
|
||||
|
||||
> * {
|
||||
@ -114,7 +115,7 @@
|
||||
}
|
||||
|
||||
// Lists
|
||||
:where(ol, ul) {
|
||||
#{$parent-selector} :where(ol, ul) {
|
||||
li {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
@ -122,17 +123,17 @@
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
#{$parent-selector} :where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(#{$css-var-prefix}typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
ul li {
|
||||
#{$parent-selector} ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
// Highlighted text
|
||||
mark {
|
||||
#{$parent-selector} mark {
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(#{$css-var-prefix}mark-background-color);
|
||||
color: var(#{$css-var-prefix}mark-color);
|
||||
@ -140,7 +141,7 @@
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
#{$parent-selector} blockquote {
|
||||
display: block;
|
||||
margin: var(#{$css-var-prefix}typography-spacing-vertical) 0;
|
||||
padding: var(#{$css-var-prefix}spacing);
|
||||
@ -157,25 +158,25 @@
|
||||
|
||||
// Abbreviations
|
||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||
abbr[title] {
|
||||
#{$parent-selector} abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
// Ins
|
||||
ins {
|
||||
#{$parent-selector} ins {
|
||||
color: var(#{$css-var-prefix}ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
#{$parent-selector} del {
|
||||
color: var(#{$css-var-prefix}del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
::selection {
|
||||
#{$parent-selector} ::selection {
|
||||
background-color: var(#{$css-var-prefix}text-selection-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
#{$parent-selector} input,
|
||||
#{$parent-selector} optgroup,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
margin: 0; // 2
|
||||
font-size: 1rem; // 1
|
||||
line-height: var(#{$css-var-prefix}line-height); // 1
|
||||
@ -27,12 +27,12 @@
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
input {
|
||||
#{$parent-selector} input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||
select {
|
||||
#{$parent-selector} select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
#{$parent-selector} legend {
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
@ -48,65 +48,65 @@
|
||||
}
|
||||
|
||||
// 1. Remove the default vertical scrollbar in IE
|
||||
textarea {
|
||||
#{$parent-selector} textarea {
|
||||
overflow: auto; // 1
|
||||
}
|
||||
|
||||
// Remove the padding in IE 10
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Safari
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
#{$parent-selector} ::-webkit-inner-spin-button,
|
||||
#{$parent-selector} ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the odd appearance in Chrome and Safari
|
||||
// 2. Correct the outline style in Safari
|
||||
[type="search"] {
|
||||
#{$parent-selector} [type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
// Remove the inner padding in Chrome and Safari on macOS
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
#{$parent-selector} [type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||
// 2. Change font properties to `inherit` in Safari
|
||||
::-webkit-file-upload-button {
|
||||
#{$parent-selector} ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
// Remove the inner border and padding of focus outlines in Firefox
|
||||
::-moz-focus-inner {
|
||||
#{$parent-selector} ::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Remove the focus outline in Firefox
|
||||
:-moz-focusring {
|
||||
#{$parent-selector} :-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
:-moz-ui-invalid {
|
||||
#{$parent-selector} :-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Change the inconsistent appearance in IE (opinionated)
|
||||
::-ms-expand {
|
||||
#{$parent-selector} ::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Remove the border and padding in all browsers (opinionated)
|
||||
[type="file"],
|
||||
[type="range"] {
|
||||
#{$parent-selector} [type="file"],
|
||||
#{$parent-selector} [type="range"] {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
@ -115,7 +115,7 @@
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(#{$css-var-prefix}line-height)) +
|
||||
(var(#{$css-var-prefix}form-element-spacing-vertical) * 2) +
|
||||
@ -124,7 +124,7 @@
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
#{$parent-selector} fieldset {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
@ -133,39 +133,39 @@
|
||||
}
|
||||
|
||||
// Label & legend
|
||||
label,
|
||||
fieldset legend {
|
||||
#{$parent-selector} label,
|
||||
#{$parent-selector} fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.375);
|
||||
color: var(#{$css-var-prefix}color);
|
||||
font-weight: var(#{$css-var-prefix}form-label-font-weight, var(#{$css-var-prefix}font-weight));
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
#{$parent-selector} fieldset legend {
|
||||
margin-bottom: calc(var(#{$css-var-prefix}spacing) * 0.5);
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
button[type="submit"],
|
||||
select,
|
||||
textarea {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
|
||||
#{$parent-selector} button[type="submit"],
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
appearance: none;
|
||||
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
|
||||
var(#{$css-var-prefix}form-element-spacing-horizontal);
|
||||
}
|
||||
|
||||
// Commons styles
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
#{$parent-selector} input,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-background-color);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-border-color);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}form-element-color);
|
||||
@ -188,7 +188,8 @@
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not(
|
||||
#{$parent-selector}
|
||||
input:not(
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
@ -196,7 +197,7 @@
|
||||
[type="radio"],
|
||||
[readonly]
|
||||
),
|
||||
:where(select, textarea):not([readonly]) {
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:is(:active, :focus) {
|
||||
#{$css-var-prefix}background-color: var(
|
||||
#{$css-var-prefix}form-element-active-background-color
|
||||
@ -205,15 +206,17 @@
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||
:where(select, textarea):not([readonly]) {
|
||||
#{$parent-selector}
|
||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:is(:active, :focus) {
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
input:not(
|
||||
#{$parent-selector}
|
||||
input:not(
|
||||
[type="submit"],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
@ -221,7 +224,7 @@
|
||||
[type="file"],
|
||||
[readonly]
|
||||
),
|
||||
:where(select, textarea):not([readonly]) {
|
||||
#{$parent-selector} :where(select, textarea):not([readonly]) {
|
||||
&:focus {
|
||||
#{$css-var-prefix}box-shadow: 0
|
||||
0
|
||||
@ -232,22 +235,23 @@
|
||||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
label[aria-disabled="true"],
|
||||
:where(fieldset[disabled])
|
||||
#{$parent-selector} input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||
#{$parent-selector} select[disabled],
|
||||
#{$parent-selector} textarea[disabled],
|
||||
#{$parent-selector} label[aria-disabled="true"],
|
||||
#{$parent-selector}
|
||||
:where(fieldset[disabled])
|
||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||
opacity: var(#{$css-var-prefix}form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
label[aria-disabled="true"] input[disabled] {
|
||||
#{$parent-selector} label[aria-disabled="true"] input[disabled] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
:where(input, select, textarea) {
|
||||
#{$parent-selector} :where(input, select, textarea) {
|
||||
&:not(
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
@ -354,7 +358,7 @@
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input, select, textarea) {
|
||||
#{$parent-selector} :where(input, select, textarea) {
|
||||
&:not([type="checkbox"], [type="radio"]) {
|
||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
||||
background-position: center left 0.75rem;
|
||||
@ -364,24 +368,24 @@
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
#{$parent-selector} input::placeholder,
|
||||
#{$parent-selector} input::-webkit-input-placeholder,
|
||||
#{$parent-selector} textarea::placeholder,
|
||||
#{$parent-selector} textarea::-webkit-input-placeholder,
|
||||
#{$parent-selector} select:invalid {
|
||||
color: var(#{$css-var-prefix}form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
input:not([type="checkbox"], [type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"]),
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} textarea {
|
||||
margin-bottom: var(#{$css-var-prefix}spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
select {
|
||||
#{$parent-selector} select {
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
@ -409,7 +413,7 @@
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
select {
|
||||
#{$parent-selector} select {
|
||||
&:not([multiple], [size]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
@ -417,7 +421,7 @@
|
||||
}
|
||||
|
||||
// Textarea
|
||||
textarea {
|
||||
#{$parent-selector} textarea {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
|
||||
@ -437,7 +441,7 @@
|
||||
$helper-previous-tags: $helper-previous-tags + ", .grid";
|
||||
}
|
||||
|
||||
:where(#{$helper-previous-tags}) {
|
||||
#{$parent-selector} :where(#{$helper-previous-tags}) {
|
||||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -458,7 +462,7 @@
|
||||
}
|
||||
|
||||
// Styles for Input inside a label
|
||||
label {
|
||||
#{$parent-selector} label {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
|
||||
}
|
||||
|
||||
@ -8,15 +8,15 @@
|
||||
|
||||
// Labels
|
||||
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
||||
label {
|
||||
#{$parent-selector} label {
|
||||
&:has([type="checkbox"], [type="radio"]) {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
#{$parent-selector} [type="checkbox"] {
|
||||
&:indeterminate {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
||||
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
||||
@ -67,7 +67,7 @@
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
#{$parent-selector} [type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked,
|
||||
@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
|
||||
|
||||
@ -135,8 +135,8 @@
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
[type="checkbox"],
|
||||
[type="checkbox"][role="switch"] {
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
&[aria-invalid="false"] {
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
@ -155,9 +155,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="checkbox"][role="switch"] {
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"],
|
||||
#{$parent-selector} [type="checkbox"][role="switch"] {
|
||||
&[aria-invalid="false"] {
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
* Input type color
|
||||
*/
|
||||
|
||||
[type="color"] {
|
||||
#{$parent-selector} [type="color"] {
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
#{$css-var-prefix}icon-position: 0.75rem;
|
||||
#{$css-var-prefix}icon-width: 1rem;
|
||||
@ -25,11 +25,11 @@
|
||||
}
|
||||
|
||||
// Calendar picker
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
#{$parent-selector} [type="date"],
|
||||
#{$parent-selector} [type="datetime-local"],
|
||||
#{$parent-selector} [type="month"],
|
||||
#{$parent-selector} [type="time"],
|
||||
#{$parent-selector} [type="week"] {
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
width: var(#{$css-var-prefix}icon-width);
|
||||
margin-right: calc(var(#{$css-var-prefix}icon-width) * -1);
|
||||
@ -41,11 +41,11 @@
|
||||
// Calendar icons are hidden in Firefox
|
||||
@if $enable-important {
|
||||
@-moz-document url-prefix() {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
#{$parent-selector} [type="date"],
|
||||
#{$parent-selector} [type="datetime-local"],
|
||||
#{$parent-selector} [type="month"],
|
||||
#{$parent-selector} [type="time"],
|
||||
#{$parent-selector} [type="week"] {
|
||||
padding-right: var(#{$css-var-prefix}form-element-spacing-horizontal) !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
@ -53,6 +53,7 @@
|
||||
}
|
||||
|
||||
[dir="rtl"]
|
||||
#{$parent-selector}
|
||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
// 1. Hack to display the outline on the focused file selector button
|
||||
// with the forced overflow hidden on the input[type="file"] element.
|
||||
[type="file"] {
|
||||
#{$parent-selector} [type="file"] {
|
||||
#{$css-var-prefix}color: var(#{$css-var-prefix}muted-color);
|
||||
margin-left: calc(var(#{$css-var-prefix}outline-width) * -1); // 1
|
||||
padding: calc(var(#{$css-var-prefix}form-element-spacing-vertical) * 0.5) 0;
|
||||
|
||||
@ -43,7 +43,7 @@ $border-thumb: 2px;
|
||||
* Input type range
|
||||
*/
|
||||
|
||||
[type="range"] {
|
||||
#{$parent-selector} [type="range"] {
|
||||
// Styles
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
#{$parent-selector} input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-inline-start: calc(var(#{$css-var-prefix}form-element-spacing-horizontal) + 1.75rem);
|
||||
background-image: var(#{$css-var-prefix}icon-search);
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input) {
|
||||
#{$parent-selector} :where(input) {
|
||||
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
#{$semantic-root-element} {
|
||||
#{$parent-selector} #{$semantic-root-element} {
|
||||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
// Wrapper to make allow any content to be scrolled horizontally
|
||||
figure {
|
||||
#{$parent-selector} figure {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
* Section
|
||||
*/
|
||||
|
||||
section {
|
||||
#{$parent-selector} section {
|
||||
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
@ -205,7 +205,7 @@
|
||||
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
|
||||
// Change the icon color to black for accordion and dropdown .contrast buttons
|
||||
@if $enable-classes {
|
||||
details {
|
||||
#{$parent-selector} details {
|
||||
summary {
|
||||
&[role="button"].contrast:not(.outline) {
|
||||
&::after {
|
||||
@ -227,7 +227,7 @@
|
||||
@if map.get($modules, "components/loading") {
|
||||
// Change the icon color to black for .contrast buttons
|
||||
@if $enable-classes {
|
||||
[aria-busy="true"]:not(input, select, textarea) {
|
||||
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
|
||||
&.contrast:is(
|
||||
button,
|
||||
[type="submit"],
|
||||
|
||||
@ -30,10 +30,10 @@
|
||||
@include dark.theme;
|
||||
}
|
||||
|
||||
progress,
|
||||
[type="checkbox"],
|
||||
[type="radio"],
|
||||
[type="range"] {
|
||||
#{$parent-selector} progress,
|
||||
#{$parent-selector} [type="checkbox"],
|
||||
#{$parent-selector} [type="radio"],
|
||||
#{$parent-selector} [type="range"] {
|
||||
accent-color: var(#{$css-var-prefix}primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,24 +118,6 @@
|
||||
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
|
||||
}
|
||||
|
||||
// Chevron icons
|
||||
// Change the icon color to white for accordion and dropdown buttons
|
||||
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
|
||||
details {
|
||||
summary {
|
||||
$selector: '&[role="button"]';
|
||||
@if $enable-classes {
|
||||
$selector: "#{$selector}:not(.outline)";
|
||||
}
|
||||
#{$selector} {
|
||||
&::after {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Datetime icons
|
||||
@if map.get($modules, "forms/input-date") {
|
||||
#{$css-var-prefix}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='#{functions.display-rgb($zinc-400)}' 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");
|
||||
@ -156,19 +138,6 @@
|
||||
@if map.get($modules, "components/loading") {
|
||||
// Inspired by https://codepen.io/aleksander351/pen/KzgKPo
|
||||
#{$css-var-prefix}icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='#{functions.display-rgb($zinc-400)}' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
// Change the icon color to white for buttons
|
||||
[aria-busy="true"]:not(input, select, textarea) {
|
||||
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
|
||||
@if $enable-classes {
|
||||
$selector: "#{$selector}:not(.outline)";
|
||||
}
|
||||
#{$selector} {
|
||||
&::before {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -421,4 +390,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chevron icons
|
||||
// Change the icon color to white for accordion and dropdown buttons
|
||||
@if map.get($modules, "components/accordion") or map.get($modules, "components/dropdown") {
|
||||
#{$parent-selector} details {
|
||||
summary {
|
||||
$selector: '&[role="button"]';
|
||||
@if $enable-classes {
|
||||
$selector: "#{$selector}:not(.outline)";
|
||||
}
|
||||
#{$selector} {
|
||||
&::after {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Loading icon (animated)
|
||||
@if map.get($modules, "components/loading") {
|
||||
// Change the icon color to white for buttons
|
||||
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea) {
|
||||
$selector: '&:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"])';
|
||||
@if $enable-classes {
|
||||
$selector: "#{$selector}:not(.outline)";
|
||||
}
|
||||
#{$selector} {
|
||||
&::before {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,44 +14,44 @@
|
||||
// Accessibility
|
||||
|
||||
// Change the cursor on control elements in all browsers (opinionated)
|
||||
[aria-controls] {
|
||||
#{$parent-selector} [aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
#{$parent-selector} [aria-disabled="true"],
|
||||
#{$parent-selector} [disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
||||
[aria-hidden="false"][hidden] {
|
||||
#{$parent-selector} [aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
#{$parent-selector} [aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// User interaction
|
||||
// Remove the tapping delay in IE 10
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
#{$parent-selector} a,
|
||||
#{$parent-selector} area,
|
||||
#{$parent-selector} button,
|
||||
#{$parent-selector} input,
|
||||
#{$parent-selector} label,
|
||||
#{$parent-selector} select,
|
||||
#{$parent-selector} summary,
|
||||
#{$parent-selector} textarea,
|
||||
#{$parent-selector} [tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
[dir="rtl"] {
|
||||
#{$parent-selector} [dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,9 +15,9 @@
|
||||
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
|
||||
// 4. Remove transitions when motion is reduced (opinionated)
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*:not([aria-busy="true"]),
|
||||
:not([aria-busy="true"])::before,
|
||||
:not([aria-busy="true"])::after {
|
||||
#{$parent-selector} *:not([aria-busy="true"]),
|
||||
#{$parent-selector} :not([aria-busy="true"])::before,
|
||||
#{$parent-selector} :not([aria-busy="true"])::after {
|
||||
background-attachment: initial !important; // 2
|
||||
animation-duration: 1ms !important; // 1
|
||||
animation-delay: -1ms !important; // 1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user