Small fixes

- 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

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 {