mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -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

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;