VSinerva/freesewing
1
0
Fork 0
Code Activity

✨ Added CSS for button variants

Browse source
This commit is contained in:
Joost De Cock 2019-06-30 12:00:20 +02:00
parent f40ccc9e4a
commit b8b08e6480
3 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/css-theme/src/_elements.scss
View file

@ -5,3 +5,4 @@
@import "elements/blockquote"; @import "elements/blockquote";
@import "elements/figure"; @import "elements/figure";
@import "elements/table"; @import "elements/table";
@import "elements/button";

6
packages/css-theme/src/_variables.scss
View file

@ -14,6 +14,12 @@ $fc-accentbg-dark: $oc-teal-8;
$fc-link-light: $oc-blue-6; $fc-link-light: $oc-blue-6;
$fc-link-dark: $oc-blue-3; $fc-link-dark: $oc-blue-3;
$fc-info-light: $oc-blue-6;
$fc-success-light: $oc-green-7;
$fc-danger-light: $oc-red-6;
$fc-warning-light: $oc-yellow-6;
$fc-accent-light: $oc-grape-6;
$fc-draft-fabric-light: $oc-gray-9; $fc-draft-fabric-light: $oc-gray-9;
$fc-draft-lining-light: $oc-lime-7; $fc-draft-lining-light: $oc-lime-7;
$fc-draft-interfacing-light: $oc-red-7; $fc-draft-interfacing-light: $oc-red-7;

60
packages/css-theme/src/elements/_button.scss Normal file
View file

@ -0,0 +1,60 @@
.theme-wrapper.dark,
.theme-wrapper.light {
.MuiButton-containedPrimary.info {
background-color: $fc-info-light;
}
.MuiButton-containedPrimary.info:hover {
background-color: darken($fc-info-light, 10%);
}
.MuiButton-containedPrimary.success {
background-color: $fc-success-light;
}
.MuiButton-containedPrimary.success:hover {
background-color: darken($fc-success-light, 10%);
}
.MuiButton-containedPrimary.warning {
background-color: $fc-warning-light;
}
.MuiButton-containedPrimary.warning:hover {
background-color: darken($fc-warning-light, 10%);
}
.MuiButton-containedPrimary.danger {
background-color: $fc-danger-light;
}
.MuiButton-containedPrimary.danger:hover {
background-color: darken($fc-danger-light, 10%);
}
.MuiButton-containedPrimary.accent {
background-color: $fc-accent-light;
}
.MuiButton-containedPrimary.accent:hover {
background-color: darken($fc-accent-light, 10%);
}
}
.theme-wrapper.light {
.MuiButton-containedPrimary {
background-color: $fc-bg-dark;
}
.MuiButton-containedPrimary:hover {
background-color: #000;
}
.MuiButton-contained.Mui-disabled {
background-color: rgba(0, 0, 0, 0.12);
}
}
.theme-wrapper.dark {
.MuiButton-containedPrimary {
background-color: $fc-bg-light;
}
.MuiButton-containedPrimary:hover {
background-color: darken($fc-bg-light, 10%);
}
.MuiButton-contained.Mui-disabled {
background-color: rgba(2550, 255, 255, 0.12);
}
}