From 034a1acbd8f951abbf083832fdd7d1e68eafd76f Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 30 Mar 2018 10:31:14 -0700
Subject: [PATCH] Refactor SCSS
---
src/assets/stylesheets/audio.scss | 236 ++++++++++++++--------------
src/assets/stylesheets/entry.scss | 42 ++---
src/assets/stylesheets/exited.scss | 36 ++---
src/assets/stylesheets/profile.scss | 125 +++++++--------
src/assets/stylesheets/ui-root.scss | 21 ++-
5 files changed, 229 insertions(+), 231 deletions(-)
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index 93e819f7a..67aac6996 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -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;
+ }
}
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 2915f56da..bdd20d1ee 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -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;
+ }
}
-
diff --git a/src/assets/stylesheets/exited.scss b/src/assets/stylesheets/exited.scss
index 341d382fe..72959090e 100644
--- a/src/assets/stylesheets/exited.scss
+++ b/src/assets/stylesheets/exited.scss
@@ -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;
+ }
}
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 9b45afd38..000e974bb 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -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;
+ }
}
+
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 74f4ad4a3..debc2b188 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -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;
-}
--
GitLab