diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss index 61b3b857af..de8be69742 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.vars.scss @@ -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; diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss index da794afa30..408a4cd4df 100644 --- a/packages/core/src/components/checkbox/checkbox.md.vars.scss +++ b/packages/core/src/components/checkbox/checkbox.md.vars.scss @@ -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; diff --git a/packages/core/src/components/item-divider/item-divider.ios.scss b/packages/core/src/components/item-divider/item-divider.ios.scss index ba26ad236f..d049ad2de3 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.scss +++ b/packages/core/src/components/item-divider/item-divider.ios.scss @@ -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 // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss index f34889c3aa..ca8c387916 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.ios.vars.scss @@ -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; diff --git a/packages/core/src/components/item-divider/item-divider.md.scss b/packages/core/src/components/item-divider/item-divider.md.scss index 164f2a2f33..37d7a8a0fc 100644 --- a/packages/core/src/components/item-divider/item-divider.md.scss +++ b/packages/core/src/components/item-divider/item-divider.md.scss @@ -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 // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss index 9a24d4ae4e..1bd0c532f8 100644 --- a/packages/core/src/components/item-divider/item-divider.md.vars.scss +++ b/packages/core/src/components/item-divider/item-divider.md.vars.scss @@ -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; diff --git a/packages/core/src/components/item-divider/item-divider.scss b/packages/core/src/components/item-divider/item-divider.scss index bb31a445ac..c444db2687 100644 --- a/packages/core/src/components/item-divider/item-divider.scss +++ b/packages/core/src/components/item-divider/item-divider.scss @@ -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; +} \ No newline at end of file diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx index eba1caf13c..2c37899d03 100644 --- a/packages/core/src/components/item-divider/item-divider.tsx +++ b/packages/core/src/components/item-divider/item-divider.tsx @@ -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 [ , -
-
+
+
diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss index 8f06b10d17..1021b69ac5 100644 --- a/packages/core/src/components/item/item.ios.scss +++ b/packages/core/src/components/item/item.ios.scss @@ -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; diff --git a/packages/core/src/components/item/item.ios.vars.scss b/packages/core/src/components/item/item.ios.vars.scss index 2ffd935087..2c364aa620 100644 --- a/packages/core/src/components/item/item.ios.vars.scss +++ b/packages/core/src/components/item/item.ios.vars.scss @@ -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: "" !default; +$item-ios-detail-push-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; diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss index 33ea679965..720010131c 100644 --- a/packages/core/src/components/item/item.md.scss +++ b/packages/core/src/components/item/item.md.scss @@ -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; -} diff --git a/packages/core/src/components/item/item.md.vars.scss b/packages/core/src/components/item/item.md.vars.scss index 4ef284f05e..aaa597ea2c 100644 --- a/packages/core/src/components/item/item.md.vars.scss +++ b/packages/core/src/components/item/item.md.vars.scss @@ -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; diff --git a/packages/core/src/components/radio/radio.ios.vars.scss b/packages/core/src/components/radio/radio.ios.vars.scss index 53b74b9f2d..c143f2c49e 100644 --- a/packages/core/src/components/radio/radio.ios.vars.scss +++ b/packages/core/src/components/radio/radio.ios.vars.scss @@ -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; diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss index d5ec8245e5..0372c76d57 100644 --- a/packages/core/src/components/radio/radio.md.vars.scss +++ b/packages/core/src/components/radio/radio.md.vars.scss @@ -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;