diff --git a/public/less/dropdown.less b/public/less/dropdown.less new file mode 100644 index 00000000000..40d8b53fa86 --- /dev/null +++ b/public/less/dropdown.less @@ -0,0 +1,90 @@ +// ========================================================================== +// DROPDOWN +// +// dropdown.scss +// ========================================================================== + + + +.select-input { + display: inline-block; + position: relative; + width: auto; + max-width: 100%; + margin: 0 5px; + padding: 0 12px 0 6px; + border: @grafanaPanelBorder; + background-color: @grafanaSelectBackground; + overflow: hidden; + vertical-align: top; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.select-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: @linkColor; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-indent: .01px; + 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 +.select-input > select::-ms-expand { + display: none; +} + +.select-input:after { + position: absolute; + top: 50%; + right: 10px; + height: 12px; + margin-top: -6px; + padding: 0; + background-color: transparent; + color: @linkColor; + font: normal normal normal 14px/1 FontAwesome; + text-align: center; + content: '\f0d7'; + pointer-events: none; +} + +.select-input > select:focus { + outline: none; +} + +// This hides focus around selected option in FF +.select-input > select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #adafae; +} + +.rt-form .select-input { + margin: 0; + background: @grafanaSelectBackground; +} + +.rt-form .select-interior { + margin: 0; + background-color: @inputBackground; + border: 1px solid @inputBorder; +} + +.rt-form .select-input > select { + height: 34px; + line-height: 34px; +} \ No newline at end of file