mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
refactor: files structure
This commit is contained in:
parent
bcac2dca3f
commit
9fa6aa5fab
244 changed files with 8531 additions and 8530 deletions
|
@ -652,6 +652,13 @@ main {
|
|||
padding-block: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
.pico section {
|
||||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
@ -692,13 +699,6 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Section
|
||||
*/
|
||||
.pico section {
|
||||
margin-bottom: var(--pico-block-spacing-vertical);
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
|
@ -725,60 +725,6 @@ main {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Link
|
||||
*/
|
||||
.pico :where(a:not([role=button])),
|
||||
.pico [role=link] {
|
||||
--pico-color: var(--pico-primary);
|
||||
--pico-background-color: transparent;
|
||||
--pico-underline: var(--pico-primary-underline);
|
||||
outline: none;
|
||||
background-color: var(--pico-background-color);
|
||||
color: var(--pico-color);
|
||||
-webkit-text-decoration: var(--pico-text-decoration);
|
||||
text-decoration: var(--pico-text-decoration);
|
||||
text-decoration-color: var(--pico-underline);
|
||||
text-underline-offset: 0.125em;
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||
}
|
||||
.pico :where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-primary-hover);
|
||||
--pico-underline: var(--pico-primary-hover-underline);
|
||||
--pico-text-decoration: underline;
|
||||
}
|
||||
.pico :where(a:not([role=button])):focus-visible,
|
||||
.pico [role=link]:focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
.pico :where(a:not([role=button])).secondary,
|
||||
.pico [role=link].secondary {
|
||||
--pico-color: var(--pico-secondary);
|
||||
--pico-underline: var(--pico-secondary-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-secondary-hover);
|
||||
--pico-underline: var(--pico-secondary-hover-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).contrast,
|
||||
.pico [role=link].contrast {
|
||||
--pico-color: var(--pico-contrast);
|
||||
--pico-underline: var(--pico-contrast-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-contrast-hover);
|
||||
--pico-underline: var(--pico-contrast-hover-underline);
|
||||
}
|
||||
|
||||
.pico a[role=button] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
@ -936,40 +882,59 @@ main {
|
|||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
* Link
|
||||
*/
|
||||
.pico :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
.pico :where(a:not([role=button])),
|
||||
.pico [role=link] {
|
||||
--pico-color: var(--pico-primary);
|
||||
--pico-background-color: transparent;
|
||||
--pico-underline: var(--pico-primary-underline);
|
||||
outline: none;
|
||||
background-color: var(--pico-background-color);
|
||||
color: var(--pico-color);
|
||||
-webkit-text-decoration: var(--pico-text-decoration);
|
||||
text-decoration: var(--pico-text-decoration);
|
||||
text-decoration-color: var(--pico-underline);
|
||||
text-underline-offset: 0.125em;
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
|
||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||
}
|
||||
.pico :where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-primary-hover);
|
||||
--pico-underline: var(--pico-primary-hover-underline);
|
||||
--pico-text-decoration: underline;
|
||||
}
|
||||
.pico :where(a:not([role=button])):focus-visible,
|
||||
.pico [role=link]:focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
.pico :where(a:not([role=button])).secondary,
|
||||
.pico [role=link].secondary {
|
||||
--pico-color: var(--pico-secondary);
|
||||
--pico-underline: var(--pico-secondary-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-secondary-hover);
|
||||
--pico-underline: var(--pico-secondary-hover-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).contrast,
|
||||
.pico [role=link].contrast {
|
||||
--pico-color: var(--pico-contrast);
|
||||
--pico-underline: var(--pico-contrast-underline);
|
||||
}
|
||||
.pico :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
|
||||
.pico [role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
|
||||
--pico-color: var(--pico-contrast-hover);
|
||||
--pico-underline: var(--pico-contrast-hover-underline);
|
||||
}
|
||||
|
||||
.pico audio,
|
||||
.pico video {
|
||||
.pico a[role=button] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pico audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.pico :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.pico img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.pico :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.pico svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Button
|
||||
*/
|
||||
|
@ -1159,6 +1124,41 @@ main {
|
|||
background-color: var(--pico-table-row-stripped-background-color);
|
||||
}
|
||||
|
||||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
.pico :where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pico audio,
|
||||
.pico video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pico audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.pico :where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.pico img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.pico :where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.pico svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue