IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-13 17:15:40 -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. // Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus(); @include form-control-focus(false);
// Placeholder // Placeholder
&::placeholder { &::placeholder {
@ -251,6 +251,10 @@ $input-border: 1px solid $input-border-color;
&--plaintext { &--plaintext {
white-space: unset; white-space: unset;
} }
&--invalid {
@include form-control-focus(true);
}
} }
.gf-form-hint { .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 { &:focus {
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 5px $input-box-shadow-focus;
border-color: $input-border-focus; border-color: $input-border-focus;
outline: none; outline: none;
$shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 5px $input-box-shadow-focus; @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); @include box-shadow($shadow);
} }
} }