@import './colors.scss'; @import './fonts.scss'; @mixin button-theme($themeName, $backgroundColor) { .#{$themeName} { composes: button; background-color: $backgroundColor; &:hover { background-color: lighter($backgroundColor); } &:active { background-color: darker($backgroundColor); } } } .button { display: inline-block; box-sizing: border-box; height: 50px; padding: 0 15px; border: none; font-family: $font-family-title; color: $defaultButtonTextColor; font-size: 18px; line-height: 50px; text-decoration: none; cursor: pointer; transition: 0.25s; &:hover { color: $defaultButtonTextColor; } &:focus { outline: none; } } .smallButton { composes: button; height: 30px; padding: 0 7px; font-size: 14px; line-height: 30px; } .white { composes: button; background-color: #fff; color: #444; &:hover { color: #262626; background-color: $whiteButtonLight; } &:active { background-color: $whiteButtonDark; } } @include button-theme('black', $black); @include button-theme('blue', $blue); @include button-theme('green', $green); @include button-theme('orange', $orange); @include button-theme('darkBlue', $dark_blue); @include button-theme('lightViolet', $light_violet); @include button-theme('violet', $violet); .block { display: block; width: 100%; }