Merge pull request #21 from jgiardino/card

Included component for an icon with a circle around it, in small, med…
patternfly · Nov 2, 2016 · 350c57d · 350c57d
2 parents fdeb1da + c1949f8
commit 350c57d
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 1 deletion.
diff --git a/source/_patterns/basics/03-icons/00-icon.hbs b/source/_patterns/basics/03-icons/00-icon.hbs
@@ -1 +1 @@
-<span class="{{ iconFamily }} {{ iconName }}"></span>
+<span class="{{ iconFamily }} {{ iconName }} {{iconModifier}}"></span>
diff --git a/source/_patterns/basics/03-icons/01-icon-sizes.hbs b/source/_patterns/basics/03-icons/01-icon-sizes.hbs
@@ -0,0 +1,2 @@
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--md" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--lg" }}
diff --git a/source/_patterns/basics/03-icons/01-icon-sizes.md b/source/_patterns/basics/03-icons/01-icon-sizes.md
@@ -0,0 +1,15 @@
+---
+title: PatternFly Icon with Circle Decorator
+---
+
+## Overview
+
+PatternFly icons can display at larger sizes as shown in the [Aggregate Status Card](http://www.patternfly.org/pattern-library/cards/aggregate-status-card/#/api) or the [Card View Variations](http://www.patternfly.org/pattern-library/content-views/card-view/#/api).
+
+
+## Usage
+
+| Class | Usage |
+| -- | -- |
+| `.pf-icon--md` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a medium icon  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
+| `.pf-icon--lg` **Applied to:** `.pficon` or `.fa` |  **Outcome:** Displays a large icon  **Required:** Yes **Remarks:** Always use it with an icon family and icon name class. |
diff --git a/source/_patterns/basics/03-icons/02-icon-circle.hbs b/source/_patterns/basics/03-icons/02-icon-circle.hbs
@@ -0,0 +1,3 @@
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--md" }}
+{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--circle pf-icon--lg" }}
diff --git a/source/_patterns/basics/03-icons/02-icon-circle.md b/source/_patterns/basics/03-icons/02-icon-circle.md
@@ -0,0 +1,14 @@
+---
+title: PatternFly Icon with Circle Decorator
+---
+
+## Overview
+
+Some PatternFly patterns display an icon with a circle arount it. For example, in the [list view](http://www.patternfly.org/pattern-library/content-views/list-view/#/api) or [card view](http://www.patternfly.org/pattern-library/content-views/card-view/#/api).
+
+
+## Usage
+
+| Class | Usage |
+| -- | -- |
+| `.pf-icon--circle` **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. Can be used with any size icon. |
diff --git a/source/scss/_pf-basic-icons.scss b/source/scss/_pf-basic-icons.scss
@@ -219,3 +219,21 @@
 .#{$pf-icon-prefix}-zone:before {
   content: $pficon-var-zone;
 }
+// Display icon at large or medium size
+.pf-icon--lg {
+  font-size: $icon-size-lg;
+}
+.pf-icon--md {
+  font-size: $icon-size-md;
+}
+// Display circle around the icon
+// width/height value should be 4px (i.e. 2 x border-width) greater than
+// line-height value to accommodate 2px border on each side
+.pf-icon--circle {
+  width: calc(2em + 4px);
+  height: calc(2em + 4px);
+  line-height: 2em;
+  text-align: center;
+  border: 2px solid $color-pf-blue-300;
+  border-radius: 50%;
+}
diff --git a/source/scss/_pf-basic-variables.scss b/source/scss/_pf-basic-variables.scss
@@ -261,6 +261,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
 //
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<span class="{{ iconFamily }} {{ iconName }}"></span>
		<span class="{{ iconFamily }} {{ iconName }} {{iconModifier}}"></span>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--md" }}
		{{> basics-icon iconFamily="pficon" iconName="pficon-middleware" iconModifier="pf-icon--lg" }}