mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
CSS Vars refactoring
This commit is contained in:
Lucas Larroche
parent
14460576bf
commit
d12af72cab
64 changed files with 4878 additions and 4948 deletions
|
|
@ -5,15 +5,20 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||
border-bottom: 1px solid var(--muted-border);
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) / 2);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
|
|
@ -44,11 +49,12 @@ details {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--accordion-active-summary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
margin-top: calc(var(--spacing) / 2);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -60,8 +66,11 @@ details {
|
|||
&[open] {
|
||||
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
color: var(--muted-text);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* Card sectionning (<article> > header, footer, pre)
|
||||
*/
|
||||
|
||||
article {
|
||||
> header,
|
||||
> footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: calc(var(--spacing-gutter) * -1);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> header {
|
||||
margin-top: calc(var(--spacing-gutter) * -2);
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: var(--spacing-block);
|
||||
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,57 +3,32 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if $enable-responsive-spacings {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block);
|
||||
}
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
> header {
|
||||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
// Remove last-child margin bottom
|
||||
@if $enable-important {
|
||||
> *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Nav
|
||||
*/
|
||||
|
||||
// Inline
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -19,17 +19,17 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -40,26 +40,15 @@ nav {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
border-radius: var(--block-round);
|
||||
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,11 +64,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing-gutter) * -0.5);
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ progress {
|
|||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
|
|
@ -29,30 +30,30 @@ progress {
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
margin-bottom: calc(var(--spacing) / 2);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--primary);
|
||||
color: var(--progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat;
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
|
||||
animation: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: var(--block-round);
|
||||
background: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
color: var(--tooltip-color);
|
||||
font-size: .85rem;
|
||||
font-style: normal;
|
||||
font-weight: var(--text-weight);
|
||||
font-weight: var(--font-weight);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -44,9 +44,8 @@
|
|||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
color: var(--tooltip-background-color);
|
||||
content: '';
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue