From edd922fc7967403c0ac692684ac355b095b87c89 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sat, 27 Apr 2013 03:05:15 -0400 Subject: [PATCH] working on tags, fixed all the old menus. 3am on a friday yeahh --- docs/button.html | 10 +- docs/form.html | 17 +- docs/menu.html | 98 ++++++----- docs/stub.html | 15 +- docs/stylesheets/example.css | 2 +- docs/table.html | 8 +- docs/tag.html | 311 +++++++++++++++++++++++++++++++++++ src/ui/flat/button.css | 7 +- src/ui/flat/menu.css | 22 ++- src/ui/flat/tag.css | 152 +++++++++++++---- 10 files changed, 528 insertions(+), 114 deletions(-) create mode 100644 docs/tag.html diff --git a/docs/button.html b/docs/button.html index ee17c1f2b..f6931ce7a 100755 --- a/docs/button.html +++ b/docs/button.html @@ -147,11 +147,11 @@
-
-
  • Standard
    • -
  • States
    • -
  • Variations
    • -
  • Group
    • +
    +
    Standard
    +
    States
    +
    Variations
    +
    Groups

    Standard

    diff --git a/docs/form.html b/docs/form.html index ce8a08ce8..4346d26c2 100755 --- a/docs/form.html +++ b/docs/form.html @@ -153,14 +153,14 @@
    -
    -
  • Standard
    • -
  • States
    • -
  • Variations
    • -
  • Group
    • +
    +
    Collection
    +
    Elements
    +
    States
    +
    Variations
    -

    Standard

    +

    Collection

    Form:

    @@ -198,7 +198,8 @@

    This example uses a ui segment to add the padding and background color. This is not required.

    -

    Types of Content

    + +

    Elements

    Field

    @@ -244,7 +245,7 @@
    -

    Validation

    +

    Text Block

    Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

    diff --git a/docs/menu.html b/docs/menu.html index f01ed982f..24bb490b2 100755 --- a/docs/menu.html +++ b/docs/menu.html @@ -14,9 +14,9 @@ - + - + @@ -104,7 +104,7 @@
    - Semantic UI: Menu + Semantic UI: Menu
    -
    +
    Menu
    @@ -153,7 +153,7 @@
    - +
    Collection
    @@ -162,11 +162,11 @@
    Variations
    - +

    Collection

    Menu

    - +

    This example uses several menu elements to display the versatility of a menu collection.

    @@ -258,7 +258,7 @@

    Dropdown Item

    An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.

    -

    A dropdown menu will, by default, automatically show when the parent element is hovered.

    +

    A dropdown menu will, by default, automatically show when the parent element is hovered.

    If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.

    @@ -299,36 +299,36 @@
    - - + +

    States

    - +

    Hover

    A menu item can be hovered

    Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.
    -
    +
    Link
    - +

    Down

    A menu item can be pressed in

    -
    +
    Link
    - +
    -

    Down

    +

    Active

    A menu item can be active in

    -
    +
    Link
    @@ -361,36 +361,44 @@
    - +
    -

    Fluid

    -

    A menu may take the size of its container, and be divided evenly.

    -
    -
    Choice 1
    -
    Choice 2
    -
    Choice 3
    +

    Icons

    +

    A menu may have just icons

    +
    +
    + +
    +
    + +
    +
    + +
    -
    - -
    -

    Compact

    -

    A horizontal menu may compact itself to only fit content

    -
    +

    +
    - Previous +
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    -
    6
    - Next + +
    +
    +
    +
    +

    Fluid

    +

    A menu may take the size of its container, and be divided evenly.

    +
    +
    Choice 1
    +
    Choice 2
    +
    Choice 3
    +
    +

    Pointing (Horizontal)

    @@ -444,6 +452,7 @@
    +

    Attached

    A menu may be attached to other content segments

    @@ -555,9 +564,9 @@
    - +

    Items

    - +

    Fitted

    A menu item or menu might be fitted to remove element padding

    @@ -570,7 +579,8 @@
    - + +

    Borderless

    A menu item or menu might might have no dividers

    @@ -589,9 +599,9 @@
    - - - + + +
    diff --git a/docs/stub.html b/docs/stub.html index 2c60422a3..60eee45ea 100755 --- a/docs/stub.html +++ b/docs/stub.html @@ -13,6 +13,7 @@ + @@ -135,18 +136,18 @@
    -

    ZZZZZZZZZZZZZ

    -

    qqqqqqqqqq

    +

    Tags

    +

    a tag

    -
    -
  • Standard
    • -
  • States
    • -
  • Variations
    • -
  • Group
    • +
    +
    Standard
    +
    States
    +
    Variations
    +
    Groups
    diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index da93ea4af..b8a2e0903 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -87,6 +87,7 @@ body#example { background: #FCFCFC url(../images/bg.jpg) repeat; margin: 0px; padding: 0px 0px 150px; + color: #555555; text-rendering: optimizeLegibility; } @@ -143,7 +144,6 @@ table code { } p { margin: 10px 0px; - color: #555555; } p > a { font-weight: bold; diff --git a/docs/table.html b/docs/table.html index 612e43449..3e09add69 100755 --- a/docs/table.html +++ b/docs/table.html @@ -154,10 +154,10 @@
    -
    -
  • Standard
    • -
  • States
    • -
  • Variations
    • +
    +
    Standard
    +
    States
    +
    Variations
    diff --git a/docs/tag.html b/docs/tag.html new file mode 100644 index 000000000..e1c0d456a --- /dev/null +++ b/docs/tag.html @@ -0,0 +1,311 @@ + + + + + UI Tag - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + Semantic UI: Tag +
    + +
    + 3 of 14 +
    + 1. Button + 2. Form + 3. Table + 4. Columns + 5. Elements + 6. Tags + 7. Items + 8. Panels +
    +
    + +
    + + + + + + +
    + Theme +
    +
    Flat
    +
    Shaded
    +
    Classic
    +
    +
    +
    +
    +
    +
    +
    Menu
    +
    +
    +
    +

    Tags

    +

    a tag

    +
    +
    +
    + +
    +
    +
    Standard
    +
    States
    +
    Variations
    +
    Groups
    +
    +
    + +

    Standard

    +
    +

    Tag

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

    Numeric tag

    +

    A tag can dispaly a count

    +
    +
    + Fun +
    22
    +
    +
    + Happy +
    44
    +
    +
    + Smart +
    52
    +
    +
    + Witty + +
    +
    +
    + + +

    States

    + +

    Variations

    +
    +

    Colors

    +

    A tag can have different colors

    +
    + Fun +
    +
    + Happy +
    +
    + Smart +
    +
    + Witty +
    +
    + Exciting +
    +
    + +
    +

    Skeumorphic

    +

    A tag can look like a real tag

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

    Square

    +

    A tag can be square

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

    Size

    +

    A tag can be small or large

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

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

    Groups

    + +
    +

    Tag Groups

    +

    Tag can exist side by side to show relation

    +
    + +
    + + + \ No newline at end of file diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index 9bc3944c6..bd5985bfb 100755 --- a/src/ui/flat/button.css +++ b/src/ui/flat/button.css @@ -758,7 +758,8 @@ input + .ui.attached.button.down { content: ' '; background-color: transparent; - border-top: 3px solid #FFFFFF; + border-top: 10px solid #FFFFFF; + border-bottom: 11px solid #FFFFFF; } @@ -779,9 +780,9 @@ input + .ui.attached.button.down { font-weight: bold; } .ui.buttons .or:after { - top: 4px; + top: 0px; width: 5px; - height: 18px; + height: 16px; } .ui.fluid.buttons .or { width: 0px !important; diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css index 7616e1f5f..7b2acf17b 100755 --- a/src/ui/flat/menu.css +++ b/src/ui/flat/menu.css @@ -178,15 +178,6 @@ } -/*-------------- - Icons ----------------*/ - -.ui.menu .item > i:only-child, -.ui.menu .item > a > i:only-child { - margin: 0em; -} - /*-------------- Dropdowns ---------------*/ @@ -523,6 +514,19 @@ opacity: 0.95; } +/*-------------- + Icon Only +---------------*/ + +.ui.icon.menu, +.ui.vertical.icon.menu { + width: auto; + display: inline-block; +} +.ui.icon.menu i { + margin: 0em; +} + /*-------------- Vertical ---------------*/ diff --git a/src/ui/flat/tag.css b/src/ui/flat/tag.css index bf0368369..a9f546435 100755 --- a/src/ui/flat/tag.css +++ b/src/ui/flat/tag.css @@ -3,11 +3,12 @@ *******************************/ .ui.tag { + cursor: pointer; display: inline-block; vertical-align: middle; - background-color: #7A7A7A; - padding: 4px 10px; + background-color: #5F5F5F; + padding: 0.33em 0.8em; color: #FFFFFF; font-weight: bold; @@ -17,24 +18,54 @@ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + + -webkit-transition: + background 0.1s linear + ; + -moz-transition: + background 0.1s linear + ; + -o-transition: + background 0.1s linear + ; + -ms-transition: + background 0.1s linear + ; + transition: + background 0.1s linear + ; } .ui.tag.disabled { opacity: 0.5; } -a.ui.tag { - position: relative; +.ui.tag .count { + display: inline-block; + margin-left: 0.5em; + color: #AAAAAA; } -a.ui.tag:after { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - content: ''; +.ui.tag .icon.close { + margin-left: 0.5em; + color: #FFFFFF; + opacity: 0.9; } -a.ui.tag:hover:after { - background-color: rgba(255, 255, 255, 0.15); + +/******************************* + States +*******************************/ + +/* Hover */ +.ui.tag:hover { + background-color: #262626; +} +.ui.skeuomorphic.tags .tag: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; } @@ -42,48 +73,103 @@ a.ui.tag:hover:after { Variations *******************************/ +.ui.square.tags .tag, .ui.square.tag { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } -.ui.shaded.tag { - -moz-box-shadow: - 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset - ; - -webkit-box-shadow: - 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset - ; - box-shadow: - 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, - 0px 0px 0px 2px rgba(255, 255, 255, 0.2) inset - ; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); +.ui.skeuomorphic.tags .tag, +.ui.skeuomorphic.tag { + 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 { + position: absolute; + top: 0.28em; + left: 0.3em; + content: ""; + + margin-left: -1em; + background-color: #5F5F5F; + background-image: none; + width: 1.4em; + height: 1.4em; + + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + transform: rotate(45deg); + + -webkit-transition: + background 0.1s linear + ; + -moz-transition: + background 0.1s linear + ; + -o-transition: + background 0.1s linear + ; + -ms-transition: + background 0.1s linear + ; + transition: + background 0.1s linear + ; +} + +.ui.skeuomorphic.tags .tag:after { + position: absolute; + content: ""; + top: 50%; + left: -0.25em; + + margin-top: -0.33em; + background-color: #FFFFFF; + width: 0.55em; + height: 0.55em; + + -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3); + + -moz-border-radius: 100px 100px 100px 100px; + -webkit-border-radius: 100px 100px 100px 100px; + border-radius: 100px 100px 100px 100px; +} /******************************* Types *******************************/ +.ui.green.tags .tag, .ui.green.tag { background-color: #3EBC47; } +.ui.red.tags .tag, .ui.red.tag { background-color: #BC3eEE; } +.ui.blue.tags .tag, .ui.blue.tag { background-color: #009FDA; } +.ui.purple.tags .tag, .ui.purple.tag { background-color: #512598; } +.ui.yellow.tags .tag, .ui.yellow.tag { background-color: #D8C62E; } +.ui.pink.tags .tag, .ui.pink.tag { background-color: #EC008C; } @@ -92,15 +178,15 @@ a.ui.tag:hover:after { /******************************* Sizes *******************************/ + .ui.tag { - font-size: 11px; + font-size: 13px; } +.ui.small.tags .tag, .ui.small.tag { - font-size: 10px; - padding: 3px 5px; + font-size: 11px; } +.ui.large.tags .tag, .ui.large.tag { - font-size: 14px; - padding-top: 4px; - padding-bottom: 4px; + font-size: 15px; } \ No newline at end of file