diff options
Diffstat (limited to 'src/assets/styles/bmc/_sila/_forms.scss')
-rw-r--r-- | src/assets/styles/bmc/_sila/_forms.scss | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss new file mode 100644 index 00000000..428a40c2 --- /dev/null +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -0,0 +1,132 @@ +// Helper text +.form-text { + font-size: $form-label-font-size; + line-height: $form-line-height; + margin-top: -$spacer / 4; + margin-bottom: $spacer / 2; + color: gray("700")!important; +} + +// Legend label +.col-form-label { + color: gray("800"); + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.form-group { + margin-bottom: $spacer * 2; +} + +.custom-select, +.form-control, +.input-group-text { + border-color: gray("500") !important; + background-color: gray("100"); +} + +.custom-select, +.form-control { + &:active { + border: 1px solid $primary!important; + } + &:focus { + color: theme-color("dark"); + background-color: gray("100"); + box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important; + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &::placeholder { + color: gray("600"); + } + &.is-invalid, + &:invalid { + border: 1px solid theme-color("danger") !important; + } +} + +.custom-select, +.custom-control-label, +.form-control { + color: theme-color("dark") !important; + font-size: 1rem; +} + +// Inverted form colors +.form-background { + background-color: gray("100"); + .custom-select, + .form-control { + background-color: $white; + &:focus { + background-color: $white; + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + } +} + +.invalid-feedback { + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after, +.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, +.custom-control-input:checked ~ .custom-control-label::before { + background-color: $black; + border-color: $black; + cursor: pointer; +} + +.custom-control { + .custom-control-input[disabled=disabled] { + & + .custom-control-label { + // Disabled label for checkbox, radio, + // switch bootstrap form components + color: gray("600")!important; + } + } +} + +.custom-control-input:focus ~ .custom-control-label::before{ + box-shadow: 0 0 0 2px theme-color("primary"); +} + +.custom-control-label::after { + cursor: pointer; +} + +.b-form-tag-remove { + // X button to remove tag + font-weight: normal; +} + +.b-form-tags-button { + // Add button inside input field + white-space: nowrap; + margin-right: -$spacer; + &.btn-link-primary { + color: theme-color("primary"); + fill: currentColor; + } +} + +// Form validation icon + .form-control.is-invalid, + .form-control.is-valid { + background-position: right 1rem bottom 50%; + } + +// Form validation icon with datepicker or password toggle icon +.form-control-with-button { + &.is-invalid, + &.is-valid { + background-position: right 3rem bottom 50%; + } +} |