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

Small CSS improvements

Browse source 
- Helper (<small>) for <select> and <textarea>
- Better roll for a.contrast
This commit is contained in:
Lucas 2020-08-08 10:05:47 +07:00
parent 195e0c6b6b
commit 6cc98ad873
12 changed files with 43 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
css/pico.classless.css
View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -673,7 +675,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
css/pico.css
View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -437,7 +439,9 @@ a.contrast:not([role="button"]) {
}
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
color: var(--contrast-hover);
text-decoration: none;
}
a.contrast:not([role="button"]):focus {
@ -779,7 +783,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

6
css/pico.fluid.classless.css
View file

@ -27,6 +27,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -73,6 +74,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -669,7 +671,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
css/pico.slim.css
View file

@ -30,6 +30,7 @@
--contrast-hover: #0d1419;
--contrast-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-border-h: #ffdf80;
--contrast-inverse: #FFF;
--input-background: #FFF;
--input-border: #c8d1d8;
@ -76,6 +77,7 @@
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-border-h: rgba(255, 223, 128, 0.5);
--contrast-inverse: #10181e;
--input-background: #10181e;
--input-border: #374956;
@ -375,7 +377,9 @@ a.contrast:not([role="button"]) {
}
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
color: var(--contrast-hover);
text-decoration: none;
}
a.contrast:not([role="button"]):focus {
@ -691,7 +695,9 @@ form small {
color: var(--muted-text);
}
input + small {
input + small,
select + small,
textarea + small {
margin-top: -1rem;
margin-bottom: 1.5rem;
}

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

10
scss/content/_form.scss
View file

@ -225,9 +225,13 @@ form small {
color: var(--muted-text);
}
input + small {
margin-top: -$spacing-typography/1.5;
margin-bottom: $spacing-typography;
input,
select,
textarea {
+ small {
margin-top: -$spacing-typography/1.5;
margin-bottom: $spacing-typography;
}
}
// Styles for Input inside a label

2
scss/content/_typography.scss
View file

@ -115,7 +115,9 @@ a {
&:hover,
&:active,
&:focus {
box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
color: var(--contrast-hover);
text-decoration: none;
}
&:focus {

3
scss/themes/default/_dark.scss
View file

@ -31,7 +31,8 @@
--contrast: #{$grey-100};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-border: #{rgba($amber-200, .33)}; // For links
--contrast-border: #{rgba($amber-200, .33)}; // Links underline for
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline
--contrast-inverse: #{darken($grey-900, 6%)};
// Form elements

3
scss/themes/default/_light.scss
View file

@ -31,7 +31,8 @@
--contrast: #{$grey-800};
--contrast-hover: #{mix($grey-900, $black)};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-border: #{rgba($amber-200, .5)}; // For links
--contrast-border: #{rgba($amber-200, .5)}; // Links underline
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline
--contrast-inverse: #{$white};
// Form elements