diff --git a/build/es6/node_modules/@lrnwebcomponents/a11y-gif-player/lib/a11y-gif-player.haxProperties.json b/build/es6/node_modules/@lrnwebcomponents/a11y-gif-player/lib/a11y-gif-player.haxProperties.json index 3756bbff6c..ab55b7dc1c 100644 --- a/build/es6/node_modules/@lrnwebcomponents/a11y-gif-player/lib/a11y-gif-player.haxProperties.json +++ b/build/es6/node_modules/@lrnwebcomponents/a11y-gif-player/lib/a11y-gif-player.haxProperties.json @@ -77,7 +77,7 @@ ] }, "saveOptions": { - "unsetAttributes": ["element-visible", "t"] + "unsetAttributes": ["__playing", "__gif-loaded", "element-visible", "t"] }, "demoSchema": [ { diff --git a/build/es6/node_modules/@lrnwebcomponents/accent-card/accent-card.js b/build/es6/node_modules/@lrnwebcomponents/accent-card/accent-card.js index 16b59bb9c0..4b22959ad2 100644 --- a/build/es6/node_modules/@lrnwebcomponents/accent-card/accent-card.js +++ b/build/es6/node_modules/@lrnwebcomponents/accent-card/accent-card.js @@ -187,6 +187,7 @@ import{LitElement as t,html as e,css as o}from"../../lit/index.js";import{Simple ); padding-bottom: var(--accent-card-heading-padding-bottom, 0px); margin: 0; + overflow: hidden; } ::slotted(*[slot="heading"]) { font-size: 26px; @@ -198,6 +199,7 @@ import{LitElement as t,html as e,css as o}from"../../lit/index.js";import{Simple } #heading div { flex: 0 0 auto; + width: 100%; } #heading [data-layout-slotname="heading"] { margin: 0; diff --git a/build/es6/node_modules/@lrnwebcomponents/app-hax/lib/rpg-character-toast/rpg-character-toast.js b/build/es6/node_modules/@lrnwebcomponents/app-hax/lib/rpg-character-toast/rpg-character-toast.js index 50fe51002b..6c1c51e3ca 100644 --- a/build/es6/node_modules/@lrnwebcomponents/app-hax/lib/rpg-character-toast/rpg-character-toast.js +++ b/build/es6/node_modules/@lrnwebcomponents/app-hax/lib/rpg-character-toast/rpg-character-toast.js @@ -41,7 +41,7 @@ import{css as t,html as e,unsafeCSS as i}from"../../../../lit/index.js";import{S :host { --simple-toast-bottom: 0px; --simple-toast-bottom-offscreen: -284px; - height: 142px; + height: var(--rpg-character-toast-height, 142px); display: none; width: var(--simple-toast-width, auto); color: var( @@ -66,18 +66,19 @@ import{css as t,html as e,unsafeCSS as i}from"../../../../lit/index.js";import{S width: 64px; margin: 0; padding: 0; + display: var(--rpg-character-toast-display); } .bubble { - height: 142px; + height: var(--rpg-character-toast-height, 142px); display: inline-flex; margin-top: 6px; } .mid { - line-height: 142px; + line-height: var(--rpg-character-toast-height, 142px); background-color: white; background-repeat: repeat-x; - background-image: url("${i(s)}"); - padding: 54px 2px 0 2px; + background-image: var(--rpg-character-toast-mid-background-image, url("${i(s)}")); + padding: var(--rpg-character-toast-mid-padding, 54px 2px 0 2px); display: block; } .message { @@ -104,12 +105,12 @@ import{css as t,html as e,unsafeCSS as i}from"../../../../lit/index.js";import{S cursor: pointer; } .leftedge { - background-image: url("${i(l)}"); + background-image: var(--rpg-character-toast-left-background-image, url("${i(l)}")); width: 20px; background-color: white; } .rightedge { - background-image: url("${i(r)}"); + background-image: var(--rpg-character-toast-right-background-image, url("${i(r)}")); width: 40px; background-color: white; } @@ -118,9 +119,9 @@ import{css as t,html as e,unsafeCSS as i}from"../../../../lit/index.js";import{S :host([dark-mode]) .rightedge { filter: invert(1); } - `]}static get properties(){return{...super.properties,darkMode:{type:Boolean,reflect:!0,attribute:"dark-mode"},fire:{type:Boolean},hat:{type:String},walking:{type:Boolean},speed:{type:Number},opened:{type:Boolean,reflect:!0},awaitingMerlinInput:{type:Boolean,attribute:"awaiting-merlin-input"},merlin:{type:Boolean},future:{type:Boolean},text:{type:String},classStyle:{type:String,attribute:"class-style"},duration:{type:Number},eventCallback:{type:String,attribute:"event-callback"}}}render(){return e`
- - + `]}static get properties(){return{...super.properties,darkMode:{type:Boolean,reflect:!0,attribute:"dark-mode"},fire:{type:Boolean},hat:{type:String},walking:{type:Boolean},speed:{type:Number},opened:{type:Boolean,reflect:!0},awaitingMerlinInput:{type:Boolean,attribute:"awaiting-merlin-input"},merlin:{type:Boolean},future:{type:Boolean},text:{type:String},classStyle:{type:String,attribute:"class-style"},duration:{type:Number},eventCallback:{type:String,attribute:"event-callback"}}}render(){return e`
+ + ${this.future?e`
`}
- + ${this.merlin?e` `} diff --git a/build/es6/node_modules/@lrnwebcomponents/collection-list/collection-list.js b/build/es6/node_modules/@lrnwebcomponents/collection-list/collection-list.js index b859904d78..f3eb3cd180 100644 --- a/build/es6/node_modules/@lrnwebcomponents/collection-list/collection-list.js +++ b/build/es6/node_modules/@lrnwebcomponents/collection-list/collection-list.js @@ -2,7 +2,7 @@ * Copyright 2023 * @license , see License.md for full text. */ -import{LitElement as e,html as r,css as t}from"../../lit/index.js";import"../responsive-utility/responsive-utility.js";class CollectionList extends e{constructor(){super(),this.itemsPerRow=null,this.breakpointSm=900,this.breakpointMd=1200,this.breakpointLg=1500,this.breakpointXl=1800}static get properties(){return{breakpointSm:{type:Number,attribute:"breakpoint-sm"},breakpointMd:{type:Number,attribute:"breakpoint-md"},breakpointLg:{type:Number,attribute:"breakpoint-lg"},breakpointXl:{type:Number,attribute:"breakpoint-xl"},itemsPerRow:{type:String,reflect:!0,attribute:"items-per-row"},responsiveSize:{type:String,reflect:!0,attribute:"responsive-size"}}}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),window.dispatchEvent(new CustomEvent("responsive-element",{detail:{element:this,attribute:"responsive-size",relativeToParent:!1,sm:this.breakpointSm,md:this.breakpointMd,lg:this.breakpointLg,xl:this.breakpointXl}}))}static get styles(){let e=[];return super.styles&&(e=super.styles),[...e,t` +import{LitElement as e,html as r,css as t}from"../../lit/index.js";import"../responsive-utility/responsive-utility.js";class CollectionList extends e{constructor(){super(),this.itemsPerRow=null,this.breakpointSm=900,this.breakpointMd=1200,this.breakpointLg=1500,this.breakpointXl=1800}static get properties(){return{breakpointSm:{type:Number,attribute:"breakpoint-sm"},breakpointMd:{type:Number,attribute:"breakpoint-md"},breakpointLg:{type:Number,attribute:"breakpoint-lg"},breakpointXl:{type:Number,attribute:"breakpoint-xl"},itemsPerRow:{type:String,reflect:!0,attribute:"items-per-row"},responsiveSize:{type:String,reflect:!0,attribute:"responsive-size"}}}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),globalThis.dispatchEvent(new CustomEvent("responsive-element",{detail:{element:this,attribute:"responsive-size",relativeToParent:!1,sm:this.breakpointSm,md:this.breakpointMd,lg:this.breakpointLg,xl:this.breakpointXl}}))}static get styles(){let e=[];return super.styles&&(e=super.styles),[...e,t` :host { display: block; } @@ -64,6 +64,9 @@ import{LitElement as e,html as r,css as t}from"../../lit/index.js";import"../res column-gap: 0.5vw; row-gap: 0.5vw; } + :host([items-per-row="7"][responsive-size="md"]) .wrapper { + grid-template-columns: repeat(5, minmax(125px, 1fr)); + } :host([items-per-row="7"][responsive-size="sm"]) .wrapper { grid-template-columns: repeat(4, minmax(125px, 1fr)); } diff --git a/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-item.js b/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-item.js index 890b14b898..6c0f598a88 100644 --- a/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-item.js +++ b/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-item.js @@ -1,7 +1,6 @@ -import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/simple-icon.js";import{SimpleColors as i}from"../../simple-colors/simple-colors.js";import"../../simple-fields/lib/simple-tags.js";class CollectionItem extends i{static get properties(){return{...super.properties,url:{type:String},image:{type:String},alt:{type:String},icon:{type:String},line1:{type:String},line2:{type:String},line3:{type:String},saturate:{type:Boolean,reflect:!0},tags:{type:String}}}constructor(){super(),this._haxstate=!1,this.tags=null,this.saturate=!1,this.url=null,this.image=null,this.alt=null,this.icon=null,this.line1=null,this.line2=null,this.line3=null,this.accentColor=null}static get haxProperties(){return new URL(`./${this.tag}.haxProperties.json`,import.meta.url).href}static get styles(){return[...super.styles,e` +import{html as i,css as t}from"../../../lit/index.js";import"../../simple-icon/simple-icon.js";import"../../simple-fields/lib/simple-tags.js";import{DDD as e}from"../../d-d-d/d-d-d.js";class CollectionItem extends e{static get properties(){return{...super.properties,url:{type:String},image:{type:String},alt:{type:String},icon:{type:String},line1:{type:String},line2:{type:String},line3:{type:String},saturate:{type:Boolean,reflect:!0},tags:{type:String}}}constructor(){super(),this._haxstate=!1,this.tags=null,this.saturate=!1,this.url=null,this.image=null,this.alt=null,this.icon=null,this.line1=null,this.line2=null,this.line3=null,this.accentColor=null}static get haxProperties(){return new URL(`./${this.tag}.haxProperties.json`,import.meta.url).href}static get styles(){return[...super.styles,t` :host { display: inline-block; - font-family: "Roboto", sans-serif; background-color: var(--simple-colors-default-theme-accent-1); } a { @@ -9,8 +8,9 @@ import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/s color: var(--icon-color); display: block; min-height: 300px; - border: solid 1px #dcdcdc; + border: solid var(--ddd-border-size-1) var(--ddd-theme-polaris-slateMaxLight); transition: 0.3s ease-in-out opacity, 0.3s ease-in-out filter; + box-shadow: var(--ddd-boxShadow-1); } :host([saturate]) a { -webkit-filter: saturate(30%); @@ -19,7 +19,7 @@ import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/s a:focus-within, a:focus, a:hover { - box-shadow: 1px 1px 5px #dcdcdc; + box-shadow: var(--ddd-boxShadow-2); } :host([saturate]) a:focus-within, :host([saturate]) a:focus, @@ -40,11 +40,11 @@ import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/s } simple-tags { - margin-left: 2px; - margin-bottom: -32px; - padding: 0; - height: 32px; - line-height: 32px; + margin-left: var(--ddd-spacing-1); + margin-bottom: calc(-1 * var(--ddd-spacing-8)); + padding: var(--ddd-spacing-0); + height: var(--ddd-spacing-8); + line-height: var(--ddd-spacing-8); width: 100%; z-index: 1; display: flex; @@ -52,56 +52,52 @@ import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/s } .line-1 { - font-size: 28px; text-transform: uppercase; text-align: center; - line-height: 1.4; - padding: 0; - margin: 0; + word-break: break-word; + padding: 0 var(--ddd-spacing-2); } - .line-2 { - font-size: 18px; - max-height: 38px; + max-height: var(--ddd-spacing-13); overflow: hidden; text-align: center; - margin: 0px; - line-height: 1.2; - padding: 4px 4px 4px; - letter-spacing: -0.5px; + word-break: break-word; + padding: 0 var(--ddd-spacing-2); } - .line-3 { - max-height: 24px; - line-height: 24px; - font-size: 14px; - letter-spacing: -0.5px; + max-height: var(--ddd-spacing-6); overflow: hidden; - word-break: break-all; + word-break: break-word; + padding: 0 var(--ddd-spacing-2); } .icon { - background-color: #fff; - border-radius: 50%; + background-color: rgb(255, 255, 255); + border-radius: var(--ddd-radius-circle); position: relative; - bottom: 50px; - border: solid; + bottom: var(--ddd-spacing-8); + border-style: solid; + border-image: initial; border-color: var(--icon-color); - border-width: 5px; - margin: 0 0 -40px 0; - height: 70px; - width: 70px; + border-width: var(--ddd-border-size-3); + margin: 0 0 calc(-1 * var(--ddd-icon-xs)) 0; + height: var(--ddd-spacing-12); + width: var(--ddd-spacing-12); + } + + .no-icon { + margin-bottom: var(--ddd-spacing-6); } simple-icon { fill: var(--icon-color); - --simple-icon-width: 50px; - --simple-icon-height: 50px; - margin: 10px; + --simple-icon-width: var(--ddd-icon-xs); + --simple-icon-height: var(--ddd-icon-xs); + margin: var(--ddd-spacing-2); } .image { - background-color: grey; + background-color: white; background-repeat: no-repeat; background-size: cover; background-position: right center; @@ -109,29 +105,32 @@ import{html as t,css as e}from"../../../lit/index.js";import"../../simple-icon/s height: 150px; opacity: 0.9; transition: 0.3s ease-in-out opacity, 0.3s ease-in-out filter; + border-bottom-style: solid; + border-bottom-color: var(--icon-color); + border-bottom-width: var(--ddd-border-size-3); } - `]}render(){return t` + `]}render(){return i`
- ${this.tags?t``:""}
- ${this.icon?t`
+ ${this.icon?i`
-
`:""} +
`:i`
`}
-
${this.line1}
-
${this.line2}
-
${this.line3}
+
${this.line1}
+
${this.line2}
+
${this.line3}
- `}_handleClick(t){(this._haxstate||this.parentNode&&"lock-items"===this.parentNode.getAttribute("lock-items"))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation())}haxHooks(){return{editModeChanged:"haxeditModeChanged",activeElementChanged:"haxactiveElementChanged"}}haxactiveElementChanged(t,e){e&&(this._haxstate=e)}haxeditModeChanged(t){this._haxstate=t}static get tag(){return"collection-item"}}customElements.define(CollectionItem.tag,CollectionItem);export{CollectionItem}; \ No newline at end of file + `}_handleClick(i){(this._haxstate||this.parentNode&&null!==this.parentNode.getAttribute("lock-items"))&&(i.preventDefault(),i.stopPropagation(),i.stopImmediatePropagation())}haxHooks(){return{editModeChanged:"haxeditModeChanged",activeElementChanged:"haxactiveElementChanged"}}haxactiveElementChanged(i,t){t&&(this._haxstate=t)}haxeditModeChanged(i){this._haxstate=i}static get tag(){return"collection-item"}}customElements.define(CollectionItem.tag,CollectionItem);export{CollectionItem}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-list.haxProperties.json b/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-list.haxProperties.json index 4457f27664..6846f7dfb6 100644 --- a/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-list.haxProperties.json +++ b/build/es6/node_modules/@lrnwebcomponents/collection-list/lib/collection-list.haxProperties.json @@ -76,7 +76,7 @@ ] }, "saveOptions": { - "unsetAttributes": [] + "unsetAttributes": ["responsive-width","responsive-size"] }, "documentation": { "howTo": null, diff --git a/build/es6/node_modules/@lrnwebcomponents/course-design/lib/learning-component-proposed.js b/build/es6/node_modules/@lrnwebcomponents/course-design/lib/learning-component-proposed.js index 47db4fbb37..5a7e657b81 100644 --- a/build/es6/node_modules/@lrnwebcomponents/course-design/lib/learning-component-proposed.js +++ b/build/es6/node_modules/@lrnwebcomponents/course-design/lib/learning-component-proposed.js @@ -5,19 +5,18 @@ import{html as e,css as t}from"../../../lit-element/lit-element.js";import"../../simple-tooltip/simple-tooltip.js";import"../../hax-iconset/lib/simple-hax-iconset.js";import"../../simple-icon/lib/simple-icon-lite.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/lib/simple-icon-button-lite.js";import{SimpleColors as i}from"../../simple-colors/simple-colors.js";import{I18NMixin as n}from"../../i18n-manager/lib/I18NMixin.js";import{DDD as o}from"../../d-d-d/d-d-d.js";export const learningComponentNouns={content:"Content",assessment:"Assessment",quiz:"Quiz",submission:"Submission",lesson:"Lesson",module:"Module",task:"Task",activity:"Activity",project:"Project",practice:"Practice",unit:"Unit",objectives:"Learning Objectives"};export const learningComponentVerbs={connection:"Connection",knowledge:"Did You Know?",strategy:"Learning Strategy",discuss:"Discuss",listen:"Listen",make:"Make",observe:"Observe",present:"Present",read:"Read",reflect:"Reflect",research:"Research",watch:"Watch",write:"Write"};export const learningComponentTypes={...learningComponentVerbs,...learningComponentNouns};export const learningComponentColors={content:"blue-grey",assessment:"red",quiz:"blue",submission:"deep-purple",lesson:"purple",module:"red",task:"blue-grey",activity:"orange",project:"deep-orange",practice:"brown",unit:"light-green",objectives:"indigo",connection:"green",knowledge:"cyan",strategy:"teal",discuss:"blue",listen:"purple",make:"orange",observe:"yellow",present:"light-blue",read:"lime",reflect:"amber",research:"deep-orange",watch:"pink",write:"deep-purple"};export function iconFromPageType(e){switch(e){case"content":return"lrn:page";case"assessment":return"lrn:assessment";case"quiz":return"lrn:quiz";case"submission":return"icons:move-to-inbox";case"lesson":return"hax:lesson";case"module":return"hax:module";case"unit":return"hax:unit";case"task":return"hax:task";case"activity":return"hax:ticket";case"project":return"hax:bulletin-board";case"practice":return"hax:shovel";case"connection":return"courseicons:chem-connection";case"knowledge":return"courseicons:knowledge";case"strategy":case"discuss":case"make":case"observe":case"present":case"read":case"reflect":case"research":case"watch":return"courseicons:strategy";case"listen":return"courseicons:listen";case"write":return"lrn:write"}return"courseicons:learning-objectives"}class LearningComponentProposed extends(n(o)){static get tag(){return"learning-component-proposed"}static get properties(){return{...super.properties,type:{type:String,reflect:!0},subtitle:{type:String},title:{type:String},icon:{type:String},url:{type:String}}}updated(e){super.updated(e),e.has("type")&&this.type&&""!=this.type&&(this.accentColor=learningComponentColors[this.type],this.title=learningComponentTypes[this.type],this.icon=iconFromPageType(this.type))}constructor(){super(),this.icon=null,this.accentColor=null,this.dark=!1,this.type="",this.subtitle=null,this.title=null,this.url=null,this.t={...super.t,readMore:"Read More"}}static get styles(){return[super.styles,t` :host { display: block; - font-family: var(--ddd-font-primary); margin: var(--ddd-spacing-4) 0; } .header { display: flex; align-items: center; - background-color: var( - --header-objectives-bg-color, - var(--simple-colors-default-theme-accent-8, #dc7927) + background-color: var(--ddd-component-learning-component-title-background , + var(--ddd-theme-accent-color, + var(--simple-colors-default-theme-accent-8, #dc7927)) ); padding: var(--ddd-spacing-3); color: var( - --header-font-color, + --ddd-theme-font-color, var(--simple-colors-default-theme-accent-1, #fff) ); } @@ -40,12 +39,11 @@ import{html as e,css as t}from"../../../lit-element/lit-element.js";import"../.. display: flex; align-items: center; text-decoration: none; - color: #000; } simple-icon-lite, simple-icon-button-lite { color: var( - --header-svg-fill-color, + --ddd-app-color-icons, var(--simple-colors-default-theme-grey-1, #fff) ); margin: 0 var(--ddd-spacing-4) 0 var(--ddd-spacing-3); @@ -57,7 +55,6 @@ import{html as e,css as t}from"../../../lit-element/lit-element.js";import"../.. } .content { - font-size: var(--ddd-font-size-3xs); padding: var(--ddd-spacing-5) var(--ddd-spacing-3) var(--ddd-spacing-5) var(--ddd-spacing-6); } diff --git a/build/es6/node_modules/@lrnwebcomponents/d-d-d/d-d-d.js b/build/es6/node_modules/@lrnwebcomponents/d-d-d/d-d-d.js index e33b8b49fc..772dfa1322 100644 --- a/build/es6/node_modules/@lrnwebcomponents/d-d-d/d-d-d.js +++ b/build/es6/node_modules/@lrnwebcomponents/d-d-d/d-d-d.js @@ -3,62 +3,85 @@ * @license Apache-2.0, see License.md for full details. */ import{LitElement as d,css as a}from"../../lit/index.js";import{SimpleColorsSuper as i}from"../simple-colors/simple-colors.js";export const styleGuideTopics={Borders:"Borders",Breakpoints:"Breakpoints",PolarisColors:"PolarisColors",PolarisFunctionalColors:"PolarisFunctionalColors",Gradients:"Gradients",Radius:"Radius",Shadows:"Shadows",Spacing:"Spacing",Typography:"Typography"};export const DDDFonts=["https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap","https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap","https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap"];export const DDDSuper=function(d){return class extends(i(d)){constructor(){super()}loadDDDFonts(d){d.forEach((d=>{const a=document.createElement("link");a.setAttribute("href",d),a.setAttribute("rel","stylesheet"),a.setAttribute("fetchpriority","low"),document.head.appendChild(a)}))}static get styles(){let d=[];return super.styles&&(d=super.styles),[...d,a` - body, html, :root, :host { - /* base polaris colors */ - --ddd-theme-polaris-beaverBlue: #1e407c; - --ddd-theme-polaris-beaver70: rgba(30, 64, 124, 0.7); - --ddd-theme-polaris-beaver80: rgba(30, 64, 124, 0.8); - --ddd-theme-polaris-landgrantBrown: #6a3028; - --ddd-theme-polaris-nittanyNavy: #001e44; - --ddd-theme-polaris-navy40: rgba(0, 30, 68, 0.4); - --ddd-theme-polaris-navy60: rgba(0, 30, 68, 0.60); - --ddd-theme-polaris-navy65: rgba(0, 30, 68, 0.65); - --ddd-theme-polaris-navy70: rgba(0, 30, 68, 0.70); - --ddd-theme-polaris-navy80: rgba(0, 30, 68, 0.8); - --ddd-theme-polaris-potentialMidnight: #000321; - --ddd-theme-polaris-potential0: rgba(0, 3, 33, 0); - --ddd-theme-polaris-potential50: rgba(0, 3, 33, 0.5); - --ddd-theme-polaris-potential70: rgba(0, 3, 33, 0.7); - --ddd-theme-polaris-potential75: rgba(0, 3, 33, 0.75); - --ddd-theme-polaris-pughBlue: #96bee6; - --ddd-theme-polaris-coalyGray: #262626; - --ddd-theme-polaris-coaly45: rgba(38, 38, 38, 0.45); - --ddd-theme-polaris-coaly60: rgba(38, 38, 38, 0.6); - --ddd-theme-polaris-coaly75: rgba(38, 38, 38, 0.75); - --ddd-theme-polaris-coaly90: rgba(38, 38, 38, 0.9); - --ddd-theme-polaris-keystoneYellow: #ffd100; - --ddd-theme-polaris-slateGray: #314d64; - --ddd-theme-polaris-slateLight: #ccdae6; - --ddd-theme-polaris-slateMaxLight: #eef3f7; - --ddd-theme-polaris-skyBlue: #009cde; - --ddd-theme-polaris-skyLight: #ccf0ff; - --ddd-theme-polaris-skyMaxLight: #e6f7ff; - --ddd-theme-polaris-limestoneGray: #a2aaad; - --ddd-theme-polaris-limestoneLight: #e4e5e7; - --ddd-theme-polaris-limestoneMaxLight: #f2f2f4; - --ddd-theme-polaris-white: #ffffff; - --ddd-theme-polaris-shrineLight: #f7f2ee; - --ddd-theme-polaris-shrineMaxLight: #fdfbf5; - --ddd-theme-polaris-creekTeal: #3ea39e; - --ddd-theme-polaris-creekLight: #cfeceb; - --ddd-theme-polaris-creekMaxLight: #edf8f7; - --ddd-theme-polaris-shrineTan: #b88965; - --ddd-theme-polaris-roarGolden: #bf8226; - --ddd-theme-polaris-roarLight: #f9eddc; - --ddd-theme-polaris-roarMaxlight: #fffaf2; - --ddd-theme-polaris-forestGreen: #4a7729; - --ddd-theme-polaris-athertonViolet: #ac8dce; - --ddd-theme-polaris-original87Pink: #bc204b; - --ddd-theme-polaris-discoveryCoral: #f2665e; - --ddd-theme-polaris-futureLime: #99cc00; - --ddd-theme-polaris-wonderPurple: #491d70; - --ddd-theme-polaris-inventOrange: #e98300; - --ddd-theme-polaris-opportunityGreen: #008755; - --ddd-theme-polaris-accent: #96bee6; + body, + html, + :root, + :host { + /* global override font styles for light-dom content */ + --ddd-theme-body-font-size: var(--ddd-font-size-xxs); + --ddd-theme-h1-font-size: var(--ddd-font-size-l); + --ddd-theme-h2-font-size: var(--ddd-font-size-m); + --ddd-theme-h3-font-size: var(--ddd-font-size-ms); + --ddd-theme-h4-font-size: var(--ddd-font-size-s); + --ddd-theme-h5-font-size: var(--ddd-font-size-xs); + --ddd-theme-h6-font-size: var(--ddd-font-size-xxs); + --ddd-font-size-4xs: 16px; + --ddd-font-size-3xs: 18px; /* body default */ + --ddd-font-size-xxs: 20px; /* h6 */ + --ddd-font-size-xs: 22px; /* h5 */ + --ddd-font-size-s: 24px; /* h4 */ + --ddd-font-size-ms: 28px; /* h3 */ + --ddd-font-size-m: 32px; /* h2 */ + --ddd-font-size-ml: 36px; + --ddd-font-size-l: 40px; /* h1 */ + --ddd-font-size-xl: 48px; + --ddd-font-size-xxl: 56px; + --ddd-font-size-3xl: 64px; + --ddd-font-size-4xl: 72px; + /* base polaris colors */ + --ddd-theme-polaris-beaverBlue: #1e407c; + --ddd-theme-polaris-beaver70: rgba(30, 64, 124, 0.7); + --ddd-theme-polaris-beaver80: rgba(30, 64, 124, 0.8); + --ddd-theme-polaris-landgrantBrown: #6a3028; + --ddd-theme-polaris-nittanyNavy: #001e44; + --ddd-theme-polaris-navy40: rgba(0, 30, 68, 0.4); + --ddd-theme-polaris-navy60: rgba(0, 30, 68, 0.6); + --ddd-theme-polaris-navy65: rgba(0, 30, 68, 0.65); + --ddd-theme-polaris-navy70: rgba(0, 30, 68, 0.7); + --ddd-theme-polaris-navy80: rgba(0, 30, 68, 0.8); + --ddd-theme-polaris-potentialMidnight: #000321; + --ddd-theme-polaris-potential0: rgba(0, 3, 33, 0); + --ddd-theme-polaris-potential50: rgba(0, 3, 33, 0.5); + --ddd-theme-polaris-potential70: rgba(0, 3, 33, 0.7); + --ddd-theme-polaris-potential75: rgba(0, 3, 33, 0.75); + --ddd-theme-polaris-pughBlue: #96bee6; + --ddd-theme-polaris-coalyGray: #262626; + --ddd-theme-polaris-coaly45: rgba(38, 38, 38, 0.45); + --ddd-theme-polaris-coaly60: rgba(38, 38, 38, 0.6); + --ddd-theme-polaris-coaly75: rgba(38, 38, 38, 0.75); + --ddd-theme-polaris-coaly90: rgba(38, 38, 38, 0.9); + --ddd-theme-polaris-keystoneYellow: #ffd100; + --ddd-theme-polaris-slateGray: #314d64; + --ddd-theme-polaris-slateLight: #ccdae6; + --ddd-theme-polaris-slateMaxLight: #eef3f7; + --ddd-theme-polaris-skyBlue: #009cde; + --ddd-theme-polaris-skyLight: #ccf0ff; + --ddd-theme-polaris-skyMaxLight: #e6f7ff; + --ddd-theme-polaris-limestoneGray: #a2aaad; + --ddd-theme-polaris-limestoneLight: #e4e5e7; + --ddd-theme-polaris-limestoneMaxLight: #f2f2f4; + --ddd-theme-polaris-white: #ffffff; + --ddd-theme-polaris-shrineLight: #f7f2ee; + --ddd-theme-polaris-shrineMaxLight: #fdfbf5; + --ddd-theme-polaris-creekTeal: #3ea39e; + --ddd-theme-polaris-creekLight: #cfeceb; + --ddd-theme-polaris-creekMaxLight: #edf8f7; + --ddd-theme-polaris-shrineTan: #b88965; + --ddd-theme-polaris-roarGolden: #bf8226; + --ddd-theme-polaris-roarLight: #f9eddc; + --ddd-theme-polaris-roarMaxlight: #fffaf2; + --ddd-theme-polaris-forestGreen: #4a7729; + --ddd-theme-polaris-athertonViolet: #ac8dce; + --ddd-theme-polaris-original87Pink: #bc204b; + --ddd-theme-polaris-discoveryCoral: #f2665e; + --ddd-theme-polaris-futureLime: #99cc00; + --ddd-theme-polaris-wonderPurple: #491d70; + --ddd-theme-polaris-inventOrange: #e98300; + --ddd-theme-polaris-opportunityGreen: #008755; + --ddd-theme-polaris-accent: #96bee6; - - /* + /* base colors, cannot be modified by user; SimpleColors hijacks this Theme level color, components pick up hues of theme color @@ -66,966 +89,2423 @@ import{LitElement as d,css as a}from"../../lit/index.js";import{SimpleColorsSupe User can override these colors with their own theme colors */ - /* functional colors */ - --ddd-theme-polaris-link: #005fa9; - --ddd-theme-polaris-link80: rgba(0, 95, 169, 0.8); - --ddd-theme-polaris-linkLight: #cce9ff; - --ddd-theme-polaris-disabled: #f4f4f4; - --ddd-theme-polaris-error: #5f2120; - --ddd-theme-polaris-errorLight: #fdeded; - --ddd-theme-polaris-warning: #663c00; - --ddd-theme-polaris-warningLight: #fff4e5; - --ddd-theme-polaris-info: #014361; - --ddd-theme-polaris-infoLight: #e5f6fd; - --ddd-theme-polaris-success: #1e4620; - --ddd-theme-polaris-successLight: #edf7ed; - --ddd-theme-polaris-alertImmediate: #f8d3de; - --ddd-theme-polaris-alertUrgent: #fff6cc; - --ddd-theme-polaris-alertAllClear: #f2ffcc; - --ddd-theme-polaris-alertNonEmergency: #e6f7ff; + /* functional colors */ + --ddd-theme-polaris-link: #005fa9; + --ddd-theme-polaris-link80: rgba(0, 95, 169, 0.8); + --ddd-theme-polaris-linkLight: #cce9ff; + --ddd-theme-polaris-disabled: #f4f4f4; + --ddd-theme-polaris-error: #5f2120; + --ddd-theme-polaris-errorLight: #fdeded; + --ddd-theme-polaris-warning: #663c00; + --ddd-theme-polaris-warningLight: #fff4e5; + --ddd-theme-polaris-info: #014361; + --ddd-theme-polaris-infoLight: #e5f6fd; + --ddd-theme-polaris-success: #1e4620; + --ddd-theme-polaris-successLight: #edf7ed; + --ddd-theme-polaris-alertImmediate: #f8d3de; + --ddd-theme-polaris-alertUrgent: #fff6cc; + --ddd-theme-polaris-alertAllClear: #f2ffcc; + --ddd-theme-polaris-alertNonEmergency: #e6f7ff; - --ddd-theme-polaris-background: #eff2f5; + --ddd-theme-polaris-background: #eff2f5; - /* simplecolors needs to be included -> */ + /* simplecolors needs to be included -> */ - /* + /* Come back to grid in style guide - > decide number of columns based on container breakpoints */ - /*fonts*/ - --ddd-font-primary: "Roboto", "Franklin Gothic Medium", Tahoma, sans-serif; - --ddd-font-primary-regular: 400; /* default weight for body */ - --ddd-font-primary-medium: 500; - --ddd-font-primary-bold: 700; /* default weight for headers */ - --ddd-font-primary-black: 900; + /*fonts*/ + --ddd-font-primary: "Roboto", "Franklin Gothic Medium", Tahoma, + sans-serif; + --ddd-font-primary-regular: 400; /* default weight for body */ + --ddd-font-primary-medium: 500; + --ddd-font-primary-bold: 700; /* default weight for headers */ + --ddd-font-primary-black: 900; + + --ddd-font-secondary: "Roboto Slab", serif; + --ddd-font-secondary-bold: 700; + + --ddd-font-navigation: "Roboto Condensed", sans-serif; /* navigation font */ + --ddd-font-navigation-light: 300; + --ddd-font-navigation-regular: 400; + --ddd-font-navigation-bold: 700; + + /* font sizes */ + --ddd-font-size-4xs: 16px; + --ddd-font-size-3xs: 18px; /* body default */ + --ddd-font-size-xxs: 20px; /* h6 */ + --ddd-font-size-xs: 22px; /* h5 */ + --ddd-font-size-s: 24px; /* h4 */ + --ddd-font-size-ms: 28px; /* h3 */ + --ddd-font-size-m: 32px; /* h2 */ + --ddd-font-size-ml: 36px; + --ddd-font-size-l: 40px; /* h1 */ + --ddd-font-size-xl: 48px; + --ddd-font-size-xxl: 56px; + --ddd-font-size-3xl: 64px; + --ddd-font-size-4xl: 72px; + + /* letter spacing */ + --ddd-ls-16-sm: 0.08px; + --ddd-ls-18-sm: 0.09px; + --ddd-ls-20-sm: 0.1px; + --ddd-ls-22-sm: 0.11px; + --ddd-ls-24-sm: 0.12px; + --ddd-ls-28-sm: 0.14px; + --ddd-ls-32-sm: 0.16px; + --ddd-ls-36-sm: 0.18px; + --ddd-ls-40-sm: 0.2px; + --ddd-ls-48-sm: 0.24px; + --ddd-ls-56-sm: 0.28px; + --ddd-ls-64-sm: 0.32px; + --ddd-ls-72-sm: 0.36px; + --ddd-ls-16-lg: 0.24px; + --ddd-ls-18-lg: 0.27px; + --ddd-ls-20-lg: 0.3px; + --ddd-ls-22-lg: 0.33px; + --ddd-ls-24-lg: 0.36px; + --ddd-ls-28-lg: 0.42px; + --ddd-ls-32-lg: 0.48px; + --ddd-ls-36-lg: 0.54px; + --ddd-ls-40-lg: 0.6px; + --ddd-ls-48-lg: 0.72px; + --ddd-ls-56-lg: 0.84px; + --ddd-ls-64-lg: 0.96px; + --ddd-ls-72-lg: 1.08px; + + /* line height */ + --ddd-lh-120: 120%; + --ddd-lh-140: 140%; + --ddd-lh-150: 150%; + + /* spacing */ + --ddd-spacing-0: 0px; + --ddd-spacing-1: 4px; /* body default */ + --ddd-spacing-2: 8px; + --ddd-spacing-3: 12px; /* h6 */ + --ddd-spacing-4: 16px; /* h5 */ + --ddd-spacing-5: 20px; /* h4 */ + --ddd-spacing-6: 24px; /* h3 */ + --ddd-spacing-7: 28px; /* h2 */ + --ddd-spacing-8: 32px; /* h1 */ + --ddd-spacing-9: 36px; + --ddd-spacing-10: 40px; + --ddd-spacing-11: 44px; + --ddd-spacing-12: 48px; + --ddd-spacing-13: 52px; + --ddd-spacing-14: 56px; + --ddd-spacing-15: 60px; + --ddd-spacing-16: 64px; + --ddd-spacing-17: 68px; + --ddd-spacing-18: 72px; + --ddd-spacing-19: 76px; + --ddd-spacing-20: 80px; + --ddd-spacing-21: 84px; + --ddd-spacing-22: 88px; + --ddd-spacing-23: 92px; + --ddd-spacing-24: 96px; + --ddd-spacing-25: 100px; + --ddd-spacing-26: 104px; + --ddd-spacing-27: 108px; + --ddd-spacing-28: 112px; + --ddd-spacing-29: 116px; + --ddd-spacing-30: 120px; - --ddd-font-secondary: "Roboto Slab", serif; - --ddd-font-secondary-bold: 700; + /* borders */ + --ddd-border-xs: 1px solid var(--ddd-theme-polaris-limestoneLight); + --ddd-border-sm: 2px solid var(--ddd-theme-polaris-limestoneLight); + --ddd-border-md: 3px solid var(--ddd-theme-polaris-limestoneLight); + --ddd-border-lg: 4px solid var(--ddd-theme-polaris-limestoneLight); - --ddd-font-navigation: "Roboto Condensed", sans-serif; /* navigation font */ - --ddd-font-navigation-light: 300; - --ddd-font-navigation-regular: 400; - --ddd-font-navigation-bold: 700; + /* shadows */ + --ddd-boxShadow-0: 0px 0px 0px 0px rgba(0, 0, 0, 0); + --ddd-boxShadow-xs: rgba(0, 3, 33, 0.063) 0px 4px 8px 0px; + --ddd-boxShadow-sm: rgba(0, 3, 33, 0.063) 0px 8px 16px 0px; + --ddd-boxShadow-md: rgba(0, 3, 33, 0.063) 0px 12px 24px 0px; + --ddd-boxShadow-lg: rgba(0, 3, 33, 0.063) 0px 16px 32px 0px; - /* font sizes */ - --ddd-font-size-4xs: 16px; - --ddd-font-size-3xs: 18px; /* body default */ - --ddd-font-size-xxs: 20px; /* h6 */ - --ddd-font-size-xs: 22px; /* h5 */ - --ddd-font-size-s: 24px; /* h4 */ - --ddd-font-size-ms: 28px; /* h3 */ - --ddd-font-size-m: 32px; /* h2 */ - --ddd-font-size-ml: 36px; - --ddd-font-size-l: 40px; /* h1 */ - --ddd-font-size-xl: 48px; - --ddd-font-size-xxl: 56px; - --ddd-font-size-3xl: 64px; - --ddd-font-size-4xl: 72px; + --ddd-textShadow-0: 0px 0px 0px rgba(0, 0, 0, 0); /* No shadow */ + --ddd-textShadow-xs: rgba(0, 3, 33, 0.063) 0px 2px 4px; + --ddd-textShadow-sm: rgba(0, 3, 33, 0.063) 0px 4px 8px; + --ddd-textShadow-md: rgba(0, 3, 33, 0.063) 0px 6px 12px; + --ddd-textShadow-lg: rgba(0, 3, 33, 0.063) 0px 8px 16px; - /* letter spacing */ - --ddd-ls-16-sm: 0.08px; - --ddd-ls-18-sm: 0.09px; - --ddd-ls-20-sm: 0.1px; - --ddd-ls-22-sm: 0.11px; - --ddd-ls-24-sm: 0.12px; - --ddd-ls-28-sm: 0.14px; - --ddd-ls-32-sm: 0.16px; - --ddd-ls-36-sm: 0.18px; - --ddd-ls-40-sm: 0.2px; - --ddd-ls-48-sm: 0.24px; - --ddd-ls-56-sm: 0.28px; - --ddd-ls-64-sm: 0.32px; - --ddd-ls-72-sm: 0.36px; - --ddd-ls-16-lg: 0.24px; - --ddd-ls-18-lg: 0.27px; - --ddd-ls-20-lg: 0.3px; - --ddd-ls-22-lg: 0.33px; - --ddd-ls-24-lg: 0.36px; - --ddd-ls-28-lg: 0.42px; - --ddd-ls-32-lg: 0.48px; - --ddd-ls-36-lg: 0.54px; - --ddd-ls-40-lg: 0.6px; - --ddd-ls-48-lg: 0.72px; - --ddd-ls-56-lg: 0.84px; - --ddd-ls-64-lg: 0.96px; - --ddd-ls-72-lg: 1.08px; + /* breakpoints */ + --ddd-breakpoint-sm: 360px; + --ddd-breakpoint-md: 768px; + --ddd-breakpoint-lg: 1080px; + --ddd-breakpoint-xl: 1440px; - /* line height */ - --ddd-lh-120: 120%; - --ddd-lh-140: 140%; - --ddd-lh-150: 150%; - - /* spacing */ - --ddd-spacing-0: 0px; - --ddd-spacing-1: 4px; /* body default */ - --ddd-spacing-2: 8px; - --ddd-spacing-3: 12px; /* h6 */ - --ddd-spacing-4: 16px; /* h5 */ - --ddd-spacing-5: 20px; /* h4 */ - --ddd-spacing-6: 24px; /* h3 */ - --ddd-spacing-7: 28px; /* h2 */ - --ddd-spacing-8: 32px; /* h1 */ - --ddd-spacing-9: 36px; - --ddd-spacing-10: 40px; - --ddd-spacing-11: 44px; - --ddd-spacing-12: 48px; - --ddd-spacing-13: 52px; - --ddd-spacing-14: 56px; - --ddd-spacing-15: 60px; - --ddd-spacing-16: 64px; - --ddd-spacing-17: 68px; - --ddd-spacing-18: 72px; - --ddd-spacing-19: 76px; - --ddd-spacing-20: 80px; - --ddd-spacing-21: 84px; - --ddd-spacing-22: 88px; - --ddd-spacing-23: 92px; - --ddd-spacing-24: 96px; - --ddd-spacing-25: 100px; - --ddd-spacing-26: 104px; - --ddd-spacing-27: 108px; - --ddd-spacing-28: 112px; - --ddd-spacing-29: 116px; - --ddd-spacing-30: 120px; + /* Radius */ + --ddd-radius-0: 0px; + --ddd-radius-xs: 4px; + --ddd-radius-sm: 8px; + --ddd-radius-md: 12px; + --ddd-radius-lg: 16px; + --ddd-radius-xl: 20px; + --ddd-radius-rounded: 100px; + --ddd-radius-circle: 100%; - /* borders */ - --ddd-border-size-0: 0px; - --ddd-border-size-1: 1px; - --ddd-border-size-2: 2px; - --ddd-border-size-3: 3px; - --ddd-border-size-4: 4px; + /* Gradients */ + --ddd-theme-polaris-gradient-navBar: linear-gradient( + 90deg, + rgb(0, 30, 68) 0%, + rgb(0, 30, 68) 31%, + rgb(30, 64, 124) 76%, + rgb(0, 3, 33) 100% + ); + --ddd-theme-polaris-gradient-footer: linear-gradient( + rgb(30, 64, 124) 0%, + rgb(0, 30, 68) 65%, + rgb(0, 30, 68) 100% + ); + --ddd-theme-polaris-gradient-newsFeature: linear-gradient( + 360deg, + rgb(30, 64, 124) 20%, + rgb(0, 156, 222) 100% + ); + --ddd-theme-polaris-gradient-buttons: linear-gradient( + rgb(0, 156, 222) 0%, + rgb(30, 64, 124) 85% + ); + --ddd-theme-polaris-gradient-hero: linear-gradient( + 360deg, + rgba(0, 30, 68, 0.8) 0%, + rgba(0, 30, 68, 0.4) 50%, + rgba(0, 3, 33, 0) 100% + ); + --ddd-theme-polaris-gradient-hero2: linear-gradient( + 360deg, + rgb(0, 30, 68) 0%, + rgba(0, 30, 68, 0.4) 50%, + rgba(0, 3, 33, 0) 100% + ); - /* shadows */ - --ddd-boxShadow-0: 0px 0px 0px 0px rgba(0, 0, 0, 0); - --ddd-boxShadow-1: rgba(0, 3, 33, 0.063) 0px 4px 8px 0px; - --ddd-boxShadow-2: rgba(0, 3, 33, 0.063) 0px 8px 16px 0px; - --ddd-boxShadow-3: rgba(0, 3, 33, 0.063) 0px 12px 24px 0px; - --ddd-boxShadow-4: rgba(0, 3, 33, 0.063) 0px 16px 32px 0px; + --ddd-icon-xxs: 24px; + --ddd-icon-xs: 32px; + --ddd-icon-sm: 40px; + --ddd-icon-md: 48px; + --ddd-icon-lg: 56px; + --ddd-icon-xl: 64px; + --ddd-icon-2xl: 72px; + --ddd-icon-3xl: 84px; + --ddd-icon-4xl: 96px; - --ddd-textShadow-0: 0px 0px 0px rgba(0, 0, 0, 0); /* No shadow */ - --ddd-textShadow-1: rgba(0, 3, 33, 0.063) 0px 2px 4px; - --ddd-textShadow-2: rgba(0, 3, 33, 0.063) 0px 4px 8px; - --ddd-textShadow-3: rgba(0, 3, 33, 0.063) 0px 6px 12px; - --ddd-textShadow-4: rgba(0, 3, 33, 0.063) 0px 8px 16px; + /* borrowed from base styling */ + scroll-behavior: smooth; + } + /* border & shadows */ + .b-0 { + border: none; + } + .b-xs { + border: var(--ddd-border-xs); + } + .b-sm { + border: var(--ddd-border-sm); + } + .b-md { + border: ; + } + .b-lg { + border: ; + } + .bt-0 { + border-top: none; + } + .bt-xs { + border-top: var(--ddd-border-xs); + } + .bt-sm { + border-top: var(--ddd-border-sm); + } + .bt-md { + border-top: 3px solid var(--ddd-theme-polaris-limestoneLight); + } + .bt-lg { + border-top: 4px solid var(--ddd-theme-polaris-limestoneLight); + } + .br-0 { + border-right: none; + } + .br-xs { + border-right: var(--ddd-border-xs); + } + .br-sm { + border-right: var(--ddd-border-sm); + } + .br-md { + border-right: 3px solid var(--ddd-theme-polaris-limestoneLight); + } + .br-lg { + border-right: 4px solid var(--ddd-theme-polaris-limestoneLight); + } + .bb-0 { + border-bottom: none; + } + .bb-xs { + border-bottom: var(--ddd-border-xs); + } + .bb-sm { + border-bottom: var(--ddd-border-sm); + } + .bb-md { + border-bottom: 3px solid var(--ddd-theme-polaris-limestoneLight); + } + .bb-lg { + border-bottom: 4px solid var(--ddd-theme-polaris-limestoneLight); + } + .bl-0 { + border-left: none; + } + .bl-xs { + border-left: var(--ddd-border-xs); + } + .bl-sm { + border-left: var(--ddd-border-sm); + } + .bl-md { + border-left: 3px solid var(--ddd-theme-polaris-limestoneLight); + } + .bl-lg { + border-left: 4px solid var(--ddd-theme-polaris-limestoneLight); + } - /* breakpoints */ - --ddd-breakpoint-sm: 360px; - --ddd-breakpoint-md: 768px; - --ddd-breakpoint-lg: 1080px; - --ddd-breakpoint-xl: 1440px; + /* margin & padding */ + .m-auto { + margin: auto; + } + .m-0 { + margin: var(--ddd-spacing-0); + } + .m-1 { + margin: var(--ddd-spacing-1); + } + .m-2 { + margin: var(--ddd-spacing-2); + } + .m-3 { + margin: var(--ddd-spacing-3); + } + .m-4 { + margin: var(--ddd-spacing-4); + } + .m-5 { + margin: var(--ddd-spacing-5); + } + .m-6 { + margin: var(--ddd-spacing-6); + } + .m-7 { + margin: var(--ddd-spacing-7); + } + .m-8 { + margin: var(--ddd-spacing-8); + } + .m-9 { + margin: var(--ddd-spacing-9); + } + .m-10 { + margin: var(--ddd-spacing-10); + } + .m-11 { + margin: var(--ddd-spacing-11); + } + .m-12 { + margin: var(--ddd-spacing-12); + } + .m-13 { + margin: var(--ddd-spacing-13); + } + .m-14 { + margin: var(--ddd-spacing-14); + } + .m-15 { + margin: var(--ddd-spacing-15); + } + .m-16 { + margin: var(--ddd-spacing-16); + } + .m-17 { + margin: var(--ddd-spacing-17); + } + .m-18 { + margin: var(--ddd-spacing-18); + } + .m-19 { + margin: var(--ddd-spacing-19); + } + .m-20 { + margin: var(--ddd-spacing-20); + } + .m-21 { + margin: var(--ddd-spacing-21); + } + .m-22 { + margin: var(--ddd-spacing-22); + } + .m-23 { + margin: var(--ddd-spacing-23); + } + .m-24 { + margin: var(--ddd-spacing-24); + } + .m-25 { + margin: var(--ddd-spacing-25); + } + .m-26 { + margin: var(--ddd-spacing-26); + } + .m-27 { + margin: var(--ddd-spacing-27); + } + .m-28 { + margin: var(--ddd-spacing-28); + } + .m-29 { + margin: var(--ddd-spacing-29); + } + .m-30 { + margin: var(--ddd-spacing-30); + } + .mt-auto { + margin-top: auto; + } + .mt-0 { + margin-top: var(--ddd-spacing-0); + } + .mt-1 { + margin-top: var(--ddd-spacing-1); + } + .mt-2 { + margin-top: var(--ddd-spacing-2); + } + .mt-3 { + margin-top: var(--ddd-spacing-3); + } + .mt-4 { + margin-top: var(--ddd-spacing-4); + } + .mt-5 { + margin-top: var(--ddd-spacing-5); + } + .mt-6 { + margin-top: var(--ddd-spacing-6); + } + .mt-7 { + margin-top: var(--ddd-spacing-7); + } + .mt-8 { + margin-top: var(--ddd-spacing-8); + } + .mt-9 { + margin-top: var(--ddd-spacing-9); + } + .mt-10 { + margin-top: var(--ddd-spacing-10); + } + .mt-11 { + margin-top: var(--ddd-spacing-11); + } + .mt-12 { + margin-top: var(--ddd-spacing-12); + } + .mt-13 { + margin-top: var(--ddd-spacing-13); + } + .mt-14 { + margin-top: var(--ddd-spacing-14); + } + .mt-15 { + margin-top: var(--ddd-spacing-15); + } + .mt-16 { + margin-top: var(--ddd-spacing-16); + } + .mt-17 { + margin-top: var(--ddd-spacing-17); + } + .mt-18 { + margin-top: var(--ddd-spacing-18); + } + .mt-19 { + margin-top: var(--ddd-spacing-19); + } + .mt-20 { + margin-top: var(--ddd-spacing-20); + } + .mt-21 { + margin-top: var(--ddd-spacing-21); + } + .mt-22 { + margin-top: var(--ddd-spacing-22); + } + .mt-23 { + margin-top: var(--ddd-spacing-23); + } + .mt-24 { + margin-top: var(--ddd-spacing-24); + } + .mt-25 { + margin-top: var(--ddd-spacing-25); + } + .mt-26 { + margin-top: var(--ddd-spacing-26); + } + .mt-27 { + margin-top: var(--ddd-spacing-27); + } + .mt-28 { + margin-top: var(--ddd-spacing-28); + } + .mt-29 { + margin-top: var(--ddd-spacing-29); + } + .mt-30 { + margin-top: var(--ddd-spacing-30); + } + .mb-auto { + margin-bottom: auto; + } + .mb-0 { + margin-bottom: var(--ddd-spacing-0); + } + .mb-1 { + margin-bottom: var(--ddd-spacing-1); + } + .mb-2 { + margin-bottom: var(--ddd-spacing-2); + } + .mb-3 { + margin-bottom: var(--ddd-spacing-3); + } + .mb-4 { + margin-bottom: var(--ddd-spacing-4); + } + .mb-5 { + margin-bottom: var(--ddd-spacing-5); + } + .mb-6 { + margin-bottom: var(--ddd-spacing-6); + } + .mb-7 { + margin-bottom: var(--ddd-spacing-7); + } + .mb-8 { + margin-bottom: var(--ddd-spacing-8); + } + .mb-9 { + margin-bottom: var(--ddd-spacing-9); + } + .mb-10 { + margin-bottom: var(--ddd-spacing-10); + } + .mb-11 { + margin-bottom: var(--ddd-spacing-11); + } + .mb-12 { + margin-bottom: var(--ddd-spacing-12); + } + .mb-13 { + margin-bottom: var(--ddd-spacing-13); + } + .mb-14 { + margin-bottom: var(--ddd-spacing-14); + } + .mb-15 { + margin-bottom: var(--ddd-spacing-15); + } + .mb-16 { + margin-bottom: var(--ddd-spacing-16); + } + .mb-17 { + margin-bottom: var(--ddd-spacing-17); + } + .mb-18 { + margin-bottom: var(--ddd-spacing-18); + } + .mb-19 { + margin-bottom: var(--ddd-spacing-19); + } + .mb-20 { + margin-bottom: var(--ddd-spacing-20); + } + .mb-21 { + margin-bottom: var(--ddd-spacing-21); + } + .mb-22 { + margin-bottom: var(--ddd-spacing-22); + } + .mb-23 { + margin-bottom: var(--ddd-spacing-23); + } + .mb-24 { + margin-bottom: var(--ddd-spacing-24); + } + .mb-25 { + margin-bottom: var(--ddd-spacing-25); + } + .mb-26 { + margin-bottom: var(--ddd-spacing-26); + } + .mb-27 { + margin-bottom: var(--ddd-spacing-27); + } + .mb-28 { + margin-bottom: var(--ddd-spacing-28); + } + .mb-29 { + margin-bottom: var(--ddd-spacing-29); + } + .mb-30 { + margin-bottom: var(--ddd-spacing-30); + } + .ml-auto { + margin-left: auto; + } + .ml-0 { + margin-left: var(--ddd-spacing-0); + } + .ml-1 { + margin-left: var(--ddd-spacing-1); + } + .ml-2 { + margin-left: var(--ddd-spacing-2); + } + .ml-3 { + margin-left: var(--ddd-spacing-3); + } + .ml-4 { + margin-left: var(--ddd-spacing-4); + } + .ml-5 { + margin-left: var(--ddd-spacing-5); + } + .ml-6 { + margin-left: var(--ddd-spacing-6); + } + .ml-7 { + margin-left: var(--ddd-spacing-7); + } + .ml-8 { + margin-left: var(--ddd-spacing-8); + } + .ml-9 { + margin-left: var(--ddd-spacing-9); + } + .ml-10 { + margin-left: var(--ddd-spacing-10); + } + .ml-11 { + margin-left: var(--ddd-spacing-11); + } + .ml-12 { + margin-left: var(--ddd-spacing-12); + } + .ml-13 { + margin-left: var(--ddd-spacing-13); + } + .ml-14 { + margin-left: var(--ddd-spacing-14); + } + .ml-15 { + margin-left: var(--ddd-spacing-15); + } + .ml-16 { + margin-left: var(--ddd-spacing-16); + } + .ml-17 { + margin-left: var(--ddd-spacing-17); + } + .ml-18 { + margin-left: var(--ddd-spacing-18); + } + .ml-19 { + margin-left: var(--ddd-spacing-19); + } + .ml-20 { + margin-left: var(--ddd-spacing-20); + } + .ml-21 { + margin-left: var(--ddd-spacing-21); + } + .ml-22 { + margin-left: var(--ddd-spacing-22); + } + .ml-23 { + margin-left: var(--ddd-spacing-23); + } + .ml-24 { + margin-left: var(--ddd-spacing-24); + } + .ml-25 { + margin-left: var(--ddd-spacing-25); + } + .ml-26 { + margin-left: var(--ddd-spacing-26); + } + .ml-27 { + margin-left: var(--ddd-spacing-27); + } + .ml-28 { + margin-left: var(--ddd-spacing-28); + } + .ml-29 { + margin-left: var(--ddd-spacing-29); + } + .ml-30 { + margin-left: var(--ddd-spacing-30); + } + .mr-auto { + margin-right: auto; + } + .mr-0 { + margin-right: var(--ddd-spacing-0); + } + .mr-1 { + margin-right: var(--ddd-spacing-1); + } + .mr-2 { + margin-right: var(--ddd-spacing-2); + } + .mr-3 { + margin-right: var(--ddd-spacing-3); + } + .mr-4 { + margin-right: var(--ddd-spacing-4); + } + .mr-5 { + margin-right: var(--ddd-spacing-5); + } + .mr-6 { + margin-right: var(--ddd-spacing-6); + } + .mr-7 { + margin-right: var(--ddd-spacing-7); + } + .mr-8 { + margin-right: var(--ddd-spacing-8); + } + .mr-9 { + margin-right: var(--ddd-spacing-9); + } + .mr-10 { + margin-right: var(--ddd-spacing-10); + } + .mr-11 { + margin-right: var(--ddd-spacing-11); + } + .mr-12 { + margin-right: var(--ddd-spacing-12); + } + .mr-13 { + margin-right: var(--ddd-spacing-13); + } + .mr-14 { + margin-right: var(--ddd-spacing-14); + } + .mr-15 { + margin-right: var(--ddd-spacing-15); + } + .mr-16 { + margin-right: var(--ddd-spacing-16); + } + .mr-17 { + margin-right: var(--ddd-spacing-17); + } + .mr-18 { + margin-right: var(--ddd-spacing-18); + } + .mr-19 { + margin-right: var(--ddd-spacing-19); + } + .mr-20 { + margin-right: var(--ddd-spacing-20); + } + .mr-21 { + margin-right: var(--ddd-spacing-21); + } + .mr-22 { + margin-right: var(--ddd-spacing-22); + } + .mr-23 { + margin-right: var(--ddd-spacing-23); + } + .mr-24 { + margin-right: var(--ddd-spacing-24); + } + .mr-25 { + margin-right: var(--ddd-spacing-25); + } + .mr-26 { + margin-right: var(--ddd-spacing-26); + } + .mr-27 { + margin-right: var(--ddd-spacing-27); + } + .mr-28 { + margin-right: var(--ddd-spacing-28); + } + .mr-29 { + margin-right: var(--ddd-spacing-29); + } + .mr-30 { + margin-right: var(--ddd-spacing-30); + } + .mx-auto { + margin-left: auto; + margin-right: auto; + } + .mx-0 { + margin-left: var(--ddd-spacing-0); + margin-right: var(--ddd-spacing-0); + } + .mx-1 { + margin-left: var(--ddd-spacing-1); + margin-right: var(--ddd-spacing-1); + } + .mx-2 { + margin-left: var(--ddd-spacing-2); + margin-right: var(--ddd-spacing-2); + } + .mx-3 { + margin-left: var(--ddd-spacing-3); + margin-right: var(--ddd-spacing-3); + } + .mx-4 { + margin-left: var(--ddd-spacing-4); + margin-right: var(--ddd-spacing-4); + } + .mx-5 { + margin-left: var(--ddd-spacing-5); + margin-right: var(--ddd-spacing-5); + } + .mx-6 { + margin-left: var(--ddd-spacing-6); + margin-right: var(--ddd-spacing-6); + } + .mx-7 { + margin-left: var(--ddd-spacing-7); + margin-right: var(--ddd-spacing-7); + } + .mx-8 { + margin-left: var(--ddd-spacing-8); + margin-right: var(--ddd-spacing-8); + } + .mx-9 { + margin-left: var(--ddd-spacing-9); + margin-right: var(--ddd-spacing-9); + } + .mx-10 { + margin-left: var(--ddd-spacing-10); + margin-right: var(--ddd-spacing-10); + } + .mx-11 { + margin-left: var(--ddd-spacing-11); + margin-right: var(--ddd-spacing-11); + } + .mx-12 { + margin-left: var(--ddd-spacing-12); + margin-right: var(--ddd-spacing-12); + } + .mx-13 { + margin-left: var(--ddd-spacing-13); + margin-right: var(--ddd-spacing-13); + } + .mx-14 { + margin-left: var(--ddd-spacing-14); + margin-right: var(--ddd-spacing-14); + } + .mx-15 { + margin-left: var(--ddd-spacing-15); + margin-right: var(--ddd-spacing-15); + } + .mx-16 { + margin-left: var(--ddd-spacing-16); + margin-right: var(--ddd-spacing-16); + } + .mx-17 { + margin-left: var(--ddd-spacing-17); + margin-right: var(--ddd-spacing-17); + } + .mx-18 { + margin-left: var(--ddd-spacing-18); + margin-right: var(--ddd-spacing-18); + } + .mx-19 { + margin-left: var(--ddd-spacing-19); + margin-right: var(--ddd-spacing-19); + } + .mx-20 { + margin-left: var(--ddd-spacing-20); + margin-right: var(--ddd-spacing-20); + } + .mx-21 { + margin-left: var(--ddd-spacing-21); + margin-right: var(--ddd-spacing-21); + } + .mx-22 { + margin-left: var(--ddd-spacing-22); + margin-right: var(--ddd-spacing-22); + } + .mx-23 { + margin-left: var(--ddd-spacing-23); + margin-right: var(--ddd-spacing-23); + } + .mx-24 { + margin-left: var(--ddd-spacing-24); + margin-right: var(--ddd-spacing-24); + } + .mx-25 { + margin-left: var(--ddd-spacing-25); + margin-right: var(--ddd-spacing-25); + } + .mx-26 { + margin-left: var(--ddd-spacing-26); + margin-right: var(--ddd-spacing-26); + } + .mx-27 { + margin-left: var(--ddd-spacing-27); + margin-right: var(--ddd-spacing-27); + } + .mx-28 { + margin-left: var(--ddd-spacing-28); + margin-right: var(--ddd-spacing-28); + } + .mx-29 { + margin-left: var(--ddd-spacing-29); + margin-right: var(--ddd-spacing-29); + } + .mx-30 { + margin-left: var(--ddd-spacing-30); + margin-right: var(--ddd-spacing-30); + } + .my-auto { + margin-top: auto; + margin-bottom: auto; + } + .my-0 { + margin-top: var(--ddd-spacing-0); + margin-bottom: var(--ddd-spacing-0); + } + .my-1 { + margin-top: var(--ddd-spacing-1); + margin-bottom: var(--ddd-spacing-1); + } + .my-2 { + margin-top: var(--ddd-spacing-2); + margin-bottom: var(--ddd-spacing-2); + } + .my-3 { + margin-top: var(--ddd-spacing-3); + margin-bottom: var(--ddd-spacing-3); + } + .my-4 { + margin-top: var(--ddd-spacing-4); + margin-bottom: var(--ddd-spacing-4); + } + .my-5 { + margin-top: var(--ddd-spacing-5); + margin-bottom: var(--ddd-spacing-5); + } + .my-6 { + margin-top: var(--ddd-spacing-6); + margin-bottom: var(--ddd-spacing-6); + } + .my-7 { + margin-top: var(--ddd-spacing-7); + margin-bottom: var(--ddd-spacing-7); + } + .my-8 { + margin-top: var(--ddd-spacing-8); + margin-bottom: var(--ddd-spacing-8); + } + .my-9 { + margin-top: var(--ddd-spacing-9); + margin-bottom: var(--ddd-spacing-9); + } + .my-10 { + margin-top: var(--ddd-spacing-10); + margin-bottom: var(--ddd-spacing-10); + } + .my-11 { + margin-top: var(--ddd-spacing-11); + margin-bottom: var(--ddd-spacing-11); + } + .my-12 { + margin-top: var(--ddd-spacing-12); + margin-bottom: var(--ddd-spacing-12); + } + .my-13 { + margin-top: var(--ddd-spacing-13); + margin-bottom: var(--ddd-spacing-13); + } + .my-14 { + margin-top: var(--ddd-spacing-14); + margin-bottom: var(--ddd-spacing-14); + } + .my-15 { + margin-top: var(--ddd-spacing-15); + margin-bottom: var(--ddd-spacing-15); + } + .my-16 { + margin-top: var(--ddd-spacing-16); + margin-bottom: var(--ddd-spacing-16); + } + .my-17 { + margin-top: var(--ddd-spacing-17); + margin-bottom: var(--ddd-spacing-17); + } + .my-18 { + margin-top: var(--ddd-spacing-18); + margin-bottom: var(--ddd-spacing-18); + } + .my-19 { + margin-top: var(--ddd-spacing-19); + margin-bottom: var(--ddd-spacing-19); + } + .my-20 { + margin-top: var(--ddd-spacing-20); + margin-bottom: var(--ddd-spacing-20); + } + .my-21 { + margin-top: var(--ddd-spacing-21); + margin-bottom: var(--ddd-spacing-21); + } + .my-22 { + margin-top: var(--ddd-spacing-22); + margin-bottom: var(--ddd-spacing-22); + } + .my-23 { + margin-top: var(--ddd-spacing-23); + margin-bottom: var(--ddd-spacing-23); + } + .my-24 { + margin-top: var(--ddd-spacing-24); + margin-bottom: var(--ddd-spacing-24); + } + .my-25 { + margin-top: var(--ddd-spacing-25); + margin-bottom: var(--ddd-spacing-25); + } + .my-26 { + margin-top: var(--ddd-spacing-26); + margin-bottom: var(--ddd-spacing-26); + } + .my-27 { + margin-top: var(--ddd-spacing-27); + margin-bottom: var(--ddd-spacing-27); + } + .my-28 { + margin-top: var(--ddd-spacing-28); + margin-bottom: var(--ddd-spacing-28); + } + .my-29 { + margin-top: var(--ddd-spacing-29); + margin-bottom: var(--ddd-spacing-29); + } + .my-30 { + margin-top: var(--ddd-spacing-30); + margin-bottom: var(--ddd-spacing-30); + } + .p-auto { + padding: auto; + } + .p-0 { + padding: var(--ddd-spacing-0); + } + .p-1 { + padding: var(--ddd-spacing-1); + } + .p-2 { + padding: var(--ddd-spacing-2); + } + .p-3 { + padding: var(--ddd-spacing-3); + } + .p-4 { + padding: var(--ddd-spacing-4); + } + .p-5 { + padding: var(--ddd-spacing-5); + } + .p-6 { + padding: var(--ddd-spacing-6); + } + .p-7 { + padding: var(--ddd-spacing-7); + } + .p-8 { + padding: var(--ddd-spacing-8); + } + .p-9 { + padding: var(--ddd-spacing-9); + } + .p-10 { + padding: var(--ddd-spacing-10); + } + .p-11 { + padding: var(--ddd-spacing-11); + } + .p-12 { + padding: var(--ddd-spacing-12); + } + .p-13 { + padding: var(--ddd-spacing-13); + } + .p-14 { + padding: var(--ddd-spacing-14); + } + .p-15 { + padding: var(--ddd-spacing-15); + } + .p-16 { + padding: var(--ddd-spacing-16); + } + .p-17 { + padding: var(--ddd-spacing-17); + } + .p-18 { + padding: var(--ddd-spacing-18); + } + .p-19 { + padding: var(--ddd-spacing-19); + } + .p-20 { + padding: var(--ddd-spacing-20); + } + .p-21 { + padding: var(--ddd-spacing-21); + } + .p-22 { + padding: var(--ddd-spacing-22); + } + .p-23 { + padding: var(--ddd-spacing-23); + } + .p-24 { + padding: var(--ddd-spacing-24); + } + .p-25 { + padding: var(--ddd-spacing-25); + } + .p-26 { + padding: var(--ddd-spacing-26); + } + .p-27 { + padding: var(--ddd-spacing-27); + } + .p-28 { + padding: var(--ddd-spacing-28); + } + .p-29 { + padding: var(--ddd-spacing-29); + } + .p-30 { + padding: var(--ddd-spacing-30); + } + .pt-auto { + padding-top: auto; + } + .pt-0 { + padding-top: var(--ddd-spacing-0); + } + .pt-1 { + padding-top: var(--ddd-spacing-1); + } + .pt-2 { + padding-top: var(--ddd-spacing-2); + } + .pt-3 { + padding-top: var(--ddd-spacing-3); + } + .pt-4 { + padding-top: var(--ddd-spacing-4); + } + .pt-5 { + padding-top: var(--ddd-spacing-5); + } + .pt-6 { + padding-top: var(--ddd-spacing-6); + } + .pt-7 { + padding-top: var(--ddd-spacing-7); + } + .pt-8 { + padding-top: var(--ddd-spacing-8); + } + .pt-9 { + padding-top: var(--ddd-spacing-9); + } + .pt-10 { + padding-top: var(--ddd-spacing-10); + } + .pt-11 { + padding-top: var(--ddd-spacing-11); + } + .pt-12 { + padding-top: var(--ddd-spacing-12); + } + .pt-13 { + padding-top: var(--ddd-spacing-13); + } + .pt-14 { + padding-top: var(--ddd-spacing-14); + } + .pt-15 { + padding-top: var(--ddd-spacing-15); + } + .pt-16 { + padding-top: var(--ddd-spacing-16); + } + .pt-17 { + padding-top: var(--ddd-spacing-17); + } + .pt-18 { + padding-top: var(--ddd-spacing-18); + } + .pt-19 { + padding-top: var(--ddd-spacing-19); + } + .pt-20 { + padding-top: var(--ddd-spacing-20); + } + .pt-21 { + padding-top: var(--ddd-spacing-21); + } + .pt-22 { + padding-top: var(--ddd-spacing-22); + } + .pt-23 { + padding-top: var(--ddd-spacing-23); + } + .pt-24 { + padding-top: var(--ddd-spacing-24); + } + .pt-25 { + padding-top: var(--ddd-spacing-25); + } + .pt-26 { + padding-top: var(--ddd-spacing-26); + } + .pt-27 { + padding-top: var(--ddd-spacing-27); + } + .pt-28 { + padding-top: var(--ddd-spacing-28); + } + .pt-29 { + padding-top: var(--ddd-spacing-29); + } + .pt-30 { + padding-top: var(--ddd-spacing-30); + } + .pb-auto { + padding-bottom: auto; + } + .pb-0 { + padding-bottom: var(--ddd-spacing-0); + } + .pb-1 { + padding-bottom: var(--ddd-spacing-1); + } + .pb-2 { + padding-bottom: var(--ddd-spacing-2); + } + .pb-3 { + padding-bottom: var(--ddd-spacing-3); + } + .pb-4 { + padding-bottom: var(--ddd-spacing-4); + } + .pb-5 { + padding-bottom: var(--ddd-spacing-5); + } + .pb-6 { + padding-bottom: var(--ddd-spacing-6); + } + .pb-7 { + padding-bottom: var(--ddd-spacing-7); + } + .pb-8 { + padding-bottom: var(--ddd-spacing-8); + } + .pb-9 { + padding-bottom: var(--ddd-spacing-9); + } + .pb-10 { + padding-bottom: var(--ddd-spacing-10); + } + .pb-11 { + padding-bottom: var(--ddd-spacing-11); + } + .pb-12 { + padding-bottom: var(--ddd-spacing-12); + } + .pb-13 { + padding-bottom: var(--ddd-spacing-13); + } + .pb-14 { + padding-bottom: var(--ddd-spacing-14); + } + .pb-15 { + padding-bottom: var(--ddd-spacing-15); + } + .pb-16 { + padding-bottom: var(--ddd-spacing-16); + } + .pb-17 { + padding-bottom: var(--ddd-spacing-17); + } + .pb-18 { + padding-bottom: var(--ddd-spacing-18); + } + .pb-19 { + padding-bottom: var(--ddd-spacing-19); + } + .pb-20 { + padding-bottom: var(--ddd-spacing-20); + } + .pb-21 { + padding-bottom: var(--ddd-spacing-21); + } + .pb-22 { + padding-bottom: var(--ddd-spacing-22); + } + .pb-23 { + padding-bottom: var(--ddd-spacing-23); + } + .pb-24 { + padding-bottom: var(--ddd-spacing-24); + } + .pb-25 { + padding-bottom: var(--ddd-spacing-25); + } + .pb-26 { + padding-bottom: var(--ddd-spacing-26); + } + .pb-27 { + padding-bottom: var(--ddd-spacing-27); + } + .pb-28 { + padding-bottom: var(--ddd-spacing-28); + } + .pb-29 { + padding-bottom: var(--ddd-spacing-29); + } + .pb-30 { + padding-bottom: var(--ddd-spacing-30); + } + .pl-auto { + padding-left: auto; + } + .pl-0 { + padding-left: var(--ddd-spacing-0); + } + .pl-1 { + padding-left: var(--ddd-spacing-1); + } + .pl-2 { + padding-left: var(--ddd-spacing-2); + } + .pl-3 { + padding-left: var(--ddd-spacing-3); + } + .pl-4 { + padding-left: var(--ddd-spacing-4); + } + .pl-5 { + padding-left: var(--ddd-spacing-5); + } + .pl-6 { + padding-left: var(--ddd-spacing-6); + } + .pl-7 { + padding-left: var(--ddd-spacing-7); + } + .pl-8 { + padding-left: var(--ddd-spacing-8); + } + .pl-9 { + padding-left: var(--ddd-spacing-9); + } + .pl-10 { + padding-left: var(--ddd-spacing-10); + } + .pl-11 { + padding-left: var(--ddd-spacing-11); + } + .pl-12 { + padding-left: var(--ddd-spacing-12); + } + .pl-13 { + padding-left: var(--ddd-spacing-13); + } + .pl-14 { + padding-left: var(--ddd-spacing-14); + } + .pl-15 { + padding-left: var(--ddd-spacing-15); + } + .pl-16 { + padding-left: var(--ddd-spacing-16); + } + .pl-17 { + padding-left: var(--ddd-spacing-17); + } + .pl-18 { + padding-left: var(--ddd-spacing-18); + } + .pl-19 { + padding-left: var(--ddd-spacing-19); + } + .pl-20 { + padding-left: var(--ddd-spacing-20); + } + .pl-21 { + padding-left: var(--ddd-spacing-21); + } + .pl-22 { + padding-left: var(--ddd-spacing-22); + } + .pl-23 { + padding-left: var(--ddd-spacing-23); + } + .pl-24 { + padding-left: var(--ddd-spacing-24); + } + .pl-25 { + padding-left: var(--ddd-spacing-25); + } + .pl-26 { + padding-left: var(--ddd-spacing-26); + } + .pl-27 { + padding-left: var(--ddd-spacing-27); + } + .pl-28 { + padding-left: var(--ddd-spacing-28); + } + .pl-29 { + padding-left: var(--ddd-spacing-29); + } + .pl-30 { + padding-left: var(--ddd-spacing-30); + } + .pr-auto { + padding-right: auto; + } + .pr-0 { + padding-right: var(--ddd-spacing-0); + } + .pr-1 { + padding-right: var(--ddd-spacing-1); + } + .pr-2 { + padding-right: var(--ddd-spacing-2); + } + .pr-3 { + padding-right: var(--ddd-spacing-3); + } + .pr-4 { + padding-right: var(--ddd-spacing-4); + } + .pr-5 { + padding-right: var(--ddd-spacing-5); + } + .pr-6 { + padding-right: var(--ddd-spacing-6); + } + .pr-7 { + padding-right: var(--ddd-spacing-7); + } + .pr-8 { + padding-right: var(--ddd-spacing-8); + } + .pr-9 { + padding-right: var(--ddd-spacing-9); + } + .pr-10 { + padding-right: var(--ddd-spacing-10); + } + .pr-11 { + padding-right: var(--ddd-spacing-11); + } + .pr-12 { + padding-right: var(--ddd-spacing-12); + } + .pr-13 { + padding-right: var(--ddd-spacing-13); + } + .pr-14 { + padding-right: var(--ddd-spacing-14); + } + .pr-15 { + padding-right: var(--ddd-spacing-15); + } + .pr-16 { + padding-right: var(--ddd-spacing-16); + } + .pr-17 { + padding-right: var(--ddd-spacing-17); + } + .pr-18 { + padding-right: var(--ddd-spacing-18); + } + .pr-19 { + padding-right: var(--ddd-spacing-19); + } + .pr-20 { + padding-right: var(--ddd-spacing-20); + } + .pr-21 { + padding-right: var(--ddd-spacing-21); + } + .pr-22 { + padding-right: var(--ddd-spacing-22); + } + .pr-23 { + padding-right: var(--ddd-spacing-23); + } + .pr-24 { + padding-right: var(--ddd-spacing-24); + } + .pr-25 { + padding-right: var(--ddd-spacing-25); + } + .pr-26 { + padding-right: var(--ddd-spacing-26); + } + .pr-27 { + padding-right: var(--ddd-spacing-27); + } + .pr-28 { + padding-right: var(--ddd-spacing-28); + } + .pr-29 { + padding-right: var(--ddd-spacing-29); + } + .pr-30 { + padding-right: var(--ddd-spacing-30); + } + .px-auto { + padding-left: auto; + padding-right: auto; + } + .px-0 { + padding-left: var(--ddd-spacing-0); + padding-right: var(--ddd-spacing-0); + } + .px-1 { + padding-left: var(--ddd-spacing-1); + padding-right: var(--ddd-spacing-1); + } + .px-2 { + padding-left: var(--ddd-spacing-2); + padding-right: var(--ddd-spacing-2); + } + .px-3 { + padding-left: var(--ddd-spacing-3); + padding-right: var(--ddd-spacing-3); + } + .px-4 { + padding-left: var(--ddd-spacing-4); + padding-right: var(--ddd-spacing-4); + } + .px-5 { + padding-left: var(--ddd-spacing-5); + padding-right: var(--ddd-spacing-5); + } + .px-6 { + padding-left: var(--ddd-spacing-6); + padding-right: var(--ddd-spacing-6); + } + .px-7 { + padding-left: var(--ddd-spacing-7); + padding-right: var(--ddd-spacing-7); + } + .px-8 { + padding-left: var(--ddd-spacing-8); + padding-right: var(--ddd-spacing-8); + } + .px-9 { + padding-left: var(--ddd-spacing-9); + padding-right: var(--ddd-spacing-9); + } + .px-10 { + padding-left: var(--ddd-spacing-10); + padding-right: var(--ddd-spacing-10); + } + .px-11 { + padding-left: var(--ddd-spacing-11); + padding-right: var(--ddd-spacing-11); + } + .px-12 { + padding-left: var(--ddd-spacing-12); + padding-right: var(--ddd-spacing-12); + } + .px-13 { + padding-left: var(--ddd-spacing-13); + padding-right: var(--ddd-spacing-13); + } + .px-14 { + padding-left: var(--ddd-spacing-14); + padding-right: var(--ddd-spacing-14); + } + .px-15 { + padding-left: var(--ddd-spacing-15); + padding-right: var(--ddd-spacing-15); + } + .px-16 { + padding-left: var(--ddd-spacing-16); + padding-right: var(--ddd-spacing-16); + } + .px-17 { + padding-left: var(--ddd-spacing-17); + padding-right: var(--ddd-spacing-17); + } + .px-18 { + padding-left: var(--ddd-spacing-18); + padding-right: var(--ddd-spacing-18); + } + .px-19 { + padding-left: var(--ddd-spacing-19); + padding-right: var(--ddd-spacing-19); + } + .px-20 { + padding-left: var(--ddd-spacing-20); + padding-right: var(--ddd-spacing-20); + } + .px-21 { + padding-left: var(--ddd-spacing-21); + padding-right: var(--ddd-spacing-21); + } + .px-22 { + padding-left: var(--ddd-spacing-22); + padding-right: var(--ddd-spacing-22); + } + .px-23 { + padding-left: var(--ddd-spacing-23); + padding-right: var(--ddd-spacing-23); + } + .px-24 { + padding-left: var(--ddd-spacing-24); + padding-right: var(--ddd-spacing-24); + } + .px-25 { + padding-left: var(--ddd-spacing-25); + padding-right: var(--ddd-spacing-25); + } + .px-26 { + padding-left: var(--ddd-spacing-26); + padding-right: var(--ddd-spacing-26); + } + .px-27 { + padding-left: var(--ddd-spacing-27); + padding-right: var(--ddd-spacing-27); + } + .px-28 { + padding-left: var(--ddd-spacing-28); + padding-right: var(--ddd-spacing-28); + } + .px-29 { + padding-left: var(--ddd-spacing-29); + padding-right: var(--ddd-spacing-29); + } + .px-30 { + padding-left: var(--ddd-spacing-30); + padding-right: var(--ddd-spacing-30); + } + .py-auto { + padding-top: auto; + padding-bottom: auto; + } + .py-0 { + padding-top: var(--ddd-spacing-0); + padding-bottom: var(--ddd-spacing-0); + } + .py-1 { + padding-top: var(--ddd-spacing-1); + padding-bottom: var(--ddd-spacing-1); + } + .py-2 { + padding-top: var(--ddd-spacing-2); + padding-bottom: var(--ddd-spacing-2); + } + .py-3 { + padding-top: var(--ddd-spacing-3); + padding-bottom: var(--ddd-spacing-3); + } + .py-4 { + padding-top: var(--ddd-spacing-4); + padding-bottom: var(--ddd-spacing-4); + } + .py-5 { + padding-top: var(--ddd-spacing-5); + padding-bottom: var(--ddd-spacing-5); + } + .py-6 { + padding-top: var(--ddd-spacing-6); + padding-bottom: var(--ddd-spacing-6); + } + .py-7 { + padding-top: var(--ddd-spacing-7); + padding-bottom: var(--ddd-spacing-7); + } + .py-8 { + padding-top: var(--ddd-spacing-8); + padding-bottom: var(--ddd-spacing-8); + } + .py-9 { + padding-top: var(--ddd-spacing-9); + padding-bottom: var(--ddd-spacing-9); + } + .py-10 { + padding-top: var(--ddd-spacing-10); + padding-bottom: var(--ddd-spacing-10); + } + .py-11 { + padding-top: var(--ddd-spacing-11); + padding-bottom: var(--ddd-spacing-11); + } + .py-12 { + padding-top: var(--ddd-spacing-12); + padding-bottom: var(--ddd-spacing-12); + } + .py-13 { + padding-top: var(--ddd-spacing-13); + padding-bottom: var(--ddd-spacing-13); + } + .py-14 { + padding-top: var(--ddd-spacing-14); + padding-bottom: var(--ddd-spacing-14); + } + .py-15 { + padding-top: var(--ddd-spacing-15); + padding-bottom: var(--ddd-spacing-15); + } + .py-16 { + padding-top: var(--ddd-spacing-16); + padding-bottom: var(--ddd-spacing-16); + } + .py-17 { + padding-top: var(--ddd-spacing-17); + padding-bottom: var(--ddd-spacing-17); + } + .py-18 { + padding-top: var(--ddd-spacing-18); + padding-bottom: var(--ddd-spacing-18); + } + .py-19 { + padding-top: var(--ddd-spacing-19); + padding-bottom: var(--ddd-spacing-19); + } + .py-20 { + padding-top: var(--ddd-spacing-20); + padding-bottom: var(--ddd-spacing-20); + } + .py-21 { + padding-top: var(--ddd-spacing-21); + padding-bottom: var(--ddd-spacing-21); + } + .py-22 { + padding-top: var(--ddd-spacing-22); + padding-bottom: var(--ddd-spacing-22); + } + .py-23 { + padding-top: var(--ddd-spacing-23); + padding-bottom: var(--ddd-spacing-23); + } + .py-24 { + padding-top: var(--ddd-spacing-24); + padding-bottom: var(--ddd-spacing-24); + } + .py-25 { + padding-top: var(--ddd-spacing-25); + padding-bottom: var(--ddd-spacing-25); + } + .py-26 { + padding-top: var(--ddd-spacing-26); + padding-bottom: var(--ddd-spacing-26); + } + .py-27 { + padding-top: var(--ddd-spacing-27); + padding-bottom: var(--ddd-spacing-27); + } + .py-28 { + padding-top: var(--ddd-spacing-28); + padding-bottom: var(--ddd-spacing-28); + } + .py-29 { + padding-top: var(--ddd-spacing-29); + padding-bottom: var(--ddd-spacing-29); + } + .py-30 { + padding-top: var(--ddd-spacing-30); + padding-bottom: var(--ddd-spacing-30); + } + .gap-0 { + gap: var(--ddd-spacing-0); + } + .gap-1 { + gap: var(--ddd-spacing-1); + } + .gap-2 { + gap: var(--ddd-spacing-2); + } + .gap-3 { + gap: var(--ddd-spacing-3); + } + .gap-4 { + gap: var(--ddd-spacing-4); + } + .gap-5 { + gap: var(--ddd-spacing-5); + } + .gap-6 { + gap: var(--ddd-spacing-6); + } + .gap-7 { + gap: var(--ddd-spacing-7); + } + .gap-8 { + gap: var(--ddd-spacing-8); + } + .gap-9 { + gap: var(--ddd-spacing-9); + } + .gap-10 { + gap: var(--ddd-spacing-10); + } + .gap-11 { + gap: var(--ddd-spacing-11); + } + .gap-12 { + gap: var(--ddd-spacing-12); + } + .gap-13 { + gap: var(--ddd-spacing-13); + } + .gap-14 { + gap: var(--ddd-spacing-14); + } + .gap-15 { + gap: var(--ddd-spacing-15); + } + .gap-16 { + gap: var(--ddd-spacing-16); + } + .gap-17 { + gap: var(--ddd-spacing-17); + } + .gap-18 { + gap: var(--ddd-spacing-18); + } + .gap-19 { + gap: var(--ddd-spacing-19); + } + .gap-20 { + gap: var(--ddd-spacing-20); + } + .gap-21 { + gap: var(--ddd-spacing-21); + } + .gap-22 { + gap: var(--ddd-spacing-22); + } + .gap-23 { + gap: var(--ddd-spacing-23); + } + .gap-24 { + gap: var(--ddd-spacing-24); + } + .gap-25 { + gap: var(--ddd-spacing-25); + } + .gap-26 { + gap: var(--ddd-spacing-26); + } + .gap-27 { + gap: var(--ddd-spacing-27); + } + .gap-28 { + gap: var(--ddd-spacing-28); + } + .gap-29 { + gap: var(--ddd-spacing-29); + } + .gap-30 { + gap: var(--ddd-spacing-30); + } - /* Radius */ - --ddd-radius-0: 0px; - --ddd-radius-xs: 4px; - --ddd-radius-sm: 8px; - --ddd-radius-md: 12px; - --ddd-radius-lg: 16px; - --ddd-radius-xl: 20px; - --ddd-radius-rounded: 100px; - --ddd-radius-circle: 100%; + /* font base states */ + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--ddd-font-primary); + font-weight: var(--ddd-font-primary-bold); + } + .fw-0 { + font-weight: var( + --ddd-font-primary-light + ); /* available for navigation */ + } + .fw-1 { + font-weight: var( + --ddd-font-primary-regular + ); /* available for headers */ + } + .fw-2 { + font-weight: var( + --ddd-font-primary-medium + ); /* available for headers */ + } + .fw-3 { + font-weight: var( + --ddd-font-primary-bold + ); /* default for headers, body & navigation */ + } + .fw-4 { + font-weight: var( + --ddd-font-primary-black + ); /* available for headers */ + } + * { + font-family: var(--ddd-font-primary); + } + h1 { + font-size: var(--ddd-theme-h1-font-size); + margin: var(--ddd-spacing-10) 0 var(--ddd-spacing-5); + line-height: auto; + letter-spacing: auto; + } + h2, + h3, + h4, + h5, + h6 { + margin: var(--ddd-spacing-7) 0 var(--ddd-spacing-3); + padding: 0; + line-height: auto; + letter-spacing: auto; + } + h2 { + font-size: var(--ddd-theme-h2-font-size); + } + h3 { + font-size: var(--ddd-theme-h3-font-size); + } + h4 { + font-size: var(--ddd-theme-h4-font-size); + } + h5 { + font-size: var(--ddd-theme-h5-font-size); + } + h6 { + font-size: var(--ddd-theme-h6-font-size); + } + p, + div { + font-family: var(--ddd-font-primary); + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + font-weight: var(--ddd-font-primary-regular); + letter-spacing: normal; + } + p { + line-height: var(--ddd-lh-140); + margin: var(--ddd-spacing-4) 0; + } + a, + a:-webkit-any-link { + line-break: anywhere; + color: var(--ddd-theme-polaris-link); + font-weight: var(--ddd-font-primary-bold); + text-decoration: none; + font-size: var(--ddd-theme-body-font-size); + } + a:hover { + text-decoration: underline; + cursor: pointer; + } + .ddd-font-nav { + font-family: var(--ddd-font-navigation); + font-size: var(--ddd-theme-h4-font-size); + font-weight: var(--ddd-font-navigation-bold); + } + .ddd-font-primary { + font-family: var(--ddd-font-primary); + } + .ddd-font-secondary { + font-family: var(--ddd-font-secondary); + } - /* Gradients */ - --ddd-theme-polaris-gradient-navBar: linear-gradient(90deg, rgb(0, 30, 68) 0%, rgb(0, 30, 68) 31%, rgb(30, 64, 124) 76%, rgb(0, 3, 33) 100%); - --ddd-theme-polaris-gradient-footer: linear-gradient(rgb(30, 64, 124) 0%, rgb(0, 30, 68) 65%, rgb(0, 30, 68) 100%); - --ddd-theme-polaris-gradient-newsFeature: linear-gradient(360deg, rgb(30, 64, 124) 20%, rgb(0, 156, 222) 100%); - --ddd-theme-polaris-gradient-buttons: linear-gradient(rgb(0, 156, 222) 0%, rgb(30, 64, 124) 85%); - --ddd-theme-polaris-gradient-hero: linear-gradient(360deg, rgba(0, 30, 68, 0.8) 0%, rgba(0, 30, 68, 0.4) 50%, rgba(0, 3, 33, 0) 100%); - --ddd-theme-polaris-gradient-hero2: linear-gradient(360deg, rgb(0, 30, 68) 0%, rgba(0, 30, 68, 0.4) 50%, rgba(0, 3, 33, 0) 100%); - - --ddd-icon-xxs: 24px; - --ddd-icon-xs: 32px; - --ddd-icon-sm: 40px; - --ddd-icon-md: 48px; - --ddd-icon-lg: 56px; - --ddd-icon-xl: 64px; + thead, + tbody, + tfoot, + tr, + td, + th { + font-size: var(--ddd-theme-body-font-size); + font-family: var(--ddd-font-primary); + } + ul, + ol { + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + display: flex; + flex-flow: column; + gap: 1.2rem; + font-family: var(--ddd-font-primary); + } + ul li, + ol li { + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + } + ul li::marker, + ol li::marker { + unicode-bidi: isolate; + font-variant-numeric: tabular-nums; + text-transform: none; + text-indent: 0px; + text-align: start; + text-align-last: start; + } + ul { + list-style: square; + } + ul li::marker { + color: var(--ddd-theme-polaris-skyBlue); + } + blockquote { + font-family: var(--ddd-font-primary); + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + font-style: italic; + border-left: var(--ddd-spacing-1) solid + var(--ddd-theme-polaris-pughBlue); + padding-left: var(--ddd-spacing-6); + padding-bottom: var(--ddd-spacing-2); + margin: var(--ddd-spacing-9) 0 var(--ddd-spacing-9) + var(--ddd-spacing-10); + line-height: var(--ddd-lh-150); + } + hr { + display: block; + border-top: 3px solid var(--ddd-theme-polaris-skyBlue); + width: var(--ddd-theme-h1-font-size); + margin: 0; + padding: 0; + } + .hr-vert { + border-bottom: none; + border-left: 3px solid var(--ddd-theme-polaris-skyBlue); + display: inline-block; + padding-left: var(--ddd-spacing-3); + } + .breadcrumb { + font-weight: var(--ddd-font-navigation-light); + margin: var(--ddd-spacing-6) 0; + padding: 0; + pointer-events: auto; + list-style: "/ "; + gap: var(--ddd-spacing-5); + display: flex; + flex-flow: row; + color: var(--ddd-theme-polaris-link); + } + .breadcrumb li::marker { + color: black; + font-weight: var(--ddd-font-primary-regular); + } + .breadcrumb li:first-child { + list-style: none; + } + .breadcrumb li:last-child a { + color: black; + pointer-events: none; + } + .breadcrumb li a { + padding-left: var(--ddd-spacing-1); + font-family: var(--ddd-font-navigation); + font-weight: var(--ddd-font-navigation-regular); + text-decoration: none; + } + .breadcrumb li a:hover { + text-decoration: underline; + pointer-events: auto; + } - } - /* border & shadows */ - .b-0 {border: none;} - .b-xs {border: 1px solid var(--ddd-theme-polaris-limestoneLight);} - .b-sm {border: 2px solid var(--ddd-theme-polaris-limestoneLight);} - .b-md {border: 3px solid var(--ddd-theme-polaris-limestoneLight);} - .b-lg {border: 4px solid var(--ddd-theme-polaris-limestoneLight);} - .bt-0 { border-top: none; } - .bt-xs { border-top: 1px solid var(--ddd-theme-polaris-limestoneLight); } - .bt-sm { border-top: 2px solid var(--ddd-theme-polaris-limestoneLight); } - .bt-md { border-top: 3px solid var(--ddd-theme-polaris-limestoneLight); } - .bt-lg { border-top: 4px solid var(--ddd-theme-polaris-limestoneLight); } - .br-0 { border-right: none; } - .br-xs { border-right: 1px solid var(--ddd-theme-polaris-limestoneLight); } - .br-sm { border-right: 2px solid var(--ddd-theme-polaris-limestoneLight); } - .br-md { border-right: 3px solid var(--ddd-theme-polaris-limestoneLight); } - .br-lg { border-right: 4px solid var(--ddd-theme-polaris-limestoneLight); } - .bb-0 { border-bottom: none; } - .bb-xs { border-bottom: 1px solid var(--ddd-theme-polaris-limestoneLight); } - .bb-sm { border-bottom: 2px solid var(--ddd-theme-polaris-limestoneLight); } - .bb-md { border-bottom: 3px solid var(--ddd-theme-polaris-limestoneLight); } - .bb-lg { border-bottom: 4px solid var(--ddd-theme-polaris-limestoneLight); } - .bl-0 { border-left: none; } - .bl-xs { border-left: 1px solid var(--ddd-theme-polaris-limestoneLight); } - .bl-sm { border-left: 2px solid var(--ddd-theme-polaris-limestoneLight); } - .bl-md { border-left: 3px solid var(--ddd-theme-polaris-limestoneLight); } - .bl-lg { border-left: 4px solid var(--ddd-theme-polaris-limestoneLight); } - - /* margin & padding */ - .m-auto { margin: auto; } - .m-0 { margin: var(--ddd-spacing-0); } - .m-1 { margin: var(--ddd-spacing-1); } - .m-2 { margin: var(--ddd-spacing-2); } - .m-3 { margin: var(--ddd-spacing-3); } - .m-4 { margin: var(--ddd-spacing-4); } - .m-5 { margin: var(--ddd-spacing-5); } - .m-6 { margin: var(--ddd-spacing-6); } - .m-7 { margin: var(--ddd-spacing-7); } - .m-8 { margin: var(--ddd-spacing-8); } - .m-9 { margin: var(--ddd-spacing-9); } - .m-10 { margin: var(--ddd-spacing-10); } - .m-11 { margin: var(--ddd-spacing-11); } - .m-12 { margin: var(--ddd-spacing-12); } - .m-13 { margin: var(--ddd-spacing-13); } - .m-14 { margin: var(--ddd-spacing-14); } - .m-15 { margin: var(--ddd-spacing-15); } - .m-16 { margin: var(--ddd-spacing-16); } - .m-17 { margin: var(--ddd-spacing-17); } - .m-18 { margin: var(--ddd-spacing-18); } - .m-19 { margin: var(--ddd-spacing-19); } - .m-20 { margin: var(--ddd-spacing-20); } - .m-21 { margin: var(--ddd-spacing-21); } - .m-22 { margin: var(--ddd-spacing-22); } - .m-23 { margin: var(--ddd-spacing-23); } - .m-24 { margin: var(--ddd-spacing-24); } - .m-25 { margin: var(--ddd-spacing-25); } - .m-26 { margin: var(--ddd-spacing-26); } - .m-27 { margin: var(--ddd-spacing-27); } - .m-28 { margin: var(--ddd-spacing-28); } - .m-29 { margin: var(--ddd-spacing-29); } - .m-30 { margin: var(--ddd-spacing-30); } - .mt-auto { margin-top: auto; } - .mt-0 { margin-top: var(--ddd-spacing-0); } - .mt-1 { margin-top: var(--ddd-spacing-1); } - .mt-2 { margin-top: var(--ddd-spacing-2); } - .mt-3 { margin-top: var(--ddd-spacing-3); } - .mt-4 { margin-top: var(--ddd-spacing-4); } - .mt-5 { margin-top: var(--ddd-spacing-5); } - .mt-6 { margin-top: var(--ddd-spacing-6); } - .mt-7 { margin-top: var(--ddd-spacing-7); } - .mt-8 { margin-top: var(--ddd-spacing-8); } - .mt-9 { margin-top: var(--ddd-spacing-9); } - .mt-10 { margin-top: var(--ddd-spacing-10); } - .mt-11 { margin-top: var(--ddd-spacing-11); } - .mt-12 { margin-top: var(--ddd-spacing-12); } - .mt-13 { margin-top: var(--ddd-spacing-13); } - .mt-14 { margin-top: var(--ddd-spacing-14); } - .mt-15 { margin-top: var(--ddd-spacing-15); } - .mt-16 { margin-top: var(--ddd-spacing-16); } - .mt-17 { margin-top: var(--ddd-spacing-17); } - .mt-18 { margin-top: var(--ddd-spacing-18); } - .mt-19 { margin-top: var(--ddd-spacing-19); } - .mt-20 { margin-top: var(--ddd-spacing-20); } - .mt-21 { margin-top: var(--ddd-spacing-21); } - .mt-22 { margin-top: var(--ddd-spacing-22); } - .mt-23 { margin-top: var(--ddd-spacing-23); } - .mt-24 { margin-top: var(--ddd-spacing-24); } - .mt-25 { margin-top: var(--ddd-spacing-25); } - .mt-26 { margin-top: var(--ddd-spacing-26); } - .mt-27 { margin-top: var(--ddd-spacing-27); } - .mt-28 { margin-top: var(--ddd-spacing-28); } - .mt-29 { margin-top: var(--ddd-spacing-29); } - .mt-30 { margin-top: var(--ddd-spacing-30); } - .mb-auto { margin-bottom: auto; } - .mb-0 { margin-bottom: var(--ddd-spacing-0); } - .mb-1 { margin-bottom: var(--ddd-spacing-1); } - .mb-2 { margin-bottom: var(--ddd-spacing-2); } - .mb-3 { margin-bottom: var(--ddd-spacing-3); } - .mb-4 { margin-bottom: var(--ddd-spacing-4); } - .mb-5 { margin-bottom: var(--ddd-spacing-5); } - .mb-6 { margin-bottom: var(--ddd-spacing-6); } - .mb-7 { margin-bottom: var(--ddd-spacing-7); } - .mb-8 { margin-bottom: var(--ddd-spacing-8); } - .mb-9 { margin-bottom: var(--ddd-spacing-9); } - .mb-10 { margin-bottom: var(--ddd-spacing-10); } - .mb-11 { margin-bottom: var(--ddd-spacing-11); } - .mb-12 { margin-bottom: var(--ddd-spacing-12); } - .mb-13 { margin-bottom: var(--ddd-spacing-13); } - .mb-14 { margin-bottom: var(--ddd-spacing-14); } - .mb-15 { margin-bottom: var(--ddd-spacing-15); } - .mb-16 { margin-bottom: var(--ddd-spacing-16); } - .mb-17 { margin-bottom: var(--ddd-spacing-17); } - .mb-18 { margin-bottom: var(--ddd-spacing-18); } - .mb-19 { margin-bottom: var(--ddd-spacing-19); } - .mb-20 { margin-bottom: var(--ddd-spacing-20); } - .mb-21 { margin-bottom: var(--ddd-spacing-21); } - .mb-22 { margin-bottom: var(--ddd-spacing-22); } - .mb-23 { margin-bottom: var(--ddd-spacing-23); } - .mb-24 { margin-bottom: var(--ddd-spacing-24); } - .mb-25 { margin-bottom: var(--ddd-spacing-25); } - .mb-26 { margin-bottom: var(--ddd-spacing-26); } - .mb-27 { margin-bottom: var(--ddd-spacing-27); } - .mb-28 { margin-bottom: var(--ddd-spacing-28); } - .mb-29 { margin-bottom: var(--ddd-spacing-29); } - .mb-30 { margin-bottom: var(--ddd-spacing-30); } - .ml-auto { margin-left: auto; } - .ml-0 { margin-left: var(--ddd-spacing-0); } - .ml-1 { margin-left: var(--ddd-spacing-1); } - .ml-2 { margin-left: var(--ddd-spacing-2); } - .ml-3 { margin-left: var(--ddd-spacing-3); } - .ml-4 { margin-left: var(--ddd-spacing-4); } - .ml-5 { margin-left: var(--ddd-spacing-5); } - .ml-6 { margin-left: var(--ddd-spacing-6); } - .ml-7 { margin-left: var(--ddd-spacing-7); } - .ml-8 { margin-left: var(--ddd-spacing-8); } - .ml-9 { margin-left: var(--ddd-spacing-9); } - .ml-10 { margin-left: var(--ddd-spacing-10); } - .ml-11 { margin-left: var(--ddd-spacing-11); } - .ml-12 { margin-left: var(--ddd-spacing-12); } - .ml-13 { margin-left: var(--ddd-spacing-13); } - .ml-14 { margin-left: var(--ddd-spacing-14); } - .ml-15 { margin-left: var(--ddd-spacing-15); } - .ml-16 { margin-left: var(--ddd-spacing-16); } - .ml-17 { margin-left: var(--ddd-spacing-17); } - .ml-18 { margin-left: var(--ddd-spacing-18); } - .ml-19 { margin-left: var(--ddd-spacing-19); } - .ml-20 { margin-left: var(--ddd-spacing-20); } - .ml-21 { margin-left: var(--ddd-spacing-21); } - .ml-22 { margin-left: var(--ddd-spacing-22); } - .ml-23 { margin-left: var(--ddd-spacing-23); } - .ml-24 { margin-left: var(--ddd-spacing-24); } - .ml-25 { margin-left: var(--ddd-spacing-25); } - .ml-26 { margin-left: var(--ddd-spacing-26); } - .ml-27 { margin-left: var(--ddd-spacing-27); } - .ml-28 { margin-left: var(--ddd-spacing-28); } - .ml-29 { margin-left: var(--ddd-spacing-29); } - .ml-30 { margin-left: var(--ddd-spacing-30); } - .mr-auto { margin-right: auto; } - .mr-0 { margin-right: var(--ddd-spacing-0); } - .mr-1 { margin-right: var(--ddd-spacing-1); } - .mr-2 { margin-right: var(--ddd-spacing-2); } - .mr-3 { margin-right: var(--ddd-spacing-3); } - .mr-4 { margin-right: var(--ddd-spacing-4); } - .mr-5 { margin-right: var(--ddd-spacing-5); } - .mr-6 { margin-right: var(--ddd-spacing-6); } - .mr-7 { margin-right: var(--ddd-spacing-7); } - .mr-8 { margin-right: var(--ddd-spacing-8); } - .mr-9 { margin-right: var(--ddd-spacing-9); } - .mr-10 { margin-right: var(--ddd-spacing-10); } - .mr-11 { margin-right: var(--ddd-spacing-11); } - .mr-12 { margin-right: var(--ddd-spacing-12); } - .mr-13 { margin-right: var(--ddd-spacing-13); } - .mr-14 { margin-right: var(--ddd-spacing-14); } - .mr-15 { margin-right: var(--ddd-spacing-15); } - .mr-16 { margin-right: var(--ddd-spacing-16); } - .mr-17 { margin-right: var(--ddd-spacing-17); } - .mr-18 { margin-right: var(--ddd-spacing-18); } - .mr-19 { margin-right: var(--ddd-spacing-19); } - .mr-20 { margin-right: var(--ddd-spacing-20); } - .mr-21 { margin-right: var(--ddd-spacing-21); } - .mr-22 { margin-right: var(--ddd-spacing-22); } - .mr-23 { margin-right: var(--ddd-spacing-23); } - .mr-24 { margin-right: var(--ddd-spacing-24); } - .mr-25 { margin-right: var(--ddd-spacing-25); } - .mr-26 { margin-right: var(--ddd-spacing-26); } - .mr-27 { margin-right: var(--ddd-spacing-27); } - .mr-28 { margin-right: var(--ddd-spacing-28); } - .mr-29 { margin-right: var(--ddd-spacing-29); } - .mr-30 { margin-right: var(--ddd-spacing-30); } - .mx-auto { margin-left: auto; margin-right: auto; } - .mx-0 { margin-left: var(--ddd-spacing-0); margin-right: var(--ddd-spacing-0); } - .mx-1 { margin-left: var(--ddd-spacing-1); margin-right: var(--ddd-spacing-1); } - .mx-2 { margin-left: var(--ddd-spacing-2); margin-right: var(--ddd-spacing-2); } - .mx-3 { margin-left: var(--ddd-spacing-3); margin-right: var(--ddd-spacing-3); } - .mx-4 { margin-left: var(--ddd-spacing-4); margin-right: var(--ddd-spacing-4); } - .mx-5 { margin-left: var(--ddd-spacing-5); margin-right: var(--ddd-spacing-5); } - .mx-6 { margin-left: var(--ddd-spacing-6); margin-right: var(--ddd-spacing-6); } - .mx-7 { margin-left: var(--ddd-spacing-7); margin-right: var(--ddd-spacing-7); } - .mx-8 { margin-left: var(--ddd-spacing-8); margin-right: var(--ddd-spacing-8); } - .mx-9 { margin-left: var(--ddd-spacing-9); margin-right: var(--ddd-spacing-9); } - .mx-10 { margin-left: var(--ddd-spacing-10); margin-right: var(--ddd-spacing-10); } - .mx-11 { margin-left: var(--ddd-spacing-11); margin-right: var(--ddd-spacing-11); } - .mx-12 { margin-left: var(--ddd-spacing-12); margin-right: var(--ddd-spacing-12); } - .mx-13 { margin-left: var(--ddd-spacing-13); margin-right: var(--ddd-spacing-13); } - .mx-14 { margin-left: var(--ddd-spacing-14); margin-right: var(--ddd-spacing-14); } - .mx-15 { margin-left: var(--ddd-spacing-15); margin-right: var(--ddd-spacing-15); } - .mx-16 { margin-left: var(--ddd-spacing-16); margin-right: var(--ddd-spacing-16); } - .mx-17 { margin-left: var(--ddd-spacing-17); margin-right: var(--ddd-spacing-17); } - .mx-18 { margin-left: var(--ddd-spacing-18); margin-right: var(--ddd-spacing-18); } - .mx-19 { margin-left: var(--ddd-spacing-19); margin-right: var(--ddd-spacing-19); } - .mx-20 { margin-left: var(--ddd-spacing-20); margin-right: var(--ddd-spacing-20); } - .mx-21 { margin-left: var(--ddd-spacing-21); margin-right: var(--ddd-spacing-21); } - .mx-22 { margin-left: var(--ddd-spacing-22); margin-right: var(--ddd-spacing-22); } - .mx-23 { margin-left: var(--ddd-spacing-23); margin-right: var(--ddd-spacing-23); } - .mx-24 { margin-left: var(--ddd-spacing-24); margin-right: var(--ddd-spacing-24); } - .mx-25 { margin-left: var(--ddd-spacing-25); margin-right: var(--ddd-spacing-25); } - .mx-26 { margin-left: var(--ddd-spacing-26); margin-right: var(--ddd-spacing-26); } - .mx-27 { margin-left: var(--ddd-spacing-27); margin-right: var(--ddd-spacing-27); } - .mx-28 { margin-left: var(--ddd-spacing-28); margin-right: var(--ddd-spacing-28); } - .mx-29 { margin-left: var(--ddd-spacing-29); margin-right: var(--ddd-spacing-29); } - .mx-30 { margin-left: var(--ddd-spacing-30); margin-right: var(--ddd-spacing-30); } - .my-auto { margin-top: auto; margin-bottom: auto; } - .my-0 { margin-top: var(--ddd-spacing-0); margin-bottom: var(--ddd-spacing-0); } - .my-1 { margin-top: var(--ddd-spacing-1); margin-bottom: var(--ddd-spacing-1); } - .my-2 { margin-top: var(--ddd-spacing-2); margin-bottom: var(--ddd-spacing-2); } - .my-3 { margin-top: var(--ddd-spacing-3); margin-bottom: var(--ddd-spacing-3); } - .my-4 { margin-top: var(--ddd-spacing-4); margin-bottom: var(--ddd-spacing-4); } - .my-5 { margin-top: var(--ddd-spacing-5); margin-bottom: var(--ddd-spacing-5); } - .my-6 { margin-top: var(--ddd-spacing-6); margin-bottom: var(--ddd-spacing-6); } - .my-7 { margin-top: var(--ddd-spacing-7); margin-bottom: var(--ddd-spacing-7); } - .my-8 { margin-top: var(--ddd-spacing-8); margin-bottom: var(--ddd-spacing-8); } - .my-9 { margin-top: var(--ddd-spacing-9); margin-bottom: var(--ddd-spacing-9); } - .my-10 { margin-top: var(--ddd-spacing-10); margin-bottom: var(--ddd-spacing-10); } - .my-11 { margin-top: var(--ddd-spacing-11); margin-bottom: var(--ddd-spacing-11); } - .my-12 { margin-top: var(--ddd-spacing-12); margin-bottom: var(--ddd-spacing-12); } - .my-13 { margin-top: var(--ddd-spacing-13); margin-bottom: var(--ddd-spacing-13); } - .my-14 { margin-top: var(--ddd-spacing-14); margin-bottom: var(--ddd-spacing-14); } - .my-15 { margin-top: var(--ddd-spacing-15); margin-bottom: var(--ddd-spacing-15); } - .my-16 { margin-top: var(--ddd-spacing-16); margin-bottom: var(--ddd-spacing-16); } - .my-17 { margin-top: var(--ddd-spacing-17); margin-bottom: var(--ddd-spacing-17); } - .my-18 { margin-top: var(--ddd-spacing-18); margin-bottom: var(--ddd-spacing-18); } - .my-19 { margin-top: var(--ddd-spacing-19); margin-bottom: var(--ddd-spacing-19); } - .my-20 { margin-top: var(--ddd-spacing-20); margin-bottom: var(--ddd-spacing-20); } - .my-21 { margin-top: var(--ddd-spacing-21); margin-bottom: var(--ddd-spacing-21); } - .my-22 { margin-top: var(--ddd-spacing-22); margin-bottom: var(--ddd-spacing-22); } - .my-23 { margin-top: var(--ddd-spacing-23); margin-bottom: var(--ddd-spacing-23); } - .my-24 { margin-top: var(--ddd-spacing-24); margin-bottom: var(--ddd-spacing-24); } - .my-25 { margin-top: var(--ddd-spacing-25); margin-bottom: var(--ddd-spacing-25); } - .my-26 { margin-top: var(--ddd-spacing-26); margin-bottom: var(--ddd-spacing-26); } - .my-27 { margin-top: var(--ddd-spacing-27); margin-bottom: var(--ddd-spacing-27); } - .my-28 { margin-top: var(--ddd-spacing-28); margin-bottom: var(--ddd-spacing-28); } - .my-29 { margin-top: var(--ddd-spacing-29); margin-bottom: var(--ddd-spacing-29); } - .my-30 { margin-top: var(--ddd-spacing-30); margin-bottom: var(--ddd-spacing-30); } - .p-auto{ padding: auto;} - .p-0 { padding: var(--ddd-spacing-0); } - .p-1 { padding: var(--ddd-spacing-1); } - .p-2 { padding: var(--ddd-spacing-2); } - .p-3 { padding: var(--ddd-spacing-3); } - .p-4 { padding: var(--ddd-spacing-4); } - .p-5 { padding: var(--ddd-spacing-5); } - .p-6 { padding: var(--ddd-spacing-6); } - .p-7 { padding: var(--ddd-spacing-7); } - .p-8 { padding: var(--ddd-spacing-8); } - .p-9 { padding: var(--ddd-spacing-9); } - .p-10 { padding: var(--ddd-spacing-10); } - .p-11 { padding: var(--ddd-spacing-11); } - .p-12 { padding: var(--ddd-spacing-12); } - .p-13 { padding: var(--ddd-spacing-13); } - .p-14 { padding: var(--ddd-spacing-14); } - .p-15 { padding: var(--ddd-spacing-15); } - .p-16 { padding: var(--ddd-spacing-16); } - .p-17 { padding: var(--ddd-spacing-17); } - .p-18 { padding: var(--ddd-spacing-18); } - .p-19 { padding: var(--ddd-spacing-19); } - .p-20 { padding: var(--ddd-spacing-20); } - .p-21 { padding: var(--ddd-spacing-21); } - .p-22 { padding: var(--ddd-spacing-22); } - .p-23 { padding: var(--ddd-spacing-23); } - .p-24 { padding: var(--ddd-spacing-24); } - .p-25 { padding: var(--ddd-spacing-25); } - .p-26 { padding: var(--ddd-spacing-26); } - .p-27 { padding: var(--ddd-spacing-27); } - .p-28 { padding: var(--ddd-spacing-28); } - .p-29 { padding: var(--ddd-spacing-29); } - .p-30 { padding: var(--ddd-spacing-30); } - .pt-auto { padding-top: auto; } - .pt-0 { padding-top: var(--ddd-spacing-0); } - .pt-1 { padding-top: var(--ddd-spacing-1); } - .pt-2 { padding-top: var(--ddd-spacing-2); } - .pt-3 { padding-top: var(--ddd-spacing-3); } - .pt-4 { padding-top: var(--ddd-spacing-4); } - .pt-5 { padding-top: var(--ddd-spacing-5); } - .pt-6 { padding-top: var(--ddd-spacing-6); } - .pt-7 { padding-top: var(--ddd-spacing-7); } - .pt-8 { padding-top: var(--ddd-spacing-8); } - .pt-9 { padding-top: var(--ddd-spacing-9); } - .pt-10 { padding-top: var(--ddd-spacing-10); } - .pt-11 { padding-top: var(--ddd-spacing-11); } - .pt-12 { padding-top: var(--ddd-spacing-12); } - .pt-13 { padding-top: var(--ddd-spacing-13); } - .pt-14 { padding-top: var(--ddd-spacing-14); } - .pt-15 { padding-top: var(--ddd-spacing-15); } - .pt-16 { padding-top: var(--ddd-spacing-16); } - .pt-17 { padding-top: var(--ddd-spacing-17); } - .pt-18 { padding-top: var(--ddd-spacing-18); } - .pt-19 { padding-top: var(--ddd-spacing-19); } - .pt-20 { padding-top: var(--ddd-spacing-20); } - .pt-21 { padding-top: var(--ddd-spacing-21); } - .pt-22 { padding-top: var(--ddd-spacing-22); } - .pt-23 { padding-top: var(--ddd-spacing-23); } - .pt-24 { padding-top: var(--ddd-spacing-24); } - .pt-25 { padding-top: var(--ddd-spacing-25); } - .pt-26 { padding-top: var(--ddd-spacing-26); } - .pt-27 { padding-top: var(--ddd-spacing-27); } - .pt-28 { padding-top: var(--ddd-spacing-28); } - .pt-29 { padding-top: var(--ddd-spacing-29); } - .pt-30 { padding-top: var(--ddd-spacing-30); } - .pb-auto { padding-bottom: auto; } - .pb-0 { padding-bottom: var(--ddd-spacing-0); } - .pb-1 { padding-bottom: var(--ddd-spacing-1); } - .pb-2 { padding-bottom: var(--ddd-spacing-2); } - .pb-3 { padding-bottom: var(--ddd-spacing-3); } - .pb-4 { padding-bottom: var(--ddd-spacing-4); } - .pb-5 { padding-bottom: var(--ddd-spacing-5); } - .pb-6 { padding-bottom: var(--ddd-spacing-6); } - .pb-7 { padding-bottom: var(--ddd-spacing-7); } - .pb-8 { padding-bottom: var(--ddd-spacing-8); } - .pb-9 { padding-bottom: var(--ddd-spacing-9); } - .pb-10 { padding-bottom: var(--ddd-spacing-10); } - .pb-11 { padding-bottom: var(--ddd-spacing-11); } - .pb-12 { padding-bottom: var(--ddd-spacing-12); } - .pb-13 { padding-bottom: var(--ddd-spacing-13); } - .pb-14 { padding-bottom: var(--ddd-spacing-14); } - .pb-15 { padding-bottom: var(--ddd-spacing-15); } - .pb-16 { padding-bottom: var(--ddd-spacing-16); } - .pb-17 { padding-bottom: var(--ddd-spacing-17); } - .pb-18 { padding-bottom: var(--ddd-spacing-18); } - .pb-19 { padding-bottom: var(--ddd-spacing-19); } - .pb-20 { padding-bottom: var(--ddd-spacing-20); } - .pb-21 { padding-bottom: var(--ddd-spacing-21); } - .pb-22 { padding-bottom: var(--ddd-spacing-22); } - .pb-23 { padding-bottom: var(--ddd-spacing-23); } - .pb-24 { padding-bottom: var(--ddd-spacing-24); } - .pb-25 { padding-bottom: var(--ddd-spacing-25); } - .pb-26 { padding-bottom: var(--ddd-spacing-26); } - .pb-27 { padding-bottom: var(--ddd-spacing-27); } - .pb-28 { padding-bottom: var(--ddd-spacing-28); } - .pb-29 { padding-bottom: var(--ddd-spacing-29); } - .pb-30 { padding-bottom: var(--ddd-spacing-30); } - .pl-auto { padding-left: auto; } - .pl-0 { padding-left: var(--ddd-spacing-0); } - .pl-1 { padding-left: var(--ddd-spacing-1); } - .pl-2 { padding-left: var(--ddd-spacing-2); } - .pl-3 { padding-left: var(--ddd-spacing-3); } - .pl-4 { padding-left: var(--ddd-spacing-4); } - .pl-5 { padding-left: var(--ddd-spacing-5); } - .pl-6 { padding-left: var(--ddd-spacing-6); } - .pl-7 { padding-left: var(--ddd-spacing-7); } - .pl-8 { padding-left: var(--ddd-spacing-8); } - .pl-9 { padding-left: var(--ddd-spacing-9); } - .pl-10 { padding-left: var(--ddd-spacing-10); } - .pl-11 { padding-left: var(--ddd-spacing-11); } - .pl-12 { padding-left: var(--ddd-spacing-12); } - .pl-13 { padding-left: var(--ddd-spacing-13); } - .pl-14 { padding-left: var(--ddd-spacing-14); } - .pl-15 { padding-left: var(--ddd-spacing-15); } - .pl-16 { padding-left: var(--ddd-spacing-16); } - .pl-17 { padding-left: var(--ddd-spacing-17); } - .pl-18 { padding-left: var(--ddd-spacing-18); } - .pl-19 { padding-left: var(--ddd-spacing-19); } - .pl-20 { padding-left: var(--ddd-spacing-20); } - .pl-21 { padding-left: var(--ddd-spacing-21); } - .pl-22 { padding-left: var(--ddd-spacing-22); } - .pl-23 { padding-left: var(--ddd-spacing-23); } - .pl-24 { padding-left: var(--ddd-spacing-24); } - .pl-25 { padding-left: var(--ddd-spacing-25); } - .pl-26 { padding-left: var(--ddd-spacing-26); } - .pl-27 { padding-left: var(--ddd-spacing-27); } - .pl-28 { padding-left: var(--ddd-spacing-28); } - .pl-29 { padding-left: var(--ddd-spacing-29); } - .pl-30 { padding-left: var(--ddd-spacing-30); } - .pr-auto { padding-right: auto; } - .pr-0 { padding-right: var(--ddd-spacing-0); } - .pr-1 { padding-right: var(--ddd-spacing-1); } - .pr-2 { padding-right: var(--ddd-spacing-2); } - .pr-3 { padding-right: var(--ddd-spacing-3); } - .pr-4 { padding-right: var(--ddd-spacing-4); } - .pr-5 { padding-right: var(--ddd-spacing-5); } - .pr-6 { padding-right: var(--ddd-spacing-6); } - .pr-7 { padding-right: var(--ddd-spacing-7); } - .pr-8 { padding-right: var(--ddd-spacing-8); } - .pr-9 { padding-right: var(--ddd-spacing-9); } - .pr-10 { padding-right: var(--ddd-spacing-10); } - .pr-11 { padding-right: var(--ddd-spacing-11); } - .pr-12 { padding-right: var(--ddd-spacing-12); } - .pr-13 { padding-right: var(--ddd-spacing-13); } - .pr-14 { padding-right: var(--ddd-spacing-14); } - .pr-15 { padding-right: var(--ddd-spacing-15); } - .pr-16 { padding-right: var(--ddd-spacing-16); } - .pr-17 { padding-right: var(--ddd-spacing-17); } - .pr-18 { padding-right: var(--ddd-spacing-18); } - .pr-19 { padding-right: var(--ddd-spacing-19); } - .pr-20 { padding-right: var(--ddd-spacing-20); } - .pr-21 { padding-right: var(--ddd-spacing-21); } - .pr-22 { padding-right: var(--ddd-spacing-22); } - .pr-23 { padding-right: var(--ddd-spacing-23); } - .pr-24 { padding-right: var(--ddd-spacing-24); } - .pr-25 { padding-right: var(--ddd-spacing-25); } - .pr-26 { padding-right: var(--ddd-spacing-26); } - .pr-27 { padding-right: var(--ddd-spacing-27); } - .pr-28 { padding-right: var(--ddd-spacing-28); } - .pr-29 { padding-right: var(--ddd-spacing-29); } - .pr-30 { padding-right: var(--ddd-spacing-30); } - .px-auto { padding-left: auto; padding-right: auto; } - .px-0 { padding-left: var(--ddd-spacing-0); padding-right: var(--ddd-spacing-0); } - .px-1 { padding-left: var(--ddd-spacing-1); padding-right: var(--ddd-spacing-1); } - .px-2 { padding-left: var(--ddd-spacing-2); padding-right: var(--ddd-spacing-2); } - .px-3 { padding-left: var(--ddd-spacing-3); padding-right: var(--ddd-spacing-3); } - .px-4 { padding-left: var(--ddd-spacing-4); padding-right: var(--ddd-spacing-4); } - .px-5 { padding-left: var(--ddd-spacing-5); padding-right: var(--ddd-spacing-5); } - .px-6 { padding-left: var(--ddd-spacing-6); padding-right: var(--ddd-spacing-6); } - .px-7 { padding-left: var(--ddd-spacing-7); padding-right: var(--ddd-spacing-7); } - .px-8 { padding-left: var(--ddd-spacing-8); padding-right: var(--ddd-spacing-8); } - .px-9 { padding-left: var(--ddd-spacing-9); padding-right: var(--ddd-spacing-9); } - .px-10 { padding-left: var(--ddd-spacing-10); padding-right: var(--ddd-spacing-10); } - .px-11 { padding-left: var(--ddd-spacing-11); padding-right: var(--ddd-spacing-11); } - .px-12 { padding-left: var(--ddd-spacing-12); padding-right: var(--ddd-spacing-12); } - .px-13 { padding-left: var(--ddd-spacing-13); padding-right: var(--ddd-spacing-13); } - .px-14 { padding-left: var(--ddd-spacing-14); padding-right: var(--ddd-spacing-14); } - .px-15 { padding-left: var(--ddd-spacing-15); padding-right: var(--ddd-spacing-15); } - .px-16 { padding-left: var(--ddd-spacing-16); padding-right: var(--ddd-spacing-16); } - .px-17 { padding-left: var(--ddd-spacing-17); padding-right: var(--ddd-spacing-17); } - .px-18 { padding-left: var(--ddd-spacing-18); padding-right: var(--ddd-spacing-18); } - .px-19 { padding-left: var(--ddd-spacing-19); padding-right: var(--ddd-spacing-19); } - .px-20 { padding-left: var(--ddd-spacing-20); padding-right: var(--ddd-spacing-20); } - .px-21 { padding-left: var(--ddd-spacing-21); padding-right: var(--ddd-spacing-21); } - .px-22 { padding-left: var(--ddd-spacing-22); padding-right: var(--ddd-spacing-22); } - .px-23 { padding-left: var(--ddd-spacing-23); padding-right: var(--ddd-spacing-23); } - .px-24 { padding-left: var(--ddd-spacing-24); padding-right: var(--ddd-spacing-24); } - .px-25 { padding-left: var(--ddd-spacing-25); padding-right: var(--ddd-spacing-25); } - .px-26 { padding-left: var(--ddd-spacing-26); padding-right: var(--ddd-spacing-26); } - .px-27 { padding-left: var(--ddd-spacing-27); padding-right: var(--ddd-spacing-27); } - .px-28 { padding-left: var(--ddd-spacing-28); padding-right: var(--ddd-spacing-28); } - .px-29 { padding-left: var(--ddd-spacing-29); padding-right: var(--ddd-spacing-29); } - .px-30 { padding-left: var(--ddd-spacing-30); padding-right: var(--ddd-spacing-30); } - .py-auto { padding-top: auto; padding-bottom: auto; } - .py-0 { padding-top: var(--ddd-spacing-0); padding-bottom: var(--ddd-spacing-0); } - .py-1 { padding-top: var(--ddd-spacing-1); padding-bottom: var(--ddd-spacing-1); } - .py-2 { padding-top: var(--ddd-spacing-2); padding-bottom: var(--ddd-spacing-2); } - .py-3 { padding-top: var(--ddd-spacing-3); padding-bottom: var(--ddd-spacing-3); } - .py-4 { padding-top: var(--ddd-spacing-4); padding-bottom: var(--ddd-spacing-4); } - .py-5 { padding-top: var(--ddd-spacing-5); padding-bottom: var(--ddd-spacing-5); } - .py-6 { padding-top: var(--ddd-spacing-6); padding-bottom: var(--ddd-spacing-6); } - .py-7 { padding-top: var(--ddd-spacing-7); padding-bottom: var(--ddd-spacing-7); } - .py-8 { padding-top: var(--ddd-spacing-8); padding-bottom: var(--ddd-spacing-8); } - .py-9 { padding-top: var(--ddd-spacing-9); padding-bottom: var(--ddd-spacing-9); } - .py-10 { padding-top: var(--ddd-spacing-10); padding-bottom: var(--ddd-spacing-10); } - .py-11 { padding-top: var(--ddd-spacing-11); padding-bottom: var(--ddd-spacing-11); } - .py-12 { padding-top: var(--ddd-spacing-12); padding-bottom: var(--ddd-spacing-12); } - .py-13 { padding-top: var(--ddd-spacing-13); padding-bottom: var(--ddd-spacing-13); } - .py-14 { padding-top: var(--ddd-spacing-14); padding-bottom: var(--ddd-spacing-14); } - .py-15 { padding-top: var(--ddd-spacing-15); padding-bottom: var(--ddd-spacing-15); } - .py-16 { padding-top: var(--ddd-spacing-16); padding-bottom: var(--ddd-spacing-16); } - .py-17 { padding-top: var(--ddd-spacing-17); padding-bottom: var(--ddd-spacing-17); } - .py-18 { padding-top: var(--ddd-spacing-18); padding-bottom: var(--ddd-spacing-18); } - .py-19 { padding-top: var(--ddd-spacing-19); padding-bottom: var(--ddd-spacing-19); } - .py-20 { padding-top: var(--ddd-spacing-20); padding-bottom: var(--ddd-spacing-20); } - .py-21 { padding-top: var(--ddd-spacing-21); padding-bottom: var(--ddd-spacing-21); } - .py-22 { padding-top: var(--ddd-spacing-22); padding-bottom: var(--ddd-spacing-22); } - .py-23 { padding-top: var(--ddd-spacing-23); padding-bottom: var(--ddd-spacing-23); } - .py-24 { padding-top: var(--ddd-spacing-24); padding-bottom: var(--ddd-spacing-24); } - .py-25 { padding-top: var(--ddd-spacing-25); padding-bottom: var(--ddd-spacing-25); } - .py-26 { padding-top: var(--ddd-spacing-26); padding-bottom: var(--ddd-spacing-26); } - .py-27 { padding-top: var(--ddd-spacing-27); padding-bottom: var(--ddd-spacing-27); } - .py-28 { padding-top: var(--ddd-spacing-28); padding-bottom: var(--ddd-spacing-28); } - .py-29 { padding-top: var(--ddd-spacing-29); padding-bottom: var(--ddd-spacing-29); } - .py-30 { padding-top: var(--ddd-spacing-30); padding-bottom: var(--ddd-spacing-30); } - .gap-0 { gap: var(--ddd-spacing-0); } - .gap-1 { gap: var(--ddd-spacing-1); } - .gap-2 { gap: var(--ddd-spacing-2); } - .gap-3 { gap: var(--ddd-spacing-3); } - .gap-4 { gap: var(--ddd-spacing-4); } - .gap-5 { gap: var(--ddd-spacing-5); } - .gap-6 { gap: var(--ddd-spacing-6); } - .gap-7 { gap: var(--ddd-spacing-7); } - .gap-8 { gap: var(--ddd-spacing-8); } - .gap-9 { gap: var(--ddd-spacing-9); } - .gap-10 { gap: var(--ddd-spacing-10); } - .gap-11 { gap: var(--ddd-spacing-11); } - .gap-12 { gap: var(--ddd-spacing-12); } - .gap-13 { gap: var(--ddd-spacing-13); } - .gap-14 { gap: var(--ddd-spacing-14); } - .gap-15 { gap: var(--ddd-spacing-15); } - .gap-16 { gap: var(--ddd-spacing-16); } - .gap-17 { gap: var(--ddd-spacing-17); } - .gap-18 { gap: var(--ddd-spacing-18); } - .gap-19 { gap: var(--ddd-spacing-19); } - .gap-20 { gap: var(--ddd-spacing-20); } - .gap-21 { gap: var(--ddd-spacing-21); } - .gap-22 { gap: var(--ddd-spacing-22); } - .gap-23 { gap: var(--ddd-spacing-23); } - .gap-24 { gap: var(--ddd-spacing-24); } - .gap-25 { gap: var(--ddd-spacing-25); } - .gap-26 { gap: var(--ddd-spacing-26); } - .gap-27 { gap: var(--ddd-spacing-27); } - .gap-28 { gap: var(--ddd-spacing-28); } - .gap-29 { gap: var(--ddd-spacing-29); } - .gap-30 { gap: var(--ddd-spacing-30); } + summary { + display: flex; + font-size: var(--ddd-theme-h4-font-size); + font-weight: var(--ddd-font-primary-bold); + cursor: pointer; + text-wrap: wrap; + align-items: center; + padding: 0 var(--ddd-spacing-5) var(--ddd-spacing-5) 0; + user-select: none; + color: black; + } + summary::marker { + content: ""; + } + summary::after { + content: "+"; + margin-left: auto; + text-align: right; + color: var(--ddd-theme-polaris-link); + font-weight: var(--ddd-font-primary-regular); + font-size: var(--ddd-font-size-m); + line-height: 1; + } + details { + display: flex; + border-bottom: 2px solid var(--ddd-theme-polaris-slateMaxLight); + position: relative; + max-width: 650px; + padding: 0 0 0 var(--ddd-spacing-5); + color: black; + } + details[open] > summary { + color: var(--ddd-theme-polaris-link); + } + details[open] > summary::after { + content: "--"; + font-size: var(--ddd-font-size-m); + letter-spacing: -1.8px; + padding-right: 2px; + } + code { + display: inline-block; + padding: var(--ddd-spacing-1) var(--ddd-spacing-2); + margin: 0 var(--ddd-spacing-1); + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + background-color: var( + --ddd-theme-polaris-limestoneLight, + var( + --hax-base-styles-code-background-color, + rgba(175, 184, 193, 0.2) + ) + ); + border-radius: var(--ddd-radius-xs); + border: var(--ddd-border-xs); + font-family: var(--ddd-font-primary); + letter-spacing: var(--ddd-ls-16-lg); + } + code.block-code { + padding: var(--ddd-spacing-2); + margin: var(--ddd-spacing-5) 0; + } + pre { + display: inline-block; + padding: var(--ddd-spacing-4); + overflow: auto; + line-height: var(--ddd-lh-140); + background-color: var( + --ddd-theme-polaris-limestoneMaxLight, + var( + --hax-base-styles-pre-background-color, + rgba(175, 184, 193, 0.2) + ) + ); + border-radius: var(--ddd-radius-sm); + margin: var(--ddd-spacing-1) 0; + word-break: normal; + word-wrap: normal; + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + } + mark { + font-weight: var(--ddd-font-primary-medium); + padding: var(--ddd-spacing-1) var(--ddd-spacing-2); + border-radius: var(--ddd-radius-xs); + background-color: var(--ddd-theme-polaris-keystoneYellow); + } + abbr { + transition: all 0.2s ease 0s; + padding: var(--ddd-spacing-1) var(--ddd-spacing-2); + font-style: italic; + text-decoration: underline; + pointer-events: auto; + cursor: pointer; + outline-color: var( + --ddd-theme-polaris-info, + var(--hax-base-styles-abbr-outline, #ffff33) + ); + position: relative; + } + abbr:focus, + abbr:active, + abbr:hover { + text-decoration: none; + background-color: var( + --ddd-theme-polaris-infoLight, + var(--hax-base-styles-abbr-outline, #ffff33) + ); + outline-offset: 2px; + outline-style: dotted; + outline-width: 2px; + } + abbr:focus::after, + abbr:active::after, + abbr:hover::after { + content: attr(title); + position: absolute; + white-space: nowrap; + font-style: normal; + top: -100%; + left: 0; + right: 0; + width: fit-content; + height: fit-content; + padding: var(--ddd-spacing-1) var(--ddd-spacing-2); + color: var( + --ddd-theme-font-color, + var(--ddd-theme-polaris-white, #fff) + ); + background-color: var( + --ddd-theme-accent-color, + var(--ddd-theme-polaris-info, , rgba(175, 184, 193, 0.2)) + ); + font-size: var( + --ddd-theme-body-font-size, + var(--ddd-theme-haxcms-font-size) + ); + font-weight: var(--ddd-font-primary-regular); + border-radius: var(--ddd-radius-xs); + } - /* font base states */ - h1, h2, h3, h4, h5, h6 { - font-family: var(--ddd-font-primary); - font-weight: var(--ddd-font-primary-bold); - } - .fw-0 { - font-weight: var( - --ddd-font-primary-light - ); /* available for navigation */ - } - .fw-1 { - font-weight: var( - --ddd-font-primary-regular - ); /* available for headers */ - } - .fw-2 { - font-weight: var( - --ddd-font-primary-medium - ); /* available for headers */ - } - .fw-3 { - font-weight: var( - --ddd-font-primary-bold - ); /* default for headers, body & navigation */ - } - .fw-4 { - font-weight: var( - --ddd-font-primary-black - ); /* available for headers */ - } - *{ - font-family: var(--ddd-font-primary); - } - h1 { - font-size: var(--ddd-font-size-l); - margin: var(--ddd-spacing-10) 0 var(--ddd-spacing-5); - } - h2,h3,h4,h5,h6 { - margin: var(--ddd-spacing-7) 0 var(--ddd-spacing-3); - } - h2 { - font-size: var(--ddd-font-size-m); - } - h3 { - font-size: var(--ddd-font-size-ms); - } - h4 { - font-size: var(--ddd-font-size-s); - } - h5 { - font-size: var(--ddd-font-size-xs); - } - h6 { - font-size: var(--ddd-font-size-xxs); - } - p { - font-family: var(--ddd-font-primary); - font-size: var(--ddd-font-size-3xs, var(--ddd-theme-haxcms-font-size)); - margin: var(--ddd-spacing-4) 0; - font-weight: var(--ddd-font-secondary-regular); - } - a{ - color: var(--ddd-theme-polaris-link); - font-weight: var(--ddd-font-primary-bold); - text-decoration: none; - } - a:hover{ - text-decoration: underline; - cursor: pointer; - } - .ddd-font-nav { - font-family: var(--ddd-font-navigation); - font-size: var(--ddd-font-size-s); - font-weight: var(--ddd-font-navigation-bold); - } - .ddd-font-primary { - font-family: var(--ddd-font-primary); - } - .ddd-font-secondary { - font-family: var(--ddd-font-secondary); - } + .fs-4xs { + font-size: var(--ddd-font-size-4xs); + } + .fs-3xs { + font-size: var(--ddd-font-size-3xs); + } + .fs-xxs { + font-size: var(--ddd-font-size-xxs); + } + .fs-xs { + font-size: var(--ddd-font-size-xs); + } + .fs-s { + font-size: var(--ddd-font-size-s); + } + .fs-ms { + font-size: var(--ddd-font-size-ms); + } + .fs-m { + font-size: var(--ddd-font-size-m); + } + .fs-ml { + font-size: var(--ddd-font-size-ml); + } + .fs-l { + font-size: var(--ddd-font-size-l); + } + .fs-xl { + font-size: var(--ddd-font-size-xl); + } + .fs-xxl { + font-size: var(--ddd-font-size-xxl); + } + .fs-3xl { + font-size: var(--ddd-font-size-3xl); + } + .fs-4xl { + font-size: var(--ddd-font-size-4xl); + } - thead, tbody, tfoot, tr, td, th{ - font-family: var(--ddd-font-primary); - } - ul, ol{ - font-size: var(--ddd-font-size-3xs, var(--ddd-theme-haxcms-font-size)); - display: flex; - flex-flow: column; - gap: 1.5rem; - font-family: var(--ddd-font-primary); - } - ul li::marker, ol li::marker{ - unicode-bidi: isolate; - font-variant-numeric: tabular-nums; - text-transform: none; - text-indent: 0px; - text-align: start; - text-align-last: start; - } - ul{ - list-style: square; - } - ul li::marker{ - color: var(--ddd-theme-polaris-skyBlue); - } - blockquote{ - font-family: var(--ddd-font-primary); - font-size: var(--ddd-font-size-3xs, var(--ddd-theme-haxcms-font-size)); - font-style: italic; - border-left: var(--ddd-spacing-1) solid var(--ddd-theme-polaris-pughBlue); - padding-left: var(--ddd-spacing-6); - padding-bottom: var(--ddd-spacing-2); - margin: var(--ddd-spacing-9) 0 var(--ddd-spacing-9) var(--ddd-spacing-10); - } - hr{ - display: block; - border-bottom: 3px solid var(--ddd-theme-polaris-skyBlue); - width: 48px; - margin: var(--ddd-spacing-9) 0; - padding: 0; - } - .hr-vert{ - margin: 0 var(--ddd-spacing-4); - padding: 0 var(--ddd-spacing-1); - border-bottom: none; - border-right: 3px solid var(--ddd-theme-polaris-skyBlue); - height: fit-content; - } - .breadcrumb{ - font-size: var(--ddd-font-size-4xs); - font-weight: var(--ddd-font-navigation-light); - margin: var(--ddd-spacing-6) 0; - padding: 0; - pointer-events: auto; - list-style: '/ '; - gap: var(--ddd-spacing-5); - display: flex; - flex-flow: row; - color: var(--ddd-theme-polaris-link); - } - .breadcrumb li::marker{ - color: black; - font-weight: var(--ddd-font-primary-regular); - } - .breadcrumb li:first-child{ - list-style: none; - } - .breadcrumb li:last-child a{ - color: black; - pointer-events: none; - } - .breadcrumb li a{ - padding-left: var(--ddd-spacing-1); - font-family: var(--ddd-font-navigation); - font-weight: var(--ddd-font-navigation-regular); - text-decoration: none; - } - .breadcrumb li a:hover{ - text-decoration: underline; - pointer-events: auto; - } + .ls-16-sm { + letter-spacing: var(--ddd-ls-16-sm); + } + .ls-18-sm { + letter-spacing: var(--ddd-ls-18-sm); + } + .ls-20-sm { + letter-spacing: var(--ddd-ls-20-sm); + } + .ls-22-sm { + letter-spacing: var(--ddd-ls-22-sm); + } + .ls-24-sm { + letter-spacing: var(--ddd-ls-24-sm); + } + .ls-28-sm { + letter-spacing: var(--ddd-ls-28-sm); + } + .ls-32-sm { + letter-spacing: var(--ddd-ls-32-sm); + } + .ls-36-sm { + letter-spacing: var(--ddd-ls-36-sm); + } + .ls-40-sm { + letter-spacing: var(--ddd-ls-40-sm); + } + .ls-48-sm { + letter-spacing: var(--ddd-ls-48-sm); + } + .ls-56-sm { + letter-spacing: var(--ddd-ls-56-sm); + } + .ls-64-sm { + letter-spacing: var(--ddd-ls-64-sm); + } + .ls-72-sm { + letter-spacing: var(--ddd-ls-72-sm); + } + .ls-16-lg { + letter-spacing: var(--ddd-ls-16-lg); + } + .ls-18-lg { + letter-spacing: var(--ddd-ls-18-lg); + } + .ls-20-lg { + letter-spacing: var(--ddd-ls-20-lg); + } + .ls-22-lg { + letter-spacing: var(--ddd-ls-22-lg); + } + .ls-24-lg { + letter-spacing: var(--ddd-ls-24-lg); + } + .ls-28-lg { + letter-spacing: var(--ddd-ls-28-lg); + } + .ls-32-lg { + letter-spacing: var(--ddd-ls-32-lg); + } + .ls-36-lg { + letter-spacing: var(--ddd-ls-36-lg); + } + .ls-40-lg { + letter-spacing: var(--ddd-ls-40-lg); + } + .ls-48-lg { + letter-spacing: var(--ddd-ls-48-lg); + } + .ls-56-lg { + letter-spacing: var(--ddd-ls-56-lg); + } + .ls-64-lg { + letter-spacing: var(--ddd-ls-64-lg); + } + .ls-72-lg { + letter-spacing: var(--ddd-ls-72-lg); + } - summary{ - display: flex; - font-size: var(--ddd-font-size-xxs); - font-weight: var(--ddd-font-primary-bold); - cursor: pointer; - text-wrap: wrap; - align-items: center; - padding: 0 var(--ddd-spacing-5) var(--ddd-spacing-5) 0; - user-select: none; - color: black; - } - summary::marker{ - content: ""; - } - summary::after{ - content: "+"; - margin-left: auto; - text-align: right; - color: var(--ddd-theme-polaris-link); - font-weight: var(--ddd-font-primary-regular); - font-size: var(--ddd-font-size-m); - line-height: 1; - } - details{ - display: flex; - border-bottom: 2px solid var(--ddd-theme-polaris-slateMaxLight); - position: relative; - max-width: 650px; - padding: 0 0 0 var(--ddd-spacing-5); - color: black; - } - details[open] > summary{ - color: var(--ddd-theme-polaris-link); - } - details[open] > summary::after{ - content: "--"; - font-size: var(--ddd-font-size-m); - letter-spacing: -1.8px; - padding-right: 2px; - } + .lh-120 { + line-height: var(--ddd-lh-120); + } + .lh-140 { + line-height: var(--ddd-lh-140); + } + .lh-150 { + line-height: var(--ddd-lh-150); + } + .lh-auto { + line-height: normal; + } - .fs-4xs { font-size: var(--ddd-font-size-4xs); } - .fs-3xs { font-size: var(--ddd-font-size-3xs); } - .fs-xxs { font-size: var(--ddd-font-size-xxs); } - .fs-xs { font-size: var(--ddd-font-size-xs); } - .fs-s { font-size: var(--ddd-font-size-s); } - .fs-ms { font-size: var(--ddd-font-size-ms); } - .fs-m { font-size: var(--ddd-font-size-m); } - .fs-ml { font-size: var(--ddd-font-size-ml); } - .fs-l { font-size: var(--ddd-font-size-l); } - .fs-xl { font-size: var(--ddd-font-size-xl); } - .fs-xxl { font-size: var(--ddd-font-size-xxl); } - .fs-3xl { font-size: var(--ddd-font-size-3xl); } - .fs-4xl { font-size: var(--ddd-font-size-4xl); } - - .ls-16-sm { letter-spacing: var(--ddd-ls-16-sm); } - .ls-18-sm { letter-spacing: var(--ddd-ls-18-sm); } - .ls-20-sm { letter-spacing: var(--ddd-ls-20-sm); } - .ls-22-sm { letter-spacing: var(--ddd-ls-22-sm); } - .ls-24-sm { letter-spacing: var(--ddd-ls-24-sm); } - .ls-28-sm { letter-spacing: var(--ddd-ls-28-sm); } - .ls-32-sm { letter-spacing: var(--ddd-ls-32-sm); } - .ls-36-sm { letter-spacing: var(--ddd-ls-36-sm); } - .ls-40-sm { letter-spacing: var(--ddd-ls-40-sm); } - .ls-48-sm { letter-spacing: var(--ddd-ls-48-sm); } - .ls-56-sm { letter-spacing: var(--ddd-ls-56-sm); } - .ls-64-sm { letter-spacing: var(--ddd-ls-64-sm); } - .ls-72-sm { letter-spacing: var(--ddd-ls-72-sm); } - .ls-16-lg { letter-spacing: var(--ddd-ls-16-lg); } - .ls-18-lg { letter-spacing: var(--ddd-ls-18-lg); } - .ls-20-lg { letter-spacing: var(--ddd-ls-20-lg); } - .ls-22-lg { letter-spacing: var(--ddd-ls-22-lg); } - .ls-24-lg { letter-spacing: var(--ddd-ls-24-lg); } - .ls-28-lg { letter-spacing: var(--ddd-ls-28-lg); } - .ls-32-lg { letter-spacing: var(--ddd-ls-32-lg); } - .ls-36-lg { letter-spacing: var(--ddd-ls-36-lg); } - .ls-40-lg { letter-spacing: var(--ddd-ls-40-lg); } - .ls-48-lg { letter-spacing: var(--ddd-ls-48-lg); } - .ls-56-lg { letter-spacing: var(--ddd-ls-56-lg); } - .ls-64-lg { letter-spacing: var(--ddd-ls-64-lg); } - .ls-72-lg { letter-spacing: var(--ddd-ls-72-lg); } + .bs-0 { + box-shadow: none; + } + .bs-xs { + box-shadow: var(--ddd-boxShadow-xs); + } + .bs-sm { + box-shadow: var(--ddd-boxShadow-sm); + } + .bs-md { + box-shadow: var(--ddd-boxShadow-md); + } + .bs-lg { + box-shadow: var(--ddd-boxShadow-lg); + } - .lh-120 { line-height: var(--ddd-lh-120); } - .lh-140 { line-height: var(--ddd-lh-140); } - .lh-150 { line-height: var(--ddd-lh-150); } - .lh-auto { line-height: normal; } - - .bs-0 { box-shadow: none; } - .bs-xs { box-shadow: var(--ddd-boxShadow-1); } - .bs-sm { box-shadow: var(--ddd-boxShadow-2); } - .bs-md { box-shadow: var(--ddd-boxShadow-3); } - .bs-lg { box-shadow: var(--ddd-boxShadow-4); } - - .textShadow-0 { text-shadow: var(--ddd-textShadow-0); } - .textshadow-1{text-shadow: var(--ddd-textShadow-1);} - .textShadow-2{text-shadow: var(--ddd-textShadow-2);} - .textShadow-3{text-shadow: var(--ddd-textShadow-3);} - .textShadow-4{text-shadow: var(--ddd-textShadow-4);} + .textShadow-0 { + text-shadow: none; + } + .textshadow-1 { + text-shadow: var(--ddd-textShadow-xs); + } + .textShadow-2 { + text-shadow: var(--ddd-textShadow-sm); + } + .textShadow-3 { + text-shadow: var(--ddd-textShadow-md); + } + .textShadow-4 { + text-shadow: var(--ddd-textShadow-lg); + } - .r-0 { border-radius: var(--ddd-radius-0); } - .r-xs { border-radius: var(--ddd-radius-xs); } - .r-sm { border-radius: var(--ddd-radius-sm); } - .r-md { border-radius: var(--ddd-radius-md); } - .r-lg { border-radius: var(--ddd-radius-lg); } - .r-xl { border-radius: var(--ddd-radius-xl); } - .r-rounded { border-radius: var(--ddd-radius-rounded); } - .r-circle { border-radius: var(--ddd-radius-circle); } + .r-0 { + border-radius: var(--ddd-radius-0); + } + .r-xs { + border-radius: var(--ddd-radius-xs); + } + .r-sm { + border-radius: var(--ddd-radius-sm); + } + .r-md { + border-radius: var(--ddd-radius-md); + } + .r-lg { + border-radius: var(--ddd-radius-lg); + } + .r-xl { + border-radius: var(--ddd-radius-xl); + } + .r-rounded { + border-radius: var(--ddd-radius-rounded); + } + .r-circle { + border-radius: var(--ddd-radius-circle); + } - .bg-transparent { background-color: transparent; } - .bg-white { background-color: var(--ddd-theme-polaris-white); } - .bg-gradient-navBar{background: var(--ddd-theme-polaris-gradient-navBar);} - .bg-gradient-footer{background: var(--ddd-theme-polaris-gradient-footer);} - .bg-gradient-newsFeature{background: var(--ddd-theme-polaris-gradient-newsFeature);} - .bg-gradient-buttons{background: var(--ddd-theme-polaris-gradient-buttons);} - .bg-gradient-hero{background: var(--ddd-theme-polaris-gradient-hero);} - .bg-gradient-hero2{background: var(--ddd-theme-polaris-gradient-hero2);} - `]}}};class DDD extends(DDDSuper(d)){constructor(){super(),this.loadDDDFonts(DDDFonts)}static get tag(){return"d-d-d"}}customElements.define(DDD.tag,DDD);export{DDD};globalThis.DDDSharedStyles=globalThis.DDDSharedStyles||{},globalThis.DDDSharedStyles.requestAvailability=()=>{if(null==globalThis.DDDSharedStyles.instance&&globalThis.document){let d=DDD.styles.map((d=>d.cssText)).join("");globalThis.DDDSharedStyles.instance=globalThis.document.createElement("style"),globalThis.DDDSharedStyles.instance.classList.add("ddd-global-styles"),globalThis.DDDSharedStyles.instance.innerHTML=`${d}`,globalThis.document.head.appendChild(globalThis.DDDSharedStyles.instance)}return globalThis.DDDSharedStyles.instance};export const DDDSharedStylesGlobal=globalThis.DDDSharedStyles.requestAvailability(); \ No newline at end of file + .bg-transparent { + background-color: transparent; + } + .bg-white { + background-color: var(--ddd-theme-polaris-white); + } + .bg-gradient-navBar { + background: var(--ddd-theme-polaris-gradient-navBar); + } + .bg-gradient-footer { + background: var(--ddd-theme-polaris-gradient-footer); + } + .bg-gradient-newsFeature { + background: var(--ddd-theme-polaris-gradient-newsFeature); + } + .bg-gradient-buttons { + background: var(--ddd-theme-polaris-gradient-buttons); + } + .bg-gradient-hero { + background: var(--ddd-theme-polaris-gradient-hero); + } + .bg-gradient-hero2 { + background: var(--ddd-theme-polaris-gradient-hero2); + } + `]}}};class DDD extends(DDDSuper(d)){constructor(){super(),this.loadDDDFonts(DDDFonts)}static get tag(){return"d-d-d"}}customElements.define(DDD.tag,DDD);export{DDD};globalThis.DDDSharedStyles=globalThis.DDDSharedStyles||{},globalThis.DDDSharedStyles.requestAvailability=()=>{if(null==globalThis.DDDSharedStyles.instance&&globalThis.document){let d=DDD.styles.map((d=>d.cssText)).join("");globalThis.DDDSharedStyles.instance=globalThis.document.createElement("style"),globalThis.DDDSharedStyles.instance.classList.add("ddd-global-styles"),globalThis.DDDSharedStyles.instance.innerHTML=`${d}`,globalThis.document.head.appendChild(globalThis.DDDSharedStyles.instance)}return globalThis.DDDSharedStyles.instance};export const DDDSharedStylesGlobal=globalThis.DDDSharedStyles.requestAvailability(); \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-docs.js b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-docs.js index c97b41a883..8621894fe4 100644 --- a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-docs.js +++ b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-docs.js @@ -2,10 +2,9 @@ * Copyright 2024 * @license , see License.md for full fs. */ -import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d-d-d.js";export const styleGuideTopics={Borders:"Borders",Breakpoints:"Breakpoints",PolarisColors:"PolarisColors",PolarisFunctionalColors:"PolarisFunctionalColors",Gradients:"Gradients",Radius:"Radius",Shadows:"Shadows",Spacing:"Spacing",Typography:"Typography",RichText:"RichText"};class DDDocs extends a{constructor(){super(),this.option="*",this.options=Object.keys(styleGuideTopics)}static get properties(){return{option:{type:String},options:{type:Array}}}static get styles(){return[...super.styles,t` +import{html as s,css as a}from"../../../lit/index.js";import{DDD as t}from"../d-d-d.js";export const styleGuideTopics={Borders:"Borders",Breakpoints:"Breakpoints",PolarisColors:"PolarisColors",PolarisFunctionalColors:"PolarisFunctionalColors",Gradients:"Gradients",Radius:"Radius",Shadows:"Shadows",Spacing:"Spacing",Typography:"Typography",RichText:"RichText"};class DDDocs extends t{constructor(){super(),this.option="*",this.options=Object.keys(styleGuideTopics)}static get properties(){return{option:{type:String},options:{type:Array}}}static get styles(){return[...super.styles,a` /* used for demo */ - :host{ - background-color: var(--ddd-theme-polaris-background); + :host { } .flex { @@ -23,7 +22,7 @@ import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d- display: grid; grid-template-columns: 0.5fr 1.5fr; } - .grid-2-narrow{ + .grid-2-narrow { display: grid; grid-template-columns: 0.1fr 5fr; } @@ -54,15 +53,15 @@ import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d- .text-center { text-align: center; } - .overflow-hidden h3{ + .overflow-hidden h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - .grid-2-narrow p{ + .grid-2-narrow p { margin: auto 0; } - + tr th { background-color: var(--ddd-theme-polaris-pughBlue); padding: 10px 50px; @@ -83,17 +82,43 @@ import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d- overflow: hidden; border: 1px solid var(--ddd-theme-polaris-limestoneLight); } - td:first-child, th:first-child { + td:first-child, + th:first-child { border-left: none; } `]}renderBorders(){return s`

Borders

Available Borders

-

Class: xs

-

Class: sm

-

Class: md

-

Class: lg

+
+

+

Class: b-xs

+

+ css variable: --ddd-border-xs +

+
+
+

+

Class: b-sm

+

+ css variable: --ddd-border-sm +

+
+
+

+

Class: b-md

+

+ css variable: --ddd-border-md +

+
+
+

+

Class: b-lg

+

+ css variable: --ddd-border-lg +

+
+
`}renderBreakpoints(){return s`

Breakpoints

Available Breakpoints

@@ -104,202 +129,520 @@ import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d- Size - - sm - 360px - - - md - 768px - - - lg - 1080px - - - xl - 1440px - + + sm + 360px + + + md + 768px + + + lg + 1080px + + + xl + 1440px +

Accessible via css variables: --ddd-breakpoint-x

`}renderPolarisColors(){return s` -

Polaris Colors

-

Available Colors from the Polaris Theme

+

Polaris Colors

+

+ Available Colors from the Polaris Theme +

-
--ddd-theme-polaris-beaverBlue
-
-
--ddd-theme-polaris-beaver70
-
-
--ddd-theme-polaris-beaver80
-
-
--ddd-theme-polaris-landgrantBrown
-
-
--ddd-theme-polaris-nittanyNavy
-
-
--ddd-theme-polaris-navy40
-
-
--ddd-theme-polaris-navy60
-
-
--ddd-theme-polaris-navy65
-
-
--ddd-theme-polaris-navy70
-
-
--ddd-theme-polaris-navy80
-
-
--ddd-theme-polaris-potentialMidnight
-
-
--ddd-theme-polaris-potential0
-
-
--ddd-theme-polaris-potential50
-
-
--ddd-theme-polaris-potential70
-
-
--ddd-theme-polaris-potential75
-
-
--ddd-theme-polaris-pughBlue
-
-
--ddd-theme-polaris-coalyGray
-
-
--ddd-theme-polaris-keystoneYellow
-
-
--ddd-theme-polaris-slateGray
-
-
--ddd-theme-polaris-slateLight
-
-
--ddd-theme-polaris-slateMaxLight
-
-
--ddd-theme-polaris-skyBlue
-
-
--ddd-theme-polaris-skyLight
-
-
--ddd-theme-polaris-skyMaxLight
-
-
--ddd-theme-polaris-limestoneGray
-
-
--ddd-theme-polaris-limestoneLight
-
-
--ddd-theme-polaris-limestoneMaxLight
-
-
--ddd-theme-polaris-white
-
-
--ddd-theme-polaris-shrineLight
-
-
--ddd-theme-polaris-shrineMaxLight
-
-
--ddd-theme-polaris-creekTeal
-
-
--ddd-theme-polaris-creekLight
-
-
--ddd-theme-polaris-creekMaxLight
-
-
--ddd-theme-polaris-shrineTan
-
-
--ddd-theme-polaris-roarGolden
-
-
--ddd-theme-polaris-roarLight
-
-
--ddd-theme-polaris-roarMaxlight
-
-
--ddd-theme-polaris-forestGreen
-
-
--ddd-theme-polaris-athertonViolet
-
-
--ddd-theme-polaris-original87Pink
-
-
--ddd-theme-polaris-discoveryCoral
-
-
--ddd-theme-polaris-futureLime
-
-
--ddd-theme-polaris-wonderPurple
-
-
--ddd-theme-polaris-inventOrange
-
-
--ddd-theme-polaris-opportunityGreen
-
-
--ddd-theme-polaris-accent
-
+
--ddd-theme-polaris-beaverBlue
+
+
--ddd-theme-polaris-beaver70
+
+
--ddd-theme-polaris-beaver80
+
+
--ddd-theme-polaris-landgrantBrown
+
+
--ddd-theme-polaris-nittanyNavy
+
+
--ddd-theme-polaris-navy40
+
+
--ddd-theme-polaris-navy60
+
+
--ddd-theme-polaris-navy65
+
+
--ddd-theme-polaris-navy70
+
+
--ddd-theme-polaris-navy80
+
+
--ddd-theme-polaris-potentialMidnight
+
+
--ddd-theme-polaris-potential0
+
+
--ddd-theme-polaris-potential50
+
+
--ddd-theme-polaris-potential70
+
+
--ddd-theme-polaris-potential75
+
+
--ddd-theme-polaris-pughBlue
+
+
--ddd-theme-polaris-coalyGray
+
+
--ddd-theme-polaris-keystoneYellow
+
+
--ddd-theme-polaris-slateGray
+
+
--ddd-theme-polaris-slateLight
+
+
--ddd-theme-polaris-slateMaxLight
+
+
--ddd-theme-polaris-skyBlue
+
+
--ddd-theme-polaris-skyLight
+
+
--ddd-theme-polaris-skyMaxLight
+
+
--ddd-theme-polaris-limestoneGray
+
+
--ddd-theme-polaris-limestoneLight
+
+
--ddd-theme-polaris-limestoneMaxLight
+
+
--ddd-theme-polaris-white
+
+
--ddd-theme-polaris-shrineLight
+
+
--ddd-theme-polaris-shrineMaxLight
+
+
--ddd-theme-polaris-creekTeal
+
+
--ddd-theme-polaris-creekLight
+
+
--ddd-theme-polaris-creekMaxLight
+
+
--ddd-theme-polaris-shrineTan
+
+
--ddd-theme-polaris-roarGolden
+
+
--ddd-theme-polaris-roarLight
+
+
--ddd-theme-polaris-roarMaxlight
+
+
--ddd-theme-polaris-forestGreen
+
+
--ddd-theme-polaris-athertonViolet
+
+
--ddd-theme-polaris-original87Pink
+
+
--ddd-theme-polaris-discoveryCoral
+
+
--ddd-theme-polaris-futureLime
+
+
--ddd-theme-polaris-wonderPurple
+
+
--ddd-theme-polaris-inventOrange
+
+
--ddd-theme-polaris-opportunityGreen
+
+
--ddd-theme-polaris-accent
+
`}renderPolarisFunctionalColors(){return s` -

Polaris Functional Colors

-

Available Functional Colors from the Polaris Theme

+

Polaris Functional Colors

+

+ Available Functional Colors from the Polaris Theme +

--ddd-theme-polaris-link
-
+
--ddd-theme-polaris-link80
-
+
--ddd-theme-polaris-linkLight
-
+
--ddd-theme-polaris-disabled
-
+
--ddd-theme-polaris-error
-
+
--ddd-theme-polaris-errorLight
-
+
--ddd-theme-polaris-warning
-
+
--ddd-theme-polaris-warningLight
-
+
--ddd-theme-polaris-info
-
+
--ddd-theme-polaris-infoLight
-
+
--ddd-theme-polaris-success
-
+
--ddd-theme-polaris-successLight
-
+
--ddd-theme-polaris-alertImmediate
-
+
--ddd-theme-polaris-alertUrgent
-
+
--ddd-theme-polaris-alertAllClear
-
+
--ddd-theme-polaris-alertNonEmergency
-
+
`}renderGradients(){return s`

Gradients

Available Gradients from the Polaris Theme

-

class: bg-gradient-navBar

-

class: bg-gradient-footer

-

class: bg-gradient-newsFeature

-

class: bg-gradient-buttons

-

class: bg-gradient-hero

-

class: bg-gradient-hero2

+

+

class: bg-gradient-navBar

+

css variable: --ddd-theme-polaris-gradient-navBar

+
+
+

class: bg-gradient-footer

+

css variable: --ddd-theme-polaris-gradient-footer

+
+

+

class: bg-gradient-newsFeature

+

css variable: --ddd-theme-polaris-gradient-newsFeature

+
+

+

class: bg-gradient-buttons

+

css variable: --ddd-theme-polaris-gradient-buttons

+
+

+

class: bg-gradient-hero

+

css variable: --ddd-theme-polaris-gradient-hero

+
+

+

class: bg-gradient-hero2

+

css variable: --ddd-theme-polaris-gradient-hero2

+
`}renderRadius(){return s`

Radius

Available Radius classes

-

class: r-xs

-

class: r-sm

-

class: r-md

-

class: r-lg

-

class: r-xl

-

class: r-rounded

-

class: r-circle

+

+

class: r-xs

+

css variable: --ddd-radius-xs

+
+

+

class: r-sm

+

css variable: --ddd-radius-sm

+
+

+

class: r-md

+

css variable: --ddd-radius-md

+
+

+

class: r-lg

+

css variable: --ddd-radius-lg

+
+

+

class: r-xl

+

css variable: --ddd-radius-xl

+
+

+

class: r-rounded

+

css variable: --ddd-radius-rounded

+
+
+

class: r-circle

+

css variable: --ddd-radius-circle

+
`}renderShadows(){return s`

Shadows

Available Shadow classes

-

class: bs-xs

-

class: bs-sm

-

class: bs-md

-

class: bs-lg

+

+

class: bs-xs

+

css variable: --ddd-boxShadow-xs

+
+

+

class: bs-sm

+

css variable: --ddd-boxShadow-sm

+
+

+

class: bs-md

+

css variable: --ddd-boxShadow-md

+
+

+

class: bs-lg

+

css variable: --ddd-boxShadow-lg

+
-

Text Shadow

class: bs-xs

-

Text Shadow

class: bs-sm

-

Text Shadow

class: bs-md

-

Text Shadow

class: bs-lg

+

Text Shadow

+

class: bs-xs

+

css variable: --ddd-textShadow-xs

+
+

Text Shadow

+

class: bs-sm

+

css variable: --ddd-textShadow-sm

+
+

Text Shadow

+

class: bs-md

+

css variable: --ddd-textShadow-md

+
+

Text Shadow

+

class: bs-lg

+

css variable: --ddd-textShadow-lg

+
`}renderSpacing(){return s` -

Spacing

-

Available Spacing classes

+

Spacing

+

Available Spacing classes

+
+ CSS Variable:--ddd-spacing-x (1-30) +

Class Name

Value

@@ -464,168 +807,476 @@ import{html as s,css as t}from"../../../lit/index.js";import{DDD as a}from"../d- Accessible using format: (m or p)(side [optional])-x -
+
Sides: Top (t), Right (r), Bottom (b), Left (l), X (x), Y (y)
+
+ Example: mt-1 = margin-top: 4px +
`}renderTypography(){return s`

Typography

Available Typefaces

-

Primary Font: Roboto

-

Class: ddd-font-primary

-

Weights: 400(regular), 500(medium), 700(bold), 900(black)

+

+ Primary Font: + Roboto (ddd-font-primary) [--ddd-font-primary] +

+

+ Weights: 400 (fw-1) [--ddd-font-primary-regular], + 500 (fw-2) [--ddd-font-primary-medium], + << Default >> 700 (fw-3) [--ddd-font-primary-bold], + 900 (fw-4) [--ddd-font-primary-black] +

-
-

16

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

18

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

24

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

28

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

36

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

40

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

44

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

48

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

56

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

64

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

72

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+

16

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

18

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

20

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

24

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

28

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

32

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

36

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

40

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

44

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

48

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

56

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

64

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

72

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

-

Primary Font: Roboto Slab

-

Class: ddd-font-secondary

-

Weights: 700(bold)

+

+ Primary Font: + Roboto Slab (ddd-font-secondary) [--ddd-font-secondary] +

+

+ Weights: + 700 (fw-3) [--ddd-font-secondary-bold] +

-
-

16

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

18

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

24

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

28

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

36

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

40

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

44

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

48

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

56

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

64

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

72

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+

16

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

18

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

20

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

24

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

28

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

32

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

36

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

40

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

44

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

48

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

56

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

64

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

72

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

-

Primary Font: Roboto Condesned

-

Class: ddd-font-nav

-

Weights: 300(light), 700(bold)

-
-
-

16

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

18

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

20

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

24

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

28

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

32

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

36

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

40

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

44

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

48

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

56

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

64

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

72

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

Accessing Classes

-

Font Families

-

Classes: ddd-font-primary, ddd-font-secondary, ddd-font-nav

-

Font Weights

-

Classes: fw-0, fw-1, fw-2, fw-3, fw-4

-

Font Sizes

-

Classes: fs-x (4xs, 3xs, 2xs, xs, s, ms, m, ml, l, xl, 2xl, 3xl, 4xl)

-

Letter Spacing

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassValueExample
ls-16-sm0.08pxDDD-FLEX
ls-18-sm0.09pxDDD-FLEX
ls-20-sm0.1pxDDD-FLEX
ls-24-sm0.12pxDDD-FLEX
ls-28-sm0.14pxDDD-FLEX
ls-32-sm0.16pxDDD-FLEX
ls-36-sm0.18pxDDD-FLEX
ls-40-sm0.2pxDDD-FLEX
ls-44-sm0.22pxDDD-FLEX
ls-48-sm0.24pxDDD-FLEX
ls-56-sm0.28pxDDD-FLEX
ls-64-sm0.32pxDDD-FLEX
ls-72-sm0.36pxDDD-FLEX
ls-16-lg0.24pxDDD-FLEX
ls-18-lg0.27pxDDD-FLEX
ls-20-lg0.3pxDDD-FLEX
ls-24-lg0.36pxDDD-FLEX
ls-28-lg0.42pxDDD-FLEX
ls-32-lg0.48pxDDD-FLEX
ls-36-lg0.54pxDDD-FLEX
ls-40-lg0.6pxDDD-FLEX
ls-44-lg0.66pxDDD-FLEX
ls-48-lg0.72pxDDD-FLEX
ls-56-lg0.84pxDDD-FLEX
ls-64-lg0.96pxDDD-FLEX
ls-72-lg1.08pxDDD-FLEX
-

Line Height

-
-
-

So, I came across your post because I was facing the same issue, but I've found a solution.

-

Class: lh-120

-
-
-

So, I came across your post because I was facing the same issue, but I've found a solution.

-

Class: lh-140

+

+ Primary Font: + Roboto Condensed (ddd-font-nav) [--ddd-font-navigation] +

+

+ Weights: + 300 (fw-0) [--ddd-font-navigation-light], + 400 (fw-1) [--ddd-font-navigation-regular], + 700 (fw-3) [--ddd-font-navigation-bold] +

-
-

So, I came across your post because I was facing the same issue, but I've found a solution.

-

Class: lh-150

+
+

16

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

18

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

20

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

24

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

28

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

32

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

36

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

40

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

44

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

48

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

56

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

64

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

72

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

-
-

So, I came across your post because I was facing the same issue, but I've found a solution.

-

Class: lh-auto

+
+

Letter Spacing

+
CSS Variable is same as class name, with '--ddd-' prefix
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassValueExample
ls-16-sm0.08pxDDD-FLEX
ls-18-sm0.09pxDDD-FLEX
ls-20-sm0.1pxDDD-FLEX
ls-24-sm0.12pxDDD-FLEX
ls-28-sm0.14pxDDD-FLEX
ls-32-sm0.16pxDDD-FLEX
ls-36-sm0.18pxDDD-FLEX
ls-40-sm0.2pxDDD-FLEX
ls-44-sm0.22pxDDD-FLEX
ls-48-sm0.24pxDDD-FLEX
ls-56-sm0.28pxDDD-FLEX
ls-64-sm0.32pxDDD-FLEX
ls-72-sm0.36pxDDD-FLEX
ls-16-lg0.24pxDDD-FLEX
ls-18-lg0.27pxDDD-FLEX
ls-20-lg0.3pxDDD-FLEX
ls-24-lg0.36pxDDD-FLEX
ls-28-lg0.42pxDDD-FLEX
ls-32-lg0.48pxDDD-FLEX
ls-36-lg0.54pxDDD-FLEX
ls-40-lg0.6pxDDD-FLEX
ls-44-lg0.66pxDDD-FLEX
ls-48-lg0.72pxDDD-FLEX
ls-56-lg0.84pxDDD-FLEX
ls-64-lg0.96pxDDD-FLEX
ls-72-lg1.08pxDDD-FLEX
+

Line Height

+
+
+

+ So, I came across your post because I was facing the same issue, + but I've found a solution. +

+

Class: lh-120

+

+ CSS Variable: --ddd-lh-120 +

+
+
+

+ So, I came across your post because I was facing the same issue, + but I've found a solution. +

+

Class: lh-140

+

+ CSS Variable: --ddd-lh-140 +

+
+
+

+ So, I came across your post because I was facing the same issue, + but I've found a solution. +

+

Class: lh-150

+

+ CSS Variable: --ddd-lh-150 +

+
+
+

+ So, I came across your post because I was facing the same issue, + but I've found a solution. +

+

Class: lh-auto

+

+ CSS Variable: N/A +

+
+
-
-
`}renderRichText(){return s` -

Rich Text

-

Rich text formatting and other data displays

-
-

h1 Heading

-

h2 Heading

-

h3 Heading

-

h4 Heading

-
h5 Heading
-
h6 Heading
-

Body text - It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of leteters, as opposed to using 'Content here, content here', making it look like readable English.

-

HyperLink

-

Bold Text

-

Italic Text

- Underlined Text -

Unordered List

-
    -
  • Item 1
  • -
  • Item 2
  • -
  • Item 3
  • -
-

Ordered List

-
    -
  1. Item 1
  2. -
  3. Item 2
  4. -
  5. Item 3
  6. -
-
The Pennsylvania State University is a multi-campus, land-grant, public research university that educates students from around the world and supports individuals and communities through integrated programs of teaching, research, and service.
-
-

Sample Text

-
- - -
U.S. News & World Report

Details text

- `}render(){if(!this.options.includes(this.option))return s`${this.options.map((t=>{const a=this[`render${t}`];return"function"==typeof a?a.call(this):(console.error(`Render method for option "${t}" not found.`),s``)}))}`;{const t=this[`render${this.option}`];if("function"==typeof t)return s`${t.call(this)}`;console.error(`Render method for option "${this.option}" not found.`)}}static get tag(){return"d-d-docs"}static get haxProperties(){return{api:"1",type:"element",editingElement:"core",hideDefaultSettings:!1,canScale:!0,canPosition:!0,canEditSource:!0,contentEditable:!1,gizmo:{title:"Design, Develop, Destroy",description:"Design system implementation for HAX",icon:"hax:hax2022",color:"purple",tags:["Other","developer","design"],handles:[],meta:{author:"HAXTheWeb core team"}},settings:{configure:[{property:"option",title:"Option to render",type:"select",options:{"*":"Full styleguide",...styleGuideTopics}}],advanced:[],developer:[]},saveOptions:{unsetAttributes:[]},documentation:{howTo:null,purpose:null},demoSchema:[{tag:"d-d-docs",content:"",properties:{}}]}}}customElements.define(DDDocs.tag,DDDocs);export{DDDocs}; \ No newline at end of file +

Rich Text

+

+ Rich text formatting and other data displays +

+
+

h1 Heading

+

h2 Heading

+

h3 Heading

+

h4 Heading

+
h5 Heading
+
h6 Heading
+

+ Body text - It is a long established fact that a reader will be + distracted by the readable content of a page when looking at its + layout. The point of using Lorem Ipsum is that it has a more-or-less + normal distribution of leteters, as opposed to using 'Content here, + content here', making it look like readable English. +

+

HyperLink

+

Bold Text

+

Italic Text

+ Underlined Text +

Unordered List

+
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
+

Ordered List

+
    +
  1. Item 1
  2. +
  3. Item 2
  4. +
  5. Item 3
  6. +
+
+ The Pennsylvania State University is a multi-campus, land-grant, + public research university that educates students from around the + world and supports individuals and communities through integrated + programs of teaching, research, and service. +
+

Sample Text

+
+ +
+ U.S. News & World Report +

Details text

+
+

+ This is an example of code:Console.log("Hello World!"); + in a paragraph +

+ Here is an example of a block of code on it's own, using class + 'block-code', redundant, but avoids common 'block' class name +
+Here is an    example of a    block using the    'pre'    tag on it's    own
+

Here is a good example of some Highlighted Text

+

+ Here is an example of an abbreviation: + Penn State +

+
+ `}render(){if(!this.options.includes(this.option))return s`${this.options.map((a=>{const t=this[`render${a}`];return"function"==typeof t?t.call(this):(console.error(`Render method for option "${a}" not found.`),s``)}))}`;{const a=this[`render${this.option}`];if("function"==typeof a)return s`${a.call(this)}`;console.error(`Render method for option "${this.option}" not found.`)}}static get tag(){return"d-d-docs"}static get haxProperties(){return{api:"1",type:"element",editingElement:"core",hideDefaultSettings:!1,canScale:!0,canPosition:!0,canEditSource:!0,contentEditable:!1,gizmo:{title:"Design, Develop, Destroy",description:"Design system implementation for HAX",icon:"hax:hax2022",color:"purple",tags:["Other","developer","design"],handles:[],meta:{author:"HAXTheWeb core team"}},settings:{configure:[{property:"option",title:"Option to render",type:"select",options:{"*":"Full styleguide",...styleGuideTopics}}],advanced:[],developer:[]},saveOptions:{unsetAttributes:[]},documentation:{howTo:null,purpose:null},demoSchema:[{tag:"d-d-docs",content:"",properties:{}}]}}}customElements.define(DDDocs.tag,DDDocs);export{DDDocs}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/figure-label/lib/figure-label-proposed.js b/build/es6/node_modules/@lrnwebcomponents/figure-label/lib/figure-label-proposed.js index bcc01facc6..b7e75e34e2 100644 --- a/build/es6/node_modules/@lrnwebcomponents/figure-label/lib/figure-label-proposed.js +++ b/build/es6/node_modules/@lrnwebcomponents/figure-label/lib/figure-label-proposed.js @@ -2,7 +2,7 @@ * Copyright 2019 PSU * @license Apache-2.0, see License.md for full text. */ -import{html as e,css as i}from"../../../lit/index.js";import{DDD as t}from"../../d-d-d/d-d-d.js";class FigureLabelProposed extends t{static get styles(){return[...super.styles,i` +import{html as e,css as i,LitElement as t}from"../../../lit/index.js";import{DDDSuper as d}from"../../d-d-d/d-d-d.js";class FigureLabelProposed extends(d(t)){static get styles(){return[...super.styles,i` :host { display: block; } @@ -20,7 +20,7 @@ import{html as e,css as i}from"../../../lit/index.js";import{DDD as t}from"../.. display: flex; align-items: center; font-family: var(--ddd-font-primary); - background-color: var(--ddd-theme-polaris-limestoneLight); + background-color: var(--ddd-component-figure-label-title, var(--ddd-theme-accent-color , var(--ddd-theme-polaris-limestoneLight))); font-size: var(--ddd-font-size-4xs); padding: var(--ddd-spacing-3); font-weight: var(--ddd-font-primary-bold); @@ -28,11 +28,11 @@ import{html as e,css as i}from"../../../lit/index.js";import{DDD as t}from"../.. #description { font-family: var(--ddd-font-primary); - border: 1px solid var(--ddd-theme-polaris-limestoneLight); + border-color: var(--ddd-component-figure-label-border, var(--ddd-theme-accent-color , var(--ddd-theme-polaris-limestoneLight))); padding: var(--ddd-spacing-3); font-size: var(--ddd-font-size-4xs); } `]}render(){return e`
${this.title}
-
${this.description}
-
`}static get haxProperties(){return{canScale:!0,canPosition:!0,canEditSource:!0,gizmo:{title:"Figure label",description:"Figure label element to mark media assets within content.",icon:"icons:android",color:"green",tags:["content","figure","a11y","accessibility","image","caption","description"],meta:{author:"HAXTheWeb core team",owner:"PSU"}},settings:{configure:[{property:"title",description:"",inputMethod:"textfield",required:!1,icon:"icons:android"},{property:"description",description:"",inputMethod:"textfield",required:!1,icon:"icons:android"}],advanced:[]}}}static get properties(){return{...super.properties,title:{name:"title",type:String,value:"",reflectToAttribute:!1,observer:!1},description:{name:"description",type:String,value:"",reflectToAttribute:!1,observer:!1}}}static get tag(){return"figure-label-proposed"}}customElements.define(FigureLabelProposed.tag,FigureLabelProposed);export{FigureLabelProposed}; \ No newline at end of file +
${this.description}
+
`}static get haxProperties(){return{canScale:!0,canPosition:!0,canEditSource:!0,gizmo:{title:"Figure label",description:"Figure label element to mark media assets within content.",icon:"icons:android",color:"green",tags:["content","figure","a11y","accessibility","image","caption","description"],meta:{author:"HAXTheWeb core team",owner:"PSU"}},settings:{configure:[{property:"title",description:"",inputMethod:"textfield",required:!1,icon:"icons:android"},{property:"description",description:"",inputMethod:"textfield",required:!1,icon:"icons:android"}],advanced:[]}}}static get properties(){return{...super.properties,title:{type:String},description:{type:String}}}static get tag(){return"figure-label-proposed"}}customElements.define(FigureLabelProposed.tag,FigureLabelProposed);export{FigureLabelProposed}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/grid-plate/grid-plate.js b/build/es6/node_modules/@lrnwebcomponents/grid-plate/grid-plate.js index 0f60fc8819..fb3c68698e 100644 --- a/build/es6/node_modules/@lrnwebcomponents/grid-plate/grid-plate.js +++ b/build/es6/node_modules/@lrnwebcomponents/grid-plate/grid-plate.js @@ -216,4 +216,4 @@ import{LitElement as t,html as e,css as a}from"../../lit/index.js";import"../res
`))}
- `}_drop(t){this.dataHaxRay&&(this.querySelectorAll(".active").forEach((t=>{t.classList.remove("active")})),this.shadowRoot.querySelectorAll(".active").forEach((t=>{t.classList.remove("active")})))}_dragEnter(t){this.dataHaxRay&&t.target.classList.add("active")}_dragleave(t){this.dataHaxRay&&t.target.classList.remove("active")}static get tag(){return"grid-plate"}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),setTimeout((()=>{this.ready=!0}),100),this.resize(),window.dispatchEvent(new CustomEvent("responsive-element",{detail:{element:this,attribute:"responsive-size",relativeToParent:!1,sm:this.breakpointSm,md:this.breakpointMd,lg:this.breakpointLg,xl:this.breakpointXl}})),this.__columnWidths=this._getColumnWidths(this.responsiveSize,this.layout,this.layouts,this.disableResponsive)}static get haxProperties(){return{type:"grid",canScale:!0,canPosition:!0,canEditSource:!0,contentEditable:!1,gizmo:{title:"Column layout",description:"Layout material in simple columns",icon:"hax:3-3-3-3",color:"grey",tags:["Layout","content","grid","column","row","responsive","gridplate"],handles:[],meta:{author:"HAXTheWeb core team",owner:"The Pennsylvania State University"}},settings:{configure:[{property:"layout",title:"Column Layout",description:"Style to present these items (may change for small screens)",inputMethod:"select",options:(new GridPlateLayoutOptions).options},{property:"disableResponsive",title:"Disable responsive",description:"Check box to force layout to stick regardless of screen size",inputMethod:"boolean"},{property:"itemPadding",title:"Padding top",description:"Padding inside each item",step:8,max:128,min:0,inputMethod:"slider",suffix:"px"},{property:"itemMargin",title:"Item margins",description:"Margin between items",step:8,max:64,min:0,inputMethod:"slider",suffix:"px"}],advanced:[],developer:[{property:"breakpointSm",title:"Small Breakpoint",description:"Anything less than this number (in pixels) will render with the smallest version of this layout",inputMethod:"textfield",validationType:"number"},{property:"breakpointMd",title:"Medium Breakpoint",description:"Anything less than this number (in pixels) will render with the small version of this layout",inputMethod:"textfield",validationType:"number"},{property:"breakpointLg",title:"Large Breakpoint",description:"Anything less than this number (in pixels) will render with the medium version of this layout.",inputMethod:"textfield",validationType:"number"},{property:"breakpointXl",title:"Extra-Large Breakpoint",description:"Anything less than this number (in pixels) will render with the large version of this layout. Anything greater than or equal to this number will display with the maximum number of columns for this layout.",inputMethod:"textfield",validationType:"number"}]},saveOptions:{unsetAttributes:["ready","layouts","columns","options","responsive-width"]},demoSchema:[{tag:"grid-plate",properties:{disableResponsive:!0,itemMargin:16,itemPadding:16},content:'

Column one content to replace

Column two content to replace

'}]}}static get properties(){return{itemPadding:{type:Number,reflect:!0,attribute:"item-padding"},itemMargin:{type:Number,reflect:!0,attribute:"item-margin"},breakpointSm:{type:Number,attribute:"breakpoint-sm"},breakpointMd:{type:Number,attribute:"breakpoint-md"},breakpointLg:{type:Number,attribute:"breakpoint-lg"},breakpointXl:{type:Number,attribute:"breakpoint-xl"},columns:{type:Number,reflect:!0},dataHaxRay:{type:String,attribute:"data-hax-ray",reflect:!0},disableResponsive:{type:Boolean,reflect:!0,attribute:"disable-responsive"},layout:{type:String,reflect:!0},layouts:{type:Object},ready:{type:Boolean,reflect:!0},responsiveSize:{type:String,reflect:!0,attribute:"responsive-size"},__columnWidths:{type:String}}}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{switch(["responsiveSize","layout","layouts","disableResponsive","itemPadding","itemMargin"].includes(e)&&(clearTimeout(this.__calcWidthLock),this.__calcWidthLock=setTimeout((()=>{this.__columnWidths=this._getColumnWidths(this.responsiveSize,this.layout,this.layouts,this.disableResponsive)}),0)),e){case"itemMargin":this[e]?this.style.setProperty("--grid-plate-item-margin",this[e]+"px"):this.style.removeProperty("--grid-plate-item-margin");break;case"itemPadding":this[e]?this.style.setProperty("--grid-plate-item-padding",this[e]+"px"):this.style.removeProperty("--grid-plate-item-padding");break;case"__columnWidths":this.resize();break;case"disableResponsive":this.dispatchEvent(new CustomEvent("disable-responsive-changed",{detail:this[e]}))}}))}resize(){window.dispatchEvent(new Event("resize"))}_getColumnWidths(t="sm",e="1-1",a,i){if(a){let o=a[e],r=!1!==i?"xl":t,s={12:"1","8/4":"2-1","6/6":"1-1","4/8":"1-2","4/4/4":"1-1-1","3/3/3/3":"1-1-1-1"}[e];if(void 0!==o&&void 0!==o[r])return a[e][r];if(void 0!==a[s]&&void 0!==a[s][r])return a[s][r];if(void 0!==a["1-1"])return a["1-1"][r]}}_getColumnWidth(t,e){return void 0!==e&&void 0!==e[t]?"width:"+e[t]:"min-height: unset"}_getColumns(t){return t.length}haxactiveElementChanged(t,e){}}customElements.define(GridPlate.tag,GridPlate);export{GridPlate}; \ No newline at end of file + `}_drop(t){this.dataHaxRay&&(this.querySelectorAll(".active").forEach((t=>{t.classList.remove("active")})),this.shadowRoot.querySelectorAll(".active").forEach((t=>{t.classList.remove("active")})))}_dragEnter(t){this.dataHaxRay&&t.target.classList.add("active")}_dragleave(t){this.dataHaxRay&&t.target.classList.remove("active")}static get tag(){return"grid-plate"}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),setTimeout((()=>{this.ready=!0}),100),this.resize(),window.dispatchEvent(new CustomEvent("responsive-element",{detail:{element:this,attribute:"responsive-size",relativeToParent:!1,sm:this.breakpointSm,md:this.breakpointMd,lg:this.breakpointLg,xl:this.breakpointXl}})),this.__columnWidths=this._getColumnWidths(this.responsiveSize,this.layout,this.layouts,this.disableResponsive)}static get haxProperties(){return{type:"grid",canScale:!0,canPosition:!0,canEditSource:!0,contentEditable:!1,gizmo:{title:"Column layout",description:"Layout material in simple columns",icon:"hax:3-3-3-3",color:"grey",tags:["Layout","content","grid","column","row","responsive","gridplate"],handles:[],meta:{author:"HAXTheWeb core team",owner:"The Pennsylvania State University"}},settings:{configure:[{property:"layout",title:"Column Layout",description:"Style to present these items (may change for small screens)",inputMethod:"select",options:(new GridPlateLayoutOptions).options},{property:"disableResponsive",title:"Disable responsive",description:"Check box to force layout to stick regardless of screen size",inputMethod:"boolean"},{property:"itemPadding",title:"Item Padding",description:"Padding inside each item",step:8,max:128,min:0,inputMethod:"slider",suffix:"px"},{property:"itemMargin",title:"Item margins",description:"Margin between items",step:8,max:64,min:0,inputMethod:"slider",suffix:"px"}],advanced:[],developer:[{property:"breakpointSm",title:"Small Breakpoint",description:"Anything less than this number (in pixels) will render with the smallest version of this layout",inputMethod:"textfield",validationType:"number"},{property:"breakpointMd",title:"Medium Breakpoint",description:"Anything less than this number (in pixels) will render with the small version of this layout",inputMethod:"textfield",validationType:"number"},{property:"breakpointLg",title:"Large Breakpoint",description:"Anything less than this number (in pixels) will render with the medium version of this layout.",inputMethod:"textfield",validationType:"number"},{property:"breakpointXl",title:"Extra-Large Breakpoint",description:"Anything less than this number (in pixels) will render with the large version of this layout. Anything greater than or equal to this number will display with the maximum number of columns for this layout.",inputMethod:"textfield",validationType:"number"}]},saveOptions:{unsetAttributes:["ready","layouts","columns","options","responsive-width"]},demoSchema:[{tag:"grid-plate",properties:{disableResponsive:!0,itemMargin:16,itemPadding:16},content:'

Column one content to replace

Column two content to replace

'}]}}static get properties(){return{itemPadding:{type:Number,reflect:!0,attribute:"item-padding"},itemMargin:{type:Number,reflect:!0,attribute:"item-margin"},breakpointSm:{type:Number,attribute:"breakpoint-sm"},breakpointMd:{type:Number,attribute:"breakpoint-md"},breakpointLg:{type:Number,attribute:"breakpoint-lg"},breakpointXl:{type:Number,attribute:"breakpoint-xl"},columns:{type:Number,reflect:!0},dataHaxRay:{type:String,attribute:"data-hax-ray",reflect:!0},disableResponsive:{type:Boolean,reflect:!0,attribute:"disable-responsive"},layout:{type:String,reflect:!0},layouts:{type:Object},ready:{type:Boolean,reflect:!0},responsiveSize:{type:String,reflect:!0,attribute:"responsive-size"},__columnWidths:{type:String}}}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{switch(["responsiveSize","layout","layouts","disableResponsive","itemPadding","itemMargin"].includes(e)&&(clearTimeout(this.__calcWidthLock),this.__calcWidthLock=setTimeout((()=>{this.__columnWidths=this._getColumnWidths(this.responsiveSize,this.layout,this.layouts,this.disableResponsive)}),0)),e){case"itemMargin":this[e]?this.style.setProperty("--grid-plate-item-margin",this[e]+"px"):this.style.removeProperty("--grid-plate-item-margin");break;case"itemPadding":this[e]?this.style.setProperty("--grid-plate-item-padding",this[e]+"px"):this.style.removeProperty("--grid-plate-item-padding");break;case"__columnWidths":this.resize();break;case"disableResponsive":this.dispatchEvent(new CustomEvent("disable-responsive-changed",{detail:this[e]}))}}))}resize(){window.dispatchEvent(new Event("resize"))}_getColumnWidths(t="sm",e="1-1",a,i){if(a){let o=a[e],r=!1!==i?"xl":t,s={12:"1","8/4":"2-1","6/6":"1-1","4/8":"1-2","4/4/4":"1-1-1","3/3/3/3":"1-1-1-1"}[e];if(void 0!==o&&void 0!==o[r])return a[e][r];if(void 0!==a[s]&&void 0!==a[s][r])return a[s][r];if(void 0!==a["1-1"])return a["1-1"][r]}}_getColumnWidth(t,e){return void 0!==e&&void 0!==e[t]?"width:"+e[t]:"min-height: unset"}_getColumns(t){return t.length}haxactiveElementChanged(t,e){}}customElements.define(GridPlate.tag,GridPlate);export{GridPlate}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-editor-ui.js b/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-editor-ui.js index 924ba81b79..75aaa983f4 100644 --- a/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-editor-ui.js +++ b/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-editor-ui.js @@ -768,4 +768,4 @@ import{html as e,css as t,unsafeCSS as o}from"../../../../lit/index.js";import{s `}dropEvent(e){e.preventDefault(),this.activeDrag=!1,this.activeType=null,b.waveWand(["","/",e,"hax-agent","Agent"],this.shadowRoot.querySelector("#merlin"))}dragenterEvent(e){e.preventDefault(),this.sdSearch.dragover=!0}dragoverEvent(e){e.preventDefault(),this.sdSearch.dragover=!0}dragleaveEvent(e){e.preventDefault(),this.sdSearch.dragover=!1}sdCloseEvent(e){setTimeout((()=>{this._ignoreReset=!0,this.sdSearch.value=""}),0),this.sdSearch.disabled=!1,this.sdSearch.dragover=!1,this.sdSearch.droppable=!1,this.sdSearch.droppableType=null}haxButtonOp(e){let t=e.target.getAttribute("data-event");switch(t){case"super-daemon":if(!this._ignoreReset||"click"===e.type){const t=this.sdSearch.value;"value-changed"===e.type?t&&b.waveWand([t,"*"],this.shadowRoot.querySelector("#merlin"),null):b.waveWand([t,"*"],this.shadowRoot.querySelector("#merlin"),null),this.sdSearch.value=null,this.sdSearch.disabled=!1,this.sdSearch.dragover=!1,this.sdSearch.droppable=!1,this.sdSearch.droppableType=null}this._ignoreReset=!1;break;case"super-daemon-modal":this._ignoreReset&&"click"!==e.type||(i.playSound("click"),b.open(),s.haxTray.collapsed=!1);break;case"media-program":i.playSound("click"),b.runProgram("sources"),b.open(),s.haxTray.collapsed=!1;break;case"content-edit":case"content-map":case"content-add":s.haxTray.trayDetail==t?s.haxTray.collapsed=!s.haxTray.collapsed:s.haxTray.collapsed=!1,s.haxTray.trayDetail=t;break;case"undo":s.activeHaxBody.undo();break;case"redo":s.activeHaxBody.redo();break;case"view-source":s.haxTray.trayDetail=t,s.haxTray.shadowRoot.querySelector("#view-source").openSource(),s.haxTray.collapsed=!1}}_logout(){globalThis.dispatchEvent(new CustomEvent("jwt-login-logout",{composed:!0,bubbles:!0,cancelable:!1,detail:!0})),this.__logoutUserAction=!0}_jwtLoggedIn(e){!1===e.detail&&this.__logoutUserAction&&(this.__logoutUserAction=!1,setTimeout((()=>{globalThis.location.reload()}),100))}_addPageClick(e){!this.editMode&&this.shadowRoot.querySelector("simple-toolbar-menu-item haxcms-button-add:not([hidden])")&&this.shadowRoot.querySelector("simple-toolbar-menu-item haxcms-button-add:not([hidden])").HAXCMSButtonClick()}updateAvailableButtons(){this.shadowRoot&&setTimeout((()=>{globalThis.appSettings&&globalThis.appSettings.backText&&(this.backText=globalThis.appSettings.backText);[{varPath:"deleteNodePath",selector:"#deletebutton"},{varPath:"saveNodePath",selector:"#editbutton"},{varPath:"createNodePath",selector:"#addbutton"},{varPath:"createNodePath",selector:"#addbuttonchild"},{varPath:"createNodePath",selector:"#duplicatebutton"}].forEach((e=>{globalThis.appSettings&&globalThis.appSettings[e.varPath]&&null!=globalThis.appSettings[e.varPath]&&""!=globalThis.appSettings[e.varPath]&&"null"!=globalThis.appSettings[e.varPath]&&(e.dep?null!=globalThis.appSettings[e.dep]&&""!=globalThis.appSettings[e.dep]&&"null"!=globalThis.appSettings[e.dep]&&this.shadowRoot.querySelector(e.selector).removeAttribute("hidden"):this.shadowRoot.querySelector(e.selector).removeAttribute("hidden"))}))}),100)}firstUpdated(t){super.firstUpdated&&super.firstUpdated(t),this.shadowRoot.querySelectorAll("[data-super-daemon-path]").forEach((e=>{b.defineOption({title:e.getAttribute("data-super-daemon-label"),icon:e.getAttribute("data-super-daemon-icon"),tags:["page","operation","command","add","create"],value:{target:e},context:"CMS",eventName:"super-daemon-element-click",path:e.getAttribute("data-super-daemon-path")})})),this.sdSearch=this.shadowRoot.querySelector("super-daemon-search"),b.wandTarget=this.shadowRoot.querySelector("#merlin"),b.defineOption({title:this.t.save,icon:"icons:save",tags:["CMS","save","page","operation","command"],value:{target:this,method:"_editButtonTap"},context:"HAX",eventName:"super-daemon-element-method",path:"CMS/action/save"}),b.defineOption({title:this.t.insights,icon:"hax:clipboard-pulse",tags:["CMS","insights","data","operation"],value:{target:this,method:"_insightsButtonTap"},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/site/insights"}),b.defineOption({title:this.t.edit,icon:"hax:page-edit",tags:["CMS","edit","page","operation","command"],value:{target:this,method:"_editButtonTap"},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/edit"}),b.defineOption({title:this.t.siteSettings,icon:"hax:site-settings",tags:["CMS","site","settings","operation","command","theme","seo","author"],value:{target:this,method:"_manifestButtonTap",args:[{target:this.shadowRoot.querySelector("#manifestbtn")}]},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/site/settings"}),b.defineOption({title:this.t.themeSettings,icon:"hax:site-settings",tags:["CMS","site","settings","operation","command","theme","seo","author"],value:{target:this,method:"_manifestButtonTap",args:[{target:this.shadowRoot.querySelector("#manifestbtn")}]},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/site/settings/theme"}),b.defineOption({title:this.t.seoSettings,icon:"hax:site-settings",tags:["CMS","site","settings","operation","command","theme","seo","search","engine"],value:{target:this,method:"_manifestButtonTap",args:[{target:this.shadowRoot.querySelector("#manifestbtn")}]},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/site/settings/seo"}),b.defineOption({title:this.t.authorSettings,icon:"hax:site-settings",tags:["CMS","site","settings","operation","command","theme","author"],value:{target:this,method:"_manifestButtonTap",args:[{target:this.shadowRoot.querySelector("#manifestbtn")}]},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/site/settings/author"}),b.defineOption({title:this.t.shareSite,icon:"social:share",tags:["CMS","share"],value:{target:this,method:"_shareButtonTap"},context:["logged-in","CMS","HAX"],eventName:"super-daemon-element-method",path:"CMS/action/share"}),b.defineOption({title:this.t.newJourney,icon:"add",tags:["CMS","create","new site"],value:{target:this,method:"_addButtonTap"},context:"CMS",eventName:"super-daemon-element-method",path:"CMS/action/create-site"}),b.defineOption({title:this.t.logOut,icon:"add",tags:["CMS","user","logout"],value:{target:this,method:"_logout"},context:["logged-in","CMS"],eventName:"super-daemon-element-method",path:"CMS/user/logout"}),b.defineOption({title:"Dark mode toggle",icon:"device:brightness-medium",tags:["CMS","dark mode"],value:{target:this.shadowRoot.querySelector("haxcms-darkmode-toggle"),method:"toggle"},voice:"(toggle) dark mode",eventName:"super-daemon-element-method",path:"CMS/action/darkMode"}),b.defineOption({title:"Sound toggle",icon:"av:volume-up",tags:["CMS","sound"],value:{target:this.shadowRoot.querySelector(".soundToggle")},eventName:"super-daemon-element-click",path:"CMS/action/sound"}),b.defineOption({title:this.t.outlineDesigner,icon:"hax:site-map",tags:["CMS","outline","designer","site outline","operation","command"],value:{target:this.shadowRoot.querySelector("#outlinebutton")},context:["CMS"],eventName:"super-daemon-element-click",path:"CMS/action/outline"}),b.defineOption({title:"Load HAXSchema",icon:"hax:hax2022",tags:["Developer","schema","load","demo","testing"],eventName:"super-daemon-run-program",path:">hax/loadElement",context:[">"],value:{name:"Load HAXSchema",context:">",program:async(e,t)=>{const o=globalThis.WCAutoload.requestAvailability();let i=[];return Object.keys(o.registry.list).forEach((async t=>{let a="hax:hax2022";if(globalThis.customElements.get(t)&&globalThis.customElements.get(t).haxProperties&&globalThis.customElements.get(t).haxProperties.gizmo&&(a=globalThis.customElements.get(t).haxProperties.gizmo.icon),""==e||t.includes(e)){let e={};e[t]=o.registry.list[t],i.push({title:t,icon:a,tags:["schema"],value:{target:globalThis.HaxStore.instance,method:"_handleDynamicImports",args:[e,globalThis.HaxStore.instance.haxAutoloader]},eventName:"super-daemon-element-method",context:[">",">hax/loadElement/"+t],path:">hax/loadElement/"+t})}})),i}}}),b.defineOption({title:"Change theme temporarily",icon:"image:style",tags:["Developer","theme"],eventName:"super-daemon-run-program",path:">settings/theme",context:[">"],more:e`Change theme just for the current browsing session`,voice:"change theme (temporarily)",value:{name:"Change theme",context:">",program:async(e,t)=>{let o=[];return["clean-one","clean-two","learn-two-theme","polaris-theme","collections-theme","training-theme","bootstrap-theme","outline-player","haxor-slevin"].forEach((async t=>{(""==e||t.includes(e))&&o.push({title:t.replace("-theme","").replace("-"," "),icon:"image:style",tags:["theme"],value:{target:globalThis.HAXCMS,method:"setTheme",args:[t]},eventName:"super-daemon-element-method",context:[">",">settings/theme/"+t],path:">settings/theme/"+t})})),o}}}),b.defineOption({title:"Go to site",icon:"hax:hax2022",tags:["Developer","change","sites","administration"],eventName:"super-daemon-run-program",path:"/hax/changeSite",context:["CMS"],value:{name:"Go to site",context:"CMS",program:async(e,t)=>{let o=[];return await fetch("./../../system/api/listSites").then((e=>e.ok?e.json():[])).then((t=>{t.data&&t.data.items.length>0&&t.data.items.forEach((async t=>{(""==e||t.metadata.site&&t.metadata.site.name&&t.metadata.site.name.includes(e)&&i.manifest.metadata.site.name!=t.metadata.site.name)&&o.push({title:t.title,icon:t.metadata.theme.variables.icon,tags:["site",t.description],value:{target:this,method:"goToLocation",args:[t.slug]},eventName:"super-daemon-element-method",context:["/","/hax/changeSite/"+t.metadata.site.name],path:"/hax/changeSite/"+t.metadata.site.name})}))})),o}}}),this.updateAvailableButtons(),this.dispatchEvent(new CustomEvent("haxcms-load-user-data",{bubbles:!0,composed:!0,cancelable:!1,detail:!0}))}goToLocation(e){globalThis.location=e}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{"userMenuOpen"===t&&void 0!==e&&(this.userMenuOpen?this.rpgHat="edit":this.rpgHat="none"),"responsiveSize"===t&&(["xs","sm","md"].includes(this[t])?(this.editMode?this.__editText=this.t.save:this.__editText=this.t.edit,this.t.configureBlock="Configure",this.t.addBlock="Block",this.t.findMedia="Media",this.t.pageOutline="Outline",this.t.viewSource="Source"):(this.editMode?this.__editText=this.t.save:this.__editText=this.t.edit,this.t.configureBlock="Configure block",this.t.addBlock="Add block",this.t.findMedia="Find media",this.t.pageOutline="Page outline",this.t.viewSource="View source")),"editMode"==t&&(this.editMode?this.rpgHat="construction":this.rpgHat="none",void 0!==e&&b.close(),this._editModeChanged(this[t],e),this.dispatchEvent(new CustomEvent("edit-mode-changed",{detail:this[t]}))),"manifestEditMode"==t&&(this._manifestEditModeChanged(this[t],e),this.dispatchEvent(new CustomEvent("manifest-edit-mode-changed",{detail:this[t]})))}))}_redoChanged(e){this.canRedo=e.detail.value}_undoChanged(e){this.canUndo=e.detail.value}static get properties(){return{...super.properties,userName:{type:String,attribute:"user-name"},activeDrag:{type:Boolean},activeType:{type:String},activeNode:{type:Object},activeTagName:{type:String},canUndo:{type:Boolean,attribute:"can-undo"},canRedo:{type:Boolean,attribute:"can-redo"},rpgHat:{type:String},userPicture:{type:String,attribute:"user-picture"},userMenuOpen:{type:Boolean},soundIcon:{type:String},darkMode:{type:Boolean,reflect:!0,attribute:"dark-mode"},backLink:{type:String},backText:{type:String},__editIcon:{type:String},__editText:{type:String},painting:{type:Boolean,reflect:!0},pageAllowed:{type:Boolean,attribute:"page-allowed",reflect:!0},editMode:{type:Boolean,reflect:!0,attribute:"edit-mode"},manifestEditMode:{type:Boolean,attribute:"manifest-edit-mode",reflect:!0},activeTitle:{type:String,attribute:"active-title"},manifest:{type:Object},icon:{type:String}}}connectedCallback(){super.connectedCallback(),n((e=>{i.userData&&(this.userName=l(i.userData.userName),this.userPicture=l(i.userData.userPicture),this.updateAvailableButtons()),this.__disposer.push(e)})),n((e=>{this.editMode=l(i.editMode),x.writeMemory("editMode",this.editMode),this.__disposer.push(e)})),n((e=>{this.manifest=l(i.manifest),this.icon="hax:site-settings",this.__disposer.push(e)})),n((e=>{const t=l(i.activeItem);this.updateAvailableButtons(),t&&t.id&&!t._internalRoute?(this.activeTitle=t.title,this.pageAllowed=!0):this.pageAllowed=!1,this.__disposer.push(e)}))}disconnectedCallback(){for(var e in this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}_editButtonTap(e){if(this.editMode&&"view-source"===s.haxTray.trayDetail&&!globalThis.confirm(this.t.confirmHtmlSourceExit))return!1;i.playSound("click"),this.editMode=!this.editMode,this.editMode||this.dispatchEvent(new CustomEvent("haxcms-save-node",{bubbles:!0,composed:!0,cancelable:!1,detail:i.activeItem})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}_insightsButtonTap(e){i.playSound("click");const t=globalThis.document.createElement("haxcms-site-insights"),o=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.insights,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"94vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"94vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:t},invokedBy:this.shadowRoot.querySelector("#insightsbutton"),clone:!1,modal:!1}});globalThis.dispatchEvent(o)}async _cancelButtonTap(e){if(await s.activeHaxBody.haxToContent()!=this._originalContent&&!globalThis.confirm(this.t.unsavedChangesWillBeLostIfSelectingOkAreYouSure))return!1;this.editMode=!1,i.playSound("error"),this.dispatchEvent(new CustomEvent("hax-cancel",{bubbles:!0,composed:!0,cancelable:!1,detail:e.detail})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}_deleteButtonTap(e){i.playSound("click");let t=globalThis.document.createElement("span");t.innerHTML=`"${i.activeItem.title}" will be removed from the outline but its content stays on the file system.`;let o=globalThis.document.createElement("button");o.appendChild(globalThis.document.createTextNode("Confirm")),o.classList.add("hax-modal-btn"),o.addEventListener("click",this._deleteActive.bind(this));let a=globalThis.document.createElement("button");a.appendChild(globalThis.document.createTextNode("cancel")),a.addEventListener("click",(()=>i.playSound("error"))),a.setAttribute("dialog-dismiss","dialog-dismiss"),a.classList.add("hax-modal-btn"),a.classList.add("cancel");let s=globalThis.document.createElement("span");s.appendChild(o),s.appendChild(a);const n=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:"Are you sure you want to delete this page?",styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"25vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"15vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:t,buttons:s},invokedBy:this.shadowRoot.querySelector("#deletebutton"),clone:!1,modal:!0}});globalThis.dispatchEvent(n)}_deleteActive(e){i.playSound("click");const t=new CustomEvent("haxcms-delete-node",{bubbles:!0,composed:!0,cancelable:!1,detail:{item:i.activeItem}});this.dispatchEvent(t)}_shareButtonTap(e){i.playSound("click");const t=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.shareSite,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"55vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"50vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:globalThis.document.createElement("haxcms-share-dialog")},invokedBy:this.shadowRoot.querySelector("#sharebutton"),clone:!1,modal:!1}});globalThis.dispatchEvent(t)}_outlineButtonTap(e){i.playSound("click");const t=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.outlineDesigner,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-z-index":"100000000","--simple-modal-titlebar-height":"80px","--simple-modal-width":"85vw","--simple-modal-max-width":"85vw","--simple-modal-height":"85vh","--simple-modal-max-height":"85vh"},elements:{content:globalThis.document.createElement("haxcms-outline-editor-dialog")},invokedBy:this.shadowRoot.querySelector("#outlinebutton"),clone:!1,modal:!0}});globalThis.dispatchEvent(t)}_addButtonTap(){i.playSound("click"),setTimeout((()=>{globalThis.location=this.backLink+"createSite-step-1"}),100)}_manifestButtonTap(e){i.playSound("click"),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}})),import("./haxcms-site-dashboard.js").then((()=>{globalThis.dispatchEvent(new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.editSettings,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-z-index":"100000000","--simple-modal-titlebar-height":"80px","--simple-modal-width":"85vw","--simple-modal-max-width":"85vw","--simple-modal-height":"85vh","--simple-modal-max-height":"85vh"},elements:{content:globalThis.document.createElement("haxcms-site-dashboard")},invokedBy:this.shadowRoot.querySelector("#manifestbtn"),clone:!1,modal:!0}})),setTimeout((()=>{globalThis.dispatchEvent(new CustomEvent("haxcms-load-site-dashboard",{bubbles:!0,composed:!0,cancelable:!1,detail:e.target}))}),0)}))}_editModeChanged(e,t){e?(setTimeout((async()=>{this._originalContent=await s.activeHaxBody.haxToContent()}),100),this.__editIcon="icons:save",this.__editText=this.t.save,b.appendContext("HAX"),b.removeContext("CMS")):(this.__editIcon="hax:page-edit",this.__editText=this.t.edit,b.appendContext("CMS"),b.removeContext("HAX")),void 0!==t&&(i.editMode=e,e&&(s.haxTray.collapsed=!1))}_outlineEditModeChanged(e,t){this.dispatchEvent(new CustomEvent("haxcms-outline-edit-mode-changed",{bubbles:!0,composed:!0,cancelable:!1,detail:e}))}_manifestEditModeChanged(e,t){this.dispatchEvent(new CustomEvent("haxcms-manifest-edit-mode-changed",{bubbles:!0,composed:!0,cancelable:!1,detail:e}))}}customElements.define(HAXCMSSiteEditorUI.tag,HAXCMSSiteEditorUI);export{HAXCMSSiteEditorUI}; \ No newline at end of file + >`,voice:"change theme (temporarily)",value:{name:"Change theme",context:">",program:async(e,t)=>{let o=[];return["clean-one","clean-two","learn-two-theme","polaris-theme","polaris-invent-theme","collections-theme","training-theme","bootstrap-theme","outline-player","haxor-slevin"].forEach((async t=>{(""==e||t.includes(e))&&o.push({title:t.replace("-theme","").replace("-"," "),icon:"image:style",tags:["theme"],value:{target:globalThis.HAXCMS,method:"setTheme",args:[t]},eventName:"super-daemon-element-method",context:[">",">settings/theme/"+t],path:">settings/theme/"+t})})),o}}}),b.defineOption({title:"Go to site",icon:"hax:hax2022",tags:["Developer","change","sites","administration"],eventName:"super-daemon-run-program",path:"/hax/changeSite",context:["CMS"],value:{name:"Go to site",context:"CMS",program:async(e,t)=>{let o=[];return await fetch("./../../system/api/listSites").then((e=>e.ok?e.json():[])).then((t=>{t.data&&t.data.items.length>0&&t.data.items.forEach((async t=>{(""==e||t.metadata.site&&t.metadata.site.name&&t.metadata.site.name.includes(e)&&i.manifest.metadata.site.name!=t.metadata.site.name)&&o.push({title:t.title,icon:t.metadata.theme.variables.icon,tags:["site",t.description],value:{target:this,method:"goToLocation",args:[t.slug]},eventName:"super-daemon-element-method",context:["/","/hax/changeSite/"+t.metadata.site.name],path:"/hax/changeSite/"+t.metadata.site.name})}))})),o}}}),this.updateAvailableButtons(),this.dispatchEvent(new CustomEvent("haxcms-load-user-data",{bubbles:!0,composed:!0,cancelable:!1,detail:!0}))}goToLocation(e){globalThis.location=e}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{"userMenuOpen"===t&&void 0!==e&&(this.userMenuOpen?this.rpgHat="edit":this.rpgHat="none"),"responsiveSize"===t&&(["xs","sm","md"].includes(this[t])?(this.editMode?this.__editText=this.t.save:this.__editText=this.t.edit,this.t.configureBlock="Configure",this.t.addBlock="Block",this.t.findMedia="Media",this.t.pageOutline="Outline",this.t.viewSource="Source"):(this.editMode?this.__editText=this.t.save:this.__editText=this.t.edit,this.t.configureBlock="Configure block",this.t.addBlock="Add block",this.t.findMedia="Find media",this.t.pageOutline="Page outline",this.t.viewSource="View source")),"editMode"==t&&(this.editMode?this.rpgHat="construction":this.rpgHat="none",void 0!==e&&b.close(),this._editModeChanged(this[t],e),this.dispatchEvent(new CustomEvent("edit-mode-changed",{detail:this[t]}))),"manifestEditMode"==t&&(this._manifestEditModeChanged(this[t],e),this.dispatchEvent(new CustomEvent("manifest-edit-mode-changed",{detail:this[t]})))}))}_redoChanged(e){this.canRedo=e.detail.value}_undoChanged(e){this.canUndo=e.detail.value}static get properties(){return{...super.properties,userName:{type:String,attribute:"user-name"},activeDrag:{type:Boolean},activeType:{type:String},activeNode:{type:Object},activeTagName:{type:String},canUndo:{type:Boolean,attribute:"can-undo"},canRedo:{type:Boolean,attribute:"can-redo"},rpgHat:{type:String},userPicture:{type:String,attribute:"user-picture"},userMenuOpen:{type:Boolean},soundIcon:{type:String},darkMode:{type:Boolean,reflect:!0,attribute:"dark-mode"},backLink:{type:String},backText:{type:String},__editIcon:{type:String},__editText:{type:String},painting:{type:Boolean,reflect:!0},pageAllowed:{type:Boolean,attribute:"page-allowed",reflect:!0},editMode:{type:Boolean,reflect:!0,attribute:"edit-mode"},manifestEditMode:{type:Boolean,attribute:"manifest-edit-mode",reflect:!0},activeTitle:{type:String,attribute:"active-title"},manifest:{type:Object},icon:{type:String}}}connectedCallback(){super.connectedCallback(),n((e=>{i.userData&&(this.userName=l(i.userData.userName),this.userPicture=l(i.userData.userPicture),this.updateAvailableButtons()),this.__disposer.push(e)})),n((e=>{this.editMode=l(i.editMode),x.writeMemory("editMode",this.editMode),this.__disposer.push(e)})),n((e=>{this.manifest=l(i.manifest),this.icon="hax:site-settings",this.__disposer.push(e)})),n((e=>{const t=l(i.activeItem);this.updateAvailableButtons(),t&&t.id&&!t._internalRoute?(this.activeTitle=t.title,this.pageAllowed=!0):this.pageAllowed=!1,this.__disposer.push(e)}))}disconnectedCallback(){for(var e in this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}_editButtonTap(e){if(this.editMode&&"view-source"===s.haxTray.trayDetail&&!globalThis.confirm(this.t.confirmHtmlSourceExit))return!1;i.playSound("click"),this.editMode=!this.editMode,this.editMode||this.dispatchEvent(new CustomEvent("haxcms-save-node",{bubbles:!0,composed:!0,cancelable:!1,detail:i.activeItem})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}_insightsButtonTap(e){i.playSound("click");const t=globalThis.document.createElement("haxcms-site-insights"),o=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.insights,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"94vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"94vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:t},invokedBy:this.shadowRoot.querySelector("#insightsbutton"),clone:!1,modal:!1}});globalThis.dispatchEvent(o)}async _cancelButtonTap(e){if(await s.activeHaxBody.haxToContent()!=this._originalContent&&!globalThis.confirm(this.t.unsavedChangesWillBeLostIfSelectingOkAreYouSure))return!1;this.editMode=!1,i.playSound("error"),this.dispatchEvent(new CustomEvent("hax-cancel",{bubbles:!0,composed:!0,cancelable:!1,detail:e.detail})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}}))}_deleteButtonTap(e){i.playSound("click");let t=globalThis.document.createElement("span");t.innerHTML=`"${i.activeItem.title}" will be removed from the outline but its content stays on the file system.`;let o=globalThis.document.createElement("button");o.appendChild(globalThis.document.createTextNode("Confirm")),o.classList.add("hax-modal-btn"),o.addEventListener("click",this._deleteActive.bind(this));let a=globalThis.document.createElement("button");a.appendChild(globalThis.document.createTextNode("cancel")),a.addEventListener("click",(()=>i.playSound("error"))),a.setAttribute("dialog-dismiss","dialog-dismiss"),a.classList.add("hax-modal-btn"),a.classList.add("cancel");let s=globalThis.document.createElement("span");s.appendChild(o),s.appendChild(a);const n=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:"Are you sure you want to delete this page?",styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"25vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"15vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:t,buttons:s},invokedBy:this.shadowRoot.querySelector("#deletebutton"),clone:!1,modal:!0}});globalThis.dispatchEvent(n)}_deleteActive(e){i.playSound("click");const t=new CustomEvent("haxcms-delete-node",{bubbles:!0,composed:!0,cancelable:!1,detail:{item:i.activeItem}});this.dispatchEvent(t)}_shareButtonTap(e){i.playSound("click");const t=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.shareSite,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-width":"55vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"50vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"},elements:{content:globalThis.document.createElement("haxcms-share-dialog")},invokedBy:this.shadowRoot.querySelector("#sharebutton"),clone:!1,modal:!1}});globalThis.dispatchEvent(t)}_outlineButtonTap(e){i.playSound("click");const t=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.outlineDesigner,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-z-index":"100000000","--simple-modal-titlebar-height":"80px","--simple-modal-width":"85vw","--simple-modal-max-width":"85vw","--simple-modal-height":"85vh","--simple-modal-max-height":"85vh"},elements:{content:globalThis.document.createElement("haxcms-outline-editor-dialog")},invokedBy:this.shadowRoot.querySelector("#outlinebutton"),clone:!1,modal:!0}});globalThis.dispatchEvent(t)}_addButtonTap(){i.playSound("click"),setTimeout((()=>{globalThis.location=this.backLink+"createSite-step-1"}),100)}_manifestButtonTap(e){i.playSound("click"),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}})),import("./haxcms-site-dashboard.js").then((()=>{globalThis.dispatchEvent(new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.t.editSettings,styles:{"--simple-modal-titlebar-background":"var(--hax-ui-color-accent)","--simple-modal-titlebar-color":"var(--hax-ui-background-color)","--simple-modal-z-index":"100000000","--simple-modal-titlebar-height":"80px","--simple-modal-width":"85vw","--simple-modal-max-width":"85vw","--simple-modal-height":"85vh","--simple-modal-max-height":"85vh"},elements:{content:globalThis.document.createElement("haxcms-site-dashboard")},invokedBy:this.shadowRoot.querySelector("#manifestbtn"),clone:!1,modal:!0}})),setTimeout((()=>{globalThis.dispatchEvent(new CustomEvent("haxcms-load-site-dashboard",{bubbles:!0,composed:!0,cancelable:!1,detail:e.target}))}),0)}))}_editModeChanged(e,t){e?(setTimeout((async()=>{this._originalContent=await s.activeHaxBody.haxToContent()}),100),this.__editIcon="icons:save",this.__editText=this.t.save,b.appendContext("HAX"),b.removeContext("CMS")):(this.__editIcon="hax:page-edit",this.__editText=this.t.edit,b.appendContext("CMS"),b.removeContext("HAX")),void 0!==t&&(i.editMode=e,e&&(s.haxTray.collapsed=!1))}_outlineEditModeChanged(e,t){this.dispatchEvent(new CustomEvent("haxcms-outline-edit-mode-changed",{bubbles:!0,composed:!0,cancelable:!1,detail:e}))}_manifestEditModeChanged(e,t){this.dispatchEvent(new CustomEvent("haxcms-manifest-edit-mode-changed",{bubbles:!0,composed:!0,cancelable:!1,detail:e}))}}customElements.define(HAXCMSSiteEditorUI.tag,HAXCMSSiteEditorUI);export{HAXCMSSiteEditorUI}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/ui-components/magic/site-collection-list.js b/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/ui-components/magic/site-collection-list.js index c090568f6c..fbf6fb539b 100644 --- a/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/ui-components/magic/site-collection-list.js +++ b/build/es6/node_modules/@lrnwebcomponents/haxcms-elements/lib/ui-components/magic/site-collection-list.js @@ -1,4 +1,4 @@ -import{css as t,html as e}from"../../../../../lit/index.js";import{CollectionList as i}from"../../../../collection-list/collection-list.js";import"../query/site-query.js";import{store as s}from"../../core/haxcms-site-store.js";export class SiteCollectionList extends i{constructor(){super(),this.editMode=!1,this.conditions={},this.sortObj={},this.results=[],this.breakSmartCollection=!1,this.limit=8,this.sort="title",this.parent="",this.tags="",this.pageType="",this.published="true",this.hideInMenu="",this.relatedItems="",this.t={allItems:"All items",topLevelItems:"Top level items"}}render(){return e` +import{css as t,html as e}from"../../../../../lit/index.js";import{CollectionList as i}from"../../../../collection-list/collection-list.js";import"../../../../collection-list/lib/collection-item.js";import"../query/site-query.js";import{store as s}from"../../core/haxcms-site-store.js";export class SiteCollectionList extends i{constructor(){super(),this.editMode=!1,this.conditions={},this.sortObj={},this.results=[],this.breakSmartCollection=!1,this.limit=8,this.sort="title",this.parent="",this.tags="",this.pageType="",this.published="true",this.hideInMenu="",this.relatedItems="",this.t={allItems:"All items",topLevelItems:"Top level items"}}render(){return e` ${this.results.map((t=>e` `))} - `}resultEvent(t){this.results=[...t.detail.value]}static get properties(){return{...super.properties,editMode:{type:Boolean},conditions:{type:Object},limit:{type:Number},sort:{type:String},parent:{type:String},tags:{type:String},pageType:{type:String,attribute:"page-type"},published:{type:String},hideInMenu:{type:String,attribute:"hide-in-menu"},relatedItems:{type:String,attribute:"related-items"},sortObj:{type:Object},results:{type:Array},breakSmartCollection:{type:Boolean,attribute:"break-smart-collection",reflect:!0}}}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{if(this.shadowRoot&&"results"==e&&this.dispatchEvent(new CustomEvent("results-changed",{detail:{value:this[e]}})),this.shadowRoot&&["parent","tags","pageType","published","hideInMenu","relatedItems"].includes(e)){let t={};""!==this.parent&&(t.parent=this.parent),""!==this.tags&&null!==this.tags&&(t["metadata.tags"]=this.tags),""!==this.pageType&&null!==this.pageType&&(t["metadata.pageType"]=this.pageType),"null"!==this.published&&(t["metadata.published"]="true"===this.published),"null"!=this.hideInMenu&&(t["metadata.hideInMenu"]="true"===this.hideInMenu),""!=this.relatedItems&&null!==this.relatedItems&&(t["metadata.relatedItems"]=this.relatedItems),this.conditions={...t}}if(this.shadowRoot&&"sort"===e){let t={};t[this[e]]="ASC",this.sortObj={...t}}if("breakSmartCollection"===e&&this.breakSmartCollection){let t=this.shadowRoot.querySelector("collection-list").cloneNode(!0);t.removeAttribute("lock-items"),this.parentNode.insertBefore(t,this),setTimeout((()=>{this.remove()}),0)}}))}haxHooks(){return{editModeChanged:"haxeditModeChanged",setupActiveElementForm:"haxsetupActiveElementForm"}}haxeditModeChanged(t){this.editMode=t}haxsetupActiveElementForm(t){const e=s.getManifestItems(!0);var i=[];e.forEach((t=>{if(t.id!=this.itemId){let s=t,r="- ";for(;s&&null!=s.parent;)s=e.find((t=>t.id==s.parent)),s&&(r="--"+r);i.push({text:r+t.title,value:t.id})}})),t.settings.configure.forEach(((e,s)=>{"parent"===e.property&&(t.settings.configure[s].inputMethod="select",t.settings.configure[s].itemsList=[{text:`-- ${this.t.allItems} --`,value:""},{text:`-- ${this.t.topLevelItems} --`,value:null},...i]),"relatedItems"===e.property&&(t.settings.configure[s].inputMethod="select",t.settings.configure[s].itemsList=[{text:`-- ${this.t.allItems} --`,value:""},...i])}))}static get haxProperties(){return new URL(`./${this.tag}.haxProperties.json`,import.meta.url).href}static get styles(){return[...super.styles,t` + `}resultEvent(t){this.results=[...t.detail.value]}static get properties(){return{...super.properties,editMode:{type:Boolean},conditions:{type:Object},limit:{type:Number},sort:{type:String},parent:{type:String},tags:{type:String},pageType:{type:String,attribute:"page-type"},published:{type:String},hideInMenu:{type:String,attribute:"hide-in-menu"},relatedItems:{type:String,attribute:"related-items"},sortObj:{type:Object},results:{type:Array},breakSmartCollection:{type:Boolean,attribute:"break-smart-collection",reflect:!0}}}updated(t){super.updated&&super.updated(t),t.forEach(((t,e)=>{if(this.shadowRoot&&"results"==e&&this.dispatchEvent(new CustomEvent("results-changed",{detail:{value:this[e]}})),this.shadowRoot&&["parent","tags","pageType","published","hideInMenu","relatedItems"].includes(e)){let t={};""!==this.parent&&(t.parent=this.parent),""!==this.tags&&null!==this.tags&&(t["metadata.tags"]=this.tags),""!==this.pageType&&null!==this.pageType&&(t["metadata.pageType"]=this.pageType),"null"!==this.published&&(t["metadata.published"]="true"===this.published),"null"!=this.hideInMenu&&(t["metadata.hideInMenu"]="true"===this.hideInMenu),""!=this.relatedItems&&null!==this.relatedItems&&(t["metadata.relatedItems"]=this.relatedItems),this.conditions={...t}}if(this.shadowRoot&&"sort"===e){let t={};t[this[e]]="ASC",this.sortObj={...t}}if("breakSmartCollection"===e&&this.breakSmartCollection){let t=this.shadowRoot.querySelector("collection-list").cloneNode(!0);t.removeAttribute("lock-items"),this.parentNode.insertBefore(t,this),setTimeout((()=>{this.remove()}),0)}}))}haxHooks(){return{editModeChanged:"haxeditModeChanged",activeElementChanged:"haxactiveElementChanged",setupActiveElementForm:"haxsetupActiveElementForm"}}haxeditModeChanged(t){this.editMode=t}haxactiveElementChanged(t,e){e&&(this.editMode=e)}haxsetupActiveElementForm(t){const e=s.getManifestItems(!0);var i=[];e.forEach((t=>{if(t.id!=this.itemId){let s=t,l="- ";for(;s&&null!=s.parent;)s=e.find((t=>t.id==s.parent)),s&&(l="--"+l);i.push({text:l+t.title,value:t.id})}})),t.settings.configure.forEach(((e,s)=>{"parent"===e.property&&(t.settings.configure[s].inputMethod="select",t.settings.configure[s].itemsList=[{text:`-- ${this.t.allItems} --`,value:""},{text:`-- ${this.t.topLevelItems} --`,value:null},...i]),"relatedItems"===e.property&&(t.settings.configure[s].inputMethod="select",t.settings.configure[s].itemsList=[{text:`-- ${this.t.allItems} --`,value:""},...i])}))}static get haxProperties(){return new URL(`./${this.tag}.haxProperties.json`,import.meta.url).href}static get styles(){return[...super.styles,t` :host { display: block; } diff --git a/build/es6/node_modules/@lrnwebcomponents/polaris-theme/lib/polaris-invent-theme.js b/build/es6/node_modules/@lrnwebcomponents/polaris-theme/lib/polaris-invent-theme.js index b3e393fce2..b6706a357c 100644 --- a/build/es6/node_modules/@lrnwebcomponents/polaris-theme/lib/polaris-invent-theme.js +++ b/build/es6/node_modules/@lrnwebcomponents/polaris-theme/lib/polaris-invent-theme.js @@ -2,7 +2,7 @@ * Copyright 2020 The Pennsylvania State University * @license Apache-2.0, see License.md for full text. */ -import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementTheme as i}from"../../haxcms-elements/lib/core/HAXCMSLitElementTheme.js";import{HAXCMSThemeParts as o}from"../../haxcms-elements/lib/core/utils/HAXCMSThemeParts.js";import{PrintBranchMixin as a}from"../../haxcms-elements/lib/core/utils/PrintBranchMixin.js";import{PDFPageMixin as s}from"../../haxcms-elements/lib/core/utils/PDFPageMixin.js";import{QRCodeMixin as r}from"../../haxcms-elements/lib/core/utils/QRCodeMixin.js";import{HAXCMSMobileMenuMixin as n}from"../../haxcms-elements/lib/core/utils/HAXCMSMobileMenu.js";import{HAXCMSOperationButtons as l}from"../../haxcms-elements/lib/core/utils/HAXCMSOperationButtons.js";import{store as d}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import"../../scroll-button/scroll-button.js";import"../../haxcms-elements/lib/ui-components/site/site-title.js";import"../../haxcms-elements/lib/ui-components/active-item/site-active-title.js";import"../../haxcms-elements/lib/ui-components/active-item/site-active-tags.js";import"../../haxcms-elements/lib/ui-components/navigation/site-menu.js";import"../../haxcms-elements/lib/ui-components/layout/site-modal.js";import"../../haxcms-elements/lib/ui-components/layout/site-region.js";import{autorun as p,toJS as c}from"../../../mobx/dist/mobx.esm.js";import{DDDSuper as m,DDDFonts as h}from"../../d-d-d/d-d-d.js";class PolarisInventTheme extends(l(s(a(r(o(n(m(i)))))))){static get styles(){return[...super.styles,t` +import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementTheme as i}from"../../haxcms-elements/lib/core/HAXCMSLitElementTheme.js";import{HAXCMSThemeParts as o}from"../../haxcms-elements/lib/core/utils/HAXCMSThemeParts.js";import{HAXCMSMobileMenuMixin as a}from"../../haxcms-elements/lib/core/utils/HAXCMSMobileMenu.js";import{HAXCMSOperationButtons as s}from"../../haxcms-elements/lib/core/utils/HAXCMSOperationButtons.js";import{store as r}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import{MicroFrontendRegistry as n}from"../../micro-frontend-registry/micro-frontend-registry.js";import{HAXCMSRememberRoute as l}from"../../haxcms-elements/lib/core/utils/HAXCMSRememberRoute.js";import{QRCodeMixin as p}from"../../haxcms-elements/lib/core/utils/QRCodeMixin.js";import{EmailPageMixin as d}from"../../haxcms-elements/lib/core/utils/EmailPageMixin.js";import{PrintBranchMixin as c}from"../../haxcms-elements/lib/core/utils/PrintBranchMixin.js";import{PDFPageMixin as m}from"../../haxcms-elements/lib/core/utils/PDFPageMixin.js";import"../../scroll-button/scroll-button.js";import"../../haxcms-elements/lib/ui-components/site/site-title.js";import"../../haxcms-elements/lib/ui-components/active-item/site-active-title.js";import"../../haxcms-elements/lib/ui-components/active-item/site-active-tags.js";import"../../haxcms-elements/lib/ui-components/navigation/site-menu.js";import"../../haxcms-elements/lib/ui-components/layout/site-modal.js";import"../../haxcms-elements/lib/ui-components/layout/site-region.js";import{autorun as h,toJS as g}from"../../../mobx/dist/mobx.esm.js";import{DDDSuper as b,DDDFonts as x}from"../../d-d-d/d-d-d.js";import{HAXCMSToastInstance as u}from"../../haxcms-elements/lib/core/haxcms-toast.js";class PolarisInventTheme extends(s(l(d(m(c(p(o(a(b(i)))))))))){static get styles(){return[...super.styles,t` :host { display: block; --polaris-bg-color: #f2f2f4; @@ -38,14 +38,6 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe color: #1173ca; text-decoration: none; } - .search-modal-btn { - --simple-icon-width: 40px; - --simple-icon-height: 40px; - padding: 20px; - color: white; - position: absolute; - right: 0; - } scroll-button { position: fixed; right: 0px; @@ -80,7 +72,6 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe } article { - border-radius: 3px; padding: 0px 40px 20px 20px; background-color: var(--polaris-content-bg-color); font-family: var(--ddd-font-primary); @@ -95,6 +86,10 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe color: var(--polaris-nav-color); } + #slot { + line-break: auto; + } + site-menu { font-family: var(--ddd-font-navigation); --site-menu-font-size: var(--ddd-font-size-xs); @@ -107,7 +102,6 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe } site-modal { - float: right; --simple-modal-titlebar-background: var(--polaris-nav-bg-color); } @@ -116,9 +110,9 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe display: block; padding: 0; border-top: 2px solid #E6ECF1; - margin-top: 24px; + margin-top: 16px; align-items: center; - padding-top: 24px; + padding-top: 16px; flex-direction: row; -webkit-box-align: center; -webkit-box-orient: horizontal; @@ -126,15 +120,22 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe } .link-actions .inner { width: auto; - margin: 0; - display: grid; - padding: 0; - -ms-grid-rows: auto; - grid-column-gap: 24px; - -ms-grid-columns: 1fr 1fr; - grid-template-rows: auto; - grid-template-areas: "previous next"; - grid-template-columns: 1fr 1fr; + margin: 16px; + display: block; + } + + @media screen and (min-width: 900px){ + .link-actions .inner { + margin: 0; + display: grid; + padding: 0; + -ms-grid-rows: auto; + grid-column-gap: 24px; + -ms-grid-columns: 1fr 1fr; + grid-template-rows: auto; + grid-template-areas: "previous next"; + grid-template-columns: 1fr 1fr; + } } site-menu-button { --site-menu-button-link-decoration: none; @@ -143,7 +144,7 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe color: white; background-color: var(--ddd-theme-polaris-inventOrange); border: 1px solid var(--ddd-theme-polaris-inventOrange); - margin: 0; + margin: 8px; display: block; padding: 0; position: relative; @@ -215,6 +216,17 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe padding: 40px 16px 16px; } + @media screen and (max-width: 400px){ + main { + width: calc(100vw - 48px); + overflow: hidden; + } + + footer { + width: calc(100vw - 8px); + } + } + footer { font-family: var(--ddd-font-secondary); background-color: var(--polaris-footer-primary-bg-color); @@ -325,9 +337,9 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe text-decoration: none; } #haxcmsmobilemenubutton { - padding: 8px; - --simple-icon-height: 32px; - --simple-icon-width: 32px; + padding: 4px; + --simple-icon-height: 28px; + --simple-icon-width: 28px; } @media only screen and (max-width: 1139px) { .wrap { @@ -338,14 +350,6 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe header .wrap { padding: 20px 0; } - .search-modal-btn { - --simple-icon-width: 20px; - --simple-icon-height: 20px; - padding: 10px; - color: white; - position: absolute; - right: 0; - } scroll-button { bottom: 0px; --simple-icon-width: 20px; @@ -387,9 +391,33 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe margin-left: 0px; position: sticky; } + + .pdf-page-btn, + .print-branch-btn, + .search-modal-btn, + #emailbtnwrapper, + #qrcodebtnwrapper { + --simple-icon-height: 24px; + --simple-icon-width: 24px; + margin: 8px 12px; + transition: .3s ease-in-out all; + } + + :host([menu-open]) .pdf-page-btn, + :host([menu-open]) .search-modal-btn, + :host([menu-open]) .print-branch-btn, + :host([menu-open]) #emailbtnwrapper, + :host([menu-open]) #qrcodebtnwrapper { + display: inline-flex; + --simple-icon-height: 30px; + --simple-icon-width: 30px; + margin: 0 4px; + } + :host([menu-open]) .search-modal-btn { + margin-left: 92px; + } @media screen and (min-width: 900px){ #haxcmsmobilemenubutton { - padding: 20px; --simple-icon-height: 40px; --simple-icon-width: 40px; } @@ -412,19 +440,6 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe `]}render(){return e`
- - -
@@ -433,6 +448,29 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe
@@ -491,4 +529,4 @@ import{html as e,css as t}from"../../../lit/index.js";import{HAXCMSLitElementThe - `}static get properties(){let e={};return super.properties&&(e=super.properties),{...e,searchTerm:{type:String},siteDescription:{type:String},imageLink:{type:String},image:{type:String},imageAlt:{type:String},pageTimestamp:{type:Number}}}static get tag(){return"polaris-invent-theme"}appStoreReady(e){if(globalThis.HaxStore&&globalThis.HaxStore.requestAvailability()){let e=globalThis.HaxStore.requestAvailability();["polaris-cta","polaris-mark","polaris-story-card","polaris-tile"].map((t=>{let i=document.createElement(t);e.haxAutoloader.appendChild(i)})),this.windowControllersLoaded.abort()}}constructor(){super(),this.windowControllersLoaded=new AbortController,globalThis.addEventListener("hax-store-app-store-loaded",this.appStoreReady.bind(this),{once:!0,passive:!0,signal:this.windowControllersLoaded.signal}),this.HAXCMSThemeSettings.autoScroll=!0,this.searchTerm="",this.imageAlt="",this.image="",this.imageLink="",this.__disposer=this.__disposer?this.__disposer:[],p((e=>{this.imageLink=c(d.themeData.variables.imageLink),this.__disposer.push(e)})),p((e=>{this.image=c(d.themeData.variables.image),this.__disposer.push(e)})),p((e=>{this.imageAlt=c(d.themeData.variables.imageAlt),this.__disposer.push(e)})),p((e=>{this.siteDescription=c(d.siteDescription),this.__disposer.push(e)})),p((e=>{this.activeManifestIndex=c(d.activeManifestIndex),this.__disposer.push(e)})),p((()=>{!1===c(d.badDevice)&&this.loadDDDFonts(h)})),p((e=>{d.activeItem&&d.activeItem.metadata&&d.activeItem.metadata.updated&&(this.pageTimestamp=c(d.activeItem.metadata.updated)),this.__disposer.push(e)}))}siteModalClick(e){import("../../haxcms-elements/lib/ui-components/site/site-search.js").then((e=>{"search"!==d.getInternalRoute()&&globalThis.history.replaceState({},null,"x/search");const t=new URLSearchParams(d.currentRouterLocation.search),i=globalThis.SimpleModal.requestAvailability().querySelector("site-search").shadowRoot.querySelector("simple-fields-field");i.focus(),t.get("search")&&(i.value=t.get("search"),setTimeout((()=>{i.select()}),0))}))}disconnectedCallback(){for(var e in this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}}customElements.define(PolarisInventTheme.tag,PolarisInventTheme);export{PolarisInventTheme}; \ No newline at end of file + `}static get properties(){let e={};return super.properties&&(e=super.properties),{...e,searchTerm:{type:String},siteDescription:{type:String},imageLink:{type:String},image:{type:String},imageAlt:{type:String},pageTimestamp:{type:Number}}}static get tag(){return"polaris-invent-theme"}appStoreReady(e){if(globalThis.HaxStore&&globalThis.HaxStore.requestAvailability()){let e=globalThis.HaxStore.requestAvailability();["polaris-cta","polaris-mark","polaris-story-card","polaris-tile"].map((t=>{let i=document.createElement(t);e.haxAutoloader.appendChild(i)})),this.windowControllersLoaded.abort()}}constructor(){super(),u.style.setProperty("--rpg-character-toast-display","none"),u.style.setProperty("--rpg-character-toast-mid-background-image","none"),u.style.setProperty("--rpg-character-toast-right-background-image","none"),u.style.setProperty("--rpg-character-toast-left-background-image","none"),u.style.setProperty("--rpg-character-toast-mid-padding",0),u.style.setProperty("--rpg-character-toast-height","96px"),u.style.backgroundColor="white",this.windowControllersLoaded=new AbortController,globalThis.addEventListener("hax-store-app-store-loaded",this.appStoreReady.bind(this),{once:!0,passive:!0,signal:this.windowControllersLoaded.signal}),this.HAXCMSThemeSettings.autoScroll=!0,this.searchTerm="",this.imageAlt="",this.image="",this.imageLink="",this.__disposer=this.__disposer?this.__disposer:[],h((e=>{this.imageLink=g(r.themeData.variables.imageLink),this.__disposer.push(e)})),h((e=>{this.image=g(r.themeData.variables.image),this.__disposer.push(e)})),h((e=>{this.imageAlt=g(r.themeData.variables.imageAlt),this.__disposer.push(e)})),h((e=>{this.siteDescription=g(r.siteDescription),this.__disposer.push(e)})),h((e=>{this.activeManifestIndex=g(r.activeManifestIndex),this.__disposer.push(e)})),h((()=>{!1===g(r.badDevice)&&this.loadDDDFonts(x)})),h((e=>{r.activeItem&&r.activeItem.metadata&&r.activeItem.metadata.updated&&(this.pageTimestamp=g(r.activeItem.metadata.updated)),this.__disposer.push(e)}))}siteModalClick(e){import("../../haxcms-elements/lib/ui-components/site/site-search.js").then((e=>{"search"!==r.getInternalRoute()&&globalThis.history.replaceState({},null,"x/search");const t=new URLSearchParams(r.currentRouterLocation.search),i=globalThis.SimpleModal.requestAvailability().querySelector("site-search").shadowRoot.querySelector("simple-fields-field");i.focus(),t.get("search")&&(i.value=t.get("search"),setTimeout((()=>{i.select()}),0))}))}disconnectedCallback(){for(var e in this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}}customElements.define(PolarisInventTheme.tag,PolarisInventTheme);export{PolarisInventTheme}; \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/self-check/lib/self-check-proposed.js b/build/es6/node_modules/@lrnwebcomponents/self-check/lib/self-check-proposed.js index daaf98bf5c..4fa6f24650 100644 --- a/build/es6/node_modules/@lrnwebcomponents/self-check/lib/self-check-proposed.js +++ b/build/es6/node_modules/@lrnwebcomponents/self-check/lib/self-check-proposed.js @@ -1,4 +1,4 @@ -import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";import{SimpleColors as s}from"../../simple-colors/simple-colors.js";import{SchemaBehaviors as o}from"../../schema-behaviors/schema-behaviors.js";import{lazyImageLoader as a}from"../../lazy-image-helpers/lazy-image-helpers.js";import{I18NMixin as d}from"../../i18n-manager/lib/I18NMixin.js";import"../../simple-icon/simple-icon.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/lib/simple-icon-button.js";import{DDD as l}from"../../d-d-d/d-d-d.js";class SelfCheckProposed extends(d(a(o(l)))){constructor(){super(),this.correct=!1,this.alt="",this.image="",this.question="",this.accentColor="blue",this.title="Self-Check",this.fullWidthImage=!1,this.t={revealAnswer:"Reveal Answer",close:"Close",moreInformation:"More information"},this.registerLocalization({context:this,basePath:import.meta.url,locales:["he","ja","es"]})}static get styles(){return[...super.styles,t` +import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";import{SimpleColors as o}from"../../simple-colors/simple-colors.js";import{SchemaBehaviors as s}from"../../schema-behaviors/schema-behaviors.js";import{lazyImageLoader as d}from"../../lazy-image-helpers/lazy-image-helpers.js";import{I18NMixin as a}from"../../i18n-manager/lib/I18NMixin.js";import"../../simple-icon/simple-icon.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/lib/simple-icon-button.js";import{DDD as n}from"../../d-d-d/d-d-d.js";class SelfCheckProposed extends(a(d(s(n)))){constructor(){super(),this.correct=!1,this.alt="",this.image="",this.question="",this.accentColor="blue",this.title="Self-Check",this.fullWidthImage=!1,this.t={revealAnswer:"Reveal Answer",close:"Close",moreInformation:"More information"},this.registerLocalization({context:this,basePath:import.meta.url,locales:["he","ja","es"]})}static get styles(){return[...super.styles,t` :host { display: block; margin: var(--ddd-spacing-4) 0; @@ -9,14 +9,6 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i } div.card { - color: var( - --self-check-question-text, - var(--simple-colors-default-theme-grey-12, #000) - ); - background-color: var( - --self-check-question-color, - var(--simple-colors-default-theme-grey-1, #fff) - ); overflow: hidden; } @@ -45,14 +37,10 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i } simple-icon#questionmark { - --simple-icon-width: var(--ddd-icon-md); - --simple-icon-height: var(--ddd-icon-md); - color: var( - --self-check-heading-text, - var(--simple-colors-default-theme-grey-1, #fff) - ); + --simple-icon-width: var(--ddd-icon-lg); + --simple-icon-height: var(--ddd-icon-lg); margin: 0 var(--ddd-spacing-4) 0 var(--ddd-spacing-3); - padding: var(--ddd-spacing-3); + padding: var(--ddd-spacing-2); } .heading { @@ -61,20 +49,26 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i text-transform: uppercase; font-size: var(--ddd-font-size-m); font-weight: var(--ddd-font-primary-medium); - color: var( - --self-check-heading-text, - var(--simple-colors-default-theme-grey-1, #fff) + color: + var(--ddd-component-self-check-title-color, + var(--ddd-theme-font-color, + var(--simple-colors-default-theme-grey-12, #000) + ) ); } #header_wrap { - color: var( - --self-check-heading-text, - var(--simple-colors-default-theme-grey-1, #fff) + color: + var(--ddd-component-self-check-title-color, + var(--ddd-theme-font-color, + var(--simple-colors-default-theme-grey-12, #000) + ) ); - background-color: var( - --self-check-heading-color, - var(--simple-colors-default-theme-accent-8, #444) + background-color: + var(--ddd-component-self-check-title-background, + var(--ddd-theme-accent-color, + var(--simple-colors-default-theme-grey-1, #fff) + ) ); display: flex; align-items: center; @@ -85,18 +79,18 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i #question_wrap { color: var( - --self-check-question-text, + --ddd-component-self-check-question-text, var(--simple-colors-default-theme-grey-12, #000) ); background-color: var( - --self-check-question-color, + --ddd-component-self-check-question-background, var(--simple-colors-default-theme-grey-1, #fff) ); position: relative; } .question { - font-size: var(--ddd-font-size-3xs); + font-size: var(--ddd-theme-h5-font-size); line-height: var(--ddd-lh-120); padding: var(--ddd-spacing-5) var(--ddd-spacing-3) var(--ddd-spacing-5) var(--ddd-spacing-6); } @@ -109,11 +103,11 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i visibility: hidden; opacity: 0; color: var( - --self-check-answer-text, + --ddd-component-self-check-answer-text, var(--simple-colors-default-theme-grey-1, #fff) ); background-color: var( - --self-check-answer-color, + --ddd-component-self-check-answer-background, var(--simple-colors-default-theme-light-green-11, #00762e) ); width: 100%; @@ -145,18 +139,21 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i display: inline-flex; } + .triangle { width: 0; height: 0; border-left: var(--ddd-spacing-6) solid transparent; border-right: var(--ddd-spacing-6) solid transparent; border-bottom: var(--ddd-spacing-6) solid - var( - --self-check-heading-color, - var(--simple-colors-default-theme-accent-8, #444) - ); + var(--ddd-component-self-check-title-background, + var(--ddd-theme-accent-color, + var(--simple-colors-default-theme-grey-1, #fff) + ) + ); position: relative; top: calc(var(--ddd-spacing-5) * -1); + left: var(--ddd-spacing-9); } .more_info { @@ -200,7 +197,7 @@ import{LitElement as e,html as i,css as t,svg as r}from"../../../lit/index.js";i
8&&(t=t.substring(5,7));let o=Array.from(Object.keys(this.colors))[t[0]],s=0!==parseInt(t[1])?parseInt(t[1]):1;[5,6,7].includes(s)?s-=3:[8,9].includes(s)&&(s+=2);const l=this.getContrastingColors(o,s,!1);let r=l.grey[0];return s<5&&(r=l.grey.pop()),this.style.setProperty("--simple-fields-button-background-color",`var(--simple-colors-default-theme-accent-${s}, orange)`),this.style.setProperty("--simple-fields-button-color",`var(--simple-colors-fixed-theme-grey-${r}, black)`),o}static get properties(){return{...super.properties,autoAccentColor:{type:Boolean,attribute:"auto-accent-color"}}}static get styles(){return[...super.styles,s,l,e` +import{css as e}from"../../../lit/index.js";import{DDD as t}from"../../d-d-d/d-d-d.js";import{SimpleTagLiteSuper as s}from"./simple-tag-lite.js";import{SimpleFieldsButtonStyles as o,SimpleFieldsTooltipStyles as r}from"./simple-fields-ui.js";export class SimpleTag extends(s(t)){constructor(){super(),this.autoAccentColor=!1}updated(e){super.updated(e),this.shadowRoot&&(e.has("autoAccentColor")||e.has("value"))&&this.value&&this.autoAccentColor&&(this.accentColor=this.calculateAccentColor(this.value))}calculateAccentColor(e){let t=54;for(let s=0;s8&&(t=t.substring(5,7));let s=Array.from(Object.keys(this.colors))[t[0]],o=0!==parseInt(t[1])?parseInt(t[1]):1;[5,6,7].includes(o)?o-=3:[8,9].includes(o)&&(o+=2);const r=this.getContrastingColors(s,o,!1);let l=r.grey[0];return o<5&&(l=r.grey.pop()),this.style.setProperty("--simple-fields-button-background-color",`var(--simple-colors-default-theme-accent-${o}, orange)`),this.style.setProperty("--simple-fields-button-color",`var(--simple-colors-fixed-theme-grey-${l}, black)`),s}static get properties(){return{...super.properties,autoAccentColor:{type:Boolean,attribute:"auto-accent-color"}}}static get styles(){return[...super.styles,o,r,e` :host { --simple-fields-button-color: var( --simple-colors-default-theme-accent-12, @@ -12,5 +12,7 @@ import{css as e}from"../../../lit/index.js";import{SimpleColors as t}from"../../ --simple-colors-default-theme-accent-3, #eeeeee ); + --simple-fields-tag-margin-left: var(--ddd-spacing-2); + --simple-fields-tag-border-width: var(--ddd-border-size-1); } `]}static get tag(){return"simple-tag"}}customElements.define(SimpleTag.tag,SimpleTag); \ No newline at end of file diff --git a/build/es6/node_modules/@lrnwebcomponents/stop-note/lib/stop-note-proposed.js b/build/es6/node_modules/@lrnwebcomponents/stop-note/lib/stop-note-proposed.js index 56bd1c41b7..cae5991bf4 100644 --- a/build/es6/node_modules/@lrnwebcomponents/stop-note/lib/stop-note-proposed.js +++ b/build/es6/node_modules/@lrnwebcomponents/stop-note/lib/stop-note-proposed.js @@ -1,17 +1,15 @@ -import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{remoteLinkBehavior as i}from"../../utils/lib/remoteLinkBehavior.js";import{SimpleIconsetStore as s}from"../../simple-icon/lib/simple-iconset.js";import{I18NMixin as r}from"../../i18n-manager/lib/I18NMixin.js";import"../../simple-icon/simple-icon.js";import{DDD as n}from"../../d-d-d/d-d-d.js";export const StopNoteIconList={stop:"stopnoteicons:stop-icon",warning:"stopnoteicons:warning-icon",success:"stopnoteicons:confirm-icon",info:"stopnoteicons:book-icon"};class StopNoteProposed extends(r(i(n))){static get styles(){return[...super.styles,e` +import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{remoteLinkBehavior as i}from"../../utils/lib/remoteLinkBehavior.js";import{SimpleIconsetStore as s}from"../../simple-icon/lib/simple-iconset.js";import{I18NMixin as n}from"../../i18n-manager/lib/I18NMixin.js";import"../../simple-icon/simple-icon.js";import{DDD as r}from"../../d-d-d/d-d-d.js";export const StopNoteIconList={stop:"stopnoteicons:stop-icon",warning:"stopnoteicons:warning-icon",success:"stopnoteicons:confirm-icon",info:"stopnoteicons:book-icon"};class StopNoteProposed extends(n(i(r))){static get styles(){return[...super.styles,e` :host { display: block; width: auto; - --background-color: var(--ddd-theme-polaris-errorLight); - --accent-color: var(--ddd-theme-polaris-error); + --background-color: var(--ddd-component-stop-note-icon-background, var(--ddd-theme-polaris-errorLight)); + --accent-color: var(--ddd-component-stop-note-text-background, var(--ddd-theme-polaris-error)); margin: var(--ddd-spacing-5) 0; - font-family: var(--ddd-font-primary); - font-weight: var(--ddd-font-primary-bold); } simple-icon { - --simple-icon-height: 100px; - --simple-icon-width: 100px; + --simple-icon-height: var(--ddd-icon-4xl); + --simple-icon-width: var(--ddd-icon-4xl); } :host([icon="stopnoteicons:stop-icon"]) { @@ -43,11 +41,11 @@ import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{rem :host([icon="stopnoteicons:book-icon"]) { --accent-color: var(--ddd-theme-polaris-info); - --background-color: var(--ddd-theme-polaris-infoLight); + --background-color: var(--ddd-theme-polaris-infoLight); } :host([status="info"]) { - --accent-color: var(--ddd-theme-polaris-info); - --background-color: var(--ddd-theme-polaris-infoLight); + --accent-color: var(--ddd-theme-polaris-info); + --background-color: var(--ddd-theme-polaris-infoLight); } .container { @@ -56,10 +54,10 @@ import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{rem } .message_wrap { - border-right: var(--ddd-border-size-4) solid var(--accent-color); + border-color: var(--ddd-component-stop-note-border, var(--accent-color)); padding: var(--ddd-spacing-1) var(--ddd-spacing-6); flex: 1 1 auto; - background-color: var(--background-color); + background-color: var(--ddd-component-stop-note-text-background, var(--background-color)); } :host([title=""]) .secondary_message { @@ -73,15 +71,10 @@ import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{rem } .secondary_message { - font-size: var(--ddd-font-size-3xs); width: 100%; font-weight: var(--ddd-font-primary-regular); } - - .link a { - font-size: var(--ddd-font-size-3xs); - } a:-webkit-any-link { text-decoration: none; } @@ -95,14 +88,13 @@ import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{rem } .svg_wrap { - background-color: var(--accent-color); + display: flex; + align-items: center; + justify-content: center; + background-color: var(--ddd-component-stop-note-icon-background, var(--accent-color)); padding: var(--ddd-spacing-2); width: auto; } - - .stop-icon { - fill: var(--accent-color); - } `]}render(){return o`
@@ -110,7 +102,7 @@ import{LitElement as t,html as o,css as e}from"../../../lit/index.js";import{rem
-
+

${this.title}

diff --git a/system/backend/php/lib/HAXCMS.php b/system/backend/php/lib/HAXCMS.php index 655cd67bfc..bcf792918a 100755 --- a/system/backend/php/lib/HAXCMS.php +++ b/system/backend/php/lib/HAXCMS.php @@ -482,7 +482,15 @@ private function deepObjectLookUp($obj, $path) { */ private function siteSettingsForm($context) { $site = $this->loadSite($context['site']['name']); - /*$items = $site->manifest->orderTree($site->manifest->items); + return $this->config->site->fields; + } + /** + * Build a selectorList for the front-end that has all values + * for selection keyed by item id => title, ordered based on + * hierarchy with -- for each level down + */ + private function itemSelectorList() { + $items = $site->manifest->orderTree($site->manifest->items); $itemValues = array( array( "text" => "-- No page --", @@ -506,23 +514,7 @@ private function siteSettingsForm($context) { "value" => $item->id, )); } - // @note this is brittle if we adjust the props loading from siteFields.json - // but this will allow our regions to get the manifest items - // dynamically while still storing this configuration in a - // static json file - //$this->config->site->fields[0]->properties[1]->properties[1]->itemsList = $itemValues; - //$this->config->site->fields[0]->properties[1]->properties[2]->itemsList = $itemValues; - //$this->config->site->fields[0]->properties[1]->properties[3]->itemsList = $itemValues;*/ - return $this->config->site->fields; - } - // find parent of an item - private function findParent($items, $item) { - foreach ($items as $key => $value) { - if ($value->id == $item->parent) { - return $value; - } - } - return null; + return $itemValues; } /** * Return the form for the siteSettings diff --git a/system/backend/php/lib/HAXCMSFile.php b/system/backend/php/lib/HAXCMSFile.php index 2ef62d7a1e..87aa55d888 100755 --- a/system/backend/php/lib/HAXCMSFile.php +++ b/system/backend/php/lib/HAXCMSFile.php @@ -26,7 +26,7 @@ public function save($upload, $site, $page = null, $imageOps = null) strpos($name, '.css') === FALSE ) { // get contents of the file if it was uploaded into a variable - $filedata = file_get_contents($upload['tmp_name']); + $filedata = @file_get_contents($upload['tmp_name']); // attempt to save the file either to site or system level if ($site == 'system/user/files') { $pathPart = str_replace(HAXCMS_ROOT . '/', '', $HAXCMS->configDirectory) . '/user/files/';