vue-devui 1.0.0-rc.7 → 1.0.0-rc.8

package/form/style.css

@@ -1 +1 @@
-@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay-arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover-icon{width:16px;height:16px;margin-right:8px}.devui-popover-icon .devui-icon.devui-icon-success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover-icon .devui-icon.devui-icon-success>g>circle,.devui-popover-icon .devui-icon.devui-icon-success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover-icon .devui-icon.devui-icon-warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover-icon .devui-icon.devui-icon-info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-icon .devui-icon.devui-icon-error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover-icon .devui-icon.devui-icon-error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover-reference{display:inline-block}.devui-popover-content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover-content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover-fade-bottom-enter-from,.devui-popover-fade-bottom-leave-to,.devui-popover-fade-top-enter-from,.devui-popover-fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover-fade-bottom-enter-to,.devui-popover-fade-bottom-leave-from,.devui-popover-fade-top-enter-to,.devui-popover-fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover-fade-bottom-enter-active,.devui-popover-fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover-fade-bottom-leave-active,.devui-popover-fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover-fade-left-enter-from,.devui-popover-fade-left-leave-to,.devui-popover-fade-right-enter-from,.devui-popover-fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover-fade-left-enter-to,.devui-popover-fade-left-leave-from,.devui-popover-fade-right-enter-to,.devui-popover-fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover-fade-left-enter-active,.devui-popover-fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover-fade-left-leave-active,.devui-popover-fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container .devui-popover-reference{width:100%}.devui-form__control .devui-form__control-container .devui-form__control-feedback{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;margin-top:-7px;line-height:16px;text-align:center;visibility:visible;pointer-events:none}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #8a8e99);min-height:20px;line-height:1.5;text-align:justify}.devui-form-operation .star{color:red}
+@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__reference{display:inline-block}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container .devui-popover-reference{width:100%}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #8a8e99);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form-operation .star{color:red}

package/fullscreen/index.es.js

@@ -28,14 +28,38 @@ function useKeydown(props, ctx) {
     document.removeEventListener("keydown", handleKeydown);
   });
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+const ns = useNamespace("fullscreen");
 const launchNormalFullscreen = (targetElement, props) => {
-  targetElement.classList.add("devui-fullscreen");
+  targetElement.classList.add(ns.b());
   if (props.zIndex) {
     targetElement.setAttribute("style", `z-index: ${props.zIndex}`);
   }
 };
 const exitNormalFullscreen = (targetElement) => {
-  targetElement.classList.remove("devui-fullscreen");
+  targetElement.classList.remove(ns.b());
   targetElement.style.zIndex = "";
 };
 const launchImmersiveFullScreen = async (docElement) => {
@@ -65,10 +89,10 @@ const exitImmersiveFullScreen = async (doc) => {
   return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
 };
 const addFullScreenStyle = () => {
-  document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
+  document.getElementsByTagName("html")[0].classList.add(ns.e("html"));
 };
 const removeFullScreenStyle = () => {
-  document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html");
+  document.getElementsByTagName("html")[0].classList.remove(ns.e("html"));
 };
 function useFullscreen(props, slotElement, ctx) {
   const { modelValue, mode } = toRefs(props);

package/fullscreen/index.umd.js

@@ -1 +1 @@
-(function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";const a={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=""},v=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},S=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},p=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function w(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;const C=r=>{r?(F(l.value,e),h()):(y(l.value),p())},q=r=>{r?v(l.value):c||S(document)};n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const d=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",d)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",d)})}var z="",i=n.defineComponent({name:"DFullscreen",props:a,emits:["update:modelValue"],setup(e,l){const s=n.ref();return w(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}}),x={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(i.name,i)}};t.Fullscreen=i,t.default=x,t.fullscreenProps=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(s,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(s=typeof globalThis!="undefined"?globalThis:s||self,l(s.index={},s.Vue))})(this,function(s,l){"use strict";const F={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},S=27;function v(e,n){const{modelValue:u}=l.toRefs(e),t=c=>{c.keyCode===S&&u&&n.emit("update:modelValue",!1)};l.onMounted(()=>{document.addEventListener("keydown",t)}),l.onUnmounted(()=>{document.removeEventListener("keydown",t)})}function a(e,n,u){let t=e;return n&&(t+=`__${n}`),u&&(t+=`--${u}`),t}function h(e){const n=`devui-${e}`;return{b:()=>a(n),e:r=>r?a(n,r):"",m:r=>r?a(n,"",r):"",em:(r,d)=>r&&d?a(n,r,d):""}}const i=h("fullscreen"),p=(e,n)=>{e.classList.add(i.b()),n.zIndex&&e.setAttribute("style",`z-index: ${n.zIndex}`)},b=e=>{e.classList.remove(i.b()),e.style.zIndex=""},w=async e=>{let n=null;return e.requestFullscreen?n=e.requestFullscreen():e.mozRequestFullScreen?n=e.mozRequestFullScreen():e.webkitRequestFullScreen?n=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(n=Promise.resolve(e.msRequestFullscreen())),await(n==null?void 0:n.then(()=>!!document.fullscreenElement))},x=async e=>{let n=null;return e.exitFullscreen?n=e.exitFullscreen():e.mozCancelFullScreen?n=e.mozCancelFullScreen():e.webkitCancelFullScreen?n=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(n=Promise.resolve(e.msExitFullscreen())),await(n==null?void 0:n.then(()=>!!document.fullscreenElement))},C=()=>{document.getElementsByTagName("html")[0].classList.add(i.e("html"))},q=()=>{document.getElementsByTagName("html")[0].classList.remove(i.e("html"))};function z(e,n,u){const{modelValue:t,mode:c}=l.toRefs(e);let m=!1;const r=o=>{o?(p(n.value,e),C()):(b(n.value),q())},d=o=>{o?w(n.value):m||x(document)};l.watch(t,o=>{c.value==="normal"&&r(o),c.value==="immersive"&&d(o)});const y=()=>{document.fullscreenElement?m=!1:(u.emit("update:modelValue"),m=!0)};l.onMounted(()=>{document.addEventListener("fullscreenchange",y)}),l.onUnmounted(()=>{document.removeEventListener("fullscreenchange",y)})}var N="",f=l.defineComponent({name:"DFullscreen",props:F,emits:["update:modelValue"],setup(e,n){const u=l.ref();return z(e,u,n),v(e,n),()=>{const t=l.renderSlot(l.useSlots(),"default");return l.createVNode("div",{ref:u},[t])}}}),g={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(f.name,f)}};s.Fullscreen=f,s.default=g,s.fullscreenProps=F,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/fullscreen/style.css

@@ -1 +1 @@
-.devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen-html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}
+.devui-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;overflow:auto;background-color:var(--devui-base-bg, #ffffff)}.devui-fullscreen__html{overflow:hidden}:not(:root):fullscreen::backdrop{background:var(--devui-base-bg, #ffffff)}

package/grid/index.es.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { computed, defineComponent, ref, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
+import { defineComponent, ref, computed, onMounted, onUnmounted, provide, createVNode, inject } from "vue";
 const rowProps = {
   align: {
     type: String,
@@ -54,45 +54,6 @@ const screenSizes = {
   xxl: screenSizesProp
 };
 const colProps = __spreadValues(__spreadValues(__spreadValues({}, colPropsBaseStyle), colPropsBaseClass), screenSizes);
-const CLASS_PREFIX$1 = "devui-col";
-function formatClass(prefix, val) {
-  return val !== void 0 ? ` ${prefix}-${val}` : "";
-}
-function useColClassNames(props) {
-  return computed(() => {
-    const spanClass = formatClass(`${CLASS_PREFIX$1}-span`, props.span);
-    const offsetClass = formatClass(`${CLASS_PREFIX$1}-offset`, props.offset);
-    const pullClass = formatClass(`${CLASS_PREFIX$1}-pull`, props.pull);
-    const pushClass = formatClass(`${CLASS_PREFIX$1}-push`, props.push);
-    return `${spanClass}${offsetClass}${pullClass}${pushClass}`;
-  });
-}
-function setSpace(val) {
-  return ` ${val.trim()}${val && " "}`;
-}
-function useSize(colSizes) {
-  const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
-  return computed(() => {
-    return keys.reduce((total, key) => {
-      const valueType = typeof colSizes[key];
-      if (valueType === "number") {
-        total = `${setSpace(total)}${CLASS_PREFIX$1}-${key}-span-${colSizes[key]}`;
-      } else if (valueType === "object") {
-        const colSizesKeys = Object.keys(colSizes[key]);
-        const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
-          if (typeof colSizes[key][k] !== "number") {
-            return "";
-          } else {
-            tot = `${setSpace(tot)}${CLASS_PREFIX$1}-${key}-${k}-${colSizes[key][k]}`;
-          }
-          return tot;
-        }, "");
-        total = `${setSpace(total)}${sum}`;
-      }
-      return total;
-    }, "");
-  });
-}
 const RESULT_SCREEN = ["xxl", "xl", "lg", "md", "sm", "xs"];
 const screenMedias = {
   xs: "screen and (max-width: 575px)",
@@ -151,8 +112,30 @@ function removeSubscribeCb(id) {
     unRegister();
   }
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var row = "";
-const CLASS_PREFIX = "devui-row";
 var Row = defineComponent({
   name: "DRow",
   props: rowProps,
@@ -161,12 +144,12 @@ var Row = defineComponent({
     slots
   }) {
     const gutterScreenSize = ref({});
-    const rowClass = computed(() => {
-      const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align);
-      const justifyClass = formatClass(`${CLASS_PREFIX}-justify`, props.justify);
-      const wrapClass = props.wrap ? ` ${CLASS_PREFIX}-wrap` : "";
-      return `${alignClass}${justifyClass}${wrapClass}`;
-    });
+    const ns = useNamespace("row");
+    const rowClass = computed(() => ({
+      [ns.em("align", props.align)]: true,
+      [ns.em("justify", props.justify)]: true,
+      [ns.e("wrap")]: true
+    }));
     let token;
     onMounted(() => {
       token = responesScreen((screen2) => {
@@ -214,11 +197,46 @@ var Row = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": `${CLASS_PREFIX}${rowClass.value}`
+        "class": [ns.b(), rowClass.value]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
+const colNs = useNamespace("col");
+function useColClassNames(props) {
+  return computed(() => ({
+    [colNs.em("span", props.span ? String(props.span) : "")]: true,
+    [colNs.em("offset", props.offset ? String(props.offset) : "")]: true,
+    [colNs.em("pull", props.pull ? String(props.pull) : "")]: true,
+    [colNs.em("push", props.push ? String(props.push) : "")]: true
+  }));
+}
+function setSpace(val) {
+  return ` ${val.trim()}${val && " "}`;
+}
+function useSize(colSizes) {
+  const keys = Object.keys(colSizes).filter((key) => key in screenSizes);
+  return computed(() => {
+    return keys.reduce((total, key) => {
+      const valueType = typeof colSizes[key];
+      if (valueType === "number") {
+        total = `${setSpace(total)}${colNs.em(key, `span-${colSizes[key]}`)}`;
+      } else if (valueType === "object") {
+        const colSizesKeys = Object.keys(colSizes[key]);
+        const sum = colSizesKeys.filter((item) => item in colPropsBaseClass).reduce((tot, k) => {
+          if (typeof colSizes[key][k] !== "number") {
+            return "";
+          } else {
+            tot = `${setSpace(tot)}${colNs.em(key, `${k}-${colSizes[key][k]}`)}`;
+          }
+          return tot;
+        }, "");
+        total = `${setSpace(total)}${sum}`;
+      }
+      return total;
+    }, "");
+  });
+}
 var col = "";
 var Col = defineComponent({
   name: "DCol",
@@ -226,6 +244,7 @@ var Col = defineComponent({
   setup(props, {
     slots
   }) {
+    const ns = useNamespace("col");
     const formatFlex = (flex) => {
       if (typeof flex === "number") {
         return `${flex} ${flex} auto`;
@@ -245,7 +264,7 @@ var Col = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": `${CLASS_PREFIX$1}${colClassNames.value}${sizeClassNames.value}`,
+        "class": [ns.b(), colClassNames.value, sizeClassNames.value],
         "style": __spreadValues(__spreadValues({}, colStyle.value), gutterStyle.value)
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };

package/grid/index.umd.js

@@ -1 +1 @@
-var X=Object.defineProperty;var M=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var T=(n,t,i)=>t in n?X(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i,l=(n,t)=>{for(var i in t||(t={}))q.call(t,i)&&T(n,i,t[i]);if(M)for(var i of M(t))H.call(t,i)&&T(n,i,t[i]);return n};(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.index={},n.Vue))})(this,function(n,t){"use strict";const i={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},g=Number,N={flex:[String,Number],order:g},S={offset:g,pull:g,push:g,span:g},m=[Number,Object],w={xs:m,sm:m,md:m,lg:m,xl:m,xxl:m},R=l(l(l({},N),S),w),d="devui-col";function p(e,s){return s!==void 0?` ${e}-${s}`:""}function z(e){return t.computed(()=>{const s=p(`${d}-span`,e.span),u=p(`${d}-offset`,e.offset),c=p(`${d}-pull`,e.pull),a=p(`${d}-push`,e.push);return`${s}${u}${c}${a}`})}function x(e){return` ${e.trim()}${e&&" "}`}function A(e){const s=Object.keys(e).filter(u=>u in w);return t.computed(()=>s.reduce((u,c)=>{const a=typeof e[c];if(a==="number")u=`${x(u)}${d}-${c}-span-${e[c]}`;else if(a==="object"){const r=Object.keys(e[c]).filter(o=>o in S).reduce((o,f)=>typeof e[c][f]!="number"?"":(o=`${x(o)}${d}-${c}-${f}-${e[c][f]}`,o),"");u=`${x(u)}${r}`}return u},""))}const _=["xxl","xl","lg","md","sm","xs"],j={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},$=new Map;let P=-1;const y={},O={};function B(){$.forEach(e=>{e(l({},y))})}function F(){Object.keys(j).forEach(e=>{const s=window.matchMedia(j[e]);s.matches&&(y[e]=!0,B());const u=c=>{y[e]=c.matches,B()};s.addEventListener("change",u),O[e]={res:s,listener:u}})}function U(e){return $.size||F(),P+=1,$.set(P,e),e(l({},y)),P}function V(){Object.keys(j).forEach(e=>{const s=O[e];s.res.removeEventListener("change",s.listener)}),$.clear()}function D(e){$.delete(e),$.size===0&&V()}var J="";const C="devui-row";var v=t.defineComponent({name:"DRow",props:i,emits:[],setup(e,{slots:s}){const u=t.ref({}),c=t.computed(()=>{const r=p(`${C}-align`,e.align),o=p(`${C}-justify`,e.justify),f=e.wrap?` ${C}-wrap`:"";return`${r}${o}${f}`});let a;t.onMounted(()=>{a=U(r=>{u.value=r})}),t.onUnmounted(()=>{D(a)});const b=t.computed(()=>{if(!e.gutter)return{};let r=[0,0];Array.isArray(e.gutter)?r=e.gutter:typeof e.gutter=="number"?r=[e.gutter,0]:_.some(L=>{const h=e.gutter[L];return u.value[L]&&h?(typeof h=="number"?r=[h,0]:r=h,!0):!1});const o=`${(r[0]||0)/2}px`,f=`${(r[0]||0)/2}px`,I=`${(r[1]||0)/2}px`,K=`${(r[1]||0)/2}px`;return{paddingLeft:o,paddingRight:f,paddingTop:I,paddingBottom:K}});return t.provide("gutterStyle",b),()=>{var r;return t.createVNode("div",{class:`${C}${c.value}`},[(r=s.default)==null?void 0:r.call(s)])}}}),Q="",E=t.defineComponent({name:"DCol",props:R,setup(e,{slots:s}){const u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,c=z(e),a=A(e),b=t.computed(()=>({flex:u(e.flex),order:e.order})),r=t.inject("gutterStyle");return()=>{var o;return t.createVNode("div",{class:`${d}${c.value}${a.value}`,style:l(l({},b.value),r.value)},[(o=s.default)==null?void 0:o.call(s)])}}}),G={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(v.name,v),e.component(E.name,E)}};n.Col=E,n.Row=v,n.colProps=R,n.colPropsBaseClass=S,n.colPropsBaseStyle=N,n.default=G,n.rowProps=i,n.screenSizes=w,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var I=Object.defineProperty;var T=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var z=(s,t,a)=>t in s?I(s,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[t]=a,l=(s,t)=>{for(var a in t||(t={}))J.call(t,a)&&z(s,a,t[a]);if(T)for(var a of T(t))Q.call(t,a)&&z(s,a,t[a]);return s};(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.index={},s.Vue))})(this,function(s,t){"use strict";const a={align:{type:String,default:"top"},gutter:{type:[Number,Object,Array],default:0},justify:{type:String,default:"start"},wrap:{type:Boolean,default:!1}},b=Number,E={flex:[String,Number],order:b},$={offset:b,pull:b,push:b,span:b},f=[Number,Object],w={xs:f,sm:f,md:f,lg:f,xl:f,xxl:f},B=l(l(l({},E),$),w),_=["xxl","xl","lg","md","sm","xs"],x={xs:"screen and (max-width: 575px)",sm:"screen and (min-width: 576px)",md:"screen and (min-width: 768px)",lg:"screen and (min-width: 992px)",xl:"screen and (min-width: 1200px)",xxl:"screen and (min-width: 1600px)"},m=new Map;let C=-1;const y={},O={};function R(){m.forEach(e=>{e(l({},y))})}function L(){Object.keys(x).forEach(e=>{const n=window.matchMedia(x[e]);n.matches&&(y[e]=!0,R());const c=u=>{y[e]=u.matches,R()};n.addEventListener("change",c),O[e]={res:n,listener:c}})}function A(e){return m.size||L(),C+=1,m.set(C,e),e(l({},y)),C}function U(){Object.keys(x).forEach(e=>{const n=O[e];n.res.removeEventListener("change",n.listener)}),m.clear()}function V(e){m.delete(e),m.size===0&&U()}function h(e,n,c){let u=e;return n&&(u+=`__${n}`),c&&(u+=`--${c}`),u}function j(e){const n=`devui-${e}`;return{b:()=>h(n),e:i=>i?h(n,i):"",m:i=>i?h(n,"",i):"",em:(i,r)=>i&&r?h(n,i,r):""}}var W="",N=t.defineComponent({name:"DRow",props:a,emits:[],setup(e,{slots:n}){const c=t.ref({}),u=j("row"),d=t.computed(()=>({[u.em("align",e.align)]:!0,[u.em("justify",e.justify)]:!0,[u.e("wrap")]:!0}));let p;t.onMounted(()=>{p=A(r=>{c.value=r})}),t.onUnmounted(()=>{V(p)});const i=t.computed(()=>{if(!e.gutter)return{};let r=[0,0];Array.isArray(e.gutter)?r=e.gutter:typeof e.gutter=="number"?r=[e.gutter,0]:_.some(M=>{const S=e.gutter[M];return c.value[M]&&S?(typeof S=="number"?r=[S,0]:r=S,!0):!1});const o=`${(r[0]||0)/2}px`,q=`${(r[0]||0)/2}px`,F=`${(r[1]||0)/2}px`,H=`${(r[1]||0)/2}px`;return{paddingLeft:o,paddingRight:q,paddingTop:F,paddingBottom:H}});return t.provide("gutterStyle",i),()=>{var r;return t.createVNode("div",{class:[u.b(),d.value]},[(r=n.default)==null?void 0:r.call(n)])}}});const g=j("col");function D(e){return t.computed(()=>({[g.em("span",e.span?String(e.span):"")]:!0,[g.em("offset",e.offset?String(e.offset):"")]:!0,[g.em("pull",e.pull?String(e.pull):"")]:!0,[g.em("push",e.push?String(e.push):"")]:!0}))}function P(e){return` ${e.trim()}${e&&" "}`}function G(e){const n=Object.keys(e).filter(c=>c in w);return t.computed(()=>n.reduce((c,u)=>{const d=typeof e[u];if(d==="number")c=`${P(c)}${g.em(u,`span-${e[u]}`)}`;else if(d==="object"){const i=Object.keys(e[u]).filter(r=>r in $).reduce((r,o)=>typeof e[u][o]!="number"?"":(r=`${P(r)}${g.em(u,`${o}-${e[u][o]}`)}`,r),"");c=`${P(c)}${i}`}return c},""))}var X="",v=t.defineComponent({name:"DCol",props:B,setup(e,{slots:n}){const c=j("col"),u=o=>typeof o=="number"?`${o} ${o} auto`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(o)?`0 0 ${o}`:o,d=D(e),p=G(e),i=t.computed(()=>({flex:u(e.flex),order:e.order})),r=t.inject("gutterStyle");return()=>{var o;return t.createVNode("div",{class:[c.b(),d.value,p.value],style:l(l({},i.value),r.value)},[(o=n.default)==null?void 0:o.call(n)])}}}),K={title:"Grid \u6805\u683C",category:"\u5E03\u5C40",status:"100%",install(e){e.component(N.name,N),e.component(v.name,v)}};s.Col=v,s.Row=N,s.colProps=B,s.colPropsBaseClass=$,s.colPropsBaseStyle=E,s.default=K,s.rowProps=a,s.screenSizes=w,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/grid/style.css

@@ -1 +1 @@
-.devui-row{display:flex}.devui-row-wrap{flex-wrap:wrap}.devui-row-align-top{align-items:flex-start}.devui-row-align-middle{align-items:center}.devui-row-align-bottom{align-items:flex-end}.devui-row-justify-start{justify-content:flex-start}.devui-row-justify-center{justify-content:center}.devui-row-justify-end{justify-content:flex-end}.devui-row-justify-around{justify-content:space-around}.devui-row-justify-between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col-span-0,.devui-col-xs-span-0{display:none}.devui-col-offset-1{margin-left:4.1666666667%}.devui-col-pull-1{right:4.1666666667%}.devui-col-push-1{left:4.1666666667%}.devui-col-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xs-offset-1{margin-left:4.1666666667%}.devui-col-xs-pull-1{right:4.1666666667%}.devui-col-xs-push-1{left:4.1666666667%}.devui-col-xs-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-offset-2{margin-left:8.3333333333%}.devui-col-pull-2{right:8.3333333333%}.devui-col-push-2{left:8.3333333333%}.devui-col-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xs-offset-2{margin-left:8.3333333333%}.devui-col-xs-pull-2{right:8.3333333333%}.devui-col-xs-push-2{left:8.3333333333%}.devui-col-xs-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-offset-3{margin-left:12.5%}.devui-col-pull-3{right:12.5%}.devui-col-push-3{left:12.5%}.devui-col-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xs-offset-3{margin-left:12.5%}.devui-col-xs-pull-3{right:12.5%}.devui-col-xs-push-3{left:12.5%}.devui-col-xs-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-offset-4{margin-left:16.6666666667%}.devui-col-pull-4{right:16.6666666667%}.devui-col-push-4{left:16.6666666667%}.devui-col-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xs-offset-4{margin-left:16.6666666667%}.devui-col-xs-pull-4{right:16.6666666667%}.devui-col-xs-push-4{left:16.6666666667%}.devui-col-xs-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-offset-5{margin-left:20.8333333333%}.devui-col-pull-5{right:20.8333333333%}.devui-col-push-5{left:20.8333333333%}.devui-col-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xs-offset-5{margin-left:20.8333333333%}.devui-col-xs-pull-5{right:20.8333333333%}.devui-col-xs-push-5{left:20.8333333333%}.devui-col-xs-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-offset-6{margin-left:25%}.devui-col-pull-6{right:25%}.devui-col-push-6{left:25%}.devui-col-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xs-offset-6{margin-left:25%}.devui-col-xs-pull-6{right:25%}.devui-col-xs-push-6{left:25%}.devui-col-xs-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-offset-7{margin-left:29.1666666667%}.devui-col-pull-7{right:29.1666666667%}.devui-col-push-7{left:29.1666666667%}.devui-col-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xs-offset-7{margin-left:29.1666666667%}.devui-col-xs-pull-7{right:29.1666666667%}.devui-col-xs-push-7{left:29.1666666667%}.devui-col-xs-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-offset-8{margin-left:33.3333333333%}.devui-col-pull-8{right:33.3333333333%}.devui-col-push-8{left:33.3333333333%}.devui-col-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xs-offset-8{margin-left:33.3333333333%}.devui-col-xs-pull-8{right:33.3333333333%}.devui-col-xs-push-8{left:33.3333333333%}.devui-col-xs-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-offset-9{margin-left:37.5%}.devui-col-pull-9{right:37.5%}.devui-col-push-9{left:37.5%}.devui-col-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xs-offset-9{margin-left:37.5%}.devui-col-xs-pull-9{right:37.5%}.devui-col-xs-push-9{left:37.5%}.devui-col-xs-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-offset-10{margin-left:41.6666666667%}.devui-col-pull-10{right:41.6666666667%}.devui-col-push-10{left:41.6666666667%}.devui-col-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xs-offset-10{margin-left:41.6666666667%}.devui-col-xs-pull-10{right:41.6666666667%}.devui-col-xs-push-10{left:41.6666666667%}.devui-col-xs-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-offset-11{margin-left:45.8333333333%}.devui-col-pull-11{right:45.8333333333%}.devui-col-push-11{left:45.8333333333%}.devui-col-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xs-offset-11{margin-left:45.8333333333%}.devui-col-xs-pull-11{right:45.8333333333%}.devui-col-xs-push-11{left:45.8333333333%}.devui-col-xs-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-offset-12{margin-left:50%}.devui-col-pull-12{right:50%}.devui-col-push-12{left:50%}.devui-col-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xs-offset-12{margin-left:50%}.devui-col-xs-pull-12{right:50%}.devui-col-xs-push-12{left:50%}.devui-col-xs-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-offset-13{margin-left:54.1666666667%}.devui-col-pull-13{right:54.1666666667%}.devui-col-push-13{left:54.1666666667%}.devui-col-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xs-offset-13{margin-left:54.1666666667%}.devui-col-xs-pull-13{right:54.1666666667%}.devui-col-xs-push-13{left:54.1666666667%}.devui-col-xs-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-offset-14{margin-left:58.3333333333%}.devui-col-pull-14{right:58.3333333333%}.devui-col-push-14{left:58.3333333333%}.devui-col-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xs-offset-14{margin-left:58.3333333333%}.devui-col-xs-pull-14{right:58.3333333333%}.devui-col-xs-push-14{left:58.3333333333%}.devui-col-xs-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-offset-15{margin-left:62.5%}.devui-col-pull-15{right:62.5%}.devui-col-push-15{left:62.5%}.devui-col-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xs-offset-15{margin-left:62.5%}.devui-col-xs-pull-15{right:62.5%}.devui-col-xs-push-15{left:62.5%}.devui-col-xs-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-offset-16{margin-left:66.6666666667%}.devui-col-pull-16{right:66.6666666667%}.devui-col-push-16{left:66.6666666667%}.devui-col-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xs-offset-16{margin-left:66.6666666667%}.devui-col-xs-pull-16{right:66.6666666667%}.devui-col-xs-push-16{left:66.6666666667%}.devui-col-xs-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-offset-17{margin-left:70.8333333333%}.devui-col-pull-17{right:70.8333333333%}.devui-col-push-17{left:70.8333333333%}.devui-col-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xs-offset-17{margin-left:70.8333333333%}.devui-col-xs-pull-17{right:70.8333333333%}.devui-col-xs-push-17{left:70.8333333333%}.devui-col-xs-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-offset-18{margin-left:75%}.devui-col-pull-18{right:75%}.devui-col-push-18{left:75%}.devui-col-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xs-offset-18{margin-left:75%}.devui-col-xs-pull-18{right:75%}.devui-col-xs-push-18{left:75%}.devui-col-xs-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-offset-19{margin-left:79.1666666667%}.devui-col-pull-19{right:79.1666666667%}.devui-col-push-19{left:79.1666666667%}.devui-col-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xs-offset-19{margin-left:79.1666666667%}.devui-col-xs-pull-19{right:79.1666666667%}.devui-col-xs-push-19{left:79.1666666667%}.devui-col-xs-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-offset-20{margin-left:83.3333333333%}.devui-col-pull-20{right:83.3333333333%}.devui-col-push-20{left:83.3333333333%}.devui-col-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xs-offset-20{margin-left:83.3333333333%}.devui-col-xs-pull-20{right:83.3333333333%}.devui-col-xs-push-20{left:83.3333333333%}.devui-col-xs-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-offset-21{margin-left:87.5%}.devui-col-pull-21{right:87.5%}.devui-col-push-21{left:87.5%}.devui-col-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xs-offset-21{margin-left:87.5%}.devui-col-xs-pull-21{right:87.5%}.devui-col-xs-push-21{left:87.5%}.devui-col-xs-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-offset-22{margin-left:91.6666666667%}.devui-col-pull-22{right:91.6666666667%}.devui-col-push-22{left:91.6666666667%}.devui-col-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xs-offset-22{margin-left:91.6666666667%}.devui-col-xs-pull-22{right:91.6666666667%}.devui-col-xs-push-22{left:91.6666666667%}.devui-col-xs-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-offset-23{margin-left:95.8333333333%}.devui-col-pull-23{right:95.8333333333%}.devui-col-push-23{left:95.8333333333%}.devui-col-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xs-offset-23{margin-left:95.8333333333%}.devui-col-xs-pull-23{right:95.8333333333%}.devui-col-xs-push-23{left:95.8333333333%}.devui-col-xs-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-offset-24{margin-left:100%}.devui-col-pull-24{right:100%}.devui-col-push-24{left:100%}.devui-col-span-24{display:block;flex:0 0 100%;width:100%}.devui-col-xs-offset-24{margin-left:100%}.devui-col-xs-pull-24{right:100%}.devui-col-xs-push-24{left:100%}.devui-col-xs-span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col-sm-span-0{display:none}.devui-col-sm-offset-1{margin-left:4.1666666667%}.devui-col-sm-pull-1{right:4.1666666667%}.devui-col-sm-push-1{left:4.1666666667%}.devui-col-sm-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-sm-offset-2{margin-left:8.3333333333%}.devui-col-sm-pull-2{right:8.3333333333%}.devui-col-sm-push-2{left:8.3333333333%}.devui-col-sm-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-sm-offset-3{margin-left:12.5%}.devui-col-sm-pull-3{right:12.5%}.devui-col-sm-push-3{left:12.5%}.devui-col-sm-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-sm-offset-4{margin-left:16.6666666667%}.devui-col-sm-pull-4{right:16.6666666667%}.devui-col-sm-push-4{left:16.6666666667%}.devui-col-sm-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-sm-offset-5{margin-left:20.8333333333%}.devui-col-sm-pull-5{right:20.8333333333%}.devui-col-sm-push-5{left:20.8333333333%}.devui-col-sm-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-sm-offset-6{margin-left:25%}.devui-col-sm-pull-6{right:25%}.devui-col-sm-push-6{left:25%}.devui-col-sm-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-sm-offset-7{margin-left:29.1666666667%}.devui-col-sm-pull-7{right:29.1666666667%}.devui-col-sm-push-7{left:29.1666666667%}.devui-col-sm-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-sm-offset-8{margin-left:33.3333333333%}.devui-col-sm-pull-8{right:33.3333333333%}.devui-col-sm-push-8{left:33.3333333333%}.devui-col-sm-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-sm-offset-9{margin-left:37.5%}.devui-col-sm-pull-9{right:37.5%}.devui-col-sm-push-9{left:37.5%}.devui-col-sm-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-sm-offset-10{margin-left:41.6666666667%}.devui-col-sm-pull-10{right:41.6666666667%}.devui-col-sm-push-10{left:41.6666666667%}.devui-col-sm-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-sm-offset-11{margin-left:45.8333333333%}.devui-col-sm-pull-11{right:45.8333333333%}.devui-col-sm-push-11{left:45.8333333333%}.devui-col-sm-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-sm-offset-12{margin-left:50%}.devui-col-sm-pull-12{right:50%}.devui-col-sm-push-12{left:50%}.devui-col-sm-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-sm-offset-13{margin-left:54.1666666667%}.devui-col-sm-pull-13{right:54.1666666667%}.devui-col-sm-push-13{left:54.1666666667%}.devui-col-sm-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-sm-offset-14{margin-left:58.3333333333%}.devui-col-sm-pull-14{right:58.3333333333%}.devui-col-sm-push-14{left:58.3333333333%}.devui-col-sm-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-sm-offset-15{margin-left:62.5%}.devui-col-sm-pull-15{right:62.5%}.devui-col-sm-push-15{left:62.5%}.devui-col-sm-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-sm-offset-16{margin-left:66.6666666667%}.devui-col-sm-pull-16{right:66.6666666667%}.devui-col-sm-push-16{left:66.6666666667%}.devui-col-sm-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-sm-offset-17{margin-left:70.8333333333%}.devui-col-sm-pull-17{right:70.8333333333%}.devui-col-sm-push-17{left:70.8333333333%}.devui-col-sm-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-sm-offset-18{margin-left:75%}.devui-col-sm-pull-18{right:75%}.devui-col-sm-push-18{left:75%}.devui-col-sm-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-sm-offset-19{margin-left:79.1666666667%}.devui-col-sm-pull-19{right:79.1666666667%}.devui-col-sm-push-19{left:79.1666666667%}.devui-col-sm-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-sm-offset-20{margin-left:83.3333333333%}.devui-col-sm-pull-20{right:83.3333333333%}.devui-col-sm-push-20{left:83.3333333333%}.devui-col-sm-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-sm-offset-21{margin-left:87.5%}.devui-col-sm-pull-21{right:87.5%}.devui-col-sm-push-21{left:87.5%}.devui-col-sm-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-sm-offset-22{margin-left:91.6666666667%}.devui-col-sm-pull-22{right:91.6666666667%}.devui-col-sm-push-22{left:91.6666666667%}.devui-col-sm-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-sm-offset-23{margin-left:95.8333333333%}.devui-col-sm-pull-23{right:95.8333333333%}.devui-col-sm-push-23{left:95.8333333333%}.devui-col-sm-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-sm-offset-24{margin-left:100%}.devui-col-sm-pull-24{right:100%}.devui-col-sm-push-24{left:100%}.devui-col-sm-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col-md-span-0{display:none}.devui-col-md-offset-1{margin-left:4.1666666667%}.devui-col-md-pull-1{right:4.1666666667%}.devui-col-md-push-1{left:4.1666666667%}.devui-col-md-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-md-offset-2{margin-left:8.3333333333%}.devui-col-md-pull-2{right:8.3333333333%}.devui-col-md-push-2{left:8.3333333333%}.devui-col-md-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-md-offset-3{margin-left:12.5%}.devui-col-md-pull-3{right:12.5%}.devui-col-md-push-3{left:12.5%}.devui-col-md-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-md-offset-4{margin-left:16.6666666667%}.devui-col-md-pull-4{right:16.6666666667%}.devui-col-md-push-4{left:16.6666666667%}.devui-col-md-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-md-offset-5{margin-left:20.8333333333%}.devui-col-md-pull-5{right:20.8333333333%}.devui-col-md-push-5{left:20.8333333333%}.devui-col-md-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-md-offset-6{margin-left:25%}.devui-col-md-pull-6{right:25%}.devui-col-md-push-6{left:25%}.devui-col-md-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-md-offset-7{margin-left:29.1666666667%}.devui-col-md-pull-7{right:29.1666666667%}.devui-col-md-push-7{left:29.1666666667%}.devui-col-md-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-md-offset-8{margin-left:33.3333333333%}.devui-col-md-pull-8{right:33.3333333333%}.devui-col-md-push-8{left:33.3333333333%}.devui-col-md-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-md-offset-9{margin-left:37.5%}.devui-col-md-pull-9{right:37.5%}.devui-col-md-push-9{left:37.5%}.devui-col-md-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-md-offset-10{margin-left:41.6666666667%}.devui-col-md-pull-10{right:41.6666666667%}.devui-col-md-push-10{left:41.6666666667%}.devui-col-md-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-md-offset-11{margin-left:45.8333333333%}.devui-col-md-pull-11{right:45.8333333333%}.devui-col-md-push-11{left:45.8333333333%}.devui-col-md-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-md-offset-12{margin-left:50%}.devui-col-md-pull-12{right:50%}.devui-col-md-push-12{left:50%}.devui-col-md-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-md-offset-13{margin-left:54.1666666667%}.devui-col-md-pull-13{right:54.1666666667%}.devui-col-md-push-13{left:54.1666666667%}.devui-col-md-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-md-offset-14{margin-left:58.3333333333%}.devui-col-md-pull-14{right:58.3333333333%}.devui-col-md-push-14{left:58.3333333333%}.devui-col-md-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-md-offset-15{margin-left:62.5%}.devui-col-md-pull-15{right:62.5%}.devui-col-md-push-15{left:62.5%}.devui-col-md-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-md-offset-16{margin-left:66.6666666667%}.devui-col-md-pull-16{right:66.6666666667%}.devui-col-md-push-16{left:66.6666666667%}.devui-col-md-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-md-offset-17{margin-left:70.8333333333%}.devui-col-md-pull-17{right:70.8333333333%}.devui-col-md-push-17{left:70.8333333333%}.devui-col-md-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-md-offset-18{margin-left:75%}.devui-col-md-pull-18{right:75%}.devui-col-md-push-18{left:75%}.devui-col-md-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-md-offset-19{margin-left:79.1666666667%}.devui-col-md-pull-19{right:79.1666666667%}.devui-col-md-push-19{left:79.1666666667%}.devui-col-md-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-md-offset-20{margin-left:83.3333333333%}.devui-col-md-pull-20{right:83.3333333333%}.devui-col-md-push-20{left:83.3333333333%}.devui-col-md-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-md-offset-21{margin-left:87.5%}.devui-col-md-pull-21{right:87.5%}.devui-col-md-push-21{left:87.5%}.devui-col-md-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-md-offset-22{margin-left:91.6666666667%}.devui-col-md-pull-22{right:91.6666666667%}.devui-col-md-push-22{left:91.6666666667%}.devui-col-md-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-md-offset-23{margin-left:95.8333333333%}.devui-col-md-pull-23{right:95.8333333333%}.devui-col-md-push-23{left:95.8333333333%}.devui-col-md-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-md-offset-24{margin-left:100%}.devui-col-md-pull-24{right:100%}.devui-col-md-push-24{left:100%}.devui-col-md-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col-lg-span-0{display:none}.devui-col-lg-offset-1{margin-left:4.1666666667%}.devui-col-lg-pull-1{right:4.1666666667%}.devui-col-lg-push-1{left:4.1666666667%}.devui-col-lg-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-lg-offset-2{margin-left:8.3333333333%}.devui-col-lg-pull-2{right:8.3333333333%}.devui-col-lg-push-2{left:8.3333333333%}.devui-col-lg-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-lg-offset-3{margin-left:12.5%}.devui-col-lg-pull-3{right:12.5%}.devui-col-lg-push-3{left:12.5%}.devui-col-lg-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-lg-offset-4{margin-left:16.6666666667%}.devui-col-lg-pull-4{right:16.6666666667%}.devui-col-lg-push-4{left:16.6666666667%}.devui-col-lg-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-lg-offset-5{margin-left:20.8333333333%}.devui-col-lg-pull-5{right:20.8333333333%}.devui-col-lg-push-5{left:20.8333333333%}.devui-col-lg-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-lg-offset-6{margin-left:25%}.devui-col-lg-pull-6{right:25%}.devui-col-lg-push-6{left:25%}.devui-col-lg-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-lg-offset-7{margin-left:29.1666666667%}.devui-col-lg-pull-7{right:29.1666666667%}.devui-col-lg-push-7{left:29.1666666667%}.devui-col-lg-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-lg-offset-8{margin-left:33.3333333333%}.devui-col-lg-pull-8{right:33.3333333333%}.devui-col-lg-push-8{left:33.3333333333%}.devui-col-lg-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-lg-offset-9{margin-left:37.5%}.devui-col-lg-pull-9{right:37.5%}.devui-col-lg-push-9{left:37.5%}.devui-col-lg-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-lg-offset-10{margin-left:41.6666666667%}.devui-col-lg-pull-10{right:41.6666666667%}.devui-col-lg-push-10{left:41.6666666667%}.devui-col-lg-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-lg-offset-11{margin-left:45.8333333333%}.devui-col-lg-pull-11{right:45.8333333333%}.devui-col-lg-push-11{left:45.8333333333%}.devui-col-lg-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-lg-offset-12{margin-left:50%}.devui-col-lg-pull-12{right:50%}.devui-col-lg-push-12{left:50%}.devui-col-lg-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-lg-offset-13{margin-left:54.1666666667%}.devui-col-lg-pull-13{right:54.1666666667%}.devui-col-lg-push-13{left:54.1666666667%}.devui-col-lg-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-lg-offset-14{margin-left:58.3333333333%}.devui-col-lg-pull-14{right:58.3333333333%}.devui-col-lg-push-14{left:58.3333333333%}.devui-col-lg-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-lg-offset-15{margin-left:62.5%}.devui-col-lg-pull-15{right:62.5%}.devui-col-lg-push-15{left:62.5%}.devui-col-lg-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-lg-offset-16{margin-left:66.6666666667%}.devui-col-lg-pull-16{right:66.6666666667%}.devui-col-lg-push-16{left:66.6666666667%}.devui-col-lg-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-lg-offset-17{margin-left:70.8333333333%}.devui-col-lg-pull-17{right:70.8333333333%}.devui-col-lg-push-17{left:70.8333333333%}.devui-col-lg-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-lg-offset-18{margin-left:75%}.devui-col-lg-pull-18{right:75%}.devui-col-lg-push-18{left:75%}.devui-col-lg-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-lg-offset-19{margin-left:79.1666666667%}.devui-col-lg-pull-19{right:79.1666666667%}.devui-col-lg-push-19{left:79.1666666667%}.devui-col-lg-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-lg-offset-20{margin-left:83.3333333333%}.devui-col-lg-pull-20{right:83.3333333333%}.devui-col-lg-push-20{left:83.3333333333%}.devui-col-lg-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-lg-offset-21{margin-left:87.5%}.devui-col-lg-pull-21{right:87.5%}.devui-col-lg-push-21{left:87.5%}.devui-col-lg-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-lg-offset-22{margin-left:91.6666666667%}.devui-col-lg-pull-22{right:91.6666666667%}.devui-col-lg-push-22{left:91.6666666667%}.devui-col-lg-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-lg-offset-23{margin-left:95.8333333333%}.devui-col-lg-pull-23{right:95.8333333333%}.devui-col-lg-push-23{left:95.8333333333%}.devui-col-lg-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-lg-offset-24{margin-left:100%}.devui-col-lg-pull-24{right:100%}.devui-col-lg-push-24{left:100%}.devui-col-lg-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col-xl-span-0{display:none}.devui-col-xl-offset-1{margin-left:4.1666666667%}.devui-col-xl-pull-1{right:4.1666666667%}.devui-col-xl-push-1{left:4.1666666667%}.devui-col-xl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xl-offset-2{margin-left:8.3333333333%}.devui-col-xl-pull-2{right:8.3333333333%}.devui-col-xl-push-2{left:8.3333333333%}.devui-col-xl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xl-offset-3{margin-left:12.5%}.devui-col-xl-pull-3{right:12.5%}.devui-col-xl-push-3{left:12.5%}.devui-col-xl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xl-offset-4{margin-left:16.6666666667%}.devui-col-xl-pull-4{right:16.6666666667%}.devui-col-xl-push-4{left:16.6666666667%}.devui-col-xl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xl-offset-5{margin-left:20.8333333333%}.devui-col-xl-pull-5{right:20.8333333333%}.devui-col-xl-push-5{left:20.8333333333%}.devui-col-xl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xl-offset-6{margin-left:25%}.devui-col-xl-pull-6{right:25%}.devui-col-xl-push-6{left:25%}.devui-col-xl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xl-offset-7{margin-left:29.1666666667%}.devui-col-xl-pull-7{right:29.1666666667%}.devui-col-xl-push-7{left:29.1666666667%}.devui-col-xl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xl-offset-8{margin-left:33.3333333333%}.devui-col-xl-pull-8{right:33.3333333333%}.devui-col-xl-push-8{left:33.3333333333%}.devui-col-xl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xl-offset-9{margin-left:37.5%}.devui-col-xl-pull-9{right:37.5%}.devui-col-xl-push-9{left:37.5%}.devui-col-xl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xl-offset-10{margin-left:41.6666666667%}.devui-col-xl-pull-10{right:41.6666666667%}.devui-col-xl-push-10{left:41.6666666667%}.devui-col-xl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xl-offset-11{margin-left:45.8333333333%}.devui-col-xl-pull-11{right:45.8333333333%}.devui-col-xl-push-11{left:45.8333333333%}.devui-col-xl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xl-offset-12{margin-left:50%}.devui-col-xl-pull-12{right:50%}.devui-col-xl-push-12{left:50%}.devui-col-xl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xl-offset-13{margin-left:54.1666666667%}.devui-col-xl-pull-13{right:54.1666666667%}.devui-col-xl-push-13{left:54.1666666667%}.devui-col-xl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xl-offset-14{margin-left:58.3333333333%}.devui-col-xl-pull-14{right:58.3333333333%}.devui-col-xl-push-14{left:58.3333333333%}.devui-col-xl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xl-offset-15{margin-left:62.5%}.devui-col-xl-pull-15{right:62.5%}.devui-col-xl-push-15{left:62.5%}.devui-col-xl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xl-offset-16{margin-left:66.6666666667%}.devui-col-xl-pull-16{right:66.6666666667%}.devui-col-xl-push-16{left:66.6666666667%}.devui-col-xl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xl-offset-17{margin-left:70.8333333333%}.devui-col-xl-pull-17{right:70.8333333333%}.devui-col-xl-push-17{left:70.8333333333%}.devui-col-xl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xl-offset-18{margin-left:75%}.devui-col-xl-pull-18{right:75%}.devui-col-xl-push-18{left:75%}.devui-col-xl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xl-offset-19{margin-left:79.1666666667%}.devui-col-xl-pull-19{right:79.1666666667%}.devui-col-xl-push-19{left:79.1666666667%}.devui-col-xl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xl-offset-20{margin-left:83.3333333333%}.devui-col-xl-pull-20{right:83.3333333333%}.devui-col-xl-push-20{left:83.3333333333%}.devui-col-xl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xl-offset-21{margin-left:87.5%}.devui-col-xl-pull-21{right:87.5%}.devui-col-xl-push-21{left:87.5%}.devui-col-xl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xl-offset-22{margin-left:91.6666666667%}.devui-col-xl-pull-22{right:91.6666666667%}.devui-col-xl-push-22{left:91.6666666667%}.devui-col-xl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xl-offset-23{margin-left:95.8333333333%}.devui-col-xl-pull-23{right:95.8333333333%}.devui-col-xl-push-23{left:95.8333333333%}.devui-col-xl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xl-offset-24{margin-left:100%}.devui-col-xl-pull-24{right:100%}.devui-col-xl-push-24{left:100%}.devui-col-xl-span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col-xxl-span-0{display:none}.devui-col-xxl-offset-1{margin-left:4.1666666667%}.devui-col-xxl-pull-1{right:4.1666666667%}.devui-col-xxl-push-1{left:4.1666666667%}.devui-col-xxl-span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col-xxl-offset-2{margin-left:8.3333333333%}.devui-col-xxl-pull-2{right:8.3333333333%}.devui-col-xxl-push-2{left:8.3333333333%}.devui-col-xxl-span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col-xxl-offset-3{margin-left:12.5%}.devui-col-xxl-pull-3{right:12.5%}.devui-col-xxl-push-3{left:12.5%}.devui-col-xxl-span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col-xxl-offset-4{margin-left:16.6666666667%}.devui-col-xxl-pull-4{right:16.6666666667%}.devui-col-xxl-push-4{left:16.6666666667%}.devui-col-xxl-span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col-xxl-offset-5{margin-left:20.8333333333%}.devui-col-xxl-pull-5{right:20.8333333333%}.devui-col-xxl-push-5{left:20.8333333333%}.devui-col-xxl-span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col-xxl-offset-6{margin-left:25%}.devui-col-xxl-pull-6{right:25%}.devui-col-xxl-push-6{left:25%}.devui-col-xxl-span-6{display:block;flex:0 0 25%;width:25%}.devui-col-xxl-offset-7{margin-left:29.1666666667%}.devui-col-xxl-pull-7{right:29.1666666667%}.devui-col-xxl-push-7{left:29.1666666667%}.devui-col-xxl-span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col-xxl-offset-8{margin-left:33.3333333333%}.devui-col-xxl-pull-8{right:33.3333333333%}.devui-col-xxl-push-8{left:33.3333333333%}.devui-col-xxl-span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col-xxl-offset-9{margin-left:37.5%}.devui-col-xxl-pull-9{right:37.5%}.devui-col-xxl-push-9{left:37.5%}.devui-col-xxl-span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col-xxl-offset-10{margin-left:41.6666666667%}.devui-col-xxl-pull-10{right:41.6666666667%}.devui-col-xxl-push-10{left:41.6666666667%}.devui-col-xxl-span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col-xxl-offset-11{margin-left:45.8333333333%}.devui-col-xxl-pull-11{right:45.8333333333%}.devui-col-xxl-push-11{left:45.8333333333%}.devui-col-xxl-span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col-xxl-offset-12{margin-left:50%}.devui-col-xxl-pull-12{right:50%}.devui-col-xxl-push-12{left:50%}.devui-col-xxl-span-12{display:block;flex:0 0 50%;width:50%}.devui-col-xxl-offset-13{margin-left:54.1666666667%}.devui-col-xxl-pull-13{right:54.1666666667%}.devui-col-xxl-push-13{left:54.1666666667%}.devui-col-xxl-span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col-xxl-offset-14{margin-left:58.3333333333%}.devui-col-xxl-pull-14{right:58.3333333333%}.devui-col-xxl-push-14{left:58.3333333333%}.devui-col-xxl-span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col-xxl-offset-15{margin-left:62.5%}.devui-col-xxl-pull-15{right:62.5%}.devui-col-xxl-push-15{left:62.5%}.devui-col-xxl-span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col-xxl-offset-16{margin-left:66.6666666667%}.devui-col-xxl-pull-16{right:66.6666666667%}.devui-col-xxl-push-16{left:66.6666666667%}.devui-col-xxl-span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col-xxl-offset-17{margin-left:70.8333333333%}.devui-col-xxl-pull-17{right:70.8333333333%}.devui-col-xxl-push-17{left:70.8333333333%}.devui-col-xxl-span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col-xxl-offset-18{margin-left:75%}.devui-col-xxl-pull-18{right:75%}.devui-col-xxl-push-18{left:75%}.devui-col-xxl-span-18{display:block;flex:0 0 75%;width:75%}.devui-col-xxl-offset-19{margin-left:79.1666666667%}.devui-col-xxl-pull-19{right:79.1666666667%}.devui-col-xxl-push-19{left:79.1666666667%}.devui-col-xxl-span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col-xxl-offset-20{margin-left:83.3333333333%}.devui-col-xxl-pull-20{right:83.3333333333%}.devui-col-xxl-push-20{left:83.3333333333%}.devui-col-xxl-span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col-xxl-offset-21{margin-left:87.5%}.devui-col-xxl-pull-21{right:87.5%}.devui-col-xxl-push-21{left:87.5%}.devui-col-xxl-span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col-xxl-offset-22{margin-left:91.6666666667%}.devui-col-xxl-pull-22{right:91.6666666667%}.devui-col-xxl-push-22{left:91.6666666667%}.devui-col-xxl-span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col-xxl-offset-23{margin-left:95.8333333333%}.devui-col-xxl-pull-23{right:95.8333333333%}.devui-col-xxl-push-23{left:95.8333333333%}.devui-col-xxl-span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col-xxl-offset-24{margin-left:100%}.devui-col-xxl-pull-24{right:100%}.devui-col-xxl-push-24{left:100%}.devui-col-xxl-span-24{display:block;flex:0 0 100%;width:100%}}
+.devui-row{display:flex}.devui-row__wrap{flex-wrap:wrap}.devui-row__align--top{align-items:flex-start}.devui-row__align--middle{align-items:center}.devui-row__align--bottom{align-items:flex-end}.devui-row__justify--start{justify-content:flex-start}.devui-row__justify--center{justify-content:center}.devui-row__justify--end{justify-content:flex-end}.devui-row__justify--around{justify-content:space-around}.devui-row__justify--between{justify-content:space-between}.devui-col{position:relative;max-width:100%;min-height:1px}.devui-col__span--0,.devui-col__xs--span-0{display:none}.devui-col__offset--1{margin-left:4.1666666667%}.devui-col__pull--1{right:4.1666666667%}.devui-col__push--1{left:4.1666666667%}.devui-col__span--1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xs--offset-1{margin-left:4.1666666667%}.devui-col__xs--pull-1{right:4.1666666667%}.devui-col__xs--push-1{left:4.1666666667%}.devui-col__xs--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__offset--2{margin-left:8.3333333333%}.devui-col__pull--2{right:8.3333333333%}.devui-col__push--2{left:8.3333333333%}.devui-col__span--2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xs--offset-2{margin-left:8.3333333333%}.devui-col__xs--pull-2{right:8.3333333333%}.devui-col__xs--push-2{left:8.3333333333%}.devui-col__xs--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__offset--3{margin-left:12.5%}.devui-col__pull--3{right:12.5%}.devui-col__push--3{left:12.5%}.devui-col__span--3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xs--offset-3{margin-left:12.5%}.devui-col__xs--pull-3{right:12.5%}.devui-col__xs--push-3{left:12.5%}.devui-col__xs--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__offset--4{margin-left:16.6666666667%}.devui-col__pull--4{right:16.6666666667%}.devui-col__push--4{left:16.6666666667%}.devui-col__span--4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xs--offset-4{margin-left:16.6666666667%}.devui-col__xs--pull-4{right:16.6666666667%}.devui-col__xs--push-4{left:16.6666666667%}.devui-col__xs--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__offset--5{margin-left:20.8333333333%}.devui-col__pull--5{right:20.8333333333%}.devui-col__push--5{left:20.8333333333%}.devui-col__span--5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xs--offset-5{margin-left:20.8333333333%}.devui-col__xs--pull-5{right:20.8333333333%}.devui-col__xs--push-5{left:20.8333333333%}.devui-col__xs--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__offset--6{margin-left:25%}.devui-col__pull--6{right:25%}.devui-col__push--6{left:25%}.devui-col__span--6{display:block;flex:0 0 25%;width:25%}.devui-col__xs--offset-6{margin-left:25%}.devui-col__xs--pull-6{right:25%}.devui-col__xs--push-6{left:25%}.devui-col__xs--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__offset--7{margin-left:29.1666666667%}.devui-col__pull--7{right:29.1666666667%}.devui-col__push--7{left:29.1666666667%}.devui-col__span--7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xs--offset-7{margin-left:29.1666666667%}.devui-col__xs--pull-7{right:29.1666666667%}.devui-col__xs--push-7{left:29.1666666667%}.devui-col__xs--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__offset--8{margin-left:33.3333333333%}.devui-col__pull--8{right:33.3333333333%}.devui-col__push--8{left:33.3333333333%}.devui-col__span--8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xs--offset-8{margin-left:33.3333333333%}.devui-col__xs--pull-8{right:33.3333333333%}.devui-col__xs--push-8{left:33.3333333333%}.devui-col__xs--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__offset--9{margin-left:37.5%}.devui-col__pull--9{right:37.5%}.devui-col__push--9{left:37.5%}.devui-col__span--9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xs--offset-9{margin-left:37.5%}.devui-col__xs--pull-9{right:37.5%}.devui-col__xs--push-9{left:37.5%}.devui-col__xs--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__offset--10{margin-left:41.6666666667%}.devui-col__pull--10{right:41.6666666667%}.devui-col__push--10{left:41.6666666667%}.devui-col__span--10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xs--offset-10{margin-left:41.6666666667%}.devui-col__xs--pull-10{right:41.6666666667%}.devui-col__xs--push-10{left:41.6666666667%}.devui-col__xs--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__offset--11{margin-left:45.8333333333%}.devui-col__pull--11{right:45.8333333333%}.devui-col__push--11{left:45.8333333333%}.devui-col__span--11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xs--offset-11{margin-left:45.8333333333%}.devui-col__xs--pull-11{right:45.8333333333%}.devui-col__xs--push-11{left:45.8333333333%}.devui-col__xs--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__offset--12{margin-left:50%}.devui-col__pull--12{right:50%}.devui-col__push--12{left:50%}.devui-col__span--12{display:block;flex:0 0 50%;width:50%}.devui-col__xs--offset-12{margin-left:50%}.devui-col__xs--pull-12{right:50%}.devui-col__xs--push-12{left:50%}.devui-col__xs--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__offset--13{margin-left:54.1666666667%}.devui-col__pull--13{right:54.1666666667%}.devui-col__push--13{left:54.1666666667%}.devui-col__span--13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xs--offset-13{margin-left:54.1666666667%}.devui-col__xs--pull-13{right:54.1666666667%}.devui-col__xs--push-13{left:54.1666666667%}.devui-col__xs--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__offset--14{margin-left:58.3333333333%}.devui-col__pull--14{right:58.3333333333%}.devui-col__push--14{left:58.3333333333%}.devui-col__span--14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xs--offset-14{margin-left:58.3333333333%}.devui-col__xs--pull-14{right:58.3333333333%}.devui-col__xs--push-14{left:58.3333333333%}.devui-col__xs--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__offset--15{margin-left:62.5%}.devui-col__pull--15{right:62.5%}.devui-col__push--15{left:62.5%}.devui-col__span--15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xs--offset-15{margin-left:62.5%}.devui-col__xs--pull-15{right:62.5%}.devui-col__xs--push-15{left:62.5%}.devui-col__xs--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__offset--16{margin-left:66.6666666667%}.devui-col__pull--16{right:66.6666666667%}.devui-col__push--16{left:66.6666666667%}.devui-col__span--16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xs--offset-16{margin-left:66.6666666667%}.devui-col__xs--pull-16{right:66.6666666667%}.devui-col__xs--push-16{left:66.6666666667%}.devui-col__xs--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__offset--17{margin-left:70.8333333333%}.devui-col__pull--17{right:70.8333333333%}.devui-col__push--17{left:70.8333333333%}.devui-col__span--17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xs--offset-17{margin-left:70.8333333333%}.devui-col__xs--pull-17{right:70.8333333333%}.devui-col__xs--push-17{left:70.8333333333%}.devui-col__xs--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__offset--18{margin-left:75%}.devui-col__pull--18{right:75%}.devui-col__push--18{left:75%}.devui-col__span--18{display:block;flex:0 0 75%;width:75%}.devui-col__xs--offset-18{margin-left:75%}.devui-col__xs--pull-18{right:75%}.devui-col__xs--push-18{left:75%}.devui-col__xs--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__offset--19{margin-left:79.1666666667%}.devui-col__pull--19{right:79.1666666667%}.devui-col__push--19{left:79.1666666667%}.devui-col__span--19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xs--offset-19{margin-left:79.1666666667%}.devui-col__xs--pull-19{right:79.1666666667%}.devui-col__xs--push-19{left:79.1666666667%}.devui-col__xs--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__offset--20{margin-left:83.3333333333%}.devui-col__pull--20{right:83.3333333333%}.devui-col__push--20{left:83.3333333333%}.devui-col__span--20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xs--offset-20{margin-left:83.3333333333%}.devui-col__xs--pull-20{right:83.3333333333%}.devui-col__xs--push-20{left:83.3333333333%}.devui-col__xs--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__offset--21{margin-left:87.5%}.devui-col__pull--21{right:87.5%}.devui-col__push--21{left:87.5%}.devui-col__span--21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xs--offset-21{margin-left:87.5%}.devui-col__xs--pull-21{right:87.5%}.devui-col__xs--push-21{left:87.5%}.devui-col__xs--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__offset--22{margin-left:91.6666666667%}.devui-col__pull--22{right:91.6666666667%}.devui-col__push--22{left:91.6666666667%}.devui-col__span--22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xs--offset-22{margin-left:91.6666666667%}.devui-col__xs--pull-22{right:91.6666666667%}.devui-col__xs--push-22{left:91.6666666667%}.devui-col__xs--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__offset--23{margin-left:95.8333333333%}.devui-col__pull--23{right:95.8333333333%}.devui-col__push--23{left:95.8333333333%}.devui-col__span--23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xs--offset-23{margin-left:95.8333333333%}.devui-col__xs--pull-23{right:95.8333333333%}.devui-col__xs--push-23{left:95.8333333333%}.devui-col__xs--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__offset--24{margin-left:100%}.devui-col__pull--24{right:100%}.devui-col__push--24{left:100%}.devui-col__span--24{display:block;flex:0 0 100%;width:100%}.devui-col__xs--offset-24{margin-left:100%}.devui-col__xs--pull-24{right:100%}.devui-col__xs--push-24{left:100%}.devui-col__xs--span-24{display:block;flex:0 0 100%;width:100%}@media screen and (min-width: 576px){.devui-col__sm--span-0{display:none}.devui-col__sm--offset-1{margin-left:4.1666666667%}.devui-col__sm--pull-1{right:4.1666666667%}.devui-col__sm--push-1{left:4.1666666667%}.devui-col__sm--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__sm--offset-2{margin-left:8.3333333333%}.devui-col__sm--pull-2{right:8.3333333333%}.devui-col__sm--push-2{left:8.3333333333%}.devui-col__sm--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__sm--offset-3{margin-left:12.5%}.devui-col__sm--pull-3{right:12.5%}.devui-col__sm--push-3{left:12.5%}.devui-col__sm--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__sm--offset-4{margin-left:16.6666666667%}.devui-col__sm--pull-4{right:16.6666666667%}.devui-col__sm--push-4{left:16.6666666667%}.devui-col__sm--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__sm--offset-5{margin-left:20.8333333333%}.devui-col__sm--pull-5{right:20.8333333333%}.devui-col__sm--push-5{left:20.8333333333%}.devui-col__sm--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__sm--offset-6{margin-left:25%}.devui-col__sm--pull-6{right:25%}.devui-col__sm--push-6{left:25%}.devui-col__sm--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__sm--offset-7{margin-left:29.1666666667%}.devui-col__sm--pull-7{right:29.1666666667%}.devui-col__sm--push-7{left:29.1666666667%}.devui-col__sm--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__sm--offset-8{margin-left:33.3333333333%}.devui-col__sm--pull-8{right:33.3333333333%}.devui-col__sm--push-8{left:33.3333333333%}.devui-col__sm--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__sm--offset-9{margin-left:37.5%}.devui-col__sm--pull-9{right:37.5%}.devui-col__sm--push-9{left:37.5%}.devui-col__sm--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__sm--offset-10{margin-left:41.6666666667%}.devui-col__sm--pull-10{right:41.6666666667%}.devui-col__sm--push-10{left:41.6666666667%}.devui-col__sm--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__sm--offset-11{margin-left:45.8333333333%}.devui-col__sm--pull-11{right:45.8333333333%}.devui-col__sm--push-11{left:45.8333333333%}.devui-col__sm--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__sm--offset-12{margin-left:50%}.devui-col__sm--pull-12{right:50%}.devui-col__sm--push-12{left:50%}.devui-col__sm--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__sm--offset-13{margin-left:54.1666666667%}.devui-col__sm--pull-13{right:54.1666666667%}.devui-col__sm--push-13{left:54.1666666667%}.devui-col__sm--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__sm--offset-14{margin-left:58.3333333333%}.devui-col__sm--pull-14{right:58.3333333333%}.devui-col__sm--push-14{left:58.3333333333%}.devui-col__sm--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__sm--offset-15{margin-left:62.5%}.devui-col__sm--pull-15{right:62.5%}.devui-col__sm--push-15{left:62.5%}.devui-col__sm--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__sm--offset-16{margin-left:66.6666666667%}.devui-col__sm--pull-16{right:66.6666666667%}.devui-col__sm--push-16{left:66.6666666667%}.devui-col__sm--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__sm--offset-17{margin-left:70.8333333333%}.devui-col__sm--pull-17{right:70.8333333333%}.devui-col__sm--push-17{left:70.8333333333%}.devui-col__sm--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__sm--offset-18{margin-left:75%}.devui-col__sm--pull-18{right:75%}.devui-col__sm--push-18{left:75%}.devui-col__sm--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__sm--offset-19{margin-left:79.1666666667%}.devui-col__sm--pull-19{right:79.1666666667%}.devui-col__sm--push-19{left:79.1666666667%}.devui-col__sm--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__sm--offset-20{margin-left:83.3333333333%}.devui-col__sm--pull-20{right:83.3333333333%}.devui-col__sm--push-20{left:83.3333333333%}.devui-col__sm--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__sm--offset-21{margin-left:87.5%}.devui-col__sm--pull-21{right:87.5%}.devui-col__sm--push-21{left:87.5%}.devui-col__sm--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__sm--offset-22{margin-left:91.6666666667%}.devui-col__sm--pull-22{right:91.6666666667%}.devui-col__sm--push-22{left:91.6666666667%}.devui-col__sm--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__sm--offset-23{margin-left:95.8333333333%}.devui-col__sm--pull-23{right:95.8333333333%}.devui-col__sm--push-23{left:95.8333333333%}.devui-col__sm--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__sm--offset-24{margin-left:100%}.devui-col__sm--pull-24{right:100%}.devui-col__sm--push-24{left:100%}.devui-col__sm--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 768px){.devui-col__md--span-0{display:none}.devui-col__md--offset-1{margin-left:4.1666666667%}.devui-col__md--pull-1{right:4.1666666667%}.devui-col__md--push-1{left:4.1666666667%}.devui-col__md--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__md--offset-2{margin-left:8.3333333333%}.devui-col__md--pull-2{right:8.3333333333%}.devui-col__md--push-2{left:8.3333333333%}.devui-col__md--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__md--offset-3{margin-left:12.5%}.devui-col__md--pull-3{right:12.5%}.devui-col__md--push-3{left:12.5%}.devui-col__md--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__md--offset-4{margin-left:16.6666666667%}.devui-col__md--pull-4{right:16.6666666667%}.devui-col__md--push-4{left:16.6666666667%}.devui-col__md--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__md--offset-5{margin-left:20.8333333333%}.devui-col__md--pull-5{right:20.8333333333%}.devui-col__md--push-5{left:20.8333333333%}.devui-col__md--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__md--offset-6{margin-left:25%}.devui-col__md--pull-6{right:25%}.devui-col__md--push-6{left:25%}.devui-col__md--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__md--offset-7{margin-left:29.1666666667%}.devui-col__md--pull-7{right:29.1666666667%}.devui-col__md--push-7{left:29.1666666667%}.devui-col__md--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__md--offset-8{margin-left:33.3333333333%}.devui-col__md--pull-8{right:33.3333333333%}.devui-col__md--push-8{left:33.3333333333%}.devui-col__md--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__md--offset-9{margin-left:37.5%}.devui-col__md--pull-9{right:37.5%}.devui-col__md--push-9{left:37.5%}.devui-col__md--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__md--offset-10{margin-left:41.6666666667%}.devui-col__md--pull-10{right:41.6666666667%}.devui-col__md--push-10{left:41.6666666667%}.devui-col__md--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__md--offset-11{margin-left:45.8333333333%}.devui-col__md--pull-11{right:45.8333333333%}.devui-col__md--push-11{left:45.8333333333%}.devui-col__md--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__md--offset-12{margin-left:50%}.devui-col__md--pull-12{right:50%}.devui-col__md--push-12{left:50%}.devui-col__md--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__md--offset-13{margin-left:54.1666666667%}.devui-col__md--pull-13{right:54.1666666667%}.devui-col__md--push-13{left:54.1666666667%}.devui-col__md--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__md--offset-14{margin-left:58.3333333333%}.devui-col__md--pull-14{right:58.3333333333%}.devui-col__md--push-14{left:58.3333333333%}.devui-col__md--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__md--offset-15{margin-left:62.5%}.devui-col__md--pull-15{right:62.5%}.devui-col__md--push-15{left:62.5%}.devui-col__md--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__md--offset-16{margin-left:66.6666666667%}.devui-col__md--pull-16{right:66.6666666667%}.devui-col__md--push-16{left:66.6666666667%}.devui-col__md--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__md--offset-17{margin-left:70.8333333333%}.devui-col__md--pull-17{right:70.8333333333%}.devui-col__md--push-17{left:70.8333333333%}.devui-col__md--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__md--offset-18{margin-left:75%}.devui-col__md--pull-18{right:75%}.devui-col__md--push-18{left:75%}.devui-col__md--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__md--offset-19{margin-left:79.1666666667%}.devui-col__md--pull-19{right:79.1666666667%}.devui-col__md--push-19{left:79.1666666667%}.devui-col__md--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__md--offset-20{margin-left:83.3333333333%}.devui-col__md--pull-20{right:83.3333333333%}.devui-col__md--push-20{left:83.3333333333%}.devui-col__md--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__md--offset-21{margin-left:87.5%}.devui-col__md--pull-21{right:87.5%}.devui-col__md--push-21{left:87.5%}.devui-col__md--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__md--offset-22{margin-left:91.6666666667%}.devui-col__md--pull-22{right:91.6666666667%}.devui-col__md--push-22{left:91.6666666667%}.devui-col__md--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__md--offset-23{margin-left:95.8333333333%}.devui-col__md--pull-23{right:95.8333333333%}.devui-col__md--push-23{left:95.8333333333%}.devui-col__md--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__md--offset-24{margin-left:100%}.devui-col__md--pull-24{right:100%}.devui-col__md--push-24{left:100%}.devui-col__md--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 992px){.devui-col__lg--span-0{display:none}.devui-col__lg--offset-1{margin-left:4.1666666667%}.devui-col__lg--pull-1{right:4.1666666667%}.devui-col__lg--push-1{left:4.1666666667%}.devui-col__lg--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__lg--offset-2{margin-left:8.3333333333%}.devui-col__lg--pull-2{right:8.3333333333%}.devui-col__lg--push-2{left:8.3333333333%}.devui-col__lg--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__lg--offset-3{margin-left:12.5%}.devui-col__lg--pull-3{right:12.5%}.devui-col__lg--push-3{left:12.5%}.devui-col__lg--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__lg--offset-4{margin-left:16.6666666667%}.devui-col__lg--pull-4{right:16.6666666667%}.devui-col__lg--push-4{left:16.6666666667%}.devui-col__lg--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__lg--offset-5{margin-left:20.8333333333%}.devui-col__lg--pull-5{right:20.8333333333%}.devui-col__lg--push-5{left:20.8333333333%}.devui-col__lg--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__lg--offset-6{margin-left:25%}.devui-col__lg--pull-6{right:25%}.devui-col__lg--push-6{left:25%}.devui-col__lg--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__lg--offset-7{margin-left:29.1666666667%}.devui-col__lg--pull-7{right:29.1666666667%}.devui-col__lg--push-7{left:29.1666666667%}.devui-col__lg--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__lg--offset-8{margin-left:33.3333333333%}.devui-col__lg--pull-8{right:33.3333333333%}.devui-col__lg--push-8{left:33.3333333333%}.devui-col__lg--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__lg--offset-9{margin-left:37.5%}.devui-col__lg--pull-9{right:37.5%}.devui-col__lg--push-9{left:37.5%}.devui-col__lg--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__lg--offset-10{margin-left:41.6666666667%}.devui-col__lg--pull-10{right:41.6666666667%}.devui-col__lg--push-10{left:41.6666666667%}.devui-col__lg--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__lg--offset-11{margin-left:45.8333333333%}.devui-col__lg--pull-11{right:45.8333333333%}.devui-col__lg--push-11{left:45.8333333333%}.devui-col__lg--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__lg--offset-12{margin-left:50%}.devui-col__lg--pull-12{right:50%}.devui-col__lg--push-12{left:50%}.devui-col__lg--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__lg--offset-13{margin-left:54.1666666667%}.devui-col__lg--pull-13{right:54.1666666667%}.devui-col__lg--push-13{left:54.1666666667%}.devui-col__lg--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__lg--offset-14{margin-left:58.3333333333%}.devui-col__lg--pull-14{right:58.3333333333%}.devui-col__lg--push-14{left:58.3333333333%}.devui-col__lg--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__lg--offset-15{margin-left:62.5%}.devui-col__lg--pull-15{right:62.5%}.devui-col__lg--push-15{left:62.5%}.devui-col__lg--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__lg--offset-16{margin-left:66.6666666667%}.devui-col__lg--pull-16{right:66.6666666667%}.devui-col__lg--push-16{left:66.6666666667%}.devui-col__lg--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__lg--offset-17{margin-left:70.8333333333%}.devui-col__lg--pull-17{right:70.8333333333%}.devui-col__lg--push-17{left:70.8333333333%}.devui-col__lg--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__lg--offset-18{margin-left:75%}.devui-col__lg--pull-18{right:75%}.devui-col__lg--push-18{left:75%}.devui-col__lg--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__lg--offset-19{margin-left:79.1666666667%}.devui-col__lg--pull-19{right:79.1666666667%}.devui-col__lg--push-19{left:79.1666666667%}.devui-col__lg--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__lg--offset-20{margin-left:83.3333333333%}.devui-col__lg--pull-20{right:83.3333333333%}.devui-col__lg--push-20{left:83.3333333333%}.devui-col__lg--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__lg--offset-21{margin-left:87.5%}.devui-col__lg--pull-21{right:87.5%}.devui-col__lg--push-21{left:87.5%}.devui-col__lg--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__lg--offset-22{margin-left:91.6666666667%}.devui-col__lg--pull-22{right:91.6666666667%}.devui-col__lg--push-22{left:91.6666666667%}.devui-col__lg--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__lg--offset-23{margin-left:95.8333333333%}.devui-col__lg--pull-23{right:95.8333333333%}.devui-col__lg--push-23{left:95.8333333333%}.devui-col__lg--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__lg--offset-24{margin-left:100%}.devui-col__lg--pull-24{right:100%}.devui-col__lg--push-24{left:100%}.devui-col__lg--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1200px){.devui-col__xl--span-0{display:none}.devui-col__xl--offset-1{margin-left:4.1666666667%}.devui-col__xl--pull-1{right:4.1666666667%}.devui-col__xl--push-1{left:4.1666666667%}.devui-col__xl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xl--offset-2{margin-left:8.3333333333%}.devui-col__xl--pull-2{right:8.3333333333%}.devui-col__xl--push-2{left:8.3333333333%}.devui-col__xl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xl--offset-3{margin-left:12.5%}.devui-col__xl--pull-3{right:12.5%}.devui-col__xl--push-3{left:12.5%}.devui-col__xl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xl--offset-4{margin-left:16.6666666667%}.devui-col__xl--pull-4{right:16.6666666667%}.devui-col__xl--push-4{left:16.6666666667%}.devui-col__xl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xl--offset-5{margin-left:20.8333333333%}.devui-col__xl--pull-5{right:20.8333333333%}.devui-col__xl--push-5{left:20.8333333333%}.devui-col__xl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xl--offset-6{margin-left:25%}.devui-col__xl--pull-6{right:25%}.devui-col__xl--push-6{left:25%}.devui-col__xl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xl--offset-7{margin-left:29.1666666667%}.devui-col__xl--pull-7{right:29.1666666667%}.devui-col__xl--push-7{left:29.1666666667%}.devui-col__xl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xl--offset-8{margin-left:33.3333333333%}.devui-col__xl--pull-8{right:33.3333333333%}.devui-col__xl--push-8{left:33.3333333333%}.devui-col__xl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xl--offset-9{margin-left:37.5%}.devui-col__xl--pull-9{right:37.5%}.devui-col__xl--push-9{left:37.5%}.devui-col__xl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xl--offset-10{margin-left:41.6666666667%}.devui-col__xl--pull-10{right:41.6666666667%}.devui-col__xl--push-10{left:41.6666666667%}.devui-col__xl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xl--offset-11{margin-left:45.8333333333%}.devui-col__xl--pull-11{right:45.8333333333%}.devui-col__xl--push-11{left:45.8333333333%}.devui-col__xl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xl--offset-12{margin-left:50%}.devui-col__xl--pull-12{right:50%}.devui-col__xl--push-12{left:50%}.devui-col__xl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xl--offset-13{margin-left:54.1666666667%}.devui-col__xl--pull-13{right:54.1666666667%}.devui-col__xl--push-13{left:54.1666666667%}.devui-col__xl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xl--offset-14{margin-left:58.3333333333%}.devui-col__xl--pull-14{right:58.3333333333%}.devui-col__xl--push-14{left:58.3333333333%}.devui-col__xl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xl--offset-15{margin-left:62.5%}.devui-col__xl--pull-15{right:62.5%}.devui-col__xl--push-15{left:62.5%}.devui-col__xl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xl--offset-16{margin-left:66.6666666667%}.devui-col__xl--pull-16{right:66.6666666667%}.devui-col__xl--push-16{left:66.6666666667%}.devui-col__xl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xl--offset-17{margin-left:70.8333333333%}.devui-col__xl--pull-17{right:70.8333333333%}.devui-col__xl--push-17{left:70.8333333333%}.devui-col__xl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xl--offset-18{margin-left:75%}.devui-col__xl--pull-18{right:75%}.devui-col__xl--push-18{left:75%}.devui-col__xl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xl--offset-19{margin-left:79.1666666667%}.devui-col__xl--pull-19{right:79.1666666667%}.devui-col__xl--push-19{left:79.1666666667%}.devui-col__xl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xl--offset-20{margin-left:83.3333333333%}.devui-col__xl--pull-20{right:83.3333333333%}.devui-col__xl--push-20{left:83.3333333333%}.devui-col__xl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xl--offset-21{margin-left:87.5%}.devui-col__xl--pull-21{right:87.5%}.devui-col__xl--push-21{left:87.5%}.devui-col__xl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xl--offset-22{margin-left:91.6666666667%}.devui-col__xl--pull-22{right:91.6666666667%}.devui-col__xl--push-22{left:91.6666666667%}.devui-col__xl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xl--offset-23{margin-left:95.8333333333%}.devui-col__xl--pull-23{right:95.8333333333%}.devui-col__xl--push-23{left:95.8333333333%}.devui-col__xl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xl--offset-24{margin-left:100%}.devui-col__xl--pull-24{right:100%}.devui-col__xl--push-24{left:100%}.devui-col__xl--span-24{display:block;flex:0 0 100%;width:100%}}@media screen and (min-width: 1600px){.devui-col__xxl--span-0{display:none}.devui-col__xxl--offset-1{margin-left:4.1666666667%}.devui-col__xxl--pull-1{right:4.1666666667%}.devui-col__xxl--push-1{left:4.1666666667%}.devui-col__xxl--span-1{display:block;flex:0 0 4.1666666667%;width:4.1666666667%}.devui-col__xxl--offset-2{margin-left:8.3333333333%}.devui-col__xxl--pull-2{right:8.3333333333%}.devui-col__xxl--push-2{left:8.3333333333%}.devui-col__xxl--span-2{display:block;flex:0 0 8.3333333333%;width:8.3333333333%}.devui-col__xxl--offset-3{margin-left:12.5%}.devui-col__xxl--pull-3{right:12.5%}.devui-col__xxl--push-3{left:12.5%}.devui-col__xxl--span-3{display:block;flex:0 0 12.5%;width:12.5%}.devui-col__xxl--offset-4{margin-left:16.6666666667%}.devui-col__xxl--pull-4{right:16.6666666667%}.devui-col__xxl--push-4{left:16.6666666667%}.devui-col__xxl--span-4{display:block;flex:0 0 16.6666666667%;width:16.6666666667%}.devui-col__xxl--offset-5{margin-left:20.8333333333%}.devui-col__xxl--pull-5{right:20.8333333333%}.devui-col__xxl--push-5{left:20.8333333333%}.devui-col__xxl--span-5{display:block;flex:0 0 20.8333333333%;width:20.8333333333%}.devui-col__xxl--offset-6{margin-left:25%}.devui-col__xxl--pull-6{right:25%}.devui-col__xxl--push-6{left:25%}.devui-col__xxl--span-6{display:block;flex:0 0 25%;width:25%}.devui-col__xxl--offset-7{margin-left:29.1666666667%}.devui-col__xxl--pull-7{right:29.1666666667%}.devui-col__xxl--push-7{left:29.1666666667%}.devui-col__xxl--span-7{display:block;flex:0 0 29.1666666667%;width:29.1666666667%}.devui-col__xxl--offset-8{margin-left:33.3333333333%}.devui-col__xxl--pull-8{right:33.3333333333%}.devui-col__xxl--push-8{left:33.3333333333%}.devui-col__xxl--span-8{display:block;flex:0 0 33.3333333333%;width:33.3333333333%}.devui-col__xxl--offset-9{margin-left:37.5%}.devui-col__xxl--pull-9{right:37.5%}.devui-col__xxl--push-9{left:37.5%}.devui-col__xxl--span-9{display:block;flex:0 0 37.5%;width:37.5%}.devui-col__xxl--offset-10{margin-left:41.6666666667%}.devui-col__xxl--pull-10{right:41.6666666667%}.devui-col__xxl--push-10{left:41.6666666667%}.devui-col__xxl--span-10{display:block;flex:0 0 41.6666666667%;width:41.6666666667%}.devui-col__xxl--offset-11{margin-left:45.8333333333%}.devui-col__xxl--pull-11{right:45.8333333333%}.devui-col__xxl--push-11{left:45.8333333333%}.devui-col__xxl--span-11{display:block;flex:0 0 45.8333333333%;width:45.8333333333%}.devui-col__xxl--offset-12{margin-left:50%}.devui-col__xxl--pull-12{right:50%}.devui-col__xxl--push-12{left:50%}.devui-col__xxl--span-12{display:block;flex:0 0 50%;width:50%}.devui-col__xxl--offset-13{margin-left:54.1666666667%}.devui-col__xxl--pull-13{right:54.1666666667%}.devui-col__xxl--push-13{left:54.1666666667%}.devui-col__xxl--span-13{display:block;flex:0 0 54.1666666667%;width:54.1666666667%}.devui-col__xxl--offset-14{margin-left:58.3333333333%}.devui-col__xxl--pull-14{right:58.3333333333%}.devui-col__xxl--push-14{left:58.3333333333%}.devui-col__xxl--span-14{display:block;flex:0 0 58.3333333333%;width:58.3333333333%}.devui-col__xxl--offset-15{margin-left:62.5%}.devui-col__xxl--pull-15{right:62.5%}.devui-col__xxl--push-15{left:62.5%}.devui-col__xxl--span-15{display:block;flex:0 0 62.5%;width:62.5%}.devui-col__xxl--offset-16{margin-left:66.6666666667%}.devui-col__xxl--pull-16{right:66.6666666667%}.devui-col__xxl--push-16{left:66.6666666667%}.devui-col__xxl--span-16{display:block;flex:0 0 66.6666666667%;width:66.6666666667%}.devui-col__xxl--offset-17{margin-left:70.8333333333%}.devui-col__xxl--pull-17{right:70.8333333333%}.devui-col__xxl--push-17{left:70.8333333333%}.devui-col__xxl--span-17{display:block;flex:0 0 70.8333333333%;width:70.8333333333%}.devui-col__xxl--offset-18{margin-left:75%}.devui-col__xxl--pull-18{right:75%}.devui-col__xxl--push-18{left:75%}.devui-col__xxl--span-18{display:block;flex:0 0 75%;width:75%}.devui-col__xxl--offset-19{margin-left:79.1666666667%}.devui-col__xxl--pull-19{right:79.1666666667%}.devui-col__xxl--push-19{left:79.1666666667%}.devui-col__xxl--span-19{display:block;flex:0 0 79.1666666667%;width:79.1666666667%}.devui-col__xxl--offset-20{margin-left:83.3333333333%}.devui-col__xxl--pull-20{right:83.3333333333%}.devui-col__xxl--push-20{left:83.3333333333%}.devui-col__xxl--span-20{display:block;flex:0 0 83.3333333333%;width:83.3333333333%}.devui-col__xxl--offset-21{margin-left:87.5%}.devui-col__xxl--pull-21{right:87.5%}.devui-col__xxl--push-21{left:87.5%}.devui-col__xxl--span-21{display:block;flex:0 0 87.5%;width:87.5%}.devui-col__xxl--offset-22{margin-left:91.6666666667%}.devui-col__xxl--pull-22{right:91.6666666667%}.devui-col__xxl--push-22{left:91.6666666667%}.devui-col__xxl--span-22{display:block;flex:0 0 91.6666666667%;width:91.6666666667%}.devui-col__xxl--offset-23{margin-left:95.8333333333%}.devui-col__xxl--pull-23{right:95.8333333333%}.devui-col__xxl--push-23{left:95.8333333333%}.devui-col__xxl--span-23{display:block;flex:0 0 95.8333333333%;width:95.8333333333%}.devui-col__xxl--offset-24{margin-left:100%}.devui-col__xxl--pull-24{right:100%}.devui-col__xxl--push-24{left:100%}.devui-col__xxl--span-24{display:block;flex:0 0 100%;width:100%}}

package/image-preview/index.es.js

@@ -5,7 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { defineComponent, ref, computed, onMounted, onUnmounted, createVNode, Fragment, createTextVNode, createApp } from "vue";
-var imagePreview$1 = "";
 const imagePreviewProps = {
   url: {
     type: String,
@@ -142,11 +141,36 @@ class Transform {
     this.el.style.transform = `translate(${this.transformX}px, ${this.transformY}px) scale(${this.zoom}) rotate(${this.rotate}turn)`;
   }
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var imagePreview$1 = "";
 var imagePreview = defineComponent({
   name: "DImagePreview",
   props: imagePreviewProps,
   emits: [],
   setup(props) {
+    const ns = useNamespace("image-preview");
     let transform = null;
     const index2 = ref(0);
     const url = computed(() => props.previewUrlList[index2.value]);
@@ -157,7 +181,7 @@ var imagePreview = defineComponent({
       zIndex: props.backDropZIndex
     } : {};
     function initTransform() {
-      const imageElement = document.querySelector(".devui-image-preview-main-image");
+      const imageElement = document.querySelector(`.${ns.e("main-image")}`);
       transform = new Transform(imageElement);
     }
     function initIndex() {
@@ -215,13 +239,13 @@ var imagePreview = defineComponent({
     });
     return () => {
       return createVNode(Fragment, null, [createVNode("div", {
-        "class": "devui-image-preview",
+        "class": ns.b(),
         "style": imageStyle
       }, [createVNode("img", {
-        "class": "devui-image-preview-main-image",
+        "class": ns.e("main-image"),
         "src": url.value
       }, null), createVNode("button", {
-        "class": "devui-image-preview-close-btn",
+        "class": ns.e("close-btn"),
         "onClick": onClose
       }, [createVNode("svg", {
         "width": "16px",
@@ -238,7 +262,7 @@ var imagePreview = defineComponent({
         "fill-rule": "nonzero",
         "points": "8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8                     13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542                      2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"
       }, null)])])]), createVNode("button", {
-        "class": "devui-image-preview-arrow-left",
+        "class": ns.e("arrow-left"),
         "onClick": onPrev
       }, [createVNode("svg", {
         "width": "18px",
@@ -255,7 +279,7 @@ var imagePreview = defineComponent({
         "fill-rule": "nonzero",
         "points": "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322                     2.29289322 10.7071068 3.70710678 6.41421356 8"
       }, null)])])]), createVNode("button", {
-        "class": "devui-image-preview-arrow-right",
+        "class": ns.e("arrow-right"),
         "onClick": onNext
       }, [createVNode("svg", {
         "width": "18px",
@@ -273,7 +297,7 @@ var imagePreview = defineComponent({
         "transform": "translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",
         "points": "11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322                     11.7071068 3.70710678 7.41421356 8"
       }, null)])])]), createVNode("div", {
-        "class": "devui-image-preview-toolbar"
+        "class": ns.e("toolbar")
       }, [createVNode("button", {
         "onClick": onZoomIn
       }, [createVNode("svg", {
@@ -338,9 +362,8 @@ var imagePreview = defineComponent({
         "fill-rule": "nonzero",
         "points": "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322                       10.7071068 3.70710678 6.41421356 8"
       }, null)])])]), createVNode("span", {
-        "class": "devui-image-preview-index"
+        "class": ns.e("index")
       }, [index2.value + 1, createTextVNode(":"), props.previewUrlList.length]), createVNode("button", {
-        "class": "devui-next",
         "onClick": onNext
       }, [createVNode("svg", {
         "width": "16px",
@@ -375,7 +398,7 @@ var imagePreview = defineComponent({
       }, null)])])]), createVNode("button", {
         "onClick": onZoomOriginal
       }, [createVNode("span", null, [createTextVNode("1:1")])])])]), createVNode("div", {
-        "class": "devui-image-preview-bg",
+        "class": ns.e("bg"),
         "style": bgStyle
       }, null)]);
     };