bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/common/button/styles.js

1114 lines
25 KiB
JavaScript
Raw Normal View History

2021-11-10 19:37:08 +08:00
import styled from 'styled-components';
2022-02-15 22:51:51 +08:00
import Icon from '/imports/ui/components/common/icon/component';
2021-11-10 22:41:55 +08:00
import {
btnSpacing,
borderRadius,
2022-05-20 00:34:30 +08:00
borderSizeSmall,
2021-11-10 22:41:55 +08:00
borderSize,
borderSizeLarge,
smPaddingY,
smPaddingX,
mdPaddingY,
mdPaddingX,
lgPaddingY,
lgPaddingX,
jumboPaddingY,
jumboPaddingX,
} from '/imports/ui/stylesheets/styled-components/general';
import {
fontSizeSmall,
fontSizeBase,
fontSizeLarge,
btnFontWeight,
} from '/imports/ui/stylesheets/styled-components/typography';
import {
btnDefaultColor,
btnDefaultBg,
2022-05-20 00:34:30 +08:00
btnDefaultGhostColor,
btnDefaultGhostBg,
btnDefaultGhostActiveBg,
btnDefaultGhostBorder,
2021-11-10 22:41:55 +08:00
btnPrimaryBorder,
btnPrimaryColor,
btnPrimaryBg,
2022-05-20 00:34:30 +08:00
btnPrimaryHoverBg,
btnPrimaryActiveBg,
2021-11-10 22:41:55 +08:00
btnSuccessBorder,
btnSuccessColor,
btnSuccessBg,
btnWarningBorder,
btnWarningColor,
btnWarningBg,
btnDangerBorder,
btnDangerColor,
btnDangerBg,
btnDarkBorder,
btnDarkColor,
btnDarkBg,
btnOfflineBorder,
btnOfflineColor,
btnOfflineBg,
btnMutedBorder,
btnMutedColor,
btnMutedBg,
} from '/imports/ui/stylesheets/styled-components/palette';
import BaseButton from './base/component';
2021-11-10 19:37:08 +08:00
const ButtonIcon = styled(Icon)`
width: 1em;
2022-05-20 00:34:30 +08:00
height: 1em;
2021-11-10 19:37:08 +08:00
text-align: center;
2022-05-20 00:34:30 +08:00
&:before {
width: 1em;
height: 1em;
}
2021-11-10 19:37:08 +08:00
.buttonWrapper & {
font-size: 125%;
}
& + span {
margin: 0 0 0 ${btnSpacing};
[dir="rtl"] & {
margin: 0 ${btnSpacing} 0 0;
}
}
`;
2021-11-10 22:41:55 +08:00
const EmojiButtonSibling = styled.span`
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
`;
const ButtonLabel = styled.span`
& + i,
& + button {
margin: 0 0 0 ${btnSpacing};
[dir="rtl"] & {
margin: 0 ${btnSpacing} 0 0;
}
}
&:hover,
.buttonWrapper:hover & {
2021-11-10 22:41:55 +08:00
opacity: .5;
}
${({ hideLabel }) => hideLabel && `
font-size: 0;
height: 0;
width: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
display: none !important;
`}
`;
const ButtonWrapper = styled(BaseButton)`
border: none;
overflow: visible !important;
display: inline-block;
cursor: pointer;
&:focus,
&:hover {
outline: transparent;
outline-style: dotted;
outline-width: ${borderSize};
}
&:focus {
outline-style: solid;
}
&:-moz-focusring {
outline-color: transparent;
outline-offset: ${borderRadius};
}
&:active {
&:focus {
span:first-of-type::before {
border-radius: 50%;
outline: transparent;
outline-width: ${borderSize};
outline-style: solid;
}
}
}
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background: none;
padding: 0 !important;
&[aria-disabled="true"] > span {
cursor: not-allowed;
opacity: .65;
box-shadow: none;
}
2022-05-20 00:34:30 +08:00
& > span {
display: block;
text-align: center;
white-space: nowrap;
border: ${borderSizeSmall} solid transparent;
}
2021-11-10 22:41:55 +08:00
${({ size }) => size === 'sm' && `
font-size: calc(${fontSizeSmall} * .85);
padding: ${smPaddingY} ${smPaddingX};
2022-05-20 00:34:30 +08:00
& > span {
border: ${borderSizeLarge} solid transparent;
}
2021-11-10 22:41:55 +08:00
& > label {
display: inline-block;
margin: 0 0 0 ${btnSpacing};
[dir="rtl"] & {
margin:0 ${btnSpacing} 0 0;
}
}
`}
${({ size }) => size === 'md' && `
font-size: calc(${fontSizeBase} * .85);
padding: ${mdPaddingY} ${mdPaddingX};
2022-05-20 00:34:30 +08:00
& > span {
border: ${borderSizeLarge} solid transparent;
}
2021-11-10 22:41:55 +08:00
`}
${({ size }) => size === 'lg' && `
2022-05-20 00:34:30 +08:00
font-size: ${fontSizeBase};
2021-11-10 22:41:55 +08:00
padding: ${lgPaddingY} ${lgPaddingX};
`}
${({ size }) => size === 'jumbo' && `
font-size: 3rem;
padding: ${jumboPaddingY} ${jumboPaddingX};
`}
2022-05-31 21:22:17 +08:00
${({ size, circle, color }) => size === 'lg' && circle && color === 'primary' && `
2022-05-20 00:34:30 +08:00
&:focus:not([aria-disabled="true"]){
& > span{
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
}
}
&:hover{
& > span{
filter: brightness(90%);
color: ${btnPrimaryColor};
background-color: ${btnPrimaryHoverBg} !important;
}
}
&:active:focus{
& > span{
filter: brightness(85%);
color: ${btnPrimaryColor};
background-color: ${btnPrimaryActiveBg};
}
}
&:active{
& > span{
filter: brightness(85%);
color: ${btnPrimaryColor};
background-color: ${btnPrimaryActiveBg};
}
}
`}
2022-05-31 21:22:17 +08:00
${({
size, circle, ghost, color,
}) => size === 'lg' && circle && ghost && color === 'default' && `
2022-06-17 03:59:01 +08:00
span {
box-shadow: 0 0 1px 0px ${btnDefaultGhostColor} inset, 0 0 1px 0px ${btnDefaultGhostColor};
background-color: transparent !important;
border-color: ${btnDefaultGhostColor} !important;
}
2022-05-20 00:34:30 +08:00
& > span{
color: ${btnDefaultGhostColor};
}
&:focus:not([aria-disabled="true"]){
& > span{
background-color: ${btnDefaultGhostBg} !important;
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnDefaultGhostBorder};
border-color: transparent !important;
}
}
&:hover{
& > span{
2022-05-31 21:22:17 +08:00
filter: brightness(85%);
2022-05-20 00:34:30 +08:00
background-color: ${btnDefaultGhostBg} !important;
}
}
&:active:focus{
& > span{
filter: brightness(85%);
2022-05-31 21:22:17 +08:00
background-color: ${btnDefaultGhostActiveBg} !important;
2022-05-20 00:34:30 +08:00
}
}
&:active{
& > span{
filter: brightness(85%);
background-color: ${btnDefaultGhostActiveBg};
}
}
`}
${({ ghost }) => ghost && `
& > span{
background-image: none;
background-color: transparent;
}
`}
2021-11-10 22:41:55 +08:00
`;
const ButtonSpan = styled.span`
border: none;
overflow: visible;
display: inline-block;
border-radius: ${borderSize};
font-weight: ${btnFontWeight};
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
&:-moz-focusring {
outline: none;
}
&:hover,
&:focus {
outline: transparent;
outline-style: dotted;
outline-width: ${borderSize};
text-decoration: none;
}
&:active,
&:focus {
outline: transparent;
outline-width: ${borderSize};
outline-style: solid;
}
&:active {
background-image: none;
}
&[aria-disabled="true"] {
cursor: not-allowed;
opacity: .65;
box-shadow: none;
}
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: ${borderSize};
}
}
}
${({ size }) => size === 'sm' && `
font-size: calc(${fontSizeSmall} * .85);
padding: ${smPaddingY} ${smPaddingX};
`}
${({ size }) => size === 'md' && `
font-size: calc(${fontSizeBase} * .85);
padding: ${mdPaddingY} ${mdPaddingX};
`}
${({ size }) => size === 'lg' && `
2022-05-20 00:34:30 +08:00
height: 3rem;
width: 3rem;
display: flex !important;
align-items: center;
justify-content: center;
2021-11-10 22:41:55 +08:00
`}
${({ size }) => size === 'jumbo' && `
font-size: 3rem;
padding: ${jumboPaddingY} ${jumboPaddingX};
`}
2022-06-01 05:03:42 +08:00
${({ color, ghost }) => color === 'default' && !ghost && `
2021-11-10 22:41:55 +08:00
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
2021-11-10 22:41:55 +08:00
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
background-clip: padding-box;
2022-05-31 21:22:17 +08:00
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
2021-11-10 22:41:55 +08:00
}
2022-02-04 03:45:51 +08:00
&:hover & {
2021-11-10 22:41:55 +08:00
color: ${btnDefaultBg};
}
`}
${({ color }) => color === 'primary' && `
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
border: ${borderSizeLarge} solid transparent;
2022-05-31 21:22:17 +08:00
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnPrimaryColor};
}
2021-11-10 22:41:55 +08:00
`}
${({ color }) => color === 'success' && `
color: ${btnSuccessColor};
background-color: ${btnSuccessBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnSuccessColor};
background-color: ${btnSuccessBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnSuccessBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnSuccessColor};
}
`}
${({ color }) => color === 'warning' && `
color: ${btnWarningColor};
background-color: ${btnWarningBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnWarningColor};
background-color: ${btnWarningBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnWarningBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnWarningColor};
}
`}
${({ color }) => color === 'danger' && `
color: ${btnDangerColor};
background-color: ${btnDangerBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnDangerColor};
background-color: ${btnDangerBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnDangerBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDangerColor};
}
`}
${({ color }) => color === 'dark' && `
color: ${btnDarkColor};
background-color: ${btnDarkBg};
border: ${borderSizeLarge} solid transparent;
&:focus {
color: ${btnDarkColor};
background-color: ${btnDarkBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnDarkBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDarkColor};
}
`}
${({ color }) => color === 'offline' && `
color: ${btnOfflineColor};
background-color: ${btnOfflineBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnOfflineColor};
background-color: ${btnOfflineBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnOfflineBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnOfflineColor};
}
`}
${({ color }) => color === 'muted' && `
color: ${btnMutedColor};
background-color: ${btnMutedBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnMutedColor};
background-color: ${btnMutedBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnMutedBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnMutedColor};
}
`}
2022-05-31 21:22:17 +08:00
${({ ghost, color, size }) => ghost && color === 'default' && size !== 'lg' && `
color: ${btnDefaultBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnDefaultBg};
background-color: ${btnDefaultColor};
background-clip: padding-box;
2022-05-27 04:34:25 +08:00
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDefaultBg} !important;
2022-05-31 21:22:17 +08:00
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDefaultBg};
background-color: ${btnDefaultColor};
}
`}
2021-11-10 22:41:55 +08:00
${({ ghost, color }) => ghost && color === 'primary' && `
color: ${btnPrimaryBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnPrimaryBg};
background-color: ${btnPrimaryColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnPrimaryBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnPrimaryBg};
background-color: ${btnPrimaryColor};
}
`}
${({ ghost, color }) => ghost && color === 'success' && `
color: ${btnSuccessBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnSuccessBg};
background-color: ${btnSuccessColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnSuccessBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnSuccessBg};
background-color: ${btnSuccessColor};
}
`}
${({ ghost, color }) => ghost && color === 'warning' && `
color: ${btnWarningBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnWarningBg};
background-color: ${btnWarningColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnWarningBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnWarningBg};
background-color: ${btnWarningColor};
}
`}
${({ ghost, color }) => ghost && color === 'danger' && `
color: ${btnDangerBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnDangerBg};
background-color: ${btnDangerColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDangerBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDangerBg};
background-color: ${btnDangerColor};
}
`}
${({ ghost, color }) => ghost && color === 'dark' && `
color: ${btnDarkBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnDarkBg};
background-color: ${btnDarkColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDarkBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDarkBg};
background-color: ${btnDarkColor};
}
`}
${({ ghost, color }) => ghost && color === 'offline' && `
color: ${btnOfflineBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnOfflineBg};
background-color: ${btnOfflineColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnOfflineBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnOfflineBg};
background-color: ${btnOfflineColor};
}
`}
${({ ghost, color }) => ghost && color === 'muted' && `
color: ${btnMutedBg};
&:focus,
.buttonWrapper:focus & {
color: ${btnMutedBg};
background-color: ${btnMutedColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnMutedBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnMutedBg};
background-color: ${btnMutedColor};
}
`}
${({ circle }) => circle && `
border-radius: 50%;
`}
${({ circle, size }) => circle && size === 'sm' && `
padding: calc(${smPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'md' && `
padding: calc(${mdPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'lg' && `
padding: calc(${lgPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'jumbo' && `
padding: calc(${jumboPaddingX} / 2);
`}
${({ block }) => block && `
display: block;
width: 100%;
`}
`;
const Button = styled(BaseButton)`
2022-05-20 00:34:30 +08:00
border: ${borderSizeLarge} solid transparent;
2021-11-18 19:41:43 +08:00
border: none;
overflow: visible;
display: inline-block;
border-radius: ${borderSize};
2021-11-10 22:41:55 +08:00
font-weight: ${btnFontWeight};
line-height: 1;
text-align: center;
2021-11-18 19:41:43 +08:00
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
&:-moz-focusring {
outline: none;
}
&:hover,
&:focus {
outline: transparent;
outline-style: dotted;
outline-width: ${borderSize};
text-decoration: none;
}
&:active,
&:focus {
outline: transparent;
outline-width: ${borderSize};
outline-style: solid;
}
&:active {
background-image: none;
}
&[aria-disabled="true"] {
cursor: not-allowed;
opacity: .65;
box-shadow: none;
}
&,
&:active {
&:focus {
span:first-of-type::before {
border-radius: ${borderSize};
}
}
}
2021-11-10 22:41:55 +08:00
${({ size }) => size === 'sm' && `
font-size: calc(${fontSizeSmall} * .85);
padding: ${smPaddingY} ${smPaddingX};
`}
${({ size }) => size === 'md' && `
font-size: calc(${fontSizeBase} * .85);
padding: ${mdPaddingY} ${mdPaddingX};
`}
${({ size }) => size === 'lg' && `
font-size: calc(${fontSizeLarge} * .85);
padding: ${lgPaddingY} ${lgPaddingX};
`}
${({ size }) => size === 'jumbo' && `
font-size: 3rem;
padding: ${jumboPaddingY} ${jumboPaddingX};
`}
${({ color }) => color === 'default' && `
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
background-clip: padding-box;
2022-05-31 21:22:17 +08:00
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
2021-11-10 22:41:55 +08:00
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDefaultColor};
}
`}
${({ color }) => color === 'primary' && `
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
2022-06-07 01:26:13 +08:00
border: ${borderSizeLarge} solid transparent !important;
2021-11-10 22:41:55 +08:00
2022-06-07 01:26:13 +08:00
&:focus:not([aria-disabled="true"]){
2021-11-10 22:41:55 +08:00
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
background-clip: padding-box;
2022-06-07 01:26:13 +08:00
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
2021-11-10 22:41:55 +08:00
}
2022-06-07 01:26:13 +08:00
&:hover{
filter: brightness(90%);
color: ${btnPrimaryColor};
background-color: ${btnPrimaryHoverBg} !important;
}
&:active:focus{
filter: brightness(85%);
color: ${btnPrimaryColor};
background-color: ${btnPrimaryActiveBg};
}
&:active{
filter: brightness(85%);
2021-11-10 22:41:55 +08:00
color: ${btnPrimaryColor};
background-color: ${btnPrimaryActiveBg} !important;
2021-11-10 22:41:55 +08:00
}
`}
${({ color }) => color === 'success' && `
color: ${btnSuccessColor};
background-color: ${btnSuccessBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnSuccessColor};
background-color: ${btnSuccessBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnSuccessBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnSuccessColor};
}
`}
${({ color }) => color === 'warning' && `
color: ${btnWarningColor};
background-color: ${btnWarningBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnWarningColor};
background-color: ${btnWarningBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnWarningBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnWarningColor};
}
`}
${({ color }) => color === 'danger' && `
color: ${btnDangerColor};
background-color: ${btnDangerBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnDangerColor};
background-color: ${btnDangerBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnDangerBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDangerColor};
}
`}
${({ color }) => color === 'dark' && `
color: ${btnDarkColor};
background-color: ${btnDarkBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnDarkColor};
background-color: ${btnDarkBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnDarkBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDarkColor};
}
`}
${({ color }) => color === 'offline' && `
color: ${btnOfflineColor};
background-color: ${btnOfflineBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnOfflineColor};
background-color: ${btnOfflineBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnOfflineBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnOfflineColor};
}
`}
${({ color }) => color === 'muted' && `
color: ${btnMutedColor};
background-color: ${btnMutedBg};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${btnMutedColor};
background-color: ${btnMutedBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnMutedBorder};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnMutedColor};
}
`}
${({ ghost, color }) => ghost && color === 'default' && `
color: ${btnDefaultBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnDefaultBg};
background-color: ${btnDefaultColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDefaultBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDefaultBg};
background-color: ${btnDefaultColor};
}
`}
${({ ghost, color }) => ghost && color === 'primary' && `
color: ${btnPrimaryBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnPrimaryBg};
background-color: ${btnPrimaryColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnPrimaryBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnPrimaryBg};
background-color: ${btnPrimaryColor};
}
`}
${({ ghost, color }) => ghost && color === 'success' && `
color: ${btnSuccessBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnSuccessBg};
background-color: ${btnSuccessColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnSuccessBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnSuccessBg};
background-color: ${btnSuccessColor};
}
`}
${({ ghost, color }) => ghost && color === 'warning' && `
color: ${btnWarningBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnWarningBg};
background-color: ${btnWarningColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnWarningBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnWarningBg};
background-color: ${btnWarningColor};
}
`}
${({ ghost, color }) => ghost && color === 'danger' && `
color: ${btnDangerBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnDangerBg};
background-color: ${btnDangerColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDangerBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDangerBg};
background-color: ${btnDangerColor};
}
`}
${({ ghost, color }) => ghost && color === 'dark' && `
color: ${btnDarkBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnDarkBg};
background-color: ${btnDarkColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDarkBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDarkBg};
background-color: ${btnDarkColor};
}
`}
${({ ghost, color }) => ghost && color === 'offline' && `
color: ${btnOfflineBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnOfflineBg};
background-color: ${btnOfflineColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnOfflineBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnOfflineBg};
background-color: ${btnOfflineColor};
}
`}
${({ ghost, color }) => ghost && color === 'muted' && `
color: ${btnMutedBg};
background-image: none;
background-color: transparent;
&:focus,
.buttonWrapper:focus & {
color: ${btnMutedBg};
background-color: ${btnMutedColor};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnMutedBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnMutedBg};
background-color: ${btnMutedColor};
}
`}
${({ circle }) => circle && `
border-radius: 50%;
`}
${({ circle, size }) => circle && size === 'sm' && `
padding: calc(${smPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'md' && `
padding: calc(${mdPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'lg' && `
padding: calc(${lgPaddingX} / 2);
`}
${({ circle, size }) => circle && size === 'jumbo' && `
padding: calc(${jumboPaddingX} / 2);
`}
${({ block }) => block && `
display: block;
width: 100%;
`}
${({ iconRight }) => iconRight && `
display: flex;
flex-direction: row-reverse;
`}
2021-11-10 22:41:55 +08:00
`;
2021-11-10 19:37:08 +08:00
export default {
ButtonIcon,
2021-11-10 22:41:55 +08:00
EmojiButtonSibling,
ButtonLabel,
ButtonWrapper,
ButtonSpan,
Button,
2021-11-10 19:37:08 +08:00
};