diff options
Diffstat (limited to 'src/assets/styles/bmc/_sila/custom/_buttons.scss')
| -rw-r--r-- | src/assets/styles/bmc/_sila/custom/_buttons.scss | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/custom/_buttons.scss b/src/assets/styles/bmc/_sila/custom/_buttons.scss new file mode 100644 index 00000000..04a97c21 --- /dev/null +++ b/src/assets/styles/bmc/_sila/custom/_buttons.scss @@ -0,0 +1,222 @@ +.btn { + display: inline-flex; + align-items: center; + justify-content: space-around; + height: 36px; + &:disabled { + color: gray("600"); + fill: currentColor; + box-shadow: none !important; + &:not(.btn-link) { + border-color: gray("400"); + background-color: gray("400"); + } + } + &svg { + padding-right: 8px; + } +} + +.btn-md { + width: 220px; + height: 36px; +} + +.btn-lg { + width: 290px; + height: 36px; +} + +.btn-danger, +.btn-primary { + background-color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $red-brand-primary-hover; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + background-color: $red-brand-primary-click; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + background-color: $red-brand-primary; + } + &:active { + border: none; + box-shadow: none; + background-color: $red-brand-primary; + } +} + +.btn-secondary, +.modal-header button { + background-color: $faint-secondary-primary-5; + color: $red-brand-primary; + border-radius: 8px; + border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $faint-secondary-primary-5-hover; + color: $red-brand-primary; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5); + color: $red-brand-primary; + background-color: $faint-secondary-primary-5; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red-brand-primary; + background-color: $faint-secondary-primary-20; + } + // style for standard close button in modal and popups + &.close { + width: 32px; + height: 22px; + padding: 0px; + margin: 0px; + background-color: $faint-secondary-primary-1; + border: 1px solid $faint-secondary-primary-10; + border-radius: 7px; + &:hover { + background-color: $faint-secondary-primary-2; + } + } +} + +.btn-unstyled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red-brand-primary; + height: 28px; + border-radius: 8px; + font-weight: 500; + font-size: 12px; + transition: ease-in 0.2s; + &:hover { + color: $white; + transition: ease-in 0.2s; + } + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } + &.selected-unit-button { + transition: ease-in 0.2s; + color: $white; + } + &.selected-choice-button { + transition: ease-in 0.2s; + color: $white; + } +} + +.btn-toogle-popover { + justify-content: flex-start; + width: 25px; + height: 16px; + padding: 0; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-link { + color: $text-primary; + text-decoration: none !important; + &:hover { + background-color: gray("200"); + color: theme-color("primary"); + } + &:active { + background-color: gray("300"); + } + &:disabled { + box-shadow: $btn-focus-box-shadow; + } + &.collapsed { + .icon-expand { + transform: rotate(180deg); + transition: 0.3s linear; + } + .icon-expand-right { + transform: rotate(180deg); + transition: 0.3s linear; + } + } +} + +// Icon only buttons +.btn-icon-only svg { + margin-right: 0; +} + +// Datepicker, clear search and Password toggle buttons +.input-action-btn, +.btn-datepicker { + position: absolute; + right: 0; + top: 0; + z-index: $zindex-dropdown + 1; +} + +// Contain input buttons within input +.btn-datepicker .dropdown-toggle, +.input-action-btn { + padding: 7px; + margin: 1px; +} + +.collapse-button { + height: 56px; + width: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + gap: 8px; + &:active, + &:focus { + box-shadow: none; + } + &:hover { + color: $text-primary; + } +} + +.table-toolbar-button { + width: 220px; + height: 36px; +}
\ No newline at end of file |