/* Table of Contents - Clearfix - Mixins - Buttons and Links - Layout - Header - Icon Navigation - Top Info - Progress Bar */ /* Clearfix -------------------------------------------- */ .clearfix { zoom:1; &:before, &:after { content: "\0020"; display: block; height: 0; overflow: hidden; } &:after { clear: both; } } /* Mixins ----------------------------------------------- */ @mixin marginPaddingZero() { margin: 0; padding: 0; } // Establishes the prequisits for sprite with background-image. // Background-position for normal and hover states need to // be declared separetely @mixin sprite($image, $width, $height){ background:url($image) no-repeat center center; width: $width; height:$height; display: inline-block; text-indent: -2000px; overflow: hidden; } // Transition for css properties @mixin transition($transition-property, $transition-time, $method) { -webkit-transition: $transition-property $transition-time $method; -moz-transition: $transition-property $transition-time $method; -ms-transition: $transition-property $transition-time $method; -o-transition: $transition-property $transition-time $method; transition: $transition-property $transition-time $method; } // Box-shadow property. For no box-shadow use box-shadow(none) @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } /* Buttons and Links ----------------------------------------------- */ a { color:$secondary-color; &:hover { color:$third-color; @include transition(background, 300ms, ease-out); } } .btn1 { border:1px solid $primary-color; color:$primary-color; display:inline-block; padding:10px 20px; line-height:1em; text-align:center; &:hover, &.current { border-color:$secondary-color; background:$secondary-color; color:#fff; } &.current { cursor:default; } } .btn2 { @extend .btn1; color:$secondary-color; background:#fff; border-color:$secondary-color; &:hover, &.current { background:transparent; border-color:#fff; } } .btn3 { @extend .btn1; color:#fff; border-color:#fff; &:hover, &.current { color:$secondary-color; background:#fff; border-color:#fff; } } .btn4 { @extend .btn1; color:#fff; border-color:#fff; background: $secondary-color; &:hover, &.current { color: $secondary-color; border-color: $secondary-color; background: #fff; } } .btn-img { @extend .btn1; border-color:$secondary-color; &:hover { background:transparent; } a { img,span { margin-left:5px; } } } /* Layout ----------------------------------------------- */ .lt-sidebar { width:250px; float:left; &.nav { margin-top:0; font-size:1em; overflow: auto; } &+.main { overflow:hidden; } } .main { padding:43px 40px; overflow:hidden; } /* Header ----------------------------------------------- */ .header { position:relative; padding:$header-padding-vertical $header-padding-horizontal; border-bottom:1px solid $primary-color; background:#fff; .icons-nav { position:absolute; left:$header-padding-horizontal; top:$header-padding-vertical; } .logo { text-align: center; img { max-height: 30px; } h2 { font-size: 1em; color:$primary-color; font-weight: normal; } } .login { position:absolute; right:$header-padding-horizontal; top:$header-padding-vertical; } .actions { text-align:center; height:45px; line-height:45px; position:relative; margin:2*$header-padding-vertical 0 $header-padding-vertical; .main-actions { position:relative; top:86px; margin:0 -40px; border-bottom:1px solid lighten($primary-color,20%); z-index: 1; } ul { margin:0; li { list-style: none outside none; display: inline-block; margin:0 5px; a { display: block; color:lighten($primary-color,30%); width:100%; padding:8px 20px; border:1px solid transparent; &.active { color:$primary-color; &:hover { color:$secondary-color; cursor: pointer; } } &:hover { cursor:default; } } } } } .new-btn { position: absolute; left:0; bottom:0; a { @extend .btn1; span { font-size:emCalc(20px); } } } } /* Icons Navigation ----------------------------------------------- */ .icons-nav { @include marginPaddingZero(); li { display: inline-block; margin-right:10px; font-size: emCalc(24px); line-height: 1em; padding-bottom:5px; width: 30px; overflow: hidden; a { color:$black; &:hover,&.current { font-size:30px; color:$third-color; } } } } /* Top info ----------------------------------------------- */ .top-info { padding:50px 100px; position: relative; z-index:10; display:none; .close { position: absolute; right:$header-padding-horizontal; top:50px; @include sprite('../images/info-close.png', 31px, 30px); } } .info.error { background:$error-color; color:#fff; } .info.alert { background:$alert-color; color:#fff; } .info.warning { background:$primary-color; color:#fff; } .info.success { background:$success-color; color:#fff; } .border-bottom-style1 { padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed $primary-color; } /* Progress Bar ----------------------------------------------- */ .progress-bar { position: fixed; bottom:0; left:0; border-top:1px solid $secondary-color; width:100%; background:#fff; padding:20px 0 20px 310px; color:$primary-color; span.counter { display: inline-block; margin-right:20px; float:left; } div.progress-wrap { display:inline-block; float:left; width:40%; margin-right:60px; .progress { position: relative; top:2px; } } span.more { display: inline-block; } }