Showing with 2,221 additions and 1,457 deletions.
  1. +202 −6 core/src/components.d.ts
  2. +9 −9 core/src/components/action-sheet/test/translucent/index.html
  3. +9 −9 core/src/components/alert/test/translucent/index.html
  4. +247 −2 core/src/components/col/col.tsx
  5. +388 −0 core/src/components/col/readme.md
  6. +8 −8 core/src/components/fab/test/translucent/index.html
  7. +24 −140 core/src/components/grid/grid.mixins.scss
  8. +4 −12 core/src/components/grid/grid.scss
  9. +15 −2 core/src/components/grid/grid.tsx
  10. +26 −47 core/src/components/grid/grid.vars.scss
  11. +28 −517 core/src/components/grid/readme.md
  12. +259 −243 core/src/components/grid/test/basic/index.html
  13. +19 −0 core/src/components/grid/test/offsets/e2e.js
  14. +122 −0 core/src/components/grid/test/offsets/index.html
  15. +19 −0 core/src/components/grid/test/padding/e2e.js
  16. +197 −0 core/src/components/grid/test/padding/index.html
  17. +261 −244 core/src/components/grid/test/preview/index.html
  18. +19 −0 core/src/components/grid/test/sizes/e2e.js
  19. +197 −0 core/src/components/grid/test/sizes/index.html
  20. +38 −22 core/src/components/grid/test/standalone/index.html
  21. +16 −68 core/src/components/loading/loading.tsx
  22. +2 −6 core/src/components/loading/readme.md
  23. +8 −8 core/src/components/loading/test/basic/index.html
  24. +8 −8 core/src/components/loading/test/preview/index.html
  25. +8 −8 core/src/components/searchbar/test/toolbar/index.html
  26. +8 −8 core/src/components/tabs/test/translucent/translucent-page-tab.tsx
  27. +8 −8 core/src/components/toast/test/basic/index.html
  28. +8 −8 core/src/components/toast/test/preview/index.html
  29. +16 −16 core/src/components/toolbar/test/translucent/index.html
  30. +11 −0 core/src/themes/ionic.globals.scss
  31. +14 −49 core/src/themes/ionic.mixins.scss
  32. +22 −0 core/src/utils/media.ts
  33. +1 −9 core/src/utils/show-hide-when-utils.ts
208 core/src/components.d.ts
View file
@@ -1472,7 +1472,102 @@ declare global {

namespace StencilComponents {
interface IonCol {

/**
* The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
*/
'offset': string;
/**
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetLg': string;
/**
* The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetMd': string;
/**
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetSm': string;
/**
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetXl': string;
/**
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetXs': string;
/**
* The amount to pull the column, in terms of how many columns it should shift to the left of the total available.
*/
'pull': string;
/**
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullLg': string;
/**
* The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullMd': string;
/**
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullSm': string;
/**
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullXl': string;
/**
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullXs': string;
/**
* The amount to push the column, in terms of how many columns it should shift to the right of the total available.
*/
'push': string;
/**
* The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushLg': string;
/**
* The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushMd': string;
/**
* The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushSm': string;
/**
* The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushXl': string;
/**
* The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushXs': string;
/**
* The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'size': string;
/**
* The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeLg': string;
/**
* The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeMd': string;
/**
* The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeSm': string;
/**
* The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeXl': string;
/**
* The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeXs': string;
}
}

@@ -1495,7 +1590,102 @@ declare global {
}
namespace JSXElements {
export interface IonColAttributes extends HTMLAttributes {

/**
* The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
*/
'offset'?: string;
/**
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetLg'?: string;
/**
* The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetMd'?: string;
/**
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetSm'?: string;
/**
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetXl'?: string;
/**
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.
*/
'offsetXs'?: string;
/**
* The amount to pull the column, in terms of how many columns it should shift to the left of the total available.
*/
'pull'?: string;
/**
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullLg'?: string;
/**
* The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullMd'?: string;
/**
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullSm'?: string;
/**
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullXl'?: string;
/**
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.
*/
'pullXs'?: string;
/**
* The amount to push the column, in terms of how many columns it should shift to the right of the total available.
*/
'push'?: string;
/**
* The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushLg'?: string;
/**
* The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushMd'?: string;
/**
* The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushSm'?: string;
/**
* The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushXl'?: string;
/**
* The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.
*/
'pushXs'?: string;
/**
* The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'size'?: string;
/**
* The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeLg'?: string;
/**
* The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeMd'?: string;
/**
* The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeSm'?: string;
/**
* The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeXl'?: string;
/**
* The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
*/
'sizeXs'?: string;
}
}
}
@@ -2187,7 +2377,10 @@ declare global {

namespace StencilComponents {
interface IonGrid {

/**
* If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
*/
'fixed': boolean;
}
}

@@ -2210,7 +2403,10 @@ declare global {
}
namespace JSXElements {
export interface IonGridAttributes extends HTMLAttributes {

/**
* If true, the grid will have a fixed width based on the screen size. Defaults to `false`.
*/
'fixed'?: boolean;
}
}
}
@@ -3308,11 +3504,11 @@ declare global {
*/
'leaveAnimation': AnimationBuilder;
/**
* Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circustances.
* Returns a promise that resolves when the loading did dismiss. It also accepts a callback that is called in the same circumstances.
*/
'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
/**
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circustances. ``` const {data, role} = await loading.onWillDismiss(); ```
* Returns a promise that resolves when the loading will dismiss. It also accepts a callback that is called in the same circumstances.
*/
'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
'overlayId': number;
18 core/src/components/action-sheet/test/translucent/index.html
View file
@@ -29,15 +29,15 @@

<ion-grid>
<ion-row>
<ion-col col-4><f class="red"></f></ion-col>
<ion-col col-4><f class="green"></f></ion-col>
<ion-col col-4><f class="blue"></f></ion-col>
<ion-col col-4><f class="yellow"></f></ion-col>
<ion-col col-4><f class="pink"></f></ion-col>
<ion-col col-4><f class="purple"></f></ion-col>
<ion-col col-4><f class="black"></f></ion-col>
<ion-col col-4><f class="fuchsia"></f></ion-col>
<ion-col col-4><f class="orange"></f></ion-col>
<ion-col size="4"><f class="red"></f></ion-col>
<ion-col size="4"><f class="green"></f></ion-col>
<ion-col size="4"><f class="blue"></f></ion-col>
<ion-col size="4"><f class="yellow"></f></ion-col>
<ion-col size="4"><f class="pink"></f></ion-col>
<ion-col size="4"><f class="purple"></f></ion-col>
<ion-col size="4"><f class="black"></f></ion-col>
<ion-col size="4"><f class="fuchsia"></f></ion-col>
<ion-col size="4"><f class="orange"></f></ion-col>
</ion-row>
</ion-grid>
</ion-content>
18 core/src/components/alert/test/translucent/index.html
View file
@@ -27,15 +27,15 @@

<ion-grid>
<ion-row>
<ion-col col-4><f class="red"></f></ion-col>
<ion-col col-4><f class="green"></f></ion-col>
<ion-col col-4><f class="blue"></f></ion-col>
<ion-col col-4><f class="yellow"></f></ion-col>
<ion-col col-4><f class="pink"></f></ion-col>
<ion-col col-4><f class="purple"></f></ion-col>
<ion-col col-4><f class="black"></f></ion-col>
<ion-col col-4><f class="fuchsia"></f></ion-col>
<ion-col col-4><f class="orange"></f></ion-col>
<ion-col size="4"><f class="red"></f></ion-col>
<ion-col size="4"><f class="green"></f></ion-col>
<ion-col size="4"><f class="blue"></f></ion-col>
<ion-col size="4"><f class="yellow"></f></ion-col>
<ion-col size="4"><f class="pink"></f></ion-col>
<ion-col size="4"><f class="purple"></f></ion-col>
<ion-col size="4"><f class="black"></f></ion-col>
<ion-col size="4"><f class="fuchsia"></f></ion-col>
<ion-col size="4"><f class="orange"></f></ion-col>
</ion-row>
</ion-grid>