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

Merge pull request #15095 from ramonlsouza/issue-7653

Browse Source 
style: Revised styles for our primary circle buttons
This commit is contained in:
Ramón Souza 2022-06-02 13:19:51 +01:00 committed by GitHub
commit 162c89d701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 136 additions and 57 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`
display: flex;
flex-direction: row;
align-items: center;
`;
const Left = styled.div`

175
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 {
btnSpacing,
borderRadius,
borderSizeSmall,
borderSize,
borderSizeLarge,
smPaddingY,
@ -23,9 +24,15 @@ import {
import {
btnDefaultColor,
btnDefaultBg,
btnDefaultGhostColor,
btnDefaultGhostBg,
btnDefaultGhostActiveBg,
btnDefaultGhostBorder,
btnPrimaryBorder,
btnPrimaryColor,
btnPrimaryBg,
btnPrimaryHoverBg,
btnPrimaryActiveBg,
btnSuccessBorder,
btnSuccessColor,
btnSuccessBg,
@ -49,8 +56,14 @@ import BaseButton from './base/component';
const ButtonIcon = styled(Icon)`
width: 1em;
height: 1em;
text-align: center;
&:before {
width: 1em;
height: 1em;
}
.buttonWrapper & {
font-size: 125%;
}
@ -62,9 +75,6 @@ const ButtonIcon = styled(Icon)`
margin: 0 ${btnSpacing} 0 0;
}
}
.buttonWrapper:hover & {
opacity: .75;
}
`;
const EmojiButtonSibling = styled.span`
@ -146,10 +156,21 @@ const ButtonWrapper = styled(BaseButton)`
box-shadow: none;
}
& > span {
display: block;
text-align: center;
white-space: nowrap;
border: ${borderSizeSmall} solid transparent;
}
${({ size }) => size === 'sm' && `
font-size: calc(${fontSizeSmall} * .85);
padding: ${smPaddingY} ${smPaddingX};
& > span {
border: ${borderSizeLarge} solid transparent;
}
& > label {
display: inline-block;
margin: 0 0 0 ${btnSpacing};
@ -163,10 +184,14 @@ const ButtonWrapper = styled(BaseButton)`
${({ size }) => size === 'md' && `
font-size: calc(${fontSizeBase} * .85);
padding: ${mdPaddingY} ${mdPaddingX};
& > span {
border: ${borderSizeLarge} solid transparent;
}
`}
${({ size }) => size === 'lg' && `
font-size: calc(${fontSizeLarge} * .85);
font-size: ${fontSizeBase};
padding: ${lgPaddingY} ${lgPaddingX};
`}
@ -175,11 +200,85 @@ const ButtonWrapper = styled(BaseButton)`
padding: ${jumboPaddingY} ${jumboPaddingX};
`}
& > span {
display: block;
text-align: center;
white-space: nowrap;
}
${({ size, circle, color }) => size === 'lg' && circle && color === 'primary' && `
&: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};
}
}
`}
${({
size, circle, ghost, color,
}) => size === 'lg' && 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(85%);
background-color: ${btnDefaultGhostBg} !important;
}
}
&:active:focus{
& > span{
filter: brightness(85%);
background-color: ${btnDefaultGhostActiveBg} !important;
}
}
&:active{
& > span{
filter: brightness(85%);
background-color: ${btnDefaultGhostActiveBg};
}
}
`}
${({ ghost }) => ghost && `
& > span{
background-image: none;
background-color: transparent;
}
`}
`;
const ButtonSpan = styled.span`
@ -244,8 +343,11 @@ const ButtonSpan = styled.span`
`}
${({ size }) => size === 'lg' && `
font-size: calc(${fontSizeLarge} * .85);
padding: ${lgPaddingY} ${lgPaddingX};
height: 3rem;
width: 3rem;
display: flex !important;
align-items: center;
justify-content: center;
`}
${({ size }) => size === 'jumbo' && `
@ -263,7 +365,7 @@ const ButtonSpan = styled.span`
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
}
&:hover & {
@ -281,13 +383,13 @@ const ButtonSpan = styled.span`
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnPrimaryColor};
}
`}
${({ color }) => color === 'success' && `
@ -403,12 +505,11 @@ const ButtonSpan = styled.span`
}
`}
${({ ghost, color }) => ghost && color === 'default' && `
${({ 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};
@ -416,7 +517,6 @@ const ButtonSpan = styled.span`
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSizeLarge} ${btnDefaultBg};
}
&:hover,
.buttonWrapper:hover & {
color: ${btnDefaultBg};
@ -426,9 +526,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'primary' && `
color: ${btnPrimaryBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -447,9 +544,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'success' && `
color: ${btnSuccessBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -468,9 +562,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'warning' && `
color: ${btnWarningBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -489,9 +580,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'danger' && `
color: ${btnDangerBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -510,9 +598,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'dark' && `
color: ${btnDarkBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -531,9 +616,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'offline' && `
color: ${btnOfflineBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -552,9 +634,6 @@ const ButtonSpan = styled.span`
${({ ghost, color }) => ghost && color === 'muted' && `
color: ${btnMutedBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -598,6 +677,7 @@ const ButtonSpan = styled.span`
`;
const Button = styled(BaseButton)`
border: ${borderSizeLarge} solid transparent;
border: none;
overflow: visible;
display: inline-block;
@ -671,14 +751,13 @@ const Button = styled(BaseButton)`
${({ 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};
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
}
&:hover,
@ -697,7 +776,7 @@ const Button = styled(BaseButton)`
color: ${btnPrimaryColor};
background-color: ${btnPrimaryBg};
background-clip: padding-box;
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
}
&:hover,
@ -709,7 +788,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'success' && `
color: ${btnSuccessColor};
background-color: ${btnSuccessBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -728,7 +806,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'warning' && `
color: ${btnWarningColor};
background-color: ${btnWarningBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -747,7 +824,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'danger' && `
color: ${btnDangerColor};
background-color: ${btnDangerBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -766,7 +842,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'dark' && `
color: ${btnDarkColor};
background-color: ${btnDarkBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -785,7 +860,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'offline' && `
color: ${btnOfflineColor};
background-color: ${btnOfflineBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -804,7 +878,6 @@ const Button = styled(BaseButton)`
${({ color }) => color === 'muted' && `
color: ${btnMutedColor};
background-color: ${btnMutedBg};
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
@ -824,7 +897,6 @@ const Button = styled(BaseButton)`
color: ${btnDefaultBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -845,7 +917,6 @@ const Button = styled(BaseButton)`
color: ${btnPrimaryBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -866,7 +937,6 @@ const Button = styled(BaseButton)`
color: ${btnSuccessBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -887,7 +957,6 @@ const Button = styled(BaseButton)`
color: ${btnWarningBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -908,7 +977,6 @@ const Button = styled(BaseButton)`
color: ${btnDangerBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -929,7 +997,6 @@ const Button = styled(BaseButton)`
color: ${btnDarkBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -950,7 +1017,6 @@ const Button = styled(BaseButton)`
color: ${btnOfflineBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&:focus,
.buttonWrapper:focus & {
@ -971,7 +1037,6 @@ const Button = styled(BaseButton)`
color: ${btnMutedBg};
background-image: none;
background-color: transparent;
border: ${borderSizeLarge} solid transparent;
&: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 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 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 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 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 btnSuccessColor = `var(--btn-success-color, ${colorWhite})`;
@ -143,9 +150,15 @@ export {
btnDefaultColor,
btnDefaultBg,
btnDefaultBorder,
btnDefaultGhostColor,
btnDefaultGhostBg,
btnDefaultGhostBorder,
btnDefaultGhostActiveBg,
btnPrimaryBorder,
btnPrimaryColor,
btnPrimaryBg,
btnPrimaryHoverBg,
btnPrimaryActiveBg,
btnSuccessBorder,
btnSuccessColor,
btnSuccessBg,