From 1e198d0181a0460157b87693e9df32101695f137 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 29 Apr 2013 11:47:36 -0400 Subject: [PATCH] reworking tags as ui label class --- docs/{tag.html => label.html} | 98 +++++++++++--------------- docs/menu.html | 6 +- src/ui/flat/{tag.css => label.css} | 108 +++++++++++++++-------------- 3 files changed, 99 insertions(+), 113 deletions(-) rename docs/{tag.html => label.html} (83%) mode change 100644 => 100755 rename src/ui/flat/{tag.css => label.css} (70%) diff --git a/docs/tag.html b/docs/label.html old mode 100644 new mode 100755 similarity index 83% rename from docs/tag.html rename to docs/label.html index 34850238f..87ab0564b --- a/docs/tag.html +++ b/docs/label.html @@ -2,7 +2,7 @@ - UI Tag - Semantic + UI Label - Semantic @@ -13,7 +13,7 @@ - + @@ -59,7 +59,7 @@
Segment
Columns
Elements (Grid System)
-
Tags
+
Label
Items (Lists of Content)
Panels (Type of Menu)
Icons
@@ -104,7 +104,7 @@
- Semantic UI: Tag + Semantic UI: Label
@@ -146,8 +146,8 @@
-

Tags

-

a tag

+

Label

+

Labels can be used to give descriptions to sections of content. They can be formatted like tags, used to mark separate sections of a group of content.

@@ -163,17 +163,17 @@

Standard

-

Tag

-
+

Label

+
Fun
-
+
Happy
-
+
Smart
-
+
Witty
@@ -181,23 +181,23 @@

Numeric tag

A tag can dispaly a count

-
-
+
+
Fun
22
-
+
Happy
44
-
+
Smart
52
-
+ Witty -
+
@@ -208,19 +208,19 @@

Colors

A tag can have different colors

-
+
Fun
-
+
Happy
-
+
Smart
-
+
Witty
-
+
Exciting
@@ -228,35 +228,17 @@

Skeumorphic

A tag can look like a real tag

-
-
- Fun -
-
- Happy -
-
- Smart -
-
- Witty -
-
-
-
-

Square

-

A tag can be square

-
-
+
+
Fun
-
+
Happy
-
+
Smart
-
+
Witty
@@ -265,32 +247,32 @@

Size

A tag can be small or large

-
-
+
+
Fun
-
+
Happy
-
+
Smart
-
+
Witty


-
-
+
+
Fun
-
+
Happy
-
+
Smart
-
+
Witty
@@ -299,8 +281,8 @@

Groups

-

Tag Groups

-

Tag can exist side by side to show relation

+

Label Groups

+

Label can exist side by side to show relation

diff --git a/docs/menu.html b/docs/menu.html index 37a5f930b..b7fdcbe39 100755 --- a/docs/menu.html +++ b/docs/menu.html @@ -59,7 +59,7 @@
Segment
Columns
Elements (Grid System)
-
Tags
+
Labels
Items (Lists of Content)
Panels (Type of Menu)
Icons
@@ -116,12 +116,12 @@ 2. Form 3. Table 4. Menu - 5. Tags + 5. Tags 7. Items
diff --git a/src/ui/flat/tag.css b/src/ui/flat/label.css similarity index 70% rename from src/ui/flat/tag.css rename to src/ui/flat/label.css index a9f546435..62ee0b275 100755 --- a/src/ui/flat/tag.css +++ b/src/ui/flat/label.css @@ -1,16 +1,17 @@ /******************************* - Tags + Label *******************************/ -.ui.tag { - cursor: pointer; +.ui.label { + cursor: default; display: inline-block; vertical-align: middle; - background-color: #5F5F5F; + background-color: #EEEEEE; + color: #777777; + padding: 0.33em 0.8em; - color: #FFFFFF; font-weight: bold; text-transform: uppercase; @@ -35,19 +36,20 @@ background 0.1s linear ; } -.ui.tag.disabled { +.ui.label.disabled { opacity: 0.5; } -.ui.tag .count { +.ui.label .count { display: inline-block; margin-left: 0.5em; color: #AAAAAA; } -.ui.tag .icon.close { +.ui.label .icon.close { + cursor: pointer; margin-left: 0.5em; - color: #FFFFFF; - opacity: 0.9; + opacity: 0.7; + color: #333333; } /******************************* @@ -55,54 +57,45 @@ *******************************/ /* Hover */ -.ui.tag:hover { - background-color: #262626; +a.ui.label:hover { + cursor: pointer; + background-color: #E0E0E0; +} +a.ui.label:hover .close { + opacity: 1; } -.ui.skeuomorphic.tags .tag:hover:before { +a.ui.tag.labels .label:hover:before { background-color: #262626; } -.ui.tag:active { - -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2) inset; -} /******************************* Variations *******************************/ -.ui.square.tags .tag, -.ui.square.tag { - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; -} - -.ui.skeuomorphic.tags .tag, -.ui.skeuomorphic.tag { +.ui.tag.labels .label, +.ui.tag.label { margin-left: 1em; position: relative; - margin-left: 1em; padding: 0.33em 1.3em; -webkit-border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; } -.ui.skeuomorphic.tags .tag:before { +.ui.tag.labels .label:before { position: absolute; - top: 0.28em; + top: 0.33em; left: 0.3em; - content: ""; + content: ''; margin-left: -1em; - background-color: #5F5F5F; + background-color: #EEEEEE; background-image: none; - width: 1.4em; - height: 1.4em; + width: 1.45em; + height: 1.45em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -125,7 +118,7 @@ ; } -.ui.skeuomorphic.tags .tag:after { +.ui.tag.labels .label:after { position: absolute; content: ""; top: 50%; @@ -149,29 +142,40 @@ Types *******************************/ -.ui.green.tags .tag, -.ui.green.tag { +.ui.black.labels .label, +.ui.black.label { + background-color: #5F5F5F; + color: #FFFFFF; +} +.ui.green.labels .label, +.ui.green.label { background-color: #3EBC47; + color: #FFFFFF; } -.ui.red.tags .tag, -.ui.red.tag { +.ui.red.labels .label, +.ui.red.label { background-color: #BC3eEE; + color: #FFFFFF; } -.ui.blue.tags .tag, -.ui.blue.tag { +.ui.blue.labels .label, +.ui.blue.label { background-color: #009FDA; + color: #FFFFFF; } -.ui.purple.tags .tag, -.ui.purple.tag { +.ui.purple.labels .label, +.ui.purple.label { background-color: #512598; + color: #FFFFFF; } -.ui.yellow.tags .tag, -.ui.yellow.tag { +.ui.yellow.labels .label, +.ui.yellow.label { background-color: #D8C62E; + color: #FFFFFF; } -.ui.pink.tags .tag, -.ui.pink.tag { +.ui.pink.labels .label, +.ui.pink.label { background-color: #EC008C; + color: #FFFFFF; } @@ -179,14 +183,14 @@ Sizes *******************************/ -.ui.tag { +.ui.label { font-size: 13px; } -.ui.small.tags .tag, -.ui.small.tag { +.ui.small.labels .label, +.ui.small.label { font-size: 11px; } -.ui.large.tags .tag, -.ui.large.tag { +.ui.large.labels .label, +.ui.large.label { font-size: 15px; } \ No newline at end of file