Created
September 14, 2015 15:52
-
-
Save saxinte/3aa9715d37b7f5b9f2f5 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| .main-header{ | |
| height:137px; | |
| padding:10px 0 0 0; | |
| position: relative; | |
| width:auto; | |
| &.is_pinned { | |
| #header__logo{ | |
| position: fixed; | |
| top: 0; | |
| left: 50%; | |
| margin-top: 10px; | |
| z-index: 100; | |
| overflow: hidden; | |
| height: 28px; | |
| -webkit-animation: headerPinnedSlideDown 500ms; /* Safari 4+ */ | |
| -moz-animation: headerPinnedSlideDown 500ms; /* Fx 5+ */ | |
| -o-animation: headerPinnedSlideDown 500ms; /* Opera 12+ */ | |
| animation: headerPinnedSlideDown 500ms; /* IE 10+ */ | |
| .site_fr &{ | |
| width: 94px; | |
| margin-left: -624px; | |
| a{ | |
| transform : scale(0.36); | |
| } | |
| } | |
| .site_de &{ | |
| width: 123px; | |
| margin-left: -653px; | |
| a{ | |
| transform :scale(0.37); | |
| } | |
| } | |
| .site_es &{ | |
| width: 105px; | |
| margin-left: -634px; | |
| a{ | |
| transform :scale(0.36); | |
| } | |
| } | |
| .site_br &{ | |
| width: 126px; | |
| margin-left: -654px; | |
| a{ | |
| transform : scale(0.37); | |
| } | |
| } | |
| .site_tr &{ | |
| width: 124px; | |
| margin-left: -652px; | |
| a{ | |
| transform : scale(0.37); | |
| } | |
| } | |
| } | |
| #header__nav{ | |
| position:fixed; | |
| left:0; | |
| right:0; | |
| padding:0; | |
| height:46px; | |
| animation: headerPinnedSlideDown 500ms; /* IE 10+ */ | |
| ul{ | |
| width:1024px; | |
| margin:auto; | |
| } | |
| > ul{ | |
| height:46px; | |
| > li { | |
| > a{ | |
| padding:0 10px; | |
| height:46px; | |
| line-height:46px; | |
| } | |
| &.is_active > a{ | |
| height:46px; | |
| } | |
| } | |
| } | |
| .subnav, .ephemeride{ | |
| width:auto; | |
| right:0; | |
| height:3px; | |
| h1{ | |
| display: none; | |
| } | |
| } | |
| } | |
| #header__account{ | |
| position:fixed; | |
| cursor:pointer; | |
| top:0; | |
| left:50%; | |
| margin:14px 0 0 460px; | |
| height:30px; | |
| width: 50px; | |
| animation: headerPinnedSlideDown 500ms; /* IE 10+ */ | |
| > a{ | |
| display: none; | |
| } | |
| .subnav{ | |
| left:-155px; | |
| } | |
| } | |
| .searchEngine{ | |
| position:fixed; | |
| z-index:10; | |
| top:0; | |
| left:50%; | |
| margin-left:90px; | |
| margin-top:2px; | |
| width:315px; | |
| animation: headerPinnedSlideDown 500ms; /* IE 10+ */ | |
| .searchEngine__form__input{ | |
| position:absolute; | |
| top:0; | |
| left:100%; | |
| right:0; | |
| width:0; | |
| padding:5px 0 0 0; | |
| border-width:0; | |
| overflow:hidden; | |
| transition :all 200ms ease-out; | |
| input[type='text']{ | |
| width:100% | |
| } | |
| &.is_open{ | |
| left:0%; | |
| width:100%; | |
| border-width:1px; | |
| overflow:visible; | |
| } | |
| } | |
| .searchEngine__extralinks, | |
| .searchEngine__form__input button{ | |
| display: none; | |
| } | |
| label{ | |
| top:11px; | |
| left:320px; | |
| display: block; | |
| [class*='minify']{ | |
| display: block; | |
| } | |
| } | |
| transition : left 200ms ease-out; | |
| input{ | |
| transition :transform 200ms ease-out; | |
| transform :translateX(100%); | |
| } | |
| &.is_open { | |
| input{ | |
| transform :translateX(0); | |
| } | |
| } | |
| } | |
| } | |
| #header__logo{ | |
| margin:0 0 17px 15px; | |
| height:46px; | |
| width: 163px; | |
| a{ | |
| transform : scale(0.62); | |
| } | |
| } | |
| .searchEngine{ | |
| input[type='text']{ | |
| padding:7px 14px; | |
| } | |
| button{ | |
| border-radius:0 2px 2px 0; | |
| padding:9px 10px; | |
| font-size:12px; | |
| } | |
| } | |
| .header__autopromo{ | |
| font-size: 11px; | |
| position:absolute; | |
| top:17px; | |
| right:15px; | |
| width: 250px; | |
| text-align: right; | |
| height:50px; | |
| .header__autopromo__text{ | |
| position:relative; | |
| top:50%; | |
| left:0; | |
| transform: translateY(-50%); | |
| a{ | |
| &:hover{ | |
| text-decoration:underline; | |
| } | |
| } | |
| } | |
| img{ | |
| display: block; | |
| float:right; | |
| margin:0 0 0 4px; | |
| } | |
| } | |
| #header__nav__mobile{ | |
| display:none; | |
| } | |
| #header__nav{ | |
| display: block; | |
| width:100%; | |
| position:relative; | |
| top:0; | |
| left:0; | |
| padding:0 180px 0 10px; | |
| background: none; | |
| overflow:visible; | |
| > ul{ | |
| margin-top:2px; | |
| height: 34px; | |
| } | |
| > ul > li{ | |
| display: inline; | |
| text-transform: uppercase; | |
| &:first-child{ | |
| .icon{ | |
| margin:0; | |
| } | |
| } | |
| &.is_active{ | |
| .subnav,.ephemeride { | |
| } | |
| .subnav{ | |
| position:absolute; | |
| top:100%; | |
| left:0; | |
| right:0; | |
| height: 30px; | |
| line-height: 30px; | |
| a{ | |
| font-weight: 700; | |
| padding:7px 9px; //7px | |
| font-size: 13px; | |
| &:hover{ | |
| } | |
| } | |
| .rub{ | |
| padding-bottom:5px; | |
| } | |
| } | |
| a{ | |
| background:none; | |
| } | |
| > a{ | |
| height:35px; | |
| &:hover{ | |
| } | |
| .site_de &,.site_tr &,.site_br &{ | |
| color:#333; | |
| &:hover{ | |
| color:#000; | |
| } | |
| } | |
| } | |
| li{ | |
| display: inline; | |
| } | |
| } | |
| > a{ | |
| padding:11px 10px 7px; | |
| display: inline-block; | |
| font-size: 13px; | |
| &:hover{ | |
| background: rgba(255,255,255,0.4); | |
| } | |
| } | |
| .mrub{ | |
| font-size: 18px; | |
| font-weight: 700; | |
| padding: 7px 10px; | |
| } | |
| } | |
| a{ | |
| display:inline; | |
| padding:0; | |
| border:none; | |
| } | |
| .ephemeride{ | |
| position:absolute; | |
| top:100%; | |
| left:0; | |
| padding:0 10px; | |
| font-size: 13px; | |
| height:30px; | |
| line-height:30px; | |
| h1{ | |
| font-weight: 300; | |
| font-size: 13px; | |
| a{ | |
| font-size: 13px; | |
| font-weight: 300; | |
| text-transform: none; | |
| &:hover{ | |
| } | |
| } | |
| } | |
| } | |
| .subnav{ | |
| border:none; | |
| a{ | |
| text-transform: none; | |
| font-size: 14px; | |
| font-weight: 300; | |
| padding: 0; | |
| border:none; | |
| &.rub{ | |
| border:0; | |
| padding:0; | |
| background:none; | |
| } | |
| } | |
| } | |
| } | |
| .searchEngine{ | |
| position: absolute; | |
| top:15px; | |
| left: 320px; | |
| label, [class*='minify']{ | |
| display:none; | |
| } | |
| .searchEngine__form__input{ | |
| display: block; | |
| position:static; | |
| padding:0; | |
| overflow:inherit; | |
| background: none; | |
| input{ | |
| transform : translateX(0); | |
| } | |
| input[type='text']{ | |
| width: 310px; | |
| } | |
| } | |
| .searchEngine__extralinks{ | |
| display: block; | |
| margin:5px 0 0 0; | |
| font-size:10px; | |
| a{ | |
| &:hover{ | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .main-header { | |
| height: 137px; | |
| padding: 10px 0 0 0; | |
| position: relative; | |
| width: auto; | |
| } | |
| .main-header.is_pinned #header__logo { | |
| position: fixed; | |
| top: 0; | |
| left: 50%; | |
| margin-top: 10px; | |
| z-index: 100; | |
| overflow: hidden; | |
| height: 28px; | |
| -webkit-animation: headerPinnedSlideDown 500ms; | |
| /* Safari 4+ */ | |
| -moz-animation: headerPinnedSlideDown 500ms; | |
| /* Fx 5+ */ | |
| -o-animation: headerPinnedSlideDown 500ms; | |
| /* Opera 12+ */ | |
| animation: headerPinnedSlideDown 500ms; | |
| /* IE 10+ */ | |
| } | |
| .site_fr .main-header.is_pinned #header__logo { | |
| width: 94px; | |
| margin-left: -624px; | |
| } | |
| .site_fr .main-header.is_pinned #header__logo a { | |
| transform: scale(0.36); | |
| } | |
| .site_de .main-header.is_pinned #header__logo { | |
| width: 123px; | |
| margin-left: -653px; | |
| } | |
| .site_de .main-header.is_pinned #header__logo a { | |
| transform: scale(0.37); | |
| } | |
| .site_es .main-header.is_pinned #header__logo { | |
| width: 105px; | |
| margin-left: -634px; | |
| } | |
| .site_es .main-header.is_pinned #header__logo a { | |
| transform: scale(0.36); | |
| } | |
| .site_br .main-header.is_pinned #header__logo { | |
| width: 126px; | |
| margin-left: -654px; | |
| } | |
| .site_br .main-header.is_pinned #header__logo a { | |
| transform: scale(0.37); | |
| } | |
| .site_tr .main-header.is_pinned #header__logo { | |
| width: 124px; | |
| margin-left: -652px; | |
| } | |
| .site_tr .main-header.is_pinned #header__logo a { | |
| transform: scale(0.37); | |
| } | |
| .main-header.is_pinned #header__nav { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| padding: 0; | |
| height: 46px; | |
| animation: headerPinnedSlideDown 500ms; | |
| /* IE 10+ */ | |
| } | |
| .main-header.is_pinned #header__nav ul { | |
| width: 1024px; | |
| margin: auto; | |
| } | |
| .main-header.is_pinned #header__nav > ul { | |
| height: 46px; | |
| } | |
| .main-header.is_pinned #header__nav > ul > li > a { | |
| padding: 0 10px; | |
| height: 46px; | |
| line-height: 46px; | |
| } | |
| .main-header.is_pinned #header__nav > ul > li.is_active > a { | |
| height: 46px; | |
| } | |
| .main-header.is_pinned #header__nav .subnav, .main-header.is_pinned #header__nav .ephemeride { | |
| width: auto; | |
| right: 0; | |
| height: 3px; | |
| } | |
| .main-header.is_pinned #header__nav .subnav h1, .main-header.is_pinned #header__nav .ephemeride h1 { | |
| display: none; | |
| } | |
| .main-header.is_pinned #header__account { | |
| position: fixed; | |
| cursor: pointer; | |
| top: 0; | |
| left: 50%; | |
| margin: 14px 0 0 460px; | |
| height: 30px; | |
| width: 50px; | |
| animation: headerPinnedSlideDown 500ms; | |
| /* IE 10+ */ | |
| } | |
| .main-header.is_pinned #header__account > a { | |
| display: none; | |
| } | |
| .main-header.is_pinned #header__account .subnav { | |
| left: -155px; | |
| } | |
| .main-header.is_pinned .searchEngine { | |
| position: fixed; | |
| z-index: 10; | |
| top: 0; | |
| left: 50%; | |
| margin-left: 90px; | |
| margin-top: 2px; | |
| width: 315px; | |
| animation: headerPinnedSlideDown 500ms; | |
| /* IE 10+ */ | |
| transition: left 200ms ease-out; | |
| } | |
| .main-header.is_pinned .searchEngine .searchEngine__form__input { | |
| position: absolute; | |
| top: 0; | |
| left: 100%; | |
| right: 0; | |
| width: 0; | |
| padding: 5px 0 0 0; | |
| border-width: 0; | |
| overflow: hidden; | |
| transition: all 200ms ease-out; | |
| } | |
| .main-header.is_pinned .searchEngine .searchEngine__form__input input[type='text'] { | |
| width: 100%; | |
| } | |
| .main-header.is_pinned .searchEngine .searchEngine__form__input.is_open { | |
| left: 0%; | |
| width: 100%; | |
| border-width: 1px; | |
| overflow: visible; | |
| } | |
| .main-header.is_pinned .searchEngine .searchEngine__extralinks, | |
| .main-header.is_pinned .searchEngine .searchEngine__form__input button { | |
| display: none; | |
| } | |
| .main-header.is_pinned .searchEngine label { | |
| top: 11px; | |
| left: 320px; | |
| display: block; | |
| } | |
| .main-header.is_pinned .searchEngine label [class*='minify'] { | |
| display: block; | |
| } | |
| .main-header.is_pinned .searchEngine input { | |
| transition: transform 200ms ease-out; | |
| transform: translateX(100%); | |
| } | |
| .main-header.is_pinned .searchEngine.is_open input { | |
| transform: translateX(0); | |
| } | |
| .main-header #header__logo { | |
| margin: 0 0 17px 15px; | |
| height: 46px; | |
| width: 163px; | |
| } | |
| .main-header #header__logo a { | |
| transform: scale(0.62); | |
| } | |
| .main-header .searchEngine input[type='text'] { | |
| padding: 7px 14px; | |
| } | |
| .main-header .searchEngine button { | |
| border-radius: 0 2px 2px 0; | |
| padding: 9px 10px; | |
| font-size: 12px; | |
| } | |
| .main-header .header__autopromo { | |
| font-size: 11px; | |
| position: absolute; | |
| top: 17px; | |
| right: 15px; | |
| width: 250px; | |
| text-align: right; | |
| height: 50px; | |
| } | |
| .main-header .header__autopromo .header__autopromo__text { | |
| position: relative; | |
| top: 50%; | |
| left: 0; | |
| transform: translateY(-50%); | |
| } | |
| .main-header .header__autopromo .header__autopromo__text a:hover { | |
| text-decoration: underline; | |
| } | |
| .main-header .header__autopromo img { | |
| display: block; | |
| float: right; | |
| margin: 0 0 0 4px; | |
| } | |
| .main-header #header__nav__mobile { | |
| display: none; | |
| } | |
| .main-header #header__nav { | |
| display: block; | |
| width: 100%; | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| padding: 0 180px 0 10px; | |
| background: none; | |
| overflow: visible; | |
| } | |
| .main-header #header__nav > ul { | |
| margin-top: 2px; | |
| height: 34px; | |
| } | |
| .main-header #header__nav > ul > li { | |
| display: inline; | |
| text-transform: uppercase; | |
| } | |
| .main-header #header__nav > ul > li:first-child .icon { | |
| margin: 0; | |
| } | |
| .main-header #header__nav > ul > li.is_active .subnav { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| height: 30px; | |
| line-height: 30px; | |
| } | |
| .main-header #header__nav > ul > li.is_active .subnav a { | |
| font-weight: 700; | |
| padding: 7px 9px; | |
| font-size: 13px; | |
| } | |
| .main-header #header__nav > ul > li.is_active .subnav .rub { | |
| padding-bottom: 5px; | |
| } | |
| .main-header #header__nav > ul > li.is_active a { | |
| background: none; | |
| } | |
| .main-header #header__nav > ul > li.is_active > a { | |
| height: 35px; | |
| } | |
| .site_de .main-header #header__nav > ul > li.is_active > a, .site_tr .main-header #header__nav > ul > li.is_active > a, .site_br .main-header #header__nav > ul > li.is_active > a { | |
| color: #333; | |
| } | |
| .site_de .main-header #header__nav > ul > li.is_active > a:hover, .site_tr .main-header #header__nav > ul > li.is_active > a:hover, .site_br .main-header #header__nav > ul > li.is_active > a:hover { | |
| color: #000; | |
| } | |
| .main-header #header__nav > ul > li.is_active li { | |
| display: inline; | |
| } | |
| .main-header #header__nav > ul > li > a { | |
| padding: 11px 10px 7px; | |
| display: inline-block; | |
| font-size: 13px; | |
| } | |
| .main-header #header__nav > ul > li > a:hover { | |
| background: rgba(255, 255, 255, 0.4); | |
| } | |
| .main-header #header__nav > ul > li .mrub { | |
| font-size: 18px; | |
| font-weight: 700; | |
| padding: 7px 10px; | |
| } | |
| .main-header #header__nav a { | |
| display: inline; | |
| padding: 0; | |
| border: none; | |
| } | |
| .main-header #header__nav .ephemeride { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| padding: 0 10px; | |
| font-size: 13px; | |
| height: 30px; | |
| line-height: 30px; | |
| } | |
| .main-header #header__nav .ephemeride h1 { | |
| font-weight: 300; | |
| font-size: 13px; | |
| } | |
| .main-header #header__nav .ephemeride h1 a { | |
| font-size: 13px; | |
| font-weight: 300; | |
| text-transform: none; | |
| } | |
| .main-header #header__nav .subnav { | |
| border: none; | |
| } | |
| .main-header #header__nav .subnav a { | |
| text-transform: none; | |
| font-size: 14px; | |
| font-weight: 300; | |
| padding: 0; | |
| border: none; | |
| } | |
| .main-header #header__nav .subnav a.rub { | |
| border: 0; | |
| padding: 0; | |
| background: none; | |
| } | |
| .main-header .searchEngine { | |
| position: absolute; | |
| top: 15px; | |
| left: 320px; | |
| } | |
| .main-header .searchEngine label, .main-header .searchEngine [class*='minify'] { | |
| display: none; | |
| } | |
| .main-header .searchEngine .searchEngine__form__input { | |
| display: block; | |
| position: static; | |
| padding: 0; | |
| overflow: inherit; | |
| background: none; | |
| } | |
| .main-header .searchEngine .searchEngine__form__input input { | |
| transform: translateX(0); | |
| } | |
| .main-header .searchEngine .searchEngine__form__input input[type='text'] { | |
| width: 310px; | |
| } | |
| .main-header .searchEngine .searchEngine__extralinks { | |
| display: block; | |
| margin: 5px 0 0 0; | |
| font-size: 10px; | |
| } | |
| .main-header .searchEngine .searchEngine__extralinks a:hover { | |
| text-decoration: underline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment