@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/components/alert/alert.ios.css

@@ -1,3 +1,221 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > ion-avatar,
+.select-option-start > ion-img,
+.select-option-start > ion-thumbnail,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-end > ion-avatar,
+.select-option-end > ion-img,
+.select-option-end > ion-thumbnail,
+.select-option-end > img,
+.select-option-end > svg {
+  width: 44px;
+  height: 44px;
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  font-size: 28px;
+}
+
+.action-sheet-button-label-text {
+  justify-content: center;
+}
+
+.select-option-has-rich-content {
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -242,6 +460,39 @@
   min-height: inherit;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+  flex-direction: row;
+}
+
+.radio-justify-start,
+.checkbox-justify-start {
+  justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+  justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+  justify-content: space-between;
+}
+
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -529,8 +780,6 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  order: 0;
   color: var(--ion-text-color, #000);
 }
 
@@ -540,7 +789,7 @@ textarea.alert-input {
 
 .alert-radio-icon {
   position: relative;
-  order: 1;
+  flex-shrink: 0;
   min-width: 30px;
 }
 
@@ -556,7 +805,12 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary, #0054e9);
 }
-[aria-checked=true] .alert-radio-inner {
+
+[aria-checked=true] .radio-label-placement-end .alert-radio-inner {
+  inset-inline-end: 7px;
+}
+
+[aria-checked=true] .radio-label-placement-start .alert-radio-inner {
   inset-inline-start: 7px;
 }
 
@@ -567,19 +821,15 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
   color: var(--ion-text-color, #000);
 }
 
 .alert-checkbox-icon {
   border-radius: 50%;
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 6px;
-  margin-inline-end: 6px;
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
+  flex-shrink: 0;
   width: min(1.375rem, 55.836px);
   height: min(1.375rem, 55.836px);
   border-width: 0.125rem;
@@ -589,6 +839,20 @@ textarea.alert-input {
   contain: strict;
 }
 
+.checkbox-label-placement-end .alert-checkbox-icon {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 6px;
+  margin-inline-end: 6px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  -webkit-margin-start: 6px;
+  margin-inline-start: 6px;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 [aria-checked=true] .alert-checkbox-icon {
   border-color: var(--ion-color-primary, #0054e9);
   background-color: var(--ion-color-primary, #0054e9);
@@ -606,10 +870,15 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-background-color, #fff);
 }
-[aria-checked=true] .alert-checkbox-inner {
+
+[aria-checked=true] .checkbox-label-placement-end .alert-checkbox-inner {
   inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
 }
 
+[aria-checked=true] .checkbox-label-placement-start .alert-checkbox-inner {
+  inset-inline-end: calc(min(1.375rem, 55.836px) / 3);
+}
+
 .alert-button-group {
   -webkit-margin-end: -0.55px;
   margin-inline-end: -0.55px;