kempo 2.14.1 → 2.15.1
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/Tabs.js +1 -1
- package/dist/kempo-styles.css +1 -1
- package/docs/components/tabs.html +56 -14
- package/docs/kempo/components/Tabs.js +1 -1
- package/docs/kempo/kempo-styles.css +1 -1
- package/package.json +1 -1
- package/src/components/Tabs.js +94 -16
- package/src/kempo-styles.css +45 -0
package/dist/components/Tabs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n <button id="button">\n ${super.shadowTemplate}\n </button>\n `}get shadowStyles(){return"\n :host {\n margin-bottom: -1px;\n }\n #button {\n padding: var(--spacer_h);\n background-color: transparent;\n border: none;\n cursor: inherit;\n box-shadow: none;\n color: inherit;\n }\n :host(:not([active])) #button {\n cursor: pointer;\n }\n :host([active]){\n border-bottom: 2px solid var(--c_primary);\n margin-bottom: -1px;\n }\n :host([active]) #button {\n color: var(--tc_primary);\n }\n "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n height: 100%;\n max-height: 100%;\n flex: 1 1 auto;\n overflow: hidden;\n }\n :host([active]) {\n display: block;\n }\n :host(:not([active])) {\n display: none;\n }\n `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="tabs">\n <slot name="tabs"></slot>\n </div>\n <div id="contents">\n ${super.shadowTemplate}\n </div>\n </div>\n \n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n overflow: hidden;\n }\n #wrapper {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n height: 100%;\n overflow: hidden;\n }\n #tabs {\n display: flex;\n border-bottom: 1px solid var(--c_border);\n padding: 0;\n margin-top: calc(0 - var(--spacer));\n align-items: flex-
|
|
1
|
+
import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n <button id="button">\n ${super.shadowTemplate}\n </button>\n `}get shadowStyles(){return"\n :host {\n margin-bottom: -1px;\n }\n #button {\n padding: var(--spacer_h);\n background-color: transparent;\n border: none;\n cursor: inherit;\n box-shadow: none;\n color: inherit;\n }\n :host(:not([active])) #button {\n cursor: pointer;\n }\n :host([active]){\n border-bottom: 2px solid var(--c_primary);\n margin-bottom: -1px;\n }\n :host([active]) #button {\n color: var(--tc_primary);\n }\n "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n height: 100%;\n max-height: 100%;\n flex: 1 1 auto;\n overflow: hidden;\n }\n :host([active]) {\n display: block;\n }\n :host(:not([active])) {\n display: none;\n }\n `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`);const t=this.shadowRoot.getElementById("tabs");t.addEventListener("scroll",this.updateScrollIndicators.bind(this)),this.updateScrollIndicators(),new ResizeObserver((()=>this.updateScrollIndicators())).observe(t)}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),n=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,o=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),n.classList.toggle("visible",o)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="tabs-container">\n <div id="scroll-left" class="scroll-indicator"></div>\n <div id="tabs">\n <slot name="tabs"></slot>\n </div>\n <div id="scroll-right" class="scroll-indicator"></div>\n </div>\n <div id="contents">\n ${super.shadowTemplate}\n </div>\n </div>\n \n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n overflow: hidden;\n }\n #wrapper {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n height: 100%;\n overflow: hidden;\n }\n #tabs-container {\n position: relative;\n display: flex;\n border-bottom: 1px solid var(--c_border);\n }\n #tabs {\n display: flex;\n padding: 0;\n margin-top: calc(0 - var(--spacer));\n align-items: stretch;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n flex: 1;\n }\n #tabs::-webkit-scrollbar {\n display: none;\n }\n #tabs ::slotted(*) {\n display: flex;\n align-items: center;\n }\n .scroll-indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 32px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 1;\n }\n .scroll-indicator.visible {\n opacity: 1;\n }\n #scroll-left {\n left: 0;\n background: linear-gradient(to right, var(--c_bg, white) 0%, transparent 100%);\n }\n #scroll-right {\n right: 0;\n background: linear-gradient(to left, var(--c_bg, white) 0%, transparent 100%);\n }\n #contents {\n display: flex;\n flex-direction: column;\n flex: 1;\n max-height: 100%;\n overflow: hidden;\n }\n `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n flex: 1 1 auto;\n height: 1px;\n }\n `}}window.customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};
|
package/dist/kempo-styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator,input[type="search"]::-webkit-search-cancel-button{filter:var(--date_picker_icon_filter)}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
|
1
|
+
/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-f{display:flex !important;flex-wrap:wrap}.d-d-if{display:inline-flex !important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-f{display:flex !important;flex-wrap:wrap}.t-d-if{display:inline-flex !important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-f{display:flex !important;flex-wrap:wrap}.m-d-if{display:inline-flex !important;flex-wrap:wrap}}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator,input[type="search"]::-webkit-search-cancel-button{filter:var(--date_picker_icon_filter)}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
<h6>Examples</h6>
|
|
24
24
|
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
25
|
<a href="#tabSpacers">Tab Spacers</a><br />
|
|
26
|
+
<a href="#scrollingTabs">Scrolling Tabs</a><br />
|
|
26
27
|
|
|
27
28
|
<h6 class="mt">JavaScript Reference</h6>
|
|
28
29
|
<a href="#constructor">Constructor</a><br />
|
|
@@ -62,36 +63,77 @@
|
|
|
62
63
|
</k-tab-content>
|
|
63
64
|
</k-tabs>
|
|
64
65
|
|
|
65
|
-
<
|
|
66
|
+
<h3 id="scrollingTabs"><a href="#scrollingTabs" class="no-link">Scrolling Tabs</a></h3>
|
|
67
|
+
<p>When there are many tabs, they will scroll horizontally with gradient indicators showing when more tabs are available.</p>
|
|
68
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-tabs</span>></span>
|
|
69
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab1"</span>></span>Tab 1<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
70
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab2"</span>></span>Tab 2<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
71
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab3"</span>></span>Tab 3<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
72
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab4"</span>></span>Tab 4<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
73
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab5"</span>></span>Tab 5<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
74
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab6"</span>></span>Tab 6<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
75
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab7"</span>></span>Tab 7<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
76
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab8"</span>></span>Tab 8<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
77
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab9"</span>></span>Tab 9<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
78
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"tab10"</span>></span>Tab 10<span class="hljs-tag"></<span class="hljs-name">k-tab</span>></span>
|
|
79
|
+
<span class="hljs-comment"><!-- Tab Contents --></span>
|
|
80
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab1"</span>></span>Content 1<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
81
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab2"</span>></span>Content 2<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
82
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab3"</span>></span>Content 3<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
83
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab4"</span>></span>Content 4<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
84
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab5"</span>></span>Content 5<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
85
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab6"</span>></span>Content 6<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
86
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab7"</span>></span>Content 7<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
87
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab8"</span>></span>Content 8<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
88
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab9"</span>></span>Content 9<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
89
|
+
<span class="hljs-tag"><<span class="hljs-name">k-tab-content</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"tab10"</span>></span>Content 10<span class="hljs-tag"></<span class="hljs-name">k-tab-content</span>></span>
|
|
90
|
+
<span class="hljs-tag"></<span class="hljs-name">k-tabs</span>></span></code></pre>
|
|
91
|
+
<k-tabs>
|
|
92
|
+
<k-tab for="tab1">Long Tab Name 1</k-tab>
|
|
93
|
+
<k-tab for="tab2">Long Tab Name 2</k-tab>
|
|
94
|
+
<k-tab for="tab3">Long Tab Name 3</k-tab>
|
|
95
|
+
<k-tab for="tab4">Long Tab Name 4</k-tab>
|
|
96
|
+
<k-tab for="tab5">Long Tab Name 5</k-tab>
|
|
97
|
+
<k-tab for="tab6">Long Tab Name 6</k-tab>
|
|
98
|
+
<k-tab for="tab7">Long Tab Name 7</k-tab>
|
|
99
|
+
<k-tab for="tab8">Long Tab Name 8</k-tab>
|
|
100
|
+
<k-tab for="tab9">Long Tab Name 9</k-tab>
|
|
101
|
+
<k-tab for="tab10">Long Tab Name 10</k-tab>
|
|
102
|
+
<k-tab-content name="tab1"><p>Content 1</p></k-tab-content>
|
|
103
|
+
<k-tab-content name="tab2"><p>Content 2</p></k-tab-content>
|
|
104
|
+
<k-tab-content name="tab3"><p>Content 3</p></k-tab-content>
|
|
105
|
+
<k-tab-content name="tab4"><p>Content 4</p></k-tab-content>
|
|
106
|
+
<k-tab-content name="tab5"><p>Content 5</p></k-tab-content>
|
|
107
|
+
<k-tab-content name="tab6"><p>Content 6</p></k-tab-content>
|
|
108
|
+
<k-tab-content name="tab7"><p>Content 7</p></k-tab-content>
|
|
109
|
+
<k-tab-content name="tab8"><p>Content 8</p></k-tab-content>
|
|
110
|
+
<k-tab-content name="tab9"><p>Content 9</p></k-tab-content>
|
|
111
|
+
<k-tab-content name="tab10"><p>Content 10</p></k-tab-content>
|
|
112
|
+
</k-tabs>
|
|
66
113
|
|
|
114
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
67
115
|
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
68
116
|
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
69
|
-
<h5>
|
|
70
|
-
<code>new Tabs()</code>
|
|
71
|
-
</h5>
|
|
72
|
-
|
|
117
|
+
<h5><code>new Tabs()</code></h5>
|
|
73
118
|
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
74
119
|
<ul>
|
|
75
120
|
<li><a href="./component.html">Component</a></li>
|
|
76
121
|
</ul>
|
|
77
|
-
|
|
78
122
|
<h3 id="attributes"><a href="#attributes" class="no-link">Attributes</a></h3>
|
|
79
123
|
<h5><code>active<i>: string</i></code></h5>
|
|
80
124
|
<p>The name of the active tab.</p>
|
|
81
|
-
|
|
82
125
|
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
83
|
-
<h5><code>getTab(id)<i>: Tab</i></code></h5>
|
|
84
|
-
<p>Returns the tab with the specified id.</p>
|
|
85
126
|
<h5><code>getActiveTab()<i>: Tab</i></code></h5>
|
|
86
127
|
<p>Returns the currently active tab.</p>
|
|
87
|
-
<h5><code>
|
|
88
|
-
<p>Returns the tab
|
|
128
|
+
<h5><code>getTab(id)<i>: Tab</i></code></h5>
|
|
129
|
+
<p>Returns the tab with the specified id.</p>
|
|
89
130
|
<h5><code>getActiveContent()<i>: TabContent</i></code></h5>
|
|
90
131
|
<p>Returns the currently active tab content.</p>
|
|
91
|
-
|
|
132
|
+
<h5><code>getContent(id)<i>: TabContent</i></code></h5>
|
|
133
|
+
<p>Returns the tab content with the specified id.</p>
|
|
92
134
|
</main>
|
|
93
135
|
<div style="height:33vh"></div>
|
|
94
|
-
<script type="module" src="../kempo/components/
|
|
95
|
-
<script type="module" src="../kempo/components/
|
|
136
|
+
<script type="module" src="../kempo/components/Tabs.js"></script>
|
|
137
|
+
<script type="module" src="../kempo/components/Import.js"></script>
|
|
96
138
|
</body>
|
|
97
139
|
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n <button id="button">\n ${super.shadowTemplate}\n </button>\n `}get shadowStyles(){return"\n :host {\n margin-bottom: -1px;\n }\n #button {\n padding: var(--spacer_h);\n background-color: transparent;\n border: none;\n cursor: inherit;\n box-shadow: none;\n color: inherit;\n }\n :host(:not([active])) #button {\n cursor: pointer;\n }\n :host([active]){\n border-bottom: 2px solid var(--c_primary);\n margin-bottom: -1px;\n }\n :host([active]) #button {\n color: var(--tc_primary);\n }\n "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n height: 100%;\n max-height: 100%;\n flex: 1 1 auto;\n overflow: hidden;\n }\n :host([active]) {\n display: block;\n }\n :host(:not([active])) {\n display: none;\n }\n `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="tabs">\n <slot name="tabs"></slot>\n </div>\n <div id="contents">\n ${super.shadowTemplate}\n </div>\n </div>\n \n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n overflow: hidden;\n }\n #wrapper {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n height: 100%;\n overflow: hidden;\n }\n #tabs {\n display: flex;\n border-bottom: 1px solid var(--c_border);\n padding: 0;\n margin-top: calc(0 - var(--spacer));\n align-items: flex-
|
|
1
|
+
import Component from"./Component.js";import{dispatchEvent}from"../utils/element.js";const clickHandler=Symbol();export class Tab extends Component{constructor(){super(),this[clickHandler]=()=>{this.active||(this.tabs.active=this.for)},this.slot="tabs",this.registerAttribute("active",!1)}connectedCallback(){super.connectedCallback(),this.shadowRoot.getElementById("button").addEventListener("click",this[clickHandler])}get for(){const t=this.getAttribute("for");return t||this?.tabs.tabs.indexOf(this)}set for(t){t?this.setAttribute("for",t):this.removeAttribute("for")}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get shadowTemplate(){return`\n <button id="button">\n ${super.shadowTemplate}\n </button>\n `}get shadowStyles(){return"\n :host {\n margin-bottom: -1px;\n }\n #button {\n padding: var(--spacer_h);\n background-color: transparent;\n border: none;\n cursor: inherit;\n box-shadow: none;\n color: inherit;\n }\n :host(:not([active])) #button {\n cursor: pointer;\n }\n :host([active]){\n border-bottom: 2px solid var(--c_primary);\n margin-bottom: -1px;\n }\n :host([active]) #button {\n color: var(--tc_primary);\n }\n "}}window.customElements.define("k-tab",Tab);export class TabContent extends Component{constructor(){super(),this.registerAttribute("active",!1)}get tabs(){return"K-TABS"===this.parentElement.tagName?this.parentElement:null}get name(){const t=this.getAttribute("name");return t||this?.tabs.contents.indexOf(this)}set name(t){t?this.setAttribute("name",t):this.removeAttribute("name")}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n height: 100%;\n max-height: 100%;\n flex: 1 1 auto;\n overflow: hidden;\n }\n :host([active]) {\n display: block;\n }\n :host(:not([active])) {\n display: none;\n }\n `}}window.customElements.define("k-tab-content",TabContent);export class Tabs extends Component{constructor(){super(),this.registerAttribute("active","")}async connectedCallback(){await super.connectedCallback(),this.active||(this.active=`${this.querySelectorAll("k-tab-content")[0].name}`);const t=this.shadowRoot.getElementById("tabs");t.addEventListener("scroll",this.updateScrollIndicators.bind(this)),this.updateScrollIndicators(),new ResizeObserver((()=>this.updateScrollIndicators())).observe(t)}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),n=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,o=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),n.classList.toggle("visible",o)}attributeChangedCallback(t,e,n){if("active"===t){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const s=this.getTab(n);s&&(s.active=!0);const o=this.getContent(n);o&&(o.active=!0),dispatchEvent(this,"tab",{tab:n})}}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab")[n]}return e}getActiveTab(){return this.querySelector(':scope > k-tab[active="true"]')}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let n=parseInt(t);n||(n=0),e=this.querySelectorAll("k-tab-content")[n]}return e}getActiveContent(){return this.querySelector(':scope > k-tab-content[active="true"]')}get shadowTemplate(){return`\n <div id="wrapper">\n <div id="tabs-container">\n <div id="scroll-left" class="scroll-indicator"></div>\n <div id="tabs">\n <slot name="tabs"></slot>\n </div>\n <div id="scroll-right" class="scroll-indicator"></div>\n </div>\n <div id="contents">\n ${super.shadowTemplate}\n </div>\n </div>\n \n `}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n display: block;\n overflow: hidden;\n }\n #wrapper {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n height: 100%;\n overflow: hidden;\n }\n #tabs-container {\n position: relative;\n display: flex;\n border-bottom: 1px solid var(--c_border);\n }\n #tabs {\n display: flex;\n padding: 0;\n margin-top: calc(0 - var(--spacer));\n align-items: stretch;\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n -ms-overflow-style: none;\n flex: 1;\n }\n #tabs::-webkit-scrollbar {\n display: none;\n }\n #tabs ::slotted(*) {\n display: flex;\n align-items: center;\n }\n .scroll-indicator {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 32px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.2s;\n z-index: 1;\n }\n .scroll-indicator.visible {\n opacity: 1;\n }\n #scroll-left {\n left: 0;\n background: linear-gradient(to right, var(--c_bg, white) 0%, transparent 100%);\n }\n #scroll-right {\n right: 0;\n background: linear-gradient(to left, var(--c_bg, white) 0%, transparent 100%);\n }\n #contents {\n display: flex;\n flex-direction: column;\n flex: 1;\n max-height: 100%;\n overflow: hidden;\n }\n `}static observedAttributes=[...super.observedAttributes,"active"]}window.customElements.define("k-tabs",Tabs);export class TabSpacer extends Component{constructor(){super(),this.slot="tabs"}get shadowStyles(){return`\n ${super.shadowStyles}\n :host {\n flex: 1 1 auto;\n height: 1px;\n }\n `}}window.customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator,input[type="search"]::-webkit-search-cancel-button{filter:var(--date_picker_icon_filter)}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
|
1
|
+
/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-f{display:flex !important;flex-wrap:wrap}.d-d-if{display:inline-flex !important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-f{display:flex !important;flex-wrap:wrap}.t-d-if{display:inline-flex !important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-f{display:flex !important;flex-wrap:wrap}.m-d-if{display:inline-flex !important;flex-wrap:wrap}}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator,input[type="search"]::-webkit-search-cancel-button{filter:var(--date_picker_icon_filter)}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
package/package.json
CHANGED
package/src/components/Tabs.js
CHANGED
|
@@ -53,6 +53,7 @@ export class Tab extends Component {
|
|
|
53
53
|
return /*css*/`
|
|
54
54
|
:host {
|
|
55
55
|
margin-bottom: -1px;
|
|
56
|
+
flex: 0 0 auto; /* Important: prevent shrinking and growing */
|
|
56
57
|
}
|
|
57
58
|
#button {
|
|
58
59
|
padding: var(--spacer_h);
|
|
@@ -61,6 +62,7 @@ export class Tab extends Component {
|
|
|
61
62
|
cursor: inherit;
|
|
62
63
|
box-shadow: none;
|
|
63
64
|
color: inherit;
|
|
65
|
+
white-space: nowrap; /* Prevent text wrapping */
|
|
64
66
|
}
|
|
65
67
|
:host(:not([active])) #button {
|
|
66
68
|
cursor: pointer;
|
|
@@ -133,7 +135,38 @@ export class Tabs extends Component {
|
|
|
133
135
|
if(!this.active){
|
|
134
136
|
this.active = `${this.querySelectorAll('k-tab-content')[0].name}`;
|
|
135
137
|
}
|
|
138
|
+
|
|
139
|
+
// Add scroll listeners for indicators
|
|
140
|
+
const tabsContainer = this.shadowRoot.getElementById('tabs');
|
|
141
|
+
tabsContainer.addEventListener('scroll', this.updateScrollIndicators.bind(this));
|
|
142
|
+
this.updateScrollIndicators();
|
|
143
|
+
|
|
144
|
+
// Update indicators on resize
|
|
145
|
+
new ResizeObserver(() => this.updateScrollIndicators()).observe(tabsContainer);
|
|
146
|
+
|
|
147
|
+
const leftButton = this.shadowRoot.getElementById('scroll-left');
|
|
148
|
+
const rightButton = this.shadowRoot.getElementById('scroll-right');
|
|
149
|
+
|
|
150
|
+
leftButton.addEventListener('click', () => {
|
|
151
|
+
tabsContainer.scrollBy({ left: -200, behavior: 'smooth' });
|
|
152
|
+
});
|
|
153
|
+
rightButton.addEventListener('click', () => {
|
|
154
|
+
tabsContainer.scrollBy({ left: 200, behavior: 'smooth' });
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
updateScrollIndicators() {
|
|
159
|
+
const tabsContainer = this.shadowRoot.getElementById('tabs');
|
|
160
|
+
const leftIndicator = this.shadowRoot.getElementById('scroll-left');
|
|
161
|
+
const rightIndicator = this.shadowRoot.getElementById('scroll-right');
|
|
162
|
+
|
|
163
|
+
const hasLeftScroll = tabsContainer.scrollLeft > 0;
|
|
164
|
+
const hasRightScroll = tabsContainer.scrollLeft < (tabsContainer.scrollWidth - tabsContainer.clientWidth);
|
|
165
|
+
|
|
166
|
+
leftIndicator.classList.toggle('visible', hasLeftScroll);
|
|
167
|
+
rightIndicator.classList.toggle('visible', hasRightScroll);
|
|
136
168
|
}
|
|
169
|
+
|
|
137
170
|
attributeChangedCallback(n, oV, nV){
|
|
138
171
|
if(n === 'active'){
|
|
139
172
|
const $activeTab = this.getActiveTab();
|
|
@@ -190,14 +223,25 @@ export class Tabs extends Component {
|
|
|
190
223
|
get shadowTemplate(){
|
|
191
224
|
return /*html*/`
|
|
192
225
|
<div id="wrapper">
|
|
193
|
-
<div id="tabs">
|
|
194
|
-
<
|
|
226
|
+
<div id="tabs-container">
|
|
227
|
+
<div id="scroll-left" class="scroll-indicator">
|
|
228
|
+
<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
229
|
+
<path d="M12 15L7 10L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
230
|
+
</svg>
|
|
231
|
+
</div>
|
|
232
|
+
<div id="tabs">
|
|
233
|
+
<slot name="tabs"></slot>
|
|
234
|
+
</div>
|
|
235
|
+
<div id="scroll-right" class="scroll-indicator">
|
|
236
|
+
<svg class="arrow" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
237
|
+
<path d="M8 15L13 10L8 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
238
|
+
</svg>
|
|
239
|
+
</div>
|
|
195
240
|
</div>
|
|
196
241
|
<div id="contents">
|
|
197
242
|
${super.shadowTemplate}
|
|
198
243
|
</div>
|
|
199
244
|
</div>
|
|
200
|
-
|
|
201
245
|
`;
|
|
202
246
|
}
|
|
203
247
|
get shadowStyles(){
|
|
@@ -205,28 +249,62 @@ export class Tabs extends Component {
|
|
|
205
249
|
${super.shadowStyles}
|
|
206
250
|
:host {
|
|
207
251
|
display: block;
|
|
208
|
-
|
|
252
|
+
width: 100%;
|
|
209
253
|
}
|
|
210
254
|
#wrapper {
|
|
211
255
|
display: flex;
|
|
212
256
|
flex-direction: column;
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
257
|
+
width: 100%;
|
|
258
|
+
min-width: 0;
|
|
259
|
+
}
|
|
260
|
+
#tabs-container {
|
|
261
|
+
position: relative;
|
|
262
|
+
border-bottom: 1px solid var(--c_border);
|
|
216
263
|
}
|
|
217
264
|
#tabs {
|
|
218
265
|
display: flex;
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
margin-top: calc(0 - var(--spacer));
|
|
222
|
-
align-items: flex-start;
|
|
266
|
+
overflow-x: auto;
|
|
267
|
+
overflow-y: hidden;
|
|
223
268
|
}
|
|
224
|
-
#
|
|
269
|
+
#tabs ::slotted(*) {
|
|
270
|
+
flex: 0 0 auto;
|
|
271
|
+
}
|
|
272
|
+
.scroll-indicator {
|
|
273
|
+
position: absolute;
|
|
274
|
+
top: 0;
|
|
275
|
+
bottom: 0;
|
|
276
|
+
width: 72px;
|
|
277
|
+
pointer-events: none;
|
|
278
|
+
opacity: 0;
|
|
279
|
+
transition: opacity 0.2s;
|
|
225
280
|
display: flex;
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
281
|
+
align-items: center;
|
|
282
|
+
justify-content: flex-start;
|
|
283
|
+
padding-bottom: 2px;
|
|
284
|
+
}
|
|
285
|
+
.scroll-indicator .arrow {
|
|
286
|
+
color: var(--tc_base);
|
|
287
|
+
z-index: 1;
|
|
288
|
+
}
|
|
289
|
+
.scroll-indicator.visible {
|
|
290
|
+
opacity: 1;
|
|
291
|
+
}
|
|
292
|
+
#scroll-left {
|
|
293
|
+
left: 0;
|
|
294
|
+
background: linear-gradient(90deg,
|
|
295
|
+
var(--c_bg) 0%,
|
|
296
|
+
var(--c_bg) 30%,
|
|
297
|
+
transparent 100%
|
|
298
|
+
);
|
|
299
|
+
}
|
|
300
|
+
#scroll-right {
|
|
301
|
+
right: 0;
|
|
302
|
+
justify-content: flex-end;
|
|
303
|
+
background: linear-gradient(-90deg,
|
|
304
|
+
var(--c_bg) 0%,
|
|
305
|
+
var(--c_bg) 30%,
|
|
306
|
+
transparent 100%
|
|
307
|
+
);
|
|
230
308
|
}
|
|
231
309
|
`;
|
|
232
310
|
}
|
package/src/kempo-styles.css
CHANGED
|
@@ -82,6 +82,51 @@ summary:focus {
|
|
|
82
82
|
display: inline-flex !important;
|
|
83
83
|
flex-wrap: wrap;
|
|
84
84
|
}
|
|
85
|
+
@media (min-width: 1024px){
|
|
86
|
+
.d-d-b { display: block !important }
|
|
87
|
+
.d-d-ib { display: inline-block !important }
|
|
88
|
+
.d-d-g { display: grid !important }
|
|
89
|
+
.d-d-i { display: inline !important }
|
|
90
|
+
.d-d-n { display: none !important }
|
|
91
|
+
.d-d-f {
|
|
92
|
+
display: flex !important;
|
|
93
|
+
flex-wrap: wrap;
|
|
94
|
+
}
|
|
95
|
+
.d-d-if {
|
|
96
|
+
display: inline-flex !important;
|
|
97
|
+
flex-wrap: wrap;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
@media (min-width: 769px) and (max-width: 1023px) {
|
|
101
|
+
.t-d-b { display: block !important }
|
|
102
|
+
.t-d-ib { display: inline-block !important }
|
|
103
|
+
.t-d-g { display: grid !important }
|
|
104
|
+
.t-d-i { display: inline !important }
|
|
105
|
+
.t-d-n { display: none !important }
|
|
106
|
+
.t-d-f {
|
|
107
|
+
display: flex !important;
|
|
108
|
+
flex-wrap: wrap;
|
|
109
|
+
}
|
|
110
|
+
.t-d-if {
|
|
111
|
+
display: inline-flex !important;
|
|
112
|
+
flex-wrap: wrap;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
@media (max-width: 768px) {
|
|
116
|
+
.m-d-b { display: block !important }
|
|
117
|
+
.m-d-ib { display: inline-block !important }
|
|
118
|
+
.m-d-g { display: grid !important }
|
|
119
|
+
.m-d-i { display: inline !important }
|
|
120
|
+
.m-d-n { display: none !important }
|
|
121
|
+
.m-d-f {
|
|
122
|
+
display: flex !important;
|
|
123
|
+
flex-wrap: wrap;
|
|
124
|
+
}
|
|
125
|
+
.m-d-if {
|
|
126
|
+
display: inline-flex !important;
|
|
127
|
+
flex-wrap: wrap;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
85
130
|
.flex, .flex-1 { flex: 1 1 auto }
|
|
86
131
|
.flex-0 { flex: 0 0 }
|
|
87
132
|
.flex-2 { flex: 2 2 auto }
|