mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(item-divider): remove theme sass files
This commit is contained in:
Maria Hutt
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -39,7 +39,7 @@ export class ItemDivider implements ComponentInterface {
|
||||
|
||||
render() {
|
||||
const theme = getIonTheme(this);
|
||||
console.log('theme', theme);
|
||||
|
||||
return (
|
||||
<Host
|
||||
class={createColorClasses(this.color, {
|
||||
|
||||
Reference in New Issue
Block a user