From 990924d19a56b5dace9ca596bb55fa407e698715 Mon Sep 17 00:00:00 2001 From: "Andrey V.Kosteltsev" Date: Tue, 28 Jun 2022 05:02:55 +0300 Subject: [PATCH] IBS: custom styles _buttons.scss --- src/assets/styles/bmc/custom/_buttons.scss | 132 +++++++++++++++++---- 1 file changed, 112 insertions(+), 20 deletions(-) diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 2a7b8169..b3a69757 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -10,7 +10,7 @@ margin-right: $spacer / 4; } &:disabled { - color: gray("600"); + color: $red; fill: currentColor; box-shadow: none !important; &:not(.btn-link) { @@ -21,27 +21,114 @@ } .btn-primary { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white; + background-color: $red; + border-radius: $border-radius; + border: none; + box-shadow: 1px 2px 2px -1px #4f252566 inset; + &:hover { + background-color: $red-hover; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + background-color: $red-click; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px $red-shadow; + background-color: $red; + } + &:active { + border: none; + box-shadow: none; + background-color: $red; } } .btn-secondary { - fill: currentColor; - &:focus, - &:not(:disabled):not(.disabled):active:focus { - border-color: $white; - box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white; + background-color: $dark; + color: $gray-2; + border-radius: $border-radius; + border: none; + box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 20px; + &:hover { + background-color: $dark-hover; + color: $gray-2; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px $red-shadow; + color: $gray-2; + background-color: $dark; + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $gray-2; + background-color: $dark; + } +} + +.btn-unstiled { + border: none; + &:focus { + box-shadow: none; + } + &:active { + box-shadow: none; + } +} + +.btn-popover { + border: none; + color: $red; + height: 28px; + border-radius: $border-radius; + 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; } } // Global style for all button link .btn-link { - font-weight: $headings-font-weight; - fill: theme-color("primary"); + color: $text-primary; text-decoration: none !important; &:hover { background-color: gray("200"); @@ -50,14 +137,19 @@ &:active { background-color: gray("300"); } - &:focus { - box-shadow: inset 0 0 0 2px theme-color("primary"); - color: theme-color("primary"); - outline: none; - } &: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 @@ -77,6 +169,6 @@ // Contain input buttons within input .btn-datepicker .dropdown-toggle, .input-action-btn { - padding: 7px; + padding: 6px; margin: 1px; -} \ No newline at end of file +} -- 2.35.1