Skip to content

Instantly share code, notes, and snippets.

@rkorebrits

rkorebrits/mat-button-colour.css

Created July 20, 2021 14:48
Show Gist options
  • Save rkorebrits/2f8a67ffe76a48a4b8e31e62e51e53c0 to your computer and use it in GitHub Desktop.
Save rkorebrits/2f8a67ffe76a48a4b8e31e62e51e53c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mat-button-colour.css
.theme-secondary .mat-button, .theme-secondary .mat-icon-button, .theme-secondary .mat-stroked-button {
color: inherit;
background: transparent;
}
.theme-secondary .mat-button.mat-primary, .theme-secondary .mat-icon-button.mat-primary, .theme-secondary .mat-stroked-button.mat-primary {
color: #0091ff;
}
.theme-secondary .mat-button.mat-accent, .theme-secondary .mat-icon-button.mat-accent, .theme-secondary .mat-stroked-button.mat-accent {
color: #ef476f;
}
.theme-secondary .mat-button.mat-warn, .theme-secondary .mat-icon-button.mat-warn, .theme-secondary .mat-stroked-button.mat-warn {
color: #d50000;
}
.theme-secondary .mat-button.mat-primary.mat-button-disabled, .theme-secondary .mat-button.mat-accent.mat-button-disabled, .theme-secondary .mat-button.mat-warn.mat-button-disabled, .theme-secondary .mat-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-icon-button.mat-primary.mat-button-disabled, .theme-secondary .mat-icon-button.mat-accent.mat-button-disabled, .theme-secondary .mat-icon-button.mat-warn.mat-button-disabled, .theme-secondary .mat-icon-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-stroked-button.mat-primary.mat-button-disabled, .theme-secondary .mat-stroked-button.mat-accent.mat-button-disabled, .theme-secondary .mat-stroked-button.mat-warn.mat-button-disabled, .theme-secondary .mat-stroked-button.mat-button-disabled.mat-button-disabled {
color: rgba(0, 0, 0, 0.26);
}
.theme-secondary .mat-button.mat-primary .mat-button-focus-overlay, .theme-secondary .mat-icon-button.mat-primary .mat-button-focus-overlay, .theme-secondary .mat-stroked-button.mat-primary .mat-button-focus-overlay {
background-color: #0091ff;
}
.theme-secondary .mat-button.mat-accent .mat-button-focus-overlay, .theme-secondary .mat-icon-button.mat-accent .mat-button-focus-overlay, .theme-secondary .mat-stroked-button.mat-accent .mat-button-focus-overlay {
background-color: #ef476f;
}
.theme-secondary .mat-button.mat-warn .mat-button-focus-overlay, .theme-secondary .mat-icon-button.mat-warn .mat-button-focus-overlay, .theme-secondary .mat-stroked-button.mat-warn .mat-button-focus-overlay {
background-color: #d50000;
}
.theme-secondary .mat-button.mat-button-disabled .mat-button-focus-overlay, .theme-secondary .mat-icon-button.mat-button-disabled .mat-button-focus-overlay, .theme-secondary .mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {
background-color: transparent;
}
.theme-secondary .mat-button .mat-ripple-element, .theme-secondary .mat-icon-button .mat-ripple-element, .theme-secondary .mat-stroked-button .mat-ripple-element {
opacity: 0.1;
background-color: currentColor;
}
.theme-secondary .mat-button-focus-overlay {
background: black;
}
.theme-secondary .mat-stroked-button:not(.mat-button-disabled) {
border-color: rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-flat-button, .theme-secondary .mat-raised-button, .theme-secondary .mat-fab, .theme-secondary .mat-mini-fab {
color: #0091ff;
background-color: white;
}
.theme-secondary .mat-flat-button.mat-primary, .theme-secondary .mat-raised-button.mat-primary, .theme-secondary .mat-fab.mat-primary, .theme-secondary .mat-mini-fab.mat-primary {
color: white;
}
.theme-secondary .mat-flat-button.mat-accent, .theme-secondary .mat-raised-button.mat-accent, .theme-secondary .mat-fab.mat-accent, .theme-secondary .mat-mini-fab.mat-accent {
color: white;
}
.theme-secondary .mat-flat-button.mat-warn, .theme-secondary .mat-raised-button.mat-warn, .theme-secondary .mat-fab.mat-warn, .theme-secondary .mat-mini-fab.mat-warn {
color: white;
}
.theme-secondary .mat-flat-button.mat-primary.mat-button-disabled, .theme-secondary .mat-flat-button.mat-accent.mat-button-disabled, .theme-secondary .mat-flat-button.mat-warn.mat-button-disabled, .theme-secondary .mat-flat-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-raised-button.mat-primary.mat-button-disabled, .theme-secondary .mat-raised-button.mat-accent.mat-button-disabled, .theme-secondary .mat-raised-button.mat-warn.mat-button-disabled, .theme-secondary .mat-raised-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-fab.mat-primary.mat-button-disabled, .theme-secondary .mat-fab.mat-accent.mat-button-disabled, .theme-secondary .mat-fab.mat-warn.mat-button-disabled, .theme-secondary .mat-fab.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-primary.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-accent.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-warn.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-button-disabled.mat-button-disabled {
color: rgba(0, 0, 0, 0.26);
}
.theme-secondary .mat-flat-button.mat-primary, .theme-secondary .mat-raised-button.mat-primary, .theme-secondary .mat-fab.mat-primary, .theme-secondary .mat-mini-fab.mat-primary {
background-color: #0091ff;
}
.theme-secondary .mat-flat-button.mat-accent, .theme-secondary .mat-raised-button.mat-accent, .theme-secondary .mat-fab.mat-accent, .theme-secondary .mat-mini-fab.mat-accent {
background-color: #ef476f;
}
.theme-secondary .mat-flat-button.mat-warn, .theme-secondary .mat-raised-button.mat-warn, .theme-secondary .mat-fab.mat-warn, .theme-secondary .mat-mini-fab.mat-warn {
background-color: #d50000;
}
.theme-secondary .mat-flat-button.mat-primary.mat-button-disabled, .theme-secondary .mat-flat-button.mat-accent.mat-button-disabled, .theme-secondary .mat-flat-button.mat-warn.mat-button-disabled, .theme-secondary .mat-flat-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-raised-button.mat-primary.mat-button-disabled, .theme-secondary .mat-raised-button.mat-accent.mat-button-disabled, .theme-secondary .mat-raised-button.mat-warn.mat-button-disabled, .theme-secondary .mat-raised-button.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-fab.mat-primary.mat-button-disabled, .theme-secondary .mat-fab.mat-accent.mat-button-disabled, .theme-secondary .mat-fab.mat-warn.mat-button-disabled, .theme-secondary .mat-fab.mat-button-disabled.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-primary.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-accent.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-warn.mat-button-disabled, .theme-secondary .mat-mini-fab.mat-button-disabled.mat-button-disabled {
background-color: rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-flat-button.mat-primary .mat-ripple-element, .theme-secondary .mat-raised-button.mat-primary .mat-ripple-element, .theme-secondary .mat-fab.mat-primary .mat-ripple-element, .theme-secondary .mat-mini-fab.mat-primary .mat-ripple-element {
background-color: rgba(255, 255, 255, 0.1);
}
.theme-secondary .mat-flat-button.mat-accent .mat-ripple-element, .theme-secondary .mat-raised-button.mat-accent .mat-ripple-element, .theme-secondary .mat-fab.mat-accent .mat-ripple-element, .theme-secondary .mat-mini-fab.mat-accent .mat-ripple-element {
background-color: rgba(255, 255, 255, 0.1);
}
.theme-secondary .mat-flat-button.mat-warn .mat-ripple-element, .theme-secondary .mat-raised-button.mat-warn .mat-ripple-element, .theme-secondary .mat-fab.mat-warn .mat-ripple-element, .theme-secondary .mat-mini-fab.mat-warn .mat-ripple-element {
background-color: rgba(255, 255, 255, 0.1);
}
.theme-secondary .mat-stroked-button:not([class*=mat-elevation-z]), .theme-secondary .mat-flat-button:not([class*=mat-elevation-z]) {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-raised-button:not([class*=mat-elevation-z]) {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-fab:not([class*=mat-elevation-z]), .theme-secondary .mat-mini-fab:not([class*=mat-elevation-z]) {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]), .theme-secondary .mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}
.theme-secondary .mat-fab.mat-button-disabled:not([class*=mat-elevation-z]), .theme-secondary .mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment