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

158 lines
3.1 KiB
JavaScript
Raw Normal View History

2021-11-06 03:59:01 +08:00
import styled from 'styled-components';
2022-02-15 04:20:50 +08:00
import Button from "/imports/ui/components/common/button/component";
2022-02-15 22:51:51 +08:00
import Icon from '/imports/ui/components/common/icon/component';
2023-05-03 03:24:06 +08:00
import MenuItem from "@mui/material/MenuItem";
2021-11-06 03:59:01 +08:00
import { colorWhite, colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
2022-03-04 04:48:56 +08:00
import { mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
import Menu from "@mui/material/Menu";
const MenuWrapper = styled(Menu)`
${({ isMobile }) => isMobile && `
flex-direction: column;
align-items: center;
padding: .5rem 0;
`}
2023-08-14 21:47:23 +08:00
${({ $isHorizontal, isMobile }) => ($isHorizontal || isMobile) && `
ul {
display: flex;
}
li:hover {
background-color: unset !important;
}
`}
`;
2021-11-06 03:59:01 +08:00
const MenuItemWrapper = styled.div`
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
`;
2021-11-06 03:59:01 +08:00
const Option = styled.div`
line-height: 1;
margin-right: 1.65rem;
margin-left: .5rem;
white-space: normal;
overflow-wrap: anywhere;
padding: .1rem 0;
[dir="rtl"] & {
margin-right: .5rem;
margin-left: 1.65rem;
}
${({ textColor }) => textColor && `
color: ${textColor};
`}
${({ isHorizontal, isMobile }) => (isHorizontal || isMobile) && `
margin-right: 0;
margin-left: 0;
`}
2021-11-06 03:59:01 +08:00
`;
const CloseButton = styled(Button)`
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
width: 100%;
height: 5rem;
background-color: ${colorWhite};
padding: 1rem;
border-radius: 0;
z-index: 1011;
font-size: calc(${fontSizeLarge} * 1.1);
box-shadow: 0 0 0 2rem ${colorWhite} !important;
border: ${colorWhite} !important;
cursor: pointer !important;
2022-03-04 04:48:56 +08:00
@media ${mediumUp} {
display: none;
}
2021-11-06 03:59:01 +08:00
`;
const IconRight = styled(Icon)`
display: flex;
justify-content: flex-end;
flex: 1;
`;
const BBBMenuInformation = styled.div`
padding: 12px 16px;
margin: 0;
`;
2021-11-06 03:59:01 +08:00
const BBBMenuItem = styled(MenuItem)`
transition: none !important;
font-size: 90% !important;
&:focus,
&:hover {
i {
color: #FFF;
}
color: #FFF !important;
background-color: ${colorPrimary} !important;
}
2021-11-11 21:36:00 +08:00
${({ emoji }) => emoji === 'yes' && `
2021-11-06 03:59:01 +08:00
div,
i {
color: ${colorPrimary};
}
&:focus,
&:hover {
div,
i {
color: #FFF ;
}
}
`}
2024-04-24 01:56:23 +08:00
${({ $roundButtons, $isToggle }) => $roundButtons && !$isToggle && `
2023-08-05 03:14:57 +08:00
&:focus,
&:hover {
background-color: ${colorWhite} !important;
div div div {
background-color: ${colorPrimary} !important;
2023-08-09 02:28:05 +08:00
border: 1px solid ${colorPrimary} !important;
2023-08-05 03:14:57 +08:00
}
}
`}
2024-04-24 01:56:23 +08:00
${({ $isToggle }) => $isToggle && `
&:focus,
&:hover {
color: inherit !important;
}
`}
2021-11-06 03:59:01 +08:00
`;
const Skeleton = styled.div`
padding: 12px 16px;
font-size: 0.9em !important;
line-height: 1;
`;
const SkeletonWrapper = styled.span`
width: 100%;
`;
2021-11-06 03:59:01 +08:00
export default {
MenuWrapper,
MenuItemWrapper,
2021-11-06 03:59:01 +08:00
Option,
CloseButton,
IconRight,
BBBMenuItem,
BBBMenuInformation,
Skeleton,
SkeletonWrapper,
2021-11-06 03:59:01 +08:00
};