fix(toolbar) Fix styles (#12863)
This commit is contained in:
parent
9409e64066
commit
a594aac078
|
@ -30,24 +30,24 @@
|
||||||
right: -4px;
|
right: -4px;
|
||||||
top: -3px;
|
top: -3px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #F2F3F4;
|
background: #F2F3F4;
|
||||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
&> svg {
|
& > svg {
|
||||||
fill: #000;
|
fill: #040404;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.settings-button-small-icon--disabled {
|
&.settings-button-small-icon--disabled {
|
||||||
background: #36383C;
|
background: #36383C;
|
||||||
|
|
||||||
&> svg {
|
&> svg {
|
||||||
fill: #929292;
|
fill: #929292;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&> svg {
|
& > svg {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -120,12 +120,16 @@
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hangup-button {
|
div.hangup-button {
|
||||||
background-color: $hangupColor;
|
background-color: #CB2233;
|
||||||
|
|
||||||
@media (hover: hover) and (pointer: fine) {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $hangupHoverColor;
|
background-color: #E04757;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #A21B29;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -134,12 +138,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hangup-menu-button {
|
div.hangup-menu-button {
|
||||||
background-color: $hangupColor;
|
background-color: #CB2233;
|
||||||
|
|
||||||
@media (hover: hover) and (pointer: fine) {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $hangupHoverColor;
|
background-color: #E04757;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #A21B29;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,8 +4,6 @@
|
||||||
* Style variables
|
* Style variables
|
||||||
*/
|
*/
|
||||||
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
$hangupColor:#DD3849;
|
|
||||||
$hangupHoverColor: #F25363;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Size variables.
|
* Size variables.
|
||||||
|
|
|
@ -228,7 +228,11 @@ export const commonStyles = (theme: Theme) => {
|
||||||
|
|
||||||
'@media (hover: hover) and (pointer: fine)': {
|
'@media (hover: hover) and (pointer: fine)': {
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
background: theme.palette.ui04
|
backgroundColor: theme.palette.ui04
|
||||||
|
},
|
||||||
|
|
||||||
|
'&:active': {
|
||||||
|
backgroundColor: theme.palette.ui03
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[theme.breakpoints.down(320)]: {
|
[theme.breakpoints.down(320)]: {
|
||||||
|
@ -237,7 +241,7 @@ export const commonStyles = (theme: Theme) => {
|
||||||
},
|
},
|
||||||
|
|
||||||
'&.toggled': {
|
'&.toggled': {
|
||||||
background: theme.palette.ui03
|
backgroundColor: theme.palette.ui03
|
||||||
},
|
},
|
||||||
|
|
||||||
'&.disabled': {
|
'&.disabled': {
|
||||||
|
@ -265,7 +269,15 @@ export const commonStyles = (theme: Theme) => {
|
||||||
padding: 6,
|
padding: 6,
|
||||||
textAlign: 'center' as const,
|
textAlign: 'center' as const,
|
||||||
pointerEvents: 'all' as const,
|
pointerEvents: 'all' as const,
|
||||||
boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)'
|
boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
|
||||||
|
|
||||||
|
'& > div': {
|
||||||
|
marginRight: theme.spacing(2),
|
||||||
|
|
||||||
|
'&:last-of-type': {
|
||||||
|
marginRight: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,8 +16,8 @@ const useStyles = makeStyles()(theme => {
|
||||||
...withPixelLineHeight(theme.typography.labelBold),
|
...withPixelLineHeight(theme.typography.labelBold),
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: '-3px',
|
right: '-4px',
|
||||||
top: '-2px'
|
top: '-3px'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue