wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-11 12:51:33 +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);
}
}
src/core/client/ui/components/Typography/Typography.css
+10 -10
View File
@@ -11,19 +11,19 @@
composes: heading2 from "talk-ui/shared/typography.css";
}
.heading3 {
.heading3 {
composes: heading3 from "talk-ui/shared/typography.css";
}
.heading4 {
.heading4 {
composes: heading4 from "talk-ui/shared/typography.css";
}
.subtitle1 {
.subtitle1 {
composes: subtitle1 from "talk-ui/shared/typography.css";
}
.subtitle2 {
.subtitle2 {
composes: subtitle2 from "talk-ui/shared/typography.css";
}
@@ -31,7 +31,7 @@
composes: body1 from "talk-ui/shared/typography.css";
}
.body2 {
.body2 {
composes: body2 from "talk-ui/shared/typography.css";
}
@@ -70,7 +70,7 @@
}
.paragraph {
margin-bottom: calc(2px * $spacing-unit);
margin-bottom: calc(1px * var(--spacing-unit));
}
.colorInherit {
@@ -78,17 +78,17 @@
}
.colorPrimary {
color: $palette-primary-main;
color: var(--palette-primary-main);
}
.colorSecondary {
color: $palette-secondary-main;
color: var(--palette-secondary-main);
}
.colorTextSecondary {
color: $palette-text-secondary;
color: var(--palette-text-secondary);
}
.colorError {
color: $palette-error-main;
color: var(--palette-error-main);
}