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

Small fixes

Browse source 
- Lighter <mark>
- Better <hgroup>
- Edit hover for [type="range"]
- button.outline border-width dynamization
- Fix font-family for headings
This commit is contained in:
Lucas 2020-09-30 17:20:28 +07:00
parent 2c9d79f361
commit c89db4ec2d
15 changed files with 113 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

31
css/pico.classless.css
View file

@ -25,7 +25,7 @@
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--block-round: .25rem ;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
@ -98,7 +98,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
@ -155,7 +155,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -212,7 +212,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -473,6 +473,7 @@ h5,
h6 {
margin-top: 0;
margin-bottom: var(--spacing-typography);
font-family: var(--titles-font);
font-weight: var(--titles-weight);
}
@ -599,6 +600,7 @@ hgroup * {
hgroup > *:last-child {
color: var(--muted-text);
font-family: unset;
font-size: 1.125rem;
font-weight: unset;
}
@ -827,6 +829,21 @@ a[role="button"][disabled] {
pointer-events: none;
}
input[type="reset"] {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
}
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
input[type="reset"]:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
/**
* Form elements
*/
@ -1319,17 +1336,17 @@ label > textarea {
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:focus {

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

File diff suppressed because one or more lines are too long

22
css/pico.css
View file

@ -25,7 +25,7 @@
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--block-round: .25rem ;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
@ -98,7 +98,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
@ -155,7 +155,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -212,7 +212,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -555,6 +555,7 @@ h5,
h6 {
margin-top: 0;
margin-bottom: var(--spacing-typography);
font-family: var(--titles-font);
font-weight: var(--titles-weight);
}
@ -681,6 +682,7 @@ hgroup * {
hgroup > *:last-child {
color: var(--muted-text);
font-family: unset;
font-size: 1.125rem;
font-weight: unset;
}
@ -987,7 +989,7 @@ input[type="submit"].outline:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
border: 1px solid var(--primary-hover-border);
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
@ -1010,7 +1012,7 @@ input[type="reset"].outline:focus,
a[role="button"].outline.secondary:hover,
a[role="button"].outline.secondary:active,
a[role="button"].outline.secondary:focus {
border: 1px solid var(--secondary-hover-border);
border: var(--button-border-width) solid var(--secondary-hover-border);
color: var(--secondary-hover);
}
@ -1033,7 +1035,7 @@ input[type="reset"].outline.contrast:focus,
a[role="button"].outline.contrast:hover,
a[role="button"].outline.contrast:active,
a[role="button"].outline.contrast:focus {
border: 1px solid var(--contrast-hover-border);
border: var(--button-border-width) solid var(--contrast-hover-border);
color: var(--contrast-hover);
}
@ -1552,17 +1554,17 @@ label > textarea {
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:focus {

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

@ -25,7 +25,7 @@
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--block-round: .25rem ;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
@ -98,7 +98,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
@ -155,7 +155,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -212,7 +212,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -469,6 +469,7 @@ h5,
h6 {
margin-top: 0;
margin-bottom: var(--spacing-typography);
font-family: var(--titles-font);
font-weight: var(--titles-weight);
}
@ -595,6 +596,7 @@ hgroup * {
hgroup > *:last-child {
color: var(--muted-text);
font-family: unset;
font-size: 1.125rem;
font-weight: unset;
}
@ -823,6 +825,21 @@ a[role="button"][disabled] {
pointer-events: none;
}
input[type="reset"] {
border: var(--button-border-width) solid var(--secondary-border);
background-color: var(--secondary);
color: var(--secondary-inverse);
}
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
border-color: var(--secondary-hover-border);
background-color: var(--secondary-hover);
}
input[type="reset"]:focus {
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
}
/**
* Form elements
*/
@ -1315,17 +1332,17 @@ label > textarea {
[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:active::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
[type="range"]:focus {

2
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

10
css/pico.slim.css
View file

@ -28,7 +28,7 @@
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--block-round: .25rem ;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
@ -101,7 +101,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
@ -158,7 +158,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -215,7 +215,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -493,6 +493,7 @@ h5,
h6 {
margin-top: 0;
margin-bottom: var(--spacing-typography);
font-family: var(--titles-font);
font-weight: var(--titles-weight);
}
@ -619,6 +620,7 @@ hgroup * {
hgroup > *:last-child {
color: var(--muted-text);
font-family: unset;
font-size: 1.125rem;
font-weight: unset;
}

8
css/themes/default.css
View file

@ -21,7 +21,7 @@
--h3-size: 1.5rem;
--h4-size: 1.25rem;
--h5-size: 1.125rem;
--block-round: .25rem ;
--block-round: .25rem;
--form-element-border-width: 1px;
--form-element-outline-width: 3px;
--checkbox-radio-border-width: 2px;
@ -94,7 +94,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #288a6a;
--invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.33);
--mark-text: #2c3d49;
--muted-text: #7e8d98;
--muted-background: #edf0f3;
@ -151,7 +151,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;
@ -208,7 +208,7 @@
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--valid: #1f7a5c;
--invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark: rgba(255, 223, 128, 0.1875);
--mark-text: #FFF;
--muted-text: #73828c;
--muted-background: #23333e;

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

32
scss/content/_button-styles.scss
View file

@ -64,7 +64,7 @@
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover-border);
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
}
@ -82,7 +82,7 @@
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover-border);
border: var(--button-border-width)solid var(--secondary-hover-border);
color: var(--secondary-hover);
}
}
@ -100,8 +100,34 @@
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover-border);
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);
}
}
}
}

6
scss/content/_form-alt-input-types.scss
View file

@ -226,17 +226,17 @@
// Slider Thumb
&::-webkit-slider-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
&::-moz-range-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
&::-ms-thumb {
transform: scale(1.25);
background-color: var(--primary-hover);
background-color: var(--primary);
}
}

2
scss/content/_typography.scss
View file

@ -141,6 +141,7 @@ h5,
h6 {
margin-top: 0;
margin-bottom: var(--spacing-typography);
font-family: var(--titles-font);
font-weight: var(--titles-weight);
}
@ -226,6 +227,7 @@ hgroup {
> *:last-child {
color: var(--muted-text);
font-family: unset;
font-size: 1.125rem;
font-weight: unset;
}

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

@ -55,7 +55,7 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark: #{rgba($amber-200, .1875)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};
@ -138,7 +138,7 @@
// Utilities states
--valid: #{$green-700};
--invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark: #{rgba($amber-200, .1875)};
--mark-text: #{$white};
--muted-text: #{$grey-500};
--muted-background: #{mix($grey-800, $grey-900)};

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

@ -49,13 +49,13 @@
--input-inverse: var(--primary-inverse);
// Button
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);;
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
// Utilities states
--valid: #{$green-600};
--invalid: #{$red-700};
--mark: #{rgba($amber-200, .5)};
--mark: #{rgba($amber-200, .33)};
--mark-text: #{$grey-800};
--muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50};

2
scss/themes/default/_styles.scss
View file

@ -40,7 +40,7 @@
// ––––––––––––––––––––
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
--block-round: .25rem ;
--block-round: .25rem;
// Form elements
--form-element-border-width: 1px;