@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
642 lines (569 loc) • 31 kB
HTML
<iron-iconset-svg name="custom-icons" size="32">
<svg>
<defs>
<g id="preloader" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 4H4V28H13V24.2494H7.7506V7.7506H13V4Z" fill="var(--theme-primary-color)" />
<path d="M19 28V24.2494H24.2494V7.7506H19V4H28V28H19Z" fill="var(--theme-primary-color)" />
</g>
<g id="icon-cross" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="white" />
<path d="M26 14L14 26M14 14L26 26" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<g id="front" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22 7.99976H24C25.1046 7.99976 26 8.89519 26 9.99976V29.9998C26 31.1043 25.1046 31.9998 24 31.9998H8C6.89543 31.9998 6 31.1043 6 29.9998V9.38584C6 8.55215 6.51715 7.80591 7.29775 7.51318L19.2978 3.01318C20.6053 2.52287 22 3.48943 22 4.88584V7.99976ZM20 4.88584L11.6962 7.99976H20V4.88584ZM8 9.99976H24V29.9998H8L8 9.99976Z"
/>
</g>
<g id="greeting" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M21 19C20.4477 19 20 19.4477 20 20C20 20.5523 20.4477 21 21 21L26 21C26.5523 21 27 20.5523 27 20C27 19.4477 26.5523 19 26 19L21 19Z" />
<path d="M20 16C20 15.4477 20.4477 15 21 15L26 15C26.5523 15 27 15.4477 27 16C27 16.5523 26.5523 17 26 17L21 17C20.4477 17 20 16.5523 20 16Z" />
<path d="M22 23C21.4477 23 21 23.4477 21 24C21 24.5523 21.4477 25 22 25H25C25.5523 25 26 24.5523 26 24C26 23.4477 25.5523 23 25 23H22Z" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 32H30C31.1046 32 32 31.1046 32 30V10C32 8.89543 31.1046 8 30 8H2C0.895431 8 0 8.89543 0 10V30C0 31.1046 0.89543 32 2 32ZM15 10H2L2 30H15V10ZM30 30H17V10H30V30Z"
/>
</g>
<g id="envelope" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M11 14C11 13.4477 11.4477 13 12 13L20 13C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15L12 15C11.4477 15 11 14.5523 11 14Z" />
<path d="M13 17C12.4477 17 12 17.4477 12 18C12 18.5523 12.4477 19 13 19L19 19C19.5523 19 20 18.5523 20 18C20 17.4477 19.5523 17 19 17L13 17Z" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 10C0 8.89543 0.895431 8 2 8H30C31.1046 8 32 8.89543 32 10V30C32 31.1046 31.1046 32 30 32H2C0.895431 32 0 31.1046 0 30V10ZM2 10.5607L7.27967 22L24.7203 22L30 10.5607V10H2L2 10.5607ZM30 15.3333L26.5363 22.8381C26.2093 23.5464 25.5004 24 24.7203 24H7.27967C6.49956 24 5.79065 23.5464 5.46375 22.8381L2 15.3333V30H30V15.3333Z"
/>
</g>
<g id="approve" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.6644 8.2526C14.0772 8.61952 14.1143 9.25159 13.7474 9.66437L11.0808 12.6644C10.891 12.8779 10.619 13 10.3333 13C10.0477 13 9.7757 12.8779 9.58594 12.6644L8.2526 11.1644C7.88568 10.7516 7.92286 10.1195 8.33565 9.7526C8.74843 9.38568 9.3805 9.42286 9.74742 9.83565L10.3333 10.4948L12.2526 8.33565C12.6195 7.92286 13.2516 7.88568 13.6644 8.2526Z"
/>
<path d="M17 10C16.4477 10 16 10.4477 16 11C16 11.5523 16.4477 12 17 12L23 12C23.5523 12 24 11.5523 24 11C24 10.4477 23.5523 10 23 10L17 10Z" />
<path
d="M13.6644 15.2526C14.0772 15.6195 14.1143 16.2516 13.7474 16.6644L11.0808 19.6644C10.891 19.8779 10.619 20 10.3333 20C10.0477 20 9.7757 19.8779 9.58594 19.6644L8.2526 18.1644C7.88568 17.7516 7.92286 17.1195 8.33565 16.7526C8.74843 16.3857 9.3805 16.4229 9.74742 16.8356L10.3333 17.4948L12.2526 15.3356C12.6195 14.9229 13.2516 14.8857 13.6644 15.2526Z"
/>
<path d="M17 17C16.4477 17 16 17.4477 16 18C16 18.5523 16.4477 19 17 19H23C23.5523 19 24 18.5523 24 18C24 17.4477 23.5523 17 23 17L17 17Z" />
<path
d="M13.6644 22.2526C14.0772 22.6195 14.1143 23.2516 13.7474 23.6644L11.0808 26.6644C10.891 26.8779 10.619 27 10.3333 27C10.0477 27 9.7757 26.8779 9.58594 26.6644L8.2526 25.1644C7.88568 24.7516 7.92286 24.1195 8.33565 23.7526C8.74843 23.3857 9.3805 23.4229 9.74742 23.8356L10.3333 24.4948L12.2526 22.3356C12.6195 21.9229 13.2516 21.8857 13.6644 22.2526Z"
/>
<path d="M17 24C16.4477 24 16 24.4477 16 25C16 25.5523 16.4477 26 17 26H23C23.5523 26 24 25.5523 24 25C24 24.4477 23.5523 24 23 24H17Z" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 30C4 31.1046 4.89543 32 6 32L26 32C27.1046 32 28 31.1046 28 30L28 5C28 3.89543 27.1046 3 26 3H6C4.89543 3 4 3.89543 4 5V30ZM6 5L6 30H26L26 5L6 5Z"
/>
</g>
<g id="coloricon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<image
x="0"
y="0"
width="32"
height="32"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAIAAAC1JZyVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABHtJREFUeNq0l11oW2UYgJ9kWdZ26U4T246sYaZJijFm6990MIu7mCDiJtiqvVHE7WZzOgXBDUFECmOuV3pRd9MJ/oBFWy8Km0N20VE25mib1v5hogYXKdjRGJvan6SJ3zk5bfNz8jPUl1P4vrfv+z35vvN+7/seXTKZ5P8XfXGTyCqXb3P8OI2NmM3odPIjBmIqlLcusxopuoau0G6m5+m6wcAMa+uYvyTszzZ4wMzrYQxGHumk7Rw1nvvczVKM01fw9vDVpMwQUn9Ew6y5Hh2srzHxOT1evnuL2N8lY2bv0XSJnjuk7zNh17B0JNImSW5/xKVG7s2WgBmKcKiXwEK2PrCuYVwVyNYsBOg9xML1ghjxO56TsD+v8cOjMWwHMzR2GxVRDUuvFcsLylqaGHGqxyAMY06aX9Lwtz6eMW2yatgc8PDMtLKKWGtJC/OuOJmNsSYpWpsxrYvmYainDO/kYMR/P870ySX5V9CXbfjpkfz5GSn5RFk3HXMBcu9PFimewPWkOt7nwhgvyFBij640jLjFfXnuVRZJalEHHqkYIyUDyuoKZqWf5Fr+RJFOmq9UB7vnS2AIWYvRr2KuDdNt5psWRpuImAqSgkuU76ainMpgAUYSU4QmHy29mK8wLDQG8Tc3wnKYKfEoRhYbTiuOKHY/ZfFM0tgXNDzFLh/bJnIYhmUaQph8zM0SSuBLaWOMqKnzQzMrf2qlVT17XDglHPPYgmyTk9jP6PvYP0DHcooRxz5HzQyRUQKrJHIXKaPqLGEZ84GueDUwlFPfgGM79YlZyxsvRl41+ondwR9muajv+yQNJdalRbgBn4m4edAde6W5mimRSqugvDR3GVNWpX1oMT1/ufhd4sd5/OKVT9B8FP3LIm7evsu5a1wVNg3Y91FTR2QXge15Dk3FSHu3MMJw0cYfVmajjPuJ/5RWXI4y1sp+h5w1p3nMI1/xq36C4lEWMjTykBtTLXOVhDaTmMReFWNt5Ze7LNQTSDAaYDEEoZwCpjBEEfM7xWyXcNwkqSmC+AgzI8q4ElMLLhd6C79aaVUxi210f6pk1TyyybBXE1QuqB1vkPEsUtqLjA7hG0plJdrU63msA6OxOENIjVNV1uBNxbxCejqfrxHjs3SoGEmivb04Q05+jo0BdZu3qwCpk04JaauzmZ7G6yWrycliGPQkzpIwqhlXT3eczQYj6eGHrNMTjdYkkx48W4XA4+HUqUIMOXZtKiMVkA3Kuy2wpzOcSTEyqufFi3Jw5GMIMTkyp7izclM6yYXrPOc1ivTOnQwOyt2kJkPOsM7MKbW5WTBFMmMeZLCCCu3Oxu3m2+sE2zQYph2E9mRoQhhMIuJySHMc/prv3Zl7zW69Djdz8wQuS7a3y67Rprk4kKOx3OTEkYzXlqfrdFczfpI3D2ZsSe/QbFldaXHFazzq46Sb6vtr1UWnfmGYvimlUz9NOMfdTDJMlxF9Ow+/xxMejTMs5Ytg47uj38+wV66Cv0Eqx4qsKzKiOJo2ZjpwSOz4Fx8e/538I8AABpp/dZv2y3QAAAAASUVORK5CYII="
/>
</g>
<g id="my-project" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.5 4C2.5 3.44771 2.94771 3 3.5 3H9.5L12 6H20.5C21.0523 6 21.5 6.4477 21.5 7V20C21.5 20.5523 21.0523 21 20.5 21H3.5C2.94771 21 2.5 20.5523 2.5 20V4Z"
stroke="#06216D"
stroke-width="2"
stroke-linejoin="round"
/>
<path d="M9 14.5L11.5 16.5L16 11" stroke="#06216D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</g>
<svg id="save-project" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.5 4C2.5 3.44771 2.94771 3 3.5 3H9.5L12 6H20.5C21.0523 6 21.5 6.4477 21.5 7V20C21.5 20.5523 21.0523 21 20.5 21H3.5C2.94771 21 2.5 20.5523 2.5 20V4Z"
stroke="#06216D"
stroke-width="2"
stroke-linejoin="round"
/>
<path
d="M11 16C12.6569 16 14 14.6569 14 13C14 11.3431 12.6569 10 11 10C9.34315 10 8 11.3431 8 13C8 14.6569 9.34315 16 11 16Z"
stroke="#06216D"
stroke-width="2"
/>
<path d="M13.5 15L16 17" stroke="#06216D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</defs>
</svg>
</iron-iconset-svg>
<custom-style>
<style>
html {
--theme-primary-color: #0090ff;
--theme-primary-color-hover-button: rgba(0, 144, 255, 0.12);
--theme-secondary-color: #ebf9ff;
--theme-interface-color: #ffffff;
--theme-background-color: #ffffff;
--theme-font-color: #202223;
--theme-secondary-font-color: #323232;
--theme-grey-color: #505253;
--theme-light-grey-color: #909293;
--theme-dark-grey-color: #666666;
--theme-error-color: #ff5026;
--theme-warning-color: #ffc226;
--theme-success-color: #43a047;
--primary-color: var(--theme-primary-color) ;
--finish-button-backgroundcolor: var(--theme-primary-color);
--finish-button-color: #ffffff;
--finish-button-border: 1px solid var(--theme-primary-color);
--theme-tooltip-background-color: #000000;
--theme-tooltip-text-color: #ffffff;
--d2l-color-ferrite: var(--theme-tooltip-background-color);
--theme-border-color: #e0e0e0;
--theme-preloader-size: 50px;
--theme-preloader-size-diff: 10px;
--theme-preloader-viewbox: 0 0 32 32;
/*
custom preloader
*/
--theme-preloader-border-left: 0.25em solid var(--theme-primary-color);
--theme-preloader-border-right: 0.25em solid var(--theme-border-color);
--theme-preloader-border-top: 0.25em solid var(--theme-border-color);
--theme-preloader-border-bottom: 0.25em solid var(--theme-border-color);
--theme-preloader-background-image: none;
--theme-preloader-background-clip: unset;
--theme-preloader-background-origin: unset;
--theme-preloader-border-style: unset;
--theme-preloader-spinner-space: 10px;
/*icon btn size*/
--button-icon-height: 64px;
--button-icon-width: 64px;
--theme-text-color-1: #000000de;
--theme-text-color-2: #0000008a;
--theme-disabled-color: rgba(0, 0, 0, var(--theme-disabled-opacity, 0));
--theme-vertical-mobile-main-height: 90vh;
/*--theme-vertical-mobile-left-height: 10%; should we use it right here?*/
/*--theme-vertical-mobile-right-height: 10%;*/
/*--theme-vertical-mobile-bottom-height: 10%;*/
--theme-vertical-mobile-panel-margin: 20px;
--theme-vertical-mobile-top-order: 10;
--theme-vertical-mobile-left-order: 30;
--theme-vertical-mobile-main-order: 20;
--theme-vertical-mobile-right-order: 40;
--theme-vertical-mobile-bottom-order: 50;
--theme-disabled-button-border-color: #cccccc;
--theme-disabled-button-color: #bdbdbd;
--theme-enabled-button-border-color: #bbbbbb;
--theme-enabled-button-color: var(--theme-dark-grey-color);
--au-option-list-background-color: #f5f5f5;
--au-option-unchecked-color: #6f6f6f;
--au-tabbed-group-tab-background: #f1f3f4;
--au-tabbed-group-tab-hover-background: #dcdedf;
--au-tabbed-group-tab-color: #999999;
--au-tabbed-group-container-tab-background: #f9f9f9;
--au-uploader-background-color: #f9f9f9;
--au-uploader-dashed-border-color: #dddddd;
--au-uploader-text-color: #000000de;
--au-uploader-supported-text-color: var(--theme-dark-grey-color);
--au-progress-bar-background-color: #dddddd;
/* pim-options variables */
/* main */
--mdo-focus-border-size: 2px;
--mdo-text-color: var(--theme-text-color-1);
/* colors */
--mdo-border-color: #D6D6D6;
--mdo-disabled-color: #d8d8d8;
--mdo-primary-color: var(--theme-primary-color);
--mdo-background-color: #ffffff;
/* header */
--mdo-header-margin-bottom: 8px;
--mdo-title-font-size: calc(0.875 * var(--au-hem));
--mdo-title-line-height: calc(1.25 * var(--au-hem));
--mdo-title-font-weight: 600;
--mdo-title-margin-left: 0;
--mdo-title-margin-bottom: 4px;
--mdo-description-color: #686868;
--mdo-description-font-size: var(--mdo-title-font-size);
--mdo-description-line-height: var(--mdo-title-line-height);
/* tooltip */
--mdo-tooltip-icon-color: var(--mdo-description-color);
--mdo-tooltip-icon-hover-color: #282828;
--mdo-tooltip-hitbox-padding: 4px;
--mdo-tooltip-background: #000;
--mdo-tooltip-text: #fff;
--mdo-tooltip-padding: 6px 12px;
--mdo-tooltip-border-radius: 4px;
--mdo-tooltip-box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.08), 0px 8px 20px -4px rgba(0, 0, 0, 0.12);
/* content */
--mdo-content-name-font-size: var(--mdo-title-font-size);
--mdo-content-name-line-height: var(--mdo-title-line-height);
--mdo-content-text-font-size: var(--mdo-content-name-font-size);
--mdo-content-text-line-height: var(--mdo-content-name-line-height);
--mdo-content-item-padding: 6px 0;
/* swatch */
--mdo-swatch-border-color: var(--mdo-border-color);
--mdo-swatch-border-radius: 2px;
--mdo-swatch-border-hover-color: #adadad;
--mdo-color-swatch-border-radius: 0;
--mdo-image-swatch-offset: 0;
--mdo-color-swatch-outline-offset: 2px;
--mdo-swatch-border-active: var(--mdo-primary-color);
--mdo-swatch-border-width-active: 2px;
--mdo-swatch-border-color-disabled: var(--mdo-disabled-color);
--mdo-swatch-border: 1px;
--mdo-swatch-border-focus-size: var(--mdo-swatch-border-width-active);
--mdo-swatch-border-focus-color: #000;
--mdo-swatch-focus-outline-offset: 0;
--mdo-swatch-empty-color: #b8b8b8;
--mdo-swatch-empty-background: #f5f5f5;
/* chips */
--mdo-chips-vertical-padding: 6px;
--mdo-chips-horizontal-padding: 12px;
--mdo-chips-border-radius: 18px;
--mdo-chips-min-width: 14px;
--mdo-chips-gap: 8px;
--mdo-grid-option-gap: var(--mdo-chips-gap);
--mdo-chips-background-active: var(--mdo-primary-color);
--mdo-chips-background-active-hover: #0084eb;
--mdo-chips-background-active-disabled: #e6e6e6;
--mdo-chips-background-hover: #f0f0f0;
--mdo-chips-background-pressed: #d6d6d6;
--mdo-chips-background-active-pressed: #0079d6;
--mdo-chips-color-active: #ffffff;
--mdo-chips-color-disabled: var(--mdo-disabled-color);
--mdo-chips-border-color: var(--mdo-border-color);
--mdo-chips-active-border-color: transparent;
--mdo-chips-border-width: 1px;
--mdo-chips-focus-outline-color: black;
--mdo-chips-focus-outline-width: 2px;
--mdo-chips-focus-outline-offset: 1px;
--mdo-chips-hover-border-width: var(--mdo-chips-border-width);
--mdo-chips-hover-border-color: var(--mdo-border-color);
--mdo-chips-background-color: #ebf5ff;
--mdo-chips-active-hover-background: #d3edff;
--mdo-chips-active-pressed-background: #abdcff;
--mdo-chips-active-disabled-background: #e6e6e6;
--mdo-chips-border-color: #b8b8b8;
--mdo-chips-focus-outline-offset: 1px;
--mdo-chips-disabled-border-color: #e0e0e0;
--mdo-chips-disabled-color: #adadad;
--mdo-chips-background-disabled-selected: #f0f0f0;
/* radio */
--mdo-radio-size: 18px;
--mdo-radio-dot-color: var(--mdo-background-color);
--mdo-radio-dot-size: 6px;
--mdo-radio-active-color: var(--mdo-primary-color);
--mdo-radio-border-color: var(--mdo-border-color);
--mdo-radio-active-border-color: transparent;
--mdo-radio-active-border-size: 0;
--mdo-radio-label-margin: 9px;
--mdo-radio-border-size: 2px;
--mdo-radio-row-padding: 6px;
--mdo-radio-focus-outline-width: 2px;
--mdo-radio-focus-outline-color: black;
--mdo-radio-focus-outline-offset: 1px;
--mdo-radio-button-disable-color: #e0e0e0;
--mdo-radio-label-disable-color: #adadad;
/* color-list */
--mdo-color-list-preview-height: 40px;
--mdo-color-list-preview-width: 40px;
--mdo-color-list-border-radius: 2px;
/* image-list */
--mdo-image-list-preview-height: 64px;
--mdo-image-list-preview-width: 64px;
--mdo-image-list-border-radius: var(--mdo-color-list-border-radius);
/* color-grid */
--mdo-color-grid-preview-height: var(--mdo-color-list-preview-height);
--mdo-color-grid-preview-width: var(--mdo-color-list-preview-width);
--mdo-color-grid-border-radius: var(--mdo-color-list-border-radius);
/* image-grid */
--mdo-image-grid-min-size: 128px;
--mdo-image-grid-max-size: 1fr;
--mdo-image-grid-border-radius: var(--mdo-color-list-border-radius);
/* select */
--mdo-select-value-name-font-size: 14px;
--mdo-select-value-text-font-size: 12px;
--mdo-select-big-preview-height: 32px;
--mdo-select-big-preview-width: var(--mdo-select-big-preview-height);
--mdo-select-small-preview-height: 24px;
--mdo-select-small-preview-width: var(--mdo-select-small-preview-height);
--mdo-select-disable-diagonal-color: #686868;
--mdo-select-disable-background-color: #e5e5e5;
--mdo-select-disabled-value-name-color: #adadad;
--carousel-current-image-background: #f5f5f5;
--carousel-thumb-button-color: #83888f;
--carousel-thumb-button-color-disabled: #d6d7da;
--carousel-thumb-button-color-hover: #454c58;
--carousel-thumb-image-background: #f5f5f5;
--carousel-thumb-image-border: #e5e5e5;
--carousel-title: #333333;
--carousel-lightbox-background: #ffffff;
--carousel-lightbox-color: var(--theme-dark-grey-color);
--gallery-item-border-color: transparent;
--button-disable-background: #eaeaea;
--button-disable-color: #a8a8a8;
--checkbox-unchecked-color: #B0B0B0;
--checkbox-unchecked-hover-color: #8F8F8F;
--design-selector-emptystate-text-color: #686868;
--au-step-title-color: var(--au-font-color, #202223);
--au-step-description-color: var(--au-font-color, #505253);
--theme-disabled-opacity: 0.2;
--image-option-width: 100px;
--image-option-height: 100px;
--au-editor-padding-left: 20px;
--au-editor-padding-right: 20px;
--au-editor-padding-top: 20px;
--au-editor-padding-bottom: 20px;
--au-static-text-line-height: 20px;
--au-static-text-font-weight: 500;
--au-static-text-font-size: 14px;
--au-static-text-margin: 0 0 0 0;
--au-static-text-padding-top: 12px;
--au-static-text-padding-bottom: 12px;
--au-editor-mobile-padding-left: 8px;
--au-editor-mobile-padding-right: 8px;
--au-editor-mobile-padding-top: 8px;
--au-editor-mobile-padding-bottom: 8px;
--au-widget-display: inherit;
--theme-editor-min-height: 400px;
--au-collapse-height: 48px;
--au-collapse-background-color: var(--theme-interface-color);
--au-collapse-trigger-color: var(--theme-interface-color);
/*-color-selectors-palette*/
--number-columns-palette: 7;
--au-collapse: {
border: 1px solid #eeeff0;
}
--aurigma-drawer: {
background-color: transparent;
color: #000000;
margin-right: 30px;
}
--aurigma-drawer-toggle-width: calc(var(--au-hem) * 3.25);
--aurigma-drawer-panel-desktop-width: 30%;
--aurigma-drawer-main-panel-desktop-left: calc(var(--aurigma-drawer-panel-desktop-width) + 30px);
--aurigma-drawer-main-panel-desktop-right: calc(var(--aurigma-drawer-panel-desktop-width) + 10px);
--aurigma-drawer-main-panel-mobile-left: 0;
--aurigma-drawer-mobile: {
background-color: #ffffffa6;
}
--au-option-radio-button-width: none;
--au-option-checked-color: var(--theme-primary-color);
--default-theme-primary-button: {
background-color: var(--theme-primary-color);
color: var(--theme-secondary-color);
padding: 0.7em 2.7em;
margin: 5px;
}
--default-theme-secondary-button: {
background-color: var(--theme-secondary-color);
color: #000000;
padding: 0.7em 2.7em;
margin: 5px;
}
--default-theme-success-button: {
background-color: var(--theme-success-color);
color: #ffffff;
padding: 0.7em 2.7em;
margin: 5px;
}
--break-words: {
overflow: hidden;
word-break: break-word;
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
--paper-tabs-selection-bar-color: var(--theme-primary-color);
--paper-tabs-selection-bar: {
border-width: 4px;
}
--au-header-button-geometry: {
padding-top: calc(0.625 * var(--au-hem));
padding-left: calc(1 * var(--au-hem));
padding-bottom: calc(0.5625 * var(--au-hem));
padding-right: calc(1 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
min-width: calc(4 * var(--au-hem));
border-radius: 3px;
}
--au-header-tab-geometry: {
padding-left: calc(1.25 * var(--au-hem));
padding-right: calc(1.25 * var(--au-hem));
max-width: calc(22.5 * var(--au-hem));
}
--au-header-margin-bottom: 0;
/* Typography */
/*to override fonts use */
--au-font-family: "Roboto";
--theme-font-family: var(--au-font-family);
--au-hem: 16px;
--au-hem-letter-space: calc(var(--au-hem) / 16);
--au-widget-title-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: 600;
line-height: calc(1.25 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
}
--au-widget-subtitle-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: 500;
font-size: calc(0.875 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
}
--au-widget-prompt-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
font-size: calc(0.875 * var(--au-hem));
}
--au-h1-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: bold;
line-height: calc(2.5 * var(--au-hem));
font-size: calc(2 * var(--au-hem));
letter-spacing: calc(-0.5 * var(--au-hem-letter-space));
text-transform: none;
}
--au-h2-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: bold;
line-height: calc(2.25 * var(--au-hem));
font-size: calc(1.75 * var(--au-hem));
text-transform: none;
}
--au-h3-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: bold;
line-height: calc(2 * var(--au-hem));
font-size: calc(1.5 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
text-transform: none;
}
--au-h4-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: bold;
line-height: calc(1.625 * var(--au-hem));
font-size: calc(1.25 * var(--au-hem));
letter-spacing: calc(0.15 * var(--au-hem-letter-space));
text-transform: none;
}
--au-h5-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: bold;
line-height: calc(1.5 * var(--au-hem));
font-size: calc(1.125 * var(--au-hem));
letter-spacing: calc(0.1 * var(--au-hem-letter-space));
text-transform: none;
}
--au-subtitle1-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
line-height: calc(1.25 * var(--au-hem));
font-size: calc(1 * var(--au-hem));
letter-spacing: calc(0.15 * var(--au-hem-letter-space));
text-transform: none;
}
--au-subtitle2-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
line-height: calc(1.125 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
text-transform: none;
}
--au-body1-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
line-height: calc(1.125 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
text-transform: none;
}
--au-body2-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
line-height: calc(1.375 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
text-transform: none;
}
--au-button-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: 500;
line-height: calc(1 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
text-transform: none;
}
--au-caption-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: normal;
line-height: calc(1 * var(--au-hem));
font-size: calc(0.75 * var(--au-hem));
letter-spacing: calc(0.25 * var(--au-hem-letter-space));
text-transform: none;
}
--au-overline-font: {
font-family: var(--au-font-family);
font-style: normal;
font-weight: 500;
line-height: calc(1 * var(--au-hem));
font-size: calc(0.625 * var(--au-hem));
letter-spacing: calc(1 * var(--au-hem-letter-space));
text-transform: uppercase;
}
--default-button-title-font: {
@apply --paper-font-button;
text-transform: none;
}
--default-title-font: {
@apply --paper-font-common-base;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
--default-icon-title-font: {
@apply --paper-font-common-base;
font-size: 10px;
font-weight: 400;
}
--default-caption-title-font: {
@apply --paper-font-common-base;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.011em;
line-height: 20px;
}
--default-body-title-font: {
@apply --paper-font-body;
}
--default-common-control-font: {
@apply --paper-font-common-base;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
--default-common-control-font-caption: {
@apply --paper-font-common-base;
font-size: 12px;
font-weight: 400;
line-height: 14px;
}
--au-header-button-font: {
@apply --paper-font-title;
line-height: calc(1.125 * var(--au-hem));
font-size: calc(0.875 * var(--au-hem));
font-weight: 500;
text-align: center;
text-transform: none;
}
}
</style>
</custom-style>