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