extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-02 13:03:30 +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 { select {
background-color: rgb(var(--form-input-background)); background-color: rgb(var(--form-input-background));
background-image: background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label)) 50%), linear-gradient(45deg, transparent 60%, rgb(var(--form-label)) 60%),
linear-gradient(135deg, rgb(var(--form-label)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-label)) 40%, transparent 40%);
background-position: 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: background-size:
var(--form-arrow-size) var(--form-arrow-size), var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75),
var(--form-arrow-size) var(--form-arrow-size); var(--form-arrow-size) calc(var(--form-arrow-size) * 0.75);
background-repeat: no-repeat; 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; margin: 0 0 1em 0;
color: rgb(var(--form-label)); color: rgb(var(--form-label));
font-size: 1em; font-size: 1em;
@ -49,8 +49,8 @@ select {
select:hover { select:hover {
background-image: background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%), linear-gradient(45deg, transparent 60%, rgb(var(--form-label-hover)) 60%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-label-hover)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-hover)); background-color: rgb(var(--form-input-background-hover));
border-color: rgb(var(--form-input-border-hover)); border-color: rgb(var(--form-input-border-hover));
color: rgb(var(--form-label-hover)); color: rgb(var(--form-label-hover));
@ -61,8 +61,8 @@ select:hover {
select:focus, select:focus,
select:active { select:active {
background-image: background-image:
linear-gradient(45deg, transparent 50%, rgb(var(--form-label-hover)) 50%), linear-gradient(45deg, transparent 60%, rgb(var(--form-label-focus-active)) 60%),
linear-gradient(135deg, rgb(var(--form-label-hover)) 50%, transparent 50%); linear-gradient(135deg, rgb(var(--form-label-focus-active)) 40%, transparent 40%);
background-color: rgb(var(--form-input-background-border-focus-active)); background-color: rgb(var(--form-input-background-border-focus-active));
border-color: rgb(var(--form-input-border-focus-active)); border-color: rgb(var(--form-input-border-focus-active));
color: rgb(var(--form-label-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-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: 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-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);