mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -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
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
* Button Styles
|
||||
*/
|
||||
|
||||
// Button .secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="reset"],
|
||||
a[role="button"].secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
a[role="button"].contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--contrast-hover-border);
|
||||
background-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a[role="button"].outline {
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.secondary
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width)solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.contrast
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
|
||||
// Button reset only for classless version
|
||||
input[type="reset"] {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,8 +31,8 @@ button::-moz-focus-inner,
|
|||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -54,17 +54,20 @@ button,
|
|||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
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;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--buttons-weight);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -80,19 +83,114 @@ a[role="button"] {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Input [type="reset"]
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
&.outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
&.outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
&.outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875rem; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -31,49 +31,25 @@ pre {
|
|||
pre,
|
||||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: var(--code-weight);
|
||||
background: var(--code-background-color);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: var(--spacing);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
background: var(--code-background-color);
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
|
|
@ -84,37 +60,37 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
// Code Syntax highlighting
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: var(--code-weight);
|
||||
color: var(--code-tag-color);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-color-3);
|
||||
color: var(--code-property-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--code-color-4);
|
||||
color: var(--code-value-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-color-5);
|
||||
color: var(--code-comment-color);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
font-weight: bolder;
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -17,11 +18,12 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,17 +50,29 @@
|
|||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--secondary-inverse);
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -74,22 +88,17 @@
|
|||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: none;
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
[type="range"]{
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
|
|
@ -108,8 +117,8 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -121,8 +130,8 @@
|
|||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -134,8 +143,8 @@
|
|||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -145,7 +154,7 @@
|
|||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--border-radius);
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
|
|
@ -154,9 +163,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -171,9 +180,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -188,9 +197,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -200,62 +209,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
--range-border-color: var(--range-active-border-color);
|
||||
--range-thumb-color: var(--range-thumb-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
--range-thumb-color: var(--range-thumb-active-color);
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
|
|
@ -263,15 +238,15 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button{
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -22,19 +22,16 @@
|
|||
}
|
||||
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-image: var(--icon-minus);
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
|
|
@ -43,20 +40,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
&:indeterminate {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35rem;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
|
|
@ -66,17 +79,27 @@
|
|||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
--background-color: var(--switch-checked-background-color);
|
||||
--border-color: var(--switch-checked-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--input-inverse);
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -85,13 +108,11 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||
margin-left: calc(#{$switch-width / 2} - var(--border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,9 +89,9 @@ textarea {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
// Restore the focus outline styles unset by the previous rule in Firefox
|
||||
// Remove the focus outline in Firefox
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
|
|
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
|||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -136,15 +136,14 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Global layout
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea,
|
||||
form small {
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -164,13 +163,17 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
--background-color: var(--form-element-background-color);
|
||||
--border-color: var(--form-element-border-color);
|
||||
--color: var(--form-element-color);
|
||||
--box-shadow: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -179,102 +182,106 @@ textarea {
|
|||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||||
select,
|
||||
textarea {
|
||||
&[disabled] {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: .375;
|
||||
}
|
||||
}
|
||||
|
||||
// Aria-valid
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
&[disabled] {
|
||||
border-color: var(--muted-border);
|
||||
box-shadow: none;
|
||||
|
||||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
background-image: var(--icon-valid);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
background-color: var(--muted-background);
|
||||
}
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
background-image: var(--icon-invalid);
|
||||
|
||||
&[disabled] {
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid only
|
||||
@if $enable-classes {
|
||||
.valid,
|
||||
.invalid,
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
.valid,
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
.invalid,
|
||||
&[aria-invalid="true"]{
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid and classes (.valid & .invalid)
|
||||
@else {
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"]{
|
||||
background-image: var(--icon-invalid);
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes andRadios)
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
color: var(--form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
input:not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
|
|
@ -296,16 +303,15 @@ select {
|
|||
}
|
||||
|
||||
// Helper
|
||||
form small {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: calc(var(--spacing-typography) * -0.75);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,6 +320,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: var(--spacing-form-element);
|
||||
margin-top: calc(var(--spacing) / 4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ hr {
|
|||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
border: none;
|
||||
border-top: 1px solid var(--muted-border);
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
|
|
|
|||
|
|
@ -26,32 +26,24 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--text-weight);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||
color: var(--color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Titles
|
||||
th,
|
||||
thead td {
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
// Rows
|
||||
tr {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
// First row
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 3px solid var(--table-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Striping
|
||||
table[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
// Striped
|
||||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
--background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -70,9 +70,12 @@ ul {
|
|||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
background-color: transparent; // 1
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
background-color: var(--background-color); // 1
|
||||
color: var(--color);
|
||||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -85,54 +88,49 @@ a {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--primary-hover);
|
||||
text-decoration: underline;
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--primary-focus);
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Link .secondary
|
||||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
@if $enable-classes {
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--secondary-hover);
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--contrast-focus);
|
||||
&:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// Because vertical margins can collapse, we avoid `margin-top`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -140,44 +138,30 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-family: var(--titles-font);
|
||||
font-weight: var(--titles-weight);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: var(--h1-size);
|
||||
--color: var(--h1-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: var(--h2-size);
|
||||
--color: var(--h2-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: var(--h3-size);
|
||||
--color: var(--h3-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: var(--h4-size);
|
||||
--color: var(--h4-color);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: var(--h5-size);
|
||||
--color: var(--h5-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: var(--h6-size);
|
||||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -191,88 +175,49 @@ p,
|
|||
pre,
|
||||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h1,
|
||||
& ~ h2,
|
||||
& ~ h3,
|
||||
& ~ h4,
|
||||
& ~ h5,
|
||||
& ~ h6 {
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
// Heading group
|
||||
hgroup {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
*{
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
--color: var(--muted-color);
|
||||
font-family: unset;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: 85%;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--spacing-typography);
|
||||
padding-left: var(--spacing);
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -280,24 +225,24 @@ ul li {
|
|||
list-style: square;
|
||||
}
|
||||
|
||||
// Marked text
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
background: var(--mark);
|
||||
color: var(--mark-text);
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
||||
color: var(--blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -311,13 +256,13 @@ abbr[title] {
|
|||
|
||||
// Ins
|
||||
ins {
|
||||
color: var(--valid);
|
||||
color: var(--ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--invalid);
|
||||
color: var(--del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue