Adds more attached label styles

Former-commit-id: 81134fea7a
Former-commit-id: 45957ade36

build/minified/elements/segment.min.css

@@ -1 +1 @@
-.ui.segment{position:relative;background-color:#FFF;-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);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 -1px 0 rgba(0,0,0,.1);box-shadow:0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;padding-top:0;padding-bottom:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1)}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child+*{margin-top:0}.ui.disabled.segment{opacity:.8;color:#DDD}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.fitted.segment{padding:0}.ui.blue.segment{border-top:.2em solid #6ECFF5}.ui.green.segment{border-top:.2em solid #A1CF64}.ui.red.segment{border-top:.2em solid #EF4D6D}.ui.purple.segment{border-top:.2em solid #564F8A}.ui.teal.segment{border-top:.2em solid #00B5AD}.ui.inverted.black.segment{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.segment{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.segment{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.segment{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.segment{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.segment{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.7em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:rgba(0,0,0,.02);width:100%;height:5px;visibility:visible}.ui.stacked.segment:before{bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before{background-color:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.35)}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.secondary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3)));background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);color:#FAFAFA}.ui.tertiary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6)));background-image:-webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);color:#EEE}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
+.ui.segment{position:relative;background-color:#FFF;-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);margin:1em 0;padding:1.3em 1em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.segment:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ui.vertical.segment{margin:0;padding-left:0;padding-right:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 -1px 0 rgba(0,0,0,.1);box-shadow:0 -1px 0 rgba(0,0,0,.1)}.ui.horizontal.segment{margin:0;padding-top:0;padding-bottom:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);-moz-box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1);box-shadow:1px 0 0 rgba(0,0,0,.1),-1px 0 0 rgba(0,0,0,.1)}.ui.segment>:first-child{margin-top:0}.ui.segment>:last-child{margin-bottom:0}.ui.segment>:only-child{margin:0}.ui.segment>.attached.label:first-child+*{margin-top:2em}.ui.segment>.bottom.attached.label:first-child~:last-child{margin-top:0;margin-bottom:2em}.ui.disabled.segment{opacity:.8;color:#DDD}.ui.basic.segment{position:relative;background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.fitted.segment{padding:0}.ui.blue.segment{border-top:.2em solid #6ECFF5}.ui.green.segment{border-top:.2em solid #A1CF64}.ui.red.segment{border-top:.2em solid #EF4D6D}.ui.purple.segment{border-top:.2em solid #564F8A}.ui.teal.segment{border-top:.2em solid #00B5AD}.ui.inverted.black.segment{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.segment{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.segment{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.segment{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.segment{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.segment{background-color:#00B5AD!important;color:#FFF!important}.ui.left.aligned.segment{text-align:left}.ui.right.aligned.segment{text-align:right}.ui.center.aligned.segment{text-align:center}.ui.floated.segment,.ui.left.floated.segment{float:left}.ui.right.floated.segment{float:right}.ui.stacked.segment{padding-bottom:1.7em}.ui.stacked.segment:after,.ui.stacked.segment:before{content:'';position:absolute;bottom:-3px;left:0;border-top:1px solid rgba(0,0,0,.1);background-color:rgba(0,0,0,.02);width:100%;height:5px;visibility:visible}.ui.stacked.segment:before{bottom:0}.ui.stacked.inverted.segment:after,.ui.stacked.inverted.segment:before{background-color:rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.35)}.ui.raised.segment{-webkit-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);-moz-box-shadow:0 1px 2px 1px rgba(0,0,0,.1);box-shadow:0 1px 2px 1px rgba(0,0,0,.1)}.ui.inverted.segment{border:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.segment,.ui.primary.inverted.segment{background-color:#555;color:#FFF}.ui.primary.segment{background-color:#FFF;color:#555}.ui.secondary.segment{background-color:#F5F5F5;color:#777}.ui.tertiary.segment{background-color:#EBEBEB;color:#B0B0B0}.ui.secondary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.3)),to(rgba(255,255,255,.3)));background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);background-image:linear-gradient(rgba(255,255,255,.3) 0,rgba(255,255,255,.3) 100%);color:#FAFAFA}.ui.tertiary.inverted.segment{background-color:#555;background-image:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.6)),to(rgba(255,255,255,.6)));background-image:-webkit-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-moz-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:-o-linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);background-image:linear-gradient(rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 100%);color:#EEE}.ui.segment.attached{top:-1px;bottom:-1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;margin:0;-moz-box-shadow:0 0 0 1px #DDD;-webkit-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.top.attached.segment{top:0;bottom:-1px;margin-top:0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.segment.bottom.attached{top:-1px;bottom:0;margin-bottom:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-41c98cd29c136dbfef76ec076e26ccd418f0d500
+d64464d2e870d221cde35b2624c0c974bbb88692

build/uncompressed/elements/label.css

@@ -22,6 +22,10 @@
   -webkit-border-radius: 0.325em;
   -moz-border-radius: 0.325em;
   border-radius: 0.325em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-transition: background 0.1s linear
   ;
   -moz-transition: background 0.1s linear
@@ -138,23 +142,40 @@ a.ui.label:hover:before {
 /*-------------------
        Attached
 --------------------*/
+.ui.top.attached.label,
 .ui.attached.label {
+  width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+}
+.ui.bottom.attached.label {
+  top: auto;
+  bottom: 0px;
+  -webkit-border-radius: 4px 0px 0px 0px;
+  -moz-border-radius: 4px 0px 0px 0px;
+  border-radius: 4px 0px 0px 0px;
+}
+.ui.top.left.attached.label {
+  width: auto;
   margin-top: 0px !important;
   -webkit-border-radius: 4px 0px 0px 0px;
   -moz-border-radius: 4px 0px 0px 0px;
   border-radius: 4px 0px 0px 0px;
 }
-.ui.right.attached.label {
+.ui.top.right.attached.label {
+  width: auto;
   left: auto;
   right: 0px;
   -webkit-border-radius: 0px 4px 0px 0px;
   -moz-border-radius: 0px 4px 0px 0px;
   border-radius: 0px 4px 0px 0px;
 }
-.ui.bottom.attached.label {
+.ui.bottom.left.attached.label {
+  width: auto;
   top: auto;
   bottom: 0px;
   -webkit-border-radius: 0px 0px 0px 4px;
@@ -162,6 +183,7 @@ a.ui.label:hover:before {
   border-radius: 0px 0px 0px 4px;
 }
 .ui.bottom.right.attached.label {
+  width: auto;
   -webkit-border-radius: 0px 0px 4px 0px;
   -moz-border-radius: 0px 0px 4px 0px;
   border-radius: 0px 0px 4px 0px;

build/uncompressed/elements/segment.css

@@ -76,8 +76,9 @@
 .ui.segment > .attached.label:first-child + * {
   margin-top: 2em;
 }
-.ui.segment > .bottom.attached.label:first-child + * {
+.ui.segment > .bottom.attached.label:first-child ~ :last-child {
   margin-top: 0em;
+  margin-bottom: 2em;
 }
 /*******************************
             States

node/src/documents/elements/label.html

@@ -177,12 +177,47 @@ type   : 'UI Element'
   <div class="example">
     <h4 class="ui header">Attached Label</h4>
     <p>A label attached to a content segment</p>
-    <div class="ui segment">
-      <div class="ui attached label">Top Left</div>
-      <div class="ui right attached label">Top Right</div>
-      <div class="ui bottom attached label">Bottom Left</div>
-      <div class="ui bottom right attached label">Bottom Right</div>
-      <p style="margin:40px 0px;">Hey let's look at labels.</p>
+    <div class="ui three column grid">
+      <div class="row">
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui top attached label">HTML</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui bottom attached label">CSS</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui top right attached label">Code</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui top left attached label">View</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui bottom left attached label">User View</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+        <div class="column">
+          <div class="ui segment">
+            <div class="ui bottom right attached label">Admin View</div>
+            <p>This is some pretend content</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 

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

@@ -22,6 +22,10 @@
   -webkit-border-radius: 0.325em;
   -moz-border-radius: 0.325em;
   border-radius: 0.325em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-transition: background 0.1s linear
   ;
   -moz-transition: background 0.1s linear
@@ -138,23 +142,40 @@ a.ui.label:hover:before {
 /*-------------------
        Attached
 --------------------*/
+.ui.top.attached.label,
 .ui.attached.label {
+  width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
+}
+.ui.bottom.attached.label {
+  top: auto;
+  bottom: 0px;
+  -webkit-border-radius: 4px 0px 0px 0px;
+  -moz-border-radius: 4px 0px 0px 0px;
+  border-radius: 4px 0px 0px 0px;
+}
+.ui.top.left.attached.label {
+  width: auto;
   margin-top: 0px !important;
   -webkit-border-radius: 4px 0px 0px 0px;
   -moz-border-radius: 4px 0px 0px 0px;
   border-radius: 4px 0px 0px 0px;
 }
-.ui.right.attached.label {
+.ui.top.right.attached.label {
+  width: auto;
   left: auto;
   right: 0px;
   -webkit-border-radius: 0px 4px 0px 0px;
   -moz-border-radius: 0px 4px 0px 0px;
   border-radius: 0px 4px 0px 0px;
 }
-.ui.bottom.attached.label {
+.ui.bottom.left.attached.label {
+  width: auto;
   top: auto;
   bottom: 0px;
   -webkit-border-radius: 0px 0px 0px 4px;
@@ -162,6 +183,7 @@ a.ui.label:hover:before {
   border-radius: 0px 0px 0px 4px;
 }
 .ui.bottom.right.attached.label {
+  width: auto;
   -webkit-border-radius: 0px 0px 4px 0px;
   -moz-border-radius: 0px 0px 4px 0px;
   border-radius: 0px 0px 4px 0px;

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

@@ -76,8 +76,9 @@
 .ui.segment > .attached.label:first-child + * {
   margin-top: 2em;
 }
-.ui.segment > .bottom.attached.label:first-child + * {
+.ui.segment > .bottom.attached.label:first-child ~ :last-child {
   margin-top: 0em;
+  margin-bottom: 2em;
 }
 /*******************************
             States

src/elements/label.less

@@ -28,6 +28,11 @@
   -moz-border-radius: 0.325em;
   border-radius: 0.325em;
 
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
   -webkit-transition:
     background 0.1s linear
   ;
@@ -183,17 +188,36 @@ a.ui.label:hover:before {
        Attached
 --------------------*/
 
+.ui.top.attached.label,
 .ui.attached.label {
+  width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;  
+}
+.ui.bottom.attached.label {
+  top: auto;
+  bottom: 0px;
+
+  -webkit-border-radius: 4px 0px 0px 0px;
+  -moz-border-radius: 4px 0px 0px 0px;
+  border-radius: 4px 0px 0px 0px;  
+}
+
+.ui.top.left.attached.label {
+  width: auto;
   margin-top: 0px !important;
 
   -webkit-border-radius: 4px 0px 0px 0px;
   -moz-border-radius: 4px 0px 0px 0px;
-  border-radius: 4px 0px 0px 0px;
+  border-radius: 4px 0px 0px 0px;  
 }
-.ui.right.attached.label {
+
+.ui.top.right.attached.label {
+  width: auto;
   left: auto;
   right: 0px;
 
@@ -201,7 +225,8 @@ a.ui.label:hover:before {
   -moz-border-radius: 0px 4px 0px 0px;
   border-radius: 0px 4px 0px 0px;
 }
-.ui.bottom.attached.label {
+.ui.bottom.left.attached.label {
+  width: auto;
   top: auto;
   bottom: 0px;
 
@@ -210,6 +235,7 @@ a.ui.label:hover:before {
   border-radius: 0px 0px 0px 4px;
 }
 .ui.bottom.right.attached.label {
+  width: auto;
   -webkit-border-radius: 0px 0px 4px 0px;
   -moz-border-radius: 0px 0px 4px 0px;
   border-radius: 0px 0px 4px 0px;

src/elements/segment.less

@@ -111,8 +111,9 @@
 .ui.segment > .attached.label:first-child + * {
   margin-top: 2em;
 }
-.ui.segment > .bottom.attached.label:first-child + * {
+.ui.segment > .bottom.attached.label:first-child ~ :last-child {
   margin-top: 0em;
+  margin-bottom: 2em;
 }
 
 /*******************************