BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

primary circle button - revised styles

Browse Source
This commit is contained in:
Ramon Souza 2022-05-19 13:34:30 -03:00
parent ad98ff3d98
commit e199ef2c35
3 changed files with 128 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bigbluebutton-html5/imports/ui/components/actions-bar/styles.js
View File

@ -7,6 +7,7 @@ import Button from '/imports/ui/components/common/button/component';
const ActionsBar = styled.div` const ActionsBar = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
`; `;
const Left = styled.div` const Left = styled.div`

194
bigbluebutton-html5/imports/ui/components/common/button/styles.js
View File

@ -3,6 +3,7 @@ import Icon from '/imports/ui/components/common/icon/component';
import { import {
btnSpacing, btnSpacing,
borderRadius, borderRadius,
borderSizeSmall,
borderSize, borderSize,
borderSizeLarge, borderSizeLarge,
smPaddingY, smPaddingY,
@ -23,9 +24,15 @@ import {
import { import {
btnDefaultColor, btnDefaultColor,
btnDefaultBg, btnDefaultBg,
btnDefaultGhostColor,
btnDefaultGhostBg,
btnDefaultGhostActiveBg,
btnDefaultGhostBorder,
btnPrimaryBorder, btnPrimaryBorder,
btnPrimaryColor, btnPrimaryColor,
btnPrimaryBg, btnPrimaryBg,
btnPrimaryHoverBg,
btnPrimaryActiveBg,
btnSuccessBorder, btnSuccessBorder,
btnSuccessColor, btnSuccessColor,
btnSuccessBg, btnSuccessBg,
@ -49,8 +56,14 @@ import BaseButton from './base/component';
const ButtonIcon = styled(Icon)` const ButtonIcon = styled(Icon)`
width: 1em; width: 1em;
height: 1em;
text-align: center; text-align: center;
&:before {
width: 1em;
height: 1em;
}
.buttonWrapper & { .buttonWrapper & {
font-size: 125%; font-size: 125%;
} }
@ -62,9 +75,6 @@ const ButtonIcon = styled(Icon)`
margin: 0 ${btnSpacing} 0 0; margin: 0 ${btnSpacing} 0 0;
} }
} }
.buttonWrapper:hover & {
opacity: .75;
}
`; `;
const EmojiButtonSibling = styled.span` const EmojiButtonSibling = styled.span`
@ -146,10 +156,21 @@ const ButtonWrapper = styled(BaseButton)`
box-shadow: none; box-shadow: none;
} }
& > span {
display: block;
text-align: center;
white-space: nowrap;
border: ${borderSizeSmall} solid transparent;
}
${({ size }) => size === 'sm' && ` ${({ size }) => size === 'sm' && `
font-size: calc(${fontSizeSmall} * .85); font-size: calc(${fontSizeSmall} * .85);
padding: ${smPaddingY} ${smPaddingX}; padding: ${smPaddingY} ${smPaddingX};
& > span {
border: ${borderSizeLarge} solid transparent;
}
& > label { & > label {
display: inline-block; display: inline-block;
margin: 0 0 0 ${btnSpacing}; margin: 0 0 0 ${btnSpacing};
@ -163,10 +184,14 @@ const ButtonWrapper = styled(BaseButton)`
${({ size }) => size === 'md' && ` ${({ size }) => size === 'md' && `
font-size: calc(${fontSizeBase} * .85); font-size: calc(${fontSizeBase} * .85);
padding: ${mdPaddingY} ${mdPaddingX}; padding: ${mdPaddingY} ${mdPaddingX};
& > span {
border: ${borderSizeLarge} solid transparent;
}
`} `}
${({ size }) => size === 'lg' && ` ${({ size }) => size === 'lg' && `
font-size: calc(${fontSizeLarge} * .85); font-size: ${fontSizeBase};
padding: ${lgPaddingY} ${lgPaddingX}; padding: ${lgPaddingY} ${lgPaddingX};
`} `}
@ -175,11 +200,83 @@ const ButtonWrapper = styled(BaseButton)`
padding: ${jumboPaddingY} ${jumboPaddingX}; padding: ${jumboPaddingY} ${jumboPaddingX};
`} `}
& > span { ${({ color }) => color === 'primary' && `
display: block; &:focus:not([aria-disabled="true"]){
text-align: center; & > span{
white-space: nowrap; 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};
}
}
`}
${({ circle, ghost, color }) => circle && ghost && color === 'default' && `
& > 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{
filter: brightness(90%);
background-color: ${btnDefaultGhostBg} !important;
}
}
&:active:focus{
& > span{
filter: brightness(85%);
background-color: ${btnDefaultGhostActiveBg};
}
}
&:active{
& > span{
filter: brightness(85%);
background-color: ${btnDefaultGhostActiveBg};
}
}
`}
${({ ghost }) => ghost && `
& > span{
background-image: none;
background-color: transparent;
}
`}
`; `;
const ButtonSpan = styled.span` const ButtonSpan = styled.span`
@ -244,8 +341,11 @@ const ButtonSpan = styled.span`
`} `}
${({ size }) => size === 'lg' && ` ${({ size }) => size === 'lg' && `
font-size: calc(${fontSizeLarge} * .85); height: 3rem;
padding: ${lgPaddingY} ${lgPaddingX}; width: 3rem;
display: flex !important;
align-items: center;
justify-content: center;
`} `}
${({ size }) => size === 'jumbo' && ` ${({ size }) => size === 'jumbo' && `
@ -275,19 +375,6 @@ const ButtonSpan = styled.span`
color: ${btnPrimaryColor}; color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg}; background-color: ${btnPrimaryBg};
border: ${borderSizeLarge} solid transparent; 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 }) => color === 'success' && `
@ -403,32 +490,8 @@ const ButtonSpan = styled.span`
} }
`} `}
${({ 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' && ` ${({ ghost, color }) => ghost && color === 'primary' && `
color: ${btnPrimaryBg}; color: ${btnPrimaryBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -447,9 +510,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'success' && ` ${({ ghost, color }) => ghost && color === 'success' && `
color: ${btnSuccessBg}; color: ${btnSuccessBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -468,9 +528,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'warning' && ` ${({ ghost, color }) => ghost && color === 'warning' && `
color: ${btnWarningBg}; color: ${btnWarningBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -489,9 +546,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'danger' && ` ${({ ghost, color }) => ghost && color === 'danger' && `
color: ${btnDangerBg}; color: ${btnDangerBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -510,9 +564,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'dark' && ` ${({ ghost, color }) => ghost && color === 'dark' && `
color: ${btnDarkBg}; color: ${btnDarkBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -531,9 +582,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'offline' && ` ${({ ghost, color }) => ghost && color === 'offline' && `
color: ${btnOfflineBg}; color: ${btnOfflineBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -552,9 +600,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'muted' && ` ${({ ghost, color }) => ghost && color === 'muted' && `
color: ${btnMutedBg}; color: ${btnMutedBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -598,6 +643,7 @@ const ButtonSpan = styled.span`
`; `;
const Button = styled(BaseButton)` const Button = styled(BaseButton)`
border: ${borderSizeLarge} solid transparent;
border: none; border: none;
overflow: visible; overflow: visible;
display: inline-block; display: inline-block;
@ -671,7 +717,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'default' && ` ${({ color }) => color === 'default' && `
color: ${btnDefaultColor}; color: ${btnDefaultColor};
background-color: ${btnDefaultBg}; background-color: ${btnDefaultBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -690,7 +735,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'primary' && ` ${({ color }) => color === 'primary' && `
color: ${btnPrimaryColor}; color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg}; background-color: ${btnPrimaryBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -709,7 +753,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'success' && ` ${({ color }) => color === 'success' && `
color: ${btnSuccessColor}; color: ${btnSuccessColor};
background-color: ${btnSuccessBg}; background-color: ${btnSuccessBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -728,7 +771,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'warning' && ` ${({ color }) => color === 'warning' && `
color: ${btnWarningColor}; color: ${btnWarningColor};
background-color: ${btnWarningBg}; background-color: ${btnWarningBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -747,7 +789,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'danger' && ` ${({ color }) => color === 'danger' && `
color: ${btnDangerColor}; color: ${btnDangerColor};
background-color: ${btnDangerBg}; background-color: ${btnDangerBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -766,7 +807,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'dark' && ` ${({ color }) => color === 'dark' && `
color: ${btnDarkColor}; color: ${btnDarkColor};
background-color: ${btnDarkBg}; background-color: ${btnDarkBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -785,7 +825,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'offline' && ` ${({ color }) => color === 'offline' && `
color: ${btnOfflineColor}; color: ${btnOfflineColor};
background-color: ${btnOfflineBg}; background-color: ${btnOfflineBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -804,7 +843,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'muted' && ` ${({ color }) => color === 'muted' && `
color: ${btnMutedColor}; color: ${btnMutedColor};
background-color: ${btnMutedBg}; background-color: ${btnMutedBg};
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & { .buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -824,7 +862,6 @@ const Button = styled(BaseButton)`
color: ${btnDefaultBg}; color: ${btnDefaultBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -845,7 +882,6 @@ const Button = styled(BaseButton)`
color: ${btnPrimaryBg}; color: ${btnPrimaryBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -866,7 +902,6 @@ const Button = styled(BaseButton)`
color: ${btnSuccessBg}; color: ${btnSuccessBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -887,7 +922,6 @@ const Button = styled(BaseButton)`
color: ${btnWarningBg}; color: ${btnWarningBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -908,7 +942,6 @@ const Button = styled(BaseButton)`
color: ${btnDangerBg}; color: ${btnDangerBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -929,7 +962,6 @@ const Button = styled(BaseButton)`
color: ${btnDarkBg}; color: ${btnDarkBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -950,7 +982,6 @@ const Button = styled(BaseButton)`
color: ${btnOfflineBg}; color: ${btnOfflineBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {
@ -971,7 +1002,6 @@ const Button = styled(BaseButton)`
color: ${btnMutedBg}; color: ${btnMutedBg};
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus, &:focus,
.buttonWrapper:focus & { .buttonWrapper:focus & {

17
bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
View File

@ -24,7 +24,7 @@ const colorMuted = 'var(--color-muted, #586571)';
const colorMutedBackground = 'var(--color-muted-background, #F3F6F9)'; const colorMutedBackground = 'var(--color-muted-background, #F3F6F9)';
const colorBackground = `var(--color-background, ${colorGrayDark})`; const colorBackground = `var(--color-background, ${colorGrayDark})`;
const colorOverlay = `var(--color-overlay, rgba(6, 23, 42, 0.75))`; const colorOverlay = 'var(--color-overlay, rgba(6, 23, 42, 0.75))';
const userListBg = `var(--user-list-bg, ${colorOffWhite})`; const userListBg = `var(--user-list-bg, ${colorOffWhite})`;
const userListText = `var(--user-list-text, ${colorGray})`; const userListText = `var(--user-list-text, ${colorGray})`;
@ -41,9 +41,16 @@ const btnDefaultColor = `var(--btn-default-color, ${colorGray})`;
const btnDefaultBg = `var(--btn-default-bg, ${colorWhite})`; const btnDefaultBg = `var(--btn-default-bg, ${colorWhite})`;
const btnDefaultBorder = `var(--btn-default-border, ${colorWhite})`; const btnDefaultBorder = `var(--btn-default-border, ${colorWhite})`;
const btnPrimaryBorder = `var(--btn-primary-border, ${colorPrimary})`; const btnDefaultGhostColor = `var(--btn-default-color, ${colorWhite})`;
const btnDefaultGhostBg = 'var(--btn-default-bg, rgba(255, 255, 255, 0.1))'; // colorWhite, 10%
const btnDefaultGhostBorder = 'var(--btn-default-border, rgba(255, 255, 255, 0.5))'; // colorWhite, 50%
const btnDefaultGhostActiveBg = 'var(--btn-default-active-bg, rgba(255, 255, 255, 0.2))'; // colorWhite, 20%
const btnPrimaryBorder = 'var(--btn-primary-border, rgba(15, 112, 215, 0.5))'; // colorPrimary, 50%
const btnPrimaryColor = `var(--btn-primary-color, ${colorWhite})`; const btnPrimaryColor = `var(--btn-primary-color, ${colorWhite})`;
const btnPrimaryBg = `var(--btn-primary-bg, ${colorPrimary})`; const btnPrimaryBg = `var(--btn-primary-bg, ${colorPrimary})`;
const btnPrimaryHoverBg = 'var(--btn-primary-hover-bg, #0C57A7)';
const btnPrimaryActiveBg = 'var(--btn-primary-active-bg, #0A4B8F)';
const btnSuccessBorder = `var(--btn-success-border, ${colorSuccess})`; const btnSuccessBorder = `var(--btn-success-border, ${colorSuccess})`;
const btnSuccessColor = `var(--btn-success-color, ${colorWhite})`; const btnSuccessColor = `var(--btn-success-color, ${colorWhite})`;
@ -143,9 +150,15 @@ export {
btnDefaultColor, btnDefaultColor,
btnDefaultBg, btnDefaultBg,
btnDefaultBorder, btnDefaultBorder,
btnDefaultGhostColor,
btnDefaultGhostBg,
btnDefaultGhostBorder,
btnDefaultGhostActiveBg,
btnPrimaryBorder, btnPrimaryBorder,
btnPrimaryColor, btnPrimaryColor,
btnPrimaryBg, btnPrimaryBg,
btnPrimaryHoverBg,
btnPrimaryActiveBg,
btnSuccessBorder, btnSuccessBorder,
btnSuccessColor, btnSuccessColor,
btnSuccessBg, btnSuccessBg,