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

Disable load more and show all button during load

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-10 15:25:36 -03:00
parent 8690646409
commit 3355400248
21 changed files with 453 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Button/Button.css
+60 -39
View File
@@ -1,21 +1,34 @@
.root {
composes: button from "talk-ui/shared/typography.css";
padding: 5px 20px;
border-radius: $round-corners;
background-color: transparent;
/* TODO: hover styles for the default button */
&:enabled,
&:disabled {
padding: 5px 20px;
border-radius: $round-corners;
background-color: transparent;
/* TODO: hover styles for the default button */
}
}
.fullWidth {
.root:disabled {
opacity: 0.4;
cursor: default;
}
.fullWidth:enabled,
.fullWidth:disabled {
display: block;
width: 100%;
box-sizing: border-box;
}
.primary {
.primary:enabled,
.primary:disabled {
background-color: $palette-primary-main;
color: #fff;
}
.primary:enabled {
&:hover {
background-color: $palette-primary-light;
}
@@ -23,56 +36,64 @@
&:active {
background-color: $palette-primary-lighter;
}
&.invert {
background-color: transparent;
border: 1px solid $palette-primary-main;
color: $palette-primary-main;
&:hover {
border-color: $palette-primary-light;
color: $palette-primary-light;
}
&:active {
border-color: $palette-primary-lighter;
color: $palette-primary-lighter;
}
}
}
.secondary {
background-color: $palette-secondary-main;
color: #fff;
.primary:enabled.invert,
.primary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-primary-main;
color: $palette-primary-main;
}
.primary:enabled.invert {
&:hover {
background-color: $palette-secondary-light;
border-color: $palette-primary-light;
color: $palette-primary-light;
}
&:active {
border-color: $palette-primary-lighter;
color: $palette-primary-lighter;
}
}
.secondary:enabled,
.secondary:disabled {
background-color: $palette-secondary-main;
color: #fff;
}
.secondary:enabled {
&:hover {
background-color: $palette-secondary-light;
}
&:active {
background-color: $palette-secondary-lighter;
}
}
&.invert {
background-color: transparent;
border: 1px solid $palette-secondary-main;
color: $palette-secondary-main;
.secondary:enabled.invert,
.secondary:disabled.invert {
background-color: transparent;
border: 1px solid $palette-secondary-main;
color: $palette-secondary-main;
}
&:hover {
border-color: $palette-secondary-light;
color: $palette-secondary-light;
}
.secondary:enabled.invert {
&:hover {
border-color: $palette-secondary-light;
color: $palette-secondary-light;
}
&:active {
border-color: $palette-secondary-lighter;
color: $palette-secondary-lighter;
}
&:active {
border-color: $palette-secondary-lighter;
color: $palette-secondary-lighter;
}
}
/**
* This seems to be the best way to target modern touch device browsers.
*/
@media (-moz-touch-enabled: 1), (pointer:coarse) {
@media (-moz-touch-enabled: 1), (pointer: coarse) {
/* TODO: Remove hover styles */
}
src/core/client/ui/components/Button/Button.mdx
+13 -6
View File
@@ -10,11 +10,18 @@ import Button from './Button'
## Basic usage
<Playground>
<Button style={{marginRight: "10px"}}>Push Me</Button>
<Button style={{marginRight: "10px"}} anchor>I'm an Anchor Tag</Button>
<Button style={{marginRight: "10px"}} primary>Primary</Button>
<Button style={{marginRight: "10px"}} secondary>Secondary</Button>
<Button style={{marginTop: "10px"}} primary fullWidth>Full Width</Button>
<Button style={{marginTop: "10px"}} primary invert fullWidth>Full Width Invert</Button>
<Button style={{margin: "0 10px 10px 0"}}>Push Me</Button>
<Button style={{margin: "0 10px 10px 0"}} disabled>Push Me</Button>
<Button style={{margin: "0 10px 10px 0"}} anchor>I'm an Anchor Tag</Button>
<Button style={{margin: "0 10px 10px 0"}} primary>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary disabled>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary disabled>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary invert>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} primary invert disabled>Primary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary invert>Secondary</Button>
<Button style={{margin: "0 10px 10px 0"}} secondary invert disabled>Secondary</Button>
<Button style={{marginBottom: "10px"}} primary fullWidth>Full Width</Button>
<Button style={{marginBottom: "10px"}} primary invert fullWidth>Full Width Invert</Button>
</Playground>