Real 0.9.5, adds circular segment variation

RELEASE NOTES.md

@@ -2,6 +2,9 @@
 
 ### Version 0.9.5 - Nov 25, 2013
 
+**New**
+- **Segment** - Segments now have a circular variation
+
 **Fixes**
 - LESS files now include vendor prefixes by default instead of only including them in css releases
 

build/less/elements/segment.less

@@ -191,6 +191,18 @@
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

build/packaged/css/semantic.css

@@ -11162,6 +11162,18 @@ a.ui.teal.label:hover:before {
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

build/uncompressed/elements/segment.css

@@ -190,6 +190,18 @@
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

rtl/less/elements/segment.less

@@ -191,6 +191,18 @@
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

rtl/packaged/css/semantic.css

@@ -11162,6 +11162,18 @@ a.ui.teal.label:hover:before {
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

rtl/uncompressed/elements/segment.css

@@ -190,6 +190,18 @@
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/

server/documents/elements/header.html.eco

@@ -140,7 +140,7 @@ type        : 'UI Element'
       </h3>
     </div>
   </div>
-  <div class="example">
+  <div class="clearing example">
     <h4 class="ui header">Text Alignment</h4>
     <p>A header can have its text aligned to a side</p>
     <div class="ui segment">

server/documents/elements/image.html.eco

@@ -78,7 +78,7 @@ type        : 'UI Element'
     </div>
   </div>
 
-  <div class="example">
+  <div class="clearing example">
     <h4 class="ui header">Sizes</h4>
     <p>An image may be formatted to be different sizes</p>
     <img class="ui tiny image" src="/images/demo/photo2.jpg">

server/documents/elements/segment.html.eco

@@ -172,6 +172,26 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Circular</h4>
+    <p>A segment can be circular</p>
+    <div class="ui ignored info message">A circular segment will most likely have to have its content manually sized to be equal width and height, otherwise it will flow to the size of your content</div>
+    <div class="ui circular segment">
+      <h2 class="ui header">
+        Buy Now
+        <div class="sub header">$10.99</div>
+      </h2>
+    </div>
+    <div class="ui inverted circular segment">
+      <h2 class="ui inverted header">
+        Buy Now
+        <div class="sub header">$10.99</div>
+      </h2>
+    </div>
+  </div>
+  <div class="another example">
+  </div>
+
   <div class="example">
     <h4 class="ui header">Floated</h4>
     <p>A segment cant sit to the left or right of other content</p>
@@ -183,7 +203,7 @@ type        : 'UI Element'
     </div>
   </div>
 
-  <div class="example">
+  <div class="clearing example">
     <h4 class="ui header">Text Alignment</h4>
     <p>A segment cant have its text aligned to a side</p>
     <div class="ui right aligned segment">

server/documents/views/list.html.eco

@@ -203,7 +203,7 @@ type        : 'UI View'
     </div>
   </div>
 
-  <div class="example">
+  <div class="clearing example">
     <h4 class="ui header">Link</h4>
     <p>A list can contain items that link</p>
     <div class="ui list">

server/files/stylesheets/semantic.css

@@ -593,6 +593,10 @@ body.guide .main.container > * {
 #example .ui.tab.segment {
   padding: 1.5em 2em;
 }
+#example .example .circular.segment {
+  width: 175px;
+  height: 175px;
+}
 
 #example.popup .example .popup {
   color: #FF0000;

src/elements/segment.less

@@ -232,6 +232,18 @@
   border-top: 1px solid rgba(255, 255, 255, 0.35);
 }
 
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.segment {
+  display: table-cell;
+  padding: 2em;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 500em;
+}
+
 /*-------------------
        Raised
 --------------------*/