Nicolas Bally d52c017848 suite
2016-04-28 22:41:58 +02:00

683 lines
8.8 KiB
SCSS
Executable File

$orange: rgba(143,191,77,1);
@import "bootstrap_public";
@import "jquery.bxslider";
@import "fontawesome/font-awesome";
@import "qi_grids";
@import "popover";
@import "public/petitions";
@import "public/menu_item_link_contents";
@import "public/menus";
@import "public/slippry";
@import "public/flexslider";
@import "public/label";
$contrast : rgba(245,106,48,1);
body{
font-family:"lato", Arial, sans-serif;
background-repeat: no-repeat !important;
line-height:1.4em;
text-align:left;
font-weight:300;
padding:0;
margin:0;
font-size:15px;
color:#333333;
background:white;
padding-top:60px;
}
#menu_top{
}
.strip{
text-decoration: line-through;
}
.price_reduced{
text-align:center;
}
#content{
padding:30px;
margin-bottom:20px;
word-wrap: break-word;
a{
// color:$orange;
}
}
.category-container{
background:center center no-repeat;
background-size:100%;
background-size:cover;
display:block;
min-height:200px;
img{
width:100%;
}
background-color:gray;
position: relative;
.category-title{
color:white;
font-size: 1.5em;
display:block;
text-align:center;
width:100%;
position:absolute;
bottom:0px;
line-height: 90px;
left:200;
right:0;
}
}
#footer{
display:block;
height:390px;
margin-top:100px;
background: url("/images/footer_background.jpg") center center;
background-size:cover !important;
background-size:100%;
position: relative;
.contact{
color:white;
.title{
font-size: 40px;
font-family: 'advent';
}
.address{
font-size: 16px;
font-weight: bold;
font-family: 'advent';
}
.phone{
font-size: 16px;
font-weight: bold;
font-family: 'advent';
}
a{
color:white;
text-decoration:none;
font-weight: bold;
}
position:absolute !important;
left:30px;
bottom:80px;
}
.social-links{
a{
color:white;
font-size:28px;
padding-right:10px;
}
position: absolute;
bottom: 0px;
left:30px;
display: block;
text-align:left;
line-height: 25px;
padding-bottom:10px;
}
.footer-menu{
li{
margin-bottom:20px;
text-align:right;
a{
color:white;
}
}
position:absolute;
color:white;
bottom:20px;
right:30px;
list-style:none;
padding:0px;
font-size:16px;
width:200px;
z-index:2;
}
}
#header{
position:relative;
background:gray center center no-repeat;
background-size:100%;
background-size:cover;
img{
width:100%;
}
#menu_top{
a{
color:black;
font-weight: 700;
}
border-bottom: solid 1px black;
li{
margin-right:15px;
margin-left:15px;
}
position: absolute;
top:30px;
right:0px;
padding:10px;
ul{display:inline;
padding:0;
li{
display:inline;
a{
padding:0 5px;
}
}
}
}
}
#main{
}
.products_grid{
padding:10px;
text-align:center;
max-width:1000px;
margin:auto;
.product{
max-width:300px;
box-sizing:border-box;
display:inline-block;
padding:10px;
margin:10px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
img{
margin:auto;
max-height:300px;
max-width:300px;
}
}
}
.product_sizes{
margin:2em 0;
a{
display:inline-block;
text-align:center;
border: 1px solid $orange;
line-height:1.9em;
padding:0.2em 10px;
color:black;
text-decoration:none;
font-weight:bold;
&.active, &:hover{
background : $orange;
color:white !important;
}
}
}
.size_guide{
margin-top:2em;
}
.product_options{
margin:2em 0;
a{
display:inline-block;
text-align:center;
border: 1px solid $orange;
line-height:1.9em;
padding-top:0.2em;
padding-left:10px;
padding-right:10px;
margin:0 5px;
color:black;
text-decoration:none;
font-weight:bold;
&.active, &:hover{
background : $orange;
color:white !important;
}
}
}
.product_show{
max-width:1100px;
margin:auto;
min-height:500px;
}
img{
max-width:100%;
}
.clear{
clear:both;
}
.product_category_top{
.category-title{
text-align:center;
color:$contrast;
font-size:36px;
}
.description{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:2em;
.left_image{
float:left;
width:150px;
margin-left:20px;
}
.right_image{
float:right;
width:150px;
margin-right:20px;
}
}
&.big_cat{
margin-bottom:-20px;
margin-top:-10px;
.category-title{
font-size:50px;
}
}
}
.product.product-item{
.product-title{
padding:10px;
padding-bottom:4px;
color:$orange;
text-transform:uppercase;
}
.product-price{
color:$contrast;
}
}
.center{
margin:auto;
max-width:1100px;
}
.product_show{
#product_description{
max-width:700px;
}
.col_images{
float:left;
box-sizing:border-box;
width:10%;
padding-right:10px;
}
.col_image{
float:left;
box-sizing:border-box;
width:60%;
padding-right:10px;
text-align:center;
img{
max-height:700px;
}
}
.col_description{
float:left;
box-sizing:border-box;
width:30%;
padding-left:20px;
}
.product_description{
text-align:left;
h1, .price{
font-size:25px;
}
.price{
margin-top:20px;
font-size:1em;
color:$contrast;
}
}
.add_to_cart{
background:$contrast;
border:1px solid $contrast;
padding:11px 20px;
font-weight:bold;
text-transform:uppercase;
color:white;
font-size:1em;
}
}
.product_images{
img{
margin-bottom:5px;
}
}
.order_button{
background:$contrast !important;
border:1px solid $contrast;
padding:11px 20px;
font-weight:bold;
text-transform:uppercase;
color:white;
font-size:1em;
}
.top_bar{
position:absolute;
top:0;
left:0;
right:0;
#logo_min{
display:none;
}
#logo{
display:none;
}
#logo_min{
display:inline-block;
height:30px;
margin:15px 20px;
width:auto;
}
background:white;
position:fixed;
box-shadow:0 0 5px rgba(0,0,0,0.2);
z-index:2;
.cat_link{
//display:none;
}
.menu_burger, .cart_link{
opacity:0.7;
}
.menu_burger{
position:absolute;
top:20px;
left:30px;
color:black;
font-size:1.2em;
}
.top_right{
position:absolute;
top:20px;
right:30px;
a{
color:black;
}
}
.cart_link{
display:inline !important;
color:$orange;
font-size:1em;
}
#cart_infos{
.ui-effects-wrapper{
display:inline !important;
}
}
.cat_link{
display:inline-block;
padding:5px 20px;
text-align:center;
color:black;
font-weight:1.1em;
position:relative;
top:2px;
&:hover{
color:$contrast;
text-decoration:none;
}
}
#logo{
margin: 20px 20px;
width:150px;
}
}
#cat_menu_overflow{
position:fixed;
bottom:0px;
z-index:3;
top:0;
left:0;
right:0;
overflow:auto;
background:rgba(0,0,0,0.6);
}
#cat_menu{
display:none;
background:white;
box-shadow:0 0 5px rgba(0,0,0,0.2);
//background:rgba(255,255,255,0.7);
left:0;
width:250px;
font-weight:500;
overflow:auto;
padding:20px;
position:fixed;
top:0px;
left:0px;
z-index:4;
position:fixed;
bottom:0px;
overflow:auto;
//text-align:center;
.menu_hide{
margin-bottom:10px;
}
.account_link{
position:absolute;
top:20px;
right:20px;
}
.inner{
}
ul{
list-style:none;
padding-left:0 !important;
ul{
padding-left:7px;
li{
padding-bottom:0px;
font-size:16px;
text-transform:none;
}
}
li{
padding-bottom:10px;
font-size:20px;
text-transform:uppercase;
}
}
a{
color:black;
text-decoration:none;
font-weight:bold;
display:block;
padding-bottom:0px;
&:hover, &.active{
color:$contrast;
}
}
}
#page_container{
position:relative;
z-index:2;
//box-shadow:0 0 10px rgba(0,0,0,0.2);
}
.collection{
h2{
text-align:center;
span{
text-transform:uppercase;
display:inline-block;
border-bottom:2px solid black;
font-weight:bold;
}
}
}
.top_link{
display:inline;
}
.menu_item_content{
table{
width:100%;
td{
border-bottom:1px solid gray;
padding:5px;
p{
padding:0;
margin:0;
}
}
}
}