magic_stylez 0.0.0.1

data/vendor/assets/stylesheets/magic/lists/_nav.scss

@@ -0,0 +1,207 @@
+// ### Nav-List ( ul / ol )
+.nav_list {
+    display: block; position: relative;
+    list-style: none;
+    margin: 0; padding: 0;
+    background: $white;
+    
+    li {
+        display: block; position: relative;
+        list-style: none;
+        margin: 0; padding: 0;
+        border: none;
+        // border-top: solid 1px $white;
+        border-bottom: solid 1px $gray-light;
+        
+        a, span.lst_lnk {
+            display: block; position: relative;
+            margin: 0; padding: 5px 10px;
+            @include sansCondensedBold;
+            line-height: 30px;
+            font-size: 14px;
+            text-decoration: none;
+            color: $gray;
+            background: transparent;
+            .label {
+                font-size: inherit;
+                line-height: inherit;
+                @include border-radius( 10px );
+                padding: 0;
+				width: 30px;
+                margin-left: 10px;
+                text-align: center;
+                // background: $gray-light;
+				background: transparent;
+				color: inherit;
+				float: right;
+                &:before {
+                    
+                }
+            }
+        }
+        
+        .sub_nav {
+            display: block; position: relative;
+            margin: 0; padding: 0;
+            list-style: none;
+            display: none;
+            // @include box-shadow( 
+            //                         inset  0  3px  6px -4px rgba(0,0,0,.70),
+            //                         inset  0 -2px  6px -4px rgba(0,0,0,.70)
+            //                     );
+            background: $gray-softer;
+
+			// ####
+			overflow: hidden;
+			&:before, &:after {
+				display: block; position: absolute; content: "";
+				margin: 0; padding: 0;
+				z-index: 3;
+			}
+			&:before {
+				top: -10px; left: -10px; right: -10px;
+				height: 8px;
+				@include box-shadow( 0 2px 10px 0 rgba(0,0,0,.25));
+			}
+			&:after {
+				bottom: -10px; left: -10px; right: -10px;
+				height: 8px;
+				@include box-shadow( 0 -2px 10px 0 rgba(0,0,0,.20));
+			}
+			// ####
+            
+            li {
+                // &:first-child { border-top: solid 1px $gray-light; }
+                
+                a, span.lst_lnk {
+                    padding: 5px 10px;
+                    line-height: 20px;
+                    font-size: 14px;
+
+                    // background: transparent; color: $gray;
+
+                }
+                
+                .sub_nav {
+                    // background: $gray-soft;
+                    
+                    li {
+                        border: none;
+                        // &:first-child { border-top: solid 1px $gray-light; }
+                    
+                        a, span.lst_lnk {
+                            line-height: 16px;
+                            font-size: 11px;
+                            // color: $gray;
+                            @include sansSemi;
+                        }
+                    }
+                }
+            }
+        }
+        
+        &.current {
+            & > a {
+                color: $blue-light;
+                // background: $gray-softer;
+            }
+        }
+        
+		
+		&.active {
+			background: $blue-light;
+            & > a {
+				margin: 0 0 0 5px;
+                color: $blue-light;
+                background: $white;
+            }
+        }
+		
+		
+		.sub_nav li {
+			&.current > a {
+				background: $gray-softer;
+			}
+			&.active > a {
+				color: $blue-light;
+				background: $gray-softer;
+	        }
+		}
+		
+
+		&.active {
+			background: $blue-light;
+            & > a {
+				margin: 0 0 0 5px;
+                color: $blue-light;
+                background: $white;
+            }
+        }
+		
+		a, span {
+            i { 
+                font-size: 18px;
+                margin-right: 3px;
+            }
+            &:hover {
+                color: $gray-darker;
+                background: $gray-soft;
+            }
+        }
+		
+        &.current, &.active {
+			a:hover, span:hover {
+                color: $blue !important;
+                // background: $gray-softer;
+            }
+			& > .sub_nav { display: block; }
+		}
+        
+        // &:first-child { border-top: none; }
+        &:last-child { border-bottom: none; }
+    }
+    
+    
+    &.border {
+        border: solid 1px $gray-light;
+        // li { border: solid 1px #ccc; }
+    }
+    
+    &.round {
+        @include border-radius(5px);
+        li:first-child { @include border-radius(5px 5px 0 0); }
+        li:last-child { @include border-radius(0 0 5px 5px); }
+    }
+    
+    &.shiny {
+        @include single_shine( rgba(0, 0, 0, 0.13), 2, right, 1px, 10px, 5px, 80 );
+    }
+    
+    
+    &.scroll {
+        position: fixed;
+        // width: 138px;
+        top: 60px;
+    }
+    
+    &.arrow li {
+        a {
+            padding-right: 30px;
+            &:after {
+                display: block;
+                position: absolute;
+                top: 12px; right: 5px;
+                line-height: 30px;
+                content: "\f23b";
+                font-family: magiconsregular;
+                font-weight: normal;
+                font-style: normal;
+                font-size: 18px;
+                color: $gray-light;
+            }
+        }
+        &.current > a { &:after { content: "\f23c"; } }
+        .sub_nav li a:after { top: 7px; line-height: 20px; font-size: 16px; }
+    }
+    
+}

data/vendor/assets/stylesheets/magic-stylez.scss

@@ -0,0 +1,140 @@
+// load bourbon sass helper
+@import "bourbon";
+// load twitter bootstrap
+@import "magic/lib/twbs";
+// load bourbon again, to overwriter twbs helpers
+@import "bourbon";
+
+// load some basic methods
+@import "magic/lib/cross_browser";
+@import "magic/lib/media_querries";
+
+@import "magic/effects/shadows";
+@import "magic/effects/reflections";
+
+// load style helper
+@import "magic/animation";
+@import "magic/text";
+@import "magic/forms";
+
+@import "magic/lists/nav";
+
+
+
+// load layout helper
+@import "magic/layout/section";
+@import "magic/layout/corset";
+@import "magic/layout/tables";
+@import "magic/layout/fullpage_table";
+
+@import "magic/content/banner";
+
+
+
+.btn {
+	@include border-radius(0);
+	&.btn-default, &.btn-primary, &.btn-success, &.btn-info, &.btn-warning, &.btn-danger {
+		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255, .42));
+	}
+}
+
+
+
+// other helpers
+
+
+
+@mixin blur-filter( $blur ) {
+	@include magic_prefixer(filter, blur(#{$blur}));
+}
+
+
+
+
+
+
+@mixin squareSize( $size ) {
+	width: #{ $size }px;
+	height: #{ $size }px;
+}
+
+
+
+
+
+
+
+
+
+
+// media max-width: 767px
+@include responsiveStep-xs-only {
+	.press-xs { margin-bottom:20px; }
+	.hide-xs { display: none !important; }
+}
+
+// media min-width: 768px and max-width: 991px
+@include responsiveStep-sm-only {
+	.press-sm { margin-bottom:20px; }
+	.hide-sm { display: none; }
+}
+
+// media min-width: 992px and max-width: 1199px
+@include responsiveStep-md-only {
+	.press-md { margin-bottom:20px; }
+	.hide-md { display: none; }
+}
+
+// media min-width: 1200px and max-width: 1599px
+@include responsiveStep-lg-only {
+	.press-lg { margin-bottom:20px; }
+	.hide-lg { display: none; }
+}
+
+// media min-width: 1600px
+@include responsiveStep-xl {
+	.press-xl { margin-bottom:20px; }
+	.hide-xl { display: none; }
+}
+
+
+@include responsiveStep-sm {
+	.left-text-sm { text-align: left; }
+}
+
+
+.press { margin-bottom: 20px; }
+.no-press { margin-bottom: 0; }
+.col-press { margin-bottom: 30px; }
+
+.press-top { margin-top: 20px; }
+.press-left { margin-left: 20px; }
+.press-right { margin-right: 20px; }
+
+
+.no-press-top { margin-top: 0; }
+.no-press-left { margin-left: 0; }
+.no-press-right { margin-right: 0; }
+
+
+
+
+.left_text { text-align: left !important; }
+.center_text { text-align: center !important; }
+.right_text { text-align: right !important; }
+
+
+
+@each $size in 0, 5, 10, 15, 20, 30, 40, 50 {
+    
+    .padding_#{$size}    { padding: #{$size}px; }
+    .v_padding_#{$size}  { padding-top: #{$size}px; padding-bottom: #{$size}px; }
+    .h_padding_#{$size}  { padding-left: #{$size}px; padding-right: #{$size}px; }
+    
+    .margin_#{$size}     { margin: #{$size}px; }
+    .v_margin_#{$size}   { margin-top: #{$size}px; margin-bottom: #{$size}px; }
+    .h_margin_#{$size}   { margin-left: #{$size}px; margin-right: #{$size}px; }
+
+	.r_#{$size} { margin-right: #{$size}px !important; }
+    .l_#{$size} { margin-left: #{$size}px !important; }
+}