javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(item): remove item divider's dependency on item css

Browse Source 
- removes the requirement for item to be used for item divider to work
- renames certain item sass variables
- removes some item variables from checkbox/radio
This commit is contained in:
Brandy Carney
2018-01-19 12:07:32 -05:00
parent 7ab363f7ba
commit 808aff3ebc
14 changed files with 271 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -42,13 +42,13 @@ $checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-
$checkbox-ios-disabled-opacity: .3 !default;
/// @prop - Margin top of the left checkbox item
$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default;
$checkbox-ios-item-start-margin-top: 8px !default;
/// @prop - Margin end of the left checkbox item
$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default;
/// @prop - Margin bottom of the left checkbox item
$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default;
$checkbox-ios-item-start-margin-bottom: $checkbox-ios-item-start-margin-top !default;
/// @prop - Margin start of the left checkbox item
$checkbox-ios-item-start-margin-start: 2px !default;

4
packages/core/src/components/checkbox/checkbox.md.vars.scss
View File

@ -48,13 +48,13 @@ $checkbox-md-transition-duration: 280ms !default;
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
/// @prop - Margin top of the start checkbox item
$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default;
$checkbox-md-item-start-margin-top: 9px !default;
/// @prop - Margin end of the start checkbox item
$checkbox-md-item-start-margin-end: 36px !default;
/// @prop - Margin bottom of the start checkbox item
$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default;
$checkbox-md-item-start-margin-bottom: $checkbox-md-item-start-margin-top !default;
/// @prop - Margin start of the start checkbox item
$checkbox-md-item-start-margin-start: 4px !default;

32
packages/core/src/components/item-divider/item-divider.ios.scss
View File

@ -6,11 +6,43 @@
.item-divider-ios {
@include padding-horizontal($item-ios-divider-padding-start, null);
@include safe-area-padding-horizontal($item-ios-divider-padding-start, null);
@include border-radius(0);
position: relative;
font-family: $item-ios-divider-font-family;
font-size: $item-ios-divider-font-size;
color: $item-ios-divider-color;
background-color: $item-ios-divider-background;
}
.item-divider-ios .item-divider-inner {
@include padding-horizontal(null, $item-ios-divider-padding-end / 2);
@media screen and (orientation: landscape) {
@include safe-area-padding-horizontal(null, $item-ios-divider-padding-end / 2);
}
}
// iOS Item Slots
// --------------------------------------------------
.item-divider-ios [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);
}
.item-divider-ios [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);
}
.item-divider-ios ion-icon[slot="start"],
.item-divider-ios 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);
}
// Generate iOS Item Divider Colors
// --------------------------------------------------

9
packages/core/src/components/item-divider/item-divider.ios.vars.scss
View File

@ -5,6 +5,12 @@
// iOS Item Divider
// --------------------------------------------------
/// @prop - Font family of the item
$item-ios-divider-font-family: $font-family-ios-base !default;
/// @prop - Font size of the item
$item-ios-divider-font-size: 17px !default;
/// @prop - Background for the divider
$item-ios-divider-background: #f7f7f7 !default;
@ -13,3 +19,6 @@ $item-ios-divider-color: #222 !default;
/// @prop - Padding start for the divider
$item-ios-divider-padding-start: $item-ios-padding-start !default;
/// @prop - Padding end for the divider
$item-ios-divider-padding-end: $item-ios-padding-end !default;

35
packages/core/src/components/item-divider/item-divider.md.scss
View File

@ -8,12 +8,47 @@
@include padding-horizontal($item-md-divider-padding-start, null);
border-bottom: $item-md-divider-border-bottom;
font-family: $item-md-divider-font-family;
font-size: $item-md-divider-font-size;
color: $item-md-divider-color;
background-color: $item-md-divider-background;
}
.item-divider-md .item-divider-inner {
@include padding-horizontal(null, ($item-md-divider-padding-end / 2));
}
// Material Design Item Slots
// --------------------------------------------------
.item-divider-md [slot="start"],
.item-divider-md [slot="end"] {
@include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
}
.item-divider-md ion-icon[slot="start"],
.item-divider-md ion-icon[slot="end"] {
@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);
}
.item-divider-md ion-icon[slot="start"] + .item-inner,
.item-divider-md ion-icon[slot="start"] + .item-input {
@include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
}
.item-divider-md ion-avatar[slot="start"],
.item-divider-md ion-thumbnail[slot="start"] {
@include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
}
.item-divider-md ion-avatar[slot="end"],
.item-divider-md ion-thumbnail[slot="end"] {
@include margin(($item-md-padding-end / 2));
}
// Generate Material Design Item Divider Colors
// --------------------------------------------------

6
packages/core/src/components/item-divider/item-divider.md.vars.scss
View File

@ -11,6 +11,9 @@ $item-md-divider-color: #858585 !default;
/// @prop - Background for the divider
$item-md-divider-background: #fff !default;
/// @prop - Font family for the divider
$item-md-divider-font-family: $font-family-md-base !default;
/// @prop - Font size for the divider
$item-md-divider-font-size: 14px !default;
@ -19,3 +22,6 @@ $item-md-divider-border-bottom: 1px solid $list-md-border-color !default;
/// @prop - Padding start for the divider
$item-md-divider-padding-start: $item-md-padding-start !default;
/// @prop - Padding end for the divider
$item-md-divider-padding-end: $item-md-padding-end !default;

31
packages/core/src/components/item-divider/item-divider.scss
View File

@ -8,6 +8,8 @@ ion-item-divider {
@include margin(0);
@include padding(0);
box-sizing: border-box;
z-index: $z-index-item-divider;
display: flex;
overflow: hidden;
@ -25,3 +27,32 @@ ion-item-divider[sticky] {
position: sticky;
top: 0;
}
.item-divider-inner {
@include margin(0);
@include padding(0);
display: flex;
overflow: hidden;
flex: 1;
flex-direction: inherit;
align-items: inherit;
align-self: stretch;
min-height: inherit;
border: 0;
}
.item-divider-wrapper {
display: flex;
overflow: hidden;
flex: 1;
flex-direction: inherit;
align-items: inherit;
align-self: stretch;
text-overflow: ellipsis;
}

6
packages/core/src/components/item-divider/item-divider.tsx
View File

@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
md: 'item-divider.md.scss'
},
host: {
theme: 'item item-divider'
theme: 'item-divider'
}
})
export class ItemDivider {
@ -30,8 +30,8 @@ export class ItemDivider {
render() {
return [
<slot name='start'></slot>,
<div class='item-inner'>
<div class='input-wrapper'>
<div class='item-divider-inner'>
<div class='item-divider-wrapper'>
<slot></slot>
</div>
<slot name='end'></slot>

41
packages/core/src/components/item/item.ios.scss
View File

@ -80,22 +80,31 @@
}
// iOS Item Media
// iOS Item Slots
// --------------------------------------------------
.item-ios [slot="start"] {
@include margin($item-ios-padding-media-top, $item-ios-padding-start, $item-ios-padding-media-bottom, 0);
@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);
}
.item-ios [slot="end"] {
@include margin($item-ios-padding-media-top, ($item-ios-padding-start / 2), $item-ios-padding-media-bottom, ($item-ios-padding-end / 2));
@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);
}
.item-ios ion-icon[slot="start"],
.item-ios ion-icon[slot="end"] {
@include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
@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);
}
.item-ios.item-label-stacked [slot="end"],
.item-ios.item-label-floating [slot="end"] {
@include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start);
}
// TODO iOS Item Button
// --------------------------------------------------
.item-ios .item-button {
@include padding(0, .5em);
@ -108,21 +117,6 @@
@include padding(0, 1px);
}
.item-ios ion-avatar[slot="start"],
.item-ios ion-thumbnail[slot="start"] {
@include margin(($item-ios-padding-end / 2), $item-ios-padding-end, ($item-ios-padding-end / 2), 0);
}
.item-ios ion-avatar[slot="end"],
.item-ios ion-thumbnail[slot="end"] {
@include margin(($item-ios-padding-end / 2));
}
.item-ios.item-label-stacked [slot="end"],
.item-ios.item-label-floating [slot="end"] {
@include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
}
// iOS Item Avatar
// --------------------------------------------------
@ -171,14 +165,7 @@
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
// If there is text with a color it should use this color
// and override whatever item sets it to
.item-ios .text-ios-#{$color-name} {
color: $color-base;
}
.item-ios-#{$color-name},
.item-divider-ios-#{$color-name} {
.item-ios-#{$color-name} {
color: $color-contrast;
background-color: $color-base;

94
packages/core/src/components/item/item.ios.vars.scss
View File

@ -4,70 +4,110 @@
// --------------------------------------------------
/// @prop - Font family of the item
$item-ios-font-family: $font-family-ios-base !default;
$item-ios-font-family: $font-family-ios-base !default;
/// @prop - Font size of the item
$item-ios-font-size: 17px !default;
$item-ios-font-size: 17px !default;
/// @prop - Margin top of the item paragraph
$item-ios-paragraph-margin-top: 0 !default;
$item-ios-paragraph-margin-top: 0 !default;
/// @prop - Margin end of the item paragraph
$item-ios-paragraph-margin-end: 0 !default;
$item-ios-paragraph-margin-end: 0 !default;
/// @prop - Margin bottom of the item paragraph
$item-ios-paragraph-margin-bottom: 2px !default;
$item-ios-paragraph-margin-bottom: 2px !default;
/// @prop - Margin start of the item paragraph
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
/// @prop - Font size of the item paragraph
$item-ios-paragraph-font-size: 14px !default;
$item-ios-paragraph-font-size: 14px !default;
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: #8e9093 !default;
$item-ios-paragraph-text-color: #8e9093 !default;
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px !default;
$item-ios-avatar-width: 36px !default;
/// @prop - Height of the avatar in the item
$item-ios-avatar-height: $item-ios-avatar-width !default;
$item-ios-avatar-height: $item-ios-avatar-width !default;
/// @prop - Width of the thumbnail in the item
$item-ios-thumbnail-width: 56px !default;
$item-ios-thumbnail-width: 56px !default;
/// @prop - Height of the thumbnail in the item
$item-ios-thumbnail-height: $item-ios-thumbnail-width !default;
$item-ios-thumbnail-height: $item-ios-thumbnail-width !default;
/// @prop - Shows the detail arrow icon on an item
$item-ios-detail-push-show: true !default;
$item-ios-detail-push-show: true !default;
/// @prop - Color of the detail arrow icon
$item-ios-detail-push-color: $list-ios-border-color !default;
$item-ios-detail-push-color: $list-ios-border-color !default;
/// @prop - Icon for the detail arrow
$item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>" !default;
$item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>" !default;
/// @prop - Padding top for the item content
$item-ios-padding-top: 11px !default;
$item-ios-padding-top: 11px !default;
/// @prop - Padding end for the item content
$item-ios-padding-end: 16px !default;
$item-ios-padding-end: 16px !default;
/// @prop - Padding bottom for the item content
$item-ios-padding-bottom: 11px !default;
$item-ios-padding-bottom: 11px !default;
/// @prop - Padding start for the item content
$item-ios-padding-start: 16px !default;
$item-ios-padding-start: 16px !default;
/// @prop - Padding top for the media content
$item-ios-padding-media-top: 8px !default;
/// @prop - Padding bottom for the media content
$item-ios-padding-media-bottom: 8px !default;
// Item Slots
// --------------------------------------------------
/// @prop - Padding top for the icon in an item
$item-ios-padding-icon-top: 9px !default;
/// @prop - Margin top for the start slot
$item-ios-slot-start-margin-top: 8px !default;
/// @prop - Padding bottom for the icon in an item
$item-ios-padding-icon-bottom: 8px !default;
/// @prop - Margin end for the start slot
$item-ios-slot-start-margin-end: $item-ios-padding-end !default;
/// @prop - Margin bottom for the start slot
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default;
/// @prop - Margin start for the start slot
$item-ios-slot-start-margin-start: 0 !default;
/// @prop - Margin top for the end slot
$item-ios-slot-end-margin-top: 8px !default;
/// @prop - Margin end for the end slot
$item-ios-slot-end-margin-end: ($item-ios-padding-start / 2) !default;
/// @prop - Margin bottom for the end slot
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default;
/// @prop - Margin start for the end slot
$item-ios-slot-end-margin-start: $item-ios-slot-end-margin-end !default;
/// @prop - Margin top for an icon in the start/end slot
$item-ios-icon-slot-margin-top: 9px !default;
/// @prop - Margin end for an icon in the start/end slot
$item-ios-icon-slot-margin-end: null !default;
/// @prop - Margin bottom for an icon in the start/end slot
$item-ios-icon-slot-margin-bottom: 8px !default;
/// @prop - Margin start for an icon in the start/end slot
$item-ios-icon-slot-margin-start: 0 !default;
/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-top: 6px !default;
/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-end: null !default;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default;
/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default;

63
packages/core/src/components/item/item.md.scss
View File

@ -89,29 +89,17 @@
}
// Material Design Item Media
// Material Design Item Slots
// --------------------------------------------------
.item-md [slot="start"],
.item-md [slot="end"] {
@include margin($item-md-padding-media-top, ($item-md-padding-end / 2), $item-md-padding-media-bottom, 0);
@include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
}
.item-md ion-icon[slot="start"],
.item-md ion-icon[slot="end"] {
@include margin($item-md-padding-icon-top, null, $item-md-padding-icon-bottom, 0);
}
.item-md .item-button {
@include padding(0, .6em);
height: 25px;
font-size: 12px;
}
.item-md .item-button ion-icon[slot="icon-only"] {
@include padding(0);
@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);
}
.item-md ion-icon[slot="start"] + .item-inner,
@ -131,10 +119,26 @@
.item-md.item-label-stacked [slot="end"],
.item-md.item-label-floating [slot="end"] {
@include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
@include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start);
}
// TODO Material Design Item Button
// --------------------------------------------------
.item-md .item-button {
@include padding(0, .6em);
height: 25px;
font-size: 12px;
}
.item-md .item-button ion-icon[slot="icon-only"] {
@include padding(0);
}
// Material Design Item Avatar
// --------------------------------------------------
@ -153,18 +157,20 @@
}
// Item reorder
// --------------------------------------------------
.item-md ion-reorder {
font-size: 1.5em;
opacity: .3;
}
// Generate Material Design Item and Item Divider Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
// If there is text with a color it should use this color
// and override whatever item sets it to
.item-md .text-md-#{$color-name} {
color: $color-base;
}
.item-md-#{$color-name},
.item-divider-md-#{$color-name} {
.item-md-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
@ -177,12 +183,3 @@
}
}
}
// Item reorder
// --------------------------------------------------
.item-md ion-reorder {
font-size: 1.5em;
opacity: .3;
}

44
packages/core/src/components/item/item.md.vars.scss
View File

@ -45,14 +45,42 @@ $item-md-padding-bottom: 13px !default;
/// @prop - Padding start for the item content
$item-md-padding-start: 16px !default;
/// @prop - Padding top for the media content
$item-md-padding-media-top: 9px !default;
/// @prop - Padding bottom for the media content
$item-md-padding-media-bottom: 9px !default;
// Item Slots
// --------------------------------------------------
/// @prop - Padding top for the icon in an item
$item-md-padding-icon-top: 11px !default;
/// @prop - Margin top for the start/end slot
$item-md-slot-margin-top: 9px !default;
/// @prop - Padding bottom for the icon in an item
$item-md-padding-icon-bottom: 10px !default;
/// @prop - Margin end for the start/end slot
$item-md-slot-margin-end: ($item-md-padding-end / 2) !default;
/// @prop - Margin bottom for the start/end slot
$item-md-slot-margin-bottom: 9px !default;
/// @prop - Margin start for the start/end slot
$item-md-slot-margin-start: 0 !default;
/// @prop - Margin top for an icon in the start/end slot
$item-md-icon-slot-margin-top: 11px !default;
/// @prop - Margin end for an icon in the start/end slot
$item-md-icon-slot-margin-end: null !default;
/// @prop - Margin bottom for an icon in the start/end slot
$item-md-icon-slot-margin-bottom: 10px !default;
/// @prop - Margin start for an icon in the start/end slot
$item-md-icon-slot-margin-start: 0 !default;
/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-top: 7px !default;
/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-end: null !default;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default;
/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default;

4
packages/core/src/components/radio/radio.ios.vars.scss
View File

@ -36,13 +36,13 @@ $radio-ios-item-start-margin-bottom: 8px !default;
$radio-ios-item-start-margin-start: 3px !default;
/// @prop - Margin top of the item-end in a radio
$radio-ios-item-end-margin-top: $item-ios-padding-media-top !default;
$radio-ios-item-end-margin-top: 8px !default;
/// @prop - Margin end of the item-end in a radio
$radio-ios-item-end-margin-end: 11px !default;
/// @prop - Margin bottom of the item-end in a radio
$radio-ios-item-end-margin-bottom: $item-ios-padding-media-bottom !default;
$radio-ios-item-end-margin-bottom: $radio-ios-item-end-margin-top !default;
/// @prop - Margin start of the item-end in a radio
$radio-ios-item-end-margin-start: ($item-ios-padding-start / 2) !default;

4
packages/core/src/components/radio/radio.md.vars.scss
View File

@ -48,13 +48,13 @@ $radio-md-item-start-margin-bottom: 10px !default;
$radio-md-item-start-margin-start: 4px !default;
/// @prop - Margin top of the item-end in a radio
$radio-md-item-end-margin-top: $item-md-padding-media-top !default;
$radio-md-item-end-margin-top: 9px !default;
/// @prop - Margin end of the item-end in a radio
$radio-md-item-end-margin-end: 10px !default;
/// @prop - Margin bottom of the item-end in a radio
$radio-md-item-end-margin-bottom: $item-md-padding-media-bottom !default;
$radio-md-item-end-margin-bottom: $radio-md-item-end-margin-top !default;
/// @prop - Margin start of the item-end in a radio
$radio-md-item-end-margin-start: 0 !default;