UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 7.83 kB
import{r as t,h as i,H as e}from"./p-6403d5dc.js";const r=class{constructor(i){t(this,i),this.responsive=!1,this.breakpoint="small",this.direction="horizontal",this.alignment="flex-end",this.distribution="default",this.mobile=""}render(){return i(e,{class:{"duet-grid":!0,"duet-no-stacking":!this.responsive,"duet-grid-align-top":"top"===this.alignment,"duet-grid-align-bottom":"bottom"===this.alignment,"duet-grid-align-center":"center"===this.alignment,"duet-grid-align-stretch":"stretch"===this.alignment,"duet-grid-align-baseline":"baseline"===this.alignment,"duet-grid-distribution-left":"left"===this.distribution,"duet-grid-distribution-right":"right"===this.distribution,"duet-grid-distribution-center":"center"===this.distribution,"duet-grid-distribution-between":"space-between"===this.distribution,"duet-grid-distribution-around":"space-around"===this.distribution,"duet-grid-distribution-evenly":"space-evenly"===this.distribution,"duet-grid-mobile-left":"left"===this.mobile,"duet-grid-mobile-center":"center"===this.mobile,"duet-grid-mobile-right":"right"===this.mobile,"duet-grid-direction-horizontal":"horizontal"===this.direction,"duet-grid-direction-vertical":"vertical"===this.direction,"duet-grid-breakpoint-small":"small"===this.breakpoint,"duet-grid-breakpoint-medium":"medium"===this.breakpoint}})}static get style(){return".sc-duet-grid-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%!important;max-width:100%!important;height:auto!important;display:-ms-flexbox!important;display:flex!important;-ms-flex-align:start!important;align-items:flex-start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:36em){.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}}\@media only screen and (min-width:48em){.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}}.duet-grid-wrap.sc-duet-grid-h{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.duet-no-stacking.sc-duet-grid-h{-ms-flex-direction:row!important;flex-direction:row!important}.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:36em){.duet-grid-direction-vertical.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}}.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}\@media only screen and (min-width:48em){.duet-grid-direction-vertical.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-direction:column!important;flex-direction:column!important}}\@media only screen and (min-width:36em){.duet-grid-align-top.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important}}\@media only screen and (min-width:36em){.duet-grid-align-bottom.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important}}\@media only screen and (min-width:36em){.duet-grid-align-center.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important}}\@media only screen and (min-width:36em){.duet-grid-align-stretch.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:stretch!important;align-items:stretch!important}}\@media only screen and (min-width:36em){.duet-grid-align-baseline.duet-grid-breakpoint-small.sc-duet-grid-h{-ms-flex-align:baseline!important;align-items:baseline!important}}\@media only screen and (min-width:48em){.duet-grid-align-top.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important}}\@media only screen and (min-width:48em){.duet-grid-align-bottom.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important}}\@media only screen and (min-width:48em){.duet-grid-align-center.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important}}\@media only screen and (min-width:48em){.duet-grid-align-stretch.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:stretch!important;align-items:stretch!important}}\@media only screen and (min-width:48em){.duet-grid-align-baseline.duet-grid-breakpoint-medium.sc-duet-grid-h{-ms-flex-align:baseline!important;align-items:baseline!important}}.duet-grid-distribution-left.sc-duet-grid-h{-ms-flex-pack:start!important;justify-content:flex-start!important}.duet-grid-distribution-right.sc-duet-grid-h{-ms-flex-pack:end!important;justify-content:flex-end!important}.duet-grid-distribution-center.sc-duet-grid-h{-ms-flex-pack:center!important;justify-content:center!important}.duet-grid-distribution-between.sc-duet-grid-h{-ms-flex-pack:justify!important;justify-content:space-between!important}.duet-grid-distribution-around.sc-duet-grid-h{-ms-flex-pack:distribute!important;justify-content:space-around!important}.duet-grid-distribution-evenly.sc-duet-grid-h{-ms-flex-pack:space-evenly!important;justify-content:space-evenly!important}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-left.sc-duet-grid-h{-ms-flex-align:start!important;align-items:flex-start!important;-ms-flex-pack:start!important;justify-content:flex-start!important;text-align:left!important}}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-center.sc-duet-grid-h{-ms-flex-align:center!important;align-items:center!important;-ms-flex-pack:center!important;justify-content:center!important;text-align:center!important}.duet-grid-mobile-center.sc-duet-grid-h *.sc-duet-grid{text-align:center!important}}\@media only screen and (max-width:35.9375em){.duet-grid-mobile-right.sc-duet-grid-h{-ms-flex-align:end!important;align-items:flex-end!important;-ms-flex-pack:end!important;justify-content:flex-end!important;text-align:right!important}.duet-grid-mobile-right.sc-duet-grid-h *.sc-duet-grid{text-align:right!important}}"}},d=class{constructor(i){t(this,i),this.fill=!1,this.theme="",this.margin="auto"}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}render(){return i(e,{style:{"min-width":this.minWidth,"max-width":this.maxWidth},class:{"duet-m-0":"none"===this.margin,"duet-theme-turva":"turva"===this.theme,"duet-grid-item":!0,"duet-grid-item-fill":this.fill}})}static get style(){return".sc-duet-grid-item-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px!important;margin-bottom:16px!important;min-width:0;max-width:100%;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1rem;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;line-height:1.5;color:#00294d;font-style:normal}.sc-duet-grid-item-h:last-child, .sc-duet-grid-item-h:last-of-type{margin-right:0!important}\@media only screen and (max-width:35.9375em){.sc-duet-grid-item-h{min-width:0!important;max-width:100%!important;width:100%!important}}.duet-grid-item-fill.sc-duet-grid-item-h{-ms-flex:1 1 auto;flex:1 1 auto}.duet-theme-turva.sc-duet-grid-item-h{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111}.duet-m-0.sc-duet-grid-item-h{margin:0!important}"}};export{r as duet_grid,d as duet_grid_item};