@import "magic-stylez"; html, body { width: 100%; height: 100%; position: relative; background: #f3f2f2; } body { position: relative; &.blank { background: #fff; } &.main_template { padding: 40px 0 0 0; } } #app_content { display: block; position: relative; width: 100%; height: 100%; // margin-left: 220px; // background: #333; // .section { // &, & > .corset { background: #333; color: #ccc; } // &.head, &.head > .corset { // background: #000; color: #ccc; // } // } } #aside { // @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 ) display: block; position: fixed; top: 40px; right: auto; bottom: 0; left: 0; width: 220px; z-index: 99999; background: #e5e5e5; // box-shadow: inset -2px 0 3px 0 #000; border-right: solid 1px #ccc; overflow-y: scroll; .btn { width: 90%; margin: 0 auto; } @include transform( translateZ( 0 ) ); @include transform( translateX( -222px ) ); @include transition (all 0.5s ease-in-out); } #mobile_header { position: fixed; top: 0; right: 0; left: 0; height: 40px; line-height: 40px; z-index: 999999; @include linear-gradient( #222, #111 ); color: #ccc; text-shadow: 0 1px 1px #000; i, i:before { font-size: 24px; line-height: 40px;} text-decoration: none; } body.aside-on { #aside { @include transform( translateX( 0 ) ); } #mobile_header { color: #069; } } @include responsiveStep-sm { body { &.main_template { padding: 0 0 0 220px; } } #aside { @include single_shine( rgba(0,0,0,.23), 1, right, 10px ); display: block; position: fixed; top: 0; @include transform( translateX( 0 ) ); } #mobile_header { display: none; } } .check_switch { display: block; position: relative; margin: 0; padding: 0; margin: 7px 0 0 7px; @include border-radius(100px); width: 30px; height: 15px; border: solid 1px #ccc; background: #c5c5c5; @include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.50) ); .switch_toggle { display: block; position: relative; margin: 0; padding: 0; width: 17px; height: 17px; position: absolute; left: -2px; top: -2px; background: #fff; @include border-radius(100px); border: solid 1px #ccc; @include box-shadow( 0 1px 1px 0 rgba(0,0,0,.30) ); @include linear-gradient(#ffffff, #e5e5e5); } } .check { display: block; position: relative; width: 30px; height: 28px; margin: -2px 2px; border: none; float: left; text-align: center; // clickable and disabled checkbox .checka { display: block; position: absolute; top: 9px; right: 10px; bottom: 9px; left: 9px; border: solid 1px #ccc; color: #ccc; i { display: none; margin: -3px -4px -3px 0; font-size: 15px; text-decoration: none; line-height: 22px; } &.checked i { display: block; } } // clickable checkbox a.checka { color: #aaa; border: solid 1px #999; } } .banner-box.responsive-hero { // .banner-head, .banner-footer { // padding: 10px 0; // } // .banner-footer { background: rgba(0,0,0,.23); } // http://lorempixel.com/g/1200/500/nature/ &.lorempixel { background-color: rgba(255,255,255,.50); background-position: center center; background-repeat: no-repeat; background-size: cover; background-image: image-url('http://lorempixel.com/g/1200/500/nature/'); } } ul.list { display: block; position: relative; list-style: none; margin: 0; padding: 10px; text-align: left; li { display: block; position: relative; margin: 0; padding: 5px; } } // .section .corset { text-align: left; } .section { text-align: left; } .samplebox { display: block; position: relative; margin: 0 0 20px; padding: 10px; border: solid 1px #ccc; background: #fff; h2 { font-size: 16px; } &.raised_shadow { @include raised_shadow( rgba(0, 0, 0, 0.5), 5 ); &.one { @include raised_shadow( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include raised_shadow( rgba(102, 53, 53, 0.5), 5, -10px, 0 ); } } &.pseudo_raised_shadow { @include pseudo_raised_shadow( rgba(0, 0, 0, 0.5), 3 ); &.one { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 30px, 10px, 0, 10px ); } &.two { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 10px, 10px, 20px, 10px ); } } &.lifted_shadow { @include lifted_shadow( rgba(0, 0, 0, 0.5), 2 ); &.one { @include lifted_shadow( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include lifted_shadow( rgba(204, 0, 0, 0.5), 2 ); } } &.perspective_shadow { @include perspective_shadow( rgba(0, 0, 0, 0.42), 1, 30, 3px ); &.one { @include perspective_shadow( rgba(102, 53, 53, 0.5), 5, 50, 5px ); } &.two { @include perspective_shadow( rgba(204, 0, 0, 0.5), 2, 42, 10px ); } } &.vertical_curves { @include vertical_curves( rgba(0, 0, 0, 0.42), 3 ); &.one { @include vertical_curves( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include vertical_curves( rgba(204, 0, 0, 0.5), 2 ); } } &.horizontal_curves { @include horizontal_curves( rgba(0, 0, 0, 0.42), 3 ); &.one { @include horizontal_curves( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include horizontal_curves( rgba(204, 0, 0, 0.5), 2 ); } } &.vertical_shine { @include vertical_shine( rgba(0, 0, 0, 0.3), 2 ); &.one { @include vertical_shine( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include vertical_shine( rgba(204, 0, 0, 0.5), 2 ); } } &.horizontal_shine { @include horizontal_shine( rgba(0, 0, 0, 0.3), 2 ); &.one { @include horizontal_shine( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include horizontal_shine( rgba(204, 0, 0, 0.5), 2 ); } } &.single_shine { @include single_shine( rgba(0, 0, 0, 0.5), 2 ); &.one { @include single_shine( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include single_shine( rgba(204, 0, 0, 0.5), 2 ); } } &.single_curve { @include single_curve( rgba(0, 0, 0, 0.5), 2 ); &.one { @include single_curve( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include single_curve( rgba(204, 0, 0, 0.5), 2 ); } } &.paper_shadow { @include paper_shadow( rgba(0, 0, 0, 0.5), 2 ); &.one { @include paper_shadow( rgba(102, 53, 53, 0.5), 5 ); } &.two { @include paper_shadow( rgba(204, 0, 0, 0.5), 2 ); } } &.smal { width: 40%; float: left; margin: 0 4% 3% 5%; padding: 0; // border: solid 1px #555; // @include verlauf_A; h2 { padding: 20px 30px; text-align: center; } p.warning { font-size: 10px; color: #663333; } } .warning { text-align: left; } } .icon_sample { display: inline-block; position: relative; margin: 5px; padding: 0; width: 100px; font-size: 13px; line-height: 20px; text-align: center; vertical-align: top; @include border-radius(3px); .sample_icon, .sample_name { display: block; position: relative; margin: 0; padding: 0; } .sample_icon { margin: 5px 5px 0; line-height: 60px; font-size: 42px; color: #444; background: #fff; border: solid 1px #ccc; @include border-radius(3px); } .sample_name { font-weight: bold; height: 40px; vertical-align: middle; } &:hover { background: #ccc; i { font-size: 60px; color: #09c; text-shadow: 1px 1px 0 rgba(255,255,255,.75), 0 1px 0 rgba(255,255,255,.75), 1px 0 0 rgba(255,255,255,.75), -1px -1px 0 rgba(0,0,0,.90), 0 -1px 0 rgba(0,0,0,.90), -1px 0 0 rgba(0,0,0,.90); } } } #mainFrame { display: block; position: relative; margin: 0; padding: 0; width: 100%; height: 100%; border: none; }