Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added icon in form validation in #22762 #23312

Closed
wants to merge 7 commits into from
Closed

added icon in form validation in #22762 #23312

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
17d3e61
added icon in form validation
chiraggmodi Aug 11, 2017
15817d2
added icon in form validation
chiraggmodi Aug 11, 2017
0e91a31
Merge branch 'v4-dev' into issue_p_22762
chiraggmodi Aug 11, 2017
4a20170
Update _forms.scss
chiraggmodi Aug 13, 2017
4a5c085
Update _forms.scss
chiraggmodi Aug 13, 2017
56ea97a
Update _forms.scss
chiraggmodi Aug 14, 2017
76f5efa
Update _forms.scss
chiraggmodi Aug 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;

$form-text-margin-top: .25rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;

$form-check-margin-bottom: .5rem !default;
$form-check-input-gutter: 1.25rem !default;
Expand Down Expand Up @@ -495,6 +496,13 @@ $custom-file-text: (
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;

// Form validation icons

$form-icon-success-color: theme-color("success") !default;
$form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;

$form-icon-danger-color: theme-color("danger") !default;
$form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;

// Dropdowns
//
Expand Down
33 changes: 29 additions & 4 deletions scss/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,36 @@
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
@mixin form-control-focus() {
@mixin form-control-focus {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: none;

@include box-shadow($input-focus-box-shadow);
}
}


@mixin form-validation-state($state, $color) {

.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
// Validation icon
padding-right: $input-btn-padding-x * 3;
background-repeat: no-repeat;
background-position: center right calc(#{$input-height-inner} / 4);
background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);

@if $state == "valid" {
background-image: $form-icon-success;
}

@if $state == "invalid" {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe @else if...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup definitely good suggestion @vsn4ik

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vsn4ik and @XhmikosR made changes as per suggestion.

background-image: $form-icon-danger;
}

&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
Expand All @@ -40,6 +52,15 @@
}
}

// Validation icon top for textarea
textarea {
&.form-control,
&.custom-select {
&.is-#{$state} {
background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
}
}
}

// TODO: redo check markup lol crap
.form-check-input {
Expand All @@ -58,6 +79,7 @@
~ .custom-control-indicator {
background-color: rgba($color, .25);
}

~ .custom-control-description {
color: $color;
}
Expand All @@ -71,8 +93,11 @@
~ .custom-file-control {
border-color: $color;

&::before { border-color: inherit; }
&::before {
border-color: inherit;
}
}

&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
Expand Down