Skip to content
Snippets Groups Projects
Commit 034a1acb authored by Greg Fodor's avatar Greg Fodor
Browse files

Refactor SCSS

parent 7e8a1321
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/assets/stylesheets/audio.scss
+ 118
− 118
View file @ 034a1acb
......@@ -4,103 +4,103 @@
flex: 10 1 auto;
justify-content: flex-start;
align-items: center;
}
.audio-setup-panel__title {
@extend %top-title;
}
.audio-setup-panel__subtitle {
@extend %top-subtitle;
}
.audio-setup-panel__device-chooser {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.audio-setup-panel__enter-button {
@extend %bottom-button;
}
.audio-setup-panel__device-chooser__dropdown {
@extend %rounded-border;
@extend %default-font;
background-color: black;
padding: 6px;
color: white;
font-size: 1.1em;
width: 90%;
}
.audio-setup-panel__device-chooser__mic-icon {
position: absolute;
left: 7.5%;
top: 10px;
}
.audio-setup-panel__levels {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
.audio-setup-panel__levels__mic {
position:relative;
width: 111px;
height: 111px;
}
.audio-setup-panel__levels__mic_icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
min-width: 111px;
min-height: 111px;
}
.audio-setup-panel__levels__speaker {
position:relative;
width: 111px;
height: 111px;
}
.audio-setup-panel__levels__speaker_icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
min-width: 111px;
min-height: 111px;
}
.audio-setup-panel__levels__level {
position: absolute;
top: 0;
left: 0;
opacity: 1.0;
z-index: 1;
}
.audio-setup-panel__hmd-mic-warning {
margin: 20px;
}
.audio-setup-panel__hmd-mic-warning__label {
vertical-align: middle;
margin-left: 5px;
}
.audio-setup-panel__hmd-mic-warning__icon {
vertical-align: middle;
&__enter-button {
@extend %bottom-button;
}
&__title {
@extend %top-title;
}
&__subtitle {
@extend %top-subtitle;
}
&__device-chooser {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&__dropdown {
@extend %rounded-border;
@extend %default-font;
background-color: black;
padding: 6px;
color: white;
font-size: 1.1em;
width: 90%;
}
&__mic-icon {
position: absolute;
left: 7.5%;
top: 10px;
}
}
&__levels {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 100%;
&__mic {
position:relative;
width: 111px;
height: 111px;
}
&__mic_icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
min-width: 111px;
min-height: 111px;
}
&__speaker {
position:relative;
width: 111px;
height: 111px;
}
&__speaker_icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
min-width: 111px;
min-height: 111px;
}
&__level {
position: absolute;
top: 0;
left: 0;
opacity: 1.0;
z-index: 1;
}
}
&__hmd-mic-warning {
margin: 20px;
&__label {
vertical-align: middle;
margin-left: 5px;
}
&__icon {
vertical-align: middle;
}
}
}
.mic-grant-panel {
......@@ -109,26 +109,26 @@
flex: 10 1 auto;
justify-content: flex-start;
align-items: center;
}
.mic-grant-panel__title {
@extend %top-title;
}
.mic-grant-panel__subtitle {
@extend %top-subtitle;
}
.mic-grant-panel__icon {
flex: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mic-grant-panel__next {
@extend %bottom-button;
margin: auto;
flex: 1 1 20px;
&__title {
@extend %top-title;
}
&__subtitle {
@extend %top-subtitle;
}
&__icon {
flex: 10;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
&__next {
@extend %bottom-button;
margin: auto;
flex: 1 1 20px;
}
}
src/assets/stylesheets/entry.scss
+ 21
− 21
View file @ 034a1acb
......@@ -36,19 +36,20 @@
vertical-align: sub;
margin: 0 0.6em
}
&__screen-sharing-checkbox:checked {
border: 9px double white;
outline: 9px solid white;
outline-offset: -18px;
}
}
.entry-panel__secondary {
width: 100%;
text-align: center;
margin-top: 10px;
cursor: pointer;
color: $grey-text;
&__secondary {
width: 100%;
text-align: center;
margin-top: 10px;
cursor: pointer;
color: $grey-text;
}
}
.entry-button {
......@@ -57,20 +58,19 @@
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.entry-button__icon {
flex: 1 1 90px;
min-width: 90px;
min-height: 90px;
}
&__icon {
flex: 1 1 90px;
min-width: 90px;
min-height: 90px;
}
.entry-button__label {
flex: 10 1 auto;
margin-left: 20px;
font-size: 1.5em;
display: flex;
flex-direction: column;
justify-content: center;
&__label {
flex: 10 1 auto;
margin-left: 20px;
font-size: 1.5em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
src/assets/stylesheets/exited.scss
+ 18
− 18
View file @ 034a1acb
......@@ -6,14 +6,14 @@
justify-content: center;
align-items: center;
flex-direction: column;
}
.exited-panel__title {
font-size: 1.2em;
}
&__title {
font-size: 1.2em;
}
.exited-panel__subtitle {
font-size: 0.8em;
&__subtitle {
font-size: 0.8em;
}
}
.autoexit-panel {
......@@ -23,19 +23,19 @@
justify-content: flex-start;
align-items: center;
padding: 15px;
}
.autoexit-panel__title {
@extend %top-title;
}
.autoexit-panel__subtitle {
@extend %top-subtitle;
}
&__title {
@extend %top-title;
}
&__subtitle {
@extend %top-subtitle;
}
.autoexit-panel__cancel-button {
@extend %bottom-button;
margin-top: 20px;
cursor: pointer;
&__cancel-button {
@extend %bottom-button;
margin-top: 20px;
cursor: pointer;
}
}
src/assets/stylesheets/profile.scss
+ 63
− 62
View file @ 034a1acb
......@@ -15,83 +15,84 @@
height: 100%;
margin: 1em 0;
}
}
.profile-entry__box {
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
flex: 1 1 100%;
width: 60vw;
min-width: 300px;
max-width: 700px;
height: 500px
}
&__box {
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
flex: 1 1 100%;
width: 60vw;
min-width: 300px;
max-width: 700px;
height: 500px;
.profile-entry__box--darkened {
background-color: $darkest-transparent;
}
&--darkened {
background-color: $darkest-transparent;
}
}
.profile-entry__subtitle {
width: 100%;
text-align: center;
font-size: 1.2em;
color: $grey-text;
}
&__subtitle {
width: 100%;
text-align: center;
font-size: 1.2em;
color: $grey-text;
}
.profile-entry__form-field-text {
@extend %rounded-border;
@extend %default-font;
&__form-field-text {
@extend %rounded-border;
@extend %default-font;
color: $light-text;
font-size: 1.2em;
background-color: transparent;
line-height: 2.0em;
padding-left: 1.25em;
padding-right: 1.25em;
margin: 0.5em 0;
}
color: $light-text;
font-size: 1.2em;
background-color: transparent;
line-height: 2.0em;
padding-left: 1.25em;
padding-right: 1.25em;
margin: 0.5em 0;
}
.profile-entry__form-submit {
@extend %default-font;
border: none;
&__form-submit {
@extend %default-font;
border: none;
margin: 8px;
width: 100px;
line-height: 1.5em;
font-size: 1.0em;
margin: 8px;
width: 100px;
line-height: 1.5em;
font-size: 1.0em;
background-color: transparent;
font-weight: bold;
color: white;
cursor: pointer;
background-color: transparent;
font-weight: bold;
color: white;
cursor: pointer;
}
}
.profile-info-header {
display: flex;
flex: 1 1 40px;
width: 100%;
}
.profile-info-header__icon {
cursor: pointer;
width: 20px;
height: 20px;
padding: 15px;
}
&__icon {
cursor: pointer;
width: 20px;
height: 20px;
padding: 15px;
}
.profile-info-header__profile_display_name {
cursor: pointer;
flex: 6 1 auto;
font-size: 1.2em;
line-height: 50px;
}
&__profile_display_name {
cursor: pointer;
flex: 6 1 auto;
font-size: 1.2em;
line-height: 50px;
}
.profile-info-header__app_name {
font-size: 1.8em;
padding-right: 18px;
line-height: 50px;
&__app_name {
font-size: 1.8em;
padding-right: 18px;
line-height: 50px;
}
}
src/assets/stylesheets/ui-root.scss
+ 9
− 12
View file @ 034a1acb
......@@ -20,10 +20,10 @@
grid-template-rows: 1fr 20px minmax(400px, 600px) 20px 1fr;
width: 100%;
height: 100%;
}
.ui-dialog--darkened {
background-color: $dark-transparent;
&--darkened {
background-color: $dark-transparent;
}
}
.ui-dialog-box {
......@@ -37,17 +37,14 @@
border-radius: 8px;
width: 100%;
height: 100%;
&--backgrounded {
filter: blur(1px);
opacity: 0.7;
pointer-events: none;
}
}
.ui-interactive {
pointer-events: auto;
}
.ui-dialog-box--backgrounded {
}
.ui-dialog-box-contents--backgrounded {
filter: blur(1px);
opacity: 0.7;
pointer-events: none;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment