diff --git a/src/styles/global/forms/forms.scss b/src/styles/global/forms.scss similarity index 57% rename from src/styles/global/forms/forms.scss rename to src/styles/global/forms.scss index bf95dddff0..157e74c925 100644 --- a/src/styles/global/forms/forms.scss +++ b/src/styles/global/forms.scss @@ -1,24 +1,63 @@ +fieldset { + margin-bottom: ($space-default); +} + +// REQUIRED FIELDS +.indicates-required { + color: $text-color-quarternary; + + .required { + margin-right: 4px; + color: $text-color-special; + } +} + +// LABELS +label { + font-weight: normal; + + .required { + margin-left: 4px; + color: $text-color-special; + } + + &.disabled { + opacity: 0.5; + } + + > * { + vertical-align: baseline; + } +} + +.label-empty { + @media (max-width: $screen-xs-max) { + margin-top: 2.2rem; + } +} + .form-check { height: auto; padding-bottom: 0; padding-left: 0; margin-bottom: 0.5rem; -} -.has-feedback { - .form-control[type='number'] { - padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5); + label { + label { + padding-left: 0; + } } +} - .form-control[type='number'] + * .form-control-feedback { - display: none !important; - } +.form-check-label { + margin-left: 18px; +} - .form-control { - + a.form-control-feedback { - pointer-events: all; - } - } +// FORM CONTROLS +.quantity-input { + min-width: 80px; + max-width: 165px; + margin-bottom: $space-default; } input { @@ -31,15 +70,26 @@ input[type='file'] { box-shadow: none; } +input[type='radio'] ~ input[type='text'] { + margin-left: $space-default * 0.5; + + @media (max-width: $screen-xs-max) { + display: inline-block; + width: 90%; + } +} + +input[type='radio'], +input[type='checkbox'] { + margin-right: 4px; + vertical-align: middle; +} + input.form-check-input { margin-top: 0.25rem; margin-left: 0; } -.form-check-label { - margin-left: 18px; -} - .form-control-checkbox { margin-bottom: 0; font-size: $font-size-base; @@ -68,6 +118,46 @@ input.form-check-input { } } +.form-control:focus { + border-color: $color-special-tertiary; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%); +} + +.input-help { + color: $text-color-quarternary; +} + +// ERROR and SUCCESS +.has-feedback { + .form-control[type='number'] { + padding: $grid-gutter-width * 0.2 divide($grid-gutter-width, 2.5); + } + + .form-control[type='number'] + * .form-control-feedback { + display: none !important; + } + + .form-control { + + a.form-control-feedback { + pointer-events: all; + } + + padding-right: 42.5px; // TODO: dynamic field + } +} + +.has-feedback .form-control-feedback { + position: absolute; + top: 0; + right: 25px; // TODO: dynamic field + height: $input-line-height + ($input-padding-y * 2); + line-height: $input-line-height + ($input-padding-y * 2); +} + +.has-feedback select + * .form-control-feedback { + right: 35px; // TODO: dynamic field +} + .has-success { .ng-fa-icon { color: $success-color; @@ -99,67 +189,13 @@ input.form-check-input { } } - .validation-message small { - display: block; - } - .captcha > div { border: solid 1px $error-color; } } -/* purgecss ignore */ -.grecaptcha-badge { - visibility: hidden; -} - -.filter-dropdown { - position: relative; - padding-bottom: 15px; - - .dropdown-menu { - width: 100%; - padding: 0; - - a.dropdown-item { - color: $input-color; - - &.selected { - color: $text-color-corporate; - background-color: $color-inverse; - - .icon-checked { - position: absolute; - right: 15px; - padding-top: divide($space-default, 6); - } - } - } - } - - .dropdown, - .dropup { - &.show { - color: $input-focus-color; - background-color: $input-focus-bg; - border-color: $input-focus-border-color; - outline: 0; - } - - .dropdown-toggle { - color: $text-color-primary; - - &:hover { - color: $text-color-primary; - } - - &::after { - position: absolute; - top: calc(#{$input-height} / 2); - right: $space-default * 0.5; - } - } - } +.validation-message small { + display: block; } .validation-offset { @@ -174,8 +210,7 @@ input.form-check-input { } } -.label-empty { - @media (max-width: $screen-xs-max) { - margin-top: 2.2rem; - } +/* purgecss ignore */ +.grecaptcha-badge { + visibility: hidden; } diff --git a/src/styles/global/forms/fields.scss b/src/styles/global/forms/fields.scss deleted file mode 100644 index 76d32ec6eb..0000000000 --- a/src/styles/global/forms/fields.scss +++ /dev/null @@ -1,64 +0,0 @@ -fieldset { - margin-bottom: ($space-default); -} - -.form-control:focus { - border-color: $color-special-tertiary; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px lighten($color-special-tertiary, 20%); -} - -.quantity-input { - min-width: 80px; - max-width: 165px; - margin-bottom: $space-default; -} - -input[type='radio'] ~ input[type='text'] { - margin-left: $space-default * 0.5; - - @media (max-width: $screen-xs-max) { - display: inline-block; - width: 90%; - } -} - -input[type='radio'], -input[type='checkbox'] { - margin-right: 4px; - vertical-align: middle; -} - -// ERROR -.has-feedback .form-control-feedback { - position: absolute; - top: 0; - right: 25px; // TODO: dynamic field - height: $input-line-height + ($input-padding-y * 2); - line-height: $input-line-height + ($input-padding-y * 2); -} - -.has-feedback select + * .form-control-feedback { - right: 35px; // TODO: dynamic field -} - -.has-feedback .form-control { - padding-right: 42.5px; // TODO: dynamic field -} - -// REQUIRED FIELDS - -.indicates-required { - color: $text-color-quarternary; - - .required { - margin-right: 4px; - color: $text-color-special; - } -} - -label { - .required { - margin-left: 4px; - color: $text-color-special; - } -} diff --git a/src/styles/global/forms/labels.scss b/src/styles/global/forms/labels.scss deleted file mode 100644 index 925ea8cd0b..0000000000 --- a/src/styles/global/forms/labels.scss +++ /dev/null @@ -1,29 +0,0 @@ -.form-inline { - label { - padding-right: ($space-default * 0.25); - } -} - -label { - font-weight: normal; - - &.disabled { - opacity: 0.5; - } - - > * { - vertical-align: baseline; - } -} - -.input-help { - color: $text-color-quarternary; -} - -.form-check { - label { - label { - padding-left: 0; - } - } -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 7fa9c36fb6..e4a5a90e72 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -40,9 +40,7 @@ @import 'global/tables'; @import 'global/toasts'; @import 'global/swiper'; -@import 'global/forms/labels'; -@import 'global/forms/fields'; -@import 'global/forms/forms'; +@import 'global/forms'; @import 'global/lists'; @import 'global/share-tools'; @import 'global/notifications'; diff --git a/src/styles/pages/category/filter-panel.scss b/src/styles/pages/category/filter-panel.scss index 9f9b0ad9c0..509807ac9b 100644 --- a/src/styles/pages/category/filter-panel.scss +++ b/src/styles/pages/category/filter-panel.scss @@ -203,6 +203,55 @@ } } +.filter-dropdown { + position: relative; + padding-bottom: 15px; + + .dropdown-menu { + width: 100%; + padding: 0; + + a.dropdown-item { + color: $input-color; + + &.selected { + color: $text-color-corporate; + background-color: $color-inverse; + + .icon-checked { + position: absolute; + right: 15px; + padding-top: divide($space-default, 6); + } + } + } + } + + .dropdown, + .dropup { + &.show { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + .dropdown-toggle { + color: $text-color-primary; + + &:hover { + color: $text-color-primary; + } + + &::after { + position: absolute; + top: calc(#{$input-height} / 2); + right: $space-default * 0.5; + } + } + } +} + .non-parametric-panel { .filter-group { padding-bottom: 0;