/******************************************* * Theme Name: Market * Author: Magentech * Author URI: http://www.magentech.com * Version: 1.0.0 * Description: This is html5 Sass template *******************************************/ // Override default value for $dir in directional.scss $dir: ltr; //** simple and lightweight mixin library for Sass ** //-- url : http://bourbon.io/docs --- @import 'bourbon/bourbon'; //** Mixins for Rem Font Sizing ** //-- url : http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/ @import 'directional/rem'; //** Variables for responsive design in bootstrap with sass ** //-- url : https://gist.github.com/webinfinita/11407836 @import 'directional/bootstrap_breakpoints'; //** Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy.** //-- url : https://github.com/tysonmatanich/directional-scss @import 'directional/directional'; //Mixins Utilities & Variables @import 'variables/red_home6'; @import 'variables/utilities'; @import "variables/theme_variables"; .footer-top{ padding: 0; background: #222222; h3{ color: #fff; font-weight: 600; font-size: 18px; position: relative; padding: 0 0 18px; margin: 0 0 20px; text-transform: uppercase; &:after{ position: absolute; content: ""; height: 2px; width: 40px; background: #656565; #{$left}: 0; bottom: 0; } } span{ color: #fff; font-weight: 500; padding-#{$right}: 10px; } a{ color: #bbbbbb; line-height: 36px; transition: all 0.3s ease; &:hover{ margin-#{$left}: 5px; } } p{ color: #bbbbbb; margin: 0; line-height: 30px; } .box-information, .box-extras, .box-account{ float: $left; box-shadow: -6px -6px 15px -5px rgba(0, 0, 0, 0.2); height: 350px; padding: 50px 15px; } .collapsed-block{ height: 350px; padding: 50px 15px; background: #1b1b1b; } } .footer-mid{ background: #1b1b1b; .footer-mid-left{ padding: 25px 15px 18px 15px; background: #151515; display: block; overflow: hidden; .share-icon{ ul{ padding: 0; margin: 0; li{ display: inline-block; width: 40px; height: 40px; float: $left; margin-#{$right}: 10px; margin-bottom: 10px; a{ width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; font-size: 1.5em; background: #2d2d2d; color: #fff; display: block; } } } } } .footer-mid-right{ background: #1b1b1b; padding: 25px 15px 18px 15px; .block-help{ .block-help-left{ float: $left; h3{ font-size: 20px; font-weight: 600; margin-top: 0; } p{ color: #cccccc; margin: 0; } } .block-help-right{ line-height: 100px; .btn-sub{ i{ position: absolute; color: #999999; height: 40px; font-size: 14px; #{$left}: 36px; top: 14px; z-index: 999; } input{ float: $left; width: 80%; border-radius: 3px; height: 45px; position: relative; padding-#{$left}: 55px; border: none; box-shadow: none; } button{ float: $right; border-radius: 3px; height: 45px; text-transform: uppercase; font-size: 12px; } } } } } } .footer-bot{ background: #222222; .footer-bot-left{ background: #1b1b1b; padding: 47px 15px 48px 15px; .pay{ padding: 0; margin: 0; li{ list-style: none; display: inline-block; padding-#{$left}: 7px; width: 16.6666%; float: $left; text-align: center; img{ border-radius: 4px; } } } } .footer-bot-right{ background: #222222; padding: 40px 15px; .download{ h3{ float: $left; margin: 0; line-height: 40px; color: #fff; text-transform: uppercase; } a{ float: $right; img{ border-radius: 3px; margin-#{$right}: 10px; border: 1px solid #fff; } } } .copyright{ p { color: #bbbbbb; margin: 0; a{ &:hover{ color: #f36f7c; } } } } } } @media (max-width: 1199px){ .footer-mid .footer-mid-left { padding: 20px 15px 13px 15px; .share-icon ul li{ margin-bottom: 10px; } } .footer-mid .footer-mid-right{ padding: 45px 15px 38px 15px; .block-help .block-help-right .btn-sub input{ width: 71%; } } .footer-bot .footer-bot-right .download { text-align: center; h3{ display: none; } a{ float: none; } } .footer-bot .footer-bot-right{ padding: 36px 15px; } } @media(max-width: 767px){ .footer-mid .footer-mid-right { .block-help .block-help-right { margin-top: 25px; .btn-sub { text-align: center; input{ width: 100%; padding-#{$left}: 15px; } button{ float: none; } } } } .footer-bot .footer-bot-right .copyright{ text-align: center; padding-top: 25px; } }