updated values defined for circle icon

patternfly · Oct 31, 2016 · 1e3d177 · 1e3d177
1 parent 714122b
commit 1e3d177
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/source/_patterns/basics/03-icons/00-icon-circle.hbs b/source/_patterns/basics/03-icons/00-icon-circle.hbs
@@ -1,3 +1,3 @@
-{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-sm" }}
-{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-md" }}
-{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pficon-circle-lg" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-base" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-md" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconDecoration="pf-icon-circle-lg" }}
diff --git a/source/_patterns/basics/03-icons/00-icon-circle.md b/source/_patterns/basics/03-icons/00-icon-circle.md
@@ -11,6 +11,6 @@ Some PatternFly patterns display an icon with a circle arount it. For example, i
 
 | Class | Usage |
 | -- | -- |
-| `.pficon-circle-sm` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a small icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
-| `.pficon-circle-md` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a medium icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
-| `.pficon-circle-lg` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a small icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pf-icon-circle-base` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays an icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pf-icon-circle-md` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a medium icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pf-icon-circle-lg` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a small icon with a circle around it  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss
@@ -219,23 +219,12 @@
 .#{$pf-icon-prefix}-zone:before {
   content: $pficon-var-zone;
 }
-
-@mixin pficon-circle($width-height, $font-size, $line-height) {
-  width: $width-height;
-  height: $width-height;
-  font-size: $font-size;
-  line-height: $line-height;
-  text-align: center;
-  border: 2px solid $color-pf-blue-300;
-  border-radius: 50%;
-}
-// line-height value should be 4px less than width-height value to accommodate 2px border on each side
-.pficon-circle-lg {
-  @include pficon-circle(106px, 46px, 102px);
-}
-.pficon-circle-md {
-  @include pficon-circle(54px, 23px, 50px);
-}
-.pficon-circle-sm {
-  @include pficon-circle(calc(2rem + 4px), $font-size-relative-base, 2rem);
+.pf-icon-circle-lg {
+  @include pf-icon-circle($icon-size-lg);
+}
+.pf-icon-circle-md {
+  @include pf-icon-circle($icon-size-md);
+}
+.pf-icon-circle-base {
+  @include pf-icon-circle($font-size-relative-base);
 }
diff --git a/source/scss/_pf-basic-mixins.scss b/source/scss/_pf-basic-mixins.scss
@@ -65,3 +65,15 @@
     }
   }
 }
+// Display circle around the icon
+@mixin pf-icon-circle($font-size) {
+  width: calc(2em + 4px);
+  height: calc(2em + 4px);
+  font-size: $font-size;
+  line-height: 2em;
+  text-align: center;
+  border: 2px solid $color-pf-blue-300;
+  border-radius: 50%;
+}
+// width/height value should be 4px (i.e. 2 x border-width) greater than
+// line-height value to accommodate 2px border on each side
diff --git a/source/scss/_pf-basic-variables.scss b/source/scss/_pf-basic-variables.scss
@@ -257,6 +257,9 @@ $line-height-base: 1.66666667;
 
 $headings-font-weight: $pf-font-weight-bold;
 
+$icon-size-lg: 3.3rem;
+$icon-size-md: 1.75rem;
+
 
 // Overwrites default border radius
 //