src/admin/scss/custom/main.scss
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: $color-main-bg;
font-family: Roboto, 'Droid Sans', Arial, Helvetica, sans-serif;
font-size: 13px !important;
color: #888 !important;
}
#app {
height: 100%;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.inner-wrap {
@include transition(transform, .5s, ease);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
width: 100%;
height: 100%;
.wrap-fluid {
background: #f5f5f5;
width: auto;
height: 100%;
margin: 0;
padding: 0 0 35px 260px;
position: relative;
.content-wrapper {
padding: 10px;
.content {
padding: 10px;
background: #fff;
border-radius: 5px;
border: solid 1px rgba(219, 219, 219, .7);
outline: none;
position: absolute;
left: 270px;
right: 10px;
bottom: 10px;
top: 85px;
overflow-y: auto;
.helpme {
@include transition(opacity, .3s, ease-out);
cursor: pointer;
font-size: inherit;
opacity: .7;
&:hover {
opacity: 1;
color: #2196f3;
}
;
}
}
}
}
.preloader-section {
position: fixed;
background-color: rgba(0, 0, 0, .5);
z-index: 1003;
left: 0;
right: 0;
bottom: 0;
top: 0;
.preloader-icon {
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
margin-right: -50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
}
}
}
.checkbox {
font-size: inherit;
margin-right: 2px;
cursor: pointer;
&.checked {
margin-right: 0 !important;
}
}
.page-name {
font-size: 2rem;
line-height: 1;
margin: 0 1rem;
padding: .5rem .9375rem;
color: #888;
.hint {
@include transition(opacity, .3s, ease-out);
cursor: pointer;
font-size: inherit;
opacity: .7;
&:hover {
opacity: 1;
}
;
}
}
@media #{$small-only} {
.off-canvas-wrap {
.inner-wrap {
.wrap-fluid {
padding-left: 0;
.content-wrapper {
.content {
left: 10px;
.helpme {
margin: 35px 20px;
font-size: 2.2rem;
}
}
}
}
}
}
}
ins {
color: $color-success;
text-decoration: none;
}
del {
color: $color-warning;
}
.switch {
&.round {
.switch-paddle {
border-radius: 2rem;
&::after {
border-radius: 50%;
}
}
}
}