mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Move styles in SCSS vars to CSS vars
This commit is contained in:
Lucas
parent
f67044ecae
commit
9b1ef33577
49 changed files with 2921 additions and 1841 deletions
|
|
@ -9,17 +9,24 @@
|
|||
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 {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,17 +36,19 @@
|
|||
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: 0 0 0 0.2rem var(--contrast-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,14 +57,14 @@
|
|||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a.outline[role="button"] {
|
||||
border: 1px solid var(--primary);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-hover);
|
||||
border: 1px solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -66,20 +75,16 @@
|
|||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: 1px solid var(--secondary);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--secondary-hover);
|
||||
border: 1px solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -88,19 +93,15 @@
|
|||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: 1px solid var(--contrast);
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--contrast-hover);
|
||||
border: 1px solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -53,35 +53,40 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $round;
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: $line-height;
|
||||
font-weight: var(--buttons-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $monospace; // 1
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ kbd {
|
|||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
font-weight: var(--code-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
|
|
@ -65,13 +65,13 @@ code,
|
|||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: $spacing-block;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ pre {
|
|||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
line-height: $line-height;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ code {
|
|||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
font-weight: var(--code-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +31,7 @@
|
|||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%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");
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -45,30 +43,40 @@
|
|||
|
||||
// Time
|
||||
[type="time"] {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
padding: $spacing-input-button-horizontal/2 0;
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: var(--muted-text);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding-top: $spacing-input-button-horizontal/2;
|
||||
padding-bottom: $spacing-input-button-horizontal/2;
|
||||
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);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +84,7 @@
|
|||
&:focus {
|
||||
box-shadow: none;
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,38 +109,39 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,16 +155,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--background);
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,15 +172,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,39 +189,36 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: transparent;
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,12 +248,11 @@
|
|||
|
||||
// Search
|
||||
[type="search"] {
|
||||
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
|
||||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
border-width: 2px;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -21,16 +21,20 @@
|
|||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
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;
|
||||
|
|
@ -45,8 +49,8 @@
|
|||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,23 +61,22 @@
|
|||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
$switch-width: 2.25rem;
|
||||
$switch-border: 3px;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: $switch-border solid var(--input-border);
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
background-color: var(--input-inverse);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -82,13 +85,13 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
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} - #{$switch-border});
|
||||
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ textarea {
|
|||
font-family: inherit; // 1
|
||||
font-size: 1rem; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
line-height: $line-height; // 1
|
||||
line-height: var(--line-height); // 1
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
|
|
@ -36,7 +36,6 @@ select {
|
|||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
|
|
@ -118,13 +117,17 @@ textarea {
|
|||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -133,7 +136,7 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +156,7 @@ textarea {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -161,20 +164,20 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: $round;
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
border-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
|
|
@ -185,7 +188,8 @@ textarea {
|
|||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
|
|
@ -196,6 +200,16 @@ textarea {
|
|||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
|
|
@ -203,8 +217,7 @@ textarea {
|
|||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states
|
||||
|
|
@ -220,13 +233,11 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +246,7 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
|
|
@ -243,7 +254,7 @@ input:not([type="range"]):not([type="file"]),
|
|||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,9 +268,8 @@ select {
|
|||
}
|
||||
|
||||
&:not([multiple]):not([size]) {
|
||||
padding-right: #{$spacing-input-button-horizontal + 1.5rem};
|
||||
// Source: https://feathericons.com/
|
||||
background-image: 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='#{$icon-color}' 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");
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -276,8 +286,8 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: -$spacing-typography/1.5;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -286,6 +296,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: $spacing-form-elements;
|
||||
margin-top: var(--spacing-form-element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
||||
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: $text-weight;
|
||||
font-weight: var(--text-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +50,8 @@ thead {
|
|||
}
|
||||
|
||||
// Striping
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
table[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
|
|
@ -76,10 +76,10 @@ a {
|
|||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
text-decoration $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -99,6 +99,7 @@ a {
|
|||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -114,16 +115,14 @@ a {
|
|||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast:not([role="button"]) {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
|
||||
color: var(--contrast-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -141,43 +140,43 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
font-weight: $heading-weight;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-weight: var(--titles-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: $spacing-typography*2;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: 2rem;
|
||||
font-size: var(--h1-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: $spacing-typography*1.75;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: 1.75rem;
|
||||
font-size: var(--h2-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: $spacing-typography*1.5;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: $spacing-typography*1.25;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--h4-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: $spacing-typography*1.125;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: 1.125rem;
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: 1rem;
|
||||
font-size: var(--h6-size);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -192,34 +191,34 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: $spacing-typography*2;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: $spacing-typography*1.75;
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: $spacing-typography*1.5;
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: $spacing-typography*1.25;
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: $spacing-typography*1.125;
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h6 {
|
||||
margin-top: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
hgroup {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
|
||||
*{
|
||||
margin-bottom: 0;
|
||||
|
|
@ -228,13 +227,13 @@ hgroup {
|
|||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: $spacing-typography/2;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Small
|
||||
|
|
@ -268,10 +267,10 @@ small {
|
|||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacing-typography;
|
||||
padding-left: var(--spacing-typography);
|
||||
|
||||
li {
|
||||
margin-bottom: $spacing-typography/4;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,12 +289,12 @@ mark {
|
|||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: ($spacing-typography*2) 0;
|
||||
padding: $spacing-gutter;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
|
||||
footer {
|
||||
margin-top: $spacing-typography/2;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue