dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added responsive rich menu and small fix in blockbanner

Browse Source
This commit is contained in:
TMMeilleur
2013-11-15 18:40:17 +02:00
parent 96def5033f
commit a5d9daff13
7 changed files with 761 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default-bootstrap/sass/modules/blocktopmenu/css/superfish-modified.scss
+165 -15
View File
@@ -2,6 +2,15 @@
/*** ESSENTIAL STYLES ***/
.sf-contener {
clear:both;
float:left;
width:100%;
margin: 50px 0 0;
@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
margin-top:80px;
}
@media (max-width: $screen-xs - 1) { // max 479px
margin-top:70px;
}
}
.sf-right {
}
@@ -11,23 +20,22 @@
list-style: none;
}
.sf-menu {
margin: 50px 0 0;
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #f6f6f6;
@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
margin-top:80px;
}
@media (max-width: $screen-xs - 1) { // max 479px
margin-top:70px;
@media (max-width: $screen-xs-max) { // max 767px
display:none;
}
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
background: $light-background;
@media (max-width: $screen-xs-max) { // max 767px
position:relative;
}
}
.sf-menu ul li {
width: 100%;
@@ -35,14 +43,31 @@
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
position: relative;
}
.sf-menu > li {
float: left;
border-right: 1px solid $base-border-color;
margin-bottom: -3px;
@media (max-width: $screen-xs-max) { // max 767px
float:none;
position:relative;
border-right:none;
span {
position:absolute;
right:6px;
top:20px;
display:none;
width:30px;
height:30px;
z-index:2;
&:after {
font-family:$font-icon;
content:"";
font-size:26px;
}
}
}
> a {
font: 600 18px/22px $font-custom;
text-transform: uppercase;
@@ -50,6 +75,19 @@
display: block;
padding: 17px 20px;
border-bottom: 3px solid #e9e9e9;
@media (max-width: $screen-xs-max) { // max 767px
&.sf-with-ul {
&:after {
position:absolute;
right:15px;
top:18px;
font-family:$font-icon;
content:"";
font-size:26px;
z-index:1;
}
}
}
}
&.sfHover > a, > a:hover, &.sfHoverForce > a {
@@ -58,8 +96,8 @@
color: $light-text-color;
}
}
.sf-menu li li a {
display: block;
.sf-menu li li li a {
display: inline-block;
position: relative;
color: #777777;
font-size: 13px;
@@ -83,9 +121,24 @@
left: 0;
top: 59px; /* match top ul list item height */
z-index: 99;
width: 220px;
padding: 25px 30px;
padding: 12px 0px 18px 0px;
@include box-shadow(rgba(black, 0.20) 0px 5px 13px);
@media (max-width: $screen-xs-max) { // max 767px
top:0;
}
}
.sf-menu li li ul {
position:static;
display:block !important;
opacity:1 !important;
background:none;
@include box-shadow(rgba(black, 0) 0px 0px 0px);
}
.sf-menu li li li ul {
padding:0 0 0 20px;
}
.sf-menu li li li ul {
width: 220px;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
@@ -105,3 +158,100 @@ ul.sf-menu li li li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}
.sf-menu > li > ul {
padding:26px 30px 31px;
width:100%;
> li {
> a {
text-transform:uppercase;
font:600 16px/20px $font-custom;
color:$base-text-color;
&:hover {
color:$link-hover-color;
}
}
}
}
.sf-menu > li > ul > li:not(#category-thumbnail) {
float:left;
width:20%;
padding-right:15px;
@media (max-width: $screen-xs-max) { // max 767px
width:50%;
}
@media (max-width: $screen-xs - 1) { // max 479px
width:100%;
}
@media (min-width: $screen-sm) { // min 768px
&.first-in-line-lg {clear:left;}
}
@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { // min 480px max 767px
&.first-in-line-xs {clear:left;}
}
}
.sf-menu > li > ul > li#category-thumbnail {
width:100%;
clear:both;
overflow:hidden;
> div {
float:left;
padding-left:10px;
width:33.333%;
@media (max-width: $screen-xs - 1) { // max 479px
width:100%;
padding-left:0;
padding-top:10px;
text-align:center;
}
&:first-child {padding-left:0;}
img {
max-width:100%;
width:100%;
display:block;
}
}
}
.cat-title {
display:none;
@media (max-width: $screen-xs-max) { // max 767px
display: block;
font: 600 18px/22px $font-custom;
text-transform: uppercase;
color: #484848;
display: block;
padding: 17px 20px;
border-bottom: 3px solid #e9e9e9;
background: #f6f6f6;
position:relative;
&:hover {
background: $dark-background;
border-bottom-color: #666666;
color: $light-text-color;
}
&:after {
display:block;
font-family:$font-icon;
content:"";
position:absolute;
right:15px;
top:18px;
font-size:26px;
}
&.active:after{
content:"";
}
}
}
@media (max-width: $screen-xs-max) { // max 767px
.sf-menu > li.sfHover > a.sf-with-ul:after, .sf-menu > li.sfHoverForce > a.sf-with-ul:after {
display:none;
}
.sf-menu > li.sfHover > span, .sf-menu > li.sfHoverForce > span {
display:block;
}
}