diff options
Diffstat (limited to 'src/components/pickers/scss')
-rw-r--r-- | src/components/pickers/scss/_picker.scss | 38 | ||||
-rw-r--r-- | src/components/pickers/scss/item-picker.scss | 35 |
2 files changed, 31 insertions, 42 deletions
diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss index 625a1e3..4d8d1b1 100644 --- a/src/components/pickers/scss/_picker.scss +++ b/src/components/pickers/scss/_picker.scss @@ -65,41 +65,3 @@ color: $primaryAccentColor; } } - -@mixin picker { - .picker { - padding-bottom: 2.5rem; - margin: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - min-width: 90%; - @include label; - - .buttons { - position: absolute; - display: flex; - justify-content: space-between; - width: 13.5rem; - input { - padding: 0.2rem 0; - width: 4rem; - background-color: $inputBackgroundColor; - border: 1px solid $primaryAccentColor; - color: $fgColor; - border-radius: 4px; - transition: background-color 0.4s, color 0.4s; - } - input:hover { - background-color: $primaryAccentColor; - color: $fgColorAlt; - } - bottom: 0; - left: 0; - right: 0; - margin: auto; - } - } -} diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss index b04fb54..093b0e9 100644 --- a/src/components/pickers/scss/item-picker.scss +++ b/src/components/pickers/scss/item-picker.scss @@ -23,8 +23,13 @@ } .item-picker { - display: flex; - justify-content: space-evenly; + //display: flex; + //flex-wrap: wrap; + //justify-content: space-between; + //align-items: center; + display: grid; + grid-template-columns: auto auto auto auto; + .options { width: 27rem; flex-grow: 1; @@ -46,14 +51,36 @@ white-space: pre-line; } - input[type=number], input.narrow { + label.narrow { + max-width: 16rem; + input { width: 7rem; } + } + + input[type=number] { -moz-appearance: textfield; width: 7rem; } - input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + + input[type=button], input[type=submit] { + padding: 0.2rem 0; + width: 4rem; + height: 1.7rem; + margin-top: 0.3rem; + margin-left: auto; + background-color: $inputBackgroundColor; + border: 1px solid $primaryAccentColor; + color: $fgColor; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + + input[type=button]:hover, input[type=submit]:hover { + background-color: $primaryAccentColor; + color: $fgColorAlt; + } } |