diff --git a/scss/_items.scss b/scss/_items.scss index fa05fe7c33..e65ec6f97f 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -308,9 +308,10 @@ a.item-content { position: absolute; top: $item-padding / 2; left: $item-padding / 2; - min-width: initial; - min-height: $item-icon-font-size; - font-size: $item-icon-font-size; + min-width: $item-icon-font-size + ($button-border-width * 2); + min-height: $item-icon-font-size + ($button-border-width * 2); + font-size: $item-button-font-size; + line-height: $item-button-line-height; .icon:before { position: relative; @@ -318,6 +319,13 @@ a.item-content { width: auto; line-height: $item-icon-font-size - 1; } + + > .button { + margin: 0px 2px; + min-height: $item-icon-font-size + ($button-border-width * 2); + font-size: $item-button-font-size; + line-height: $item-button-line-height; + } } .item-button-right, @@ -335,9 +343,10 @@ button.item.item-button-right { position: absolute; top: $item-padding / 2; right: $item-padding; - min-width: initial; - min-height: $item-icon-font-size; - font-size: $item-icon-font-size; + min-width: $item-icon-font-size + ($button-border-width * 2); + min-height: $item-icon-font-size + ($button-border-width * 2); + font-size: $item-button-font-size; + line-height: $item-button-line-height; .icon:before { position: relative; @@ -348,8 +357,10 @@ button.item.item-button-right { > .button { margin: 0px 2px; - min-height: $item-icon-font-size; - font-size: $item-icon-font-size; + min-width: $item-icon-font-size + ($button-border-width * 2); + min-height: $item-icon-font-size + ($button-border-width * 2); + font-size: $item-button-font-size; + line-height: $item-button-line-height; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1955333040..5501687882 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -285,6 +285,8 @@ $item-font-size: 16px; $item-border-width: 1px !default; $item-padding: 15px !default; +$item-button-font-size: 18px !default; +$item-button-line-height: 32px !default; $item-icon-font-size: 32px !default; $item-icon-fill-font-size: 28px !default; diff --git a/test/lists.html b/test/lists.html index d6dadbb7d2..172ec82748 100644 --- a/test/lists.html +++ b/test/lists.html @@ -64,12 +64,26 @@
- Call Ma + Left Icon and Right Button
+
+ Right Button + +
+ +
+ Right Button Text + +
+
Call Ma