ku4web-components 6.5.6 → 6.5.7

package/dist/collection/components/ku4-grid/ku4-grid.css

@@ -1,751 +0,0 @@
-:host {
-  position: relative;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-@media only screen and (min-width: 1px) {
-  :host(.columns-xs-1) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-2) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(50%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-3) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(33.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-4) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-5) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-6) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-7) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14.2857142857%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-8) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12.5%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-9) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11.1111111111%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-10) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-11) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9.0909090909%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-12) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(8.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-13) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.6923076923%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-14) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.1428571429%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-15) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-xs-16) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.offset-left-xs-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-left-xs-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-left-xs-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-left-xs-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-left-xs-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-left-xs-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-right-xs-0) {
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-right-xs-1) {
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-right-xs-2) {
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-right-xs-3) {
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-right-xs-4) {
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-right-xs-5) {
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-xs-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-xs-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-xs-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-xs-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-xs-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-xs-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host {
-    margin-bottom: calc(-1 * var(--ku4-grid-row-gutter-xs, 6px));
-  }
-  :host::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-xs, 6px);
-  }
-  :host ::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-xs, 6px);
-  }
-}
-@media only screen and (min-width: 768px) {
-  :host(.columns-sm-1) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-2) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(50%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-3) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(33.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-4) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-5) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-6) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-7) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14.2857142857%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-8) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12.5%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-9) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11.1111111111%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-10) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-11) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9.0909090909%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-12) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(8.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-13) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.6923076923%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-14) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.1428571429%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-15) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-sm-16) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.offset-left-sm-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-left-sm-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-left-sm-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-left-sm-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-left-sm-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-left-sm-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-right-sm-0) {
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-right-sm-1) {
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-right-sm-2) {
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-right-sm-3) {
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-right-sm-4) {
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-right-sm-5) {
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-sm-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-sm-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-sm-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-sm-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-sm-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-sm-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host {
-    margin-bottom: calc(-1 * var(--ku4-grid-row-gutter-sm, 10px));
-  }
-  :host::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-sm, 10px);
-  }
-  :host ::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-sm, 10px);
-  }
-}
-@media only screen and (min-width: 992px) {
-  :host(.columns-md-1) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-2) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(50%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-3) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(33.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-4) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-5) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-6) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-7) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14.2857142857%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-8) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12.5%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-9) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11.1111111111%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-10) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-11) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9.0909090909%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-12) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(8.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-13) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.6923076923%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-14) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.1428571429%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-15) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-md-16) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.offset-left-md-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-left-md-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-left-md-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-left-md-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-left-md-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-left-md-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-right-md-0) {
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-right-md-1) {
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-right-md-2) {
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-right-md-3) {
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-right-md-4) {
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-right-md-5) {
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-md-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-md-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-md-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-md-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-md-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-md-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host {
-    margin-bottom: calc(-1 * var(--ku4-grid-row-gutter-md, 12px));
-  }
-  :host::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-md, 12px);
-  }
-  :host ::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-md, 12px);
-  }
-}
-@media only screen and (min-width: 1200px) {
-  :host(.columns-lg-1) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-2) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(50%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-3) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(33.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-4) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-5) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(20%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-6) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(16.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-7) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14.2857142857%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-8) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(12.5%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-9) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11.1111111111%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-10) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-11) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9.0909090909%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-12) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(8.3333333333%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-13) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.6923076923%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-14) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7.1428571429%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-15) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.6666666667%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.columns-lg-16) {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.25%, auto));
-    margin-bottom: 0;
-  }
-
-  :host(.offset-left-lg-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-left-lg-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-left-lg-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-left-lg-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-left-lg-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-left-lg-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-right-lg-0) {
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-right-lg-1) {
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-right-lg-2) {
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-right-lg-3) {
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-right-lg-4) {
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-right-lg-5) {
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host(.offset-lg-0) {
-    padding-left: calc(((100% + 8.33px) / 12) * 0);
-    padding-right: calc(((100% + 8.33px) / 12) * 0);
-  }
-
-  :host(.offset-lg-1) {
-    padding-left: calc(((100% + 8.33px) / 12) * 1);
-    padding-right: calc(((100% + 8.33px) / 12) * 1);
-  }
-
-  :host(.offset-lg-2) {
-    padding-left: calc(((100% + 8.33px) / 12) * 2);
-    padding-right: calc(((100% + 8.33px) / 12) * 2);
-  }
-
-  :host(.offset-lg-3) {
-    padding-left: calc(((100% + 8.33px) / 12) * 3);
-    padding-right: calc(((100% + 8.33px) / 12) * 3);
-  }
-
-  :host(.offset-lg-4) {
-    padding-left: calc(((100% + 8.33px) / 12) * 4);
-    padding-right: calc(((100% + 8.33px) / 12) * 4);
-  }
-
-  :host(.offset-lg-5) {
-    padding-left: calc(((100% + 8.33px) / 12) * 5);
-    padding-right: calc(((100% + 8.33px) / 12) * 5);
-  }
-
-  :host {
-    margin-bottom: calc(-1 * var(--ku4-grid-row-gutter-lg, 16px));
-  }
-  :host::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-lg, 16px);
-  }
-  :host ::slotted(*) {
-    margin-bottom: var(--ku4-grid-row-gutter-lg, 16px);
-  }
-}
-::slotted(*) {
-  margin-left: var(--ku4-grid-column-gutter, 15px);
-  margin-right: var(--ku4-grid-column-gutter, 15px);
-}