noble/resources/sass/mixins/_buttons.scss

57 lines
1.0 KiB
SCSS
Raw Normal View History

2023-05-16 15:54:23 +03:00
@mixin social-button($color) {
background: $color;
color: $white;
&:hover,
&:focus {
background: darken($color, 10%);
color: $white;
}
&.btn-social-icon-text {
padding: 0 1.5rem 0 0;
background: lighten($color, 10%);
i {
background: $color;
padding: .75rem;
display: inline-block;
margin-right: 1.5rem;
}
}
}
@mixin social-outline-button($color) {
border: 1px solid $color;
color: $color;
&:hover {
background: $color;
color: $white;
}
}
@mixin button-inverse-variant($color, $color-hover: $white) {
background-color: rgba($color, 0.2);
background-image: none;
border-color: rgba($color, 0);
&:not(.btn-inverse-light) {
color: $color;
}
&:hover,
&.active,
&:active,
.show > &.dropdown-toggle {
background-color: rgba($color, 0.3);
border-color: rgba($color, 0);
}
&.focus,
&:focus {
box-shadow: 0 0 0 3px rgba($color, .5);
}
&.disabled,
&:disabled {
color: $color;
background-color: transparent;
}
}