bower-and-grunt-presentation/sass/app.scss

189 lines
2.4 KiB
SCSS

@import 'compass';
// Core variables and mixins
@import "variables";
// Modify this for custom colors, font-sizes, etc
@import "mixins";
// Grid system and page structure
@import "scaffolding";
@import "grid";
// Base CSS
@import "type";
@import "code";
@import "forms";
@import "tables";
// Components: Buttons & Alerts
@import "buttons";
@import "button-groups";
// Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@import "navs";
@import "navbar";
// Components: Popovers
@import "modals";
@import "tooltip";
@import "popovers";
// Components: Misc
@import "progress-bars";
// Utility classes
@import "utilities";
.current-state {
&, * {
font-size: 25px;
}
}
pre code {
font-size: 14px;
}
h1 {
font-size: 65px;
line-height: 65px;
code {
font-size: 60px;
}
}
h2 {
font-size: 45px;
line-height: 45px;
}
.btn {
font-size: 30px;
margin: 20px 0;
padding: 10px;
}
.controls {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
a {
position: absolute;
z-index: 100;
bottom: 30px;
&.previous {
left: 30px;
}
&.next {
right: 30px;
}
@include single-transition(opacity, 0.5s);
&.inactive {
opacity: 0.25;
}
opacity: 1;
font-size: 2em;
}
}
.slide, .slide table {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
table {
width: 800px;
height: 100%;
margin: 0 auto;
}
td {
width: 100%;
height: 100%;
text-align: center;
}
pre {
text-align: left;
}
.slide-hide,.slide-show {
@include single-transition(all, 0.25s);
}
.slide-hide {
opacity: 1;
@include rotate3d(0, 0, 0);
}
.slide-hide.slide-hide-active {
opacity: 0;
@include rotate3d(10, 0, 0);
}
.slide-show {
opacity: 0;
@include rotate3d(10, 0, 0);
}
.slide-show.slide-show-active {
opacity: 1;
@include rotate3d(0, 0, 0);
}
.mind_blown-hide, .mind_blown-show {
@include single-transition(all, 1.0s);
}
.mind_blown-hide {
display: none;
}
.mind_blown-hide.mind_blown-hide-active {
display: none;
}
.mind_blown-show {
@include rotate3d(-180, -180, -30);
opacity: 0;
}
.mind_blown-show.mind_blown-show-active {
@include rotate3d(0, 0, 0);
opacity: 1;
}
.presentation {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.slide {
}
li {
text-align: left;
font-size: 150%;
}