Commit 6131b98d authored by Mathieu Spillebeen's avatar Mathieu Spillebeen
Browse files

Initial commit.

parents
{"version":3,"sources":["../../_sass-essentials/sass-essentials.scss","../../_sass-essentials/_animations.scss","../../_sass-essentials/_mixins.scss","../../_sass-essentials/_variables.scss","../../stdin"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AAEH;;;GAGG;ACZH;;;GAGG;ACkBH,oBAAoB;AA8CpB;;;;GAIG;AACH,sBAAsB;AAqBtB;;;GAGG;AAQH;;;;GAIG;AAMH;;;;GAIG;ACvHH;;;GAGG;AAKH,YAAY;AA0BZ,gBAAgB;AAWhB,oCAAoC;AAMpC,iBAAiB;ACjDjB;EACE,mBAAmB;CACpB;;AAED;EACE,sBAAsB;CAIvB;;AALD;EAGI,eAAe;CAChB","file":"../pager.css","sourcesContent":["/* In order to use this import, make sure you have the bourbon setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"bourbon\";\n */\n\n/* In order to use this import, make sure you have the bourbonneat setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"neat\";\n */\n\n/* In order to use this import, make sure you have the breakpoint setting on \"true\" in\n * gulpfile.js/theming.config.js\n * @import \"breakpoint\";\n */\n\n@import '_colors.scss';\n@import '_animations.scss';\n@import '_box-shadows.scss';\n@import '_mixins.scss';\n@import '_typography.scss';\n@import '_variables.scss';\n","\n/* Animations\n@mixin transition() {\n transition: all 150ms ease;\n}*/\n","@mixin button {\n transition: all 150ms linear;\n background: $white;\n border: 1px solid $base-link-color;\n border-radius: 3px;\n box-shadow: none;\n color: $base-link-color;\n padding: 6px 10px 5px 10px;\n text-shadow: none;\n text-transform: lowercase;\n -webkit-font-smoothing: antialiased;\n\n &:hover,\n &:focus {\n background: $base-link-color;\n color: $white;\n outline: none;\n }\n}\n\n\n\n/* Column layouts */\n@mixin col_2 {\n margin: 0 0 25px 0;\n\n @media (min-width: 960px) {\n width: 50%;\n }\n}\n\n@mixin col_3 {\n width: 100%;\n\n @media (min-width: 600px) {\n width: 50%;\n }\n\n @media (min-width: 960px) {\n width: 33%;\n }\n}\n\n@mixin col_4 {\n @media (min-width: 600px) {\n width: 50%;\n\n }\n\n @media (min-width: 960px) {\n width: 25%;\n }\n}\n\n@mixin col_6 {\n width: 50%;\n\n\n @media (min-width: 600px) {\n width: 33%;\n }\n\n @media (min-width: 1200px) {\n width: 16.6%;\n margin-bottom: 0px;\n }\n}\n\n/*\n * Mixins.\n * Snippets of reusable CSS to develop faster and keep your code readable.\n * Add all mixins in this file.\n */\n/* Component mixins */\n@mixin cf {\n zoom: 1;\n &:after {\n clear: both;\n content: \" \";\n display: block;\n font-size: 0;\n height: 0;\n visibility: hidden;\n }\n}\n\n@mixin outer-container {\n\n margin-left: auto;\n margin-right: auto;\n max-width: $max-width;\n padding: 0 $gutter/2;\n}\n\n/*\n * CSS image replacement.\n * Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757.\n */\n@mixin hide-text {\n color: transparent;\n background-color: transparent;\n border: 0;\n font: 0/0 a;\n text-shadow: none;\n}\n/*\n * Calculate the px fallback for an rem value.\n * E.g.: @include rem_px(line-height, 1.5rem);\n * Returns both the rem and the px values.\n */\n@mixin rem_px($prop, $rem_val){\n #{$prop}: $rem_val / 1rem * $base-font-size;\n #{$prop}: $rem_val;\n}\n\n/*\n * Calculate the rem value and px fallback for a px value.\n * E.g.: @include px_rem(line-height, 16px);\n * Returns both the rem and the px values.\n */\n@mixin px-rem($prop, $px_val){\n #{$prop}: $px_val;\n #{$prop}: $px_val / $base-font-size * 1rem;\n}\n\n@mixin shrink {\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n box-shadow: 0 0 1px rgba(0, 0, 0, 0);\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n -moz-osx-font-smoothing: grayscale;\n -webkit-transition-duration: 0.3s;\n transition-duration: 0.3s;\n -webkit-transition-property: transform;\n transition-property: transform;\n &:hover {\n -webkit-transform: scale(0.98);\n transform: scale(0.98);\n }\n}\n\n@mixin flexbox {\n display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */\n display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */\n display: -ms-flexbox; /* TWEENER - IE 10 */\n display: -webkit-flex; /* NEW - Chrome */\n display: flex;\n}\n\n@mixin flexboxImportant {\n display: -webkit-box!important; /* OLD - iOS 6-, Safari 3.1-6 */\n display: -moz-box!important; /* OLD - Firefox 19- (buggy but mostly works) */\n display: -ms-flexbox!important; /* TWEENER - IE 10 */\n display: -webkit-flex!important; /* NEW - Chrome */\n display: flex!important;\n}\n","/*\n * Variables\n * Add your site-variables, such as colours and font sizes in this file.\n */\n\n$legacy_support_for_ie: false;\n$normalize_headings: true;\n\n/* Colors */\n$white: #fff;\n$beige: #e9e4cf;\n$lightblue: #eef3f2;\n$blue: #89cbbb;\n$darkerblue: #79b6a7;\n$darkblue: #293a3c;\n$orange: #e94d27;\n$input: #3f5456;\n\n$javascript: #cfe2dd;\n$drupal: #6ad1e4;\n$theming: #ffe269;\n$ux--design: #e94d27;\n\n$hover: #37445a;\n\n$background: #fff;\n$color: #333;\n$white: #fff;\n$base-text-color: $color;\n$base-selected-text-color: invert($base-text-color);\n$base-selected-text-background-color: $base-text-color;\n$base-link-color: #e93130;\n$base-link-hover-color: #19bdbe;\n\n/* Font sizes */\n$fs_1: 32px;\n$fs_2: 24px;\n$fs_3: 20px;\n$fs_4: 16px;\n$fs_5: 14px;\n$fs_6: 12px;\n\n$base-font-size: 17px;\n$base-line-height: 24px;\n\n/* Grid (powered by Bourbon Neat) */\n$gutter: 20px;\n$grid-columns: 12;\n$max-width: 960px;\n$column: ($max-width - ($gutter * $grid-columns)) / $grid-columns;\n\n/* Breakpoints */\n$bp1: 461px;\n$bp2: 768px;\n$bp3: 1025px;\n$bp4: 1400px;\n","@import \"sass-essentials\";\n\n.pager {\n text-align: center;\n}\n\n.pager__item {\n display: inline-block;\n a {\n padding: 0 5px;\n }\n}\n"]}
\ No newline at end of file
/* In order to use this import, make sure you have the bourbon setting on "true" in
* gulpfile.js/theming.config.js
* @import "bourbon";
*/
/* In order to use this import, make sure you have the bourbonneat setting on "true" in
* gulpfile.js/theming.config.js
* @import "neat";
*/
/* In order to use this import, make sure you have the breakpoint setting on "true" in
* gulpfile.js/theming.config.js
* @import "breakpoint";
*/
/* Animations
@mixin transition() {
transition: all 150ms ease;
}*/
/* Column layouts */
/*
* Mixins.
* Snippets of reusable CSS to develop faster and keep your code readable.
* Add all mixins in this file.
*/
/* Component mixins */
/*
* CSS image replacement.
* Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757.
*/
/*
* Calculate the px fallback for an rem value.
* E.g.: @include rem_px(line-height, 1.5rem);
* Returns both the rem and the px values.
*/
/*
* Calculate the rem value and px fallback for a px value.
* E.g.: @include px_rem(line-height, 16px);
* Returns both the rem and the px values.
*/
/*
* Variables
* Add your site-variables, such as colours and font sizes in this file.
*/
/* Colors */
/* Font sizes */
/* Grid (powered by Bourbon Neat) */
/* Breakpoints */
.pager {
text-align: center;
}
.pager__item {
display: inline-block;
}
.pager__item a {
padding: 0 5px;
}
pager:
version: VERSION
css:
component:
dist/pager.css: {}
{#
/**
* @file
* Theme override to display a pager.
*
* Available variables:
* - items: List of pager items.
* The list is keyed by the following elements:
* - first: Item for the first page; not present on the first page of results.
* - previous: Item for the previous page; not present on the first page
* of results.
* - next: Item for the next page; not present on the last page of results.
* - last: Item for the last page; not present on the last page of results.
* - pages: List of pages, keyed by page number.
* Sub-sub elements:
* items.first, items.previous, items.next, items.last, and each item inside
* items.pages contain the following elements:
* - href: URL with appropriate query parameters for the item.
* - attributes: A keyed list of HTML attributes for the item.
* - text: The visible text used for the item link, such as "‹ Previous"
* or "Next ›".
* - current: The page number of the current page.
* - ellipses: If there are more pages than the quantity allows, then an
* ellipsis before or after the listed pages may be present.
* - previous: Present if the currently visible list of pages does not start
* at the first page.
* - next: Present if the visible list of pages ends before the last page.
*
* @see template_preprocess_pager()
*/
#}
{{ attach_library('compony/pager') }}
{% if items %}
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
<ul class="pager__items js-pager__items">
{# Print first item if we are not on the first page. #}
{% if items.first %}
<li class="pager__item pager__item--first">
<a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>
<span class="visually-hidden">{{ 'First page'|t }}</span>
<span aria-hidden="true">{{ items.first.text|default('« First'|t) }}</span>
</a>
</li>
{% endif %}
{# Print previous item if we are not on the first page. #}
{% if items.previous %}
<li class="pager__item pager__item--previous">
<a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
<span class="visually-hidden">{{ 'Previous page'|t }}</span>
<span aria-hidden="true">{{ items.previous.text|default('‹ Previous'|t) }}</span>
</a>
</li>
{% endif %}
{# Add an ellipsis if there are further previous pages. #}
{% if ellipses.previous %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Now generate the actual pager piece. #}
{% for key, item in items.pages %}
<li class="pager__item{{ current == key ? ' is-active' : '' }}">
{% if current == key %}
{% set title = 'Current page'|t %}
{% else %}
{% set title = 'Go to page @key'|t({'@key': key}) %}
{% endif %}
<a href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }}>
<span class="visually-hidden">
{{ current == key ? 'Current page'|t : 'Page'|t }}
</span>
{{- key -}}
</a>
</li>
{% endfor %}
{# Add an ellipsis if there are further next pages. #}
{% if ellipses.next %}
<li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
{% endif %}
{# Print next item if we are not on the last page. #}
{% if items.next %}
<li class="pager__item pager__item--next">
<a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
<span class="visually-hidden">{{ 'Next page'|t }}</span>
<span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
</a>
</li>
{% endif %}
{# Print last item if we are not on the last page. #}
{% if items.last %}
<li class="pager__item pager__item--last">
<a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
<span class="visually-hidden">{{ 'Last page'|t }}</span>
<span aria-hidden="true">{{ items.last.text|default('Last »'|t) }}</span>
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
@import "sass-essentials";
.pager {
text-align: center;
}
.pager__item {
display: inline-block;
a {
padding: 0 5px;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment