src/assets/styles/_main.scss
@import 'mixins';
@import 'common';
@import 'reset';
@import 'chart';
.vzb-placeholder {
background-color: $vzb-color-white;
position: relative;
&.vzb-loading-first,
&.vzb-loading-data {
&::before {
background-color: $vzb-loader-bgcolor;
bottom: 0;
content: ' ';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 9998;
}
&::after {
@extend %vzb-loader-spinner;
}
}
//the first load would hide the internal div, so no chart will be visible
&.vzb-loading-first {
> div {
visibility: hidden;
}
}
//all other loadings would not hide the div and be semi-transparent
&.vzb-loading-data {
&::before {
@include opacity(0.8);
}
}
//loading anything
&.vzb-force-fullscreen {
@include position(fixed, 0 0 0 0);
display: block;
height: auto !important;
margin: 0;
width: auto !important;
z-index: 9997;
}
.vzb-icon {
height: 15px;
width: 15px;
path {
fill: $vzb-color-primary;
}
}
.fa {
direction: ltr;
}
.vzb-error-message {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
.vzb-error-message-background {
background-color: #fdfdfd;
height: 100%;
opacity: 0.4;
width: 100%;
}
.vzb-error-message-box {
@include box-shadow(0, 8px, 15px, rgba(0, 0, 0, 0.24));
z-index: 9997;
background-color: #fff;
border-top: 1px solid #f7f7f7;
padding: 30px 15px 10px;
overflow: hidden;
position: absolute;
top: 10%;
left: 5%;
bottom: 60px;
width: 90%;
height: 80%;
text-align: center;
}
.vzb-error-message-close {
@include rtl {
left: 5px;
right: auto;
}
cursor: pointer;
fill: $vzb-color-primary;
fill-opacity: 0.7;
height: 25px;
position: absolute;
right: 5px;
top: 5px;
width: 25px;
&:hover {
fill-opacity: 1;
}
svg {
width: 25px;
height: 25px;
}
}
a {
cursor: pointer;
text-decoration: underline;
}
p {
max-width: 600px;
color: $vzb-color-grey;
white-space: normal;
display: block;
margin: auto;
font-size: $vzb-font-size-regular;
line-height: 1.5;
}
.vzb-error-message-expand {font-size: $vzb-font-size-small;}
.vzb-error-message-outro {font-size: $vzb-font-size-small;}
textarea {
margin: 10px;
max-width: 600px;
min-height: 60px;
width: calc(100% - 30px);
font-size: $vzb-font-size-tiny;
font-family: monospace;
}
}
}
.vzb-dialog-scrollable {
@include overflow-mobile;
&::-webkit-scrollbar {
width: 6px;
-webkit-appearance: none;
}
&::-webkit-scrollbar-thumb {
background: lighten($vzb-color-primary, 30%);
border-radius: 2px;
cursor: pointer;
}
&::-webkit-scrollbar-track {
width: 5px;
background: lighten($vzb-color-primary, 30%);
border-radius: 2px;
background-clip: content-box;
border: 2px solid transparent;
}
}
.vzb-tool {
$height-title: 8px;
$size-button-list: 60px;
$size-button-list-small: 50px;
$size-timeslider: 50px;
$size-timeslider-medium: 40px;
$size-timeslider-small: 40px;
$vzb-button-expand-width: 290px;
user-select: none;
display: flex;
position: relative;
width: 100%;
height: 100%;
font-family: $vzb-font-family;
font-size: $vzb-font-size-base; //important to set the base in px
overflow: hidden;
direction: ltr;
//text-align: left;
.vzb-dynamic-background {
font-family: "Lucida Console", "Monaco", monospace;
}
&.vzb-rtl {
direction: rtl;
}
.vzb-tool-title {
@include position(absolute, 0 0 null 0);
background-color: $vzb-color-primary-lightest;
color: $vzb-color-grey-dark;
display: none !important;
font-size: $vzb-font-size-small;
height: $height-title;
padding: 10px;
}
.vzb-tool-stage {
flex: 1 auto;
display: flex;
flex-direction: column;
direction: ltr;
transform: translate3d(0, 0, 0);
.vzb-tool-viz {
flex: 1 auto;
position: relative;
}
.vzb-tool-time-speed-sliders {
flex: 0 0 $size-timeslider;
height: $size-timeslider;
display: flex;
.vzb-tool-timeslider {
flex: 1 1 auto;
}
.vzb-tool-stepped-speed-slider {
flex: 0 0 35px;
}
}
}
.vzb-tool-sidebar {
display: flex;
flex: 0 0 auto;
position: static;
.vzb-tool-dialogs {
position: static;
}
.vzb-tool-buttonlist {
flex: 1 0 auto;
background-color: $vzb-color-primary-lightest;
width: $size-button-list;
overflow: hidden;
white-space: normal;
position: static;
//overflow: visible;
text-align: center;
input,
textarea,
keygen,
select,
button {
font-family: $vzb-font-family;
}
&:-webkit-scrollbar {
display: none;
}
}
}
// hide sections
&.vzb-title-off {
.vzb-tool-title {
display: none;
}
}
&.vzb-timeslider-off {
.vzb-tool-time-speed-sliders {
display: none;
}
}
&.vzb-buttonlist-off {
.vzb-tool-buttonlist {
display: none;
}
}
//Responsiveness
&.vzb-small {
//$pos-top: $height-title - 8px;
//@include position(absolute, $pos-top 0 0 0);
.vzb-tool-stage {
.vzb-tool-time-speed-sliders {
flex: 0 0 $size-timeslider-small;
height: $size-timeslider-small;
}
}
&.vzb-portrait {
flex-direction: column;
.vzb-tool-sidebar {
flex-direction: column;
.vzb-tool-buttonlist {
height: $size-button-list-small;
width: auto;
white-space: nowrap;
}
}
}
.vzb-tool-title {
font-size: $vzb-font-size-small;
height: $height-title - 8px;
}
&.vzb-buttonlist-off {
.vzb-tool-buttonlist {
display: none;
}
}
&.vzb-timeslider-off {
.vzb-tool-time-speed-sliders {
display: none;
}
}
.vzb-data-warning text {
font-size: $vzb-font-size-tiny;
}
}
&.vzb-medium {
.vzb-tool-stage {
.vzb-tool-time-speed-sliders {
flex: 0 0 $size-timeslider-medium;
height: $size-timeslider-medium;
}
}
}
&.vzb-large {
&.vzb-dialog-expand-true {
.vzb-tool-sidebar {
flex-direction: column;
flex: 0 0 $vzb-button-expand-width;
max-width: $vzb-button-expand-width;
.vzb-tool-dialogs {
flex: 1 auto;
display: flex;
flex-direction: column;
background-color: $vzb-color-primary-lightest;
overflow: hidden;
}
.vzb-tool-buttonlist {
flex: 0 0 auto;
width: $vzb-button-expand-width;
padding: 2px 0 5px;
}
}
}
}
//tooltip
.vzb-tooltip {
@include border-radius(3px);
@include opacity(0.9);
background: $vzb-color-grey-dark;
color: $vzb-color-white;
font-size: $vzb-font-size-regular;
font-weight: 300;
padding: 7px 10px;
position: absolute;
z-index: 11;
}
//accordion
.vzb-accordion {
margin-top: 1px;
.vzb-accordion-section {
position: relative;
transition: none;
overflow: hidden;
max-height: 2.5em;
padding-bottom: 11px;
width: auto;
border: 0;
.vzb-accordion-section-title>span:first-child {
//@include rtl {
//}
display: block;
height: 2em;
vertical-align: middle;
background-color: $vzb-color-primary-lightest;
cursor: pointer;
&::after {
@include rtl {
@include rotate(225deg);
left: 0.75em;
right: auto;
}
@include rotate(45deg);
content: '';
position: absolute;
top: 0.75em;
right: 0.75em;
width: 5px;
height: 5px;
border-right: 1px solid $vzb-color-primary;
border-top: 1px solid $vzb-color-primary;
}
}
&.vzb-accordion-active {
max-height: none;
transition: max-height 0.3s ease-in-out;
.vzb-accordion-section-title>span:first-child::after {
@include rotate(135deg);
}
}
}
}
input[type=range]::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
input[type=range]::-moz-range-track {
background: transparent;
cursor: pointer;
height: 0;
border: 0;
}
input[type=range]::-ms-track {
background: transparent;
border-color: transparent;
border-width: 10px 0;
color: transparent;
cursor: pointer;
height: 0;
}
input[type=range]::-ms-fill-lower {
background: transparent;
}
input[type=range]:focus::-ms-fill-lower {
background: transparent;
}
input[type=range]::-ms-fill-upper {
background: transparent;
}
input[type=range]:focus::-ms-fill-upper {
background: transparent;
}
input[type=range]::-ms-tooltip {
display: none;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
//Data warning
.vzb-data-warning {
cursor: pointer;
fill: $vzb-color-accent-orange;
path {
fill: $vzb-color-accent-orange;
}
text {
text-transform: uppercase;
font-size: $vzb-font-size-small;
}
&:hover text {
text-decoration: underline;
}
}
.vzb-colorpicker-svg {
direction: ltr;
}
//common tool components
@import '../../components/timeslider/timeslider';
@import '../../components/dialogs/dialog';
@import '../../components/buttonlist/buttonlist';
@import '../../components/treemenu/treemenu';
@import '../../components/datawarning/datawarning';
@import '../../components/datanotes/datanotes';
@import '../../components/steppedspeedslider/steppedspeedslider';
}