Skip to content

Instantly share code, notes, and snippets.

@flexbox
Created March 28, 2017 12:38
Show Gist options
  • Save flexbox/8b6a007552fb021e02508e14c26ad50b to your computer and use it in GitHub Desktop.
Save flexbox/8b6a007552fb021e02508e14c26ad50b to your computer and use it in GitHub Desktop.
.m-menu_main {
width: 100%;
float: left;
margin-right: 1.81818%;
display: inline;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
*zoom: 1;
overflow: visible;
position: relative;
top: 0.9em
}
.m-menu_main>ul {
float: right;
display: inline;
position: relative
}
.m-menu_main>ul>li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
float: left;
display: inline-block;
zoom: 1;
*display: inline
}
.m-menu_main a {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
text-decoration: none
}
.m-menu_main a>b {
font-weight: 400
}
.m-menu_main a.l-link-to--menu {
text-decoration: underline;
display: block;
margin: 1.5em 0 0
}
.m-menu_main a.l-link-to--menu:hover {
text-decoration: none;
color: #d7d8d8
}
.m-menu_main .m-box-submenu {
opacity: 0;
max-height: 0;
padding: 0 2.25em;
overflow: hidden;
transition: max-height 500ms cubic-bezier(0.55, 0, 0.1, 1), padding 500ms cubic-bezier(0.55, 0, 0.1, 1), opacity 500ms cubic-bezier(0.55, 0, 0.1, 1)
}
.m-menu_main .m-box-submenu>* {
opacity: 0;
transition: opacity 250ms cubic-bezier(0.55, 0, 0.1, 1)
}
.m-menu_main .m-box-submenu a {
display: block;
font-family: "Yantramanav", sans-serif;
font-weight: 400;
font-style: normal;
color: #f3f3f3;
font-size: 13px
}
.m-menu_main .m-menu-events {
clear: both;
overflow: hidden;
margin: 2.5em 0 0
}
.m-menu_main .m-menu-events a {
float: left;
display: inline-block;
zoom: 1;
*display: inline;
width: 100%;
max-width: 190px;
padding: 0.45em 1.15em;
margin: 0 0.45em 0 0;
text-align: center;
border: 1px solid #f3f3f3
}
.m-menu_main .m-menu-events.m-brands-logo p {
margin: 0 0 0.55em
}
.m-menu_main .m-menu-events.m-brands-logo a {
padding: 0;
border: 0 none;
margin: 0 2em 0 0;
width: auto
}
.m-menu_main .m-menu-events.m-brands-logo .l-link-to--menu {
display: block;
clear: both;
margin: 0.25em 0 0
}
.m-menu-item {
transition: background 250ms cubic-bezier(0.55, 0, 0.1, 1)
}
.m-menu-item>a {
padding: 7px 35px;
font-size: 17px;
line-height: 39px;
text-transform: uppercase;
transition: color 250ms cubic-bezier(0.55, 0, 0.1, 1), background 250ms cubic-bezier(0.55, 0, 0.1, 1)
}
@media screen and (max-width: 1245px) {
.m-menu-item>a {
padding: 7px 30px
}
}
@media screen and (max-width: 1170px) {
.m-menu-item>a {
padding: 7px 25px
}
}
@media screen and (max-width: 1085px) {
.m-menu-item>a {
padding: 7px 17px
}
}
.m-menu-item:hover>a {
background: #000;
color: #f3f3f3
}
.m-menu-item:hover .m-box-submenu {
z-index: 100;
opacity: 1;
padding: 2em 2.25em;
transition: max-height 250ms cubic-bezier(0.55, 0, 0.1, 1) 100ms, padding 250ms cubic-bezier(0.55, 0, 0.1, 1) 100ms, opacity 250ms cubic-bezier(0.55, 0, 0.1, 1) 100ms
}
.m-menu-item:hover .m-box-submenu>* {
opacity: 1;
transition: opacity 500ms cubic-bezier(0.55, 0, 0.1, 1) 100ms
}
.m-menu-item:hover .m-box-submenu#m-subtab_femme {
max-height: 630px
}
.m-menu-item:hover .m-box-submenu#m-subtab_homme {
max-height: 630px
}
.m-menu-item:hover .m-box-submenu#m-subtab_enfant {
max-height: 655px
}
.m-menu-item:hover .m-box-submenu#m-subtab_marques {
max-height: 840px
}
.m-menu-item:hover .m-box-submenu#m-subtab_accessoires {
max-height: 260px
}
.m-menu-item:hover .m-box-submenu#m-subtab_miniprix {
max-height: 535px
}
.m-menu-item:hover .m-box-submenu#m-subtab_conseils {
max-height: 300px
}
.m-menu-item.m-menu-item-sales {
border: 2px solid #233c76;
background: #233c76
}
.m-menu-item.m-menu-item-sales a {
line-height: 35px;
padding-bottom: 3px;
font-weight: 400 !important;
color: #fff
}
.m-menu-item.m-menu-item-sales:hover {
background: #fff
}
.m-menu-item.m-menu-item-sales:hover a {
background: #fff;
color: #233c76
}
.m-menu-item.m-menu-item-christmas a {
color: #b98d56
}
.m-menu-item.m-menu-item-christmas:hover a,
.m-menu-item.m-menu-item-christmas:focus a {
color: #f3f3f3
}
.m-menu-item.m-menu-item-fashion-weeks a {
color: #f39d6f
}
.m-menu-item.m-menu-item-fashion-weeks:hover a,
.m-menu-item.m-menu-item-fashion-weeks:focus a {
color: #f3f3f3
}
.m-menu-item.m-menu-item-private-sales {
background: #b93f67;
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-top: 4px
}
.m-menu-item.m-menu-item-private-sales a {
background: #b93f67;
color: #fff;
-webkit-transition: all 0.2s;
transition: all 0.2s;
padding: 4px 35px
}
.m-menu-item.m-menu-item-private-sales a:hover,
.m-menu-item.m-menu-item-private-sales a:focus {
background: #fff;
color: #3e084c
}
.m-menu-item.m-menu-item-private-sales:hover,
.m-menu-item.m-menu-item-private-sales:focus {
background: #fff
}
.m-menu-item.m-menu-item-game {
background: #233c76
}
.m-menu-item.m-menu-item-game a {
color: #fff
}
.m-menu-item.m-menu-item-game:hover {
background: #222
}
.l-menu--watch-this {
color: #ee5f47;
font-weight: 700 !important;
padding-right: 10px !important;
padding-left: 10px !important
}
.l-menu--watch--ghost {
color: #fe8857
}
.l-menu--watch--game {
color: blue;
font-weight: 700 !important;
padding-right: 5px !important;
padding-left: 5px !important
}
.m-box-submenu .m-box-submenu--container {
position: relative
}
.m-box-submenu .m-box-submenu--container__inner {
overflow: hidden
}
.m-box-submenu ul {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 3%;
width: 25%;
float: left;
display: inline-block;
zoom: 1;
*display: inline;
border-left: 1px solid #000;
-webkit-box-shadow: inset 1px 0 0 #666;
-moz-box-shadow: inset 1px 0 0 #666;
box-shadow: inset 1px 0 0 #666
}
.m-box-submenu ul:first-child {
padding-left: 0;
border-left: 0 none;
-webkit-box-shadow: inset 0 0 0 transparent;
-moz-box-shadow: inset 0 0 0 transparent;
box-shadow: inset 0 0 0 transparent
}
.m-box-submenu ul>li {
margin: 0 0 0.85em
}
.m-box-submenu ul .m-menu-events a {
display: block;
float: none;
margin: 0 0 0.45em 0
}
.m-box-submenu .sales {
background-color: #233c76;
color: #fff !important
}
.m-box-submenu .l-title--base,
.m-box-submenu .l-title--base-italic,
.m-box-submenu .m-title--table,
.m-box-submenu .m-table-thead--without-title {
text-transform: uppercase;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 15px;
line-height: 1
}
.m-box-submenu .l-title--base span,
.m-box-submenu .l-title--base-italic span,
.m-box-submenu .m-title--table span,
.m-box-submenu .m-table-thead--without-title span {
font-size: 13px;
line-height: 1;
text-transform: none
}
.m-box-submenu .m-brands-logo-vertical {
width: 29%
}
.m-box-submenu .m-brands-logo-vertical li {
float: left;
display: inline-block;
zoom: 1;
*display: inline;
margin: 0 1.25em 1.5em 0;
height: 40px
}
.m-box-submenu .link_all {
margin: 1.25em 0 0;
display: block;
text-decoration: underline
}
.m-menu-visuel {
position: absolute;
top: 0;
right: 0;
width: 170px
}
.m-menu-visuel img {
margin: 0 0 1em;
display: block
}
.m-menu-visuel a {
font-size: 16px !important
}
#m-subtab_femme,
#m-subtab_homme,
#m-subtab_enfant,
#m-subtab_miniprix,
#m-subtab_marques,
#m-subtab_accessoires,
#m-subtab_conseils {
position: absolute;
top: 51px;
left: 0;
width: 948px;
z-index: 100;
background: #000;
color: #f3f3f3
}
#m-subtab_femme ul,
#m-subtab_homme ul {
min-height: 415px
}
#tab_accessoires,
#tab_conseils {
position: relative
}
#m-subtab_accessoires,
#m-subtab_conseils {
left: 0;
right: 0;
width: auto
}
#m-subtab_accessoires {
width: 300px
}
#m-subtab_accessoires ul {
width: 100%
}
#m-subtab_miniprix ul {
min-height: 165px
}
#m-subtab_marques ul {
min-height: 640px
}
#m-subtab_marques .m-menu-visuel {
top: 26px;
right: 30px
}
#tab_accessoires,
#tab_conseils {
position: relative
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment