taiga-front/app/styles/layout/base.scss

92 lines
2.0 KiB
SCSS

// Basic layout styles
html {
height: 100%;
min-height: 100%;
width: 100%;
}
body {
background: #fff; // fallback
color: #444;
font: 16px/21px 'DroidSans', Arial, sans-serif;
-webkit-font-smoothing: antialiased; // Fix for webkit renderin
height: 100%;
min-height: 100%;
overflow-x: hidden; // open-projects-nav
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
width: 100%;
.projects-nav {
@include transform(translate3d(-300px, 0, 0));
@include transition (transform 1s ease);
}
.master {
@include transform(translate3d(0, 0, 0));
@include transition (transform 1s ease);
&.ng-animate {
@include transition();
}
}
.menu {
@include transform(translate3d(0, 0, 0));
@include transition (transform 1s ease);
}
&.open-projects-nav {
.projects-nav {
@include transform(translate3d(0, 0, 0));
@include transition (transform 1s ease);
}
.master {
@include transform(translate3d(300px, 0, 0));
@include transition (transform 1s ease);
&.ng-animate {
@include transition();
}
}
.menu {
@include transform(translate3d(300px, 0, 0));
@include transition (transform 1s ease);
}
}
}
.master {
height: 100%;
min-height: 100%;
position: relative;
}
.wrapper {
@include table-flex();
min-height: 100%;
padding-left: 90px;
}
.menu-secondary {
@include table-flex-child(1, 260px, 0, 260px);
background: $whitish;
padding: 2rem 1rem;
}
.menu-tertiary {
@include table-flex-child(1, 190px, 0, 190px);
background-color: $dark-grayish-lime-green;
padding: 2em 1em;
}
.extrabar {
background: $whitish;
}
.main {
@include table-flex-child(8, 600px, 0, 600px);
padding: 2rem;
}
.icon {
@extend %taiga;
}
.hidden {
display: none;
}