extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-30 03:54:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve form select arrow

Browse Source
This commit is contained in:
zombieFox 2019-11-08 09:58:46 +00:00
parent 7bcc624572
commit eb53d01597
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/form.css
View File

@ -19,16 +19,16 @@ label.disabled {
select {
background-color: rgb(var(--form-input-background));
background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label)) 50%),
linear-gradient(135deg, rgb(var(--form-label)) 50%, transparent 50%);
linear-gradient(45deg, transparent 60%, rgb(var(--form-label)) 60%),
linear-gradient(135deg, rgb(var(--form-label)) 40%, transparent 40%);
background-position:
calc(100% - calc(var(--form-arrow-size) * 5)) 50%,
calc(100% - calc(var(--form-arrow-size) * 4)) 50%;
calc(100% - calc(var(--form-arrow-size) * 4)) 50%,
calc(100% - calc(var(--form-arrow-size) * 3)) 50%;
background-size:
var(--form-arrow-size) var(--form-arrow-size),
var(--form-arrow-size) var(--form-arrow-size);
var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75),
var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75);
background-repeat: no-repeat;
padding: 0 calc(var(--form-arrow-size) * 10) 0 1em;
padding: 0 calc(var(--form-arrow-size) * 8) 0 1em;
margin: 0 0 1em 0;
color: rgb(var(--form-label));
font-size: 1em;
@ -49,8 +49,8 @@ select {
select:hover {
background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
linear-gradient(45deg, transparent 60%, rgb(var(--form-label-hover)) 60%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-label-hover));
@ -61,8 +61,8 @@ select:hover {
select:focus,
select:active {
background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%);
linear-gradient(45deg, transparent 60%, rgb(var(--form-label-focus-active)) 60%),
linear-gradient(135deg, rgb(var(--form-label-focus-active)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-border-focus-active));
border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-label-focus-active));

2
src/css/variables.css
View File

@ -148,7 +148,7 @@
--form-grid-border-checked: var(--theme-accent);
--form-grid-border-disabled: var(--theme-gray-04);
--form-dropdown-background: var(--theme-gray-02);
--form-arrow-size: 5px;
--form-arrow-size: calc(var(--theme-root-font-size) * 0.5);
--form-hover-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
--form-focus-ring: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25);
--form-focus-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);