Add example for attached header, fix issues with attached header given new attached system #2798

examples/attached.html

@@ -15,6 +15,7 @@
   <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
 
+  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/table.css">
   <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
@@ -218,6 +219,43 @@
 
 <div class="ui text container">
 
+  <h2 class="ui header">Header Groups</h2>
+
+  <h4 class="ui top attached block header">
+    Top Block Header
+  </h4>
+  <div class="ui bottom attached segment">
+    Segment
+  </div>
+
+  <div class="ui section divider"></div>
+
+  <div class="ui top attached segment">
+    Segment
+  </div>
+  <h4 class="ui bottom attached block header">
+    Bottom Block Header
+  </h4>
+
+  <div class="ui section divider"></div>
+
+  <h4 class="ui top attached block header">
+    Top Block Header
+  </h4>
+  <div class="ui attached segment">
+    Segment
+  </div>
+  <h4 class="ui attached block header">
+    Middle Block Header
+  </h4>
+  <div class="ui attached segment">
+    Segment
+  </div>
+  <h4 class="ui bottom attached block header">
+    Bottom Block Header
+  </h4>
+
+
   <h2 class="ui header">Mixed Attached Content</h2>
 
   <div class="ui section divider"></div>

src/definitions/elements/header.less

@@ -667,12 +667,10 @@ a.ui.inverted.grey.header:hover {
   margin-top: 0em;
   margin-bottom: 0em;
   border-top: none;
-  border-bottom: none;
   border-radius: 0em;
 }
 .ui.top.attached.header {
   margin-bottom: 0em;
-  border-bottom: none;
   border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
 }
 .ui.bottom.attached.header {