diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss index ecf5718bafa4876faf97f2515337d7ff60bee656..8a18c4aa6020f37255be86ae286d2daa5b109e17 100644 --- a/themes/finc/scss/_customVariables.scss +++ b/themes/finc/scss/_customVariables.scss @@ -465,8 +465,8 @@ $label-edit-favorites-list-padding-left: 0 !default; $input-border-focus: $brand-primary !default; // Inputs with labels -- top margin for better alignment $input-top-margin: .2rem !default; -// Invalid input AND textarea elements -$input-textarea-invalid-margin-right: 2px !default; +// Input AND textarea elements +$input-textarea-margin-right: 2px !default; // Invalid input highlighting on focus $input-invalid-focus-border-color: $brand-danger-transparent !default; $input-invalid-focus-box-shadow: 0 0 2px 1px $brand-danger-transparent !default; diff --git a/themes/finc/scss/components/_forms.scss b/themes/finc/scss/components/_forms.scss index 4a12349cebc9fe6cf654cbc74daa3d5274f0348f..50021e7047f40b815017853e4c57021fe3482857 100644 --- a/themes/finc/scss/components/_forms.scss +++ b/themes/finc/scss/components/_forms.scss @@ -139,6 +139,9 @@ label { // ***************************************************************** input { + // Same variable used for textarea as well! + margin-right: $input-textarea-margin-right; + // Set max-width to make sure boxes don't bleed over // the edge on XS (e.g. acquisitionpda, source_id:3) - same // variable used on textarea and select @@ -190,8 +193,6 @@ input { // show red border only when submitted empty or when in focus &:invalid { box-shadow: inherit; - // Same variable used for textarea as well! - margin-right: $input-textarea-invalid-margin-right; } &:focus { @@ -280,17 +281,15 @@ select { // ***************************************************************** textarea { + // Same variable used for input as well! + margin-right: $input-textarea-margin-right; + // Set max-width to make sure boxes don't bleed over // the edge on XS (e.g. acquisitionpda, source_id:3) - same // variable used on input and select @media (max-width: $screen-xs-max) { max-width: $input-select-textarea-xs-max-width; } - - &:invalid { - // Same variable used for input as well! - margin-right: $input-textarea-invalid-margin-right; - } }