fixes to buttons and headers

Former-commit-id: 988b88d6a55ceb48df12e9ea0d97f48bf4e653c0
Former-commit-id: e3ea5bf8ad7cb1c4d2e095c15ed54babe91d1611

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/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-d093c4ae54a431ee4928a1846f4089cd74630b69
+57ef2f35774351178c0dd16efc8aa3dd622e0dc5

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 
 --------------------*/