// vip homepage ( markup + css )
This commit is contained in:
Kevin Granger
@@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,600,600italic,700,700italic,800,800italic);
|
||||
@import url(../css/font-awesome.css);
|
||||
html, body, div, span, applet, object, iframe,
|
||||
@@ -47,7 +48,7 @@ a img {
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
/*!
|
||||
* Bootstrap v3.0.0
|
||||
*
|
||||
* Copyright 2013 Twitter, Inc
|
||||
@@ -56,7 +57,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
|
||||
*
|
||||
* Designed and built with all the love in the world by @mdo and @fat.
|
||||
*/
|
||||
/* normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
@@ -3818,32 +3819,44 @@ textarea {
|
||||
header {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
background: white; }
|
||||
background: white;
|
||||
padding-bottom: 20px; }
|
||||
header #banner-row {
|
||||
background: black; }
|
||||
header #nav-row {
|
||||
background: #333333; }
|
||||
header #nav-row nav {
|
||||
float: right; }
|
||||
width: 100%; }
|
||||
header #nav-row nav .shop-phone {
|
||||
float: left; }
|
||||
header #nav-row nav .header_user_info {
|
||||
float: right; }
|
||||
header #nav-row nav #contact-link {
|
||||
float: right; }
|
||||
header #nav-row nav #languages-block-top {
|
||||
float: right; }
|
||||
header #nav-row nav #currencies-block-top {
|
||||
float: right; }
|
||||
header #header-row {
|
||||
position: relative; }
|
||||
header #header-row > .container {
|
||||
position: relative; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
header #header-row {
|
||||
header #header-row #header_logo {
|
||||
width: 250px;
|
||||
top: 35px; } }
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
header #header-row {
|
||||
header #header-row #header_logo {
|
||||
width: 174px;
|
||||
left: 15px;
|
||||
top: 48px; } }
|
||||
@media (max-width: 479px) {
|
||||
header #header-row {
|
||||
header #header-row #header_logo {
|
||||
width: 200px;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
top: 20px; } }
|
||||
header .header_user_info {
|
||||
float: left;
|
||||
border-left: 1px solid #515151;
|
||||
border-right: 1px solid #515151; }
|
||||
@media (max-width: 479px) {
|
||||
@@ -3859,7 +3872,6 @@ header {
|
||||
header .header_user_info a {
|
||||
font-size: 11px; } }
|
||||
header .shop-phone {
|
||||
display: block;
|
||||
padding: 5px 0 10px; }
|
||||
@media (max-width: 767px) {
|
||||
header .shop-phone {
|
||||
@@ -3873,7 +3885,6 @@ header {
|
||||
color: white; }
|
||||
header #currencies-block-top,
|
||||
header #languages-block-top {
|
||||
float: right;
|
||||
border-left: 1px solid #515151;
|
||||
position: relative; }
|
||||
@media (max-width: 479px) {
|
||||
@@ -3944,7 +3955,6 @@ header {
|
||||
header #languages-block-top ul li:hover a {
|
||||
background: #484848; }
|
||||
header #contact-link {
|
||||
float: right;
|
||||
border-left: 1px solid #515151; }
|
||||
@media (max-width: 479px) {
|
||||
header #contact-link {
|
||||
|
||||
@@ -82,11 +82,11 @@
|
||||
Cart Block(Header) Styles
|
||||
********************************************************************/
|
||||
#header #cart_block {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 95px;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
background: #484848;
|
||||
|
||||
@@ -2,109 +2,82 @@
|
||||
#search_block_top {
|
||||
position: absolute;
|
||||
right: 420px;
|
||||
top: 50px;
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
#search_block_top {
|
||||
right: 295px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#search_block_top {
|
||||
right: 207px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#search_block_top {
|
||||
right: 0;
|
||||
top: 85px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
#search_block_top {
|
||||
top: 56px;
|
||||
right: 50%;
|
||||
width: 270px;
|
||||
margin-right: -135px;
|
||||
}
|
||||
}
|
||||
#search_block_top .btn.button-search {
|
||||
background: #333333;
|
||||
float: left;
|
||||
border: none;
|
||||
color: white;
|
||||
width: 57px;
|
||||
text-align: center;
|
||||
padding: 10px 0 11px 0;
|
||||
}
|
||||
#search_block_top .btn.button-search span {
|
||||
display: none;
|
||||
}
|
||||
#search_block_top .btn.button-search:before {
|
||||
content: "";
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 17px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
#search_block_top .btn.button-search:hover {
|
||||
color: #6f6f6f;
|
||||
}
|
||||
#search_block_top #search_query_top {
|
||||
padding: 0 13px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
width: 271px;
|
||||
background: #fbfbfb;
|
||||
float: left;
|
||||
margin-right: 1px;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
top: 50px; }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
#search_block_top {
|
||||
right: 295px; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#search_block_top {
|
||||
right: 207px; } }
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#search_block_top {
|
||||
right: 0;
|
||||
top: 85px; } }
|
||||
@media (max-width: 479px) {
|
||||
#search_block_top {
|
||||
top: 56px;
|
||||
right: 50%;
|
||||
width: 270px;
|
||||
margin-right: -135px; } }
|
||||
#search_block_top .btn.button-search {
|
||||
background: #333333;
|
||||
float: left;
|
||||
border: none;
|
||||
color: white;
|
||||
width: 57px;
|
||||
text-align: center;
|
||||
padding: 10px 0 11px 0; }
|
||||
#search_block_top .btn.button-search span {
|
||||
display: none; }
|
||||
#search_block_top .btn.button-search:before {
|
||||
content: "\f002";
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 17px;
|
||||
width: 100%;
|
||||
text-align: center; }
|
||||
#search_block_top .btn.button-search:hover {
|
||||
color: #6f6f6f; }
|
||||
#search_block_top #search_query_top {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#search_block_top #search_query_top {
|
||||
width: 212px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
#search_block_top #search_query_top {
|
||||
width: 212px;
|
||||
}
|
||||
}
|
||||
padding: 0 13px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
width: 271px;
|
||||
background: #fbfbfb;
|
||||
float: left;
|
||||
margin-right: 1px; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#search_block_top #search_query_top {
|
||||
width: 180px; } }
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#search_block_top #search_query_top {
|
||||
width: 212px; } }
|
||||
@media (max-width: 479px) {
|
||||
#search_block_top #search_query_top {
|
||||
width: 212px; } }
|
||||
|
||||
.ac_results {
|
||||
background: white;
|
||||
border: 1px solid #d6d4d4;
|
||||
width: 271px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
.ac_results li {
|
||||
padding: 0 10px;
|
||||
font-weight: normal;
|
||||
color: #686666;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ac_results li.ac_odd {
|
||||
background: white;
|
||||
}
|
||||
.ac_results li:hover, .ac_results li.ac_over {
|
||||
background: #fbfbfb;
|
||||
}
|
||||
margin-top: -1px; }
|
||||
.ac_results li {
|
||||
padding: 0 10px;
|
||||
font-weight: normal;
|
||||
color: #686666;
|
||||
font-size: 13px;
|
||||
line-height: 22px; }
|
||||
.ac_results li.ac_odd {
|
||||
background: white; }
|
||||
.ac_results li:hover, .ac_results li.ac_over {
|
||||
background: #fbfbfb; }
|
||||
|
||||
form#searchbox label {
|
||||
color: #333333;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
margin-bottom: 1px; }
|
||||
form#searchbox input#search_query_block {
|
||||
border: 1px solid #d6d4d4;
|
||||
height: 18px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
margin-top: 10px; }
|
||||
form#searchbox input#search_button {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
padding: 1px 4px; }
|
||||
|
||||
@@ -1,66 +1,52 @@
|
||||
/* block top user information */
|
||||
@charset "UTF-8";
|
||||
#header_user {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#header_user {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
#header_user {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 95px;
|
||||
width: 270px;
|
||||
}
|
||||
}
|
||||
#header_user #shopping_cart a {
|
||||
padding: 7px 10px 14px 16px;
|
||||
background: #333333;
|
||||
width: 270px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #777777;
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, 0);
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0; }
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#header_user {
|
||||
margin-top: 25px; } }
|
||||
@media (max-width: 479px) {
|
||||
#header_user {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 95px;
|
||||
width: 270px; } }
|
||||
#header_user #shopping_cart a {
|
||||
width: 190px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#header_user #shopping_cart a span.ajax_cart_product_txt, #header_user #shopping_cart a span.ajax_cart_product_txt_s {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
#header_user #shopping_cart a b {
|
||||
color: white;
|
||||
font: 600 18px/22px "Open Sans", sans-serif;
|
||||
padding-right: 5px;
|
||||
}
|
||||
#header_user #shopping_cart a:before {
|
||||
content: "";
|
||||
font-family: "FontAwesome";
|
||||
display: inline-block;
|
||||
font-size: 23px;
|
||||
line-height: 23px;
|
||||
color: white;
|
||||
padding-right: 15px;
|
||||
}
|
||||
#header_user #shopping_cart a:after {
|
||||
content: "";
|
||||
font-family: "FontAwesome";
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
color: #686666;
|
||||
padding: 6px 0 0 0;
|
||||
}
|
||||
#header_user #shopping_cart .ajax_cart_total {
|
||||
display: none !important;
|
||||
}
|
||||
padding: 7px 10px 14px 16px;
|
||||
background: #333333;
|
||||
width: 270px;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #777777;
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#header_user #shopping_cart a {
|
||||
width: 190px; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#header_user #shopping_cart a span.ajax_cart_product_txt, #header_user #shopping_cart a span.ajax_cart_product_txt_s {
|
||||
display: none !important; } }
|
||||
#header_user #shopping_cart a b {
|
||||
color: white;
|
||||
font: 600 18px/22px "Open Sans", sans-serif;
|
||||
padding-right: 5px; }
|
||||
#header_user #shopping_cart a:before {
|
||||
content: "";
|
||||
font-family: "FontAwesome";
|
||||
display: inline-block;
|
||||
font-size: 23px;
|
||||
line-height: 23px;
|
||||
color: white;
|
||||
padding-right: 15px; }
|
||||
#header_user #shopping_cart a:after {
|
||||
content: "";
|
||||
font-family: "FontAwesome";
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
color: #686666;
|
||||
padding: 6px 0 0 0; }
|
||||
#header_user #shopping_cart .ajax_cart_total {
|
||||
display: none !important; }
|
||||
|
||||
@@ -101,19 +101,16 @@
|
||||
{/if}
|
||||
<div id="page">
|
||||
<header id="header">
|
||||
|
||||
<div id="banner-row">
|
||||
{hook h="displayBanner"}
|
||||
</div>
|
||||
|
||||
<div id="nav-row">
|
||||
<div class="container">
|
||||
<nav>
|
||||
{hook h="displayNav"}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- #end nav-row -->
|
||||
<div id="header-row">
|
||||
<div class="container">
|
||||
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
|
||||
@@ -121,8 +118,7 @@
|
||||
</a>
|
||||
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end #header-row -->
|
||||
</header>
|
||||
|
||||
<div class="columns-container">
|
||||
|
||||
@@ -42,38 +42,49 @@ textarea
|
||||
#right_column
|
||||
#footer
|
||||
|
||||
|
||||
|
||||
header
|
||||
z-index: 1
|
||||
position: relative
|
||||
background: $light-background
|
||||
padding-bottom: 20px
|
||||
#banner-row
|
||||
background: black
|
||||
#nav-row
|
||||
background: $dark-background
|
||||
nav
|
||||
float: right
|
||||
width: 100%
|
||||
.shop-phone
|
||||
float: left
|
||||
.header_user_info
|
||||
float: right
|
||||
#contact-link
|
||||
float: right
|
||||
#languages-block-top
|
||||
float: right
|
||||
#currencies-block-top
|
||||
float: right
|
||||
#header-row
|
||||
position: relative
|
||||
> .container
|
||||
position: relative
|
||||
#header_logo
|
||||
// min 768px max 991px
|
||||
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
||||
width: 250px
|
||||
top: 35px
|
||||
// min 480px max 767px
|
||||
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
|
||||
width: 174px
|
||||
left: 15px
|
||||
top: 48px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 200px
|
||||
left: 50%
|
||||
margin-left: -100px
|
||||
top: 20px
|
||||
// min 768px max 991px
|
||||
@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
|
||||
width: 250px
|
||||
top: 35px
|
||||
// min 480px max 767px
|
||||
@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
|
||||
width: 174px
|
||||
left: 15px
|
||||
top: 48px
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
width: 200px
|
||||
left: 50%
|
||||
margin-left: -100px
|
||||
top: 20px
|
||||
|
||||
.header_user_info
|
||||
float: left
|
||||
border-left: 1px solid #515151
|
||||
border-right: 1px solid #515151
|
||||
// max 479px
|
||||
@@ -89,7 +100,6 @@ header
|
||||
@media (max-width: $screen-xs - 1)
|
||||
font-size: 11px
|
||||
.shop-phone
|
||||
display: block
|
||||
padding: 5px 0 10px
|
||||
// max 767px
|
||||
@media (max-width: $screen-xs-max)
|
||||
@@ -102,11 +112,9 @@ header
|
||||
strong
|
||||
color: $light-text-color
|
||||
|
||||
|
||||
//languages/currencies
|
||||
#currencies-block-top,
|
||||
#languages-block-top
|
||||
float: right
|
||||
#languages-block-top
|
||||
border-left: 1px solid #515151
|
||||
position: relative
|
||||
// max 479px
|
||||
@@ -164,7 +172,6 @@ header
|
||||
&.selected, &:hover a
|
||||
background: #484848
|
||||
#contact-link
|
||||
float: right
|
||||
border-left: 1px solid #515151
|
||||
// max 479px
|
||||
@media (max-width: $screen-xs - 1)
|
||||
|
||||
@@ -127,11 +127,11 @@
|
||||
#header {
|
||||
|
||||
#cart_block {
|
||||
position: absolute;
|
||||
top: 95px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display:none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 95px;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
background:#484848;
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
@import '../../_theme_variables';
|
||||
@import "compass";
|
||||
@import "theme_variables";
|
||||
/* block top search */
|
||||
#search_block_top {
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
right: 420px;
|
||||
top: 50px;
|
||||
top: 50px;
|
||||
@media (min-width: $screen-md) and (max-width: $screen-md-max) { // min 992px max 1199px
|
||||
right:295px;
|
||||
}
|
||||
@@ -33,7 +34,7 @@
|
||||
span {display:none;}
|
||||
|
||||
&:before {
|
||||
content:"";
|
||||
content:"\f002";
|
||||
display:block;
|
||||
font-family:$font-icon;
|
||||
font-size:17px;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@import '../../_theme_variables';
|
||||
/* block top user information */
|
||||
@import "compass";
|
||||
@import "theme_variables";
|
||||
|
||||
#header_user {
|
||||
|
||||
clear:both;
|
||||
float: right;
|
||||
margin-top:50px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
|
||||
@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
|
||||
margin-top:25px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user