root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extracting select list styles to be re-used

Browse Source
This commit is contained in:
Jeff Avallone 2018-06-01 17:19:27 -04:00
parent 9ff0a51006
commit 12436fbd9e
2 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Form/style.css
View File

@ -63,28 +63,5 @@
} }
.select { .select {
position: relative; @apply --fancy-select;
vertical-align: bottom;
display: inline-block;
height: var(--select-height);
width: var(--select-width);
background: var(--control-gradient);
color: var(--color-black);
overflow: hidden;
& select {
background: transparent;
border: 0 none;
font-size: inherit;
height: var(--select-height);
width: calc(var(--select-width) + 2rem);
}
& svg {
position: absolute;
top: calc((var(--select-height) - 24px) / 2);
right: 0;
pointer-events: none;
border-left: 0.1rem solid color(var(--color-black) alpha(0.2));
}
} }

32
src/globals.css
View File

@ -78,4 +78,36 @@
visibility: hidden; visibility: hidden;
} }
} }
--control-gradient: var(--color-green) var(--gradient-green);
--select-height: 2.8rem;
--select-width: 12rem;
--fancy-select {
margin-left: 1ex;
position: relative;
vertical-align: bottom;
display: inline-block;
height: var(--select-height);
width: var(--select-width);
background: var(--control-gradient);
color: var(--color-black);
overflow: hidden;
& select {
background: transparent;
border: 0 none;
font-size: inherit;
height: var(--select-height);
width: calc(var(--select-width) + 2rem);
}
& svg {
position: absolute;
top: calc((var(--select-height) - 24px) / 2);
right: 0;
pointer-events: none;
border-left: 0.1rem solid color(var(--color-black) alpha(0.2));
background: var(--control-gradient);
}
}
} }