IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 07:35:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add css-support for invalid form input elements

Browse Source
This commit is contained in:
Johannes Schill 2019-02-12 16:14:48 +01:00
parent e5759fa0ed
commit b1aa84804b
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -203,7 +203,7 @@ $input-border: 1px solid $input-border-color;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
@include form-control-focus(false);
// Placeholder
&::placeholder {
@ -251,6 +251,10 @@ $input-border: 1px solid $input-border-color;
&--plaintext {
white-space: unset;
}
&--invalid {
@include form-control-focus(true);
}
}
.gf-form-hint {

13
public/sass/mixins/_forms.scss
View File

@ -30,12 +30,19 @@
}
}
@mixin form-control-focus() {
@mixin form-control-focus($error) {
&:focus {
border-color: $input-border-focus;
outline: none;
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 5px $input-box-shadow-focus;
border-color: $input-border-focus;
outline: none;
@if $error == true {
border-color: $brand-warning;
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 5px $brand-warning;
}
@include box-shadow($shadow);
}
}