wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-19 12:40:16 +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/stream/components/Comment.css
+2 -3
View File
@@ -1,11 +1,10 @@
.root {
width: 400px;
}
.gutterBottom {
margin-bottom: calc(2px * $spacing-unit);
margin-bottom: calc(1px * var(--spacing-unit));
}
.topBar {
margin-bottom: calc(1px * $spacing-unit);
margin-bottom: calc(0.5px * var(--spacing-unit));
}
src/core/client/stream/components/Indent.css
+2 -2
View File
@@ -1,8 +1,8 @@
.root {
border-left: 3px solid;
padding-left: calc(2px * $spacing-unit);
padding-left: calc(1px * var(--spacing-unit));
}
.level0 {
border-color: $palette-secondary-darkest;
border-color: var(--palette-secondary-darkest);
}
src/core/client/stream/components/PostCommentForm.css
+4 -3
View File
@@ -3,11 +3,12 @@
display: block;
height: 100px;
width: 400px;
margin-bottom: calc(2px * $spacing-unit);
width: 100%;
box-sizing: border-box;
margin-bottom: calc(1px * var(--spacing-unit));
}
.postButtonContainer {
display: flex;
justify-content: flex-end;
}
}
src/core/client/stream/components/Stream.css
+4
View File
@@ -0,0 +1,4 @@
.root {
width: 100%;
max-width: 400px;
}
src/core/client/stream/components/Stream.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
import ReplyListContainer from "../containers/ReplyListContainer";
import Logo from "./Logo";
import * as styles from "./Stream.css";
export interface StreamProps {
assetID: string;
@@ -20,7 +21,7 @@ export interface StreamProps {
const Stream: StatelessComponent<StreamProps> = props => {
return (
<div>
<div className={styles.root}>
<Logo gutterBottom />
<PostCommentFormContainer assetID={props.assetID} />
<div id="talk-comments-stream-log" role="log" aria-live="polite">
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 */