Changeset View
Changeset View
Standalone View
Standalone View
src/resources/sass/app.scss
@import 'variables'; | @import 'variables'; | ||||
@import 'bootstrap'; | @import 'bootstrap'; | ||||
@import 'meet'; | |||||
@import 'menu'; | @import 'menu'; | ||||
@import 'toast'; | @import 'toast'; | ||||
@import 'forms'; | @import 'forms'; | ||||
html, | html, | ||||
body, | body, | ||||
body > .outer-container { | body > .outer-container { | ||||
height: 100%; | height: 100%; | ||||
} | } | ||||
#app { | #app { | ||||
display: flex; | display: flex; | ||||
flex-direction: column; | flex-direction: column; | ||||
min-height: 100%; | min-height: 100%; | ||||
overflow: hidden; | |||||
& > nav { | & > nav { | ||||
flex-shrink: 0; | flex-shrink: 0; | ||||
z-index: 12; | z-index: 12; | ||||
} | } | ||||
& > div.container { | & > div.container { | ||||
flex-grow: 1; | flex-grow: 1; | ||||
▲ Show 20 Lines • Show All 163 Lines • ▼ Show 20 Lines | & > ul { | ||||
padding-left: 1.2em; | padding-left: 1.2em; | ||||
&:last-child { | &:last-child { | ||||
margin-bottom: 0; | margin-bottom: 0; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.status-message { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
.app-loader { | |||||
width: auto; | |||||
position: initial; | |||||
.spinner-border { | |||||
color: $body-color; | |||||
} | |||||
} | |||||
svg { | |||||
font-size: 1.5em; | |||||
} | |||||
:first-child { | |||||
margin-right: 0.4em; | |||||
} | |||||
} | |||||
.form-separator { | |||||
position: relative; | |||||
margin: 1em 0; | |||||
display: flex; | |||||
justify-content: center; | |||||
hr { | |||||
border-color: #999; | |||||
margin: 0; | |||||
position: absolute; | |||||
top: 0.75em; | |||||
width: 100%; | |||||
} | |||||
span { | |||||
background: #fff; | |||||
padding: 0 1em; | |||||
z-index: 1; | |||||
} | |||||
} | |||||
#status-box { | #status-box { | ||||
background-color: lighten($green, 35); | background-color: lighten($green, 35); | ||||
.progress { | .progress { | ||||
background-color: #fff; | background-color: #fff; | ||||
height: 10px; | height: 10px; | ||||
} | } | ||||
Show All 9 Lines | &.process-failed { | ||||
background-color: lighten($orange, 30); | background-color: lighten($orange, 30); | ||||
.progress-bar { | .progress-bar { | ||||
background-color: $red; | background-color: $red; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
@keyframes blinker { | |||||
50% { | |||||
opacity: 0; | |||||
} | |||||
} | |||||
.blinker { | |||||
animation: blinker 750ms step-start infinite; | |||||
} | |||||
#dashboard-nav { | #dashboard-nav { | ||||
display: flex; | display: flex; | ||||
flex-wrap: wrap; | flex-wrap: wrap; | ||||
justify-content: center; | justify-content: center; | ||||
& > a { | & > a { | ||||
padding: 1rem; | padding: 1rem; | ||||
text-align: center; | text-align: center; | ||||
Show All 16 Lines | #dashboard-nav { | ||||
svg { | svg { | ||||
width: 6rem; | width: 6rem; | ||||
height: 6rem; | height: 6rem; | ||||
margin: auto; | margin: auto; | ||||
} | } | ||||
} | } | ||||
.form-separator { | |||||
position: relative; | |||||
margin: 1em 0; | |||||
display: flex; | |||||
justify-content: center; | |||||
hr { | |||||
border-color: #999; | |||||
margin: 0; | |||||
position: absolute; | |||||
top: 0.75em; | |||||
width: 100%; | |||||
} | |||||
span { | |||||
background: #fff; | |||||
padding: 0 1em; | |||||
z-index: 1; | |||||
} | |||||
} | |||||
// Various improvements for mobile | // Various improvements for mobile | ||||
@include media-breakpoint-down(sm) { | @include media-breakpoint-down(sm) { | ||||
.card { | .card { | ||||
border: 0; | border: 0; | ||||
} | } | ||||
.card-body { | .card-body { | ||||
padding: 0.5rem 0; | padding: 0.5rem 0; | ||||
▲ Show 20 Lines • Show All 117 Lines • Show Last 20 Lines |