extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-27 10:34:03 +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 14:13:43 +00:00
parent eb53d01597
commit c08934b1a4
2 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/form.css
View File

@ -22,13 +22,13 @@ select {
linear-gradient(45deg, transparent 60%, rgb(var(--form-label)) 60%), linear-gradient(45deg, transparent 60%, rgb(var(--form-label)) 60%),
linear-gradient(135deg, rgb(var(--form-label)) 40%, transparent 40%); linear-gradient(135deg, rgb(var(--form-label)) 40%, transparent 40%);
background-position: background-position:
calc(100% - calc(var(--form-arrow-size) * 4)) 50%, calc(100% - 2em) 50%,
calc(100% - calc(var(--form-arrow-size) * 3)) 50%; calc(100% - 1.5em) 50%;
background-size: background-size:
var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75), 0.5em 0.375em,
var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75); 0.5em 0.375em;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 0 calc(var(--form-arrow-size) * 8) 0 1em; padding: 0 calc(0.5em * 8) 0 1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
color: rgb(var(--form-label)); color: rgb(var(--form-label));
font-size: 1em; font-size: 1em;

1
src/css/variables.css
View File

@ -148,7 +148,6 @@
--form-grid-border-checked: var(--theme-accent); --form-grid-border-checked: var(--theme-accent);
--form-grid-border-disabled: var(--theme-gray-04); --form-grid-border-disabled: var(--theme-gray-04);
--form-dropdown-background: var(--theme-gray-02); --form-dropdown-background: var(--theme-gray-02);
--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-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: 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); --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);