@ilo-org/twig 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion/accordion-item.twig +2 -2
- package/dist/components/accordion/accordion.behavior.js +1 -1
- package/dist/components/accordion/accordion.css +1 -1
- package/dist/components/breadcrumb/breadcrumb.behavior.js +1 -1
- package/dist/components/breadcrumb/breadcrumb.css +1 -1
- package/dist/components/breadcrumb/breadcrumb.twig +48 -36
- package/dist/components/breadcrumb/breadcrumb.wingsuit.yml +7 -8
- package/dist/components/contextmenu/contextmenu.css +1 -1
- package/dist/components/contextmenu/contextmenu.twig +9 -9
- package/dist/components/herocard/herocard.css +1 -1
- package/dist/components/logogrid/logogrid.wingsuit.yml +1 -1
- package/dist/components/promocard/promocard.css +1 -1
- package/dist/components/richtext/richtext.css +1 -1
- package/dist/components/statcard/statcard.css +1 -1
- package/dist/components/textcard/textcard.css +1 -1
- package/package.json +5 -5
- package/src/patterns/components/accordion/accordion-item.twig +2 -2
- package/src/patterns/components/accordion/accordion.js +3 -3
- package/src/patterns/components/breadcrumb/breadcrumb.js +180 -22
- package/src/patterns/components/breadcrumb/breadcrumb.twig +48 -36
- package/src/patterns/components/breadcrumb/breadcrumb.wingsuit.yml +7 -8
- package/src/patterns/components/contextmenu/contextmenu.twig +9 -9
- package/src/patterns/components/logogrid/logogrid.wingsuit.yml +1 -1
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
{% set accordion_id = id ~ uid %}
|
|
6
6
|
{% set button_id = 'button-' ~ accordion_id %}
|
|
7
7
|
{% set panel_id = 'panel-' ~ accordion_id %}
|
|
8
|
-
{% set expanded_class = defaultExpanded ? 'ilo' ~ '--accordion--
|
|
8
|
+
{% set expanded_class = defaultExpanded ? 'ilo' ~ '--accordion--panel__open' : '' %}
|
|
9
9
|
{% set scroll_class = scroll ? 'ilo' ~ '--accordion--panel__scroll' : '' %}
|
|
10
10
|
|
|
11
11
|
<li class="ilo--accordion--item" id="{{ accordion_id }}">
|
|
12
12
|
<div class="ilo--h3">
|
|
13
|
-
<button class="ilo--accordion--button ilo--accordion--
|
|
13
|
+
<button class="ilo--accordion--button ilo--accordion--button__{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="{{ panel_id }}" id="{{ button_id }}">
|
|
14
14
|
{{label}}
|
|
15
15
|
</button>
|
|
16
16
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var o=n[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}var n="aria-expanded",i="aria-hidden",o="click",a=["a","button","input","select","textarea","[tabindex]:not([tabindex='-1'])"],r=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.multipleExpanded=!1,this.init()},(r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.accordionItems=this.element.querySelectorAll(".ilo--accordion--item"),this.multipleExpanded=this.element.hasAttribute("data-multipleexpanded"),this.accordionPanels=this.element.querySelectorAll(".ilo--accordion--panel"),this.accordionButtons=this.element.querySelectorAll(".ilo--accordion--button"),this}},{key:"setupHandlers",value:function(){return this.collapseSection=this.collapseSection.bind(this),this.expandSection=this.expandSection.bind(this),this.onClick=this.onClick.bind(this),this.updateAccordionItems=this.updateAccordionItems.bind(this),this}},{key:"enable",value:function(){var e=this;return this.accordionButtons.length>0&&this.accordionButtons.forEach((function(t){t.addEventListener(o,(function(t){return e.onClick(t)}))})),this.accordionPanels.length>0&&this.accordionPanels.forEach((function(t){e.handleTabIndex(t,"REMOVE")})),this}},{key:"onClick",value:function(e){return this.updateAccordionItems(e.target),this}},{key:"updateAccordionItems",value:function(e){var t=this,n=e.closest(".ilo--accordion--item").querySelector(".ilo--accordion--panel"),i=n.classList.contains("ilo--accordion--
|
|
1
|
+
!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var o=n[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}var n="aria-expanded",i="aria-hidden",o="click",a=["a","button","input","select","textarea","[tabindex]:not([tabindex='-1'])"],r=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.multipleExpanded=!1,this.init()},(r=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.accordionItems=this.element.querySelectorAll(".ilo--accordion--item"),this.multipleExpanded=this.element.hasAttribute("data-multipleexpanded"),this.accordionPanels=this.element.querySelectorAll(".ilo--accordion--panel"),this.accordionButtons=this.element.querySelectorAll(".ilo--accordion--button"),this}},{key:"setupHandlers",value:function(){return this.collapseSection=this.collapseSection.bind(this),this.expandSection=this.expandSection.bind(this),this.onClick=this.onClick.bind(this),this.updateAccordionItems=this.updateAccordionItems.bind(this),this}},{key:"enable",value:function(){var e=this;return this.accordionButtons.length>0&&this.accordionButtons.forEach((function(t){t.addEventListener(o,(function(t){return e.onClick(t)}))})),this.accordionPanels.length>0&&this.accordionPanels.forEach((function(t){e.handleTabIndex(t,"REMOVE")})),this}},{key:"onClick",value:function(e){return this.updateAccordionItems(e.target),this}},{key:"updateAccordionItems",value:function(e){var t=this,n=e.closest(".ilo--accordion--item").querySelector(".ilo--accordion--panel"),i=n.classList.contains("ilo--accordion--panel__open");return this.multipleExpanded||this.accordionPanels.forEach((function(e){n!==e&&t.collapseSection(e)})),i?this.collapseSection(n):this.expandSection(n),e.blur(),this}},{key:"collapseSection",value:function(e){e.classList.remove("ilo--accordion--panel__open"),e.parentElement.querySelector(".ilo--accordion--button").setAttribute(n,"false"),e.setAttribute(i,"true"),this.handleTabIndex(e,"REMOVE")}},{key:"expandSection",value:function(e){e.parentElement.querySelector(".ilo--accordion--button").setAttribute(n,"true"),e.setAttribute(i,"false"),e.classList.add("ilo--accordion--panel__open"),this.handleTabIndex(e,"ADD")}},{key:"handleTabIndex",value:function(e,t){e.querySelectorAll(a.join(", ")).forEach((function(e){"ADD"!==t?e.setAttribute("tabindex","-1"):e.removeAttribute("tabindex")}))}}])&&t(e.prototype,r),c&&t(e,c),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,c}();Drupal.behaviors.accordion={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Accordion"]'),(function(e){e.dataset.jsProcessed||(new r(e),e.dataset.jsProcessed=!0)}))}}}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--accordion
|
|
1
|
+
@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:.857449089rem;padding-inline-end:2.3579849946rem;background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding-block:1.0718113612rem;padding-inline-end:2.3579849946rem}.ilo--accordion--button:focus,.ilo--accordion--button:hover{background-color:#ebf5fd;border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:1.0718113612rem 0;padding-inline-end:2.3579849946rem}}.ilo--accordion--button[aria-expanded=true]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:1.9292604502rem;padding-top:.4287245445rem}.ilo--accordion--panel__open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto;padding-right:1.7148981779rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(
|
|
1
|
+
!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var s=n.call(t,e||"default");if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,n){for(var s=0;s<n.length;s++){var i=n[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,t(i.key),i)}}var n="click",s="resize",i=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.prefix=this.element.dataset.prefix,this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable().onResize(),this}},{key:"cacheDomReferences",value:function(){return this.breadcrumbsId="".concat(this.prefix,"--breadcrumb--container"),this.contextAreaClass="".concat(this.prefix,"--breadcrumb--context"),this.contextMenuItemsClass="".concat(this.prefix,"--context-menu"),this.contextCollapseClass="".concat(this.contextAreaClass,"__collapse"),this.contextButtonClass="".concat(this.contextAreaClass,"--button"),this.contextMenuClass="".concat(this.contextAreaClass,"--menu"),this.contextMenuVisibleClass="".concat(this.contextMenuClass,"__visible"),this.breadcrumbs=this.element.querySelector("#".concat(this.breadcrumbsId)),this.contextArea=this.element.querySelector(".".concat(this.contextAreaClass)),this.contextMenu=this.element.querySelector(".".concat(this.contextMenuClass)),this.contextButton=this.element.querySelector(".".concat(this.contextButtonClass)),this.breadcrumbsLastLink=this.element.querySelector("#".concat(this.breadcrumbsId," > li:last-child a")),this.contextMenuItems=this.element.querySelector(".".concat(this.contextMenuItemsClass)),this.contextMenuItemFirstLink=this.contextMenuItems.querySelector("li:first-child a"),this.contextMenuItemLastLink=this.contextMenuItems.querySelector("li:last-child a"),this.breadcrumbsWidth=this.breadcrumbs.offsetWidth,this}},{key:"setupHandlers",value:function(){return this.onResize=this.onResize.bind(this),this.onClick=this.onClick.bind(this),this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this),this.openContextMenu=this.openContextMenu.bind(this),this.closeContextMenu=this.closeContextMenu.bind(this),this.focusBreadcrumbsLastLink=this.focusBreadcrumbsLastLink.bind(this),this.focusContextMenuItemFirstLink=this.focusContextMenuItemFirstLink.bind(this),this.onKeydown=this.onKeydown.bind(this),this}},{key:"enable",value:function(){var t=this;if(window.addEventListener(s,(function(e){return t.onResize(e)})),this.contextButton)return this.contextButton.addEventListener(n,(function(e){return t.onClick(e)})),this.element.addEventListener("keydown",(function(e){return t.onKeydown(e)})),this}},{key:"onClick",value:function(t){return t.stopPropagation(),this.contexMenuIsOpen()?this.closeContextMenu():(this.openContextMenu(),window.addEventListener("click",this.closeContextMenu,{once:!0})),this}},{key:"onResize",value:function(){return this.contextArea&&this.breadcrumbsWidth&&(this.breadcrumbsWidth>=window.innerWidth/1.5?this.contextArea.classList.add(this.contextCollapseClass):(this.contextArea.classList.remove(this.contextCollapseClass),this.closeContextMenu())),this}},{key:"onKeydown",value:function(t){if(t.shiftKey)return"tab"===t.key.toLowerCase()&&document.activeElement===this.contextMenuItemFirstLink&&(t.preventDefault(),this.contextButton.focus()),this;if("tab"===t.key.toLowerCase()&&this.contexMenuIsOpen()){if(document.activeElement===this.contextButton)return t.preventDefault(),this.focusContextMenuItemFirstLink(),this;if(document.activeElement===this.contextMenuItemLastLink)return t.preventDefault(),this.focusBreadcrumbsLastLink(),this.closeContextMenu(),this}return this}},{key:"positionContextMenu",value:function(){var t=this.contextButton.getBoundingClientRect(),e=t.left+t.width/2-this.contextMenuItems.offsetWidth/2,n=t.bottom+16;return this.contextMenu.style.left=e+"px",this.contextMenu.style.top=n+"px",this}},{key:"openContextMenu",value:function(){return this.contextMenu.classList.add(this.contextMenuVisibleClass),this.contextMenu.removeAttribute("hidden"),this.contextButton.setAttribute("aria-expanded",!0),this.positionContextMenu(),this}},{key:"closeContextMenu",value:function(){this.contextMenu.classList.remove(this.contextMenuVisibleClass),this.contextMenu.setAttribute("hidden","hidden"),this.contextButton.setAttribute("aria-expanded",!1)}},{key:"contexMenuIsOpen",value:function(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}},{key:"focusContextMenuItemFirstLink",value:function(){return this.contextMenuItemFirstLink.focus(),this}},{key:"focusBreadcrumbsLastLink",value:function(){return this.breadcrumbsLastLink.focus(),this}}])&&e(t.prototype,i),o&&e(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,i,o}();Drupal.behaviors.breadcrumb={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Breadcrumb"]'),(function(t){t.dataset.jsProcessed||(new i(t),t.dataset.jsProcessed=!0)}))}}}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--
|
|
1
|
+
@charset "UTF-8";.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--inner{display:inline-flex;padding-inline-start:var(--breadcrumb-padding);padding-inline-end:2.5723472669rem;padding-block:.857449089rem;background-color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 2.5723472669rem) 100%,0 100%)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,2.5723472669rem 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E");background-position:0;padding-inline:1.2861736334rem .857449089rem}[dir=rtl] .ilo--breadcrumb--context__collapse,[dir=rtl] .ilo--breadcrumb--item{background-position:100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{display:none;padding:0;margin:0;border:none;background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;height:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--button:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:.6430868167rem .2143622722rem}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{position:relative;background:0 0!important;padding-inline-start:2px}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;width:.857449089rem;height:.857449089rem;position:relative}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link{display:inline-flex;align-items:center;color:#230050;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{white-space:nowrap;overflow-x:clip;text-overflow:ellipsis;max-width:30ch;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-underline-offset:.2143622722rem;text-decoration-thickness:.1071811361rem}
|
|
@@ -1,43 +1,55 @@
|
|
|
1
|
-
{#
|
|
2
|
-
|
|
3
|
-
#}
|
|
1
|
+
{# breadcrumb.twig #}
|
|
2
|
+
|
|
3
|
+
{# If a home field is passed, it will be used as the first link #}
|
|
4
|
+
{# THE `HOME` FIELD WILL BE DEPRECATED IN FUTURE VERSIONS AND SHOULD NOT BE USED #}
|
|
5
|
+
{% if home %}
|
|
6
|
+
{% set firstlink = home %}
|
|
7
|
+
{% set contextLinks = links|slice(0, items|length - 1) %}
|
|
8
|
+
{% endif %}
|
|
9
|
+
|
|
10
|
+
{% if not home %}
|
|
11
|
+
{% set firstlink = links|first %}
|
|
12
|
+
{% set contextLinks = links|slice(1, items|length - 1) %}
|
|
13
|
+
{% endif %}
|
|
14
|
+
|
|
4
15
|
{% set lastlink = links|last %}
|
|
5
|
-
|
|
6
|
-
<nav class="ilo--breadcrumb{% if className %}
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</li>
|
|
13
|
-
{% if links|length >= 2 %}
|
|
14
|
-
<li class="ilo--breadcrumb--item first">
|
|
15
|
-
<a class="ilo--breadcrumb--link" href="{{firstlink.url}}">
|
|
16
|
-
<span class="ilo--breadcrumb--link--label">{{firstlink.label}}</span>
|
|
17
|
-
</a>
|
|
16
|
+
|
|
17
|
+
<nav class="ilo--breadcrumb {% if className %}{{className}}{% endif %}" data-prefix="ilo" data-loadcomponent="Breadcrumb">
|
|
18
|
+
<div class="ilo--breadcrumb--inner">
|
|
19
|
+
<ol class="ilo--breadcrumb--items" id="ilo--breadcrumb--container">
|
|
20
|
+
{# Render the first link on its own as a custom icon #}
|
|
21
|
+
<li class="ilo--breadcrumb--item ilo--breadcrumb--item__first">
|
|
22
|
+
<a aria-label="{{firstlink.label}}" class="ilo--breadcrumb--link" href="{{firstlink.url}}"></a>
|
|
18
23
|
</li>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
{% if not loop.first and not loop.last %}
|
|
24
|
+
{# Render all but the first and last items in the context area #}
|
|
25
|
+
{% if contextLinks|length > 0 %}
|
|
26
|
+
<li class="ilo--breadcrumb--context">
|
|
27
|
+
<ol class="ilo--breadcrumb--items">
|
|
28
|
+
{% for link in contextLinks %}
|
|
25
29
|
<li class="ilo--breadcrumb--item">
|
|
26
30
|
<a href="{{link.url}}" class="ilo--breadcrumb--link">
|
|
27
|
-
<span class="ilo--breadcrumb--link--label
|
|
31
|
+
<span class="ilo--breadcrumb--link--label">{{link.label}}</span>
|
|
28
32
|
</a>
|
|
29
33
|
</li>
|
|
30
|
-
{%
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
{% endfor %}
|
|
35
|
+
</ol>
|
|
36
|
+
<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" aria-controls="ilo--breadcrumb--menu" class="ilo--breadcrumb--context--button"></button>
|
|
37
|
+
</li>
|
|
38
|
+
{% endif %}
|
|
39
|
+
{# Render the last one outside the context area #}
|
|
40
|
+
{% if links|length > 1 %}
|
|
41
|
+
<li class="ilo--breadcrumb--item">
|
|
42
|
+
<a class="ilo--breadcrumb--link" href="{{lastlink.url}}">
|
|
43
|
+
<span class="ilo--breadcrumb--link--label">{{lastlink.label}}</span>
|
|
44
|
+
</a>
|
|
45
|
+
</li>
|
|
46
|
+
{% endif %}
|
|
47
|
+
</ol>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="ilo--breadcrumb--context--menu" id="ilo--breadcrumb--menu" hidden>
|
|
50
|
+
{% include '@components/contextmenu/contextmenu.twig' with {
|
|
51
|
+
links: contextLinks,
|
|
52
|
+
prefix: prefix
|
|
53
|
+
} only %}
|
|
54
|
+
</div>
|
|
43
55
|
</nav>
|
|
@@ -4,14 +4,13 @@ breadcrumb:
|
|
|
4
4
|
label: Breadcrumb
|
|
5
5
|
description: A component for displaying links in a "breadcrumb" ux
|
|
6
6
|
fields:
|
|
7
|
-
|
|
8
|
-
type:
|
|
9
|
-
label:
|
|
10
|
-
description:
|
|
11
|
-
required:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
url: "/"
|
|
7
|
+
buttonlabel:
|
|
8
|
+
type: string
|
|
9
|
+
label: buttonlabel
|
|
10
|
+
description: The `aria-label` value for the button that toggles the context menu when the Breadcrumbs are collapsed
|
|
11
|
+
required: false
|
|
12
|
+
default: "Toggle links"
|
|
13
|
+
preview: "Toggle links"
|
|
15
14
|
links:
|
|
16
15
|
type: object
|
|
17
16
|
label: Home
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--context-menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;position:relative;width:auto}.ilo--context-menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--context-menu--item{padding:0 .4287245445rem}.ilo--context-menu--item:first-of-type{border-top-left-radius:2px;border-top-right-radius:2px}.ilo--context-menu--item:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ilo--context-menu--item:last-of-type a{border-bottom:none}.ilo--context-menu--item:focus,.ilo--context-menu--item:hover{background-color:#ebf5fd}.ilo--context-menu--item.endsection{border-bottom:.1607717042rem solid #fff}.ilo--context-menu--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--context-menu--link{border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;padding:.857449089rem .4287245445rem;text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px;letter-spacing:-.1px}.ilo--context-menu--link:visited{color:#230050}.ilo--context-menu--link:active{color:#230050;outline:0}.ilo--context-menu--link:focus,.ilo--context-menu--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}
|
|
1
|
+
@charset "UTF-8";.ilo--context-menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;position:relative;width:auto;list-style:none}.ilo--context-menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--context-menu--item{padding:0 .4287245445rem}.ilo--context-menu--item:first-of-type{border-top-left-radius:2px;border-top-right-radius:2px}.ilo--context-menu--item:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ilo--context-menu--item:last-of-type a{border-bottom:none}.ilo--context-menu--item:focus,.ilo--context-menu--item:hover{background-color:#ebf5fd}.ilo--context-menu--item.endsection{border-bottom:.1607717042rem solid #fff}.ilo--context-menu--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--context-menu--link{border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;padding:.857449089rem .4287245445rem;text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px;letter-spacing:-.1px}.ilo--context-menu--link:visited{color:#230050}.ilo--context-menu--link:active{color:#230050;outline:0}.ilo--context-menu--link:focus,.ilo--context-menu--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{#
|
|
2
2
|
CONTEXT MENU COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</
|
|
4
|
+
<ol class="ilo--context-menu">
|
|
5
|
+
{% for link in links %}
|
|
6
|
+
<li class="ilo--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
|
|
7
|
+
<a href="{{link.url}}" class="ilo--context-menu--link">
|
|
8
|
+
<span class="ilo--context-menu--label">{{link.label}}</span>
|
|
9
|
+
</a>
|
|
10
|
+
</li>
|
|
11
|
+
{% endfor %}
|
|
12
|
+
</ol>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--hero-card{height:100%;position:relative;padding:40px 16px}@media screen and (min-width:1024px){.ilo--hero-card{padding-block:56px;padding-inline-end:71px;padding-inline-start:var(--card-padding-start)}}.ilo--hero-card--title-link{color:inherit;text-decoration:none}.ilo--hero-card--title-link:hover{text-decoration:underline}.ilo--hero-card__theme__light{color:#2d2d2d;background:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__light.ilo--hero-card__background__semi-transparent{background:hsla(0,0%,100%,.6)}}.ilo--hero-card__theme__dark{background:#230050;color:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__semi-transparent{background:rgba(35,0,80,.6)}}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent{color:#fff;background:0 0}.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent *,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent *{filter:drop-shadow(1px 1px 12px rgb(45,45,45))}}.ilo--hero-card__cornercut
|
|
1
|
+
@charset "UTF-8";.ilo--hero-card{height:100%;position:relative;padding:40px 16px}@media screen and (min-width:1024px){.ilo--hero-card{padding-block:56px;padding-inline-end:71px;padding-inline-start:var(--card-padding-start)}}.ilo--hero-card--title-link{color:inherit;text-decoration:none}.ilo--hero-card--title-link:hover{text-decoration:underline}.ilo--hero-card__theme__light{color:#2d2d2d;background:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__light.ilo--hero-card__background__semi-transparent{background:hsla(0,0%,100%,.6)}}.ilo--hero-card__theme__dark{background:#230050;color:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__semi-transparent{background:rgba(35,0,80,.6)}}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent{color:#fff;background:0 0}.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent *,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent *{filter:drop-shadow(1px 1px 12px rgb(45,45,45))}}.ilo--hero-card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}@media screen and (min-width:1024px){.ilo--hero-card__cornercut{clip-path:polygon(0 0,calc(100% - 116px) 0,100% 64px,100% 100%,0 100%)}[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(116px 0,100% 0,100% 100%,0 100%,0 64px)}}.ilo--hero-card--datecopy{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.5005359057rem;color:#6d6d6d}.ilo--hero-card__theme__dark .ilo--hero-card--datecopy{color:#fff}.ilo--hero-card__theme__light .ilo--hero-card--datecopy{color:#6d6d6d}.ilo--hero-card__background__semi-transparent .ilo--hero-card--datecopy,.ilo--hero-card__background__transparent .ilo--hero-card--datecopy{color:#fff}.ilo--hero-card--eyebrow{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:.857449089rem;color:#960a55}.ilo--hero-card__theme__dark .ilo--hero-card--eyebrow{color:#fff}.ilo--hero-card__theme__light .ilo--hero-card--eyebrow{color:#960a55}.ilo--hero-card__background__transparent .ilo--hero-card--eyebrow{color:#fff}.ilo--hero-card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.5005359057rem}@media screen and (min-width:1024px){.ilo--hero-card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--hero-card--title{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px;margin-bottom:1.1117935901rem;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700}@media screen and (min-width:1024px){.ilo--hero-card--title{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
logogrid:
|
|
2
|
-
namespace: Components/
|
|
2
|
+
namespace: Components/Media
|
|
3
3
|
use: "@components/logogrid/logogrid.twig"
|
|
4
4
|
label: Logo Grid
|
|
5
5
|
description: The Logo Grid component renders a series of logos representing a group of organizations. It can be shown on a light or dark background.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ilo--card--wrapper__type__promo{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__narrow{--max-width:18.3815648446rem}@media screen and (max-width:609px){.ilo--card--wrapper__type__promo__size__narrow{--max-width:100%}}.ilo--card--wrapper__type__promo__size__standard{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__wide{--max-width:49.3033226152rem}.ilo--card--wrapper__type__promo__size__fluid{--max-width:100%}.ilo--card__type__promo{padding:2.1436227224rem 1.2861736334rem;width:100%}@media screen and (min-width:610px){.ilo--card__type__promo{padding:2.5723472669rem}}@media screen and (min-width:1024px){.ilo--card__type__promo{padding:3.4297963558rem 3.8585209003rem}}.ilo--card__type__promo .ilo--card--title{margin-bottom:.6430868167rem}.ilo--card__type__promo.ilo--card__size__standard{padding:2.5723472669rem}.ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 87px) 0,100% 48px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(
|
|
1
|
+
.ilo--card--wrapper__type__promo{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__narrow{--max-width:18.3815648446rem}@media screen and (max-width:609px){.ilo--card--wrapper__type__promo__size__narrow{--max-width:100%}}.ilo--card--wrapper__type__promo__size__standard{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__wide{--max-width:49.3033226152rem}.ilo--card--wrapper__type__promo__size__fluid{--max-width:100%}.ilo--card__type__promo{padding:2.1436227224rem 1.2861736334rem;width:100%}@media screen and (min-width:610px){.ilo--card__type__promo{padding:2.5723472669rem}}@media screen and (min-width:1024px){.ilo--card__type__promo{padding:3.4297963558rem 3.8585209003rem}}.ilo--card__type__promo .ilo--card--title{margin-bottom:.6430868167rem}.ilo--card__type__promo.ilo--card__size__standard{padding:2.5723472669rem}.ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 87px) 0,100% 48px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(87px 0,100% 0,100% 100%,0 100%,0 48px)}.ilo--card__type__promo.ilo--card__size__fluid,.ilo--card__type__promo.ilo--card__size__wide{padding:3.4297963558rem 3.8585209003rem}.ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut,.ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 116px) 0,100% 64px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut,[dir=rtl] .ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut{clip-path:polygon(116px 0,100% 0,100% 100%,0 100%,0 64px)}.ilo--card__type__promo.ilo--card__size__narrow{padding:2.1436227224rem 1.2861736334rem}.ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px left,100% 100%,0 100%)}.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px;margin-bottom:.4287245445rem}@media screen and (min-width:610px){.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px}.ilo--card__type__promo.ilo--card__theme__light:not(:hover) .ilo--card--title{color:#2d2d2d;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card__type__promo .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}@media screen and (min-width:610px){.ilo--card__type__promo .ilo--card--title{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}.ilo--card__type__promo .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.7148981779rem}@media screen and (min-width:610px){.ilo--card__type__promo .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--richtext{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext a{background:transparent;color:#230050;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:.3215434084rem;text-decoration-thickness:.0803858521rem;padding-bottom:.2143622722rem}.ilo--richtext a:visited{background:transparent;color:#960a55}.ilo--richtext a:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a:active,.ilo--richtext a:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--dark{background:transparent;color:#edf0f2}.ilo--richtext a--dark:visited{background:transparent;color:#b8c4cc}.ilo--richtext a--dark:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--dark:active,.ilo--richtext a--dark:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--footer{font-size:11.94px;letter-spacing:normal;line-height:16.24px;background:transparent;color:#6d6d6d}.ilo--richtext a--footer:visited{background:transparent;color:#960a55}.ilo--richtext a--footer:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--footer:active,.ilo--richtext a--footer:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext img{width:100%}.ilo--richtext p{margin-bottom:1.2861736334rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:2.7675813769rem}.ilo--richtext article,.ilo--richtext figure,.ilo--richtext iframe{margin-bottom:3.0010718114rem}.ilo--richtext figure{width:100%}.ilo--richtext figcaption{border-left:3px solid #b8c4cc;color:#6d6d6d;font-weight:400;margin-top:.857449089rem;padding-left:.4287245445rem;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext em,.ilo--richtext i{font-style:italic}.ilo--richtext b,.ilo--richtext strong{font-weight:700}.ilo--richtext hr{background-color:#edf0f2;border:none;height:.2143622722rem;margin-bottom:3.0010718114rem}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;margin-top:3.0010718114rem}.ilo--richtext h1{margin-bottom:.6830690456rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h2{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h3{margin-bottom:.5741425509rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h4{margin-bottom:.7188906752rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext h5{margin-bottom:.8175044291rem;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--richtext blockquote{background-color:#edf0f2;background-position:100% 0;background-repeat:no-repeat;background-size:3.8585209003rem 2.1436227224rem;display:block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin:1.2861736334rem 0 2.1436227224rem;padding:4.0728831726rem 0 1.9292604502rem 1.7148981779rem;position:relative;width:fit-content;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}.ilo--richtext blockquote p{color:#960a55;font-weight:300;margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}.ilo--richtext blockquote p:after{background-repeat:no-repeat;bottom:0;content:"";display:inline-block;height:1.0718113612rem;position:absolute;right:0;transform:scaleX(-1);width:1.4201500536rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext blockquote cite{color:#6d6d6d;font-weight:400;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext blockquote:before{background-repeat:no-repeat;content:"";display:inline-block;height:2.1436227224rem;left:0;position:absolute;width:2.8403001072rem;top:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext ol{counter-reset:a}.ilo--richtext ol li{counter-increment:a;display:table}.ilo--richtext ol li:before{content:counter(a) ".";display:table-cell;text-align:right;padding-inline-end:.4287245445rem}.ilo--richtext ul li{position:relative;padding-inline-start:1.2861736334rem}.ilo--richtext ul li:before{content:"";position:absolute;height:.7502679528rem;width:.6430868167rem;top:.3215434084rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12.4'%3E%3Cpath fill='%23B8C4CC' d='M10.8 6.4L0 .4v12l10.8-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;left:0;right:0}[dir=rtl] .ilo--richtext ul li:before{transform:rotate(180deg)}@media screen and (min-width:610px){.ilo--richtext ul li:before{top:.3751339764rem}}.ilo--richtext li{font-size:16px;letter-spacing:normal;line-height:23.36px;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin-bottom:.857449089rem}.ilo--richtext li b,.ilo--richtext li strong{font-weight:700;letter-spacing:-.02em}@media screen and (min-width:610px){.ilo--richtext,.ilo--richtext li{font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{margin-top:3.4297963558rem}.ilo--richtext h1{margin-bottom:.8520418857rem;font-size:44px;letter-spacing:-.035em;line-height:50.6px}.ilo--richtext h2{margin-bottom:1.1117935901rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h3{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h4{margin-bottom:1.0028670954rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h5{margin-bottom:1.1476152197rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext p{margin-bottom:.9381095829rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:3.0817323053rem}.ilo--richtext hr{margin-bottom:4.0728831726rem}.ilo--richtext figure{width:100%;margin-bottom:3.0817323053rem}.ilo--richtext blockquote{background-size:4.6087888532rem 2.5723472669rem;margin:1.7148981779rem 0 4.0728831726rem;padding:3.4297963558rem 0 2.5723472669rem 2.5723472669rem;clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--richtext blockquote p{margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}.ilo--richtext blockquote p:after{height:1.2861736334rem;width:1.7148981779rem}.ilo--richtext blockquote:before{height:2.5723472669rem;width:3.4297963558rem}}[dir=rtl] .ilo--richtext figcaption{border-left:none;border-right:3px solid #b8c4cc;padding-left:0;padding-right:.4287245445rem}[dir=rtl] .ilo--richtext blockquote{background-position:-1px -1px;padding:3.0010718114rem 1.7148981779rem 1.9292604502rem 0;clip-path:polygon(
|
|
1
|
+
@charset "UTF-8";.ilo--richtext{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext a{background:transparent;color:#230050;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:.3215434084rem;text-decoration-thickness:.0803858521rem;padding-bottom:.2143622722rem}.ilo--richtext a:visited{background:transparent;color:#960a55}.ilo--richtext a:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a:active,.ilo--richtext a:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--dark{background:transparent;color:#edf0f2}.ilo--richtext a--dark:visited{background:transparent;color:#b8c4cc}.ilo--richtext a--dark:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--dark:active,.ilo--richtext a--dark:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--footer{font-size:11.94px;letter-spacing:normal;line-height:16.24px;background:transparent;color:#6d6d6d}.ilo--richtext a--footer:visited{background:transparent;color:#960a55}.ilo--richtext a--footer:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--footer:active,.ilo--richtext a--footer:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext img{width:100%}.ilo--richtext p{margin-bottom:1.2861736334rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:2.7675813769rem}.ilo--richtext article,.ilo--richtext figure,.ilo--richtext iframe{margin-bottom:3.0010718114rem}.ilo--richtext figure{width:100%}.ilo--richtext figcaption{border-left:3px solid #b8c4cc;color:#6d6d6d;font-weight:400;margin-top:.857449089rem;padding-left:.4287245445rem;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext em,.ilo--richtext i{font-style:italic}.ilo--richtext b,.ilo--richtext strong{font-weight:700}.ilo--richtext hr{background-color:#edf0f2;border:none;height:.2143622722rem;margin-bottom:3.0010718114rem}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;margin-top:3.0010718114rem}.ilo--richtext h1{margin-bottom:.6830690456rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h2{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h3{margin-bottom:.5741425509rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h4{margin-bottom:.7188906752rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext h5{margin-bottom:.8175044291rem;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--richtext blockquote{background-color:#edf0f2;background-position:100% 0;background-repeat:no-repeat;background-size:3.8585209003rem 2.1436227224rem;display:block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin:1.2861736334rem 0 2.1436227224rem;padding:4.0728831726rem 0 1.9292604502rem 1.7148981779rem;position:relative;width:fit-content;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}.ilo--richtext blockquote p{color:#960a55;font-weight:300;margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}.ilo--richtext blockquote p:after{background-repeat:no-repeat;bottom:0;content:"";display:inline-block;height:1.0718113612rem;position:absolute;right:0;transform:scaleX(-1);width:1.4201500536rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext blockquote cite{color:#6d6d6d;font-weight:400;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext blockquote:before{background-repeat:no-repeat;content:"";display:inline-block;height:2.1436227224rem;left:0;position:absolute;width:2.8403001072rem;top:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext ol{counter-reset:a}.ilo--richtext ol li{counter-increment:a;display:table}.ilo--richtext ol li:before{content:counter(a) ".";display:table-cell;text-align:right;padding-inline-end:.4287245445rem}.ilo--richtext ul li{position:relative;padding-inline-start:1.2861736334rem}.ilo--richtext ul li:before{content:"";position:absolute;height:.7502679528rem;width:.6430868167rem;top:.3215434084rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12.4'%3E%3Cpath fill='%23B8C4CC' d='M10.8 6.4L0 .4v12l10.8-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;left:0;right:0}[dir=rtl] .ilo--richtext ul li:before{transform:rotate(180deg)}@media screen and (min-width:610px){.ilo--richtext ul li:before{top:.3751339764rem}}.ilo--richtext li{font-size:16px;letter-spacing:normal;line-height:23.36px;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin-bottom:.857449089rem}.ilo--richtext li b,.ilo--richtext li strong{font-weight:700;letter-spacing:-.02em}@media screen and (min-width:610px){.ilo--richtext,.ilo--richtext li{font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{margin-top:3.4297963558rem}.ilo--richtext h1{margin-bottom:.8520418857rem;font-size:44px;letter-spacing:-.035em;line-height:50.6px}.ilo--richtext h2{margin-bottom:1.1117935901rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h3{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h4{margin-bottom:1.0028670954rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h5{margin-bottom:1.1476152197rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext p{margin-bottom:.9381095829rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:3.0817323053rem}.ilo--richtext hr{margin-bottom:4.0728831726rem}.ilo--richtext figure{width:100%;margin-bottom:3.0817323053rem}.ilo--richtext blockquote{background-size:4.6087888532rem 2.5723472669rem;margin:1.7148981779rem 0 4.0728831726rem;padding:3.4297963558rem 0 2.5723472669rem 2.5723472669rem;clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--richtext blockquote p{margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}.ilo--richtext blockquote p:after{height:1.2861736334rem;width:1.7148981779rem}.ilo--richtext blockquote:before{height:2.5723472669rem;width:3.4297963558rem}}[dir=rtl] .ilo--richtext figcaption{border-left:none;border-right:3px solid #b8c4cc;padding-left:0;padding-right:.4287245445rem}[dir=rtl] .ilo--richtext blockquote{background-position:-1px -1px;padding:3.0010718114rem 1.7148981779rem 1.9292604502rem 0;clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}[dir=rtl] .ilo--richtext blockquote p{padding:0 0 0 2.5723472669rem}[dir=rtl] .ilo--richtext blockquote p:after{left:0;right:auto;transform:scaleX(1)}[dir=rtl] .ilo--richtext blockquote:before{left:auto;right:0;transform:scaleX(-1)}@media screen and (min-width:610px){[dir=rtl] .ilo--richtext blockquote{padding:3.2154340836rem 2.5723472669rem 2.5723472669rem 0}[dir=rtl] .ilo--richtext blockquote blockquote{clip-path:polygon(86px 0,100% 0,100% 100%,0 100%,0 48px)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.ilo--card__type__stat{--max-width:18.3815648446rem;border-bottom:.1607717042rem solid #960a55;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem;position:relative;width:100%;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}@media screen and (max-width:609px){.ilo--card__type__stat{--max-width:100%}}[dir=rtl] .ilo--card__type__stat{clip-path:polygon(
|
|
1
|
+
@charset "UTF-8";.ilo--card__type__stat{--max-width:18.3815648446rem;border-bottom:.1607717042rem solid #960a55;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem;position:relative;width:100%;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}@media screen and (max-width:609px){.ilo--card__type__stat{--max-width:100%}}[dir=rtl] .ilo--card__type__stat{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}.ilo--card__type__stat.ilo--card__color__blue{background:#ebf5fd}.ilo--card__type__stat.ilo--card__color__yellow{background:#ffcd2d}.ilo--card__type__stat.ilo--card__color__green{background:#8ce164}.ilo--card__type__stat.ilo--card__color__turquoise{background:#05d2d2}.ilo--card__type__stat .ilo--card--content{display:flex;flex-flow:column;align-items:flex-start;justify-content:flex-start;height:100%}.ilo--card__type__stat .ilo--card--title{color:#230050;font-size:36.45px;letter-spacing:-.035em;line-height:43.74px;margin-bottom:.4278063594rem;width:100%}.ilo--card__type__stat .ilo--card--intro{color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:18.66px;letter-spacing:normal;line-height:27.24px;margin-bottom:1.6734954235rem;width:100%}.ilo--card__type__stat .ilo--card--source{display:flex;flex:auto;flex-flow:column;justify-content:flex-end;align-items:flex-start}.ilo--card__type__stat .ilo--link{font-size:11.94px;letter-spacing:-.02em;line-height:16.24px;line-height:1.2861736334rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ilo--card__type__text{--max-width:16.1307609861rem;border-bottom:.1607717042rem solid #b8c4cc;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem
|
|
1
|
+
.ilo--card__type__text{--max-width:16.1307609861rem;border-bottom:.1607717042rem solid #b8c4cc;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__text{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}.ilo--card__type__text [class$=profile__theme__light] *{color:#2d2d2d}.ilo--card__type__text [class$=profile__theme__dark] *{color:#fff}.ilo--card__type__text:focus,.ilo--card__type__text:focus-within,.ilo--card__type__text:hover{filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04));transition-property:border-color;transition-duration:.15s;transition-timing-function:ease-out;border-color:#1e2dbe}.ilo--card__type__text:focus-within [class*=profile__theme] *,.ilo--card__type__text:focus [class*=profile__theme] *,.ilo--card__type__text:hover [class*=profile__theme] *{color:#1e2dbe}@media screen and (max-width:609px){.ilo--card__type__text{--max-width:100%}}.ilo--card__type__text.ilo--card__size__fluid,.ilo--card__type__text.ilo--card__size__wide{--max-width:28.0278670954rem;padding:2.1436227224rem 1.7148981779rem 1.7148981779rem}.ilo--card__type__text.ilo--card__size__narrow{--max-width:16.1307609861rem;padding:2.1436227224rem 1.2861736334rem 1.7148981779rem}@media screen and (max-width:609px){.ilo--card__type__text.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__text.ilo--card__size__narrow .ilo--card--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;margin-bottom:1.674953518rem}.ilo--card__type__text.ilo--card__dark{border-bottom:.1607717042rem solid #fa3c4b}.ilo--card__type__text .ilo--card--eyebrow{margin-bottom:1.0110920672rem}.ilo--card__type__text .ilo--card--title{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;margin-bottom:1.674953518rem}@media screen and (min-width:610px){.ilo--card__type__text .ilo--card--title{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:1.5763397642rem}}.ilo--card__type__text .ilo--card--date{display:block;margin-bottom:1.4398166117rem}.ilo--card__type__text .ilo--card--content{display:flex;flex-direction:column;position:relative}.ilo--card__type__text .ilo--card--content>*{justify-self:flex-start}.ilo--card__type__text .ilo--card--content>:last-child{justify-self:flex-end;margin-bottom:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilo-org/twig",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Twig components for the ILO's Design System",
|
|
6
6
|
"publishConfig": {
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"@ilo-org/brand-assets": "0.5.1",
|
|
52
52
|
"@ilo-org/fonts": "0.2.2",
|
|
53
53
|
"@ilo-org/icons": "0.3.1",
|
|
54
|
-
"@ilo-org/styles": "1.0.
|
|
55
|
-
"@ilo-org/themes": "0.
|
|
54
|
+
"@ilo-org/styles": "1.0.4",
|
|
55
|
+
"@ilo-org/themes": "0.9.0",
|
|
56
56
|
"@ilo-org/utils": "0.1.1"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
@@ -107,8 +107,8 @@
|
|
|
107
107
|
"webpack": "^4.46.0",
|
|
108
108
|
"yaml-loader": "0.6.0",
|
|
109
109
|
"yo": "^3.1.1",
|
|
110
|
-
"@ilo-org/eslint-config": "0.
|
|
111
|
-
"@ilo-org/prettier-config": "0.
|
|
110
|
+
"@ilo-org/eslint-config": "1.0.0",
|
|
111
|
+
"@ilo-org/prettier-config": "1.0.0"
|
|
112
112
|
},
|
|
113
113
|
"scripts": {
|
|
114
114
|
"storybook": "node importprefix.js && node importsvgs.js && start-storybook --config-dir apps/storybook",
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
{% set accordion_id = id ~ uid %}
|
|
6
6
|
{% set button_id = 'button-' ~ accordion_id %}
|
|
7
7
|
{% set panel_id = 'panel-' ~ accordion_id %}
|
|
8
|
-
{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--
|
|
8
|
+
{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--panel__open' : '' %}
|
|
9
9
|
{% set scroll_class = scroll ? prefix ~ '--accordion--panel__scroll' : '' %}
|
|
10
10
|
|
|
11
11
|
<li class="{{prefix}}--accordion--item" id="{{ accordion_id }}">
|
|
12
12
|
<div class="ilo--h3">
|
|
13
|
-
<button class="{{prefix}}--accordion--button {{prefix}}--accordion--
|
|
13
|
+
<button class="{{prefix}}--accordion--button {{prefix}}--accordion--button__{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="{{ panel_id }}" id="{{ button_id }}">
|
|
14
14
|
{{label}}
|
|
15
15
|
</button>
|
|
16
16
|
</div>
|
|
@@ -130,7 +130,7 @@ export default class Accordion {
|
|
|
130
130
|
const panel = panelbutton
|
|
131
131
|
.closest(".ilo--accordion--item")
|
|
132
132
|
.querySelector(".ilo--accordion--panel");
|
|
133
|
-
const isopen = panel.classList.contains("ilo--accordion--
|
|
133
|
+
const isopen = panel.classList.contains("ilo--accordion--panel__open");
|
|
134
134
|
|
|
135
135
|
if (!this.multipleExpanded) {
|
|
136
136
|
this.accordionPanels.forEach((item) => {
|
|
@@ -158,7 +158,7 @@ export default class Accordion {
|
|
|
158
158
|
* @chainable
|
|
159
159
|
*/
|
|
160
160
|
collapseSection(element) {
|
|
161
|
-
element.classList.remove("ilo--accordion--
|
|
161
|
+
element.classList.remove("ilo--accordion--panel__open");
|
|
162
162
|
element.parentElement
|
|
163
163
|
.querySelector(".ilo--accordion--button")
|
|
164
164
|
.setAttribute(ARIA.EXPANDED, "false");
|
|
@@ -178,7 +178,7 @@ export default class Accordion {
|
|
|
178
178
|
.querySelector(".ilo--accordion--button")
|
|
179
179
|
.setAttribute(ARIA.EXPANDED, "true");
|
|
180
180
|
element.setAttribute(ARIA.HIDDEN, "false");
|
|
181
|
-
element.classList.add("ilo--accordion--
|
|
181
|
+
element.classList.add("ilo--accordion--panel__open");
|
|
182
182
|
this.handleTabIndex(element, "ADD");
|
|
183
183
|
}
|
|
184
184
|
|
|
@@ -45,12 +45,35 @@ export default class Breadcrumb {
|
|
|
45
45
|
* @chainable
|
|
46
46
|
*/
|
|
47
47
|
cacheDomReferences() {
|
|
48
|
-
|
|
49
|
-
this.
|
|
50
|
-
this.
|
|
51
|
-
|
|
48
|
+
// Store references to classnames
|
|
49
|
+
this.breadcrumbsId = `${this.prefix}--breadcrumb--container`;
|
|
50
|
+
this.contextAreaClass = `${this.prefix}--breadcrumb--context`;
|
|
51
|
+
this.contextMenuItemsClass = `${this.prefix}--context-menu`;
|
|
52
|
+
this.contextCollapseClass = `${this.contextAreaClass}__collapse`;
|
|
53
|
+
this.contextButtonClass = `${this.contextAreaClass}--button`;
|
|
54
|
+
this.contextMenuClass = `${this.contextAreaClass}--menu`;
|
|
55
|
+
this.contextMenuVisibleClass = `${this.contextMenuClass}__visible`;
|
|
56
|
+
|
|
57
|
+
// Store reference to DOM elements
|
|
58
|
+
this.breadcrumbs = this.element.querySelector(`#${this.breadcrumbsId}`);
|
|
59
|
+
this.contextArea = this.element.querySelector(`.${this.contextAreaClass}`);
|
|
60
|
+
this.contextMenu = this.element.querySelector(`.${this.contextMenuClass}`);
|
|
61
|
+
this.contextButton = this.element.querySelector(
|
|
62
|
+
`.${this.contextButtonClass}`
|
|
63
|
+
);
|
|
64
|
+
this.breadcrumbsLastLink = this.element.querySelector(
|
|
65
|
+
`#${this.breadcrumbsId} > li:last-child a`
|
|
66
|
+
);
|
|
67
|
+
this.contextMenuItems = this.element.querySelector(
|
|
68
|
+
`.${this.contextMenuItemsClass}`
|
|
52
69
|
);
|
|
53
|
-
this.
|
|
70
|
+
this.contextMenuItemFirstLink =
|
|
71
|
+
this.contextMenuItems.querySelector("li:first-child a");
|
|
72
|
+
this.contextMenuItemLastLink =
|
|
73
|
+
this.contextMenuItems.querySelector("li:last-child a");
|
|
74
|
+
|
|
75
|
+
// Store a reference to the breadcrumbs width so we know when to uncollapse them
|
|
76
|
+
this.breadcrumbsWidth = this.breadcrumbs.offsetWidth;
|
|
54
77
|
|
|
55
78
|
return this;
|
|
56
79
|
}
|
|
@@ -64,59 +87,194 @@ export default class Breadcrumb {
|
|
|
64
87
|
setupHandlers() {
|
|
65
88
|
this.onResize = this.onResize.bind(this);
|
|
66
89
|
this.onClick = this.onClick.bind(this);
|
|
90
|
+
this.contexMenuIsOpen = this.contexMenuIsOpen.bind(this);
|
|
91
|
+
this.openContextMenu = this.openContextMenu.bind(this);
|
|
92
|
+
this.closeContextMenu = this.closeContextMenu.bind(this);
|
|
93
|
+
this.focusBreadcrumbsLastLink = this.focusBreadcrumbsLastLink.bind(this);
|
|
94
|
+
this.focusContextMenuItemFirstLink =
|
|
95
|
+
this.focusContextMenuItemFirstLink.bind(this);
|
|
96
|
+
this.onKeydown = this.onKeydown.bind(this);
|
|
67
97
|
|
|
68
98
|
return this;
|
|
69
99
|
}
|
|
70
100
|
|
|
71
101
|
/**
|
|
72
|
-
*
|
|
102
|
+
* Adds event listeners to enable interaction with view
|
|
73
103
|
*
|
|
74
104
|
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
75
105
|
* @chainable
|
|
76
106
|
*/
|
|
77
107
|
enable() {
|
|
108
|
+
// Handle resizing events
|
|
78
109
|
window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
|
|
79
|
-
|
|
80
|
-
|
|
110
|
+
|
|
111
|
+
if (this.contextButton) {
|
|
112
|
+
// When the context button gets clicked
|
|
113
|
+
this.contextButton.addEventListener(EVENTS.CLICK, (e) => this.onClick(e));
|
|
114
|
+
|
|
115
|
+
// We only need the keydown handler to manage tab navigation when the
|
|
116
|
+
// context menu is visible
|
|
117
|
+
this.element.addEventListener("keydown", (e) => this.onKeydown(e));
|
|
118
|
+
|
|
119
|
+
return this;
|
|
81
120
|
}
|
|
121
|
+
}
|
|
82
122
|
|
|
123
|
+
/**
|
|
124
|
+
* OnClick interaction with the ContextMenu button
|
|
125
|
+
*
|
|
126
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
127
|
+
* @chainable
|
|
128
|
+
*/
|
|
129
|
+
onClick(e) {
|
|
130
|
+
e.stopPropagation();
|
|
131
|
+
if (this.contexMenuIsOpen()) {
|
|
132
|
+
this.closeContextMenu();
|
|
133
|
+
} else {
|
|
134
|
+
this.openContextMenu();
|
|
135
|
+
// Add an event listener to close the context menu if the user clicks outside of it
|
|
136
|
+
window.addEventListener("click", this.closeContextMenu, { once: true });
|
|
137
|
+
}
|
|
83
138
|
return this;
|
|
84
139
|
}
|
|
85
140
|
|
|
86
141
|
/**
|
|
87
|
-
* onResize interaction
|
|
142
|
+
* onResize interaction
|
|
88
143
|
*
|
|
89
144
|
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
90
145
|
* @chainable
|
|
91
146
|
*/
|
|
92
147
|
onResize() {
|
|
93
|
-
if (this.
|
|
94
|
-
if (this.
|
|
95
|
-
this.
|
|
96
|
-
this.ContextMenu.classList.remove("open");
|
|
148
|
+
if (this.contextArea && this.breadcrumbsWidth) {
|
|
149
|
+
if (this.breadcrumbsWidth >= window.innerWidth / 1.5) {
|
|
150
|
+
this.contextArea.classList.add(this.contextCollapseClass);
|
|
97
151
|
} else {
|
|
98
|
-
this.
|
|
99
|
-
this.
|
|
152
|
+
this.contextArea.classList.remove(this.contextCollapseClass);
|
|
153
|
+
this.closeContextMenu();
|
|
100
154
|
}
|
|
101
155
|
}
|
|
102
156
|
return this;
|
|
103
157
|
}
|
|
104
158
|
|
|
105
159
|
/**
|
|
106
|
-
*
|
|
160
|
+
* onKeydown interaction for tab navigation
|
|
107
161
|
*
|
|
162
|
+
* @param {*} e keydown event
|
|
108
163
|
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
109
164
|
* @chainable
|
|
110
165
|
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
166
|
+
onKeydown(e) {
|
|
167
|
+
// Back navigation using the shift key
|
|
168
|
+
if (e.shiftKey) {
|
|
169
|
+
if (e.key.toLowerCase() === "tab") {
|
|
170
|
+
// If the first context menu item is selected, tabbing back
|
|
171
|
+
// should select the context button
|
|
172
|
+
if (document.activeElement === this.contextMenuItemFirstLink) {
|
|
173
|
+
e.preventDefault();
|
|
174
|
+
this.contextButton.focus();
|
|
175
|
+
}
|
|
117
176
|
}
|
|
177
|
+
return this;
|
|
118
178
|
}
|
|
119
179
|
|
|
180
|
+
// When using tab navigation
|
|
181
|
+
if (e.key.toLowerCase() === "tab") {
|
|
182
|
+
// If the context menu is open...
|
|
183
|
+
const contexMenuIsOpen = this.contexMenuIsOpen();
|
|
184
|
+
// If the context button is focused then the next focusable item
|
|
185
|
+
// should be the first item in the context menu
|
|
186
|
+
if (contexMenuIsOpen) {
|
|
187
|
+
if (document.activeElement === this.contextButton) {
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
this.focusContextMenuItemFirstLink();
|
|
190
|
+
return this;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// If the last context menu item is focused then the next focusable
|
|
194
|
+
// item should be the last breadcrumb item
|
|
195
|
+
if (document.activeElement === this.contextMenuItemLastLink) {
|
|
196
|
+
e.preventDefault();
|
|
197
|
+
this.focusBreadcrumbsLastLink();
|
|
198
|
+
this.closeContextMenu();
|
|
199
|
+
return this;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
return this;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* Position the context menu directly beneath the button
|
|
209
|
+
*
|
|
210
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
211
|
+
* @chainable
|
|
212
|
+
*/
|
|
213
|
+
positionContextMenu() {
|
|
214
|
+
const buttonRect = this.contextButton.getBoundingClientRect();
|
|
215
|
+
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
|
|
216
|
+
const contextMenuItemsWidth = this.contextMenuItems.offsetWidth;
|
|
217
|
+
const navStart = buttonCenterX - contextMenuItemsWidth / 2;
|
|
218
|
+
const navTop = buttonRect.bottom + 16;
|
|
219
|
+
this.contextMenu.style.left = navStart + "px";
|
|
220
|
+
this.contextMenu.style.top = navTop + "px";
|
|
221
|
+
return this;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/**
|
|
225
|
+
* Open the Context menu
|
|
226
|
+
*
|
|
227
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
228
|
+
* @chainable
|
|
229
|
+
*/
|
|
230
|
+
openContextMenu() {
|
|
231
|
+
this.contextMenu.classList.add(this.contextMenuVisibleClass);
|
|
232
|
+
this.contextMenu.removeAttribute("hidden");
|
|
233
|
+
this.contextButton.setAttribute("aria-expanded", true);
|
|
234
|
+
this.positionContextMenu();
|
|
235
|
+
return this;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Close the Context menu
|
|
240
|
+
*
|
|
241
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
242
|
+
* @chainable
|
|
243
|
+
*/
|
|
244
|
+
closeContextMenu() {
|
|
245
|
+
this.contextMenu.classList.remove(this.contextMenuVisibleClass);
|
|
246
|
+
this.contextMenu.setAttribute("hidden", "hidden");
|
|
247
|
+
this.contextButton.setAttribute("aria-expanded", false);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* Check to see whether the Context menu is open
|
|
252
|
+
*
|
|
253
|
+
* @returns boolean
|
|
254
|
+
*/
|
|
255
|
+
contexMenuIsOpen() {
|
|
256
|
+
return this.contextMenu.classList.contains(this.contextMenuVisibleClass);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* Focuses first link in the Context Menu
|
|
261
|
+
*
|
|
262
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
263
|
+
* @chainable
|
|
264
|
+
*/
|
|
265
|
+
focusContextMenuItemFirstLink() {
|
|
266
|
+
this.contextMenuItemFirstLink.focus();
|
|
267
|
+
return this;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* Focuses last item of the Breadcrumbs
|
|
272
|
+
*
|
|
273
|
+
* @return {Object} Breadcrumb A reference to the instance of the class
|
|
274
|
+
* @chainable
|
|
275
|
+
*/
|
|
276
|
+
focusBreadcrumbsLastLink() {
|
|
277
|
+
this.breadcrumbsLastLink.focus();
|
|
120
278
|
return this;
|
|
121
279
|
}
|
|
122
280
|
}
|
|
@@ -1,43 +1,55 @@
|
|
|
1
|
-
{#
|
|
2
|
-
|
|
3
|
-
#}
|
|
1
|
+
{# breadcrumb.twig #}
|
|
2
|
+
|
|
3
|
+
{# If a home field is passed, it will be used as the first link #}
|
|
4
|
+
{# THE `HOME` FIELD WILL BE DEPRECATED IN FUTURE VERSIONS AND SHOULD NOT BE USED #}
|
|
5
|
+
{% if home %}
|
|
6
|
+
{% set firstlink = home %}
|
|
7
|
+
{% set contextLinks = links|slice(0, items|length - 1) %}
|
|
8
|
+
{% endif %}
|
|
9
|
+
|
|
10
|
+
{% if not home %}
|
|
11
|
+
{% set firstlink = links|first %}
|
|
12
|
+
{% set contextLinks = links|slice(1, items|length - 1) %}
|
|
13
|
+
{% endif %}
|
|
14
|
+
|
|
4
15
|
{% set lastlink = links|last %}
|
|
5
|
-
|
|
6
|
-
<nav class="{{prefix}}--breadcrumb{% if className %}
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</li>
|
|
13
|
-
{% if links|length >= 2 %}
|
|
14
|
-
<li class="{{prefix}}--breadcrumb--item first">
|
|
15
|
-
<a class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}">
|
|
16
|
-
<span class="{{prefix}}--breadcrumb--link--label">{{firstlink.label}}</span>
|
|
17
|
-
</a>
|
|
16
|
+
|
|
17
|
+
<nav class="{{prefix}}--breadcrumb {% if className %}{{className}}{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Breadcrumb">
|
|
18
|
+
<div class="{{prefix}}--breadcrumb--inner">
|
|
19
|
+
<ol class="{{prefix}}--breadcrumb--items" id="{{prefix}}--breadcrumb--container">
|
|
20
|
+
{# Render the first link on its own as a custom icon #}
|
|
21
|
+
<li class="{{prefix}}--breadcrumb--item {{prefix}}--breadcrumb--item__first">
|
|
22
|
+
<a aria-label="{{firstlink.label}}" class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}"></a>
|
|
18
23
|
</li>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
{% if not loop.first and not loop.last %}
|
|
24
|
+
{# Render all but the first and last items in the context area #}
|
|
25
|
+
{% if contextLinks|length > 0 %}
|
|
26
|
+
<li class="{{prefix}}--breadcrumb--context">
|
|
27
|
+
<ol class="{{prefix}}--breadcrumb--items">
|
|
28
|
+
{% for link in contextLinks %}
|
|
25
29
|
<li class="{{prefix}}--breadcrumb--item">
|
|
26
30
|
<a href="{{link.url}}" class="{{prefix}}--breadcrumb--link">
|
|
27
|
-
<span class="{{prefix}}--breadcrumb--link--label
|
|
31
|
+
<span class="{{prefix}}--breadcrumb--link--label">{{link.label}}</span>
|
|
28
32
|
</a>
|
|
29
33
|
</li>
|
|
30
|
-
{%
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
{% endfor %}
|
|
35
|
+
</ol>
|
|
36
|
+
<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" aria-controls="{{prefix}}--breadcrumb--menu" class="{{prefix}}--breadcrumb--context--button"></button>
|
|
37
|
+
</li>
|
|
38
|
+
{% endif %}
|
|
39
|
+
{# Render the last one outside the context area #}
|
|
40
|
+
{% if links|length > 1 %}
|
|
41
|
+
<li class="{{prefix}}--breadcrumb--item">
|
|
42
|
+
<a class="{{prefix}}--breadcrumb--link" href="{{lastlink.url}}">
|
|
43
|
+
<span class="{{prefix}}--breadcrumb--link--label">{{lastlink.label}}</span>
|
|
44
|
+
</a>
|
|
45
|
+
</li>
|
|
46
|
+
{% endif %}
|
|
47
|
+
</ol>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="{{prefix}}--breadcrumb--context--menu" id="{{prefix}}--breadcrumb--menu" hidden>
|
|
50
|
+
{% include '@components/contextmenu/contextmenu.twig' with {
|
|
51
|
+
links: contextLinks,
|
|
52
|
+
prefix: prefix
|
|
53
|
+
} only %}
|
|
54
|
+
</div>
|
|
43
55
|
</nav>
|
|
@@ -4,14 +4,13 @@ breadcrumb:
|
|
|
4
4
|
label: Breadcrumb
|
|
5
5
|
description: A component for displaying links in a "breadcrumb" ux
|
|
6
6
|
fields:
|
|
7
|
-
|
|
8
|
-
type:
|
|
9
|
-
label:
|
|
10
|
-
description:
|
|
11
|
-
required:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
url: "/"
|
|
7
|
+
buttonlabel:
|
|
8
|
+
type: string
|
|
9
|
+
label: buttonlabel
|
|
10
|
+
description: The `aria-label` value for the button that toggles the context menu when the Breadcrumbs are collapsed
|
|
11
|
+
required: false
|
|
12
|
+
default: "Toggle links"
|
|
13
|
+
preview: "Toggle links"
|
|
15
14
|
links:
|
|
16
15
|
type: object
|
|
17
16
|
label: Home
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{#
|
|
2
2
|
CONTEXT MENU COMPONENT
|
|
3
3
|
#}
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</
|
|
4
|
+
<ol class="{{prefix}}--context-menu">
|
|
5
|
+
{% for link in links %}
|
|
6
|
+
<li class="{{prefix}}--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
|
|
7
|
+
<a href="{{link.url}}" class="{{prefix}}--context-menu--link">
|
|
8
|
+
<span class="{{prefix}}--context-menu--label">{{link.label}}</span>
|
|
9
|
+
</a>
|
|
10
|
+
</li>
|
|
11
|
+
{% endfor %}
|
|
12
|
+
</ol>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
logogrid:
|
|
2
|
-
namespace: Components/
|
|
2
|
+
namespace: Components/Media
|
|
3
3
|
use: "@components/logogrid/logogrid.twig"
|
|
4
4
|
label: Logo Grid
|
|
5
5
|
description: The Logo Grid component renders a series of logos representing a group of organizations. It can be shown on a light or dark background.
|