richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

labels: finishing up work on labels 

Former-commit-id: c41bded073
Former-commit-id: 80d92c3b7a
pull/258/head
Jack Lukic 11 years ago
parent
41370242a3
commit
b690f5b2be
5 changed files with 337 additions and 107 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 193
      docs/label.html
  2. 4
      src/ui/flat/button.css
  3. 6
      src/ui/flat/grid.css
  4. 228
      src/ui/flat/label.css
  5. 13
      src/ui/flat/segment.css

193
docs/label.html
View File

@ -8,6 +8,7 @@
<link rel="stylesheet" class="ui" href="../src/ui/flat/button.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/text.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/form.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/divider.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/block.css" type="text/css" media="screen" />
<link rel="stylesheet" class="ui" href="../src/ui/flat/segment.css" type="text/css" media="screen" />
@ -164,90 +165,144 @@
<h2>Standard</h2>
<div class="example">
<h4>Label</h4>
<p>A basic label</p>
<div class="ui label">
Fun
</div>
<div class="ui label">
Happy
</div>
<div class="example">
<h4>Linkable Label</h4>
<p>If an a tag is used, a label will be formatted as a link</p>
<a class="ui label">
Fun
</a>
</div>
<div class="example">
<h4>Attached Label</h4>
<p>A label attached to a content segment</p>
<div class="ui two elements">
<div class="element">
<div class="ui segment">
<div class="ui black attached label">New Users</div>
<div class="ui fluid form">
<div class="two fields">
<div class="field">
<label>E-mail</label>
<input type="text">
</div>
<div class="field">
<label>Username</label>
<input type="password">
</div>
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui blue button">Sign up</div>
</div>
</div>
</div>
<div class="element">
<div class="ui segment">
<div class="ui black attached label">Existing Users</div>
<div class="ui fluid form">
<div class="field">
<label>E-mail</label>
<input type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui button">Log in</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Label with detail</h4>
<p>A tag can optionally display a detail</p>
<div class="ui label">
Smart
Fun
<div class="detail">New</div>
</div>
<div class="ui label">
Witty
Red
<div class="detail">22</div>
</div>
</div>
<div class="example">
<h4>Numeric tag</h4>
<p>A tag can dispaly a count</p>
<div class="ui labels">
<div class="ui label">
Fun
<div class="count">22</div>
</div>
<div class="ui label">
Happy
<div class="count">44</div>
</div>
<div class="ui label">
Smart
<div class="count">52</div>
</div>
<a class="ui label">
Witty
<i class="icon close"></i>
</a>
<h4>Removable label</h4>
<p>A tag can also be removable</p>
<div class="ui label">
Witty
<i class="icon close"></i>
</div>
</div>
<h2>States</h2>
<p>Labels only have a single ui state</p>
<h2>Variations</h2>
<div class="example">
<h4>Colors</h4>
<p>A tag can have different colors</p>
<div class="ui green label">
<p>A label can have different colors</p>
<a class="ui black label">
First
</a>
<a class="ui green label">
Fun
</div>
<div class="ui red label">
</a>
<a class="ui red label">
Happy
</div>
<div class="ui blue label">
</a>
<a class="ui blue label">
Smart
</div>
<div class="ui yellow label">
</a>
<a class="ui purple label">
Insane
</a>
<a class="ui yellow label">
Witty
</div>
<div class="ui pink label">
</a>
<a class="ui pink label">
Exciting
</div>
</a>
</div>
<div class="example">
<h4>Skeumorphic</h4>
<p>A tag can look like a real tag</p>
<div class="ui tag labels">
<div class="ui label">
Fun
</div>
<div class="ui label">
Happy
</div>
<div class="ui label">
Smart
</div>
<div class="ui label">
Witty
</div>
</div>
<h4>Tag</h4>
<p>A label can look like a tag</p>
<a class="ui tag label">
First
</a>
</div>
<div class="example">
<h4>Size</h4>
<p>A tag can be small or large</p>
<div class="ui small labels">
<p>A label can be small or large</p>
<div class="ui small label">
Fun
</div>
<br><br>
<div class="ui large label">
Fun
</div>
</div>
<h2>Groups</h2>
<div class="example">
<h4>Label Groups</h4>
<p>Groups can share variations together</p>
<div class="ui large labels">
<div class="ui label">
Fun
</div>
@ -262,29 +317,29 @@
</div>
</div>
<br><br>
<div class="ui large labels">
<div class="ui label">
Fun
</div>
<div class="ui label">
<div class="ui tag labels">
<a class="ui green label">
Fun <i class="icon close"></i>
</a>
<a class="ui red label">
Happy
</div>
<div class="ui label">
<div class="detail">22</div>
</a>
<a class="ui blue label">
Smart
</div>
<div class="ui label">
</a>
<a class="ui purple label">
Insane
</a>
<a class="ui yellow label">
Witty
</div>
</a>
<a class="ui label">
Exciting
</a>
</div>
</div>
<h2>Groups</h2>
<div class="example">
<h4>Label Groups</h4>
<p>Label can exist side by side to show relation</p>
</div>
</div>
</body>

4
src/ui/flat/button.css
View File

@ -342,10 +342,10 @@ Green / Positive
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.4) inset;
}
}
/*---------------
Red / Negative
Red / Negative
----------------*/
.ui.button.red,

6
src/ui/flat/grid.css
View File

@ -17,12 +17,6 @@
vertical-align: top;
}
.ui.elements > .element:first-child,
.ui.element:first-child {
border-left: none;
box-shadow: none;
}
.ui.elements .element:first-child {
padding-left: 0% !important;
}

228
src/ui/flat/label.css
View File

@ -3,19 +3,14 @@
*******************************/
.ui.label {
cursor: default;
display: inline-block;
vertical-align: middle;
background-color: #EEEEEE;
color: #777777;
padding: 0.33em 0.8em;
font-weight: bold;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@ -36,20 +31,23 @@
background 0.1s linear
;
}
a.ui.label {
cursor: pointer;
}
.ui.label.disabled {
opacity: 0.5;
}
.ui.label .count {
.ui.label .detail {
display: inline-block;
font-size: 0.9em;
margin-left: 0.5em;
color: #AAAAAA;
opacity: 0.8;
}
.ui.label .icon.close {
cursor: pointer;
margin-left: 0.5em;
opacity: 0.7;
color: #333333;
}
/*******************************
@ -57,17 +55,9 @@
*******************************/
/* Hover */
a.ui.label:hover {
cursor: pointer;
background-color: #E0E0E0;
}
a.ui.label:hover .close {
.ui.label .icon.close:hover {
opacity: 1;
}
a.ui.tag.labels .label:hover:before {
background-color: #262626;
}
/*******************************
@ -78,24 +68,24 @@ a.ui.tag.labels .label:hover:before {
.ui.tag.label {
margin-left: 1em;
position: relative;
padding: 0.33em 1.3em;
padding: 0.33em 1.3em 0.33em 1.4em;
-webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.ui.tag.labels .label:before {
.ui.tag.labels .label:before,
.ui.tag.label:before {
position: absolute;
top: 0.33em;
top: 0.3em;
left: 0.3em;
content: '';
margin-left: -1em;
background-color: #EEEEEE;
background-image: none;
width: 1.45em;
height: 1.45em;
width: 1.5em;
height: 1.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
@ -118,13 +108,15 @@ a.ui.tag.labels .label:hover:before {
;
}
.ui.tag.labels .label:after {
.ui.tag.labels .label:after,
.ui.tag.label:after {
position: absolute;
content: "";
content: '';
top: 50%;
left: -0.25em;
margin-top: -0.33em;
margin-top: -0.3em;
background-color: #FFFFFF;
width: 0.55em;
height: 0.55em;
@ -139,44 +131,224 @@ a.ui.tag.labels .label:hover:before {
}
/*******************************
Types
Attached
*******************************/
.ui.attached.label {
position: absolute;
top: 0px;
left: 0px;
padding: 0.5em 1em;
background-color: #FAFAFA;
color: #999999;
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px 0px 5px 0px;
-moz-border-radius: 5px 0px 5px 0px;
border-radius: 5px 0px 5px 0px;
}
/*******************************
Colors
*******************************/
/*--- Standard ---*/
.ui.labels .label,
.ui.label {
background-color: #EEEEEE;
color: #777777;
}
.ui.tag.labels .label:before,
.ui.tag.labels .label:before,
.ui.tag.label:before {
background-color: #EEEEEE;
color: #555555;
}
/* Hover */
a.ui.labels .label:hover,
a.ui.label:hover {
background-color: #E0E0E0;
}
.ui.tag.labels a.label:hover:before,
.ui.tag.labels a.label:hover:before,
a.ui.tag.label:hover:before {
background-color: #E0E0E0;
}
/*--- Black ---*/
.ui.black.labels .label,
.ui.black.label {
background-color: #5F5F5F;
color: #FFFFFF;
}
.ui.tag.labels .black.label:before,
.ui.black.tag.labels .label:before,
.ui.black.tag.label:before {
background-color: #5F5F5F;
}
/* Hover */
a.ui.black.labels .label:hover,
a.ui.black.label:hover {
background-color: #888888;
}
.ui.tag.labels a.black.label:hover:before,
.ui.black.tag.labels a.label:hover:before,
a.ui.black.tag.label:hover:before {
background-color: #888888;
}
/*--- Green ---*/
.ui.green.labels .label,
.ui.green.label {
background-color: #3EBC47;
color: #FFFFFF;
}
.ui.tag.labels .green.label:before,
.ui.green.tag.labels .label:before,
.ui.green.tag.label:before {
background-color: #3EBC47;
}
/* Hover */
a.ui.green.labels .label:hover,
a.ui.green.label:hover {
background-color: #5ADB63;
}
.ui.tag.labels a.green.label:hover:before,
.ui.green.tag.labels a.label:hover:before,
a.ui.green.tag.label:hover:before {
background-color: #5ADB63;
}
/*--- Red ---*/
.ui.red.labels .label,
.ui.red.label {
background-color: #BC3eEE;
background-color: #EE3E3E;
color: #FFFFFF;
}
.ui.tag.labels .red.label:before,
.ui.red.tag.labels .label:before,
.ui.red.tag.label:before {
background-color: #EE3E3E;
}
/* Hover */
a.ui.red.labels .label:hover,
a.ui.red.label:hover{
background-color: #FB5656;
color: #FFFFFF;
}
.ui.tag.labels a.red.label:hover:before,
.ui.red.tag.labels a.label:hover:before,
a.ui.red.tag.label:hover:before {
background-color: #FB5656;
}
/*--- Blue ---*/
.ui.blue.labels .label,
.ui.blue.label {
background-color: #009FDA;
color: #FFFFFF;
}
.ui.tag.labels .blue.label:before,
.ui.blue.tag.labels .label:before,
.ui.blue.tag.label:before {
background-color: #009FDA;
}
/* Hover */
a.ui.blue.labels .label:hover,
a.ui.blue.label:hover {
background-color: #1AB8F3;
color: #FFFFFF;
}
.ui.tag.labels a.blue.label:hover:before,
.ui.blue.tag.labels a.label:hover:before,
a.ui.blue.tag.label:hover:before {
background-color: #1AB8F3;
}
/*--- Purple ---*/
.ui.purple.labels .label,
.ui.purple.label {
background-color: #512598;
color: #FFFFFF;
}
.ui.tag.labels .purple.label:before,
.ui.purple.tag.labels .label:before,
.ui.purple.tag.label:before {
background-color: #512598;
}
/* Hover */
a.ui.purple.labels .label:hover,
a.ui.purple.label:hover {
background-color: #6126C0;
color: #FFFFFF;
}
.ui.tag.labels a.purple.label:hover:before,
.ui.purple.tag.labels a.label:hover:before,
a.ui.purple.tag.label:hover:before {
background-color: #6126C0;
}
/*--- Yellow ---*/
.ui.yellow.labels .label,
.ui.yellow.label {
background-color: #D8C62E;
color: #FFFFFF;
}
.ui.tag.labels .yellow.label:before,
.ui.yellow.tag.labels .label:before,
.ui.yellow.tag.label:before {
background-color: #D8C62E;
}
/* Hover */
a.ui.yellow.labels .label:hover,
a.ui.yellow.label:hover {
background-color: #E3D13D;
color: #FFFFFF;
}
.ui.tag.labels a.yellow.label:hover:before,
.ui.yellow.tag.labels a.label:hover:before,
a.ui.yellow.tag.label:hover:before {
background-color: #E3D13D;
}
/*--- Pink ---*/
.ui.pink.labels .label,
.ui.pink.label {
background-color: #EC008C;
color: #FFFFFF;
}
.ui.tag.labels .pink.label:before,
.ui.pink.tag.labels .label:before,
.ui.pink.tag.label:before {
background-color: #EC008C;
}
/* Hover */
a.ui.pink.labels .label:hover,
a.ui.pink.label:hover {
background-color: #FD159F;
color: #FFFFFF;
}
.ui.tag.labels a.pink.label:hover:before,
.ui.pink.tag.labels a.label:hover:before,
a.ui.pink.tag.label:hover:before {
background-color: #FD159F;
}
/*******************************

13
src/ui/flat/segment.css
View File

@ -3,6 +3,7 @@
*******************************/
.ui.segment {
position: relative;
background-color: #FFFFFF;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
@ -19,8 +20,17 @@
overflow: hidden;
}
/* Label at the top of a segment */
.ui.segment .label:first-child + * {
margin-top: 2em;
}
/* Compatability with Grid */
.ui.fitted.elements .ui.segment.element:first-child {
border-radius: 5px 0px 0px 5px;
}
.ui.segment.attached {
position: relative;
top: -1px;
bottom: -1px;
@ -28,7 +38,6 @@
-webkit-border-radius: 0px;
border-radius: 0px;
/* avoid rgba multiplying */
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
box-shadow: 0px 0px 0px 1px #DDDDDD;

Write Preview
Loading…
Cancel
Save