diff options
Diffstat (limited to 'src/assets/styles/bmc/_ibs/_forms.scss')
-rw-r--r-- | src/assets/styles/bmc/_ibs/_forms.scss | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_ibs/_forms.scss b/src/assets/styles/bmc/_ibs/_forms.scss new file mode 100644 index 00000000..914bf379 --- /dev/null +++ b/src/assets/styles/bmc/_ibs/_forms.scss @@ -0,0 +1,210 @@ +// 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-radius: $border-radius; + background-color: $white; +} + +.custom-select, +.form-control { + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &::placeholder { + color: gray("600"); + } + &.is-invalid, + &:invalid { + border: 1px solid theme-color("danger") !important; + } +} + +.form-control::-webkit-outer-spin-button, +.form-control::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.form-control[type='number'] { + -moz-appearance: textfield; +} + +.form-control { + color: $text-secondary; + border-radius: $border-radius; + border: none; + background-color: $gray-5; + font-size: 0.875rem; + &:focus { + color: $text-secondary; + } + &:hover { + background-color: $gray-5-hover; + } +} + +// Inverted form colors +.form-background { + background-color: none; + padding: 0 !important; + .custom-select, + .form-control { + color: #0c1c29e6; + border-radius: $border-radius; + border: none; + background-color: $gray-5; + &:hover { + background-color: $gray-5-hover; + } + &:focus { + border: 1px solid gray("400"); + } + &:disabled { + background-color: gray("400"); + color: gray("600"); + } + &.is-valid { + border: 1px solid gray("400"); + } + } +} + +.invalid-feedback { + font-size: $form-label-font-size; + line-height: $form-line-height; +} + +.custom-checkbox ::before { + box-shadow: none !important; + border: 2px solid $on-surface-secondary; + background-color: #fff; + border-radius: 3px; +} + +.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: $red; + border-color: $red; + cursor: pointer; + &:focus { + box-shadow: none !important; + } +} + +.custom-control { + .custom-control-input[disabled=disabled] { + & + .custom-control-label { + // Disabled label for checkbox, radio, + // switch bootstrap form components + color: gray("600")!important; + } + } +} + +.custom-switch { + width: 28px; + height: 16px; +} + +.custom-switch +.custom-control-input:focus ~ .custom-control-label::before { + box-shadow: none; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::after { + border: 1px solid $gray-20; + background: $white; +} + +.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { + border-color: $gray-20; +} + +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + background-color: rgba(4, 10, 15, 0.3); + border-color: $gray-20; +} + +.custom-switch +.custom-control-input ~ .custom-control-label::before { + border: 1px solid $gray-20; + background: rgba(4, 10, 15, 0.3); +} + +.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%; + } +} +// For invisible label of fields +.invisible { + height: 0; + margin-bottom: 0; +} +// Global style progress bar +.progress { + height: 8px; + background-color: $gray-10; +} + +.progress-bar { + background-color: $red; + border-radius: 4px; +} + +.progress_bar_percent { + color: $red; +} + +.system-control__radio label { + padding-top: 4px; +} |