82 lines
1.9 KiB
SCSS
82 lines
1.9 KiB
SCSS
.viewport {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/* encapsulate the various syntax in helper clases */
|
|
/* inspired by http://infrequently.org/2009/08/css-3-progress/ */
|
|
|
|
/* items flex/expand vertically */
|
|
.vbox {
|
|
/* previous syntax */
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: box;
|
|
|
|
-webkit-box-orient: vertical;
|
|
-moz-box-orient: vertical;
|
|
-ms-box-orient: vertical;
|
|
box-orient: vertical;
|
|
|
|
/* current syntax */
|
|
display: -webkit-flex;
|
|
display: -moz-flex;
|
|
display: -ms-flex;
|
|
display: flex;
|
|
|
|
-webkit-flex-direction: column;
|
|
-moz-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gradient {
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
|
|
background: #ebf1f6; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0); /* IE6-9 */
|
|
}
|
|
|
|
.backgroundImage {
|
|
background-image: url(http://via.placeholder.com/411x823);
|
|
}
|
|
|
|
.appPanel {
|
|
/* previous syntax */
|
|
-webkit-box-flex: 1;
|
|
-moz-box-flex: 1;
|
|
-ms-box-flex: 1;
|
|
box-flex: 1;
|
|
|
|
/* current syntax */
|
|
-webkit-flex: 1;
|
|
-moz-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
|
|
height: 100vh;
|
|
width: 100vw;
|
|
|
|
overflow-y: auto;
|
|
/* background-color: white;*/
|
|
}
|
|
|
|
[data-id~="main"] {
|
|
z-index: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
}
|
|
|
|
[data-id~="news"] {
|
|
z-index: 1000;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
}
|