From 38145a3b3e03d47d3a2da957c3a9ac1801f6471d Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Mar 2026 09:27:21 -0700 Subject: [PATCH] chore(item-divider): remove theme sass files --- .../item-divider/item-divider.ios.scss | 99 ----------- .../item-divider/item-divider.ios.vars.scss | 26 --- .../item-divider/item-divider.md.scss | 164 ------------------ .../item-divider/item-divider.md.vars.scss | 26 --- .../components/item-divider/item-divider.tsx | 2 +- 5 files changed, 1 insertion(+), 316 deletions(-) delete mode 100644 core/src/components/item-divider/item-divider.ios.scss delete mode 100644 core/src/components/item-divider/item-divider.ios.vars.scss delete mode 100644 core/src/components/item-divider/item-divider.md.scss delete mode 100644 core/src/components/item-divider/item-divider.md.vars.scss diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss deleted file mode 100644 index 66f09e7bae..0000000000 --- a/core/src/components/item-divider/item-divider.ios.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "./item-divider"; -@import "./item-divider.ios.vars"; - -// iOS Item Divider -// -------------------------------------------------- - -:host { - --background: #{$item-divider-ios-background}; - --color: #{$item-divider-ios-color}; - --padding-start: #{$item-divider-ios-padding-start}; - --inner-padding-end: #{$item-divider-ios-padding-end * 0.5}; - - @include border-radius(0); - - position: relative; // doesn't seem to be needed?, no issues with it being missing for sticky - - min-height: $item-divider-ios-min-height; - - font-size: $item-divider-ios-font-size; - - font-weight: $item-divider-ios-font-weight; -} - -// iOS Item Divider Slots -// -------------------------------------------------- - -:host([slot="start"]) { - @include margin( - $item-ios-slot-start-margin-top, - $item-ios-slot-start-margin-end, - $item-ios-slot-start-margin-bottom, - $item-ios-slot-start-margin-start - ); -} - -// all of these are null -:host([slot="end"]) { - @include margin( - $item-ios-slot-end-margin-top, - $item-ios-slot-end-margin-end, - $item-ios-slot-end-margin-bottom, - $item-ios-slot-end-margin-start - ); -} - -::slotted(ion-icon[slot="start"]), -::slotted(ion-icon[slot="end"]) { - @include margin( - $item-ios-icon-slot-margin-top, - $item-ios-icon-slot-margin-end, - $item-ios-icon-slot-margin-bottom, - $item-ios-icon-slot-margin-start - ); -} - -// iOS Item Divider Content -// -------------------------------------------------- - -::slotted(h1) { - @include margin(0, 0, 2px); -} - -::slotted(h2) { - @include margin(0, 0, 2px); -} - -::slotted(h3), -::slotted(h4), -::slotted(h5), -::slotted(h6) { - @include margin(0, 0, 3px); -} - -::slotted(p) { - @include margin( - $item-ios-paragraph-margin-top, - $item-ios-paragraph-margin-end, - $item-ios-paragraph-margin-bottom, - $item-ios-paragraph-margin-start - ); - - color: $item-ios-paragraph-text-color; - - font-size: $item-ios-paragraph-font-size; - - line-height: normal; // not needed since it's the default - - text-overflow: inherit; - - overflow: inherit; -} - -::slotted(h2:last-child) ::slotted(h3:last-child), -::slotted(h4:last-child), -::slotted(h5:last-child), -::slotted(h6:last-child), -::slotted(p:last-child) { - @include margin(null, null, 0, null); -} diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss deleted file mode 100644 index 89901c1f13..0000000000 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../themes/native/native.globals.ios"; -@import "../item/item.ios.vars"; - -// iOS Item Divider -// -------------------------------------------------- - -/// @prop - Minimum height for the divider -$item-divider-ios-min-height: 28px; - -/// @prop - Font size of the item -$item-divider-ios-font-size: dynamic-font(17px); - -/// @prop - Font weight of the item -$item-divider-ios-font-weight: 600; - -/// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100; - -/// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150; - -/// @prop - Padding start for the divider -$item-divider-ios-padding-start: $item-ios-padding-start; - -/// @prop - Padding end for the divider -$item-divider-ios-padding-end: $item-ios-padding-end; diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss deleted file mode 100644 index f78959f15e..0000000000 --- a/core/src/components/item-divider/item-divider.md.scss +++ /dev/null @@ -1,164 +0,0 @@ -@use "sass:math"; -@import "./item-divider"; -@import "./item-divider.md.vars"; - -// Material Design Item Divider -// -------------------------------------------------- - -:host { - --background: #{$item-divider-md-background}; - --color: #{$item-divider-md-color}; - --padding-start: #{$item-divider-md-padding-start}; - --inner-padding-end: #{$item-divider-md-padding-end}; - - min-height: $item-divider-md-min-height; // for ionic this should be the default - - border-bottom: $item-divider-md-border-bottom; // for ionic this should be null - - font-size: dynamic-font($item-divider-md-font-size); // for ionic this should be the default -} - -// Material Design Item Divider Slots -// -------------------------------------------------- - -::slotted([slot="start"]) { - @include margin-horizontal( - $item-md-start-slot-margin-start, - //null - $item-md-start-slot-margin-end - ); // for ionic this should be 0 -} - -::slotted([slot="end"]) { - @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end); //null -} - -// Material Design Slotted Label -// -------------------------------------------------- - -::slotted(ion-label) { - @include margin(13px, 0, 10px, 0); -} - -// Material Design Slotted Icon -// -------------------------------------------------- - -::slotted(ion-icon) { - color: $item-md-icon-slot-color; - - // The icon's font size should use em units to support - // font scaling but evaluate to 24px at 100% font size. - // The value in em units is calculated by dividing - // the icon's font size in pixels by the item divider's - // font size in pixels. - // e.g. 24px / 14px = 1.7142857143em - font-size: math.div($item-md-icon-slot-font-size, $item-divider-md-font-size) * 1em; -} - -:host(.ion-color) ::slotted(ion-icon) { - color: current-color(contrast); // for ionic this should be currentColor, inherit -} - -::slotted(ion-icon[slot]) { - @include margin( - $item-md-icon-slot-margin-top, - $item-md-icon-slot-margin-end, - $item-md-icon-slot-margin-bottom, - $item-md-icon-slot-margin-start - ); -} - -::slotted(ion-icon[slot="start"]) { - @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end); -} - -::slotted(ion-icon[slot="end"]) { - @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end); -} - -// Material Design Slotted Note -// -------------------------------------------------- - -::slotted(ion-note) { - @include margin(0); - - align-self: flex-start; - - font-size: $item-md-note-slot-font-size; -} - -::slotted(ion-note[slot]) { - @include padding( - $item-md-note-slot-padding-top, - $item-md-note-slot-padding-end, - $item-md-note-slot-padding-bottom, - $item-md-note-slot-padding-start - ); -} - -// Material Design Item Divider Avatar -// -------------------------------------------------- - -::slotted(ion-avatar) { - width: $item-md-avatar-width; - height: $item-md-avatar-height; -} - -// Material Design Item Divider Thumbnail -// -------------------------------------------------- - -::slotted(ion-thumbnail) { - --size: #{$item-md-thumbnail-size}; -} - -// Material Design Item Divider Avatar/Thumbnail -// -------------------------------------------------- - -::slotted(ion-avatar), -::slotted(ion-thumbnail) { - @include margin( - $item-md-media-slot-margin-top, - $item-md-media-slot-margin-end, - $item-md-media-slot-margin-bottom, - $item-md-media-slot-margin-start - ); -} - -::slotted(ion-avatar[slot="start"]), -::slotted(ion-thumbnail[slot="start"]) { - @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end); -} - -::slotted(ion-avatar[slot="end"]), -::slotted(ion-thumbnail[slot="end"]) { - @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end); -} - -// Material Design Item Divider Content -// -------------------------------------------------- - -::slotted(h1) { - @include margin(0, 0, 2px); -} - -::slotted(h2) { - @include margin(2px, 0); -} - -::slotted(h3, h4, h5, h6) { - @include margin(2px, 0); -} - -::slotted(p) { - @include margin(0, 0, 2px); - - color: $item-md-paragraph-text-color; - - font-size: dynamic-font(14px); - - line-height: normal; - - text-overflow: inherit; - - overflow: inherit; -} diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss deleted file mode 100644 index 97a58f09b2..0000000000 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../themes/native/native.globals.md"; -@import "../item/item.md.vars"; - -// Material Design Item Divider -// -------------------------------------------------- - -/// @prop - Minimum height for the divider -$item-divider-md-min-height: 30px; - -/// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600; - -/// @prop - Background for the divider -$item-divider-md-background: $background-color; - -/// @prop - Font size for the divider -$item-divider-md-font-size: 14px; - -/// @prop - Border bottom for the divider -$item-divider-md-border-bottom: 1px solid $item-md-border-color; - -/// @prop - Padding start for the divider -$item-divider-md-padding-start: $item-md-padding-start; - -/// @prop - Padding end for the divider -$item-divider-md-padding-end: $item-md-padding-end; diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 3f992ed2db..9ed9477a5f 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -39,7 +39,7 @@ export class ItemDivider implements ComponentInterface { render() { const theme = getIonTheme(this); - console.log('theme', theme); + return (