button, .button{
display: inline-block; padding: 6pt 20pt; line-height: $line-height; border: 1px solid $primary; color: $primary; font-weight: $normal; transition: 0.7s; white-space: nowrap; cursor: pointer; background-color: transparent; border-radius: $radius; margin-bottom: 1.3em; transition: 0.7s; text-align: center; text-decoration: none; &:hover,&:focus{ outline: 0; } @include desktop{ &:hover{ border-color: $primary-dark; color: $primary-dark; } }
}
.button__primary{
background-color: $primary; border-color: $primary; color: #fff; @include desktop{ &:hover{ background-color: $primary-dark; border-color: $primary-dark; color: #fff; } }
}
.button__accent{
background-color: $accent; border-color: $accent; color: #fff; @include desktop{ &:hover{ background-color: darken($accent,4%); border-color: darken($accent,4%); color: #fff; } }
}
.button__delete{
background-color: $error; border-color: $error; color: #fff; @include desktop{ &:hover{ background-color: darken($error,4%); border-color: darken($error,4%); color: #fff; } }
}
.button:disabled{
opacity: 0.25; cursor: default; pointer-events:none;
}
// Utility classes .button–fixed{
width: 160px;
}
.button–fixed2{
width: 220px;
}