Skip to content

Instantly share code, notes, and snippets.

@davious
Created February 14, 2022 20:09
Show Gist options
  • Save davious/297a702577c8ed17641b846bdbdad163 to your computer and use it in GitHub Desktop.
Save davious/297a702577c8ed17641b846bdbdad163 to your computer and use it in GitHub Desktop.
.mat-button {
font-weight: 600;
&.with-border {
border-width: 1px;
border-style: solid;
&.mat-primary {
@include dark-border-color;
}
}
&.auto {
line-height: 2;
min-width: auto;
}
&.alt,
&.mat-alt {
@include accent-color-and-bg;
}
&.alt-cancel,
&.mat-alt-cancel {
color: white;
background-color: $alt-cancel-button-bg;
}
&.mat-inverse,
&.mat-inverse-cancel {
color: $dark-text;
background-color: white;
border: 1px solid $underline-gray;
}
&.mat-inverse:not([disabled]):hover {
color: white;
@include dark-border-color;
@include dark-bg;
}
&.mat-inverse-cancel:hover {
color: white;
background-color: $underline-gray;
}
&.full {
width: 100%;
}
&.large {
@extend %mat-button-large;
}
&.align-top {
vertical-align: text-top;
}
& + .mat-button {
margin-left: 12px;
}
& + .mat-button.auto {
margin-left: 6px;
}
}
.mat-menu-content > .mat-button + .mat-button {
margin-left: 0px;
}
.mat-button.mat-primary,
.mat-icon-button.mat-primary,
.mat-stroked-button.mat-primary {
color: white;
@include dark-bg;
&[disabled] {
opacity: 25%;
color: white;
cursor: not-allowed;
}
}
.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
color: white;
background-color: $dark-button-bg;
}
a.mat-button {
&:hover {
text-decoration: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment