From dd539094ea6722489c5ba940523691edc556b6a3 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 22 Oct 2018 20:36:07 +0200
Subject: [PATCH] Custom select validation padding fix and additional custom
select feedback icon variables
---
scss/_variables.scss | 4 ++++
scss/mixins/_forms.scss | 10 +++-------
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 26b2e6953c..5be11ae0bc 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -545,6 +545,10 @@ $custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default;
+
$custom-select-border-width: $input-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b2f2454bb7..b8eb59d836 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -97,13 +97,9 @@
border-color: $color;
@if $enable-validation-icons {
- padding-right: $input-height-inner;
-
- @if $state == "valid" {
- background: $custom-select-background, $form-feedback-icon-valid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
- } @else {
- background: $custom-select-background, $form-feedback-icon-invalid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
- }
+ $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
+ padding-right: $custom-select-feedback-icon-padding-right;
+ background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
}
&:focus {
--
GitLab