From c276634239eed17323307979d9501543b46e9973 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Thu, 30 May 2013 11:17:48 -0400 Subject: [PATCH] Adds more attached label styles Former-commit-id: 81134fea7a6b0c383a14e2f8033bef05146fff62 Former-commit-id: 45957ade363fabc8328b08aedf8c5a8db3c8ce26 --- build/minified/elements/label.min.css | 2 +- build/minified/elements/segment.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/elements/label.css | 26 +++++++++- build/uncompressed/elements/segment.css | 3 +- node/src/documents/elements/label.html | 47 ++++++++++++++++--- .../components/semantic/elements/label.css | 26 +++++++++- .../components/semantic/elements/segment.css | 3 +- src/elements/label.less | 32 +++++++++++-- src/elements/segment.less | 3 +- 10 files changed, 127 insertions(+), 19 deletions(-) diff --git a/build/minified/elements/label.min.css b/build/minified/elements/label.min.css index ce5992271..e805383ac 100644 --- a/build/minified/elements/label.min.css +++ b/build/minified/elements/label.min.css @@ -1 +1 @@ -.ui.label{display:inline-block;vertical-align:middle;background-color:#E8E8E8;padding:.5em .8em;color:rgba(0,0,0,.65);text-transform:uppercase;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.label{cursor:pointer}.ui.label.disabled{opacity:.5}.ui.label .detail{display:inline-block;margin-left:.5em;font-weight:700;opacity:.8}.ui.label .icon.close{cursor:pointer;margin-left:.5em;opacity:.7;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.labels .label:hover,a.ui.label:hover{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.labels a.label:hover:before,a.ui.label:hover:before{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.label .icon.close:hover{opacity:1}.ui.tag.labels .label,.ui.tag.label{margin-left:1em;position:relative;padding:.33em 1.3em .33em 1.4em;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}.ui.tag.labels .label:before,.ui.tag.label:before{position:absolute;top:.3em;left:.3em;content:'';margin-left:-1em;background-image:none;width:1.5em;height:1.5em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.tag.labels .label:after,.ui.tag.label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.3em;background-color:#FFF;width:.55em;height:.55em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px}.ui.attached.label{position:absolute;top:0;left:0;margin-top:0!important;-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.ui.right.attached.label{left:auto;right:0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.ui.bottom.attached.label{top:auto;bottom:0;-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.ui.bottom.right.attached.label{-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.ui.corner.label{background-color:transparent;position:absolute;top:0;right:0;z-index:10;width:1.75em;height:1.75em;padding:0;font-size:.9em;text-align:center;-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;border-color:transparent #E8E8E8 transparent transparent;border-style:solid;border-width:0 2.75em 2.75em 0;-webkit-transition:border-color .2s ease;-moz-transition:border-color .2s ease;-o-transition:border-color .2s ease;-ms-transition:border-color .2s ease;transition:border-color .2s ease}.ui.corner.label .icon{margin:.35em 0;vertical-align:top}.ui.corner.label .text{display:inline-block;margin:.7em 0 0;width:2.5em;font-size:.7em;text-align:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-width:2.75em 2.75em 0 0;border-color:#E8E8E8 transparent transparent}.ui.left.corner.label .text{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.corner.label:hover{background-color:transparent}a.ui.corner.label:hover::after{border-right-color:#E0E0E0}a.ui.left.corner.label:hover::after{border-right-color:transparent;border-top-color:#E0E0E0}.ui.label.fluid,.ui.fluid.labels>.label{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.inverted.labels .label,.ui.inverted.label{color:#FFF!important}.ui.black.labels .label,.ui.black.label{background-color:#5C6166!important;color:#FFF!important}.ui.labels .black.label:before,.ui.black.labels .label:before,.ui.black.label:before{background-color:#5C6166!important}a.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#888!important}.ui.labels a.black.label:hover:before,.ui.black.labels a.label:hover:before,a.ui.black.label:hover:before{background-color:#888!important}.ui.green.labels .label,.ui.green.label{background-color:#A1CF64!important;color:#FFF!important}.ui.labels .green.label:before,.ui.green.labels .label:before,.ui.green.label:before{background-color:#A1CF64!important}a.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#89B84C!important}.ui.labels a.green.label:hover:before,.ui.green.labels a.label:hover:before,a.ui.green.label:hover:before{background-color:#89B84C!important}.ui.red.labels .label,.ui.red.label{background-color:#EF4D6D!important;color:#FFF!important}.ui.labels .red.label:before,.ui.red.labels .label:before,.ui.red.label:before{background-color:#EF4D6D!important}.ui.red.corner.label{background-color:transparent}a.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#DE3859!important;color:#FFF!important}.ui.labels a.red.label:hover:before,.ui.red.labels a.label:hover:before,a.ui.red.label:hover:before{background-color:#DE3859!important}.ui.blue.labels .label,.ui.blue.label{background-color:#6ECFF5!important;color:#FFF!important}.ui.labels .blue.label:before,.ui.blue.labels .label:before,.ui.blue.label:before{background-color:#6ECFF5!important}a.ui.blue.labels .label:hover,.ui.blue.labels a.label:hover,a.ui.blue.label:hover{background-color:#1AB8F3!important;color:#FFF!important}.ui.labels a.blue.label:hover:before,.ui.blue.labels a.label:hover:before,a.ui.blue.label:hover:before{background-color:#1AB8F3!important}.ui.purple.labels .label,.ui.purple.label{background-color:#564F8A!important;color:#FFF!important}.ui.labels .purple.label:before,.ui.purple.labels .label:before,.ui.purple.label:before{background-color:#564F8A!important}a.ui.purple.labels .label:hover,.ui.purple.labels a.label:hover,a.ui.purple.label:hover{background-color:#3E3773!important;color:#FFF!important}.ui.labels a.purple.label:hover:before,.ui.purple.labels a.label:hover:before,a.ui.purple.label:hover:before{background-color:#3E3773!important}.ui.teal.labels .label,.ui.teal.label{background-color:#00B5AD!important;color:#FFF!important}.ui.labels .teal.label:before,.ui.teal.labels .label:before,.ui.teal.label:before{background-color:#00B5AD!important}a.ui.teal.labels .label:hover,.ui.teal.labels a.label:hover,a.ui.teal.label:hover{background-color:#009A93!important;color:#FFF!important}.ui.labels a.teal.label:hover:before,.ui.teal.labels a.label:hover:before,a.ui.teal.tag.label:hover:before{background-color:#009A93!important}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{position:absolute;content:"";width:.6em;height:.6em;background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.pointing.label:before{background-color:#E8E8E8}.ui.pointing.label,.ui.pointing.above.label{margin-top:1em}.ui.pointing.label:before,.ui.pointing.above.label:before{margin-left:-.3em;top:-.3em;left:50%}.ui.pointing.below.label{margin-top:0;margin-bottom:1em}.ui.pointing.below.label:before{margin-left:-.3em;top:auto;right:auto;bottom:-.3em;left:50%}.ui.pointing.left.label{margin-top:0;margin-left:1em}.ui.pointing.left.label:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.pointing.right.label{margin-top:0;margin-right:1em}.ui.pointing.right.label:before{margin-top:-.3em;right:-.3em;top:50%;bottom:auto;left:auto}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important;-webkit-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset}.ui.label{font-size:.8em}.ui.small.labels .label,.ui.small.label{font-size:.7em}.ui.large.labels .label,.ui.large.label{font-size:1em} \ No newline at end of file +.ui.label{display:inline-block;vertical-align:middle;background-color:#E8E8E8;padding:.5em .8em;color:rgba(0,0,0,.65);text-transform:uppercase;-webkit-border-radius:.325em;-moz-border-radius:.325em;border-radius:.325em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.label{cursor:pointer}.ui.label.disabled{opacity:.5}.ui.label .detail{display:inline-block;margin-left:.5em;font-weight:700;opacity:.8}.ui.label .icon.close{cursor:pointer;margin-left:.5em;opacity:.7;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}a.ui.labels .label:hover,a.ui.label:hover{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.labels a.label:hover:before,a.ui.label:hover:before{background-color:#E0E0E0;color:rgba(0,0,0,.7)}.ui.label .icon.close:hover{opacity:1}.ui.tag.labels .label,.ui.tag.label{margin-left:1em;position:relative;padding:.33em 1.3em .33em 1.4em;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}.ui.tag.labels .label:before,.ui.tag.label:before{position:absolute;top:.3em;left:.3em;content:'';margin-left:-1em;background-image:none;width:1.5em;height:1.5em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.tag.labels .label:after,.ui.tag.label:after{position:absolute;content:'';top:50%;left:-.25em;margin-top:-.3em;background-color:#FFF;width:.55em;height:.55em;-webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);box-shadow:0 -1px 1px 0 rgba(0,0,0,.3);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px}.ui.top.attached.label,.ui.attached.label{width:100%;position:absolute;top:0;left:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.ui.bottom.attached.label{top:auto;bottom:0;-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.ui.top.left.attached.label{width:auto;margin-top:0!important;-webkit-border-radius:4px 0 0;-moz-border-radius:4px 0 0;border-radius:4px 0 0}.ui.top.right.attached.label{width:auto;left:auto;right:0;-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0}.ui.bottom.left.attached.label{width:auto;top:auto;bottom:0;-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px}.ui.bottom.right.attached.label{width:auto;-webkit-border-radius:0 0 4px;-moz-border-radius:0 0 4px;border-radius:0 0 4px}.ui.corner.label{background-color:transparent;position:absolute;top:0;right:0;z-index:10;width:1.75em;height:1.75em;padding:0;font-size:.9em;text-align:center;-webkit-transition:color .2s ease;-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;transition:color .2s ease}.ui.corner.label:after{position:absolute;content:"";right:0;top:0;z-index:-1;width:0;height:0;border-color:transparent #E8E8E8 transparent transparent;border-style:solid;border-width:0 2.75em 2.75em 0;-webkit-transition:border-color .2s ease;-moz-transition:border-color .2s ease;-o-transition:border-color .2s ease;-ms-transition:border-color .2s ease;transition:border-color .2s ease}.ui.corner.label .icon{margin:.35em 0;vertical-align:top}.ui.corner.label .text{display:inline-block;margin:.7em 0 0;width:2.5em;font-size:.7em;text-align:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.ui.left.corner.label,.ui.left.corner.label:after{right:auto;left:0}.ui.left.corner.label:after{border-width:2.75em 2.75em 0 0;border-color:#E8E8E8 transparent transparent}.ui.left.corner.label .text{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.ui.corner.label:hover{background-color:transparent}a.ui.corner.label:hover::after{border-right-color:#E0E0E0}a.ui.left.corner.label:hover::after{border-right-color:transparent;border-top-color:#E0E0E0}.ui.label.fluid,.ui.fluid.labels>.label{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.inverted.labels .label,.ui.inverted.label{color:#FFF!important}.ui.black.labels .label,.ui.black.label{background-color:#5C6166!important;color:#FFF!important}.ui.labels .black.label:before,.ui.black.labels .label:before,.ui.black.label:before{background-color:#5C6166!important}a.ui.black.labels .label:hover,a.ui.black.label:hover{background-color:#888!important}.ui.labels a.black.label:hover:before,.ui.black.labels a.label:hover:before,a.ui.black.label:hover:before{background-color:#888!important}.ui.green.labels .label,.ui.green.label{background-color:#A1CF64!important;color:#FFF!important}.ui.labels .green.label:before,.ui.green.labels .label:before,.ui.green.label:before{background-color:#A1CF64!important}a.ui.green.labels .label:hover,a.ui.green.label:hover{background-color:#89B84C!important}.ui.labels a.green.label:hover:before,.ui.green.labels a.label:hover:before,a.ui.green.label:hover:before{background-color:#89B84C!important}.ui.red.labels .label,.ui.red.label{background-color:#EF4D6D!important;color:#FFF!important}.ui.labels .red.label:before,.ui.red.labels .label:before,.ui.red.label:before{background-color:#EF4D6D!important}.ui.red.corner.label{background-color:transparent}a.ui.red.labels .label:hover,a.ui.red.label:hover{background-color:#DE3859!important;color:#FFF!important}.ui.labels a.red.label:hover:before,.ui.red.labels a.label:hover:before,a.ui.red.label:hover:before{background-color:#DE3859!important}.ui.blue.labels .label,.ui.blue.label{background-color:#6ECFF5!important;color:#FFF!important}.ui.labels .blue.label:before,.ui.blue.labels .label:before,.ui.blue.label:before{background-color:#6ECFF5!important}a.ui.blue.labels .label:hover,.ui.blue.labels a.label:hover,a.ui.blue.label:hover{background-color:#1AB8F3!important;color:#FFF!important}.ui.labels a.blue.label:hover:before,.ui.blue.labels a.label:hover:before,a.ui.blue.label:hover:before{background-color:#1AB8F3!important}.ui.purple.labels .label,.ui.purple.label{background-color:#564F8A!important;color:#FFF!important}.ui.labels .purple.label:before,.ui.purple.labels .label:before,.ui.purple.label:before{background-color:#564F8A!important}a.ui.purple.labels .label:hover,.ui.purple.labels a.label:hover,a.ui.purple.label:hover{background-color:#3E3773!important;color:#FFF!important}.ui.labels a.purple.label:hover:before,.ui.purple.labels a.label:hover:before,a.ui.purple.label:hover:before{background-color:#3E3773!important}.ui.teal.labels .label,.ui.teal.label{background-color:#00B5AD!important;color:#FFF!important}.ui.labels .teal.label:before,.ui.teal.labels .label:before,.ui.teal.label:before{background-color:#00B5AD!important}a.ui.teal.labels .label:hover,.ui.teal.labels a.label:hover,a.ui.teal.label:hover{background-color:#009A93!important;color:#FFF!important}.ui.labels a.teal.label:hover:before,.ui.teal.labels a.label:hover:before,a.ui.teal.tag.label:hover:before{background-color:#009A93!important}.ui.pointing.label{position:relative}.ui.attached.pointing.label{position:absolute}.ui.pointing.label:before{position:absolute;content:"";width:.6em;height:.6em;background-image:none;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-transition:background .1s linear;-moz-transition:background .1s linear;-o-transition:background .1s linear;-ms-transition:background .1s linear;transition:background .1s linear}.ui.pointing.label:before{background-color:#E8E8E8}.ui.pointing.label,.ui.pointing.above.label{margin-top:1em}.ui.pointing.label:before,.ui.pointing.above.label:before{margin-left:-.3em;top:-.3em;left:50%}.ui.pointing.below.label{margin-top:0;margin-bottom:1em}.ui.pointing.below.label:before{margin-left:-.3em;top:auto;right:auto;bottom:-.3em;left:50%}.ui.pointing.left.label{margin-top:0;margin-left:1em}.ui.pointing.left.label:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.pointing.right.label{margin-top:0;margin-right:1em}.ui.pointing.right.label:before{margin-top:-.3em;right:-.3em;top:50%;bottom:auto;left:auto}.ui.floating.label{position:absolute;z-index:100;top:-1em;left:100%;margin:0 0 0 -1.5em!important;-webkit-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;-moz-box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset;box-shadow:0 -2px 0 0 rgba(0,0,0,.1) inset}.ui.label{font-size:.8em}.ui.small.labels .label,.ui.small.label{font-size:.7em}.ui.large.labels .label,.ui.large.label{font-size:1em} \ No newline at end of file diff --git a/build/minified/elements/segment.min.css b/build/minified/elements/segment.min.css index 38bd59c46..f9cf8d8a7 100644 --- a/build/minified/elements/segment.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index 3bd57c8f0..6155c2377 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -41c98cd29c136dbfef76ec076e26ccd418f0d500 \ No newline at end of file +d64464d2e870d221cde35b2624c0c974bbb88692 \ No newline at end of file diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index bb0aa9564..f40553662 100644 --- a/build/uncompressed/elements/label.css +++ b/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; diff --git a/build/uncompressed/elements/segment.css b/build/uncompressed/elements/segment.css index adf903abc..349f9eca5 100644 --- a/build/uncompressed/elements/segment.css +++ b/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 diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index de5bb3422..c0c221e48 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -177,12 +177,47 @@ type : 'UI Element'

Attached Label

A label attached to a content segment

-
-
Top Left
-
Top Right
-
Bottom Left
-
Bottom Right
-

Hey let's look at labels.

+
+
+
+
+
HTML
+

This is some pretend content

+
+
+
+
+
CSS
+

This is some pretend content

+
+
+
+
+
Code
+

This is some pretend content

+
+
+
+
+
+
+
View
+

This is some pretend content

+
+
+
+
+
User View
+

This is some pretend content

+
+
+
+
+
Admin View
+

This is some pretend content

+
+
+
diff --git a/node/src/files/components/semantic/elements/label.css b/node/src/files/components/semantic/elements/label.css index bb0aa9564..f40553662 100644 --- a/node/src/files/components/semantic/elements/label.css +++ b/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; diff --git a/node/src/files/components/semantic/elements/segment.css b/node/src/files/components/semantic/elements/segment.css index adf903abc..349f9eca5 100644 --- a/node/src/files/components/semantic/elements/segment.css +++ b/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 diff --git a/src/elements/label.less b/src/elements/label.less index 3e5e48285..928addbb3 100755 --- a/src/elements/label.less +++ b/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; diff --git a/src/elements/segment.less b/src/elements/segment.less index 62b74d13e..c64f6127a 100755 --- a/src/elements/segment.less +++ b/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; } /*******************************