Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>>
- <div class="row">
- <div class="small-3 columns">
- <div class="logo">
- <a href="/">
- <svg class="handsontable-logo">
- <use xlink:href="#handsontable-logo"></use>
- </svg>
- </a>
- <a href="//github.com/handsontable/handsontable" id="github-star" class="star-counter" target="_blank">
- <svg>
- <use xlink:href="#github-squid"></use>
- </svg>
- <div class="github-star">
- <div class="triangle"></div>
- <div data-bind="starsCount">-</div>
- </div>
- </a>
- </div>
- </div>
- <div class="small-9 columns text-right">
- <nav class="mobile-inactive">
- <a href="#" id="mobile-nav-menu">
- <svg>
- <use xlink:href="#open-mobile-nav"></use>
- </svg>
- </a>
- <ul>
- <li class="mobile-only"><a href="/">Home</a></li>
- <li><a href="/features.html">Features</a></li>
- <li><a
- href="/examples.html?manual-resize&manual-move&conditional-formatting&context-menu&filters&dropdown-menu&headers">
- Examples
- </a></li>
- <li><a href="/download.html">Download</a></li>
- <li><a href="/pricing.html">Pricing</a></li>
- <li><a href="/customers">Case studies</a></li>
- <li><a href="/developers.html">Developers</a></li>
- <li class="mobile-only"><a href="/resellers.html">Resellers</a></li>
- <li class="mobile-only"><a href="/blog/">Blog</a></li>
- <li class="mobile-only"><a href="/contact.html">Contact</a></li>
- <li class="news">
- <svg>
- <use xlink:href="#bell"></use>
- </svg>
- </li>
- <li><a href="//my.handsontable.com/sign-in.html"
- class="btn size-small bg-green-light bg-lighten text-white">
- Sign in
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
- header {
- @include absolute-top-left (0, 0);
- width: 100%;
- padding: 34px 0 0;
- z-index: 1;
- .logo {
- @include relative-top-left (-3px, 0);
- @media only screen and (min-width: $largeWidth) {
- @include relative-top-left (10px, 0);
- }
- svg {
- &.handsontable-logo {
- @include rectangle (130px, 25px);
- fill: $baseGray;
- }
- }
- }
- /* Begin: This allows to stretch the mobile menu to 100% of width of the viewport */
- & > .row > .columns:last-child {
- position: static;
- }
- /* End */
- nav {
- & > a {
- @include absolute-top-right (4px, 5px);
- padding: 20px;
- display: block;
- z-index: 11;
- @media only screen and (min-width: $largeWidth) {
- display: none;
- }
- svg {
- @include square (28px);
- fill: $baseGray;
- }
- }
- ul {
- display: none;
- @media only screen and (min-width: $largeWidth) {
- display: block;
- }
- li {
- padding: 0 19px;
- display: inline-block;
- &:last-child {
- padding-right: 0;
- }
- &.mobile-only {
- display: none;
- }
- &.news {
- padding-right: 32px;
- position: relative;
- svg {
- @include square (18px);
- @include relative-top-left (4px, 0);
- fill: $baseGray;
- }
- #HW_badge_cont {
- @include absolute-top-left (0, 13px);
- #HW_badge {
- @include square (12px);
- @include relative-top-left (0, 0);
- line-height: 13px;
- background-color: $brandRedActive;
- &.HW_softHidden {
- opacity: .4;
- background-color: $brandVibrantGreenActive;
- }
- }
- }
- }
- a, a:hover, a:active, a:visited {
- font-size: 13px;
- color: $baseGray;
- }
- a:hover {
- color: $darkGray;
- }
- }
- }
- }
- /* Menu visible only on mobile devices */
- nav.mobile-active {
- @media only screen and (min-width: $largeWidth) {
- display: none;
- }
- & > a {
- svg {
- fill: $darkGray;
- }
- }
- ul {
- @include absolute-top-left (12px, 2%);
- width: 96%;
- padding: 66px 0 8px;
- display: block;
- text-align: center;
- border-radius: 4px;
- z-index: 10;
- box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 18px rgba(0, 0, 0, 0.15);
- background: #fff;
- li {
- width: 49%;
- padding: 10px 0;
- &.mobile-only {
- display: inline-block;
- }
- a, a:hover, a:active, a:visited {
- font-size: 18px;
- color: $brandBlue;
- &.btn {
- width: 100%;
- color: #fff;
- font-size: 18px;
- }
- }
- &:last-child {
- width: 90%;
- padding-top: 40px;
- }
- &.news {
- display: none;
- }
- }
- }
- }
- &.header-white {
- .logo {
- .github-star {
- border: 1px solid $darkWhite;
- color: $darkWhite;
- font-weight: 600;
- .triangle {
- border-right-color: $darkWhite;
- }
- }
- svg {
- fill: $darkWhite;
- }
- }
- a, a:hover, a:active, a:visited {
- color: #fff;
- }
- a:hover:not(.btn) {
- color: $brandFeatherBlue;
- }
- svg, .news svg {
- fill: #fff;
- }
- }
- }
- customers === white
- | subfolder === white
- | subfolder === white
- | subfolder === white
- header {
- &.header-white {
- a, a:hover, a:active, a:visited {
- color: #fff;
- }
- }
- }
- <li><a href="/customers">Case studies</a></li>
- <li><a class="customers" href="/customers">Case studies</a></li>
- header {
- &.header-white {
- a.customers {
- &, &:hover, &:active, &:visited {
- color: #fff;
- }
- }
- }
- }
- <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>>
- <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.path[1] === 'index' ) { %> class="header-white"<% } %>>
Add Comment
Please, Sign In to add comment