From a2f676d31741f51d037fa4031855f63e1c43f2b3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 2 Jan 2020 23:48:52 +0200 Subject: [PATCH] Improved ColorInput to showcase transparent color, improved global input styles a bit --- src/App.scss | 17 +++++-- src/components/color_input/color_input.vue | 50 ++++++++++++------- .../style_switcher/style_switcher.scss | 16 ++---- 3 files changed, 48 insertions(+), 35 deletions(-) diff --git a/src/App.scss b/src/App.scss index b6d4943a..7c9c91af 100644 --- a/src/App.scss +++ b/src/App.scss @@ -122,12 +122,15 @@ button { } } -label.select { - padding: 0; +input, textarea, .select, .input { -} + &.unstyled { + border-radius: 0; + background: none; + box-shadow: none; + height: unset; + } -input, textarea, .select { border: none; border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); @@ -141,13 +144,17 @@ input, textarea, .select { font-family: var(--inputFont, sans-serif); font-size: 14px; margin: 0; - padding: 8px .5em; box-sizing: border-box; display: inline-block; position: relative; height: 28px; line-height: 16px; hyphens: none; + padding: 8px .5em; + + &.select { + padding: 0; + } &:disabled, &[disabled=disabled] { cursor: not-allowed; diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index aa289288..7fe04433 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -1,6 +1,6 @@ - +