angularjs-blow_your_mind/sass/screen.scss

207 lines
3.3 KiB
SCSS
Raw Normal View History

2013-07-15 01:49:03 +00:00
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass";
// Core variables and mixins
@import "compass_twitter_bootstrap/variables";
// Modify this for custom colors, font-sizes, etc
@import "compass_twitter_bootstrap/mixins";
.clearfix {
@include ctb-clearfix;
}
.hide-text {
@include ctb-hide-text;
}
.input-block-level {
@include ctb-input-block-level;
}
// CSS Reset
@import "compass_twitter_bootstrap/reset";
// Grid system and page structure
@import "compass_twitter_bootstrap/scaffolding";
@import "compass_twitter_bootstrap/grid";
@import "compass_twitter_bootstrap/layouts";
// Base CSS
@import "compass_twitter_bootstrap/type";
@import "compass_twitter_bootstrap/code";
@import "compass_twitter_bootstrap/forms";
@import "compass_twitter_bootstrap/tables";
// Components: Buttons & Alerts
@import "compass_twitter_bootstrap/buttons";
@import "compass_twitter_bootstrap/button-groups";
// Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@import "compass_twitter_bootstrap/navs";
@import "compass_twitter_bootstrap/navbar";
// Components: Popovers
@import "compass_twitter_bootstrap/modals";
@import "compass_twitter_bootstrap/tooltip";
@import "compass_twitter_bootstrap/popovers";
// Components: Misc
@import "compass_twitter_bootstrap/progress-bars";
// Utility classes
@import "compass_twitter_bootstrap/utilities";
// Has to be last to override when necessary
.current-state {
&, * {
font-size: 25px;
}
}
2013-07-18 22:58:23 +00:00
pre, pre code {
2013-07-19 13:30:41 +00:00
font-size: 13px;
2013-07-15 01:49:03 +00:00
}
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 {
2013-07-19 13:30:41 +00:00
width: 900px;
2013-07-15 01:49:03 +00:00
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 {
}