wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-10 12:43:11 +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);
}
src/core/client/ui/shared/typography.css
+25 -21
View File
@@ -1,59 +1,63 @@
.heading1 {
font-size: calc(24rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(24rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(32em / 24);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading2 {
font-size: calc(20rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(20rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(24em / 20);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading3 {
font-size: calc(18rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(18rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(20em / 18);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading4 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.subtitle1 {}
.subtitle1 {
}
.subtitle2 {}
.subtitle2 {
}
.body2 {}
.body2 {
}
.body1 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-regular;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-regular);
font-family: "Source Sans Pro";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.button {
color: $palette-text-secondary;
color: var(--palette-text-secondary);
font-family: "Source Sans Pro";
font-weight: $font-weight-medium;
font-weight: var(--font-weight-medium);
font-size: 16px;
letter-spacing: calc(0.57em / 16);
}
.overline {}
.overline {
}
src/core/client/ui/theme/global.css
+5
View File
@@ -0,0 +1,5 @@
@media (max-width: $breakpoints-sm) {
:root {
--spacing-unit: calc(0.5 * var(--spacing-unit));
}
}
src/core/client/ui/theme/variables.ts
+1 -1
View File
@@ -58,7 +58,7 @@ const variables = {
},
},
/* gitter and spacing */
spacingUnit: 5,
spacingUnit: 10,
/* Borders */
roundCorners: "2px",
/* Typography */