wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-31 12:50:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support standard css variables, dynamically set spacing-unit

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-12 03:19:14 -03:00
parent 1a08aba969
commit ff41fabb37
14 changed files with 499 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Button/Button.css
+19 -19
View File
@@ -4,7 +4,7 @@
&:enabled,
&:disabled {
padding: 5px 20px;
border-radius: $round-corners;
border-radius: var(--round-corners);
background-color: transparent;
/* TODO: hover styles for the default button */
}
@@ -24,70 +24,70 @@
.primary:enabled,
.primary:disabled {
background-color: $palette-primary-main;
background-color: var(--palette-primary-main);
color: #fff;
}
.primary:enabled {
&:hover {
background-color: $palette-primary-light;
background-color: var(--palette-primary-light);
}
&:active {
background-color: $palette-primary-lighter;
background-color: var(--palette-primary-lighter);
}
}
.primary:enabled.invert,
.primary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-primary-main;
color: $palette-primary-main;
border: 1px solid var(--palette-primary-main);
color: var(--palette-primary-main);
}
.primary:enabled.invert {
&:hover {
border-color: $palette-primary-light;
color: $palette-primary-light;
border-color: var(--palette-primary-light);
color: var(--palette-primary-light);
}
&:active {
border-color: $palette-primary-lighter;
color: $palette-primary-lighter;
border-color: var(--palette-primary-lighter);
color: var(--palette-primary-lighter);
}
}
.secondary:enabled,
.secondary:disabled {
background-color: $palette-secondary-main;
background-color: var(--palette-secondary-main);
color: #fff;
}
.secondary:enabled {
&:hover {
background-color: $palette-secondary-light;
background-color: var(--palette-secondary-light);
}
&:active {
background-color: $palette-secondary-lighter;
background-color: var(--palette-secondary-lighter);
}
}
.secondary:enabled.invert,
.secondary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-secondary-main;
color: $palette-secondary-main;
border: 1px solid var(--palette-secondary-main);
color: var(--palette-secondary-main);
}
.secondary:enabled.invert {
&:hover {
border-color: $palette-secondary-light;
color: $palette-secondary-light;
border-color: var(--palette-secondary-light);
color: var(--palette-secondary-light);
}
&:active {
border-color: $palette-secondary-lighter;
color: $palette-secondary-lighter;
border-color: var(--palette-secondary-lighter);
color: var(--palette-secondary-lighter);
}
}