convert button component
This commit is contained in:
Ramón Souza
parent
30a4cdd661
commit
7b55b650fc
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import cx from 'classnames';
|
||||
import TooltipContainer from '/imports/ui/components/tooltip/container';
|
||||
import { styles } from './styles.scss';
|
||||
import Styled from './styles';
|
||||
import BaseButton from './base/component';
|
||||
import ButtonEmoji from './button-emoji/ButtonEmoji';
|
||||
@ -89,27 +88,6 @@ const defaultProps = {
|
||||
};
|
||||
|
||||
export default class Button extends BaseButton {
|
||||
_getClassNames() {
|
||||
const {
|
||||
size,
|
||||
color,
|
||||
ghost,
|
||||
circle,
|
||||
block,
|
||||
} = this.props;
|
||||
|
||||
const propClassNames = {};
|
||||
|
||||
propClassNames[styles.button] = true;
|
||||
propClassNames[styles[size]] = true;
|
||||
propClassNames[styles[color]] = true;
|
||||
propClassNames[styles.ghost] = ghost;
|
||||
propClassNames[styles.circle] = circle;
|
||||
propClassNames[styles.block] = block;
|
||||
|
||||
return propClassNames;
|
||||
}
|
||||
|
||||
_cleanProps(otherProps) {
|
||||
const remainingProps = Object.assign({}, otherProps);
|
||||
delete remainingProps.icon;
|
||||
@ -167,6 +145,11 @@ export default class Button extends BaseButton {
|
||||
const {
|
||||
className,
|
||||
iconRight,
|
||||
size,
|
||||
color,
|
||||
ghost,
|
||||
circle,
|
||||
block,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
@ -178,13 +161,18 @@ export default class Button extends BaseButton {
|
||||
const renderRightFuncName = !iconRight ? 'renderLabel' : 'renderIcon';
|
||||
|
||||
return (
|
||||
<BaseButton
|
||||
className={cx(this._getClassNames(), className)}
|
||||
<Styled.Button
|
||||
size={size}
|
||||
color={color}
|
||||
ghost={ghost}
|
||||
circle={circle}
|
||||
block={block}
|
||||
className={className}
|
||||
{...remainingProps}
|
||||
>
|
||||
{this[renderLeftFuncName]()}
|
||||
{this[renderRightFuncName]()}
|
||||
</BaseButton>
|
||||
</Styled.Button>
|
||||
);
|
||||
}
|
||||
|
||||
@ -194,24 +182,39 @@ export default class Button extends BaseButton {
|
||||
size,
|
||||
iconRight,
|
||||
children,
|
||||
color,
|
||||
ghost,
|
||||
circle,
|
||||
block,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
|
||||
const remainingProps = this._cleanProps(otherProps);
|
||||
|
||||
return (
|
||||
<BaseButton
|
||||
className={cx(styles[size], 'buttonWrapper', styles.buttonWrapper, className)}
|
||||
<Styled.ButtonWrapper
|
||||
size={size}
|
||||
className={cx(size, 'buttonWrapper', className)}
|
||||
color={color}
|
||||
ghost={ghost}
|
||||
circle={circle}
|
||||
block={block}
|
||||
{...remainingProps}
|
||||
>
|
||||
{this.renderButtonEmojiSibling()}
|
||||
{!iconRight ? null : this.renderLabel()}
|
||||
<span className={cx(this._getClassNames())}>
|
||||
<Styled.ButtonSpan
|
||||
size={size}
|
||||
color={color}
|
||||
ghost={ghost}
|
||||
circle={circle}
|
||||
block={block}
|
||||
>
|
||||
{this.renderIcon()}
|
||||
</span>
|
||||
</Styled.ButtonSpan>
|
||||
{iconRight ? null : this.renderLabel()}
|
||||
{this.hasButtonEmojiComponent() ? children : null}
|
||||
</BaseButton>
|
||||
</Styled.ButtonWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -220,7 +223,7 @@ export default class Button extends BaseButton {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (<span className={styles.emojiButtonSibling} />);
|
||||
return (<Styled.EmojiButtonSibling />);
|
||||
}
|
||||
|
||||
renderIcon() {
|
||||
@ -241,16 +244,11 @@ export default class Button extends BaseButton {
|
||||
renderLabel() {
|
||||
const { label, hideLabel } = this.props;
|
||||
|
||||
const classNames = {};
|
||||
|
||||
classNames[styles.label] = true;
|
||||
classNames[styles.hideLabel] = hideLabel;
|
||||
|
||||
return (
|
||||
<span className={cx(classNames)}>
|
||||
<Styled.ButtonLabel hideLabel={hideLabel}>
|
||||
{label}
|
||||
{!this.hasButtonEmojiComponent() ? this.props.children : null}
|
||||
</span>
|
||||
</Styled.ButtonLabel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,51 @@
|
||||
import styled from 'styled-components';
|
||||
import Icon from '../icon/component';
|
||||
import { btnSpacing } from '/imports/ui/stylesheets/styled-components/general';
|
||||
import {
|
||||
btnSpacing,
|
||||
borderRadius,
|
||||
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,
|
||||
btnPrimaryBorder,
|
||||
btnPrimaryColor,
|
||||
btnPrimaryBg,
|
||||
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';
|
||||
|
||||
const ButtonIcon = styled(Icon)`
|
||||
width: 1em;
|
||||
@ -22,6 +67,913 @@ const ButtonIcon = styled(Icon)`
|
||||
}
|
||||
`;
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
${({ size }) => size === 'sm' && `
|
||||
font-size: calc(${fontSizeSmall} * .85);
|
||||
padding: ${smPaddingY} ${smPaddingX};
|
||||
|
||||
& > 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};
|
||||
`}
|
||||
|
||||
${({ size }) => size === 'lg' && `
|
||||
font-size: calc(${fontSizeLarge} * .85);
|
||||
padding: ${lgPaddingY} ${lgPaddingX};
|
||||
`}
|
||||
|
||||
${({ size }) => size === 'jumbo' && `
|
||||
font-size: 3rem;
|
||||
padding: ${jumboPaddingY} ${jumboPaddingX};
|
||||
`}
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
`;
|
||||
|
||||
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' && `
|
||||
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};
|
||||
border: ${borderSizeLarge} solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus:not([aria-disabled="true"]) & {
|
||||
color: ${btnDefaultColor};
|
||||
background-color: ${btnDefaultBg};
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: ${btnDefaultBg};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ color }) => color === 'primary' && `
|
||||
color: ${btnPrimaryColor};
|
||||
background-color: ${btnPrimaryBg};
|
||||
border: ${borderSizeLarge} solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus:not([aria-disabled="true"]) & {
|
||||
color: ${btnPrimaryColor};
|
||||
background-color: ${btnPrimaryBg};
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: ${btnPrimaryColor};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ 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};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ ghost, color }) => ghost && color === 'default' && `
|
||||
color: ${btnDefaultBg};
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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%;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Button = styled(BaseButton)`
|
||||
font-weight: ${btnFontWeight};
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
${({ 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};
|
||||
border: ${borderSizeLarge} solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus:not([aria-disabled="true"]) & {
|
||||
color: ${btnDefaultColor};
|
||||
background-color: ${btnDefaultBg};
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: ${btnDefaultColor};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ color }) => color === 'primary' && `
|
||||
color: ${btnPrimaryColor};
|
||||
background-color: ${btnPrimaryBg};
|
||||
border: ${borderSizeLarge} solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus:not([aria-disabled="true"]) & {
|
||||
color: ${btnPrimaryColor};
|
||||
background-color: ${btnPrimaryBg};
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: ${btnPrimaryColor};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ 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,
|
||||
.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};
|
||||
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};
|
||||
}
|
||||
`}
|
||||
|
||||
${({ ghost, color }) => ghost && color === 'default' && `
|
||||
color: ${btnDefaultBg};
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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;
|
||||
border: ${borderSizeLarge} solid 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%;
|
||||
`}
|
||||
`;
|
||||
|
||||
export default {
|
||||
ButtonIcon,
|
||||
EmojiButtonSibling,
|
||||
ButtonLabel,
|
||||
ButtonWrapper,
|
||||
ButtonSpan,
|
||||
Button,
|
||||
};
|
||||
|
||||
@ -1,426 +0,0 @@
|
||||
@import "/imports/ui/stylesheets/mixins/_indicators";
|
||||
@import "/imports/ui/stylesheets/variables/placeholders";
|
||||
|
||||
/* Base
|
||||
* ==========
|
||||
*/
|
||||
|
||||
:root {
|
||||
--btn-default-color: var(--color-gray);
|
||||
--btn-default-bg: var(--color-white);
|
||||
--btn-default-border: var(--color-white);
|
||||
|
||||
--btn-primary-color: var(--color-white);
|
||||
--btn-primary-bg: var(--color-primary);
|
||||
--btn-primary-border: var(--color-primary);
|
||||
|
||||
--btn-success-color: var(--color-white);
|
||||
--btn-success-bg: var(--color-success);
|
||||
--btn-success-border: var(--color-success);
|
||||
|
||||
--btn-warning-color: var(--color-white);
|
||||
--btn-warning-bg: var(--color-warning);
|
||||
--btn-warning-border: var(--color-warning);
|
||||
|
||||
--btn-danger-color: var(--color-white);
|
||||
--btn-danger-bg: var(--color-danger);
|
||||
--btn-danger-border: var(--color-danger);
|
||||
|
||||
--btn-dark-color: var(--color-white);
|
||||
--btn-dark-bg: var(--color-gray-dark);
|
||||
--btn-dark-border: var(--color-danger);
|
||||
|
||||
--btn-offline-color: var(--color-white);
|
||||
--btn-offline-bg: var(--color-offline);
|
||||
--btn-offline-border: var(--color-offline);
|
||||
|
||||
--btn-muted-color: var(--color-muted);
|
||||
--btn-muted-bg: var(--color-muted-background);
|
||||
--btn-muted-border: var(--color-muted-background);
|
||||
|
||||
--btn-border-size: var(--border-size);
|
||||
--btn-border-radius: var(--border-radius);
|
||||
--btn-font-weight: 600;
|
||||
--btn-spacing: .35rem;
|
||||
|
||||
--btn-sm-font-size: calc(var(--font-size-small) * .85);
|
||||
--btn-sm-padding: var(--sm-padding-y) var(--sm-padding-x);
|
||||
|
||||
--btn-md-font-size: calc(var(--font-size-base) * .85);
|
||||
--btn-md-padding: var(--md-padding-y) var(--md-padding-x);
|
||||
|
||||
--btn-lg-font-size: calc(var(--font-size-large) * .85);
|
||||
--btn-lg-padding: var(--lg-padding-y) var(--lg-padding-x);
|
||||
|
||||
--btn-jumbo-font-size: 3rem;
|
||||
--btn-jumbo-padding: var(--jumbo-padding-y) var(--jumbo-padding-x);
|
||||
}
|
||||
|
||||
.button {
|
||||
border: none;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
border-radius: var(--border-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@extend %highContrastOutline;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@extend %highContrastOutline;
|
||||
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: var(--border-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonWrapper {
|
||||
border: none;
|
||||
overflow: visible !important;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@extend %highContrastOutline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
&:-moz-focusring {
|
||||
outline-color: transparent;
|
||||
outline-offset: var(--border-radius);
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
&:focus {
|
||||
span:first-of-type::before {
|
||||
border-radius: 50%;
|
||||
@extend %highContrastOutline;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.buttonWrapper & {
|
||||
opacity: .85;
|
||||
display: block;
|
||||
margin-top: var(--btn-spacing);
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.buttonWrapper.sm & {
|
||||
display: inline-block;
|
||||
margin: 0 0 0var(--btn-spacing);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin:0 var(--btn-spacing) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + .icon,
|
||||
& + .button {
|
||||
margin: 0 0 0 var(--btn-spacing);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 var(--btn-spacing) 0 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.hideLabel {
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
||||
.buttonWrapper & {
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
& + .label {
|
||||
margin: 0 0 0 var(--btn-spacing);
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin: 0 var(--btn-spacing) 0 0;
|
||||
}
|
||||
}
|
||||
.buttonWrapper:hover & {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
.emojiButtonSibling {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.emojiButton {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
right: -1px;
|
||||
bottom: 0;
|
||||
background-color: var(--btn-default-bg);
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.emojiButtonIcon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 60%;
|
||||
left: 0;
|
||||
width: 75%;
|
||||
margin-left: 25%;
|
||||
font-size: 50%;
|
||||
margin-top: 40%;
|
||||
color: var(--btn-default-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Colors
|
||||
* ==========
|
||||
*/
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border: var(--border-size-large) solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus:not([aria-disabled="true"]) & {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 var(--border-size) $border;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: $color;
|
||||
// background-color: $active-background; TODO;
|
||||
// border-color: $active-border; TODO;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-ghost-variant($color, $variant) {
|
||||
color: $color;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border: var(--border-size-large) solid transparent;
|
||||
|
||||
&:focus,
|
||||
.buttonWrapper:focus & {
|
||||
color: $color;
|
||||
background-color: $variant;
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 0 var(--border-size-large) $color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
.buttonWrapper:hover & {
|
||||
color: $color;
|
||||
background-color: $variant;
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
@include button-variant(var(--btn-default-color), var(--btn-default-bg), var(--btn-primary-border));
|
||||
}
|
||||
|
||||
.primary {
|
||||
@include button-variant(var(--btn-primary-color), var(--btn-primary-bg), var(--btn-primary-border));
|
||||
}
|
||||
|
||||
.success {
|
||||
@include button-variant(var(--btn-success-color), var(--btn-success-bg), var(--btn-success-border));
|
||||
}
|
||||
|
||||
.warning {
|
||||
@include button-variant(var(--btn-warning-color), var(--btn-warning-bg), var(--btn-warning-border));
|
||||
}
|
||||
|
||||
.danger {
|
||||
@include button-variant(var(--btn-danger-color), var(--btn-danger-bg), var(--btn-danger-border));
|
||||
}
|
||||
|
||||
.dark {
|
||||
@include button-variant(var(--btn-dark-color), var(--btn-dark-bg), var(--btn-dark-border));
|
||||
}
|
||||
|
||||
.offline {
|
||||
@include button-variant(var(--btn-offline-color), var(--btn-offline-bg), var(--btn-offline-border));
|
||||
}
|
||||
|
||||
.muted {
|
||||
@include button-variant(var(--btn-muted-color), var(--btn-muted-bg), var(--btn-muted-border));
|
||||
}
|
||||
|
||||
/* Styles
|
||||
* ==========
|
||||
*/
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
&.default {
|
||||
@include button-ghost-variant(var(--btn-default-bg), var(--btn-default-color));
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include button-ghost-variant(var(--btn-primary-bg), var(--btn-primary-color));
|
||||
}
|
||||
|
||||
&.success {
|
||||
@include button-ghost-variant(var(--btn-success-bg), var(--btn-success-color));
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@include button-ghost-variant(var(--btn-warning-bg), var(--btn-warning-color));
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@include button-ghost-variant(var(--btn-danger-bg), var(--btn-danger-color));
|
||||
}
|
||||
|
||||
&.dark {
|
||||
@include button-ghost-variant(var(--btn-dark-bg), var(--btn-dark-color));
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@include button-ghost-variant(var(--btn-offline-bg), var(--btn-offline-color));
|
||||
}
|
||||
|
||||
&.muted {
|
||||
@include button-ghost-variant(var(--btn-muted-bg), var(--btn-muted-color));
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
--btn-sm-padding-x: calc(var(--sm-padding-x) / 2);
|
||||
--btn-md-padding-x: calc(var(--md-padding-x) / 2);
|
||||
--btn-lg-padding-x: calc(var(--lg-padding-x) / 2);
|
||||
--btn-jumbo-padding-x: calc(var(--jumbo-padding-x) / 2);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
&.sm {
|
||||
padding: var(--btn-sm-padding-x);
|
||||
}
|
||||
|
||||
&.md {
|
||||
padding: var(--btn-md-padding-x);
|
||||
}
|
||||
|
||||
&.lg {
|
||||
padding: var(--btn-lg-padding-x);
|
||||
}
|
||||
|
||||
&.jumbo {
|
||||
padding: var(--btn-jumbo-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes
|
||||
* ==========
|
||||
*/
|
||||
|
||||
.sm {
|
||||
font-size: var(--btn-sm-font-size);
|
||||
padding: var(--btn-sm-padding);
|
||||
}
|
||||
|
||||
.md {
|
||||
font-size: var(--btn-md-font-size);
|
||||
padding: var(--btn-md-padding);
|
||||
}
|
||||
|
||||
.lg {
|
||||
font-size: var(--btn-lg-font-size);
|
||||
padding: var(--btn-lg-padding);
|
||||
}
|
||||
|
||||
.jumbo {
|
||||
font-size: var(--btn-jumbo-font-size);
|
||||
padding: var(--btn-jumbo-padding);
|
||||
}
|
||||
@ -107,11 +107,6 @@ const Bottom = styled.div`
|
||||
const NavbarToggleButton = styled(Button)`
|
||||
margin: 0;
|
||||
|
||||
span {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
z-index: 3;
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -19,6 +19,9 @@ const colorPrimary = '#0F70D7';
|
||||
const colorDanger = '#DF2721';
|
||||
const colorSuccess = '#008081';
|
||||
const colorWarning = 'purple';
|
||||
const colorOffline = colorGrayLight;
|
||||
const colorMuted = '#586571';
|
||||
const colorMutedBackground = '#F3F6F9';
|
||||
|
||||
const colorBackground = colorGrayDark;
|
||||
const userListBg = colorOffWhite;
|
||||
@ -33,8 +36,36 @@ const colorTipBg = '#333333';
|
||||
const itemFocusBorder = colorBlueLighter;
|
||||
|
||||
const btnDefaultColor = colorGray;
|
||||
const btnPrimaryBorder = colorPrimary;
|
||||
const btnDefaultBg = colorWhite;
|
||||
const btnDefaultBorder = colorWhite;
|
||||
|
||||
const btnPrimaryBorder = colorPrimary;
|
||||
const btnPrimaryColor = colorWhite;
|
||||
const btnPrimaryBg = colorPrimary;
|
||||
|
||||
const btnSuccessBorder = colorSuccess;
|
||||
const btnSuccessColor = colorWhite;
|
||||
const btnSuccessBg = colorSuccess;
|
||||
|
||||
const btnWarningBorder = colorWarning;
|
||||
const btnWarningColor = colorWhite;
|
||||
const btnWarningBg = colorWarning;
|
||||
|
||||
const btnDangerBorder = colorDanger;
|
||||
const btnDangerColor = colorWhite;
|
||||
const btnDangerBg = colorDanger;
|
||||
|
||||
const btnDarkBorder = colorDanger;
|
||||
const btnDarkColor = colorWhite;
|
||||
const btnDarkBg = colorGrayDark;
|
||||
|
||||
const btnOfflineBorder = colorOffline;
|
||||
const btnOfflineColor = colorWhite;
|
||||
const btnOfflineBg = colorOffline;
|
||||
|
||||
const btnMutedBorder = colorMutedBackground;
|
||||
const btnMutedColor = colorMuted;
|
||||
const btnMutedBg = colorMutedBackground;
|
||||
|
||||
const toolbarButtonColor = btnDefaultColor;
|
||||
const userThumbnailBorder = colorGrayLight;
|
||||
@ -88,7 +119,29 @@ export {
|
||||
colorTipBg,
|
||||
itemFocusBorder,
|
||||
btnDefaultColor,
|
||||
btnDefaultBg,
|
||||
btnDefaultBorder,
|
||||
btnPrimaryBorder,
|
||||
btnPrimaryColor,
|
||||
btnPrimaryBg,
|
||||
btnSuccessBorder,
|
||||
btnSuccessColor,
|
||||
btnSuccessBg,
|
||||
btnWarningBorder,
|
||||
btnWarningColor,
|
||||
btnWarningBg,
|
||||
btnDangerBorder,
|
||||
btnDangerColor,
|
||||
btnDangerBg,
|
||||
btnDarkBorder,
|
||||
btnDarkColor,
|
||||
btnDarkBg,
|
||||
btnOfflineBorder,
|
||||
btnOfflineColor,
|
||||
btnOfflineBg,
|
||||
btnMutedBorder,
|
||||
btnMutedColor,
|
||||
btnMutedBg,
|
||||
toolbarButtonColor,
|
||||
userThumbnailBorder,
|
||||
loaderBg,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user