fixes to buttons and headers

build/minified/elements/header.min.css

@@ -1 +1 @@
-.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:inline-block;text-align:center}.ui.icon.header .icon{display:block;font-size:4em;margin:0 auto .2em}.ui.block.icon.header .icon{margin-bottom:0}
+.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{border-bottom:.2em solid #6ECFF5}.ui.black.block.header{border-bottom:.2em solid #5C6166}.ui.green.block.header{border-bottom:.2em solid #A1CF64}.ui.red.block.header{border-bottom:.2em solid #EF4D6D}.ui.purple.block.header{border-bottom:.2em solid #564F8A}.ui.teal.block.header{border-bottom:.2em solid #00B5AD}.ui.blue.dividing.header{border-bottom:.2em solid #6ECFF5}.ui.black.dividing.header{border-bottom:.2em solid #5C6166}.ui.green.dividing.header{border-bottom:.2em solid #A1CF64}.ui.red.dividing.header{border-bottom:.2em solid #EF4D6D}.ui.purple.dividing.header{border-bottom:.2em solid #564F8A}.ui.teal.dividing.header{border-bottom:.2em solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:inline-block;text-align:center}.ui.icon.header .icon{display:block;font-size:4em;margin:0 auto .2em}.ui.block.icon.header .icon{margin-bottom:0}

build/uncompressed/elements/button.css

@@ -474,6 +474,7 @@
 .ui.labeled.icon.button {
   position: relative;
   padding-left: 4em !important;
+  padding-right: 1.4em !important;
 }
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {
@@ -522,6 +523,14 @@
   border-radius: 0em;
   border-bottom-left-radius: 0.3125em;
 }
+.ui.right.labeled.icon.button {
+  padding-left: 1.4em !important;
+  padding-right: 4em !important;
+}
+.ui.right.labeled.icon.button .icon {
+  left: auto;
+  right: 0em;
+}
 /*--------------
      Toggle
 ---------------*/

build/uncompressed/elements/header.css

@@ -140,6 +140,36 @@ h5.ui.header {
 
   border-bottom: 0.2em solid #00B5AD;
 }
+.ui.blue.dividing.header {
+  /* background-color: #E6EEF1; */
+
+  border-bottom: 0.2em solid #6ECFF5;
+}
+.ui.black.dividing.header {
+  /* background-color: #EAEAEA; */
+
+  border-bottom: 0.2em solid #5C6166;
+}
+.ui.green.dividing.header {
+  /* background-color: #EFF8E4; */
+
+  border-bottom: 0.2em solid #A1CF64;
+}
+.ui.red.dividing.header {
+  /* background-color: #F6E5E8; */
+
+  border-bottom: 0.2em solid #EF4D6D;
+}
+.ui.purple.dividing.header {
+  /* background-color: #EFEDF8; */
+
+  border-bottom: 0.2em solid #564F8A;
+}
+.ui.teal.dividing.header {
+  /* background-color: #E9F7F6; */
+
+  border-bottom: 0.2em solid #00B5AD;
+}
 /*-------------------
       Inverted 
 --------------------*/

node/src/documents/elements/header.html

@@ -152,6 +152,34 @@ type   : 'UI Element'
       Teal
     </h5>
   </div>
+
+  <div class="example">
+    <h4 class="ui header">Dividing</h4>
+    <p>A header can be formatted to divide itself from the content below it</p>
+    <h5 class="ui dividing header">
+      Dividing
+    </h5>
+    <h5 class="ui black dividing header">
+      Black
+    </h5>
+    <h5 class="ui blue dividing header">
+      Blue
+    </h5>
+    <h5 class="ui red dividing header">
+      Red
+    </h5>
+    <h5 class="ui green dividing header">
+      Green
+    </h5>
+    <h5 class="ui purple dividing header">
+      Purple
+    </h5>
+    <h5 class="ui teal dividing header">
+      Teal
+    </h5>
+  </div>
+
+
   <div class="another example">
     <h5 class="ui black block header">
       Black
@@ -239,16 +267,6 @@ type   : 'UI Element'
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
   </div>
   
-<!--   
-<div class="example">
-  <h4 class="ui header">Dividing</h4>
-  <p>A header can be formatted to be displayed with a divider</p>
-  <h1 class="ui dividing header">
-    <i class="icon easel"></i>
-    Step 1
-  </h1>
-</div> -->
-  
   <div class="example">
     <h4 class="ui header">Attached</h4>
     <p>A header can be attached to other content</p>

node/src/files/components/semantic/elements/button.css

@@ -474,6 +474,7 @@
 .ui.labeled.icon.button {
   position: relative;
   padding-left: 4em !important;
+  padding-right: 1.4em !important;
 }
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {
@@ -522,6 +523,14 @@
   border-radius: 0em;
   border-bottom-left-radius: 0.3125em;
 }
+.ui.right.labeled.icon.button {
+  padding-left: 1.4em !important;
+  padding-right: 4em !important;
+}
+.ui.right.labeled.icon.button .icon {
+  left: auto;
+  right: 0em;
+}
 /*--------------
      Toggle
 ---------------*/

node/src/files/components/semantic/elements/header.css

@@ -140,6 +140,36 @@ h5.ui.header {
 
   border-bottom: 0.2em solid #00B5AD;
 }
+.ui.blue.dividing.header {
+  /* background-color: #E6EEF1; */
+
+  border-bottom: 0.2em solid #6ECFF5;
+}
+.ui.black.dividing.header {
+  /* background-color: #EAEAEA; */
+
+  border-bottom: 0.2em solid #5C6166;
+}
+.ui.green.dividing.header {
+  /* background-color: #EFF8E4; */
+
+  border-bottom: 0.2em solid #A1CF64;
+}
+.ui.red.dividing.header {
+  /* background-color: #F6E5E8; */
+
+  border-bottom: 0.2em solid #EF4D6D;
+}
+.ui.purple.dividing.header {
+  /* background-color: #EFEDF8; */
+
+  border-bottom: 0.2em solid #564F8A;
+}
+.ui.teal.dividing.header {
+  /* background-color: #E9F7F6; */
+
+  border-bottom: 0.2em solid #00B5AD;
+}
 /*-------------------
       Inverted 
 --------------------*/

src/elements/button.less

@@ -584,6 +584,7 @@
 .ui.labeled.icon.button {
   position: relative;
   padding-left: 4em !important;
+  padding-right: 1.4em !important;
 }
 
 .ui.labeled.icon.buttons > .button > .icon,
@@ -640,6 +641,15 @@
   border-bottom-left-radius: 0.3125em;
 }
 
+.ui.right.labeled.icon.button {
+  padding-left: 1.4em !important;
+  padding-right: 4em !important;
+}
+.ui.right.labeled.icon.button .icon {
+  left: auto;
+  right: 0em;
+}
+
 /*--------------
      Toggle
 ---------------*/

src/elements/header.less

@@ -154,6 +154,31 @@ h5.ui.header {
   border-bottom: 0.2em solid #00B5AD;
 }
 
+.ui.blue.dividing.header {
+  /* background-color: #E6EEF1; */
+  border-bottom: 0.2em solid #6ECFF5;
+}
+.ui.black.dividing.header {
+  /* background-color: #EAEAEA; */
+  border-bottom: 0.2em solid #5C6166;
+}
+.ui.green.dividing.header {
+  /* background-color: #EFF8E4; */
+  border-bottom: 0.2em solid #A1CF64;
+}
+.ui.red.dividing.header {
+  /* background-color: #F6E5E8; */
+  border-bottom: 0.2em solid #EF4D6D;
+}
+.ui.purple.dividing.header {
+  /* background-color: #EFEDF8; */
+  border-bottom: 0.2em solid #564F8A;
+}
+.ui.teal.dividing.header {
+  /* background-color: #E9F7F6; */
+  border-bottom: 0.2em solid #00B5AD;
+}
+
 /*-------------------
       Inverted 
 --------------------*/