IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): trying to cleanup new form styles, probably broken it

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-20 16:34:40 +01:00
parent 9ae050f0e5
commit 5d51b439d2
1 changed files with 19 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
public/sass/components/_gf-form.scss
View File

@ -51,6 +51,7 @@ $gf-form-label-margin: 0.2rem;
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-label-margin; margin-right: $gf-form-label-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
} }
@ -103,71 +104,30 @@ $gf-form-label-margin: 0.2rem;
&.gf-size-auto { width: auto; } &.gf-size-auto { width: auto; }
} }
.gf-form-input > select { select.gf-form-input {
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;
text-overflow: ''; text-overflow: '';
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
appearance: none; appearance: none;
}
// This hides native dropdown button arrow in IE &:after {
.gf-form-input > select::-ms-expand { position: absolute;
display: none; 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 { &:-moz-focusring {
position: absolute; color: transparent;
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;
} }
.gf-form-btn { .gf-form-btn {