/* Table of Contents - Clearfix - Mixins - Buttons and Links - Layout - Header - Actions Bar - Icon Navigation - Top Info - Progress Bar - Responsive */ /* 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; } @mixin padding1-0 { padding: 1px 0; } @mixin placeholder { &.placeholder { @content; } &:-moz-placeholder { @content; } &::-moz-placeholder { @content; } &::-webkit-input-placeholder { @content; } } // keyframes mixin @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* Circle and Tags ----------------------------------------------- */ .circle { display:inline-block; -webkit-border-radius: 999px; -moz-border-radius: 999px; border-radius: 999px; behavior: url(PIE.htc); } .tags { text-align:center; a { @extend .circle; width:12px; height:12px; margin:0 3px; &.tag1 { background-color:$secondary-color;} &.tag2 { background-color:$third-color;} &.tag3 { background-color:$success-color;} } } .tag-demo { @extend .circle; width: 18px; height: 18px; position: relative; bottom: -5px; margin-right: 20px; &.tag4 { background-color: #ff5e4d;} &.tag5 { background-color: #25bfda;} &.tag6 { background-color: #fbf7c5;} &.tag7 { background-color: #83a697;} } /* Buttons and Links ----------------------------------------------- */ a { color:$primary-color; &:hover { color:$third-color; @include transition(background, 300ms, ease-out); } } .more a .snf-checkbox-checked, .more a .snf-checkbox-unchecked{ color: $net-opt-area-color; } .btn1 { border:1px solid $primary-color; color:$primary-color; display:inline-block; padding:10px 20px; line-height:1em; text-align:center; &:hover, &.current, &:focus { 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, &:focus { background:transparent; border-color:#fff; } } .btn3 { @extend .btn1; color:#fff; border-color:#fff; &:hover, &.current, &:focus { color:$secondary-color; background:#fff; border-color:#fff; } } .btn4 { @extend .btn1; color:#fff; border-color:#fff; background: $secondary-color; &:hover, &.current, &:focus { color: $secondary-color; border-color: $secondary-color; background: #fff; } } .btn5 { border:1px solid white; color:white; display:inline-block; padding:0 20px; line-height:$btn-height - 2px; height:$btn-height; text-align:center; font-size:emCalc(12px); &:hover, &:focus { border-width:2px; line-height: $btn-height - 4px; padding:0 19px; color:white; } &.current { background:white; color:$secondary-color; } } .btn-img { @extend .btn1; border-color:$secondary-color; &:hover, &:focus { background:transparent; } a { img,span { margin-left:5px; } } } /* Layout ----------------------------------------------- */ html,body { height:100%; } body { padding-top:$header-height+$bar-height; } .overlay-wrapper { min-height:100%; } .lt-sidebar { width:250px; float:left; &.nav { margin-top:0; font-size:1em; overflow: auto; } &+.main { overflow:hidden; } } .main { padding:0 10px; } /* Header ----------------------------------------------- */ .header { position:fixed; top:0; left:0; right:0; width:100%; height:$header-height; line-height:$header-height; padding:0 $header-padding-horizontal; background:white; z-index:100; .icons-nav { position:absolute; left:$header-padding-horizontal - $icons-nav-margin-horizontal; height:$header-height; line-height:$header-height; top:0; li { line-height: $header-height; } } .logo { text-align: center; a { position: relative; top:-5px; &:focus { border: 1px solid $secondary-color; padding: 10px; } } img { max-height: 30px; } h2 { display: none; margin:0; font-size: 1em; color:$primary-color; font-weight: normal; } } .login { position:absolute; top:25px; right:$header-padding-horizontal; a { color:$overlay-color; &:hover { color:$secondary-color; } } .wrap { $wr-padd-top:12px; border:1px solid $overlay-color; background: white; color:$overlay-color; font-size:emCalc(12px); padding:$wr-padd-top 30px; line-height:100%; ul { display: none; padding:0; margin:0; list-style: none outside none; li { list-style: none outside none; padding:0; padding-top:$wr-padd-top; } } &:hover { ul { display: block; } } } } } /* Actions Bar ----------------------------------------------- */ .actions-bar { position:fixed; left:0; top:$header-height; width:100%; z-index:15; text-align:center; height:$bar-height; line-height:$bar-height; color:$overlay-color; background-color: lighten($primary-color,35%); a { color:$overlay-color; } h2 { float: left; margin:0 0 0 15px; color: $overlay-color; font-size: emCalc(12px); line-height: $bar-height; font-weight: normal; } .filter-menu { float:right; position: relative; .filter { padding: 0 10px; font-size:emCalc(12px); position: relative; top:-2px; } .options { display: none; position: absolute; right: 0; top:$bar-height; width: 120px; list-style-type: none; padding: 10px 15px 15px; text-align: left; margin:0; } &.current { .options { background-color: lighten($primary-color,10%); display: inline-block; a { color: white; } } } } .row { position: relative; height: $bar-height; } .hd-search { $icon-dim :24px; width: $icon-dim; overflow:hidden; position:relative; float: right; height: $bar-height; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; .hd-icon-search { color: $primary-color; display: block; width: $bar-height; height: $bar-height; line-height: $bar-height; float: right; &:hover { cursor:pointer; color:$secondary-color; } z-index:1; position: relative; background: lighten($primary-color,35%); } .hd-search-input { border: transparent; background-color: white; color: $overlay-color; padding: 0 10px; width: 160px; font-size: emCalc(10px); box-shadow: none; height:0.7* $bar-height; line-height: 0.7* $bar-height; position: absolute; top:4px; left:0; @include placeholder { color:$overlay-color; } } &.hd-open { width: 190px; } } .sb-search { $icon-dim :24px; float: right; margin-top:3px; min-width: $icon-dim; height: $icon-dim; .sb-icon-search { height: $icon-dim; width: $icon-dim; color: $primary-color; } form { display: inline-block; margin:0; .input-wrap { width:180px; overflow: hidden; } input { border: transparent; background-color: white; color: $overlay-color; padding: 0 10px; width: 160px; font-size: emCalc(10px); box-shadow: none; height:0.7* $bar-height; line-height: 0.7* $bar-height; position: relative; top:-3px; @include placeholder { color:$overlay-color; } } } &.sb-search-open { width:220px; } } .view-type { float: right; margin-right:15px; .current, a:hover { color: $secondary-color; } .snf-list { margin-right: 6px; font-size: 17px; } .snf-layout { font-size: 1.1em; } } } .new-btn { position: absolute; left:$header-padding-horizontal; bottom:0; height:$bar-height; a { @extend .btn1; span { font-size:emCalc(20px); } } } /* Icons Navigation ----------------------------------------------- */ .icons-nav { @include marginPaddingZero(); li { display: inline-block; margin:0 $icons-nav-margin-horizontal; font-size: emCalc(26px); line-height: 1em; padding-bottom:5px; width: 30px; text-align:center; 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; } } /* Responive ------------------------------------------------ */ @media only screen and (max-width: $small-mobile) { } @media only screen and (max-width: $small-screen) { body { padding-top:0 } .header, .actions-bar { position:static; z-index: auto; } .actions-bar { top:2*$header-height; } .header { height: $header-height-responsive; line-height:50px; .icons-nav { position: static; } } }