diff --git a/src/components/Form/style.css b/src/components/Form/style.css index 4999664..84ff957 100644 --- a/src/components/Form/style.css +++ b/src/components/Form/style.css @@ -63,28 +63,5 @@ } .select { - 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)); - } + @apply --fancy-select; } diff --git a/src/globals.css b/src/globals.css index 34a7a3a..31a544b 100644 --- a/src/globals.css +++ b/src/globals.css @@ -78,4 +78,36 @@ 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); + } + } }