mirror of https://github.com/jitsi/jitsi-meet
ref: Styles refactor (#13196)
Move some styles from SCSS to JSS Remove unnecessary styles Remove feedback stars animation optionpull/13193/head
Robert Pintilii
2 years ago
committed by
GitHub
parent
33564a311b
commit
cc91cfe7b5
@ -1,101 +0,0 @@ |
|||||||
.button-control { |
|
||||||
box-sizing: border-box; |
|
||||||
display: inline-block; |
|
||||||
border: 1px solid $buttonBorder; |
|
||||||
vertical-align: baseline; |
|
||||||
height: 30px; |
|
||||||
min-width: 60px; |
|
||||||
padding: 4px 10px; |
|
||||||
margin: 0; |
|
||||||
line-height: 1.5em; |
|
||||||
outline: none; |
|
||||||
background-color: transparent; |
|
||||||
float: right; |
|
||||||
font-size: 14px; |
|
||||||
margin-left: 10px; |
|
||||||
color: $buttonColor; |
|
||||||
font-weight: $buttonFontWeight; |
|
||||||
@include transition(background-color .1s ease-out); |
|
||||||
|
|
||||||
&[disabled] { |
|
||||||
color: #666; |
|
||||||
cursor: default; |
|
||||||
} |
|
||||||
|
|
||||||
&_full-width { |
|
||||||
margin: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border: 1px solid $buttonHoverBorder; |
|
||||||
background-color: $buttonHoverBackground; |
|
||||||
@include transition(background-color .1s ease-in); |
|
||||||
} |
|
||||||
|
|
||||||
&:active { |
|
||||||
@include box-shadow(0, 0, 1px, $buttonShadowColor, true); |
|
||||||
} |
|
||||||
|
|
||||||
&_light { |
|
||||||
color: $defaultDarkColor; |
|
||||||
background-color: $buttonLightBackground; |
|
||||||
border: 1px solid $buttonLightBorder; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border: 1px solid $buttonLightHoverBorder; |
|
||||||
background-color: $buttonLightHoverBackground; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&_link { |
|
||||||
color: $buttonLinkColor; |
|
||||||
background-color: $buttonLinkBackground; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: $buttonLinkBackground; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&_overlay { |
|
||||||
color: $primaryButtonColor; |
|
||||||
background-color: $overlayButtonBg; |
|
||||||
border-radius: 2px; |
|
||||||
border: none; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
background-color: $primaryButtonBackground; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&_primary { |
|
||||||
background-color: $primaryButtonBackground; |
|
||||||
border: 1px solid $primaryButtonBackground; |
|
||||||
color: $primaryButtonColor !important; |
|
||||||
font-weight: $primaryButtonFontWeight; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border: 1px solid $primaryButtonHoverBackground; |
|
||||||
background-color: $primaryButtonHoverBackground; |
|
||||||
} |
|
||||||
|
|
||||||
&[disabled] { |
|
||||||
color: $primaryButtonColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&_close { |
|
||||||
color: $defaultFontColor; |
|
||||||
} |
|
||||||
&_submit { |
|
||||||
color: $linkFontColor; |
|
||||||
&:hover { |
|
||||||
color: $linkHoverFontColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&_center { |
|
||||||
float: none !important; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
.form-control { |
|
||||||
padding: $formPadding 0; |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
padding-top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
padding-bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&__text { |
|
||||||
margin: 8px 0; |
|
||||||
font-size: 1em |
|
||||||
} |
|
||||||
|
|
||||||
&__label { |
|
||||||
font-size: 1em; |
|
||||||
font-weight: $labelFontWeight; |
|
||||||
} |
|
||||||
|
|
||||||
&__em { |
|
||||||
color: $inputControlEmColor; |
|
||||||
} |
|
||||||
|
|
||||||
&__container { |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
margin-top: 5px; |
|
||||||
margin-bottom: 5px; |
|
||||||
@include flex(); |
|
||||||
|
|
||||||
.button-control { |
|
||||||
margin: 1px 0 1px 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&__right { |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Set a specific color for read only style. |
|
||||||
*/ |
|
||||||
input:read-only { |
|
||||||
color: $readOnlyInputColor; |
|
||||||
} |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
.input-control { |
|
||||||
@include transition(all .2s ease-in); |
|
||||||
display: inline-block; |
|
||||||
width: 100%; |
|
||||||
padding: 5px 7px; |
|
||||||
border-radius: $borderRadius; |
|
||||||
line-height: 32px; |
|
||||||
height: 32px; |
|
||||||
text-align: left; |
|
||||||
margin-bottom: 8px; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-bottom: inherit; |
|
||||||
} |
|
||||||
|
|
||||||
&::selection { |
|
||||||
background-color: $defaultDarkSelectionColor; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
&.error { |
|
||||||
color: $errorColor; |
|
||||||
border-color: $errorColor; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@include placeholder { |
|
||||||
color: $placeHolderColor; |
|
||||||
} |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
.link { |
|
||||||
cursor: pointer; |
|
||||||
color: $linkFontColor; |
|
||||||
@include transition(color .1s ease-out); |
|
||||||
|
|
||||||
&:hover { |
|
||||||
color: $linkHoverFontColor; |
|
||||||
text-decoration: underline; |
|
||||||
@include transition(color .1s ease-in); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Helper links are links that are meant to open a documentation page or more |
|
||||||
* detailed info. |
|
||||||
*/ |
|
||||||
.helper-link { |
|
||||||
@extend .link; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
.embed-meeting { |
|
||||||
&-dialog { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
&-copy { |
|
||||||
color: white; |
|
||||||
font-size: 15px; |
|
||||||
margin-left: auto; |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
&-code { |
|
||||||
background: transparent; |
|
||||||
border: 1px solid #A4B8D1; |
|
||||||
color: white; |
|
||||||
font-size: 15px; |
|
||||||
height: 165px; |
|
||||||
line-height: 24px; |
|
||||||
padding: 8px; |
|
||||||
width: 100%; |
|
||||||
resize: vertical; |
|
||||||
} |
|
||||||
|
|
||||||
&-trigger { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
padding: 8px 8px 8px 16px; |
|
||||||
margin-top: 24px; |
|
||||||
width: calc(100% - 24px); |
|
||||||
height: 24px; |
|
||||||
background: #2A3A4B; |
|
||||||
border: 1px solid #5E6D7A; |
|
||||||
border-radius: 4px; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
.jitsi-icon { |
|
||||||
margin-right: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
@-webkit-keyframes shake-rotate { |
|
||||||
0% { |
|
||||||
-webkit-transform:scale(1) rotate(0deg); |
|
||||||
transform:scale(1) rotate(0deg) |
|
||||||
} |
|
||||||
|
|
||||||
50% { |
|
||||||
-webkit-transform:scale(.8) rotate(-5deg); |
|
||||||
transform:scale(.8) rotate(-5deg) |
|
||||||
} |
|
||||||
|
|
||||||
to { |
|
||||||
-webkit-transform:scale(1) rotate(3deg); |
|
||||||
transform:scale(1) rotate(3deg) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes shake-rotate { |
|
||||||
0% { |
|
||||||
-webkit-transform:scale(1) rotate(0deg); |
|
||||||
transform:scale(1) rotate(0deg) |
|
||||||
} |
|
||||||
|
|
||||||
50% { |
|
||||||
-webkit-transform:scale(.8) rotate(-5deg); |
|
||||||
transform:scale(.8) rotate(-5deg) |
|
||||||
} |
|
||||||
|
|
||||||
to { |
|
||||||
-webkit-transform:scale(1) rotate(3deg); |
|
||||||
transform:scale(1) rotate(3deg) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.shake-rotate { |
|
||||||
display: inline-block; |
|
||||||
|
|
||||||
-webkit-animation-duration: .4s; |
|
||||||
animation-duration: .4s; |
|
||||||
-webkit-animation-iteration-count: infinite; |
|
||||||
animation-iteration-count: infinite; |
|
||||||
-webkit-animation-name: shake-rotate; |
|
||||||
animation-name: shake-rotate; |
|
||||||
-webkit-animation-timing-function: ease-in-out; |
|
||||||
animation-timing-function: ease-in-out |
|
||||||
} |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
// @flow
|
|
||||||
|
|
||||||
/* eslint-disable react/jsx-no-bind */ |
|
||||||
|
|
||||||
import React from 'react'; |
|
||||||
import { connect } from 'react-redux'; |
|
||||||
|
|
||||||
import { openDialog } from '../../base/dialog'; |
|
||||||
import { translate } from '../../base/i18n/functions'; |
|
||||||
|
|
||||||
import EmbedMeetingDialog from './EmbedMeetingDialog'; |
|
||||||
|
|
||||||
type Props = { |
|
||||||
|
|
||||||
/** |
|
||||||
* Open the embed meeting dialog. |
|
||||||
*/ |
|
||||||
openEmbedDialog: Function, |
|
||||||
|
|
||||||
/** |
|
||||||
* Invoked to obtain translated strings. |
|
||||||
*/ |
|
||||||
t: Function, |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Component meant to trigger showing the EmbedMeetingDialog. |
|
||||||
* |
|
||||||
* @returns {React$Element<any>} |
|
||||||
*/ |
|
||||||
function EmbedMeetingTrigger({ t, openEmbedDialog }: Props) { |
|
||||||
/** |
|
||||||
* Handles opening the embed dialog. |
|
||||||
* |
|
||||||
* @returns {void} |
|
||||||
*/ |
|
||||||
function onClick() { |
|
||||||
openEmbedDialog(EmbedMeetingDialog); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* KeyPress handler for accessibility. |
|
||||||
* |
|
||||||
* @param {React.KeyboardEventHandler<HTMLDivElement>} e - The key event to handle. |
|
||||||
* |
|
||||||
* @returns {void} |
|
||||||
*/ |
|
||||||
function onKeyPress(e) { |
|
||||||
if (e.key === ' ' || e.key === 'Enter') { |
|
||||||
e.preventDefault(); |
|
||||||
onClick(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div |
|
||||||
aria-label = { t('embedMeeting.title') } |
|
||||||
className = 'embed-meeting-trigger' |
|
||||||
onClick = { onClick } |
|
||||||
onKeyPress = { onKeyPress } |
|
||||||
role = 'button' |
|
||||||
tabIndex = { 0 }> |
|
||||||
{t('embedMeeting.title')} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const mapDispatchToProps = { openEmbedDialog: openDialog }; |
|
||||||
|
|
||||||
export default translate(connect(null, mapDispatchToProps)(EmbedMeetingTrigger)); |
|
||||||
Loading…
Reference in new issue