feat(item): add sass variable to override avatar border radius

closes #10763
ionic-team · Apr 6, 2017 · b0dc856 · b0dc856
1 parent 8e43863
commit b0dc856
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
@@ -18,6 +18,9 @@ $item-ios-paragraph-text-color:           #8e9093 !default;
 /// @prop - Size of the avatar in the item
 $item-ios-avatar-size:                    36px !default;
 
+/// @prop - Border radius of the avatar in the item
+$item-ios-avatar-border-radius:           50% !default;
+
 /// @prop - Size of the thumbnail in the item
 $item-ios-thumbnail-size:                 56px !default;
 
@@ -170,7 +173,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
   width: $item-ios-avatar-size;
   height: $item-ios-avatar-size;
 
-  border-radius: 50%;
+  border-radius: $item-ios-avatar-border-radius;
 
   overflow: hidden;
 }

diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
@@ -18,6 +18,9 @@ $item-md-font-size:                  1.6rem !default;
 /// @prop - Size of the avatar in the item
 $item-md-avatar-size:                40px !default;
 
+/// @prop - Border radius of the avatar in the item
+$item-md-avatar-border-radius:       50% !default;
+
 /// @prop - Size of the thumbnail in the item
 $item-md-thumbnail-size:             80px !default;
 
@@ -192,7 +195,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
   width: $item-md-avatar-size;
   height: $item-md-avatar-size;
 
-  border-radius: 50%;
+  border-radius: $item-md-avatar-border-radius;
 
   overflow: hidden;
 }

diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
@@ -24,6 +24,9 @@ $item-wp-font-size:                  1.6rem !default;
 /// @prop - Size of the avatar in the item
 $item-wp-avatar-size:                40px !default;
 
+/// @prop - Border radius of the avatar in the item
+$item-wp-avatar-border-radius:       50% !default;
+
 /// @prop - Size of the thumbnail in the item
 $item-wp-thumbnail-size:             80px !default;
 
@@ -204,7 +207,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
   width: $item-wp-avatar-size;
   height: $item-wp-avatar-size;
 
-  border-radius: 50%;
+  border-radius: $item-wp-avatar-border-radius;
 }