diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index 7a74dddd5b..8924b2eeb6 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -80,6 +80,8 @@ height: inherit; cursor: inherit; + + @include padding(null, var(--item-inner-padding-end), null, var(--item-inner-padding-start)); } .label-text-wrapper { @@ -154,7 +156,6 @@ input { opacity: 0; } - // Justify Content // --------------------------------------------- @@ -170,7 +171,6 @@ input { justify-content: end; } - // Label Placement - Start // ---------------------------------------------------------------- @@ -191,7 +191,6 @@ input { @include margin(0, 8px, 0, 0); } - // Label Placement - End // ---------------------------------------------------------------- @@ -212,7 +211,6 @@ input { @include margin(0, 0, 0, 8px); } - // Label Placement - Fixed // ---------------------------------------------------------------- @@ -237,7 +235,6 @@ input { max-width: 200px; } - // Checked / Indeterminate Checkbox // --------------------------------------------- @@ -253,7 +250,6 @@ input { opacity: 1; } - // Disabled Checkbox // --------------------------------------------- diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 7a2386f01a..cf8c7192a6 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -147,6 +147,14 @@ export class Checkbox implements ComponentInterface { ...inheritAriaAttributes(this.el), }; } + + // Get the nearest `ion-item`. + const item = this.el.closest('ion-item'); + if (item) { + if (!item.classList.contains('item-has-modern-control') && !this.legacyFormController.hasLegacyControl()) { + item.classList.add('item-has-modern-control'); + } + } } @Watch('checked') diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 402b8eb6ed..092a6d90de 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -108,6 +108,12 @@ border-color: current-color(shade); } +// Testing + +:host(.item-has-modern-control) { + --item-inner-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)); + --item-inner-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px)); +} // Item: Activated // -------------------------------------------------- @@ -126,7 +132,6 @@ color: current-color(contrast); } - // Item: Focused // -------------------------------------------------- @@ -148,7 +153,6 @@ } } - // Item: Hover // -------------------------------------------------- @@ -172,7 +176,6 @@ } } - // Item: Disabled // -------------------------------------------------- @@ -183,23 +186,27 @@ :host(.item-disabled) { cursor: default; - opacity: .3; + opacity: 0.3; pointer-events: none; } - // Native Item // -------------------------------------------------- +:host:not(.item-has-modern-control) { + .item-native { + @include padding( + var(--padding-top), + var(--padding-end), + var(--padding-bottom), + calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) + ); + } +} + .item-native { @include border-radius(var(--border-radius)); @include margin(0); - @include padding( - var(--padding-top), - var(--padding-end), - var(--padding-bottom), - calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) - ); @include text-inherit(); display: flex; @@ -239,25 +246,28 @@ z-index: -1; } -button, a { +button, +a { cursor: pointer; user-select: none; -webkit-user-drag: none; } - // Inner Item // -------------------------------------------------- -.item-inner { - @include margin(0); +:host:not(.item-has-modern-control) { @include padding( var(--inner-padding-top), calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)), var(--inner-padding-bottom), var(--inner-padding-start) ); +} + +.item-inner { + @include margin(0); display: flex; @@ -280,26 +290,18 @@ button, a { box-sizing: border-box; } - // Item Bottom // -------------------------------------------------- .item-bottom { @include margin(0); - @include padding( - 0, - var(--inner-padding-end), - 0, - calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) - ); + @include padding(0, var(--inner-padding-end), 0, calc(var(--padding-start) + var(--ion-safe-area-left, 0px))); display: flex; justify-content: space-between; - } - // Item Detail Icon // -------------------------------------------------- @@ -321,7 +323,6 @@ button, a { opacity: var(--detail-icon-opacity); } - // Item Slots // -------------------------------------------------- @@ -375,7 +376,6 @@ button, a { flex-direction: column; } - // Item Input Highlight // -------------------------------------------------- @@ -450,7 +450,6 @@ button, a { border-left: none; } - // Item Input Focus // -------------------------------------------------- @@ -509,7 +508,6 @@ button, a { max-width: 100%; } - // Item Datetime // -------------------------------------------------- @@ -524,7 +522,6 @@ button, a { width: 100%; } - // Item w/ Multiple Inputs // -------------------------------------------------- // Multiple inputs in an item should have the input @@ -544,7 +541,6 @@ button, a { align-items: stretch; } - // Item Reorder // -------------------------------------------------- @@ -552,7 +548,6 @@ button, a { @include margin(0, null); } - // Item Button Ripple effect // --------------------------------------------------