[design] improve form input grid and range styles

This commit is contained in:
zombieFox
2019-11-08 06:56:26 +00:00
parent 319def5c8a
commit 5c95e0abac
2 changed files with 7 additions and 3 deletions

View File

@ -692,6 +692,11 @@ input[type="range"]::-moz-range-progress {
background-color: rgb(var(--form-range-progress-background));
height: calc(var(--layout-line-width) * 2);
border-radius: var(--theme-radius);
transition: background-color var(--layout-timing-extra-fast);
}
input[type="range"]:active::-moz-range-progress {
background-color: rgb(var(--form-range-progress-background-active));
}
input[type="range"]:disabled::-moz-range-progress {
@ -946,7 +951,7 @@ input[type="range"]:disabled::-moz-range-progress {
.form-grid {
background-color: rgb(var(--form-grid-background));
padding: calc(var(--layout-line-width) * 4);
padding: 0.75em;
display: inline-grid;
overflow: hidden;
transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);

View File

@ -130,8 +130,7 @@
--form-range-track-background-focus-hover: var(--theme-gray-04);
--form-range-track-background-active: var(--theme-gray-03);
--form-range-track-background-disabled: var(--theme-gray-02);
--form-range-progress-background: var(--theme-accent);
--form-range-progress-background-focus-hover: var(--theme-accent);
--form-range-progress-background: var(--theme-gray-14);
--form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-gray-02);
--form-grid-input-background: var(--theme-gray-03);