mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 19:26:14 -04:00
feat: optional parent selector
This commit is contained in:
Lucas Larroche
parent
9ea68c42e0
commit
ef2100499b
32 changed files with 295 additions and 277 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue