1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import styled from 'styled-components';
import { buttonText } from './common-styles';
export const StyledLabel = styled.span(buttonText, (props: { textOffset: number }) => ({
paddingLeft: props.textOffset > 0 ? `${props.textOffset}px` : 0,
paddingRight: props.textOffset < 0 ? `${-props.textOffset}px` : 0,
textAlign: 'center',
wordBreak: 'break-word',
}));
export const StyledButtonContent = styled.div({
flex: 1,
display: 'grid',
gridTemplateColumns: '1fr auto 1fr',
alignItems: 'center',
padding: '9px',
});
export const transparentButton = {
backdropFilter: 'blur(4px)',
};
export const StyledLeft = styled.div({
justifySelf: 'start',
display: 'flex',
flexDirection: 'column',
});
export const StyledRight = styled(StyledLeft)({
justifySelf: 'end',
});
export const StyledVisibleSide = styled.div({
display: 'flex',
flexDirection: 'row',
});
export const StyledHiddenSide = styled(StyledVisibleSide).attrs({ 'aria-hidden': true })({
height: 0,
visibility: 'hidden',
});
|
