├── .tugboat ├── config.yml └── settings.php ├── GovCMS-kss-template ├── builder.js ├── index.twig ├── kss-assets │ ├── WARNING.txt │ ├── github-fork--black.png │ ├── govcms8_kss-accordion.js │ ├── govcms8_kss.css │ ├── kss-fullscreen.js │ ├── kss-guides.js │ ├── kss-markup.js │ ├── kss.css │ ├── kss.js │ ├── kss.scss │ ├── noise-low.png │ ├── prettify.js │ ├── sample-inline.png │ ├── sample-inline.svg │ ├── sample.png │ ├── sample.svg │ └── scrollspy.js ├── package.json └── section_example.twig ├── README.md ├── assets ├── js │ ├── back_to_top.js │ └── responsive_table.js └── scss │ ├── _base.scss │ ├── _govcms_uikit_starter_variables.scss │ ├── components │ ├── fields │ │ ├── _field_body.scss │ │ ├── _fields_base.scss │ │ └── _read_more.scss │ ├── form │ │ └── _form.scss │ ├── header │ │ ├── _header.scss │ │ └── _header_search.scss │ ├── legal │ │ └── _legal.scss │ ├── logo │ │ └── _logo.scss │ ├── modifiers │ │ └── _modifiers.scss │ ├── navigation │ │ ├── _back-to-top.scss │ │ ├── _local-tasks.scss │ │ └── _main_nav.scss │ ├── paragraphs │ │ ├── _paragraph_accordion.scss │ │ ├── _paragraph_colors.scss │ │ ├── _paragraph_styles.scss │ │ └── _paragraphs.scss │ ├── search │ │ └── _search.scss │ ├── table │ │ └── _table.scss │ ├── view_modes │ │ ├── calendar-item │ │ │ └── _calendar-item.scss │ │ ├── search │ │ │ └── _search.scss │ │ ├── stack │ │ │ └── _stack.scss │ │ ├── summary │ │ │ └── _summary.scss │ │ └── teaser │ │ │ └── _teaser.scss │ └── views │ │ └── _mini-pager.scss │ ├── content_types │ ├── _blog_article.scss │ ├── _event.scss │ ├── _foi.scss │ ├── _news_and_media.scss │ └── _standard_page.scss │ ├── highlighted_layouts.scss │ ├── kss-homepage.md │ ├── layouts │ ├── _content-layouts.scss │ ├── _lists-layouts.scss │ ├── _page-layout.scss │ └── _views-layouts.scss │ ├── style.scss │ └── uikit │ ├── accordion │ ├── _accordion.scss │ ├── accordion.json │ └── accordion.twig │ ├── breadcrumb │ ├── _breadcrumb.scss │ ├── breadcrumb.json │ └── breadcrumb.twig │ ├── button │ ├── _button.scss │ └── button.twig │ ├── cta-link │ ├── _cta-link.scss │ ├── cta_link.json │ └── cta_link.twig │ ├── header │ ├── _header.scss │ ├── header.json │ └── header.twig │ ├── inpage-nav │ ├── _inpage_nav.scss │ ├── inpage_nav.json │ └── inpage_nav.twig │ ├── keyword-list │ ├── _keyword_list.scss │ ├── keyword_list.json │ └── keyword_list.twig │ ├── link-list │ ├── _link_list.scss │ ├── link_list.json │ └── link_list.twig │ ├── page-alerts │ ├── _page_alerts.scss │ ├── page_alerts.json │ └── page_alerts.twig │ ├── progress-indicator │ ├── _progress_indicator.scss │ ├── progress_indicator.json │ └── progress_indicator.twig │ └── tags │ ├── _tags.scss │ ├── tags.json │ └── tags.twig ├── composer.json ├── config-local.json ├── config.json ├── config ├── install │ ├── block.block.govcms8_uikit_starter_breadcrumbs.yml │ ├── block.block.govcms8_uikit_starter_footer.yml │ ├── block.block.govcms8_uikit_starter_help.yml │ ├── block.block.govcms8_uikit_starter_mainnavigation.yml │ ├── block.block.govcms8_uikit_starter_mainpagecontent.yml │ ├── block.block.govcms8_uikit_starter_pagetitle.yml │ ├── block.block.govcms8_uikit_starter_sitebranding.yml │ ├── block.block.govcms8_uikit_starter_tabs.yml │ └── govcms8_uikit_starter.settings.yml └── optional │ ├── block.block.exposedformcontent_searchpage_1.yml │ └── block.block.exposedformcontent_searchpage_1_2.yml ├── css ├── highlighted_layouts.css ├── highlighted_layouts.css.map └── style.css ├── default.config-local.json ├── govcms8_uikit_starter.info.yml ├── govcms8_uikit_starter.libraries.yml ├── govcms8_uikit_starter.theme ├── gulpfile.js ├── js ├── accordion.js ├── animate.js ├── govcms8_uikit_starter.js ├── main-nav.js ├── side-nav.js └── uikit.min.js ├── kss-config.json ├── logo.svg ├── package-lock.json ├── package.json ├── screenshot.png ├── styleguide ├── index.html ├── item-ui-kit-accordion.html ├── item-ui-kit-breadcrumb.html ├── item-ui-kit-button.html ├── item-ui-kit-cta-link.html ├── item-ui-kit-header.html ├── item-ui-kit-inpage-nav.html ├── item-ui-kit-keyword-list.html ├── item-ui-kit-link-list.html ├── item-ui-kit-page-alerts.html ├── item-ui-kit-progress-indicator.html ├── item-ui-kit-tags.html ├── item-ui-kit.html ├── kss-assets │ ├── WARNING.txt │ ├── github-fork--black.png │ ├── govcms8_kss-accordion.js │ ├── govcms8_kss.css │ ├── kss-accordion.js │ ├── kss-fullscreen.js │ ├── kss-guides.js │ ├── kss-markup.js │ ├── kss.css │ ├── kss.js │ ├── kss.scss │ ├── noise-low.png │ ├── prettify.js │ ├── sample-inline.png │ ├── sample-inline.svg │ ├── sample.png │ ├── sample.svg │ └── scrollspy.js └── section-ui-kit.html └── templates ├── block ├── block--local-tasks-block.html.twig ├── block--system-branding-block.html.twig ├── block--system-menu-block.html.twig └── block.html.twig ├── content └── page-title.html.twig ├── field ├── categories │ ├── categories_base.html.twig │ ├── field--field-blog-article-categories.html.twig │ ├── field--field-event-categories.html.twig │ └── field--field-news-categories.html.twig ├── field--field-il-items.html.twig ├── field--field-media-release-type.html.twig ├── field--field-nl-nodes.html.twig ├── field--node--title.html.twig ├── field--paragraph--field-heading--item.html.twig ├── field--paragraph--field-heading.html.twig ├── field--paragraph--field-read-more.html.twig └── field.html.twig ├── form ├── details.html.twig ├── fieldset.html.twig ├── form-element-label.html.twig ├── form-element.html.twig ├── input--checkbox.html.twig ├── input--password.html.twig ├── input--radio.html.twig ├── input--submit.html.twig ├── input--textfield.html.twig ├── input.html.twig ├── select.html.twig └── textarea.html.twig ├── inc ├── list.twig ├── page_footer.html.twig └── page_header.html.twig ├── layout ├── html.html.twig ├── page.html.twig └── region.html.twig ├── misc └── status_messages.html.twig ├── navigation ├── breadcrumb.html.twig ├── menu--main--navigation.html.twig ├── menu--main.html.twig ├── menu-local-task.html.twig ├── menu-local-tasks.html.twig ├── menu.html.twig └── pager.html.twig ├── paragraphs ├── accordion │ ├── field--paragraph--field-accordions.html.twig │ ├── field--paragraph--field-show-close-all.html.twig │ ├── field--paragraph--field-show-open-all.html.twig │ ├── field--paragraph--field-show-toggle-all.html.twig │ ├── paragraph--accordion-group.html.twig │ └── paragraph--accordion.html.twig ├── paragraph--item.html.twig └── paragraph.html.twig ├── uikit ├── accordion │ └── accordion.twig ├── breadcrumb │ └── breadcrumb.twig ├── button │ └── button.twig ├── cta-link │ └── cta_link.twig ├── header │ └── header.twig ├── inpage-nav │ └── inpage_nav.twig ├── keyword-list │ └── keyword_list.twig ├── link-list │ └── link_list.twig ├── page-alerts │ └── page_alerts.twig ├── progress-indicator │ └── progress_indicator.twig ├── tags │ ├── tag.twig │ └── tags.twig └── text-inputs │ ├── input.twig │ └── textarea.twig └── views ├── views-mini-pager.html.twig ├── views-view-table.html.twig └── views-view.html.twig /.tugboat/settings.php: -------------------------------------------------------------------------------- 1 | 'sites/default/files/sync', 12 | ); 13 | $settings['hash_salt'] = 'djfu983roawei90tk3;mva9023i9523'; 14 | $settings['update_free_access'] = FALSE; 15 | $settings['file_scan_ignore_directories'] = [ 16 | 'node_modules', 17 | 'bower_components', 18 | ]; 19 | $settings['entity_update_batch_size'] = 50; 20 | $databases['default']['default'] = array ( 21 | 'database' => 'tugboat', 22 | 'username' => 'tugboat', 23 | 'password' => 'tugboat', 24 | 'prefix' => '', 25 | 'host' => 'mysql', 26 | 'port' => '3306', 27 | 'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql', 28 | 'driver' => 'mysql', 29 | ); 30 | if (PHP_SAPI === 'cli') { 31 | ini_set('memory_limit', '256M'); 32 | } 33 | $settings['trusted_host_patterns'] = ['.*']; 34 | $config['system.logging']['error_level'] = 'verbose'; 35 | error_reporting(E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR); 36 | ini_set('display_errors', TRUE); 37 | ini_set('display_startup_errors', TRUE); -------------------------------------------------------------------------------- /GovCMS-kss-template/builder.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * This module is used to load the base KSS builder class needed by this builder 5 | * and to define any custom CLI options or extend any base class methods. 6 | * 7 | * Note: since this builder wants to extend the KssBuilderBaseTwig class, it 8 | * must export a KssBuilderBaseTwig sub-class as a module. Otherwise, kss-node 9 | * will assume the builder wants to use the KssBuilderBaseHandlebars class. 10 | * 11 | * This file's name should follow standard node.js require() conventions. It 12 | * should either be named index.js or have its name set in the "main" property 13 | * of the builder's package.json. See 14 | * http://nodejs.org/api/modules.html#modules_folders_as_modules 15 | * 16 | * @module kss/builder/twig 17 | */ 18 | 19 | 20 | // We want to extend kss-node's Twig builder so we can add options that 21 | // are used in our templates. 22 | let KssBuilderBaseTwig; 23 | 24 | try { 25 | // In order for a builder to be "kss clone"-able, it must use the 26 | // require('kss/builder/path') syntax. 27 | KssBuilderBaseTwig = require('kss/builder/base/twig'); 28 | } catch (e) { 29 | // The above require() line will always work. 30 | // 31 | // Unless you are one of the developers of kss-node and are using a git clone 32 | // of kss-node where this code will not be inside a "node_modules/kss" folder 33 | // which would allow node.js to find it with require('kss/anything'), forcing 34 | // you to write a long-winded comment and catch the error and try again using 35 | // a relative path. 36 | KssBuilderBaseTwig = require('../base/twig'); 37 | } 38 | 39 | /** 40 | * A kss-node builder that takes input files and builds a style guide using Twig 41 | * templates. 42 | */ 43 | class KssBuilderTwig extends KssBuilderBaseTwig { 44 | /** 45 | * Create a builder object. 46 | */ 47 | constructor() { 48 | // First call the constructor of KssBuilderBaseTwig. 49 | super(); 50 | 51 | // Then tell kss which Yargs-like options this builder adds. 52 | this.addOptionDefinitions({ 53 | title: { 54 | group: 'Style guide:', 55 | string: true, 56 | multiple: false, 57 | describe: 'Title of the style guide', 58 | default: 'KSS Style Guide' 59 | } 60 | }); 61 | } 62 | } 63 | 64 | module.exports = KssBuilderTwig; 65 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/WARNING.txt: -------------------------------------------------------------------------------- 1 | WARNING: This folder is deleted and re-recreated each time the style guide is 2 | built. Do NOT put your own files in this folder. 3 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/github-fork--black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/GovCMS-kss-template/kss-assets/github-fork--black.png -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/govcms8_kss-accordion.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 3 | 'use strict'; 4 | 5 | var count = 1; 6 | 7 | // Get the .au-body class in ui-kit-accordion section. 8 | var groups = document.querySelectorAll('#kssref-ui-kit-accordion .au-body'); 9 | 10 | for (var i = 0; i < groups.length; i++) { 11 | var group = groups[i]; 12 | 13 | // Update the onclick attribute to get the right accordion-group number. 14 | var buttons = group.querySelectorAll('.au-btn'); 15 | for (var k = 0; k < buttons.length; k++) { 16 | var button = buttons[k]; 17 | 18 | var str = button.getAttribute('onclick'); 19 | var newValue = str.replace(".accordion-group", ".accordion-group-" + count); 20 | button.setAttribute('onclick', newValue); 21 | } 22 | 23 | // Update the accordion-group to get number from au-body count. 24 | var el = group.querySelector('.accordion-group'); 25 | var newValue = el.getAttribute('class') + '-' + count; 26 | el.setAttribute('class', newValue); 27 | 28 | var accordions = group.querySelectorAll('.au-accordion'); 29 | 30 | for (var j = 0; j < accordions.length; j++) { 31 | var accordion = accordions[j]; 32 | 33 | // Update href of accordion to be unique. 34 | var el = accordion.querySelector('.au-accordion__title'); 35 | var newValue = el.getAttribute('href') + '-' + count; 36 | el.setAttribute('href', newValue); 37 | 38 | // Update aria-controls of accordion to be unique. 39 | newValue = el.getAttribute('aria-controls') + '-' + count; 40 | el.setAttribute('aria-controls', newValue); 41 | 42 | // Update id of accordion body to be unique. 43 | el = accordion.querySelector('.au-accordion__body'); 44 | newValue = el.getAttribute('id') + '-' + count; 45 | el.setAttribute('id', newValue); 46 | } 47 | 48 | count++; 49 | } 50 | 51 | 52 | })(window, document); 53 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/govcms8_kss.css: -------------------------------------------------------------------------------- 1 | /* Custom styling for GovCMS styleguide. */ 2 | .kss-markup { 3 | clear: both; 4 | } 5 | 6 | /* Styleguide example block should not move horizontally. */ 7 | .au-body--dark.col-sm-6:not(.au-body--alt) { 8 | clear: left; 9 | } 10 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/kss-fullscreen.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | // Set the configuration values on object creation. 5 | // - idPrefix: The string that uniquely prefixes the ID of all elements that 6 | // can receive the fullscreen focus. 7 | // - bodyClass: The class that is set on the body element when the fullscreen 8 | // mode is toggled on. 9 | // - elementClass: the class that is set on the element that is receiving the 10 | // fullscreen focus. 11 | var KssFullScreen = function (config) { 12 | this.idPrefix = config.idPrefix || 'kss-fullscreen-'; 13 | this.bodyClass = config.bodyClass || 'kss-fullscreen-mode'; 14 | this.elementClass = config.elementClass || 'is-fullscreen'; 15 | 16 | this.init(); 17 | }; 18 | 19 | // Initialize the page to see if the fullscreen mode should be immediately 20 | // turned on. 21 | KssFullScreen.prototype.init = function () { 22 | // Check the location hash to see if it matches the idPrefix. 23 | if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) { 24 | this.setFocus(window.location.hash.slice(1 + this.idPrefix.length)); 25 | } 26 | 27 | var self = this; 28 | // Initialize all fullscreen toggle buttons. 29 | document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) { 30 | // Get the section reference from the data attribute. 31 | button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); 32 | }); 33 | }; 34 | 35 | // Activation function that takes the ID of the element that will receive 36 | // fullscreen focus. 37 | KssFullScreen.prototype.setFocus = function (id) { 38 | var el; 39 | 40 | // Find the element with the given ID and start fullscreen mode. 41 | if (el = document.getElementById(id)) { 42 | el.classList.toggle('is-fullscreen'); 43 | document.body.classList.toggle('kss-fullscreen-mode'); 44 | 45 | // When enabling the focus mode, change the location hash. 46 | if (el.classList.contains('is-fullscreen')) { 47 | window.location.hash = '#' + this.idPrefix + id; 48 | // Don't follow the link location. 49 | return false; 50 | } 51 | } 52 | 53 | return true; 54 | }; 55 | 56 | // Export to DOM global space. 57 | window.KssFullScreen = KssFullScreen; 58 | 59 | })(window, document); 60 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/kss-guides.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssGuides = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-guides-mode'; 6 | 7 | this.init(); 8 | }; 9 | 10 | KssGuides.prototype.init = function () { 11 | var self = this; 12 | // Initialize all guides toggle buttons. 13 | document.querySelectorAll('a[data-kss-guides]').forEach(function (el) { 14 | el.onclick = self.showGuides.bind(self); 15 | }); 16 | }; 17 | 18 | // Toggle the guides mode. 19 | KssGuides.prototype.showGuides = function () { 20 | document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass); 21 | }; 22 | 23 | // Export to DOM global space. 24 | window.KssGuides = KssGuides; 25 | 26 | })(window, document); 27 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/kss-markup.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssMarkup = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-markup-mode'; 6 | this.detailsClass = config.detailsClass || 'kss-markup'; 7 | 8 | this.init(); 9 | }; 10 | 11 | KssMarkup.prototype.init = function () { 12 | var self = this; 13 | // Initialize all markup toggle buttons. 14 | document.querySelectorAll('a[data-kss-markup]').forEach(function (el) { 15 | el.onclick = self.showGuides.bind(self); 16 | }); 17 | }; 18 | 19 | // Activation function that takes the ID of the element that will receive 20 | // fullscreen focus. 21 | KssMarkup.prototype.showGuides = function () { 22 | var body = document.getElementsByTagName('body')[0], 23 | enabled = body.classList.contains(this.bodyClass); 24 | 25 | document.querySelectorAll('.' + this.detailsClass).forEach(function (el) { 26 | if (enabled) { 27 | el.removeAttribute('open'); 28 | } else { 29 | el.setAttribute('open', ''); 30 | } 31 | }); 32 | 33 | // Toggle the markup mode. 34 | body.classList.toggle(this.bodyClass); 35 | }; 36 | 37 | // Export to DOM global space. 38 | window.KssMarkup = KssMarkup; 39 | 40 | })(window, document); 41 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/kss.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var KssStateGenerator; 3 | 4 | KssStateGenerator = (function() { 5 | var pseudo_selectors; 6 | 7 | pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child']; 8 | 9 | function KssStateGenerator() { 10 | var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; 11 | pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g"); 12 | try { 13 | _ref = document.styleSheets; 14 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 15 | stylesheet = _ref[_i]; 16 | if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) { 17 | idxs = []; 18 | _ref2 = stylesheet.cssRules; 19 | for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { 20 | rule = _ref2[idx]; 21 | if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { 22 | replaceRule = function(matched, stuff) { 23 | return matched.replace(/\:/g, '.pseudo-class-'); 24 | }; 25 | this.insertRule(rule.cssText.replace(pseudos, replaceRule)); 26 | } 27 | pseudos.lastIndex = 0; 28 | } 29 | } 30 | } 31 | } catch (_error) {} 32 | } 33 | 34 | KssStateGenerator.prototype.insertRule = function(rule) { 35 | var headEl, styleEl; 36 | headEl = document.getElementsByTagName('head')[0]; 37 | styleEl = document.createElement('style'); 38 | styleEl.type = 'text/css'; 39 | if (styleEl.styleSheet) { 40 | styleEl.styleSheet.cssText = rule; 41 | } else { 42 | styleEl.appendChild(document.createTextNode(rule)); 43 | } 44 | return headEl.appendChild(styleEl); 45 | }; 46 | 47 | return KssStateGenerator; 48 | 49 | })(); 50 | 51 | new KssStateGenerator; 52 | 53 | }).call(this); 54 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/noise-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/GovCMS-kss-template/kss-assets/noise-low.png -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/sample-inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/GovCMS-kss-template/kss-assets/sample-inline.png -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/sample-inline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/GovCMS-kss-template/kss-assets/sample.png -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/sample.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /GovCMS-kss-template/kss-assets/scrollspy.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o scrollTop); 116 | }; 117 | 118 | ScrollSpy.prototype.markNav = function (elems) { 119 | var navItems = this.nav, 120 | isAlreadyMarked = false; 121 | 122 | for (var i = 0, max = navItems.length; i < max; i++) { 123 | if (elems.viewStatusList[i] && !isAlreadyMarked) { 124 | isAlreadyMarked = true; 125 | navItems[i].classList.add(this.className); 126 | } else { 127 | navItems[i].classList.remove(this.className); 128 | } 129 | } 130 | }; 131 | 132 | 133 | module.exports = ScrollSpy; 134 | 135 | },{}],2:[function(require,module,exports){ 136 | (function (global){ 137 | /** 138 | * ScrollSpy 139 | * 140 | */ 141 | 142 | var ScrollSpy = require('./modules/scrollspy'); 143 | 144 | global.ScrollSpy = module.exports = ScrollSpy; 145 | 146 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 147 | },{"./modules/scrollspy":1}]},{},[2]); 148 | -------------------------------------------------------------------------------- /GovCMS-kss-template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kss-node-twig-builder", 3 | "version": "3.0.0", 4 | "description": "The Twig.js builder for kss-node.", 5 | "main": "builder.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "sass": "./node_modules/.bin/node-sass --output-style compressed kss-assets/kss.scss kss-assets/kss.css" 9 | }, 10 | "devDependencies": { 11 | "node-sass": "^3.4.2" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /GovCMS-kss-template/section_example.twig: -------------------------------------------------------------------------------- 1 |
2 | {% if section.modifiers is not empty %} 3 |
4 | Default styling 5 |
6 | {% endif %} 7 | 8 |
9 | {{ section.example|raw }} 10 |
11 |
12 | 13 | {% for modifier in section.modifiers %} 14 |
15 | {{ modifier.name }} 16 |
17 |
18 | {{ modifier.description|raw }} 19 |
20 |
21 | {{ modifier.markup|raw }} 22 |
23 |
24 | {% endfor %} 25 |
26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GovCMS 8 UI-Kit Starter - ARCHIVED 2 | [![CircleCI](https://circleci.com/gh/govcms/govcms8_uikit_starter.svg?style=svg)](https://circleci.com/gh/govcms/govcms8_uikit_starter) 3 | 4 | This theme implements UI Kit into GovCMS. It makes use of the templates provided 5 | in govcms8_uikit and extends them to work with Drupal. It also provide styling 6 | for the layout templates and modifiers from _govcms8_foundations_ module. 7 | 8 | ## Getting up and running 9 | 1. Run command `npm run setup`. This may take a while – be patient, do some exercise. 10 | 2. Copy and rename *default.config-local.json* to *config-local.json*. 11 | 3. Update content of config.local.json to suite your local environment. 12 | 13 | ## Workflow options 14 | 15 | ### Production setup 16 | 17 | * run command `npm run gulp` 18 | 19 | **This will produce:** 20 | * compressed CSS output 21 | * optimized Image assets 22 | * minified JS 23 | 24 | ### Development setup 25 | 26 | * run command `npm run gulp dev` 27 | 28 | **This will produce:** 29 | * nested CSS output 30 | * un-minified JS 31 | * source maps for both CSS and JS 32 | * watch task for changes in SCSS and JS files 33 | * BrowserSync links 34 | 35 | ### JS Linting 36 | 37 | * run command `npm run js-lint` 38 | 39 | This will check for common errors in your JS files. 40 | Its not a part of the watch task. 41 | 42 | ### Generating Styleguide 43 | 44 | * run command `npm run styleguide` 45 | 46 | It is using KSS-Node style-guide with custom twig template. 47 | -------------------------------------------------------------------------------- /assets/js/back_to_top.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * JS for Back To Top link. 4 | */ 5 | 6 | (function ($) { 7 | 8 | Drupal.behaviors.govcms8_uikit_starter_BackToTop = { 9 | attach: function (context, settings) { 10 | var $body = $('body, html'); 11 | var backToTop = $('.back-to-top__link', context); 12 | 13 | // Toggle class on backToTop. 14 | $(window).scroll(function () { 15 | if ($(this).scrollTop() > 250) { 16 | backToTop.addClass('is-visible'); 17 | } else { 18 | backToTop.removeClass('is-visible'); 19 | } 20 | }); 21 | 22 | // Scroll smoothly to top on click. 23 | backToTop.click(function (event) { 24 | $body.animate({ 25 | scrollTop: 0 26 | }, 800, function () { 27 | $body.attr('tabindex','-1').focus().removeAttr('tabindex'); 28 | }); 29 | event.preventDefault(); 30 | }); 31 | 32 | } 33 | }; 34 | 35 | })(jQuery); 36 | -------------------------------------------------------------------------------- /assets/js/responsive_table.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * JS for wrapping tables in a div with .table-responsive class. 4 | */ 5 | 6 | (function ($) { 7 | 8 | Drupal.behaviors.govcms8_uikit_starter_tableResponsive = { 9 | attach: function (context, settings) { 10 | 11 | var table = $("table"); 12 | $(table).wrap("
"); 13 | 14 | } 15 | }; 16 | 17 | })(jQuery); 18 | -------------------------------------------------------------------------------- /assets/scss/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *:before, *:after { 6 | box-sizing: inherit; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/_govcms_uikit_starter_variables.scss: -------------------------------------------------------------------------------- 1 | //// 2 | // MAIN MENU 3 | //// 4 | $main-menu-border: 6px; 5 | $main-menu-border-negative: -$main-menu-border; 6 | 7 | //// 8 | // COLORS 9 | //// 10 | $white: #FFFFFF; 11 | $black: #000000; 12 | $govcms8-color-shadow: transparentize($black, 0.85); 13 | 14 | // Calendar item colors 15 | $govcms8-calendar-item-foreground: #313131; 16 | $govcms8-calendar-item-background: #ededed; 17 | $govcms8-calendar-item-background-current: #f2fbfd; 18 | $govcms8-calendar-item-background-past: #fafafa; 19 | $govcms8-calendar-item-foreground-past: #737373; 20 | -------------------------------------------------------------------------------- /assets/scss/components/fields/_field_body.scss: -------------------------------------------------------------------------------- 1 | // Body field on Edge to edge page needs its own container. 2 | .page-layout--edgy { 3 | .block-entity-fieldnodebody { 4 | @extend .container; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /assets/scss/components/fields/_fields_base.scss: -------------------------------------------------------------------------------- 1 | .field--label-inline { 2 | > .field__label { 3 | display: inline-block; 4 | font-weight: bold; 5 | 6 | &:after { 7 | content: ": "; 8 | } 9 | } 10 | > .field__item { 11 | display: inline-block; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /assets/scss/components/fields/_read_more.scss: -------------------------------------------------------------------------------- 1 | .paragraph-content { 2 | .au-cta-link { 3 | @include AU-space(margin-top, 1unit); 4 | display: inline-block; 5 | } 6 | 7 | // CTA-link on UI-Kit dark or dark alt background. 8 | .color--dark & { 9 | .au-cta-link { 10 | @extend .au-cta-link--dark; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /assets/scss/components/form/_form.scss: -------------------------------------------------------------------------------- 1 | .webform-options-display-side-by-side .au-form-group + .au-form-group { 2 | @include AU-space(margin-top, 0); 3 | } 4 | 5 | .au-form-group + .au-fieldset { 6 | @include AU-space(margin-top, 1unit); 7 | } 8 | 9 | .au-fieldset + .au-fieldset { 10 | @include AU-space(margin-top, 2unit); 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/components/header/_header.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Styling for header region. 3 | */ 4 | .au-header { 5 | @include AU-space(padding-bottom, 0unit); 6 | } 7 | 8 | // Logo and search box should be aligned. 9 | .header--vertical-align { 10 | @include AU-media(xs) { 11 | display: flex; 12 | align-items: center; 13 | } 14 | 15 | .logo, 16 | .search { 17 | width: 100%; 18 | 19 | @include AU-media(xs) { 20 | width: 50%; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /assets/scss/components/header/_header_search.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Styling for header search form. 3 | */ 4 | 5 | @function magnifying-glass($color) { 6 | $color-no-hash: unquote(str-slice(quote($color), 2)); 7 | @return url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210.5%22%20stroke%3D%22%23#{$color-no-hash}%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M21%2019L30%2028L28%2030L19%2021L21%2019Z%22%20fill%3D%22%23#{$color-no-hash}%22%2F%3E%3C%2Fsvg%3E"); 8 | } 9 | 10 | .search { 11 | @include AU-space(margin-top, 1.6unit); 12 | 13 | @include AU-media(xs) { 14 | margin-top: 0; 15 | } 16 | 17 | .form-submit { 18 | text-indent: -999px; 19 | background-image: magnifying-glass($AU-color-background); 20 | background-size: 24px; 21 | background-repeat: no-repeat; 22 | background-position: center; 23 | 24 | .au-header--dark & { 25 | background-image: magnifying-glass($AU-colordark-background); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /assets/scss/components/legal/_legal.scss: -------------------------------------------------------------------------------- 1 | .region-legal { 2 | @include AU-space(margin-top, 1unit); 3 | @include AU-space(padding-top, 1unit); 4 | border-top: 1px solid transparentize($black, 0.8); 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/components/logo/_logo.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Styling for header logo. 3 | */ 4 | .region-logo { 5 | img, 6 | a { 7 | display: block; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /assets/scss/components/modifiers/_modifiers.scss: -------------------------------------------------------------------------------- 1 | .modifiers-has-background { 2 | @include AU-space(padding, 2unit $AU-grid-12-gutter-width/2); 3 | } 4 | -------------------------------------------------------------------------------- /assets/scss/components/navigation/_back-to-top.scss: -------------------------------------------------------------------------------- 1 | .back-to-top__link { 2 | @include AU-space(bottom, 15px); 3 | @include AU-space(right, 15px); 4 | @include AU-space(padding, 0.1em 0.5em); 5 | background: rgba(255,255,255, 0.8); 6 | border: none; 7 | display: block; 8 | opacity: 0; 9 | position: fixed; 10 | transition: all 600ms ease-in-out; 11 | z-index: -1; 12 | 13 | &:focus, 14 | &.is-visible { 15 | opacity: 1; 16 | transition: all 300ms ease-in-out; 17 | z-index: 9999; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/scss/components/navigation/_local-tasks.scss: -------------------------------------------------------------------------------- 1 | .tabs-primary { 2 | .au-btn.is-active { 3 | @extend .au-btn:hover; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/components/navigation/_main_nav.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Main menu styling for default and alt style. 3 | */ 4 | .au-main-nav { 5 | @include AU-space(margin-top, 1.6unit); 6 | } 7 | -------------------------------------------------------------------------------- /assets/scss/components/paragraphs/_paragraph_accordion.scss: -------------------------------------------------------------------------------- 1 | .paragraph--type--accordion-group { 2 | .field--name-field-body { 3 | @include AU-space(margin-bottom, 1unit); 4 | } 5 | } 6 | 7 | .accordion-group__control { 8 | @include AU-space(margin-bottom, 1unit); 9 | } 10 | 11 | .accordion-group { 12 | > .paragraph > .paragraph-content { 13 | @include AU-space(padding, 0unit); 14 | } 15 | 16 | .paragraph + .paragraph > .paragraph-content .au-accordion { 17 | border-top: 0; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/scss/components/paragraphs/_paragraph_colors.scss: -------------------------------------------------------------------------------- 1 | .paragraph { 2 | &.color--alt { 3 | @extend .au-body.au-body--alt, .modifiers-has-background; 4 | } 5 | &.color--dark { 6 | @extend .au-body.au-body--dark, .modifiers-has-background; 7 | } 8 | &.color--dark-alt { 9 | @extend .au-body.au-body--dark, .au-body.au-body--dark.au-body--alt, .modifiers-has-background; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/components/paragraphs/_paragraph_styles.scss: -------------------------------------------------------------------------------- 1 | // We use the values for the hero styling here from gov.au Header component. 2 | .paragraph { 3 | &.style--hero { 4 | @include AU-space( padding, 3unit $AU-grid-12-gutter-width/2 3.5unit $AU-grid-12-gutter-width/2 ); 5 | 6 | @include AU-media( sm ) { 7 | @include AU-space( padding, 6unit $AU-grid-12-gutter-width/2 6.5unit $AU-grid-12-gutter-width/2 ); 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/components/paragraphs/_paragraphs.scss: -------------------------------------------------------------------------------- 1 | // Paragraph content needs to be separated. 2 | .paragraph .paragraph-content { 3 | @include AU-space(padding-bottom, $AU-grid-12-gutter-width); 4 | @include AU-space(padding-top, $AU-grid-12-gutter-width); 5 | position: relative; 6 | z-index: 101; 7 | } 8 | // But no need for vertical padding on paragraph content if the paragraph has background color. 9 | .modifiers-has-background > .paragraph-content { 10 | padding-bottom: 0; 11 | padding-top: 0; 12 | } 13 | 14 | 15 | // Paragraphs on edgy layout. 16 | .page-layout--edgy { 17 | .paragraph-content { 18 | @include AU-clearfix; 19 | box-sizing: border-box; 20 | margin-right: auto; 21 | margin-left: auto; 22 | padding-left: floor(($AU-grid-12-gutter-width / 2)); 23 | padding-right: ceil(($AU-grid-12-gutter-width / 2)); 24 | width: 100%; 25 | 26 | @include AU-media(sm) { 27 | max-width: ($AU-media-sm - $AU-grid-12-gutter-width); 28 | } 29 | 30 | @include AU-media(md) { 31 | max-width: ($AU-media-md - $AU-grid-12-gutter-width); 32 | } 33 | 34 | @include AU-media(lg) { 35 | max-width: ($AU-media-lg - $AU-grid-12-gutter-width); 36 | } 37 | } 38 | // No need for horizontal padding on paragraph content if the paragraph has background color. 39 | .modifiers-has-background > .paragraph-content { 40 | padding-left: 0; 41 | padding-right: 0; 42 | 43 | @include AU-media(sm) { 44 | padding-left: floor(($AU-grid-12-gutter-width / 2)); 45 | padding-right: ceil(($AU-grid-12-gutter-width / 2)); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /assets/scss/components/search/_search.scss: -------------------------------------------------------------------------------- 1 | // Search block. 2 | 3 | form#views-exposed-form-content-search-page-1 { 4 | display: flex; 5 | 6 | // This is the text input wrapper. 7 | .form-item-keys { 8 | display: block; 9 | width: 100%; 10 | flex: 1 1 100%; 11 | 12 | label { 13 | @include AU-sronly(); 14 | } 15 | } 16 | 17 | // This is the button wrapper. 18 | .form-wrapper { 19 | display: block; 20 | width: auto; 21 | flex: 0; 22 | } 23 | 24 | .form-text { 25 | @include AU-fontgrid( xs, nospace ); 26 | @include AU-space( padding, 0.8unit 1unit 0.8unit 1unit ); 27 | @include AU-space( border-top-right-radius, 0 ); 28 | @include AU-space( border-bottom-right-radius, 0 ); 29 | appearance: none; 30 | background-color: $AU-color-background; 31 | border-right: 0; 32 | box-sizing: border-box; 33 | color: $AU-color-foreground-text; 34 | display: block; 35 | margin: 0; 36 | width: 100%; 37 | min-width: 100%; 38 | 39 | @include AU-media( sm ) { 40 | @include AU-fontgrid( sm, nospace); 41 | } 42 | 43 | &.form-autocomplete { 44 | background-position: right .5rem center; 45 | } 46 | 47 | &::placeholder { 48 | color: $AU-color-foreground-muted; 49 | opacity: 1; 50 | } 51 | 52 | &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 53 | color: $AU-color-foreground-muted; 54 | opacity: 1; 55 | } 56 | 57 | &::-moz-placeholder { /* Firefox 19+ */ 58 | color: $AU-color-foreground-muted; 59 | opacity: 1; 60 | } 61 | 62 | &:-ms-input-placeholder { /* IE 10+ */ 63 | color: $AU-color-foreground-muted; 64 | opacity: 1; 65 | } 66 | 67 | &:-moz-placeholder { /* Firefox 18- */ 68 | color: $AU-color-foreground-muted; 69 | opacity: 1; 70 | } 71 | } 72 | 73 | .form-submit { 74 | @include AU-space( border-top-left-radius, 0 ); 75 | @include AU-space( border-bottom-left-radius, 0 ); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /assets/scss/components/table/_table.scss: -------------------------------------------------------------------------------- 1 | // Table styles 2 | table { 3 | border-collapse: collapse; 4 | width: 100%; 5 | 6 | td, 7 | th { 8 | @include AU-space(padding, .5unit 1unit); 9 | } 10 | 11 | thead th { 12 | border-bottom: 2px solid $AU-color-background-alt-shade; 13 | } 14 | 15 | &.table-bordered { 16 | td, 17 | th { 18 | border: 1px solid $AU-color-background-alt-shade; 19 | } 20 | 21 | thead th { 22 | border-bottom-width: 2px; 23 | } 24 | } 25 | 26 | &.table-alt { 27 | th { 28 | background: $AU-color-background-alt; 29 | } 30 | } 31 | 32 | &.table-dark { 33 | th { 34 | background: $AU-colordark-background; 35 | color: $AU-colordark-foreground-text; 36 | } 37 | } 38 | 39 | &.table-dark.table-alt { 40 | th { 41 | background: $AU-colordark-background-alt; 42 | } 43 | } 44 | 45 | &.table-striped tbody { 46 | tr:nth-child(odd) { 47 | background: $AU-color-background-alt; 48 | } 49 | 50 | tr:nth-child(even) { 51 | background: $white; 52 | } 53 | } 54 | 55 | &.table-sm { 56 | td, 57 | th { 58 | @include AU-space(padding, .25unit .5unit); 59 | } 60 | } 61 | } 62 | 63 | // Style for responsive table wrapper div. 64 | .table-responsive { 65 | display: block; 66 | overflow-x: auto; 67 | width: 100%; 68 | } 69 | -------------------------------------------------------------------------------- /assets/scss/components/view_modes/calendar-item/_calendar-item.scss: -------------------------------------------------------------------------------- 1 | $calendar-item__date-width: 4rem; 2 | 3 | .calendar-item { 4 | background: $govcms8-calendar-item-background; 5 | color: $govcms8-calendar-item-foreground; 6 | display: flex; 7 | justify-content: stretch; 8 | 9 | .calendar-item__date { 10 | @include AU-space(padding, .5unit); 11 | @include AU-fontgrid( sm ); 12 | @include AU-space(width, $calendar-item__date-width); 13 | align-items: center; 14 | color: $govcms8-calendar-item-foreground; 15 | display: flex; 16 | line-height: .8; 17 | text-align: center; 18 | text-transform: uppercase; 19 | 20 | .field { 21 | width: 100%; 22 | } 23 | } 24 | 25 | .calendar-date { 26 | @include AU-space(margin, 0 auto); 27 | color: $govcms8-calendar-item-foreground; 28 | 29 | span { 30 | @include AU-fontgrid( xl ); 31 | color: $AU-color-foreground-action; 32 | display: block; 33 | font-weight: 700; 34 | margin: 0; 35 | } 36 | } 37 | 38 | .calendar-item__content { 39 | @include AU-space(padding, .5unit); 40 | border-left: 2px solid $AU-color-background; 41 | width: calc(100% - #{$calendar-item__date-width}); 42 | 43 | // All regions has one third unit gap between them. 44 | *[class^='calendar-item__'] + *[class^='calendar-item__'] { 45 | @include AU-space(margin-top, .3unit); 46 | } 47 | } 48 | 49 | &.calendar-item--current { 50 | background: $govcms8-calendar-item-background-current; 51 | } 52 | 53 | &.calendar-item--past { 54 | background: $govcms8-calendar-item-background-past; 55 | color: $govcms8-calendar-item-foreground-past; 56 | 57 | .calendar-date, 58 | span, 59 | a { 60 | color: $govcms8-calendar-item-foreground-past; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /assets/scss/components/view_modes/search/_search.scss: -------------------------------------------------------------------------------- 1 | .search__content { 2 | // All regions has one third unit gap between them. 3 | *[class^='search__'] + *[class^='search__'] { 4 | @include AU-space(margin-top, .3unit); 5 | } 6 | // Title has a full unit gap bellow. 7 | h3.search__title { 8 | @include AU-space(margin-bottom, 1unit); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/components/view_modes/stack/_stack.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Stacks as Design system Card 3 | * In the beginning there were no Card, so we created a Stack. Then someone say 4 | * lets there be a card. We cannot remove the stack layout with markup for backward 5 | * compatibility. Instead we add card classes through preprocess and extend some 6 | * other to the original stack markup. 7 | */ 8 | .stack { 9 | // Can be removed once https://github.com/govau/design-system-components/issues/822 is done. 10 | height: 100%; 11 | } 12 | 13 | .stack__image { 14 | img { 15 | display: block; 16 | width: 100%; 17 | } 18 | } 19 | 20 | // Stack title is extended to Card title. 21 | .stack__title { 22 | @extend .au-card__title; 23 | 24 | .au-card--clickable & { 25 | a { 26 | @extend .au-card--clickable__link; 27 | } 28 | } 29 | } 30 | 31 | // Stack content is extened to Card inner. 32 | .stack__content { 33 | @extend .au-card__inner; 34 | 35 | // All regions has one third unit gap between them. 36 | *[class^='stack__'] + *[class^='stack__'] { 37 | @include AU-space(margin-top, .3unit); 38 | } 39 | } 40 | 41 | // Stack/cards looks the same on all backgrounds. 42 | .au-body--alt, 43 | .au-body--dark, 44 | .au-body--dark.au-body--alt, 45 | .color--alt, 46 | .color--dark, 47 | .color--dark-alt { 48 | .stack { 49 | color: $AU-color-foreground-text; 50 | 51 | a { 52 | color: $AU-color-foreground-action; 53 | 54 | &:hover { 55 | color: $AU-color-foreground-text; 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /assets/scss/components/view_modes/summary/_summary.scss: -------------------------------------------------------------------------------- 1 | .summary__content { 2 | // All regions has one third unit gap between them. 3 | *[class^='summary__'] + *[class^='summary__'] { 4 | @include AU-space(margin-top, .3unit); 5 | } 6 | // Title has a full unit gap bellow. 7 | h3.summary__title { 8 | @include AU-space(margin-bottom, 1unit); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/components/view_modes/teaser/_teaser.scss: -------------------------------------------------------------------------------- 1 | // Default styling for teaser view mode. 2 | $teaser--small_image-width: 8rem; // 128px 3 | $teaser--medium_image-width: 12.5rem; // 200px 4 | 5 | .teaser { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | @include AU-media( sm ) { 10 | flex-direction: row; 11 | } 12 | } 13 | 14 | .teaser__image { 15 | order: 1; 16 | 17 | a, 18 | img { 19 | display: block; 20 | } 21 | } 22 | 23 | .teaser__content { 24 | order: 2; 25 | 26 | // All regions has one third unit gap between them. 27 | *[class^='teaser__'] + *[class^='teaser__'] { 28 | @include AU-space(margin-top, .3unit); 29 | } 30 | 31 | // Title has a full unit gap bellow. 32 | h3.teaser__title { 33 | @include AU-space(margin-bottom, 1unit); 34 | } 35 | } 36 | 37 | // Teaser small dimensions. 38 | .teaser--small { 39 | .teaser__image { 40 | @include AU-media( sm ) { 41 | @include AU-space(width, $teaser--small_image-width); 42 | } 43 | } 44 | 45 | .teaser__content { 46 | @include AU-media( sm ) { 47 | @include AU-space(padding-left, 1unit); 48 | width: calc(100% - #{$teaser--small_image-width}); 49 | } 50 | } 51 | } 52 | // Teaser (medium) dimensions. 53 | .teaser--medium { 54 | .teaser__image { 55 | @include AU-media( sm ) { 56 | @include AU-space(width, $teaser--medium_image-width); 57 | } 58 | } 59 | 60 | .teaser__content { 61 | @include AU-media( sm ) { 62 | @include AU-space(padding-left, 1unit); 63 | width: calc(100% - #{$teaser--medium_image-width}); 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /assets/scss/components/views/_mini-pager.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/assets/scss/components/views/_mini-pager.scss -------------------------------------------------------------------------------- /assets/scss/content_types/_blog_article.scss: -------------------------------------------------------------------------------- 1 | .node--type-govcms_blog_article { 2 | &.node--view-mode-full { 3 | 4 | div[class*="block-entity-fieldnode"] + div[class*="block-entity-fieldnode"] { 5 | @include AU-space(margin-top, 1unit); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/content_types/_event.scss: -------------------------------------------------------------------------------- 1 | .node--type-govcms_event { 2 | &.node--view-mode-full { 3 | 4 | div[class*="block-entity-fieldnode"] + div[class*="block-entity-fieldnode"] { 5 | @include AU-space(margin-top, 1unit); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/content_types/_foi.scss: -------------------------------------------------------------------------------- 1 | .node--type-govcms_foi { 2 | &.node--view-mode-full { 3 | 4 | div[class*="block-entity-fieldnode"] + div[class*="block-entity-fieldnode"] { 5 | @include AU-space(margin-top, 1unit); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/content_types/_news_and_media.scss: -------------------------------------------------------------------------------- 1 | .node--type-govcms_news_and_media { 2 | &.node--view-mode-full { 3 | 4 | div[class*="block-entity-fieldnode"] + div[class*="block-entity-fieldnode"] { 5 | @include AU-space(margin-top, 1unit); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/content_types/_standard_page.scss: -------------------------------------------------------------------------------- 1 | .node--type-govcms_standard_page { 2 | &.node--view-mode-full { 3 | 4 | div[class*="block-entity-fieldnode"] + div[class*="block-entity-fieldnode"] { 5 | @include AU-space(margin-top, 1unit); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/highlighted_layouts.scss: -------------------------------------------------------------------------------- 1 | //// 2 | // Highlighted layouts theme settings. 3 | //// 4 | %highlighted_layout_before { 5 | background: #444444; 6 | color: #FFFFFF; 7 | font-size: 1rem; 8 | padding: 2px 4px; 9 | position: absolute; 10 | right: 0; 11 | top: 0; 12 | } 13 | 14 | .highlighted-layouts { 15 | .header-section { 16 | .header { 17 | box-shadow: inset 0 0 0 3px #930000; 18 | position: relative; 19 | 20 | &::before { 21 | @extend %highlighted_layout_before; 22 | content: "header"; 23 | } 24 | } 25 | } 26 | 27 | .page-layout__content-section { 28 | .page-layout__content-top { 29 | box-shadow: inset 0 0 0 3px #BEBEBE; 30 | position: relative; 31 | 32 | &::before { 33 | @extend %highlighted_layout_before; 34 | content: "content top"; 35 | } 36 | } 37 | 38 | .page-layout__content { 39 | box-shadow: inset 0 0 0 3px #930000; 40 | position: relative; 41 | 42 | &::before { 43 | @extend %highlighted_layout_before; 44 | content: "content"; 45 | } 46 | } 47 | 48 | .page-layout__sidebar { 49 | box-shadow: inset 0 0 0 3px #648395; 50 | position: relative; 51 | 52 | &::before { 53 | @extend %highlighted_layout_before; 54 | content: "sidebar"; 55 | } 56 | } 57 | 58 | .page-layout__content-bottom { 59 | box-shadow: inset 0 0 0 3px #BEBEBE; 60 | position: relative; 61 | 62 | &::before { 63 | @extend %highlighted_layout_before; 64 | content: "content bottom"; 65 | } 66 | } 67 | } 68 | 69 | .page-layout__content-footer-section { 70 | .page-layout__content-footer { 71 | box-shadow: inset 0 0 0 3px #930000; 72 | position: relative; 73 | 74 | &::before { 75 | @extend %highlighted_layout_before; 76 | content: "footer"; 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /assets/scss/kss-homepage.md: -------------------------------------------------------------------------------- 1 |

GovCMS 8 UI-Kit Starter Styleguide

2 | 3 |

This styleguide is showing only the UI-Kit components with a reasonable 4 | template. It is not providing a comprehensive list of every style 5 | available in UI-Kit or the theme. Feel free to add other components as needed.

6 |

For live examples of other styling, install the defaul content and visit 7 | the **/test** page.

8 | 9 | -------------------------------------------------------------------------------- /assets/scss/layouts/_content-layouts.scss: -------------------------------------------------------------------------------- 1 | //// 2 | // Common styling for all layouts. 3 | // Using extends here, allows us to have templates without BS specific classes. 4 | // Leaving it open to switch more easily to different grid framework. 5 | //// 6 | .page-layout__content-header-section { 7 | @include AU-space(margin-bottom, $AU-grid-12-gutter-width); 8 | 9 | .page-layout__content-header { 10 | @extend .col-sm-12; 11 | @include AU-space(min-height, 0); // As this region is 100% width, we don't need prevent the collapsing of it. 12 | } 13 | } 14 | 15 | .page-layout__content-section { 16 | .page-layout__content-top { 17 | @extend .col-sm-12; 18 | @include AU-space(margin-bottom, $AU-grid-12-gutter-width); 19 | } 20 | 21 | .page-layout__content-bottom { 22 | @extend .col-sm-12; 23 | @include AU-space(margin-top, $AU-grid-12-gutter-width); 24 | } 25 | } 26 | 27 | // Select all layouts except .page-layout--edgy. 28 | .page-layout:not(.page-layout--edgy) { 29 | .page-layout__content-section { 30 | @extend .container; 31 | 32 | @include AU-media(sm) { 33 | width: $AU-media-sm - $AU-grid-12-gutter-width; 34 | } 35 | @include AU-media(md) { 36 | width: $AU-media-md - $AU-grid-12-gutter-width; 37 | } 38 | @include AU-media(lg) { 39 | width: $AU-media-lg - $AU-grid-12-gutter-width; 40 | } 41 | } 42 | } 43 | 44 | .page-layout__content-footer-section { 45 | .page-layout__content-footer { 46 | @extend .col-sm-12; 47 | @include AU-space(min-height, 0); // As this region is 100% width, we don't need prevent the collapsing of it. 48 | } 49 | } 50 | 51 | // Add space above footer region for all pages except the panelized ones. 52 | .au-body:not(.is-panelized) { 53 | .au-footer { 54 | @include AU-space(margin-top, 2unit); 55 | } 56 | } 57 | 58 | // Add space below content region for all panelized pages except the edgy. 59 | .au-body.is-panelized .page-layout:not(.page-layout--edgy) { 60 | @include AU-space(margin-bottom, 2unit); 61 | } 62 | 63 | //// 64 | // Layouts specific styling. 65 | //// 66 | .au-grid { 67 | // Layout 4 8 68 | .page-layout--48 { 69 | .page-layout__content { 70 | @extend .col-sm-8; 71 | @extend .col-sm-push-4; 72 | } 73 | 74 | .page-layout__sidebar { 75 | @extend .col-sm-4; 76 | @extend .col-sm-pull-8; 77 | } 78 | } 79 | 80 | // Layout 6 6 81 | .page-layout--66 { 82 | .page-layout__content { 83 | @extend .col-sm-6; 84 | } 85 | 86 | .page-layout__sidebar { 87 | @extend .col-sm-6; 88 | } 89 | } 90 | 91 | // Layout 8 4 92 | .page-layout--84 { 93 | .page-layout__content { 94 | @extend .col-sm-8; 95 | } 96 | 97 | .page-layout__sidebar { 98 | @extend .col-sm-4; 99 | } 100 | } 101 | 102 | // Layout 12 12 103 | .page-layout--1212 { 104 | .page-layout__content-top { 105 | @include AU-space(min-height, 0); 106 | } 107 | 108 | .page-layout__content { 109 | @extend .col-sm-12; 110 | } 111 | 112 | .page-layout__sidebar { 113 | @extend .col-sm-12; 114 | } 115 | 116 | .page-layout__content-bottom { 117 | @include AU-space(min-height, 0); 118 | } 119 | } 120 | 121 | // Layout edgy 122 | .page-layout--edgy { 123 | .page-layout__content-section { 124 | @extend .container-fluid; 125 | 126 | .page-layout__content-top { 127 | @include AU-space(min-height, 0); 128 | @include AU-space(padding-left, 0); // Background goes to edge of the screen. 129 | @include AU-space(padding-right, 0); // Background goes to edge of the screen. 130 | } 131 | 132 | .page-layout__content { 133 | @extend .col-sm-12; 134 | @include AU-space(padding-left, 0); // Background goes to edge of the screen. 135 | @include AU-space(padding-right, 0); // Background goes to edge of the screen. 136 | } 137 | 138 | .page-layout__content-bottom { 139 | @include AU-space(min-height, 0); 140 | @include AU-space(padding-left, 0); // Background goes to edge of the screen. 141 | @include AU-space(padding-right, 0); // Background goes to edge of the screen. 142 | } 143 | } 144 | 145 | .page-layout__content-footer-section { 146 | @extend .container-fluid; 147 | 148 | .page-layout__content-footer { 149 | @include AU-space(padding-left, 0); // Background goes to edge of the screen. 150 | @include AU-space(padding-right, 0); // Background goes to edge of the screen. 151 | } 152 | } 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /assets/scss/layouts/_lists-layouts.scss: -------------------------------------------------------------------------------- 1 | // Common styling for list paragraphs. 2 | .paragraph--type--item-list[class*="list-layout--"] .list, 3 | .paragraph--type--node-list[class*="list-layout--"] .list { 4 | @include AU-space(margin-left, -$AU-grid-12-gutter-width/2); 5 | @include AU-space(margin-right, -$AU-grid-12-gutter-width/2); 6 | list-style: none; 7 | padding-left: 0; 8 | 9 | @include AU-media( sm ) { 10 | display: flex; 11 | flex-wrap: wrap; 12 | justify-content: stretch; 13 | } 14 | 15 | > .list__item { 16 | @include AU-space(margin-top, $AU-grid-12-gutter-width); 17 | } 18 | 19 | // Styling for different view modes as selected with Entity Reference Display. 20 | &.erd-list--calendar-item { 21 | @include AU-space(margin-top, $AU-grid-12-gutter-width); 22 | 23 | > .list__item { 24 | @include AU-space(margin-top, 2px); 25 | } 26 | } 27 | 28 | } 29 | 30 | //// 31 | // Specific styles for the layout classes. 32 | //// 33 | // Two items in row. 34 | .list-layout--12 { 35 | .list > .list__item { 36 | @extend .col-sm-12; 37 | } 38 | } 39 | .list-layout--6-6 { 40 | .list > .list__item { 41 | @extend .col-sm-6; 42 | } 43 | } 44 | 45 | // Three items in row. 46 | .list-layout--4-4-4 { 47 | .list > .list__item { 48 | @extend .col-sm-4; 49 | } 50 | } 51 | 52 | // Four items in row. 53 | .list-layout--3-3-3-3 { 54 | .list > .list__item { 55 | @extend .col-sm-3; 56 | } 57 | } 58 | 59 | // Six items in row. 60 | .list-layout--2-2-2-2-2-2 { 61 | .list > .list__item { 62 | @extend .col-sm-2; 63 | } 64 | } 65 | 66 | //// 67 | // Equal columns. 68 | // Items width can be set dynamically up to 6 items in row. 69 | //// 70 | .list-layout--equal .list > .list__item { 71 | padding-left: $AU-grid-12-gutter-width/2; 72 | padding-right: $AU-grid-12-gutter-width/2; 73 | 74 | @include AU-media( sm ) { 75 | width: calc(100/3 * 1%); 76 | } 77 | 78 | @include AU-media( md ) { 79 | width: calc(100/6 * 1%); 80 | } 81 | 82 | /* one item */ 83 | &:first-child:nth-last-child(1) { 84 | width: 100%; 85 | } 86 | 87 | /* two items */ 88 | &:first-child:nth-last-child(2), 89 | &:first-child:nth-last-child(2) ~ .list__item { 90 | width: 100%; 91 | 92 | @include AU-media( sm ) { 93 | width: calc(100/2 * 1%); 94 | } 95 | } 96 | 97 | /* three items */ 98 | &:first-child:nth-last-child(3), 99 | &:first-child:nth-last-child(3) ~ .list__item { 100 | width: 100%; 101 | 102 | @include AU-media( sm ) { 103 | width: calc(100/3 * 1%); 104 | } 105 | } 106 | 107 | /* four items */ 108 | &:first-child:nth-last-child(4), 109 | &:first-child:nth-last-child(4) ~ .list__item { 110 | width: 100%; 111 | 112 | @include AU-media( sm ) { 113 | width: calc(100/2 * 1%); 114 | } 115 | 116 | @include AU-media( md ) { 117 | width: calc(100/4 * 1%); 118 | } 119 | } 120 | 121 | /* five items */ 122 | &:first-child:nth-last-child(5), 123 | &:first-child:nth-last-child(5) ~ .list__item { 124 | width: 100%; 125 | 126 | @include AU-media( sm ) { 127 | width: calc(100/3 * 1%); 128 | } 129 | 130 | @include AU-media( md ) { 131 | width: calc(100/5 * 1%); 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /assets/scss/layouts/_page-layout.scss: -------------------------------------------------------------------------------- 1 | // Non panelized pages needs space between page title and content. 2 | .au-grid > .content-top { 3 | @include AU-space(margin-bottom, $AU-grid-12-gutter-width); 4 | } 5 | 6 | // Content top region needs space between menu and breadcrumbs 7 | .region-content-top, 8 | .block-region-header { 9 | > div { 10 | @include AU-space(margin-top, $AU-grid-12-gutter-width); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/layouts/_views-layouts.scss: -------------------------------------------------------------------------------- 1 | .views--layout .view-content { 2 | @include AU-space(margin-left, -$AU-grid-12-gutter-width/2); 3 | @include AU-space(margin-right, -$AU-grid-12-gutter-width/2); 4 | 5 | @include AU-media( sm ) { 6 | display: flex; 7 | flex-wrap: wrap; 8 | justify-content: stretch; 9 | } 10 | 11 | .views-list ul { 12 | list-style: none; 13 | padding: 0; 14 | } 15 | 16 | .views-row { 17 | @include AU-space(margin-top, $AU-grid-12-gutter-width); 18 | } 19 | } 20 | 21 | //// 22 | // Specific styles for the view layout classes. 23 | //// 24 | // One item in row. 25 | .views--layout--full-width .view-content { 26 | .views-row { 27 | @extend .col-sm-12; 28 | } 29 | } 30 | 31 | // Two items in row. 32 | .views--layout--halves .view-content { 33 | .views-row { 34 | @extend .col-sm-6; 35 | } 36 | } 37 | 38 | // Three items in row. 39 | .views--layout--thirds .view-content { 40 | .views-row { 41 | @extend .col-sm-4; 42 | } 43 | } 44 | 45 | // Four items in row. 46 | .views--layout--quarters .view-content { 47 | .views-row { 48 | @extend .col-sm-3; 49 | } 50 | } 51 | 52 | // Six items in row. 53 | .views--layout--sixths .view-content { 54 | .views-row { 55 | @extend .col-sm-2; 56 | } 57 | } 58 | 59 | //// 60 | // Equal columns. 61 | // Items width can be set dynamically up to 6 items in row. 62 | //// 63 | .views--layout--equal .view-content .views-row { 64 | @include AU-space(padding-left, $AU-grid-12-gutter-width/2); 65 | @include AU-space(padding-right, $AU-grid-12-gutter-width/2); 66 | 67 | @include AU-media( sm ) { 68 | width: calc(100/3 * 1%); 69 | } 70 | 71 | @include AU-media( md ) { 72 | width: calc(100/6 * 1%); 73 | } 74 | 75 | /* one item */ 76 | &:nth-of-type(1):nth-last-of-type(1) { 77 | width: 100%; 78 | } 79 | 80 | /* two items */ 81 | &:nth-of-type(1):nth-last-of-type(2), 82 | &:nth-of-type(1):nth-last-of-type(2) ~ .views-row { 83 | width: 100%; 84 | 85 | @include AU-media( sm ) { 86 | width: calc(100/2 * 1%); 87 | } 88 | } 89 | 90 | /* three items */ 91 | &:nth-of-type(1):nth-last-of-type(3), 92 | &:nth-of-type(1):nth-last-of-type(3) ~ .views-row { 93 | width: 100%; 94 | 95 | @include AU-media( sm ) { 96 | width: calc(100/3 * 1%); 97 | } 98 | } 99 | 100 | /* four items */ 101 | &:nth-of-type(1):nth-last-of-type(4), 102 | &:nth-of-type(1):nth-last-of-type(4) ~ .views-row { 103 | width: 100%; 104 | 105 | @include AU-media( sm ) { 106 | width: calc(100/2 * 1%); 107 | } 108 | 109 | @include AU-media( md ) { 110 | width: calc(100/4 * 1%); 111 | } 112 | } 113 | 114 | /* five items */ 115 | &:nth-of-type(1):nth-last-of-type(5), 116 | &:nth-of-type(1):nth-last-of-type(5) ~ .views-row { 117 | width: 100%; 118 | 119 | @include AU-media( sm ) { 120 | width: calc(100/3 * 1%); 121 | } 122 | 123 | @include AU-media( md ) { 124 | width: calc(100/5 * 1%); 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "_govcms_uikit_starter_variables.scss"; 2 | 3 | @import "base"; 4 | 5 | @import "../uikit/sass/*.scss"; 6 | 7 | @import "uikit/**/*.scss"; 8 | 9 | @import "layouts/*.scss"; 10 | 11 | @import "components/**/*.scss"; 12 | 13 | @import "content_types/*.scss"; 14 | -------------------------------------------------------------------------------- /assets/scss/uikit/accordion/_accordion.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Accordion 2 | // 3 | // Accordion component. 4 | // 5 | // Markup: accordion.twig 6 | // 7 | // Style guide: UI-Kit.accordion 8 | // 9 | 10 | .au-body--dark .au-accordion, 11 | .color--dark .au-accordion, 12 | .color--dark-alt .au-accordion { 13 | @extend .au-accordion.au-accordion--dark !optional; 14 | } 15 | 16 | // Accordion item title on dark background cannot be extended, so direct style copy follows. 17 | .au-body--dark .au-accordion .au-accordion__title, 18 | .color--dark .au-accordion .au-accordion__title, 19 | .color--dark-alt .au-accordion .au-accordion__title { 20 | color: $AU-colordark-foreground-action; 21 | background-color: $AU-colordark-background-shade; 22 | 23 | &:hover { 24 | color: $AU-colordark-foreground-text; 25 | 26 | &:after { 27 | background-image: AU-svguri('' + 28 | ' ' + 29 | ' ' + 30 | ''); 31 | } 32 | } 33 | 34 | @include AU-focus( 'dark' ); 35 | 36 | &:after{ 37 | background-image: AU-svguri('' + 38 | ' ' + 39 | ' ' + 40 | ''); 41 | } 42 | } 43 | 44 | .accordion-group__control { 45 | & { 46 | display: none; 47 | } 48 | .js & { 49 | display: inline-block; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /assets/scss/uikit/accordion/accordion.json: -------------------------------------------------------------------------------- 1 | { 2 | "id_1": 1, 3 | "title_1": "Item title 1", 4 | "body_1": "Item content 1", 5 | "speed_1": "", 6 | "orientation_1": "open", 7 | 8 | "id_2": 2, 9 | "title_2": "Item title 2", 10 | "body_2": "Item content 2", 11 | "speed_21": ", 1000", 12 | "orientation_2": "closed", 13 | 14 | "id_3": 3, 15 | "title_3": "Item title 3", 16 | "body_3": "Item content 3", 17 | "speed_3": "", 18 | "orientation_3": "closed", 19 | 20 | "id_4": 4, 21 | "title_4": "Item title 4", 22 | "body_4": "Item content 4", 23 | "speed_4": ", 1000", 24 | "orientation_4": "open" 25 | } 26 | 27 | 28 | -------------------------------------------------------------------------------- /assets/scss/uikit/accordion/accordion.twig: -------------------------------------------------------------------------------- 1 |

Single accordion open fast by default

2 | {% 3 | include '@govcms8_uikit/accordion/accordion.twig' with { 4 | id: id_1, 5 | title: title_1, 6 | body: body_1, 7 | orientation: orientation_1, 8 | speed: speed_1 9 | } only 10 | %} 11 | 12 |

Accordion group

13 | 14 | 15 | 16 | 17 | 18 |
19 | {% 20 | include '@govcms8_uikit/accordion/accordion.twig' with { 21 | id: id_2, 22 | title: title_2, 23 | body: body_2, 24 | orientation: orientation_2, 25 | speed: speed_2 26 | } only 27 | %} 28 | {% 29 | include '@govcms8_uikit/accordion/accordion.twig' with { 30 | id: id_3, 31 | title: title_3, 32 | body: body_3, 33 | orientation: orientation_3, 34 | speed: speed_3 35 | } only 36 | %} 37 | {% 38 | include '@govcms8_uikit/accordion/accordion.twig' with { 39 | id: id_4, 40 | title: title_4, 41 | body: body_4, 42 | orientation: orientation_4, 43 | speed: speed_4 44 | } only 45 | %} 46 |
47 | -------------------------------------------------------------------------------- /assets/scss/uikit/breadcrumb/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Breadcrumbs 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // Markup: breadcrumb.twig 6 | // 7 | // Style guide: UI-Kit.breadcrumb 8 | // 9 | 10 | .au-body--dark .au-breadcrumbs { 11 | @extend .au-breadcrumbs.au-breadcrumbs--dark !optional; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/uikit/breadcrumb/breadcrumb.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "url": "foo", 5 | "text": "First" 6 | }, 7 | { 8 | "url": "bar", 9 | "text": "Second" 10 | }, 11 | { 12 | "url": "baz", 13 | "text": "Third" 14 | }, 15 | { 16 | "url": "foo", 17 | "text": "Fourth" 18 | }, 19 | { 20 | "text": "Last" 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /assets/scss/uikit/breadcrumb/breadcrumb.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/breadcrumb/breadcrumb.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/button/_button.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Button 2 | // 3 | // Form buttons. 4 | // 5 | // .au-btn--secondary - Button --secondary. 6 | // .au-btn--tertiary - Button --tertiary. 7 | // .au-btn--block - Button --block. 8 | // 9 | // Markup: button.twig 10 | // 11 | // Style guide: UI-Kit.button 12 | // 13 | 14 | .au-body--dark .au-btn, 15 | .color--dark .au-btn, 16 | .color--dark-alt .au-btn { 17 | @extend .au-btn--dark !optional; 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/uikit/button/button.twig: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

5 |

6 | 7 | 8 |

9 |

10 | Link as button 11 |

12 | -------------------------------------------------------------------------------- /assets/scss/uikit/cta-link/_cta-link.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit CTA Link 2 | // 3 | // Click to action link. 4 | // 5 | // Markup: cta_link.twig 6 | // 7 | // Style guide: UI-Kit.cta-link 8 | // 9 | 10 | .au-body--dark .au-cta-link { 11 | @extend .au-cta-link--dark !optional; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/uikit/cta-link/cta_link.json: -------------------------------------------------------------------------------- 1 | { 2 | "url": "foo", 3 | "text": "Read more" 4 | } 5 | -------------------------------------------------------------------------------- /assets/scss/uikit/cta-link/cta_link.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/cta-link/cta_link.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/header/_header.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Header 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // .au-header--hero - Hero header with bigger paddings. 6 | // 7 | // Markup: header.twig 8 | // 9 | // Style guide: UI-Kit.header 10 | // 11 | 12 | .au-body--dark .au-header { 13 | @extend .au-header--dark !optional; 14 | } 15 | .au-body--alt .au-header { 16 | @extend .au-header--alt !optional; 17 | } 18 | .au-body--dark.au-body--alt .au-header { 19 | @extend .au-header--dark !optional; 20 | } 21 | -------------------------------------------------------------------------------- /assets/scss/uikit/header/header.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": "GovCMS is awesome" 3 | } 4 | -------------------------------------------------------------------------------- /assets/scss/uikit/header/header.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/header/header.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/inpage-nav/_inpage_nav.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Inpage-Nav 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // Markup: inpage_nav.twig 6 | // 7 | // Style guide: UI-Kit.inpage-nav 8 | // 9 | 10 | .au-body--dark .au-inpage-nav-links { 11 | @extend .au-inpage-nav-links--dark !optional; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/uikit/inpage-nav/inpage_nav.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "url": "foo", 5 | "text": "First" 6 | }, 7 | { 8 | "url": "bar", 9 | "text": "Second" 10 | }, 11 | { 12 | "url": "baz", 13 | "text": "Third" 14 | }, 15 | { 16 | "url": "foo", 17 | "text": "Fourth" 18 | }, 19 | { 20 | "url": "#", 21 | "text": "Fifth" 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /assets/scss/uikit/inpage-nav/inpage_nav.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/inpage-nav/inpage_nav.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/keyword-list/_keyword_list.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Keyword List 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // Markup: keyword_list.twig 6 | // 7 | // Style guide: UI-Kit.keyword-list 8 | // 9 | 10 | .au-body--dark .au-keyword-list { 11 | @extend .au-keyword-list--dark !optional; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/uikit/keyword-list/keyword_list.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "url": "foo", 5 | "text": "Agriculture and Water Resources", 6 | "small": "Department of" 7 | }, 8 | { 9 | "url": "foo", 10 | "text": "Communications and the Arts", 11 | "small": "Department of" 12 | }, 13 | { 14 | "url": "foo", 15 | "text": "Communications", 16 | "small": "Department of" 17 | }, 18 | { 19 | "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi qui praesentium fuga", 20 | "small": "Department of" 21 | }, 22 | { 23 | "text": "Agriculture and Water Resources", 24 | "small": "Department of" 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /assets/scss/uikit/keyword-list/keyword_list.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/keyword-list/keyword_list.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/link-list/_link_list.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Link List 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // Markup: link_list.twig 6 | // 7 | // .au-link-list--inline - Link items inline. 8 | // 9 | // Style guide: UI-Kit.link-list 10 | // 11 | -------------------------------------------------------------------------------- /assets/scss/uikit/link-list/link_list.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "url": "foo", 5 | "text": "About" 6 | }, 7 | { 8 | "url": "foo", 9 | "text": "Login" 10 | }, 11 | { 12 | "url": "foo", 13 | "text": "Register" 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /assets/scss/uikit/link-list/link_list.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/link-list/link_list.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/page-alerts/_page_alerts.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Page alerts 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // .au-page-alerts--info - Page alert info. 6 | // .au-page-alerts--warning - Page alert warning. 7 | // .au-page-alerts--error - Page alert error. 8 | // .au-page-alerts--success - Page alert success. 9 | // 10 | // Markup: page_alerts.twig 11 | // 12 | // Style guide: UI-Kit.page-alerts 13 | // 14 | 15 | .au-page-alerts { 16 | @include AU-space(margin, 1rem auto); 17 | 18 | @include AU-media( sm ) { 19 | width: $AU-media-sm - $AU-grid-12-gutter-width * 2; 20 | } 21 | @include AU-media( md ) { 22 | width: $AU-media-md - $AU-grid-12-gutter-width * 2; 23 | } 24 | @include AU-media( lg ) { 25 | width: $AU-media-lg - $AU-grid-12-gutter-width * 2; 26 | } 27 | } 28 | 29 | .au-body--dark .au-page-alerts { 30 | @extend .au-page-alerts--dark !optional; 31 | } 32 | .au-body--alt .au-page-alerts { 33 | @extend .au-page-alerts--alt !optional; 34 | } 35 | .au-body--dark.au-body--alt .au-page-alerts { 36 | @extend .au-page-alerts--dark.au-page-alerts--alt !optional; 37 | } 38 | -------------------------------------------------------------------------------- /assets/scss/uikit/page-alerts/page_alerts.json: -------------------------------------------------------------------------------- 1 | { 2 | "heading": "Status message", 3 | "messages": [ 4 | "We will never contact you in person over the phone to make a payment.", 5 | "Please enter a valid email address." 6 | ] 7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/scss/uikit/page-alerts/page_alerts.twig: -------------------------------------------------------------------------------- 1 | {% extends '@govcms8_uikit/page-alerts/page_alerts.twig' %} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/progress-indicator/_progress_indicator.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Progress indicator 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // 5 | // Markup: progress_indicator.twig 6 | // 7 | // Style guide: UI-Kit.progress-indicator 8 | // 9 | 10 | .au-body--dark .au-progress-indicator { 11 | @extend .au-progress-indicator--dark !optional; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/uikit/progress-indicator/progress_indicator.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "url": "foo", 5 | "text": "Introduction", 6 | "status": "done" 7 | }, 8 | { 9 | "url": "foo", 10 | "text": "Business Contacts", 11 | "status": "todo" 12 | }, 13 | { 14 | "url": "foo", 15 | "text": "Case Studies", 16 | "status": "doing" 17 | }, 18 | { 19 | "url": "foo", 20 | "text": "Personal Info", 21 | "status": "done" 22 | }, 23 | { 24 | "url": "foo", 25 | "text": "Very long title that will likely break because it is a very long line as I just mentioned", 26 | "status": "doing" 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /assets/scss/uikit/progress-indicator/progress_indicator.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit/progress-indicator/progress_indicator.twig'%} 2 | -------------------------------------------------------------------------------- /assets/scss/uikit/tags/_tags.scss: -------------------------------------------------------------------------------- 1 | // UI-Kit Tags 2 | // 3 | // Tags to apply a taxonomy and link to similar content. 4 | // For single tag use the @govcms8_uikit/tags/tag.twig. 5 | // 6 | // Markup: tags.twig 7 | // 8 | // Style guide: UI-Kit.tags 9 | // 10 | 11 | .au-body--dark .au-tag { 12 | @extend .au-tag.au-tag--dark !optional; 13 | } 14 | 15 | .au-tags { 16 | a { 17 | word-break: break-all; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/scss/uikit/tags/tags.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | {"content": "foo"}, 4 | {"content": "bar"}, 5 | {"content": "baz"}, 6 | {"content": "bloop"}, 7 | {"content": "blip"}, 8 | {"content": "wallop"}, 9 | {"content": "doodle"}, 10 | {"content": "pear ice cream"}, 11 | {"content": "baz"} 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /assets/scss/uikit/tags/tags.twig: -------------------------------------------------------------------------------- 1 | {% extends '@govcms8_uikit/tags/tags.twig' %} 2 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "govcms/govcms8_uikit_starter", 3 | "description": "Provides uikit starter theme to govCMS8", 4 | "type": "drupal-theme", 5 | "license": "GPL-2.0+", 6 | "require": { 7 | }, 8 | "require-dev": { 9 | "dealerdirect/phpcodesniffer-composer-installer": "^0.5", 10 | "drupal/coder": "^8.2.12" 11 | }, 12 | "repositories": { 13 | "drupal": { 14 | "type": "composer", 15 | "url": "https://packages.drupal.org/8" 16 | } 17 | }, 18 | "minimum-stability": "dev", 19 | "prefer-stable": true, 20 | "config": { 21 | "platform": { 22 | "php": "7.1" 23 | }, 24 | "process-timeout": 0, 25 | "sort-packages": true 26 | }, 27 | "scripts": { 28 | "lint": "phpcs --colors --ignore=vendor,node_modules,css,js,.tugboat --standard=Drupal,DrupalPractice ." 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /config-local.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "govcms8_uikit_starter", 3 | "description": "GovCMS 8 UI Kit Starter local config file", 4 | "browserSyncProxy" : "http://loc-g8bt.morpht.net", 5 | "browserSyncPort" : 3000 6 | } 7 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "govcms8_uikit_starter", 3 | "description": "GovCMS 8 UI Kit Starter theme based on UI Kit.", 4 | "css": { 5 | "file" : "style.scss", 6 | "src": [ 7 | "./assets/scss/**/*.scss" 8 | ], 9 | "dest": "css" 10 | }, 11 | "js": { 12 | "file" : "govcms8_uikit_starter.js", 13 | "src": [ 14 | "./assets/js/**/*.js" 15 | ], 16 | "dest": "js" 17 | }, 18 | "uikit_js": { 19 | "src": [ 20 | "./assets/uikit/js/*.js" 21 | ], 22 | "dest": "js" 23 | }, 24 | "images": { 25 | "src": [ 26 | "./assets/images/**/*" 27 | ], 28 | "dest": "images" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_breadcrumbs.yml: -------------------------------------------------------------------------------- 1 | uuid: fcf82466-70ea-46b9-bac8-976d6aa32476 2 | langcode: en 3 | status: true 4 | dependencies: 5 | module: 6 | - system 7 | theme: 8 | - govcms8_uikit_starter 9 | _core: 10 | default_config_hash: zvf5j5naiAUccbWEtfTkk6T8_d1eY3BDsGGpt9Py374 11 | id: govcms8_uikit_starter_breadcrumbs 12 | theme: govcms8_uikit_starter 13 | region: content_top 14 | weight: -4 15 | provider: null 16 | plugin: system_breadcrumb_block 17 | settings: 18 | id: system_breadcrumb_block 19 | label: Breadcrumbs 20 | provider: system 21 | label_display: '0' 22 | visibility: { } 23 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_footer.yml: -------------------------------------------------------------------------------- 1 | uuid: 19dfe05e-a2a6-4d2d-8116-914f90e5b1a1 2 | langcode: en 3 | status: true 4 | dependencies: 5 | config: 6 | - system.menu.footer 7 | module: 8 | - system 9 | theme: 10 | - govcms8_uikit_starter 11 | _core: 12 | default_config_hash: ysxTHDgI78L7LIRl4ad8Wd1A5ZbMKMJZtcBG2xFobwo 13 | id: govcms8_uikit_starter_footer 14 | theme: govcms8_uikit_starter 15 | region: postscript_1 16 | weight: -3 17 | provider: null 18 | plugin: 'system_menu_block:footer' 19 | settings: 20 | id: 'system_menu_block:footer' 21 | label: Footer 22 | provider: system 23 | label_display: '0' 24 | level: 1 25 | depth: 1 26 | visibility: { } 27 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_help.yml: -------------------------------------------------------------------------------- 1 | uuid: 3534d953-e2a0-4e39-a95e-479b92c5b838 2 | langcode: en 3 | status: true 4 | dependencies: 5 | module: 6 | - help 7 | theme: 8 | - govcms8_uikit_starter 9 | _core: 10 | default_config_hash: 43XxXSGorcyHA660nQmYQ7-vcj_N5QcQ44jV4A9AHd4 11 | id: govcms8_uikit_starter_help 12 | theme: govcms8_uikit_starter 13 | region: help 14 | weight: -4 15 | provider: null 16 | plugin: help_block 17 | settings: 18 | id: help_block 19 | label: Help 20 | provider: help 21 | label_display: '0' 22 | visibility: { } 23 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_mainnavigation.yml: -------------------------------------------------------------------------------- 1 | uuid: b8bb56f2-1db1-48b8-85e4-b56fc0369160 2 | langcode: en 3 | status: true 4 | dependencies: 5 | config: 6 | - system.menu.main 7 | module: 8 | - system 9 | theme: 10 | - govcms8_uikit_starter 11 | _core: 12 | default_config_hash: gzKW3peziFFKkgU-xg6a6O51EpiNpsTamkcBEo-_tg8 13 | id: govcms8_uikit_starter_mainnavigation 14 | theme: govcms8_uikit_starter 15 | region: navigation 16 | weight: -3 17 | provider: null 18 | plugin: 'system_menu_block:main' 19 | settings: 20 | id: 'system_menu_block:main' 21 | label: 'Main navigation' 22 | provider: system 23 | label_display: '0' 24 | level: 1 25 | depth: 1 26 | visibility: { } 27 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_mainpagecontent.yml: -------------------------------------------------------------------------------- 1 | uuid: 88252faa-f3b3-4f03-b0e5-5aed3be8f6d0 2 | langcode: en 3 | status: true 4 | dependencies: 5 | module: 6 | - system 7 | theme: 8 | - govcms8_uikit_starter 9 | _core: 10 | default_config_hash: SN5O4USMIjJN3W2ACICn7niq8JUUgNoMRGwhwmjMfkw 11 | id: govcms8_uikit_starter_mainpagecontent 12 | theme: govcms8_uikit_starter 13 | region: content 14 | weight: -3 15 | provider: null 16 | plugin: system_main_block 17 | settings: 18 | id: system_main_block 19 | label: 'Main page content' 20 | provider: system 21 | label_display: '0' 22 | visibility: { } 23 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_pagetitle.yml: -------------------------------------------------------------------------------- 1 | uuid: 61603ee1-7abf-4b4a-a298-7d5d582084ae 2 | langcode: en 3 | status: true 4 | dependencies: 5 | theme: 6 | - govcms8_uikit_starter 7 | _core: 8 | default_config_hash: CsnnUgDUkyggikn46P0sW2qfGHH4zX-cTcKtaLVXDEk 9 | id: govcms8_uikit_starter_pagetitle 10 | theme: govcms8_uikit_starter 11 | region: content_top 12 | weight: -3 13 | provider: null 14 | plugin: page_title_block 15 | settings: 16 | id: page_title_block 17 | label: 'Page title' 18 | provider: core 19 | label_display: '0' 20 | visibility: { } 21 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_sitebranding.yml: -------------------------------------------------------------------------------- 1 | uuid: fbd1704e-4643-4ece-ad69-d397bc4c5f72 2 | langcode: en 3 | status: true 4 | dependencies: 5 | module: 6 | - system 7 | theme: 8 | - govcms8_uikit_starter 9 | _core: 10 | default_config_hash: aVyppJvEbReVQwb_QSKI-pGev94RbAWphTE8ZH9THEI 11 | id: govcms8_uikit_starter_sitebranding 12 | theme: govcms8_uikit_starter 13 | region: logo 14 | weight: -3 15 | provider: null 16 | plugin: system_branding_block 17 | settings: 18 | id: system_branding_block 19 | label: 'Site branding' 20 | provider: system 21 | label_display: '0' 22 | use_site_logo: true 23 | use_site_name: false 24 | use_site_slogan: false 25 | visibility: { } 26 | -------------------------------------------------------------------------------- /config/install/block.block.govcms8_uikit_starter_tabs.yml: -------------------------------------------------------------------------------- 1 | uuid: 988a7886-a553-4a28-b1b7-0cd3bce4e8e4 2 | langcode: en 3 | status: true 4 | dependencies: 5 | theme: 6 | - govcms8_uikit_starter 7 | _core: 8 | default_config_hash: E2_aqYijN4g4aeimnkmXyGsVy-3GSNc2G8ZeHwwifEU 9 | id: govcms8_uikit_starter_tabs 10 | theme: govcms8_uikit_starter 11 | region: admin 12 | weight: -4 13 | provider: null 14 | plugin: local_tasks_block 15 | settings: 16 | id: local_tasks_block 17 | label: Tabs 18 | provider: core 19 | label_display: '0' 20 | primary: true 21 | secondary: true 22 | visibility: { } 23 | -------------------------------------------------------------------------------- /config/install/govcms8_uikit_starter.settings.yml: -------------------------------------------------------------------------------- 1 | header_style: '' 2 | footer_style: theme__footer--dark-alt 3 | local_task_style: theme__local-task--alt 4 | logo_width: '250' 5 | -------------------------------------------------------------------------------- /config/optional/block.block.exposedformcontent_searchpage_1.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - views.view.content_search 6 | module: 7 | - system 8 | - views 9 | theme: 10 | - govcms8_uikit_starter 11 | id: exposedformcontent_searchpage_1 12 | theme: govcms8_uikit_starter 13 | region: search 14 | weight: 0 15 | provider: null 16 | plugin: 'views_exposed_filter_block:content_search-page_1' 17 | settings: 18 | id: 'views_exposed_filter_block:content_search-page_1' 19 | label: '' 20 | provider: views 21 | label_display: '0' 22 | views_label: '' 23 | visibility: 24 | request_path: 25 | id: request_path 26 | pages: "/search\r\n/search/*" 27 | negate: true 28 | context_mapping: { } 29 | -------------------------------------------------------------------------------- /config/optional/block.block.exposedformcontent_searchpage_1_2.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - views.view.content_search 6 | module: 7 | - system 8 | - views 9 | theme: 10 | - govcms8_uikit_starter 11 | id: exposedformcontent_searchpage_1_2 12 | theme: govcms8_uikit_starter 13 | region: content 14 | weight: -4 15 | provider: null 16 | plugin: 'views_exposed_filter_block:content_search-page_1' 17 | settings: 18 | id: 'views_exposed_filter_block:content_search-page_1' 19 | label: '' 20 | provider: views 21 | label_display: '0' 22 | views_label: '' 23 | visibility: 24 | request_path: 25 | id: request_path 26 | pages: "/search\r\n/search/*" 27 | negate: false 28 | context_mapping: { } 29 | -------------------------------------------------------------------------------- /css/highlighted_layouts.css: -------------------------------------------------------------------------------- 1 | .highlighted-layouts .header-section .header::before,.highlighted-layouts .page-layout__content-section .page-layout__content-top::before,.highlighted-layouts .page-layout__content-section .page-layout__content::before,.highlighted-layouts .page-layout__content-section .page-layout__sidebar::before,.highlighted-layouts .page-layout__content-section .page-layout__content-bottom::before,.highlighted-layouts .page-layout__content-footer-section .page-layout__content-footer::before{background:#444444;color:#FFFFFF;font-size:1rem;padding:2px 4px;position:absolute;right:0;top:0}.highlighted-layouts .header-section .header{-webkit-box-shadow:inset 0 0 0 3px #930000;box-shadow:inset 0 0 0 3px #930000;position:relative}.highlighted-layouts .header-section .header::before{content:"header"}.highlighted-layouts .page-layout__content-section .page-layout__content-top{-webkit-box-shadow:inset 0 0 0 3px #BEBEBE;box-shadow:inset 0 0 0 3px #BEBEBE;position:relative}.highlighted-layouts .page-layout__content-section .page-layout__content-top::before{content:"content top"}.highlighted-layouts .page-layout__content-section .page-layout__content{-webkit-box-shadow:inset 0 0 0 3px #930000;box-shadow:inset 0 0 0 3px #930000;position:relative}.highlighted-layouts .page-layout__content-section .page-layout__content::before{content:"content"}.highlighted-layouts .page-layout__content-section .page-layout__sidebar{-webkit-box-shadow:inset 0 0 0 3px #648395;box-shadow:inset 0 0 0 3px #648395;position:relative}.highlighted-layouts .page-layout__content-section .page-layout__sidebar::before{content:"sidebar"}.highlighted-layouts .page-layout__content-section .page-layout__content-bottom{-webkit-box-shadow:inset 0 0 0 3px #BEBEBE;box-shadow:inset 0 0 0 3px #BEBEBE;position:relative}.highlighted-layouts .page-layout__content-section .page-layout__content-bottom::before{content:"content bottom"}.highlighted-layouts .page-layout__content-footer-section .page-layout__content-footer{-webkit-box-shadow:inset 0 0 0 3px #930000;box-shadow:inset 0 0 0 3px #930000;position:relative}.highlighted-layouts .page-layout__content-footer-section .page-layout__content-footer::before{content:"footer"} 2 | -------------------------------------------------------------------------------- /css/highlighted_layouts.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["highlighted_layouts.scss"],"names":[],"mappings":"AAGA;EACE,oBAAmB;EACnB,eAAc;EACd,gBAAe;EACf,iBAAgB;EAChB,mBAAkB;EAClB,SAAQ;EACR,OAAM,EACP;;AAED;EAGM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EAVL;IAQQ,kBAAiB,EAClB;;AATP;EAeM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EAtBL;IAoBQ,uBAAsB,EACvB;;AArBP;EAyBM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EAhCL;IA8BQ,mBAAkB,EACnB;;AA/BP;EAmCM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EA1CL;IAwCQ,mBAAkB,EACnB;;AAzCP;EA6CM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EApDL;IAkDQ,0BAAyB,EAC1B;;AAnDP;EAyDM,4CAAmC;UAAnC,oCAAmC;EACnC,mBAAkB,EAMnB;EAhEL;IA8DQ,kBAAiB,EAClB","file":"highlighted_layouts.css","sourcesContent":["////\n// Highlighted layouts theme settings.\n////\n%highlighted_layout_before {\n background: #444444;\n color: #FFFFFF;\n font-size: 1rem;\n padding: 2px 4px;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.highlighted-layouts {\n .header-section {\n .header {\n box-shadow: inset 0 0 0 3px #930000;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"header\";\n }\n }\n }\n\n .page-layout__content-section {\n .page-layout__content-top {\n box-shadow: inset 0 0 0 3px #BEBEBE;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"content top\";\n }\n }\n\n .page-layout__content {\n box-shadow: inset 0 0 0 3px #930000;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"content\";\n }\n }\n\n .page-layout__sidebar {\n box-shadow: inset 0 0 0 3px #648395;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"sidebar\";\n }\n }\n\n .page-layout__content-bottom {\n box-shadow: inset 0 0 0 3px #BEBEBE;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"content bottom\";\n }\n }\n }\n\n .page-layout__content-footer-section {\n .page-layout__content-footer {\n box-shadow: inset 0 0 0 3px #930000;\n position: relative;\n\n &::before {\n @extend %highlighted_layout_before;\n content: \"footer\";\n }\n }\n }\n}\n"]} -------------------------------------------------------------------------------- /default.config-local.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "govcms8_uikit_starter", 3 | "description": "GovCMS 8 UI Kit Starter local config file.", 4 | "browserSyncProxy" : "your_local_url", 5 | "browserSyncPort" : 3000 6 | } 7 | -------------------------------------------------------------------------------- /govcms8_uikit_starter.info.yml: -------------------------------------------------------------------------------- 1 | name: 'GovCMS 8 UI-Kit Starter' 2 | description: 'Starter theme with basic implementation of GovCMS 8 UI-Kit. Cloning this theme is recommended, if you need more customization.' 3 | 4 | core: 8.x 5 | type: theme 6 | libraries: 7 | - govcms8_uikit_starter/global-styling 8 | regions: 9 | logo: 'Logo' 10 | navigation: 'Navigation' 11 | search: 'Search' 12 | help: 'Help' 13 | admin: 'Admin' 14 | content_top: 'Content top' 15 | content: 'Content' 16 | sidebar: 'Sidebar' 17 | postscript_1: 'Postscript 1' 18 | postscript_2: 'Postscript 2' 19 | postscript_3: 'Postscript 3' 20 | postscript_4: 'Postscript 4' 21 | legal: 'Legal' 22 | component-libraries: 23 | govcms8_uikit: 24 | paths: 25 | - templates/uikit 26 | -------------------------------------------------------------------------------- /govcms8_uikit_starter.libraries.yml: -------------------------------------------------------------------------------- 1 | global-styling: 2 | version: 1.x 3 | css: 4 | theme: 5 | css/style.css: {} 6 | js: 7 | js/govcms8_uikit_starter.js: {} 8 | 9 | highlighted-layouts: 10 | css: 11 | theme: 12 | css/highlighted_layouts.css: {} 13 | 14 | 15 | uikit-animate: 16 | version: 1.0.2 17 | js: 18 | js/animate.js: {} 19 | 20 | uikit-accordion: 21 | version: 3.0.0 22 | js: 23 | js/accordion.js: {} 24 | 25 | uikit-main-nav: 26 | version: 1.0.0 27 | js: 28 | js/main-nav.js: {} 29 | -------------------------------------------------------------------------------- /js/accordion.js: -------------------------------------------------------------------------------- 1 | var AU=AU||{};!function(c){var e={};function r(e,t,n){"closing"===n?e.setAttribute("aria-expanded",!1):e.setAttribute("aria-expanded",!0)}function s(e,t,n,o){if("opening"===t||"open"===t)var a=n||"au-accordion--closed",i=o||"au-accordion--open";else a=o||"au-accordion--open",i=n||"au-accordion--closed";var l,c,r,s;s=a,(r=e).classList?r.classList.remove(s):r.className=r.className.replace(new RegExp("(^|\\b)"+s.split(" ").join("|")+"(\\b|$)","gi")," "),c=i,(l=e).classList?l.classList.add(c):l.className=l.className+" "+c}e.Toggle=function(e,t,o){try{window.event.cancelBubble=!0,event.stopPropagation()}catch(e){}void 0===e.length&&(e=[e]),"object"!=typeof o&&(o={});for(var n=0;n=r[0].AUinterations)return a.callback()}else n+=o.stepSize,e.style[a.property]=n+"px",o.steps--},Math.abs(o.intervalTime))}(n,o,p,l,i)}},e.Toggle=function(t){var n=t.element,e=t.property||"height",o=t.speed||250,i=void 0===t.closeSize?0:t.closeSize,a=void 0===t.openSize?"auto":t.openSize;void 0===n.length&&(n=[n]),"function"!=typeof t.prefunction&&(t.prefunction=function(){}),"function"!=typeof t.postfunction&&(t.postfunction=function(){}),"function"!=typeof t.callback&&(t.callback=function(){}),n[0].AUtoggleInteration=0,n[0].AUtoggleInterations=n.length;for(var r=0;r")}}}(jQuery); -------------------------------------------------------------------------------- /js/main-nav.js: -------------------------------------------------------------------------------- 1 | var AU=AU||{};!function(_){var b={},g={},A=!1;function S(e,t,n,o){if("opening"===t||"open"===t)var a=n||"au-main-nav__content--closed",l=o||"au-main-nav__content--open";else a=o||"au-main-nav__content--open",l=n||"au-main-nav__content--closed";var i,c,u,s;s=a,(u=e).classList?u.classList.remove(s):u.className=u.className.replace(new RegExp("(^|\\b)"+s.split(" ").join("|")+"(\\b|$)","gi")," "),c=l,(i=e).classList?i.classList.add(c):i.className=i.className+" "+c}function w(t,e,n){function o(e){var t=n.apply(this,arguments);return!1===t&&(e.stopPropagation(),e.preventDefault()),t}function a(){var e=n.call(t,window.event);return!1===e&&(window.event.returnValue=!1,window.event.cancelBubble=!0),e}return t.addEventListener?(t.addEventListener(e,o,!1),{element:t,handler:o,event:e}):(t.attachEvent("on"+e,a),{element:t,handler:a,event:e})}function x(e){e.element.removeEventListener?e.element.removeEventListener(e.event,e.handler):e.element.detachEvent("on"+e.event,e.handler)}b.Toggle=function(a,e,l){if(!A){A=!0;try{window.event.cancelBubble=!0,event.stopPropagation()}catch(e){}"object"!=typeof l&&(l={});var t,i,n=a.getAttribute("aria-controls"),o=document.getElementById(n),c=o.querySelector(".au-main-nav__menu"),u=o.querySelector(".au-main-nav__overlay"),s=o.querySelector(".au-main-nav__toggle--close"),r=o.querySelector(".au-main-nav__toggle--open"),p=o.querySelector(".au-main-nav__focus-trap-top"),d=o.querySelector(".au-main-nav__focus-trap-bottom"),f=c.querySelectorAll("a, .au-main-nav__toggle"),v=-1===o.className.indexOf("au-main-nav__content--open"),y=c.offsetWidth,m=v?"opening":"";u.style.display="block",t=o,i=e,_.animate.Toggle({element:c,property:"left",openSize:0,closeSize:-1*y,speed:i||250,prefunction:function(){"opening"===m?(c.style.display="block",u.style.left=0,u.style.opacity=.5,"function"==typeof l.onOpen&&l.onOpen()):(u.style.opacity="0","function"==typeof l.onClose&&l.onClose())},postfunction:function(){"opening"===m?(s.focus(),r.setAttribute("aria-expanded",!0),s.setAttribute("aria-expanded",!0),p.setAttribute("tabindex",0),d.setAttribute("tabindex",0),g.focusTop=w(p,"focus",function(){f[f.length-1].focus()}),g.focusBottom=w(d,"focus",function(){f[0].focus()}),g.escKey=w(document,"keyup",function(){var e,t,n=n||window.event,o=(e=u,t="display",("undefined"!=typeof getComputedStyle?getComputedStyle(e,null):e.currentStyle)[t]);27===n.keyCode&&"block"===o&&b.Toggle(a,i,l)}),"function"==typeof l.afterOpen&&l.afterOpen()):(r.focus(),r.setAttribute("aria-expanded",!1),s.setAttribute("aria-expanded",!1),p.removeAttribute("tabindex"),d.removeAttribute("tabindex"),x(g.focusTop),x(g.focusBottom),x(g.escKey),"function"==typeof l.afterClose&&l.afterClose()),S(t,m),S(document.body,m,"au-main-nav__scroll--unlocked","au-main-nav__scroll--locked"),c.style.display="",c.style.left="",u.style.display="",u.style.left="",u.style.opacity="",A=!1}})}},_.mainNav=b}(AU),"undefined"!=typeof module&&(module.exports=AU); -------------------------------------------------------------------------------- /js/side-nav.js: -------------------------------------------------------------------------------- 1 | var AU=AU||{};"undefined"!=typeof module&&(module.exports=AU); -------------------------------------------------------------------------------- /kss-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "GovCMS 8 UI-Kit Starter Style Guide", 3 | "builder": "GovCMS-kss-template", 4 | "homepage": "kss-homepage.md", 5 | 6 | "//": "The source and destination paths are relative to this file.", 7 | "source": [ 8 | "assets/scss" 9 | ], 10 | 11 | "destination": "styleguide/", 12 | 13 | "//": "The css and js paths are URLs relative to the generated style guide.", 14 | "css": [ 15 | "../css/style.css" 16 | ], 17 | 18 | "js": [ 19 | "../js/animate.js", 20 | "../js/accordion.js" 21 | ], 22 | 23 | "namespace": [ 24 | "govcms8_uikit:templates/uikit" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "govcms8_uikit_starter", 3 | "version": "1.0.0", 4 | "description": "Starter theme for GovCMS 8 integrating UI Kit.", 5 | "main": "gulpfile.js", 6 | "author": "morpht.com", 7 | "scripts": { 8 | "setup": "npm ci", 9 | "styleguide": "kss --config kss-config.json", 10 | "gulp": "gulp", 11 | "gulp dev": "gulp dev", 12 | "js-lint": "gulp js-lint" 13 | }, 14 | "devDependencies": { 15 | "autoprefixer": "^8.5.1", 16 | "browser-sync": "^2.24.4", 17 | "del": "^3.0.0", 18 | "gulp": "^4.0.0", 19 | "gulp-concat": "^2.6.1", 20 | "gulp-imagemin": "^6.1.0", 21 | "gulp-jshint": "^2.1.0", 22 | "gulp-notify": "^3.2.0", 23 | "gulp-plumber": "^1.2.0", 24 | "gulp-postcss": "^7.0.1", 25 | "gulp-rename": "^1.2.3", 26 | "gulp-sass": "^4.0.1", 27 | "gulp-sass-glob": "^1.0.8", 28 | "gulp-sourcemaps": "^2.6.4", 29 | "gulp-uglify": "^3.0.0", 30 | "jshint": "^2.9.5", 31 | "kss": "^3.0.0-beta.25", 32 | "node-sass": "^4.13.0" 33 | }, 34 | "browserslist": [ 35 | "last 2 versions", 36 | "> 1%", 37 | "ie 10" 38 | ], 39 | "dependencies": { 40 | "@gov.au/accordion": "^7.0.8", 41 | "@gov.au/animate": "^1.0.13", 42 | "@gov.au/body": "^2.2.0", 43 | "@gov.au/breadcrumbs": "^3.0.5", 44 | "@gov.au/buttons": "^3.0.7", 45 | "@gov.au/callout": "^3.0.2", 46 | "@gov.au/card": "^0.3.1", 47 | "@gov.au/control-input": "^3.0.1", 48 | "@gov.au/core": "^3.4.2", 49 | "@gov.au/cta-link": "^2.2.0", 50 | "@gov.au/direction-links": "^3.0.0", 51 | "@gov.au/footer": "^3.0.5", 52 | "@gov.au/form": "^0.1.4", 53 | "@gov.au/grid-12": "^2.1.0", 54 | "@gov.au/header": "^4.1.12", 55 | "@gov.au/headings": "^2.0.11", 56 | "@gov.au/inpage-nav": "^3.0.6", 57 | "@gov.au/keyword-list": "^3.0.5", 58 | "@gov.au/link-list": "^3.0.8", 59 | "@gov.au/main-nav": "^1.0.7", 60 | "@gov.au/page-alerts": "^2.1.1", 61 | "@gov.au/pancake": "^1.4.1", 62 | "@gov.au/pancake-js": "^1.2.1", 63 | "@gov.au/pancake-json": "^1.2.0", 64 | "@gov.au/pancake-react": "^1.3.0", 65 | "@gov.au/pancake-sass": "^2.3.7", 66 | "@gov.au/progress-indicator": "^3.1.7", 67 | "@gov.au/responsive-media": "^2.0.14", 68 | "@gov.au/select": "^2.0.11", 69 | "@gov.au/side-nav": "^5.0.7", 70 | "@gov.au/skip-link": "^2.0.16", 71 | "@gov.au/table": "^0.2.0", 72 | "@gov.au/tags": "^4.0.0", 73 | "@gov.au/text-inputs": "^2.1.1" 74 | }, 75 | "pancake": { 76 | "auto-save": true, 77 | "plugins": true, 78 | "ignore": [], 79 | "json": { 80 | "enable": false, 81 | "location": "assets/uikit", 82 | "name": "uikit", 83 | "content": { 84 | "name": true, 85 | "version": true, 86 | "dependencies": true, 87 | "path": true, 88 | "settings": true 89 | } 90 | }, 91 | "css": { 92 | "minified": true, 93 | "modules": false, 94 | "browsers": [ 95 | "last 2 versions", 96 | "ie 10" 97 | ], 98 | "location": "assets/uikit/css/", 99 | "name": "uikit.min.css" 100 | }, 101 | "sass": { 102 | "modules": false, 103 | "location": "assets/uikit/sass/", 104 | "name": "uikit.scss" 105 | }, 106 | "js": { 107 | "minified": true, 108 | "modules": true, 109 | "location": "assets/uikit/js/", 110 | "name": "uikit.min.js" 111 | }, 112 | "react": { 113 | "location": "assets/uikit/react/" 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/screenshot.png -------------------------------------------------------------------------------- /styleguide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GovCMS 8 UI-Kit Starter Style Guide 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

GovCMS 8 UI-Kit Starter Style Guide

21 |
22 | 41 |
42 |
43 |
44 |

GovCMS 8 UI-Kit Starter Styleguide

45 |

This styleguide is showing only the UI-Kit components with a reasonable 46 | template. It is not providing a comprehensive list of every style 47 | available in UI-Kit or the theme. Feel free to add other components as needed.

48 |

For live examples of other styling, install the defaul content and visit 49 | the **/test** page.

50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /styleguide/kss-assets/WARNING.txt: -------------------------------------------------------------------------------- 1 | WARNING: This folder is deleted and re-recreated each time the style guide is 2 | built. Do NOT put your own files in this folder. 3 | -------------------------------------------------------------------------------- /styleguide/kss-assets/github-fork--black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/styleguide/kss-assets/github-fork--black.png -------------------------------------------------------------------------------- /styleguide/kss-assets/govcms8_kss-accordion.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 3 | 'use strict'; 4 | 5 | var count = 1; 6 | 7 | // Get the .au-body class in ui-kit-accordion section. 8 | var groups = document.querySelectorAll('#kssref-ui-kit-accordion .au-body'); 9 | 10 | for (var i = 0; i < groups.length; i++) { 11 | var group = groups[i]; 12 | 13 | // Update the onclick attribute to get the right accordion-group number. 14 | var buttons = group.querySelectorAll('.au-btn'); 15 | for (var k = 0; k < buttons.length; k++) { 16 | var button = buttons[k]; 17 | 18 | var str = button.getAttribute('onclick'); 19 | var newValue = str.replace(".accordion-group", ".accordion-group-" + count); 20 | button.setAttribute('onclick', newValue); 21 | } 22 | 23 | // Update the accordion-group to get number from au-body count. 24 | var el = group.querySelector('.accordion-group'); 25 | var newValue = el.getAttribute('class') + '-' + count; 26 | el.setAttribute('class', newValue); 27 | 28 | var accordions = group.querySelectorAll('.au-accordion'); 29 | 30 | for (var j = 0; j < accordions.length; j++) { 31 | var accordion = accordions[j]; 32 | 33 | // Update href of accordion to be unique. 34 | var el = accordion.querySelector('.au-accordion__title'); 35 | var newValue = el.getAttribute('href') + '-' + count; 36 | el.setAttribute('href', newValue); 37 | 38 | // Update aria-controls of accordion to be unique. 39 | newValue = el.getAttribute('aria-controls') + '-' + count; 40 | el.setAttribute('aria-controls', newValue); 41 | 42 | // Update id of accordion body to be unique. 43 | el = accordion.querySelector('.au-accordion__body'); 44 | newValue = el.getAttribute('id') + '-' + count; 45 | el.setAttribute('id', newValue); 46 | } 47 | 48 | count++; 49 | } 50 | 51 | 52 | })(window, document); 53 | -------------------------------------------------------------------------------- /styleguide/kss-assets/govcms8_kss.css: -------------------------------------------------------------------------------- 1 | /* Custom styling for GovCMS styleguide. */ 2 | .kss-markup { 3 | clear: both; 4 | } 5 | 6 | /* Styleguide example block should not move horizontally. */ 7 | .au-body--dark.col-sm-6:not(.au-body--alt) { 8 | clear: left; 9 | } 10 | -------------------------------------------------------------------------------- /styleguide/kss-assets/kss-accordion.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 3 | 'use strict'; 4 | 5 | var count = 1; 6 | 7 | var groups = document.querySelectorAll('#kssref-ui-kit-accordion .au-body'); 8 | console.log(groups); 9 | 10 | for (var i = 0; i < groups.length; i++) { 11 | var group = groups[i]; 12 | console.log(count); 13 | console.log(group); 14 | 15 | var buttons = group.querySelectorAll('.au-btn'); 16 | for (var k = 0; k < buttons.length; k++) { 17 | var button = buttons[k]; 18 | 19 | var str = button.getAttribute('onclick'); 20 | var newValue = str.replace(".accordion-group", ".accordion-group-" + count); 21 | console.log(newValue); 22 | button.setAttribute('onclick', newValue); 23 | } 24 | 25 | var el = group.querySelector('.accordion-group'); 26 | var newValue = el.getAttribute('class') + '-' + count; 27 | console.log(newValue); 28 | el.setAttribute('class', newValue); 29 | 30 | var accordions = group.querySelectorAll('.au-accordion'); 31 | 32 | for (var j = 0; j < accordions.length; j++) { 33 | var accordion = accordions[j]; 34 | console.log(accordion); 35 | 36 | var el = accordion.querySelector('.au-accordion__title'); 37 | var newValue = el.getAttribute('href') + '-' + count; 38 | console.log(newValue); 39 | el.setAttribute('href', newValue); 40 | 41 | newValue = el.getAttribute('aria-controls') + '-' + count; 42 | console.log(newValue); 43 | el.setAttribute('aria-controls', newValue); 44 | 45 | el = accordion.querySelector('.au-accordion__body'); 46 | newValue = el.getAttribute('id') + '-' + count; 47 | console.log(newValue); 48 | el.setAttribute('id', newValue); 49 | } 50 | 51 | count++; 52 | } 53 | 54 | 55 | })(window, document); 56 | -------------------------------------------------------------------------------- /styleguide/kss-assets/kss-fullscreen.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | // Set the configuration values on object creation. 5 | // - idPrefix: The string that uniquely prefixes the ID of all elements that 6 | // can receive the fullscreen focus. 7 | // - bodyClass: The class that is set on the body element when the fullscreen 8 | // mode is toggled on. 9 | // - elementClass: the class that is set on the element that is receiving the 10 | // fullscreen focus. 11 | var KssFullScreen = function (config) { 12 | this.idPrefix = config.idPrefix || 'kss-fullscreen-'; 13 | this.bodyClass = config.bodyClass || 'kss-fullscreen-mode'; 14 | this.elementClass = config.elementClass || 'is-fullscreen'; 15 | 16 | this.init(); 17 | }; 18 | 19 | // Initialize the page to see if the fullscreen mode should be immediately 20 | // turned on. 21 | KssFullScreen.prototype.init = function () { 22 | // Check the location hash to see if it matches the idPrefix. 23 | if (window.location.hash.slice(0, this.idPrefix.length + 1) === '#' + this.idPrefix) { 24 | this.setFocus(window.location.hash.slice(1 + this.idPrefix.length)); 25 | } 26 | 27 | var self = this; 28 | // Initialize all fullscreen toggle buttons. 29 | document.querySelectorAll('a[data-kss-fullscreen]').forEach(function (button) { 30 | // Get the section reference from the data attribute. 31 | button.onclick = self.setFocus.bind(self, button.dataset.kssFullscreen); 32 | }); 33 | }; 34 | 35 | // Activation function that takes the ID of the element that will receive 36 | // fullscreen focus. 37 | KssFullScreen.prototype.setFocus = function (id) { 38 | var el; 39 | 40 | // Find the element with the given ID and start fullscreen mode. 41 | if (el = document.getElementById(id)) { 42 | el.classList.toggle('is-fullscreen'); 43 | document.body.classList.toggle('kss-fullscreen-mode'); 44 | 45 | // When enabling the focus mode, change the location hash. 46 | if (el.classList.contains('is-fullscreen')) { 47 | window.location.hash = '#' + this.idPrefix + id; 48 | // Don't follow the link location. 49 | return false; 50 | } 51 | } 52 | 53 | return true; 54 | }; 55 | 56 | // Export to DOM global space. 57 | window.KssFullScreen = KssFullScreen; 58 | 59 | })(window, document); 60 | -------------------------------------------------------------------------------- /styleguide/kss-assets/kss-guides.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssGuides = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-guides-mode'; 6 | 7 | this.init(); 8 | }; 9 | 10 | KssGuides.prototype.init = function () { 11 | var self = this; 12 | // Initialize all guides toggle buttons. 13 | document.querySelectorAll('a[data-kss-guides]').forEach(function (el) { 14 | el.onclick = self.showGuides.bind(self); 15 | }); 16 | }; 17 | 18 | // Toggle the guides mode. 19 | KssGuides.prototype.showGuides = function () { 20 | document.getElementsByTagName('body')[0].classList.toggle(this.bodyClass); 21 | }; 22 | 23 | // Export to DOM global space. 24 | window.KssGuides = KssGuides; 25 | 26 | })(window, document); 27 | -------------------------------------------------------------------------------- /styleguide/kss-assets/kss-markup.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 'use strict'; 3 | 4 | var KssMarkup = function (config) { 5 | this.bodyClass = config.bodyClass || 'kss-markup-mode'; 6 | this.detailsClass = config.detailsClass || 'kss-markup'; 7 | 8 | this.init(); 9 | }; 10 | 11 | KssMarkup.prototype.init = function () { 12 | var self = this; 13 | // Initialize all markup toggle buttons. 14 | document.querySelectorAll('a[data-kss-markup]').forEach(function (el) { 15 | el.onclick = self.showGuides.bind(self); 16 | }); 17 | }; 18 | 19 | // Activation function that takes the ID of the element that will receive 20 | // fullscreen focus. 21 | KssMarkup.prototype.showGuides = function () { 22 | var body = document.getElementsByTagName('body')[0], 23 | enabled = body.classList.contains(this.bodyClass); 24 | 25 | document.querySelectorAll('.' + this.detailsClass).forEach(function (el) { 26 | if (enabled) { 27 | el.removeAttribute('open'); 28 | } else { 29 | el.setAttribute('open', ''); 30 | } 31 | }); 32 | 33 | // Toggle the markup mode. 34 | body.classList.toggle(this.bodyClass); 35 | }; 36 | 37 | // Export to DOM global space. 38 | window.KssMarkup = KssMarkup; 39 | 40 | })(window, document); 41 | -------------------------------------------------------------------------------- /styleguide/kss-assets/kss.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var KssStateGenerator; 3 | 4 | KssStateGenerator = (function() { 5 | var pseudo_selectors; 6 | 7 | pseudo_selectors = ['hover', 'enabled', 'disabled', 'active', 'visited', 'focus', 'target', 'checked', 'empty', 'first-of-type', 'last-of-type', 'first-child', 'last-child']; 8 | 9 | function KssStateGenerator() { 10 | var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2; 11 | pseudos = new RegExp("(\\:" + (pseudo_selectors.join('|\\:')) + ")", "g"); 12 | try { 13 | _ref = document.styleSheets; 14 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 15 | stylesheet = _ref[_i]; 16 | if (stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0) { 17 | idxs = []; 18 | _ref2 = stylesheet.cssRules; 19 | for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) { 20 | rule = _ref2[idx]; 21 | if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) { 22 | replaceRule = function(matched, stuff) { 23 | return matched.replace(/\:/g, '.pseudo-class-'); 24 | }; 25 | this.insertRule(rule.cssText.replace(pseudos, replaceRule)); 26 | } 27 | pseudos.lastIndex = 0; 28 | } 29 | } 30 | } 31 | } catch (_error) {} 32 | } 33 | 34 | KssStateGenerator.prototype.insertRule = function(rule) { 35 | var headEl, styleEl; 36 | headEl = document.getElementsByTagName('head')[0]; 37 | styleEl = document.createElement('style'); 38 | styleEl.type = 'text/css'; 39 | if (styleEl.styleSheet) { 40 | styleEl.styleSheet.cssText = rule; 41 | } else { 42 | styleEl.appendChild(document.createTextNode(rule)); 43 | } 44 | return headEl.appendChild(styleEl); 45 | }; 46 | 47 | return KssStateGenerator; 48 | 49 | })(); 50 | 51 | new KssStateGenerator; 52 | 53 | }).call(this); 54 | -------------------------------------------------------------------------------- /styleguide/kss-assets/noise-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/styleguide/kss-assets/noise-low.png -------------------------------------------------------------------------------- /styleguide/kss-assets/sample-inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/styleguide/kss-assets/sample-inline.png -------------------------------------------------------------------------------- /styleguide/kss-assets/sample-inline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /styleguide/kss-assets/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/govCMS/govcms8_uikit_starter/3da817b1ddd96fa2511a75dc2fca5d9e852fed43/styleguide/kss-assets/sample.png -------------------------------------------------------------------------------- /styleguide/kss-assets/sample.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /styleguide/kss-assets/scrollspy.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o scrollTop); 116 | }; 117 | 118 | ScrollSpy.prototype.markNav = function (elems) { 119 | var navItems = this.nav, 120 | isAlreadyMarked = false; 121 | 122 | for (var i = 0, max = navItems.length; i < max; i++) { 123 | if (elems.viewStatusList[i] && !isAlreadyMarked) { 124 | isAlreadyMarked = true; 125 | navItems[i].classList.add(this.className); 126 | } else { 127 | navItems[i].classList.remove(this.className); 128 | } 129 | } 130 | }; 131 | 132 | 133 | module.exports = ScrollSpy; 134 | 135 | },{}],2:[function(require,module,exports){ 136 | (function (global){ 137 | /** 138 | * ScrollSpy 139 | * 140 | */ 141 | 142 | var ScrollSpy = require('./modules/scrollspy'); 143 | 144 | global.ScrollSpy = module.exports = ScrollSpy; 145 | 146 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 147 | },{"./modules/scrollspy":1}]},{},[2]); 148 | -------------------------------------------------------------------------------- /templates/block/block--local-tasks-block.html.twig: -------------------------------------------------------------------------------- 1 | {% extends "block.html.twig" %} 2 | {# 3 | /** 4 | * @file 5 | * Theme override for tabs. 6 | */ 7 | #} 8 | 9 | {% block content %} 10 | {% set classes = [ 11 | 'au-body', 12 | 'tabs', 13 | local_task_style ? local_task_style, 14 | ] 15 | %} 16 | {% if content %} 17 | 18 |
19 | {{ content }} 20 |
21 | 22 | {% endif %} 23 | {% endblock %} 24 | -------------------------------------------------------------------------------- /templates/block/block--system-branding-block.html.twig: -------------------------------------------------------------------------------- 1 | {% extends "block.html.twig" %} 2 | {# 3 | /** 4 | * @file 5 | * Theme override for a branding block. 6 | * 7 | * Each branding element variable (logo, name, slogan) is only available if 8 | * enabled in the block configuration. 9 | * 10 | * Available variables: 11 | * - site_logo: Logo for site as defined in Appearance or theme settings. 12 | * - site_name: Name for site as defined in Site information settings. 13 | * - site_slogan: Slogan for site as defined in Site information settings. 14 | */ 15 | #} 16 | {% block content %} 17 | {% if site_logo %} 18 | 19 | 20 | 21 | {% endif %} 22 | {% if site_name %} 23 | {{ site_name }} 24 | {% endif %} 25 | {{ site_slogan }} 26 | {% endblock %} 27 | -------------------------------------------------------------------------------- /templates/block/block--system-menu-block.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a menu block. 5 | * 6 | * Available variables: 7 | * - plugin_id: The ID of the block implementation. 8 | * - label: The configured label of the block if visible. 9 | * - configuration: A list of the block's configuration values. 10 | * - label: The configured label for the block. 11 | * - label_display: The display settings for the label. 12 | * - provider: The module or other provider that provided this block plugin. 13 | * - Block plugin specific settings will also be stored here. 14 | * - content: The content of this block. 15 | * - attributes: HTML attributes for the containing element. 16 | * - id: A valid HTML ID and guaranteed unique. 17 | * - title_attributes: HTML attributes for the title element. 18 | * - content_attributes: HTML attributes for the content element. 19 | * - title_prefix: Additional output populated by modules, intended to be 20 | * displayed in front of the main title tag that appears in the template. 21 | * - title_suffix: Additional output populated by modules, intended to be 22 | * displayed after the main title tag that appears in the template. 23 | * 24 | * Headings should be used on navigation menus that consistently appear on 25 | * multiple pages. When this menu block's label is configured to not be 26 | * displayed, it is automatically made invisible using the 'visually-hidden' CSS 27 | * class, which still keeps it visible for screen-readers and assistive 28 | * technology. Headings allow screen-reader and keyboard only users to navigate 29 | * to or skip the links. 30 | * See http://juicystudio.com/article/screen-readers-display-none.php and 31 | * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. 32 | */ 33 | #} 34 | {% if attributes.id %} 35 | {% set heading_id = attributes.id ~ '-menu'|clean_id %} 36 | {% endif %} 37 | {% if not hide_title and heading_id %} 38 | 57 | -------------------------------------------------------------------------------- /templates/block/block.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a block. 5 | * 6 | * Available variables: 7 | * - plugin_id: The ID of the block implementation. 8 | * - label: The configured label of the block if visible. 9 | * - configuration: A list of the block's configuration values. 10 | * - label: The configured label for the block. 11 | * - label_display: The display settings for the label. 12 | * - provider: The module or other provider that provided this block plugin. 13 | * - Block plugin specific settings will also be stored here. 14 | * - content: The content of this block. 15 | * - attributes: array of HTML attributes populated by modules, intended to 16 | * be added to the main container tag of this template. 17 | * - id: A valid HTML ID and guaranteed unique. 18 | * - title_attributes: Same as attributes, except applied to the main title 19 | * tag that appears in the template. 20 | * - title_prefix: Additional output populated by modules, intended to be 21 | * displayed in front of the main title tag that appears in the template. 22 | * - title_suffix: Additional output populated by modules, intended to be 23 | * displayed after the main title tag that appears in the template. 24 | * 25 | * @see template_preprocess_block() 26 | */ 27 | #} 28 | {% 29 | set classes = [ 30 | 'block', 31 | 'block-' ~ configuration.provider|clean_class, 32 | 'block-' ~ plugin_id|clean_class, 33 | ] 34 | %} 35 | 36 | {{ title_prefix }} 37 | {% if label %} 38 | {{ label }} 39 | {% endif %} 40 | {{ title_suffix }} 41 | {% block content %} 42 | {{ content }} 43 | {% endblock %} 44 | 45 | -------------------------------------------------------------------------------- /templates/content/page-title.html.twig: -------------------------------------------------------------------------------- 1 | {% 2 | set classes = [ 3 | 'au-header-heading', 4 | ] 5 | %} 6 | {{ title_prefix }} 7 | {% if title %} 8 | {{ title }} 9 | {% endif %} 10 | {{ title_suffix }} 11 | -------------------------------------------------------------------------------- /templates/field/categories/categories_base.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * Categories on Blog article content type. 4 | */ 5 | #} 6 | {% extends '@govcms8_uikit/tags/tags.twig' %} 7 | {% 8 | set classes = [ 9 | 'field', 10 | 'field--name-' ~ field_name|clean_class, 11 | 'field--type-' ~ field_type|clean_class, 12 | 'field--label-' ~ label_display, 13 | ] 14 | %} 15 | {% 16 | set title_classes = [ 17 | label_display == 'visually_hidden' ? 'sr-only', 18 | label_display == 'above' ? 'position-above', 19 | label_display == 'inline' ? 'position-inline', 20 | ] 21 | %} 22 | 23 | {% block tags %} 24 | 25 | {% if not label_hidden %} 26 | {{ label }} 27 | {% endif %} 28 | 29 | {{ parent() }} 30 | 31 | 32 | {% endblock %} 33 | -------------------------------------------------------------------------------- /templates/field/categories/field--field-blog-article-categories.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * Categories on Blog article content type. 4 | */ 5 | #} 6 | {% extends '@govcms8_uikit_starter/field/categories/categories_base.html.twig' %} 7 | -------------------------------------------------------------------------------- /templates/field/categories/field--field-event-categories.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * Categories on Event content type. 4 | */ 5 | #} 6 | {% extends '@govcms8_uikit_starter/field/categories/categories_base.html.twig' %} 7 | -------------------------------------------------------------------------------- /templates/field/categories/field--field-news-categories.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * Categories on News and Media content type. 4 | */ 5 | #} 6 | {% extends '@govcms8_uikit_starter/field/categories/categories_base.html.twig' %} 7 | -------------------------------------------------------------------------------- /templates/field/field--field-il-items.html.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit_starter/inc/list.twig' %} 2 | -------------------------------------------------------------------------------- /templates/field/field--field-media-release-type.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * Release type field should have the tags component styling. 4 | */ 5 | #} 6 | {% extends '@govcms8_uikit/tags/tags.twig' %} 7 | {% 8 | set classes = [ 9 | 'field', 10 | 'field--name-' ~ field_name|clean_class, 11 | 'field--type-' ~ field_type|clean_class, 12 | 'field--label-' ~ label_display, 13 | ] 14 | %} 15 | {% 16 | set title_classes = [ 17 | label_display == 'visually_hidden' ? 'sr-only', 18 | label_display == 'above' ? 'position-above', 19 | label_display == 'inline' ? 'position-inline', 20 | ] 21 | %} 22 | 23 | {% block tags %} 24 | 25 | {% if not label_hidden %} 26 | {{ label }} 27 | {% endif %} 28 | 29 | {{ parent() }} 30 | 31 | 32 | {% endblock %} 33 | -------------------------------------------------------------------------------- /templates/field/field--field-nl-nodes.html.twig: -------------------------------------------------------------------------------- 1 | {% include '@govcms8_uikit_starter/inc/list.twig' %} 2 | -------------------------------------------------------------------------------- /templates/field/field--node--title.html.twig: -------------------------------------------------------------------------------- 1 | {%- for item in items -%} 2 | {% include '@govcms8_uikit_starter/content/page-title.html.twig' with { 3 | title: item.content, 4 | title_attributes: attributes 5 | } only 6 | %} 7 | {%- endfor -%} 8 | -------------------------------------------------------------------------------- /templates/field/field--paragraph--field-heading--item.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @see template_preprocess_field() 37 | */ 38 | #} 39 | 40 | {% if label_hidden %} 41 | {% for item in items %} 42 | {{ item.content }} 43 | {% endfor %} 44 | {% else %} 45 | 46 | {{ label }} 47 | {% for item in items %} 48 | {{ item.content }} 49 | {% endfor %} 50 | 51 | {% endif %} 52 | -------------------------------------------------------------------------------- /templates/field/field--paragraph--field-heading.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @see template_preprocess_field() 37 | */ 38 | #} 39 | 40 | {% if label_hidden %} 41 | {% for item in items %} 42 | {{ item.content }} 43 | {% endfor %} 44 | {% else %} 45 | 46 | {{ label }} 47 | {% for item in items %} 48 | {{ item.content }} 49 | {% endfor %} 50 | 51 | {% endif %} 52 | -------------------------------------------------------------------------------- /templates/field/field--paragraph--field-read-more.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @see template_preprocess_field() 37 | */ 38 | #} 39 | {% 40 | set classes = [ 41 | 'field', 42 | 'field--name-' ~ field_name|clean_class, 43 | 'field--type-' ~ field_type|clean_class, 44 | 'field--label-' ~ label_display, 45 | ] 46 | %} 47 | {% 48 | set title_classes = [ 49 | 'field__label', 50 | label_display == 'visually_hidden' ? 'visually-hidden', 51 | ] 52 | %} 53 | 54 | {% if label_hidden %} 55 | {% for item in items %} 56 | 57 | {{ item.content['#title'] }} 58 | 59 | {% endfor %} 60 | {% else %} 61 | 62 | {{ label }} 63 | {% for item in items %} 64 | 65 | {{ item.content['#title'] }} 66 | 67 | {% endfor %} 68 | 69 | {% endif %} 70 | -------------------------------------------------------------------------------- /templates/field/field.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * 37 | * @see template_preprocess_field() 38 | */ 39 | #} 40 | {% 41 | set classes = [ 42 | 'field', 43 | 'field--name-' ~ field_name|clean_class, 44 | 'field--type-' ~ field_type|clean_class, 45 | 'field--label-' ~ label_display, 46 | ] 47 | %} 48 | {% 49 | set title_classes = [ 50 | 'field__label', 51 | label_display == 'visually_hidden' ? 'visually-hidden', 52 | ] 53 | %} 54 | 55 | {% if label_hidden %} 56 | {% if multiple %} 57 | 58 | {% for item in items %} 59 | {{ item.content }} 60 | {% endfor %} 61 | 62 | {% else %} 63 | {% for item in items %} 64 | {{ item.content }} 65 | {% endfor %} 66 | {% endif %} 67 | {% else %} 68 | 69 | {{ label }} 70 | {% if multiple %} 71 |
72 | {% endif %} 73 | {% for item in items %} 74 | {{ item.content }}
75 | {% endfor %} 76 | {% if multiple %} 77 | 78 | {% endif %} 79 | 80 | {% endif %} 81 | -------------------------------------------------------------------------------- /templates/form/details.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a details element. 5 | * 6 | * Available variables 7 | * - attributes: A list of HTML attributes for the details element. 8 | * - errors: (optional) Any errors for this details element, may not be set. 9 | * - title: (optional) The title of the element, may not be set. 10 | * - description: (optional) The description of the element, may not be set. 11 | * - children: (optional) The children of the element, may not be set. 12 | * - value: (optional) The value of the element, may not be set. 13 | * 14 | * @see template_preprocess_details() 15 | */ 16 | #} 17 | 18 | {% 19 | set summary_classes = [ 20 | required ? 'js-form-required', 21 | required ? 'form-required', 22 | ] 23 | %} 24 | {%- if title -%} 25 | {{ title }} 26 | {%- endif -%} 27 | 28 | {% if errors %} 29 |
30 | {{ errors }} 31 |
32 | {% endif %} 33 | 34 | {{ description }} 35 | {{ children }} 36 | {{ value }} 37 | 38 | -------------------------------------------------------------------------------- /templates/form/fieldset.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a fieldset element and its children. 5 | * 6 | * Available variables: 7 | * - attributes: HTML attributes for the fieldset element. 8 | * - errors: (optional) Any errors for this fieldset element, may not be set. 9 | * - required: Boolean indicating whether the fieldeset element is required. 10 | * - legend: The legend element containing the following properties: 11 | * - title: Title of the fieldset, intended for use as the text of the legend. 12 | * - attributes: HTML attributes to apply to the legend. 13 | * - description: The description element containing the following properties: 14 | * - content: The description content of the fieldset. 15 | * - attributes: HTML attributes to apply to the description container. 16 | * - children: The rendered child elements of the fieldset. 17 | * - prefix: The content to add before the fieldset children. 18 | * - suffix: The content to add after the fieldset children. 19 | * 20 | * @see template_preprocess_fieldset() 21 | */ 22 | #} 23 | {% 24 | set classes = [ 25 | 'js-form-item', 26 | 'form-item', 27 | 'js-form-wrapper', 28 | 'form-wrapper', 29 | 'au-fieldset', 30 | ] 31 | %} 32 | 33 | {% 34 | set legend_span_classes = [ 35 | 'fieldset-legend', 36 | required ? 'js-form-required', 37 | required ? 'form-required', 38 | 'au-hint-text', 39 | ] 40 | %} 41 | {# Always wrap fieldset legends in a SPAN for CSS positioning. #} 42 | 43 | {{ legend.title }} 44 | 45 |
46 | {% if errors %} 47 |
48 | {{ errors }} 49 |
50 | {% endif %} 51 | {% if prefix %} 52 | {{ prefix }} 53 | {% endif %} 54 | {{ children }} 55 | {% if suffix %} 56 | {{ suffix }} 57 | {% endif %} 58 | {% if description.content %} 59 | {{ description.content }}
60 | {% endif %} 61 | 62 | 63 | -------------------------------------------------------------------------------- /templates/form/form-element-label.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a form element label. 5 | * 6 | * Available variables: 7 | * - title: The label's text. 8 | * - title_display: Elements title_display setting. 9 | * - required: An indicator for whether the associated form element is required. 10 | * - attributes: A list of HTML attributes for the label. 11 | * 12 | * @see template_preprocess_form_element_label() 13 | */ 14 | #} 15 | {% 16 | set classes = [ 17 | title_display == 'after' ? 'option', 18 | title_display == 'invisible' ? 'visually-hidden', 19 | required ? 'js-form-required', 20 | required ? 'form-required', 21 | 'au-label', 22 | ] 23 | %} 24 | {% if title is not empty or required -%} 25 | {{ title }} 26 | {%- endif %} 27 | -------------------------------------------------------------------------------- /templates/form/input--checkbox.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/text-inputs/input.twig' %} 14 | {% set classes = [ 15 | 'au-control-input__input', 16 | ] 17 | %} 18 | -------------------------------------------------------------------------------- /templates/form/input--password.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/text-inputs/input.twig' %} 14 | -------------------------------------------------------------------------------- /templates/form/input--radio.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/text-inputs/input.twig' %} 14 | {% set classes = [ 15 | 'au-control-input__input', 16 | ] 17 | %} 18 | -------------------------------------------------------------------------------- /templates/form/input--submit.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/button/button.twig' %} 14 | {# Completely overrides the button.twig template until following issue is solved. 15 | # https://www.drupal.org/project/drupal/issues/1671190 16 | #} 17 | 18 | {% block button %} 19 | {{ children }} 20 | {% endblock %} 21 | -------------------------------------------------------------------------------- /templates/form/input--textfield.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/text-inputs/input.twig' %} 14 | -------------------------------------------------------------------------------- /templates/form/input.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% extends '@govcms8_uikit/text-inputs/input.twig' %} 14 | -------------------------------------------------------------------------------- /templates/form/select.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a select element. 5 | * 6 | * Available variables: 7 | * - attributes: HTML attributes for the 32 | {% endspaceless %} 33 | -------------------------------------------------------------------------------- /templates/form/textarea.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a 'textarea' #type form element. 5 | * 6 | * Available variables 7 | * - wrapper_attributes: A list of HTML attributes for the wrapper element. 8 | * - attributes: A list of HTML attributes for the 30 | {% endblock %} 31 | 32 | -------------------------------------------------------------------------------- /templates/inc/list.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * This is a GovCMS 8 feature to support lists for components such as Node List 5 | * and Item List and any other list which can have the layout applied to it, 6 | * typically by Entity Class Formatter. 7 | * 8 | * Available variables: 9 | * - attributes: HTML attributes for the containing element. 10 | * - label_hidden: Whether to show the field label or not. 11 | * - title_attributes: HTML attributes for the title. 12 | * - label: The label for the field. 13 | * - multiple: TRUE if a field can contain multiple items. 14 | * - items: List of all the field items. Each item contains: 15 | * - attributes: List of HTML attributes for each item. 16 | * - content: The field item's content. 17 | * - entity_type: The entity type to which the field belongs. 18 | * - field_name: The name of the field. 19 | * - field_type: The type of the field. 20 | * - label_display: The display settings for the label. 21 | * 22 | * 23 | */ 24 | #} 25 | {% 26 | set classes = [ 27 | 'field', 28 | 'field--name-' ~ field_name|clean_class, 29 | 'field--type-' ~ field_type|clean_class, 30 | 'field--label-' ~ label_display, 31 | ] 32 | %} 33 | {% 34 | set title_classes = [ 35 | 'field__label', 36 | label_display == 'visually_hidden' ? 'visually-hidden', 37 | ] 38 | %} 39 | 40 | {% if label_hidden %} 41 | {% if multiple %} 42 | 43 | {% for item in items %} 44 | {{ item.content }} 45 | {% endfor %} 46 | 47 | {% else %} 48 | {% for item in items %} 49 | {{ item.content }} 50 | {% endfor %} 51 | {% endif %} 52 | {% else %} 53 | 54 | {{ label }} 55 | {% if multiple %} 56 |
    57 | {% endif %} 58 | {% for item in items %} 59 | {{ item.content }} 60 | {% endfor %} 61 | {% if multiple %} 62 |
63 | {% endif %} 64 | 65 | {% endif %} 66 | -------------------------------------------------------------------------------- /templates/inc/page_footer.html.twig: -------------------------------------------------------------------------------- 1 | {% if page.postscript_1|render|striptags|trim or page.postscript_2|render|striptags|trim or page.postscript_3|render|striptags|trim or page.postscript_4|render|striptags|trim or page.legal|render|striptags|trim %} 2 | 3 | {# Prepare footer attributes. #} 4 | {% set footer_attributes = create_attribute() %} 5 | 6 | {# Add footer classes. #} 7 | {% 8 | set footer_classes = [ 9 | 'au-footer', 10 | 'au-body', 11 | footer_style ? footer_style, 12 | ] 13 | %} 14 | 15 | {# Create a count variable used for dynamic postscript columns sizing. #} 16 | {% set count = 0 %} 17 | 18 | {% if page.postscript_1 is defined and page.postscript_1 | render | striptags | trim %} 19 | {% set count = count + 1 %} 20 | {% endif %} 21 | {% if page.postscript_2 is defined and page.postscript_2 | render | striptags | trim %} 22 | {% set count = count + 1 %} 23 | {% endif %} 24 | {% if page.postscript_3 is defined and page.postscript_3 | render | striptags | trim %} 25 | {% set count = count + 1 %} 26 | {% endif %} 27 | {% if page.postscript_4 is defined and page.postscript_4 | render | striptags | trim %} 28 | {% set count = count + 1 %} 29 | {% endif %} 30 | 31 | 32 |
33 | 34 | {% if count > 0 %} 35 | {% set postscript_column_md_class = 12 / count %} 36 | {% set postscript_column_sm_class = 6 %} 37 | 38 | {% if count == 1 %} 39 | {% set postscript_column_sm_class = 12 %} 40 | {% endif %} 41 | 42 |
43 | 44 | {% if page.postscript_1 is defined and page.postscript_1 | render | striptags | trim %} 45 |
46 | {{ page.postscript_1 }} 47 |
48 | {% endif %}{# /.postscript-1 #} 49 | 50 | {% if page.postscript_2 is defined and page.postscript_2 | render | striptags | trim %} 51 |
52 | {{ page.postscript_2 }} 53 |
54 | {% endif %}{# /.postscript-3 #} 55 | 56 | {% if page.postscript_3 is defined and page.postscript_3 | render | striptags | trim %} 57 |
58 | {{ page.postscript_3 }} 59 |
60 | {% endif %}{# /.postscript-3 #} 61 | 62 | {% if page.postscript_4 is defined and page.postscript_4 | render | striptags | trim %} 63 |
64 | {{ page.postscript_4 }} 65 |
66 | {% endif %}{# /.postscript-4 #} 67 | 68 |
{# /.postscript #} 69 | {% endif %} 70 | 71 | {% if page.legal|render|striptags|trim %} 72 |
73 |
74 | {{ page.legal }} 75 |
76 |
77 | {% endif %}{# /.legal #} 78 | 79 |
80 | {# /.footer #} 81 | {% endif %} 82 | -------------------------------------------------------------------------------- /templates/inc/page_header.html.twig: -------------------------------------------------------------------------------- 1 | {# Prepare header attributes. #} 2 | {% set header_attributes = create_attribute() %} 3 | 4 | {# Add header classes. #} 5 | {% 6 | set header_classes = [ 7 | 'au-header', 8 | 'au-body', 9 | header_style ? header_style, 10 | ] 11 | %} 12 | 13 | 41 | -------------------------------------------------------------------------------- /templates/layout/html.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation for the basic structure of a single Drupal page. 5 | * 6 | * Variables: 7 | * - logged_in: A flag indicating if user is logged in. 8 | * - root_path: The root path of the current page (e.g., node, admin, user). 9 | * - node_type: The content type for the current node, if the page is a node. 10 | * - head_title: List of text elements that make up the head_title variable. 11 | * May contain one or more of the following: 12 | * - title: The title of the page. 13 | * - name: The name of the site. 14 | * - slogan: The slogan of the site. 15 | * - page_top: Initial rendered markup. This should be printed before 'page'. 16 | * - page: The rendered page markup. 17 | * - page_bottom: Closing rendered markup. This variable should be printed after 18 | * 'page'. 19 | * - db_offline: A flag indicating if the database is offline. 20 | * - placeholder_token: The token for generating head, css, js and js-bottom 21 | * placeholders. 22 | * 23 | * @see template_preprocess_html() 24 | * 25 | * @ingroup themeable 26 | */ 27 | #} 28 | 29 | 30 | 31 | 32 | {{ head_title|safe_join(' | ') }} 33 | 34 | 35 | 36 | 37 | 46 | {{ page_top }} 47 | {{ page }} 48 | {{ page_bottom }} 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /templates/layout/page.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a single page. 5 | * 6 | * The doctype, html, head and body tags are not in this template. Instead they 7 | * can be found in the html.html.twig template in this directory. 8 | * 9 | * Available variables: 10 | * 11 | * General utility variables: 12 | * - base_path: The base URL path of the Drupal installation. Will usually be 13 | * "/" unless you have installed Drupal in a sub-directory. 14 | * - is_front: A flag indicating if the current page is the front page. 15 | * - logged_in: A flag indicating if the user is registered and signed in. 16 | * - is_admin: A flag indicating if the user has permission to access 17 | * administration pages. 18 | * 19 | * Site identity: 20 | * - front_page: The URL of the front page. Use this instead of base_path when 21 | * linking to the front page. This includes the language domain or prefix. 22 | * 23 | * Page content (in order of occurrence in the default page.html.twig): 24 | * - node: Fully loaded node, if there is an automatically-loaded node 25 | * associated with the page and the node ID is the second argument in the 26 | * page's path (e.g. node/12345 and node/12345/revisions, but not 27 | * comment/reply/12345). 28 | * 29 | * Regions: 30 | * - page.header: Items for the header region. 31 | * - page.primary_menu: Items for the primary menu region. 32 | * - page.secondary_menu: Items for the secondary menu region. 33 | * - page.highlighted: Items for the highlighted content region. 34 | * - page.help: Dynamic help text, mostly for admin pages. 35 | * - page.content: The main content of the current page. 36 | * - page.sidebar_first: Items for the first sidebar. 37 | * - page.sidebar_second: Items for the second sidebar. 38 | * - page.footer: Items for the footer region. 39 | * - page.breadcrumb: Items for the breadcrumb region. 40 | * 41 | * @see template_preprocess_page() 42 | * @see html.html.twig 43 | */ 44 | #} 45 | {% 46 | set classes = [ 47 | 'au-body', 48 | 'au-grid', 49 | 'layout-container', 50 | theme__highlighted_layouts ? theme__highlighted_layouts, 51 | is_panelized ? 'is-panelized', 52 | ] 53 | %} 54 | 55 | {% if theme__highlighted_layouts %} 56 | {{ attach_library('govcms8_uikit_starter/highlighted-layouts') }} 57 | {% endif %} 58 | 59 | 60 | {# Header element #} 61 | {% include '@govcms8_uikit_starter/inc/page_header.html.twig' %} 62 | 63 | {% if page.help %} 64 |
65 |
66 | {{ page.help }} 67 |
68 |
69 | {% endif %} 70 | 71 | {% if page.admin|render|striptags|trim %} 72 |
73 | {{ page.admin }} 74 |
75 | {% endif %} 76 | 77 | {# Page title and breadcrumbs for all pages except the panelized ones. #} 78 | {% if not is_panelized %} 79 | {% if page.content_top|render|striptags|trim is not empty %} 80 |
81 |
82 | {{ page.content_top }} 83 |
84 |
85 | {% endif %} 86 | {% endif %} 87 | 88 | {# Main content area of the page. #} 89 |
90 | {# link is in html.html.twig #} 91 | 92 | {# Template for panelized node pages. #} 93 | {% if is_panelized %} 94 |
95 | {{ page.content }} 96 |
{# /.layout-content #} 97 | 98 | {% else %} 99 | {# Default layout for all pages except the panelized ones, with optional sidebar. #} 100 | 101 |
102 | 103 | {% if page.sidebar|render|striptags|trim %} 104 |
105 |
106 | {{ page.content }} 107 |
{# /.layout-content #} 108 | 109 | 112 |
113 | 114 | {% else %} 115 |
116 | {{ page.content }} 117 |
{# /.layout-content #} 118 | 119 | {% endif %} 120 |
121 | 122 | {% endif %} 123 |
124 | 125 | {# Footer element. #} 126 | {% include '@govcms8_uikit_starter/inc/page_footer.html.twig' %} 127 | 128 | Back to top 129 | 130 | {# /.layout-container #} 131 | -------------------------------------------------------------------------------- /templates/layout/region.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a region. 5 | * 6 | * Available variables: 7 | * - content: The content for this region, typically blocks. 8 | * - attributes: HTML attributes for the region
. 9 | * - region: The name of the region variable as defined in the theme's 10 | * .info.yml file. 11 | * 12 | * @see template_preprocess_region() 13 | */ 14 | #} 15 | {% 16 | set classes = [ 17 | 'region', 18 | 'region-' ~ region|clean_class, 19 | ] 20 | %} 21 | {% if content %} 22 | 23 | {{ content }} 24 |
25 | {% endif %} 26 | -------------------------------------------------------------------------------- /templates/misc/status_messages.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation for status messages. 5 | * 6 | * Displays status, error, and warning messages, grouped by type. 7 | * 8 | * An invisible heading identifies the messages for assistive technology. 9 | * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html 10 | * for info. 11 | * 12 | * Add an ARIA label to the contentinfo area so that assistive technology 13 | * user agents will better describe this landmark. 14 | * 15 | * Available variables: 16 | * - message_list: List of messages to be displayed, grouped by type. 17 | * - status_headings: List of all status types. 18 | * - display: (optional) May have a value of 'status' or 'error' when only 19 | * displaying messages of that specific type. 20 | * - attributes: HTML attributes for the element, including: 21 | * - class: HTML classes. 22 | * 23 | * @ingroup themeable 24 | */ 25 | #} 26 | {% for type, messages in message_list %} 27 | {% if type == 'status' %} 28 | {% set type = 'success' %} 29 | {% endif %} 30 | {% include '@govcms8_uikit/page-alerts/page_alerts.twig' with { 31 | messages: messages, 32 | heading: status_headings[type], 33 | modifier_class: attributes.addClass('au-page-alerts--' ~ type).class|safe_join(' '), 34 | attributes: attributes.setAttribute('aria-label', status_headings[type]) 35 | } only 36 | %} 37 | {% endfor %} 38 | -------------------------------------------------------------------------------- /templates/navigation/breadcrumb.html.twig: -------------------------------------------------------------------------------- 1 | {% if breadcrumb %} 2 | {% 3 | include '@govcms8_uikit/breadcrumb/breadcrumb.twig' with { 4 | items: breadcrumb 5 | } only 6 | %} 7 | {% endif %} 8 | -------------------------------------------------------------------------------- /templates/navigation/menu--main--navigation.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a menu. 5 | * 6 | * Available variables: 7 | * - menu_name: The machine name of the menu. 8 | * - items: A nested list of menu items. Each menu item contains: 9 | * - attributes: HTML attributes for the menu item. 10 | * - below: The menu item child items. 11 | * - title: The menu link title. 12 | * - url: The menu link url, instance of \Drupal\Core\Url 13 | * - localized_options: Menu link localized options. 14 | * - is_expanded: TRUE if the link has visible children within the current 15 | * menu tree. 16 | * - is_collapsed: TRUE if the link has children within the current menu tree 17 | * that are not currently visible. 18 | * - in_active_trail: TRUE if the link is in the active trail. 19 | */ 20 | #} 21 | 22 | {# Attach UI-Kit libraries for the functionality. #} 23 | {{ attach_library('govcms8_uikit_starter/uikit-animate') }} 24 | {{ attach_library('govcms8_uikit_starter/uikit-main-nav') }} 25 | 26 | {# Prepare main nav attributes. #} 27 | {% set main_nav_attributes = create_attribute() %} 28 | 29 | {# Add main nav classes. #} 30 | {% 31 | set main_nav_classes = [ 32 | 'au-main-nav', 33 | main_nav_style ? main_nav_style, 34 | ] 35 | %} 36 | 37 | 38 |
39 |
40 |
41 |
42 | 48 |
49 |
50 |
51 | 57 |
    58 | {% for item in items %} 59 | {% 60 | set classes = [ 61 | item.in_active_trail ? 'active', 62 | ] 63 | %} 64 | {% set link_attributes = item.in_active_trail ? { 'aria-current': 'page' } %} 65 | 66 | {% if link_attributes %} 67 | {{ link(item.title, item.url, link_attributes) }} 68 | {% else %} 69 | {{ link(item.title, item.url) }} 70 | {% endif %} 71 | 72 | {% endfor %} 73 |
74 |
75 |
76 |
77 |
81 |
82 |
83 |
84 |
85 |
86 | 87 | -------------------------------------------------------------------------------- /templates/navigation/menu--main.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a menu. 5 | * 6 | * Available variables: 7 | * - menu_name: The machine name of the menu. 8 | * - items: A nested list of menu items. Each menu item contains: 9 | * - attributes: HTML attributes for the menu item. 10 | * - below: The menu item child items. 11 | * - title: The menu link title. 12 | * - url: The menu link url, instance of \Drupal\Core\Url 13 | * - localized_options: Menu link localized options. 14 | * - is_expanded: TRUE if the link has visible children within the current 15 | * menu tree. 16 | * - is_collapsed: TRUE if the link has children within the current menu tree 17 | * that are not currently visible. 18 | * - in_active_trail: TRUE if the link is in the active trail. 19 | */ 20 | #} 21 | 22 | {# Attach UI-Kit libraries for the functionality. #} 23 | {{ attach_library('govcms8_uikit_starter/uikit-animate') }} 24 | {{ attach_library('govcms8_uikit_starter/uikit-accordion') }} 25 | 26 | {% import _self as menus %} 27 | 28 | {# Prepare side nav attributes. #} 29 | {% set side_nav_attributes = create_attribute() %} 30 | 31 | {# Add side nav classes. #} 32 | {% 33 | set side_nav_classes = [ 34 | 'au-side-nav', 35 | 'au-accordion', 36 | side_nav_style ? side_nav_style, 37 | ] 38 | %} 39 | 40 | 58 | 59 | {% macro menu_links(items, attributes) %} 60 | {% import _self as menus %} 61 | {% if items %} 62 |
    63 | {% for item in items %} 64 | {% 65 | set classes = [ 66 | item.in_active_trail ? 'active', 67 | ] 68 | %} 69 | 70 | {% if item.is_active %} 71 | {{ item.title }} 72 | {% else %} 73 | {{ link(item.title, item.url) }} 74 | {% endif %} 75 | {% if item.below %} 76 | {{ menus.menu_links(item.below, attributes) }} 77 | {% endif %} 78 | 79 | {% endfor %} 80 |
81 | {% endif %} 82 | {% endmacro %} 83 | 84 | -------------------------------------------------------------------------------- /templates/navigation/menu-local-task.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a local task link. 5 | * 6 | * Available variables: 7 | * - attributes: HTML attributes for the wrapper element. 8 | * - is_active: Whether the task item is an active tab. 9 | * - link: A rendered link element. 10 | * 11 | * Note: This template renders the content for each task item in 12 | * menu-local-tasks.html.twig. 13 | * 14 | * @see template_preprocess_menu_local_task() 15 | */ 16 | #} 17 | {% set link = link|merge({ '#attributes': { 'class': [ 'au-btn' ] } }) %} 18 | {{ link }} 19 | -------------------------------------------------------------------------------- /templates/navigation/menu-local-tasks.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display primary and secondary local tasks. 5 | * 6 | * Available variables: 7 | * - primary: HTML list items representing primary tasks. 8 | * - secondary: HTML list items representing primary tasks. 9 | * 10 | * Each item in these variables (primary and secondary) can be individually 11 | * themed in menu-local-task.html.twig. 12 | */ 13 | #} 14 | {% if primary %} 15 | 16 |
    {{ primary }}
17 | {% endif %} 18 | {% if secondary %} 19 | 20 |
    {{ secondary }}
21 | {% endif %} 22 | -------------------------------------------------------------------------------- /templates/navigation/menu.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override to display a menu. 5 | * 6 | * Available variables: 7 | * - menu_name: The machine name of the menu. 8 | * - items: A nested list of menu items. Each menu item contains: 9 | * - attributes: HTML attributes for the menu item. 10 | * - below: The menu item child items. 11 | * - title: The menu link title. 12 | * - url: The menu link url, instance of \Drupal\Core\Url 13 | * - localized_options: Menu link localized options. 14 | * - is_expanded: TRUE if the link has visible children within the current 15 | * menu tree. 16 | * - is_collapsed: TRUE if the link has children within the current menu tree 17 | * that are not currently visible. 18 | * - in_active_trail: TRUE if the link is in the active trail. 19 | */ 20 | #} 21 | {% import _self as menus %} 22 | 23 | {# 24 | We call a macro which calls itself to render the full tree. 25 | @see http://twig.sensiolabs.org/doc/tags/macro.html 26 | #} 27 | {{ menus.menu_links(items, attributes, 0) }} 28 | 29 | {% macro menu_links(items, attributes, menu_level) %} 30 | {% import _self as menus %} 31 | {% if items %} 32 | {% if menu_level == 0 %} 33 | 34 | {% else %} 35 |
    36 | {% endif %} 37 | {% for item in items %} 38 | {% 39 | set classes = [ 40 | 'menu-item', 41 | item.is_expanded ? 'menu-item--expanded', 42 | item.is_collapsed ? 'menu-item--collapsed', 43 | item.in_active_trail ? 'menu-item--active-trail', 44 | ] 45 | %} 46 | 47 | {{ link(item.title, item.url) }} 48 | {% if item.below %} 49 | {{ menus.menu_links(item.below, attributes, menu_level + 1) }} 50 | {% endif %} 51 | 52 | {% endfor %} 53 |
54 | {% endif %} 55 | {% endmacro %} 56 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/field--paragraph--field-accordions.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @ingroup templates 37 | * 38 | * @see template_preprocess_field() 39 | */ 40 | #} 41 |
42 | {% for item in items %} 43 | {{ item.content }} 44 | {% endfor %} 45 |
46 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/field--paragraph--field-show-close-all.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @ingroup templates 37 | * 38 | * @see template_preprocess_field() 39 | */ 40 | #} 41 | 42 | {% for item in items %} 43 | {% if item.content['#markup'] %} 44 | 45 | {% set accordion_group_id = '.accordion-group-' ~ element['#object'].id() %} 46 | 47 | 48 | {% endif %} 49 | {% endfor %} 50 | 51 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/field--paragraph--field-show-open-all.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @ingroup templates 37 | * 38 | * @see template_preprocess_field() 39 | */ 40 | #} 41 | 42 | {% for item in items %} 43 | {% if item.content['#markup'] %} 44 | 45 | {% set accordion_group_id = '.accordion-group-' ~ element['#object'].id() %} 46 | 47 | 48 | {% endif %} 49 | {% endfor %} 50 | 51 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/field--paragraph--field-show-toggle-all.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a field. 5 | * 6 | * To override output, copy the "field.html.twig" from the templates directory 7 | * to your theme's directory and customize it, just like customizing other 8 | * Drupal templates such as page.html.twig or node.html.twig. 9 | * 10 | * Instead of overriding the theming for all fields, you can also just override 11 | * theming for a subset of fields using 12 | * @link themeable Theme hook suggestions. @endlink For example, 13 | * here are some theme hook suggestions that can be used for a field_foo field 14 | * on an article node type: 15 | * - field--node--field-foo--article.html.twig 16 | * - field--node--field-foo.html.twig 17 | * - field--node--article.html.twig 18 | * - field--field-foo.html.twig 19 | * - field--text-with-summary.html.twig 20 | * - field.html.twig 21 | * 22 | * Available variables: 23 | * - attributes: HTML attributes for the containing element. 24 | * - label_hidden: Whether to show the field label or not. 25 | * - title_attributes: HTML attributes for the title. 26 | * - label: The label for the field. 27 | * - multiple: TRUE if a field can contain multiple items. 28 | * - items: List of all the field items. Each item contains: 29 | * - attributes: List of HTML attributes for each item. 30 | * - content: The field item's content. 31 | * - entity_type: The entity type to which the field belongs. 32 | * - field_name: The name of the field. 33 | * - field_type: The type of the field. 34 | * - label_display: The display settings for the label. 35 | * 36 | * @ingroup templates 37 | * 38 | * @see template_preprocess_field() 39 | */ 40 | #} 41 | 42 | {% for item in items %} 43 | {% if item.content['#markup'] %} 44 | 45 | {% set accordion_group_id = '.accordion-group-' ~ element['#object'].id() %} 46 | 47 | 48 | {% endif %} 49 | {% endfor %} 50 | 51 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/paragraph--accordion-group.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation to display a paragraph. 5 | * 6 | * Available variables: 7 | * - paragraph: Full paragraph entity. 8 | * - id: The paragraph ID. 9 | * - bundle: The type of the paragraph, for example, "image" or "text". 10 | * - authorid: The user ID of the paragraph author. 11 | * - createdtime: Formatted creation date. Preprocess functions can 12 | * reformat it by calling format_date() with the desired parameters on 13 | * $variables['paragraph']->getCreatedTime(). 14 | * - content: All paragraph items. Use {{ content }} to print them all, 15 | * or print a subset such as {{ content.field_example }}. Use 16 | * {{ content|without('field_example') }} to temporarily suppress the printing 17 | * of a given child element. 18 | * - attributes: HTML attributes for the containing element. 19 | * The attributes.class element may contain one or more of the following 20 | * classes: 21 | * - paragraphs: The current template type (also known as a "theming hook"). 22 | * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an 23 | * "Image" it would result in "paragraphs--type--image". Note that the machine 24 | * name will often be in a short form of the human readable label. 25 | * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a 26 | * preview would result in: "paragraphs--view-mode--preview", and 27 | * default: "paragraphs--view-mode--default". 28 | * - view_mode: View mode; for example, "preview" or "full". 29 | * - logged_in: Flag for authenticated user status. Will be true when the 30 | * current user is a logged-in member. 31 | * - is_admin: Flag for admin user status. Will be true when the current user 32 | * is an administrator. 33 | * 34 | * @see template_preprocess_paragraph() 35 | * 36 | * @ingroup themeable 37 | */ 38 | #} 39 | 40 | {% extends '@govcms8_uikit_starter/paragraphs/paragraph.html.twig' %} 41 | 42 | {# Prepare variable for paragraph id. #} 43 | {% set accordion_group_id = 'accordion-group-' ~ paragraph.id() %} 44 | 45 | {% block paragraph %} 46 | 47 | {{ attach_library('govcms8_uikit_starter/uikit-animate') }} 48 | 49 | 50 |
51 | {% block content %} 52 | {{ content }} 53 | {% endblock %} 54 |
55 | 56 | {% endblock paragraph %} 57 | -------------------------------------------------------------------------------- /templates/paragraphs/accordion/paragraph--accordion.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation to display a paragraph. 5 | * 6 | * Available variables: 7 | * - paragraph: Full paragraph entity. 8 | * - id: The paragraph ID. 9 | * - bundle: The type of the paragraph, for example, "image" or "text". 10 | * - authorid: The user ID of the paragraph author. 11 | * - createdtime: Formatted creation date. Preprocess functions can 12 | * reformat it by calling format_date() with the desired parameters on 13 | * $variables['paragraph']->getCreatedTime(). 14 | * - content: All paragraph items. Use {{ content }} to print them all, 15 | * or print a subset such as {{ content.field_example }}. Use 16 | * {{ content|without('field_example') }} to temporarily suppress the printing 17 | * of a given child element. 18 | * - attributes: HTML attributes for the containing element. 19 | * The attributes.class element may contain one or more of the following 20 | * classes: 21 | * - paragraphs: The current template type (also known as a "theming hook"). 22 | * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an 23 | * "Image" it would result in "paragraphs--type--image". Note that the machine 24 | * name will often be in a short form of the human readable label. 25 | * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a 26 | * preview would result in: "paragraphs--view-mode--preview", and 27 | * default: "paragraphs--view-mode--default". 28 | * - view_mode: View mode; for example, "preview" or "full". 29 | * - logged_in: Flag for authenticated user status. Will be true when the 30 | * current user is a logged-in member. 31 | * - is_admin: Flag for admin user status. Will be true when the current user 32 | * is an administrator. 33 | * 34 | * @see template_preprocess_paragraph() 35 | * 36 | * @ingroup themeable 37 | */ 38 | #} 39 | {% extends '@govcms8_uikit_starter/paragraphs/paragraph.html.twig' %} 40 | 41 | {# Prepare variable for paragrpah id. #} 42 | {% set accordion_item_id = paragraph.id() %} 43 | 44 | {# Check what orientation value is used. #} 45 | {% if content.field_accordion_orientation.0['#markup'] == 'open' %} 46 | {% set orientation = 'open' %} 47 | {% endif %} 48 | 49 | {# Check what speed value is used. #} 50 | {% if content.field_accordion_speed.0['#markup'] == 'slow' %} 51 | {% set speed = ', 1000' %} 52 | {% endif %} 53 | 54 | {% block content %} 55 | {# Attach UI-Kit libraries for the functionality. #} 56 | {{ attach_library('govcms8_uikit_starter/uikit-animate') }} 57 | {{ attach_library('govcms8_uikit_starter/uikit-accordion') }} 58 | 59 | {% 60 | include '@govcms8_uikit/accordion/accordion.twig' with { 61 | id: accordion_item_id, 62 | title: content.field_heading.0, 63 | body: content.field_accordion_body.0, 64 | orientation: orientation, 65 | speed: speed 66 | } only 67 | %} 68 | 69 | {% endblock %} 70 | -------------------------------------------------------------------------------- /templates/paragraphs/paragraph--item.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation to display a paragraph. 5 | * 6 | * Available variables: 7 | * - paragraph: Full paragraph entity. 8 | * Only method names starting with "get", "has", or "is" and a few common 9 | * methods such as "id", "label", and "bundle" are available. For example: 10 | * - paragraph.getCreatedTime() will return the paragraph creation timestamp. 11 | * - paragraph.id(): The paragraph ID. 12 | * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". 13 | * - paragraph.getOwnerId(): The user ID of the paragraph author. 14 | * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties 15 | * and methods for the paragraph object. 16 | * - content: All paragraph items. Use {{ content }} to print them all, 17 | * or print a subset such as {{ content.field_example }}. Use 18 | * {{ content|without('field_example') }} to temporarily suppress the printing 19 | * of a given child element. 20 | * - attributes: HTML attributes for the containing element. 21 | * The attributes.class element may contain one or more of the following 22 | * classes: 23 | * - paragraphs: The current template type (also known as a "theming hook"). 24 | * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an 25 | * "Image" it would result in "paragraphs--type--image". Note that the machine 26 | * name will often be in a short form of the human readable label. 27 | * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a 28 | * preview would result in: "paragraphs--view-mode--preview", and 29 | * default: "paragraphs--view-mode--default". 30 | * - view_mode: View mode; for example, "preview" or "full". 31 | * - logged_in: Flag for authenticated user status. Will be true when the 32 | * current user is a logged-in member. 33 | * - is_admin: Flag for admin user status. Will be true when the current user 34 | * is an administrator. 35 | * 36 | * @see template_preprocess_paragraph() 37 | * 38 | * @ingroup themeable 39 | */ 40 | #} 41 | {% 42 | set classes = [ 43 | 'paragraph', 44 | 'paragraph--type--' ~ paragraph.bundle|clean_class, 45 | view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, 46 | ] 47 | %} 48 | {% block paragraph %} 49 | 50 |
51 | {% block content %} 52 | {{ content }} 53 | {% endblock %} 54 |
55 | 56 | {% endblock paragraph %} 57 | -------------------------------------------------------------------------------- /templates/paragraphs/paragraph.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Default theme implementation to display a paragraph. 5 | * 6 | * Available variables: 7 | * - paragraph: Full paragraph entity. 8 | * Only method names starting with "get", "has", or "is" and a few common 9 | * methods such as "id", "label", and "bundle" are available. For example: 10 | * - paragraph.getCreatedTime() will return the paragraph creation timestamp. 11 | * - paragraph.id(): The paragraph ID. 12 | * - paragraph.bundle(): The type of the paragraph, for example, "image" or "text". 13 | * - paragraph.getOwnerId(): The user ID of the paragraph author. 14 | * See Drupal\paragraphs\Entity\Paragraph for a full list of public properties 15 | * and methods for the paragraph object. 16 | * - content: All paragraph items. Use {{ content }} to print them all, 17 | * or print a subset such as {{ content.field_example }}. Use 18 | * {{ content|without('field_example') }} to temporarily suppress the printing 19 | * of a given child element. 20 | * - attributes: HTML attributes for the containing element. 21 | * The attributes.class element may contain one or more of the following 22 | * classes: 23 | * - paragraphs: The current template type (also known as a "theming hook"). 24 | * - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an 25 | * "Image" it would result in "paragraphs--type--image". Note that the machine 26 | * name will often be in a short form of the human readable label. 27 | * - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a 28 | * preview would result in: "paragraphs--view-mode--preview", and 29 | * default: "paragraphs--view-mode--default". 30 | * - view_mode: View mode; for example, "preview" or "full". 31 | * - logged_in: Flag for authenticated user status. Will be true when the 32 | * current user is a logged-in member. 33 | * - is_admin: Flag for admin user status. Will be true when the current user 34 | * is an administrator. 35 | * 36 | * @see template_preprocess_paragraph() 37 | * 38 | * @ingroup themeable 39 | */ 40 | #} 41 | {% 42 | set classes = [ 43 | 'paragraph', 44 | 'paragraph--type--' ~ paragraph.bundle|clean_class, 45 | view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class, 46 | ] 47 | %} 48 | {% block paragraph %} 49 | 50 |
51 | {% block content %} 52 | {{ content }} 53 | {% endblock %} 54 |
55 | 56 | {% endblock paragraph %} 57 | -------------------------------------------------------------------------------- /templates/uikit/accordion/accordion.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for an accordion item. 5 | * 6 | * Variables: 7 | * - accordion_item_id: [number] Serve to map Accordion title to body. 8 | * - title: [string] Heading of the accordion item. 9 | * - body: [string] Text of the item. 10 | * - speed: [string] The speed of opening the accordion. Defaults to 'fast'. 11 | * - orientation: [string] The initial state of the item. Defaults to 'open' 12 | */ 13 | #} 14 | {% block accordion %} 15 | 16 |
17 | 18 | {% if orientation == 'open' %} 19 | 21 | 22 |
23 |
{{ body }}
24 |
25 | 26 | {% else %} 27 | 28 | 30 | 31 |
32 |
{{ body }}
33 |
34 | 35 | {% endif %} 36 | 37 |
38 | 39 | {% endblock %} 40 | -------------------------------------------------------------------------------- /templates/uikit/breadcrumb/breadcrumb.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for a breadcrumb navigation. 5 | * 6 | * Variables: 7 | * - heading: [string] Accessible heading. 8 | * - breadcrumb: [array] The breadcrumb items. Each item is an object containing: 9 | * - text: [string] Text of the item. 10 | * - url: [string] URL of the item (optional). 11 | */ 12 | #} 13 | 26 | -------------------------------------------------------------------------------- /templates/uikit/button/button.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for a button. 5 | * 6 | * Variables: 7 | * - content: [string] Text on the button. 8 | */ 9 | #} 10 | {% set classes=[ 11 | 'au-btn', 12 | ] 13 | %} 14 | {% block button %} 15 | 16 | {% endblock %} 17 | -------------------------------------------------------------------------------- /templates/uikit/cta-link/cta_link.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for a click to action (CTA) link. 5 | * 6 | * Variables: 7 | * - text: [string] Text of the item. 8 | * - url: [string] URL of the item. 9 | */ 10 | #} 11 | {% set classes = [ 12 | 'au-cta-link', 13 | ] 14 | %} 15 | {% block cta_link %} 16 | {{ text }} 17 | {% endblock %} 18 | -------------------------------------------------------------------------------- /templates/uikit/header/header.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for a header area. 5 | * 6 | * Variables: 7 | * - modifier_class: [string] Ussed by KSS-node for variations. 8 | * - content: [string] Text of the heading. 9 | */ 10 | #} 11 | {% block header %} 12 |
13 |

{{ content }}

14 |
15 | {% endblock %} 16 | 17 | -------------------------------------------------------------------------------- /templates/uikit/inpage-nav/inpage_nav.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for an inpage navigation. 5 | * 6 | * Variables: 7 | * - item: [array] The inpage navigation items. Each item is an object containing: 8 | * - text: [string] Text of the item. 9 | * - url: [string] URL of the item. 10 | */ 11 | #} 12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /templates/uikit/keyword-list/keyword_list.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for keyword list. 5 | * 6 | * Variables: 7 | * - item: [array] The keyword list items. Each item is an object containing: 8 | * - text: [string] Text of the item. 9 | * - url: [string] URL of the item (optional). 10 | * - small: [string] Small writing above the main text of the item. 11 | */ 12 | #} 13 | 28 | -------------------------------------------------------------------------------- /templates/uikit/link-list/link_list.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for list of links. 5 | * 6 | * Variables: 7 | * - modifier_class: [string] Ussed by KSS-node for variations. 8 | * - item: [array] The link list items. Each item is an object containing: 9 | * - text: [string] Text of the item. 10 | * - url: [string] URL of the item. 11 | */ 12 | #} 13 | 22 | -------------------------------------------------------------------------------- /templates/uikit/page-alerts/page_alerts.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for messages. 5 | * 6 | * Variables: 7 | * - modifier_class: [string] Classes to modify the default component styling. 8 | * - heading: [string] Accessible heading. 9 | * - attributes: [string] HTML attributes for the wrapping element. 10 | * - messages: [array] The messages. Each item in the array is a string. 11 | */ 12 | #} 13 |
14 | {% block heading %} 15 | {% if heading %} 16 | 17 | {% endif %} 18 | {% endblock heading %} 19 | 20 | {% block content %} 21 | {% if messages|length > 1 %} 22 |
    23 | {% for message in messages %} 24 |
  • {{ message }}
    • 25 | {% endfor %} 26 |
27 | {% else %} 28 | {{ messages|first }} 29 | {% endif %} 30 | {% endblock content %} 31 |
32 | -------------------------------------------------------------------------------- /templates/uikit/progress-indicator/progress_indicator.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for progress indicator. 5 | * 6 | * Variables: 7 | * - item: [array] The progress indicator items. Each item is an object containing: 8 | * - text: [string] Text of the item. 9 | * - url: [string] URL of the item. 10 | * - status: [string] Status of the item. 11 | */ 12 | #} 13 | 27 | -------------------------------------------------------------------------------- /templates/uikit/tags/tag.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for single tag. 5 | * 6 | * Variables: 7 | * - content: [string] Text of the item. 8 | */ 9 | #} 10 | {% block tag %} 11 | {{ content }} 12 | {% endblock %} 13 | -------------------------------------------------------------------------------- /templates/uikit/tags/tags.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Component for list of tags. 5 | * 6 | * Variables: 7 | * - item: [array] The tags items. Each item is an object containing: 8 | * - content: [string] Text of the item. 9 | */ 10 | #} 11 | {% block tags %} 12 |
    13 | {% for item in items %} 14 |
  • 15 | {% include '@govcms8_uikit/tags/tag.twig' with { 16 | content: item.content 17 | } only %} 18 |
    • 19 | {% endfor %} 20 |
21 | {% endblock %} 22 | -------------------------------------------------------------------------------- /templates/uikit/text-inputs/input.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for an 'input' #type form element. 5 | * 6 | * Available variables: 7 | * - attributes: A list of HTML attributes for the input element. 8 | * - children: Optional additional rendered elements. 9 | * 10 | * @see template_preprocess_input() 11 | */ 12 | #} 13 | {% block input %} 14 | 15 | {% endblock %} 16 | -------------------------------------------------------------------------------- /templates/uikit/text-inputs/textarea.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a 'textarea' #type form element. 5 | * 6 | * Available variables 7 | * - wrapper_attributes: A list of HTML attributes for the wrapper element. 8 | * - attributes: A list of HTML attributes for the 18 | {% endblock %} 19 | -------------------------------------------------------------------------------- /templates/views/views-mini-pager.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a views mini-pager. 5 | * 6 | * Available variables: 7 | * - items: List of pager items. 8 | * 9 | * @see template_preprocess_views_mini_pager() 10 | */ 11 | #} 12 | {% if items.previous or items.next %} 13 | 43 | {% endif %} 44 | -------------------------------------------------------------------------------- /templates/views/views-view.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a main view template. 5 | * 6 | * Available variables: 7 | * - attributes: Remaining HTML attributes for the element. 8 | * - css_name: A css-safe version of the view name. 9 | * - css_class: The user-specified classes names, if any. 10 | * - header: The optional header. 11 | * - footer: The optional footer. 12 | * - rows: The results of the view query, if any. 13 | * - empty: The content to display if there are no rows. 14 | * - pager: The optional pager next/prev links to display. 15 | * - exposed: Exposed widget form/info to display. 16 | * - feed_icons: Optional feed icons to display. 17 | * - more: An optional link to the next page of results. 18 | * - title: Title of the view, only used when displaying in the admin preview. 19 | * - title_prefix: Additional output populated by modules, intended to be 20 | * displayed in front of the view title. 21 | * - title_suffix: Additional output populated by modules, intended to be 22 | * displayed after the view title. 23 | * - attachment_before: An optional attachment view to be displayed before the 24 | * view content. 25 | * - attachment_after: An optional attachment view to be displayed after the 26 | * view content. 27 | * - dom_id: Unique id for every view being printed to give unique class for 28 | * Javascript. 29 | * 30 | * @see template_preprocess_views_view() 31 | */ 32 | #} 33 | {% 34 | set classes = [ 35 | 'view', 36 | 'view-' ~ id|clean_class, 37 | 'view-id-' ~ id, 38 | 'view-display-id-' ~ display_id, 39 | dom_id ? 'js-view-dom-id-' ~ dom_id, 40 | ] 41 | %} 42 | 43 | {{ title_prefix }} 44 | {% if title %} 45 | {{ title }} 46 | {% endif %} 47 | {{ title_suffix }} 48 | {% if header %} 49 |
50 | {{ header }} 51 |
52 | {% endif %} 53 | {% if exposed %} 54 |
55 | {{ exposed }} 56 |
57 | {% endif %} 58 | {% if attachment_before %} 59 |
60 | {{ attachment_before }} 61 |
62 | {% endif %} 63 | 64 | {% if rows %} 65 |
66 | {{ rows }} 67 |
68 | {% elseif empty %} 69 |
70 | {{ empty }} 71 |
72 | {% endif %} 73 | 74 | {% if pager %} 75 | {{ pager }} 76 | {% endif %} 77 | {% if attachment_after %} 78 |
79 | {{ attachment_after }} 80 |
81 | {% endif %} 82 | {% if more %} 83 | {{ more }} 84 | {% endif %} 85 | {% if footer %} 86 |
87 | {{ footer }} 88 |
89 | {% endif %} 90 | {% if feed_icons %} 91 |
92 | {{ feed_icons }} 93 |
94 | {% endif %} 95 | 96 | --------------------------------------------------------------------------------