@import “../variables/derived-variables.sass” @import “../variables/initial-variables.sass”
$button-width: 80px !default $button-height: 40px !default $button-width-small: $button-width - 20px !default $button-height-small: $button-height - 10px !default $button-width-large: $button-width + 20px !default $button-height-large: $button-height + 20px !default $button-radius: 3px !default $button-padding: 5px !default $button-margin: 2px !default $bg-color: rgba(0, 0, 0, 0) !default
.buttons
display: flex !important flex-direction: row !important flex-wrap: wrap !important justify-content: left !important align-items: center !important
.btn-small
display: flex align-items: center !important justify-content: center !important min-width: $button-width-small !important min-height: $button-height-small !important border-radius: $button-radius !important padding: $button-padding !important
.btn-large
display: flex align-items: center !important justify-content: center !important min-width: $button-width-large !important min-height: $button-height-large !important border-radius: $button-radius !important padding: $button-padding !important
.button
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: none !important padding: $button-padding !important margin: $button-margin !important color: $black-flat background-color: $white -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.button.s-default:hover
background-color: darken($default,5%) !important
.button.s-primary:hover
background-color: darken($primary,5%) !important
.button.s-danger:hover
background-color: darken($danger,5%) !important
.button.s-warning:hover
background-color: darken($warning,5%) !important
.button.s-success:hover
background-color: darken($success,5%) !important
.button.s-info:hover
background-color: darken($info,5%) !important
.button.s-purple:hover
background-color: darken($purple, 5%) !important
.outlined-button
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $default !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $default !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button:hover
background-color: $default !important color: $white !important
.outlined-button-white
min-width: $button-width max-width: $button-width + 50px !important min-height: $button-height border-radius: $button-radius !important border: 1px solid $white !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $white !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-white:hover
background-color: $white !important color: #21D4FD !important
.outlined-button-primary
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $primary !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $primary !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-primary:hover
background-color: $primary !important color: $white !important
.outlined-button-danger
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $danger !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $danger !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-danger:hover
background-color: $danger !important color: $white !important
.outlined-button-warning
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $warning !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $warning !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-warning:hover
background-color: $warning !important color: $white !important
.outlined-button-success
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $success !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $success !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-success:hover
background-color: $success !important color: $white !important
.outlined-button-info
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $info !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $info !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-info:hover
background-color: $info !important color: $white !important
.outlined-button-purple
display: flex align-items: center !important justify-content: center !important min-width: $button-width min-height: $button-height border-radius: $button-radius !important border: 1px solid $purple !important padding: $button-padding !important margin: $button-margin !important background-color: $bg-color !important color: $purple !important -webkit-transition: 0.3s ease-in-out !important transition: 0.3s ease-in-out !important
.outlined-button-purple:hover
background-color: $purple !important color: $white !important