From 5d51b439d282c936125d17e1a08f6cfec0797fe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 16:34:40 +0100 Subject: [PATCH] ux(): trying to cleanup new form styles, probably broken it --- public/sass/components/_gf-form.scss | 78 +++++++--------------------- 1 file changed, 19 insertions(+), 59 deletions(-) diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 06b79e7979a..dbe45a2b766 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -51,6 +51,7 @@ $gf-form-label-margin: 0.2rem; display: block; font-size: $font-size-sm; margin-right: $gf-form-label-margin; + border: $input-btn-border-width solid transparent; @include border-radius($label-border-radius-sm); } @@ -103,71 +104,30 @@ $gf-form-label-margin: 0.2rem; &.gf-size-auto { width: auto; } } -.gf-form-input > select { - width: 115%; - min-width: 110%; - max-width: 115%; - height: 24px; - margin: 0; - padding: 0 20px 0 0; - border: 0; - outline: none; - background: transparent; - color: $input-color; - font-size: 16px; - font-weight: 400; - line-height: 24px; - text-indent: .01px; +select.gf-form-input { text-overflow: ''; -webkit-appearance: none; -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. appearance: none; -} -// This hides native dropdown button arrow in IE -.gf-form-input > select::-ms-expand { - display: none; -} + &:after { + position: absolute; + top: 50%; + right: 10px; + height: 12px; + margin-top: -6px; + padding: 0; + background-color: transparent; + color: $input-color; + font: normal normal normal 14px/1 FontAwesome; + text-align: center; + content: '\f0d7'; + pointer-events: none; + } -.gf-form-input:after > select:after { - position: absolute; - top: 50%; - right: 10px; - height: 12px; - margin-top: -6px; - padding: 0; - background-color: transparent; - color: $input-color; - font: normal normal normal 14px/1 FontAwesome; - text-align: center; - content: '\f0d7'; - pointer-events: none; -} - -.gf-form-input > select:focus { - outline: none; -} - -// This hides focus around selected option in FF -.gf-form-input > select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #adafae; -} - -// .gf-form-input { -// margin: 0; -// background: $input-color; -// } - -.gf-form-select-interior { - margin: 0; - background-color: $input-bg; - border: 1px solid $input-bg; -} - -.gf-form-input > select { - height: 34px; - line-height: 34px; + &:-moz-focusring { + color: transparent; + } } .gf-form-btn {