From cd0a3e7067ac58a5f07aeae5206dffc06f47128b Mon Sep 17 00:00:00 2001 From: Valentin Popov Date: Tue, 24 Apr 2018 16:26:27 +0400 Subject: Decor buttons Signed-off-by: Valentin Popov --- _scss/components/theme/_buttons.scss | 81 ++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 _scss/components/theme/_buttons.scss (limited to '_scss/components/theme') diff --git a/_scss/components/theme/_buttons.scss b/_scss/components/theme/_buttons.scss new file mode 100644 index 0000000..fd11d1b --- /dev/null +++ b/_scss/components/theme/_buttons.scss @@ -0,0 +1,81 @@ +.button, +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + background-color: $color-primary; + border: .1rem solid $color-primary; + border-radius: .4rem; + color: $color-initial; + cursor: pointer; + display: inline-block; + font-size: 1.1rem; + font-weight: 700; + height: 3.8rem; + letter-spacing: .1rem; + line-height: 3.8rem; + padding: 0 3rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &:focus, + &:hover { + background-color: $color-secondary; + border-color: $color-secondary; + color: $color-initial; + outline: 0; + } + + &[disabled] { + cursor: default; + opacity: .5; + + &:focus, + &:hover { + background-color: $color-primary; + border-color: $color-primary; + } + } + + &.button-outline { + background-color: transparent; + color: $color-primary; + + &:focus, + &:hover { + background-color: transparent; + border-color: $color-secondary; + color: $color-secondary; + } + + &[disabled] { + &:focus, + &:hover { + border-color: inherit; + color: $color-primary; + } + } + } + + &.button-clear { + background-color: transparent; + border-color: transparent; + color: $color-primary; + + &:focus, + &:hover { + background-color: transparent; + border-color: transparent; + color: $color-secondary; + } + + &[disabled] { + &:focus, + &:hover { + color: $color-primary; + } + } + } +} -- cgit v1.2.3