ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-03-09 14:26:46 +01:00
commit b7977e1c28
18 changed files with 28081 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
sass/navigation/breadcrumb/_breadcrumb.scss Normal file
View file

@ -0,0 +1,33 @@
// Dependencies.
@import 'components/visually-hidden/visually-hidden';
// Breadcrumb navigation
//
// The path to the current page in the form of a list of links.
//
// Markup: breadcrumb.twig
//
// Style guide: navigation.breadcrumb
.breadcrumb,
%breadcrumb {
@media print {
display: none;
}
&__title {
@extend %visually-hidden;
}
&__list {
margin: 0;
padding: 0;
}
&__item {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
}

10
sass/navigation/breadcrumb/breadcrumb.twig Normal file
View file

@ -0,0 +1,10 @@
<nav class="breadcrumb {{modifier_class}}" role="navigation">
<h2 class="breadcrumb__title">You are here</h2>
<ol class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a> › </li>
<li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
<li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
<li class="breadcrumb__item">Current item</li>
</ol>
</nav>

40
sass/navigation/more-link/_more-link.scss Normal file
View file

@ -0,0 +1,40 @@
// "More" link
//
// Styles the "Read more…" and "Help" links common in Drupal.
//
// Markup: more-link.twig
//
// Style guide: navigation.more-link
.more-link,
%more-link {
text-align: right;
@include rtl() {
text-align: left;
}
&__help-icon {
padding: 1px 0 1px 20px;
background-image: image-url('navigation', 'more-link/more-link__help-icon.svg');
background-position: 0 50%;
background-repeat: no-repeat;
@include rtl() {
padding: 1px 20px 1px 0;
background-position: 100% 50%;
}
}
}
//
// Drupal selectors.
//
.more-help-link {
@extend %more-link;
a {
@extend %more-link__help-icon;
}
}

7
sass/navigation/more-link/more-link.twig Normal file
View file

@ -0,0 +1,7 @@
<div class="more-link {{modifier_class}}">
<a href="#">Read more…</a>
</div>
<div class="more-link {{modifier_class}}">
<a class="more-link__help-icon" href="#">Help</a>
</div>

1
sass/navigation/more-link/more-link__help-icon.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="8" cy="8" r="7" fill="#c5c5c5"/><path d="M8.767,10.847l-1.644,0c-0.004,-0.236 -0.007,-1.216 -0.007,-1.268c0,-0.533 0.089,-0.972 0.265,-1.316c0.176,-0.343 0.529,-0.73 1.058,-1.16c0.528,-0.43 0.844,-0.712 0.948,-0.845c0.159,-0.211 0.238,-0.443 0.238,-0.697c0,-0.352 -0.141,-0.654 -0.422,-0.906c-0.282,-0.251 -0.661,-0.377 -1.139,-0.377c-0.46,0 -0.844,0.131 -1.154,0.393c-0.309,0.263 -0.522,0.662 -0.638,1.2l-1.664,-0.207c0.047,-0.769 0.375,-1.423 0.983,-1.96c0.609,-0.538 1.407,-0.806 2.396,-0.806c1.041,0 1.868,0.272 2.483,0.816c0.615,0.543 0.922,1.177 0.922,1.899c0,0.4 -0.113,0.778 -0.338,1.135c-0.226,0.357 -0.709,0.843 -1.448,1.457c-0.383,0.319 -0.62,0.574 -0.713,0.768c-0.092,0.193 -0.134,1.376 -0.126,1.874ZM7.123,13.102l0,-1.629l1.666,0l0,1.629l-1.666,0Z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

61
sass/navigation/nav-menu/_nav-menu.scss Normal file
View file

@ -0,0 +1,61 @@
// Nav menu
//
// A "nav menu" is secondary, hierarchical navigation which can be displayed to the
// side or below the main content.
//
// Markup: nav-menu.twig
//
// Style guide: navigation.nav-menu
.nav-menu,
%nav-menu {
&__item {
list-style-image: image-url('navigation', 'nav-menu/leaf.svg');
list-style-type: square;
&.is-expanded,
&--is-expanded {
list-style-image: image-url('navigation', 'nav-menu/expanded.svg');
list-style-type: circle;
}
&.is-collapsed,
&--is-collapsed {
list-style-image: image-url('navigation', 'nav-menu/collapsed.svg');
list-style-type: disc;
@include rtl() {
list-style-image: image-url('navigation', 'nav-menu/collapsed-rtl.svg');
}
}
}
&__link {
&.is-active,
&--is-active {
color: color(menu-active);
}
}
}
//
// Drupal selectors.
//
.menu__item {
@extend %nav-menu__item;
&.is-expanded {
@extend %nav-menu__item--is-expanded;
}
&.is-collapsed {
@extend %nav-menu__item--is-collapsed;
}
}
// The active item in a Drupal menu.
.menu a.active {
@extend %nav-menu__link--is-active;
}

1
sass/navigation/nav-menu/collapsed-rtl.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="7" height="7" viewBox="0 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><path d="M5.159,7l-3.318,-3.5l3.318,-3.5l0,7Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 358 B

1
sass/navigation/nav-menu/collapsed.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="7" height="7" viewBox="0 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><path d="M1.841,0l3.318,3.5l-3.318,3.5l0,-7Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 357 B

1
sass/navigation/nav-menu/expanded.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="7" height="7" viewBox="0 0 7 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><path d="M7,1.841l-3.5,3.318l-3.5,-3.318l7,0Z" fill="#000"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 358 B

1
sass/navigation/nav-menu/leaf.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

28
sass/navigation/nav-menu/nav-menu.twig Normal file
View file

@ -0,0 +1,28 @@
<ul class="nav-menu {{modifier_class}}">
<li class="nav-menu__item">
<a href="/" class="nav-menu__link">Home</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
</li>
<li class="nav-menu__item is-expanded is-active-trail">
<a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
<ul class="nav-menu">
<li class="nav-menu__item">
<a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
</li>
<li class="nav-menu__item is-active-trail is-active">
<a href="#" class="nav-menu__link is-active">Decet</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Aliquip Similis</a>
</li>
</ul>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
</li>
<li class="nav-menu__item is-collapsed">
<a href="#" class="nav-menu__link">Ibidem Sudo</a>
</li>
</ul>

52
sass/navigation/navbar/_navbar.scss Normal file
View file

@ -0,0 +1,52 @@
// Dependencies.
@import 'components/visually-hidden/visually-hidden';
// Navbar
//
// A simple method to get navigation links to appear in one line.
//
// Markup: navbar.twig
//
// Style guide: navigation.navbar
.navbar,
%navbar {
margin: 0;
padding: 0;
text-align: left;
@include rtl() {
text-align: right;
}
&__item,
li {
float: left;
padding: 0 10px 0 0;
list-style-type: none;
list-style-image: none;
@include rtl() {
float: right;
padding: 0 0 0 10px;
}
}
}
//
// Drupal selectors.
//
.main-navigation {
// Hide the block titles put into the main-navigation area of the page.tpl.php.
.block-menu .block__title,
.block-menu-block .block__title {
@extend %visually-hidden;
}
// Main menu and secondary menu links and menu block links.
.links,
.menu {
@extend %navbar;
}
}

9
sass/navigation/navbar/navbar.twig Normal file
View file

@ -0,0 +1,9 @@
<ul class="navbar clearfix">
<li class="navbar__item"><a href="#">Home</a></li>
<li class="navbar__item"><a href="#">Blandit Jugis</a></li>
<li class="navbar__item"><a href="#">Causa Diam</a></li>
<li class="navbar__item"><a href="#">Abigo Caecus</a></li>
<li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
<li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
<li class="navbar__item"><a href="#">Ut</a></li>
</ul>

57
sass/navigation/pager/_pager.scss Normal file
View file

@ -0,0 +1,57 @@
// Pager
//
// Paged navigation is a list of page numbers when more than 1 page of content
// is available.
//
// Markup: pager.twig
//
// Style guide: navigation.pager
.pager,
%pager {
clear: both;
padding: 0;
text-align: center;
@media print {
display: none;
}
// A page item in the pager list.
&__item {
display: inline;
padding: 0 .5em;
list-style-type: none;
background-image: none;
}
// The current page's list item.
&__current-item {
@extend %pager__item;
font-weight: bold;
}
}
//
// Drupal selectors.
//
// .pager-item - A list item containing a page number in the list of pages.
// .pager-first - The first page's list item.
// .pager-previous - The previous page's list item.
// .pager-next - The next page's list item.
// .pager-last - The last page's list item.
// .pager-ellipsis - A concatenation of several list items using an ellipsis.
.pager-item,
.pager-first,
.pager-previous,
.pager-next,
.pager-last,
.pager-ellipsis {
@extend %pager__item;
}
.pager-current {
@extend %pager__current-item;
}

27
sass/navigation/pager/pager.twig Normal file
View file

@ -0,0 +1,27 @@
<ul class="pager {{modifier_class}}">
<li class="pager__item">
<a title="Go to first page" href="/admin/content">« first</a>
</li>
<li class="pager__item">
<a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
</li>
<li class="pager__item">
<a title="Go to page 1" href="/admin/content">1</a>
</li>
<li class="pager__item">
<a title="Go to page 2" href="/admin/content?page=1">2</a>
</li>
<li class="pager__current-item">3</li>
<li class="pager__item">
<a title="Go to page 4" href="/admin/content?page=3">4</a>
</li>
<li class="pager__item">
<a title="Go to page 5" href="/admin/content?page=4">5</a>
</li>
<li class="pager__item">
<a title="Go to next page" href="/admin/content?page=3">next ›</a>
</li>
<li class="pager__item">
<a title="Go to last page" href="/admin/content?page=4">last »</a>
</li>
</ul>

31
sass/navigation/skip-link/_skip-link.scss Normal file
View file

@ -0,0 +1,31 @@
// Skip link
//
// To make the link completely hidden until a user tabs to the link, combine it
// with the `visually-hidden` component.
//
// :focus - Focus styling.
//
// Markup: skip-link.twig
//
// Style guide: navigation.skip-link
.skip-link,
%skip-link {
display: block;
padding: 2px 0 3px;
text-align: center;
&:link,
&:visited {
background-color: color(skip-link-bg);
color: color(skip-link);
}
&__wrapper {
margin: 0;
@media print {
display: none;
}
}
}

3
sass/navigation/skip-link/skip-link.json Normal file
View file

@ -0,0 +1,3 @@
{
"content": "Jump to navigation"
}

3
sass/navigation/skip-link/skip-link.twig Normal file
View file

@ -0,0 +1,3 @@
<p class="skip-link__wrapper">
<a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable {{modifier_class}}">{{content}}</a>
</p>