mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

66
scss/content/_form.scss
View file

@ -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);
}
}