From 82ba84308a822bd1c05023dfd2c91fb73ef554dd Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 26 Aug 2013 16:36:53 -0400 Subject: [PATCH] lists like a baller Former-commit-id: 25aae19dbc01e215f0343c8a04cf02f255f90df6 Former-commit-id: 1cbb386ed7f83d1fb63f4dfbc5fa12eb3eba76eb --- build/uncompressed/elements/button.css | 30 +-- build/uncompressed/elements/list.css | 195 ++++++++++----- node/src/documents/elements/list.html | 236 ++++++++++++++---- .../components/semantic/elements/button.css | 30 +-- .../components/semantic/elements/list.css | 195 ++++++++++----- node/src/files/stylesheets/semantic.css | 12 - src/elements/button.less | 30 +-- src/elements/list.less | 235 ++++++++++++----- 8 files changed, 677 insertions(+), 286 deletions(-) diff --git a/build/uncompressed/elements/button.css b/build/uncompressed/elements/button.css index c113f364d..99f152e79 100644 --- a/build/uncompressed/elements/button.css +++ b/build/uncompressed/elements/button.css @@ -20,8 +20,8 @@ min-height: 1em; outline: none; border: none; - background-color: #999999; - color: #FFFFFF; + background-color: #EBEBEB; + color: #999999; padding: 0.8em 1.5em; font-size: 1rem; text-transform: uppercase; @@ -118,14 +118,14 @@ .ui.active.button { opacity: 1 !important; background-color: #B0B0B0; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - -webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + -webkit-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; + -moz-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; + box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; } .ui.buttons .active.button, .ui.buttons .active.button a, @@ -140,6 +140,7 @@ .ui.button.hover { opacity: 1 !important; background-color: #A4A4A4; + color: #FFFFFF; } .ui.button:hover .icon, .ui.button.hover .icon { @@ -150,9 +151,10 @@ ---------------*/ /* Down */ .ui.button:active, -.ui.button.pressed { +.ui.button.down { opacity: 1 !important; background-color: #8C8C8C; + color: #FFFFFF; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; @@ -510,17 +512,17 @@ } .ui.buttons.mini .button, .ui.mini.button { - font-size: 0.8rem; + font-size: 0.8125rem; padding: 0.6em 0.8em; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 0.9rem; + font-size: 0.875rem; padding: 0.6em 0.8em; } .ui.small.buttons .button, .ui.small.button { - font-size: 0.9rem; + font-size: 0.875rem; } .ui.large.buttons .button, .ui.large.button { diff --git a/build/uncompressed/elements/list.css b/build/uncompressed/elements/list.css index 4a1078749..78f49ded7 100644 --- a/build/uncompressed/elements/list.css +++ b/build/uncompressed/elements/list.css @@ -13,27 +13,33 @@ List *******************************/ ul.ui.list, +ol.ui.list, .ui.list { + list-style-type: none; margin: 1em 0em; padding: 0em; } +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + padding: 0.5em 0em 0.5em 1.2em; +} ul.ui.list:first-child, +ol.ui.list:first-child, .ui.list:first-child { margin-top: 0em; } ul.ui.list:last-child, +ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0em; } -ul.ui.list li:first-child, -.ui.list .item:first-child { - border-top: none; -} /******************************* Content *******************************/ /* List Item */ ul.ui.list li, +ol.ui.list li, .ui.list .item { display: list-item; list-style-type: none; @@ -42,11 +48,26 @@ ul.ui.list li, line-height: 1.2; } /* Icon */ -.ui.list .icon { - margin: 0em 0.5em 0em 0em; +.ui.list .item > .icon { + margin-right: 0.5em; +} +/* Image */ +.ui.list .item > img { + display: inline-block; + width: 2em; + margin-right: 0.5em; + vertical-align: middle; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; } /* Link */ -ul.ui.list a, .ui.list a { cursor: pointer; } @@ -68,18 +89,15 @@ ul.ui.list a, /*------------------- Horizontal --------------------*/ -ul.ui.horizontal.list, .ui.horizontal.list { display: inline-block; font-size: 0em; } -ul.ui.horizontal.list li, .ui.horizontal.list .item { display: inline-block; margin-left: 1em; font-size: 1rem; } -ul.ui.horizontal.list li:first-child, .ui.horizontal.list .item:first-child { margin-left: 0em; } @@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child, /******************************* Variations *******************************/ +/*------------------- + Selection +--------------------*/ +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -ms-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.selection.list .item:hover { + padding-left: 1em; + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} /*------------------- Bulleted --------------------*/ @@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before, Ordered --------------------*/ ol.ui.list, -ul.ui.ordered.list, .ui.ordered.list { counter-reset: ordered; margin-left: 2em; + list-style-type: none; } ol.ui.list li, -ul.ui.ordered.list li, .ui.ordered.list .item { - counter-increment: ordered; + list-style-type: none; position: relative; } ol.ui.list li:before, -ul.ui.ordered.list li:before, .ui.ordered.list .item:before { position: absolute; - top: 0.4em; left: -2em; - content: counter(ordered); - width: 0.8em; - margin-right: 0.5rem; - padding-right: 0.5em; + counter-increment: ordered; + content: counters(ordered, "."); text-align: right; - line-height: 1.2rem; vertical-align: top; - opacity: 0.8; + opacity: 0.75; +} +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 2em; +} +ol.ui.list ol ol li:before, +.ui.ordered.list .list .list .item:before { + left: -2.5em; } /* Horizontal Ordered */ ol.ui.horizontal.list, -ul.ui.ordered.horizontal.list, .ui.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, -ul.ui.ordered.horizontal.list li:before, .ui.ordered.horizontal.list .item:before { position: static; - margin: 0em; + margin: 0em 0.5em 0em 0em; } /*------------------- Divided --------------------*/ -ul.ui.divided.list li, -.ui.divided.list .item { +.ui.divided.list > .item, +.ui.divided.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.divided.list li:first-child, +.ui.divided.list .item .menu .item { + border-width: 0px; +} .ui.divided.list .item:first-child { - border-top: none; + border-top-width: 0px; +} +/* Sub Menu */ +.ui.divided.list .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.divided.list .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list .list .item:first-child { + border-top-width: 1px; } /* Divided bulleted */ -ul.ui.divided.bulleted.list, .ui.divided.bulleted.list { margin-left: 0em; } -ul.ui.divided.bulleted.list li, .ui.divided.bulleted.list .item { padding-left: 1.5em; } -ul.ui.divided.bulleted.list li:before, .ui.divided.bulleted.list .item:before { left: 0em; } /* Divided ordered */ -ol.ui.divided.list, -ul.ui.divided.ordered.list, .ui.divided.ordered.list { margin-left: 0em; } -ol.ui.divided.list li, -ul.ui.divided.ordered.list li, -.ui.divided.ordered.list .item { +.ui.divided.ordered.list > .item { padding-left: 2em; } -ol.ui.divided.list li:before, -ul.ui.divided.ordered.list li:before, -.ui.divided.ordered.list .item:before { +.ui.divided.ordered.list > .item:before { left: 0em; } +.ui.divided.ordered.list .item .list { + margin-left: -2em; +} /* Divided horizontal */ -ul.ui.divided.horizontal.list, .ui.divided.horizontal.list { margin-left: 0em; } -ul.ui.divided.horizontal.list li, .ui.divided.horizontal.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li, padding-right: 0.75em; line-height: 0.6; } -ul.ui.horizontal.divided.list li:first-child, .ui.horizontal.divided.list .item:first-child { border-left: none; padding-left: 0em; @@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child, /*------------------- Celled --------------------*/ -ul.ui.celled.list li, -.ui.celled.list .item { +.ui.celled.list > .item, +.ui.celled.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.celled.list li:last-child, -.ui.celled.list .item:last-child { +.ui.celled.list > .item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} /* Celled Bulleted */ -ul.ui.celled.bulleted.list, .ui.celled.bulleted.list { margin-left: 0em; } -ul.ui.celled.bulleted.list li, -.ui.celled.bulleted.list .item { +.ui.celled.bulleted.list > .item { padding-left: 1.5em; } -ul.ui.celled.bulleted.list li:before, -.ui.celled.bulleted.list .item:before { +.ui.celled.bulleted.list > .item:before { left: 0em; } /* Celled Ordered */ -ol.ui.celled.list, -ul.ui.celled.ordered.list, .ui.celled.ordered.list { margin-left: 0em; } -ol.ui.celled.list li, -ul.ui.celled.ordered.list li, .ui.celled.ordered.list .item { padding-left: 2em; } -ol.ui.celled.list li:before, -ul.ui.celled.ordered.list li:before, .ui.celled.ordered.list .item:before { left: 0em; } +.ui.celled.ordered.list .item .list { + margin-left: -2em; +} /* Celled Horizontal */ -ul.ui.horizontal.celled.list, .ui.horizontal.celled.list { margin-left: 0em; } -ul.ui.horizontal.celled.list li, .ui.horizontal.celled.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li, padding-right: 0.75em; line-height: 0.6; } -ul.ui.horizontal.celled.list li:last-child, .ui.horizontal.celled.list .item:last-child { border-bottom: none; border-right: 1px solid rgba(0, 0, 0, 0.1); } +/*------------------- + Sizes +--------------------*/ +.ui.mini.list .item { + font-size: 0.8125rem; +} +.ui.tiny.list .item { + font-size: 0.875rem; +} +.ui.small.list .item { + font-size: 0.875rem; +} +.ui.large.list .item { + font-size: 1.125rem; +} +.ui.big.list .item { + font-size: 1.25rem; +} +.ui.huge.list .item { + font-size: 1.375rem; +} +.ui.massive.list .item { + font-size: 1.5rem; +} diff --git a/node/src/documents/elements/list.html b/node/src/documents/elements/list.html index c6f2ca44f..f4976cb28 100755 --- a/node/src/documents/elements/list.html +++ b/node/src/documents/elements/list.html @@ -24,49 +24,112 @@ type : 'UI Collection' -

Standard

+

Types

List

A standard list

-
+
+
+ +
+
Snickerdoodle
+ An excellent companion +
+
+
+ +
+
Poodle
+ A poodle, its pretty basic +
+
+
+ +
+
Paulo
+ He's also a dog +
+
+
+ +
+
Paulo
+ He's also a dog +
+
+
+ +
+
Paulo
+ He's also a dog +
+
+
+
+
+
+ +
+

Bulleted

+

A list can mark items with a bullet

+
New York City
Chicago
Los Angeles
San Francisco
+
Others +
+
Paris
+
Havana
+
Lisbon
+
+
-
For convenience, a list can also use ul and li tags to specify lists and list items.
+
For convenience, a simple bulleted list can also use ul tag.
  • New York City
  • Chicago
  • Los Angeles
    • -
  • San Francisco
-

Horizontal List

-

A list can be formatted horizontally

-
-
- Apples -
-
- Pears -
-
- Oranges -
-
- Soursop +

Ordered

+

A list can be ordered numerically

+
+
Getting Started
+
Introduction
+
Languages +
+
HTML
+
Javascript
+
CSS
+
+
+
For convenience, a simple ordered list can also use the ol tag
+
    +
  1. New York City
    2. +
  2. Virginia Beach
    3. +
  3. Others
    4. +
      +
    1. Paris
      2. +
    2. Havana
      3. +
    3. Lisbon
      4. +
    + +
+
+ +

Content

-

Icon List

-

A list can be formatted so that each item has an icon

+

Icon

+

A list item can have an icon

@@ -87,8 +150,6 @@ type : 'UI Collection'
-

Content

-

Link

A list can contain items that link

@@ -103,7 +164,7 @@ type : 'UI Collection'

Header

A list item can contain a header

-
+
New York City
A lovely city @@ -128,10 +189,37 @@ type : 'UI Collection'

Variations

+
-

Bulleted

-

A list can mark items with a bullet

-
+

Horizontal List

+

A list can be formatted horizontally

+
+
+ +
+
Snickerdoodle
+ An excellent companion +
+
+
+ +
+
Poodle
+ A poodle, its pretty basic +
+
+
+ +
+
Paulo
+ He's also a dog +
+
+
+
+ +
+
New York City
Chicago
Los Angeles
@@ -156,28 +244,30 @@ type : 'UI Collection'
-

Ordered

-

A list can be ordered numerically

-
-
New York City
-
Chicago
-
Los Angeles
-
San Francisco
-
Detroit
-
Richmond
-
Nashville
-
St Louis
-
Kansas City
-
Oakland
-
Virginia Beach
-
-
-
-
-
New York City
-
Chicago
-
Los Angeles
-
San Francisco
+

Selection

+

A selection list formats list items as possible choices

+
+
+ +
+
Snickerdoodle
+ An excellent companion +
+
+
+ +
+
Poodle
+ A poodle, its pretty basic +
+
+
+ +
+
Paulo
+ He's also a dog +
+
@@ -189,6 +279,11 @@ type : 'UI Collection'
Chicago
Los Angeles
San Francisco
+
+
Paris
+
Havana
+
Lisbon
+
@@ -207,6 +302,11 @@ type : 'UI Collection'
Chicago
Los Angeles
San Francisco
+
+
Paris
+
Havana
+
Lisbon
+
@@ -217,6 +317,46 @@ type : 'UI Collection'
+
+

Sizes

+

A list can vary in size

+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
About Us
+
Contact
+
Support
+
+
+
\ No newline at end of file diff --git a/node/src/files/components/semantic/elements/button.css b/node/src/files/components/semantic/elements/button.css index c113f364d..99f152e79 100644 --- a/node/src/files/components/semantic/elements/button.css +++ b/node/src/files/components/semantic/elements/button.css @@ -20,8 +20,8 @@ min-height: 1em; outline: none; border: none; - background-color: #999999; - color: #FFFFFF; + background-color: #EBEBEB; + color: #999999; padding: 0.8em 1.5em; font-size: 1rem; text-transform: uppercase; @@ -118,14 +118,14 @@ .ui.active.button { opacity: 1 !important; background-color: #B0B0B0; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - -webkit-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; - -moz-box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; - box-shadow: 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + -webkit-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; + -moz-box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; + box-shadow: 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset; } .ui.buttons .active.button, .ui.buttons .active.button a, @@ -140,6 +140,7 @@ .ui.button.hover { opacity: 1 !important; background-color: #A4A4A4; + color: #FFFFFF; } .ui.button:hover .icon, .ui.button.hover .icon { @@ -150,9 +151,10 @@ ---------------*/ /* Down */ .ui.button:active, -.ui.button.pressed { +.ui.button.down { opacity: 1 !important; background-color: #8C8C8C; + color: #FFFFFF; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; @@ -510,17 +512,17 @@ } .ui.buttons.mini .button, .ui.mini.button { - font-size: 0.8rem; + font-size: 0.8125rem; padding: 0.6em 0.8em; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 0.9rem; + font-size: 0.875rem; padding: 0.6em 0.8em; } .ui.small.buttons .button, .ui.small.button { - font-size: 0.9rem; + font-size: 0.875rem; } .ui.large.buttons .button, .ui.large.button { diff --git a/node/src/files/components/semantic/elements/list.css b/node/src/files/components/semantic/elements/list.css index 4a1078749..78f49ded7 100644 --- a/node/src/files/components/semantic/elements/list.css +++ b/node/src/files/components/semantic/elements/list.css @@ -13,27 +13,33 @@ List *******************************/ ul.ui.list, +ol.ui.list, .ui.list { + list-style-type: none; margin: 1em 0em; padding: 0em; } +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + padding: 0.5em 0em 0.5em 1.2em; +} ul.ui.list:first-child, +ol.ui.list:first-child, .ui.list:first-child { margin-top: 0em; } ul.ui.list:last-child, +ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0em; } -ul.ui.list li:first-child, -.ui.list .item:first-child { - border-top: none; -} /******************************* Content *******************************/ /* List Item */ ul.ui.list li, +ol.ui.list li, .ui.list .item { display: list-item; list-style-type: none; @@ -42,11 +48,26 @@ ul.ui.list li, line-height: 1.2; } /* Icon */ -.ui.list .icon { - margin: 0em 0.5em 0em 0em; +.ui.list .item > .icon { + margin-right: 0.5em; +} +/* Image */ +.ui.list .item > img { + display: inline-block; + width: 2em; + margin-right: 0.5em; + vertical-align: middle; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; } /* Link */ -ul.ui.list a, .ui.list a { cursor: pointer; } @@ -68,18 +89,15 @@ ul.ui.list a, /*------------------- Horizontal --------------------*/ -ul.ui.horizontal.list, .ui.horizontal.list { display: inline-block; font-size: 0em; } -ul.ui.horizontal.list li, .ui.horizontal.list .item { display: inline-block; margin-left: 1em; font-size: 1rem; } -ul.ui.horizontal.list li:first-child, .ui.horizontal.list .item:first-child { margin-left: 0em; } @@ -95,6 +113,32 @@ ul.ui.horizontal.list li:first-child, /******************************* Variations *******************************/ +/*------------------- + Selection +--------------------*/ +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + -webkit-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -moz-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -o-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + -ms-transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; + transition: 0.2s color ease, 0.2s padding-left ease, 0.2s background-color ease; +} +.ui.selection.list .item:hover { + padding-left: 1em; + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} /*------------------- Bulleted --------------------*/ @@ -139,92 +183,99 @@ ul.ui.horizontal.bulleted.list li:first-child::before, Ordered --------------------*/ ol.ui.list, -ul.ui.ordered.list, .ui.ordered.list { counter-reset: ordered; margin-left: 2em; + list-style-type: none; } ol.ui.list li, -ul.ui.ordered.list li, .ui.ordered.list .item { - counter-increment: ordered; + list-style-type: none; position: relative; } ol.ui.list li:before, -ul.ui.ordered.list li:before, .ui.ordered.list .item:before { position: absolute; - top: 0.4em; left: -2em; - content: counter(ordered); - width: 0.8em; - margin-right: 0.5rem; - padding-right: 0.5em; + counter-increment: ordered; + content: counters(ordered, "."); text-align: right; - line-height: 1.2rem; vertical-align: top; - opacity: 0.8; + opacity: 0.75; +} +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 2em; +} +ol.ui.list ol ol li:before, +.ui.ordered.list .list .list .item:before { + left: -2.5em; } /* Horizontal Ordered */ ol.ui.horizontal.list, -ul.ui.ordered.horizontal.list, .ui.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, -ul.ui.ordered.horizontal.list li:before, .ui.ordered.horizontal.list .item:before { position: static; - margin: 0em; + margin: 0em 0.5em 0em 0em; } /*------------------- Divided --------------------*/ -ul.ui.divided.list li, -.ui.divided.list .item { +.ui.divided.list > .item, +.ui.divided.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.divided.list li:first-child, +.ui.divided.list .item .menu .item { + border-width: 0px; +} .ui.divided.list .item:first-child { - border-top: none; + border-top-width: 0px; +} +/* Sub Menu */ +.ui.divided.list .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.divided.list .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list .list .item:first-child { + border-top-width: 1px; } /* Divided bulleted */ -ul.ui.divided.bulleted.list, .ui.divided.bulleted.list { margin-left: 0em; } -ul.ui.divided.bulleted.list li, .ui.divided.bulleted.list .item { padding-left: 1.5em; } -ul.ui.divided.bulleted.list li:before, .ui.divided.bulleted.list .item:before { left: 0em; } /* Divided ordered */ -ol.ui.divided.list, -ul.ui.divided.ordered.list, .ui.divided.ordered.list { margin-left: 0em; } -ol.ui.divided.list li, -ul.ui.divided.ordered.list li, -.ui.divided.ordered.list .item { +.ui.divided.ordered.list > .item { padding-left: 2em; } -ol.ui.divided.list li:before, -ul.ui.divided.ordered.list li:before, -.ui.divided.ordered.list .item:before { +.ui.divided.ordered.list > .item:before { left: 0em; } +.ui.divided.ordered.list .item .list { + margin-left: -2em; +} /* Divided horizontal */ -ul.ui.divided.horizontal.list, .ui.divided.horizontal.list { margin-left: 0em; } -ul.ui.divided.horizontal.list li, .ui.divided.horizontal.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -233,7 +284,6 @@ ul.ui.divided.horizontal.list li, padding-right: 0.75em; line-height: 0.6; } -ul.ui.horizontal.divided.list li:first-child, .ui.horizontal.divided.list .item:first-child { border-left: none; padding-left: 0em; @@ -241,51 +291,53 @@ ul.ui.horizontal.divided.list li:first-child, /*------------------- Celled --------------------*/ -ul.ui.celled.list li, -.ui.celled.list .item { +.ui.celled.list > .item, +.ui.celled.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.celled.list li:last-child, -.ui.celled.list .item:last-child { +.ui.celled.list > .item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} /* Celled Bulleted */ -ul.ui.celled.bulleted.list, .ui.celled.bulleted.list { margin-left: 0em; } -ul.ui.celled.bulleted.list li, -.ui.celled.bulleted.list .item { +.ui.celled.bulleted.list > .item { padding-left: 1.5em; } -ul.ui.celled.bulleted.list li:before, -.ui.celled.bulleted.list .item:before { +.ui.celled.bulleted.list > .item:before { left: 0em; } /* Celled Ordered */ -ol.ui.celled.list, -ul.ui.celled.ordered.list, .ui.celled.ordered.list { margin-left: 0em; } -ol.ui.celled.list li, -ul.ui.celled.ordered.list li, .ui.celled.ordered.list .item { padding-left: 2em; } -ol.ui.celled.list li:before, -ul.ui.celled.ordered.list li:before, .ui.celled.ordered.list .item:before { left: 0em; } +.ui.celled.ordered.list .item .list { + margin-left: -2em; +} /* Celled Horizontal */ -ul.ui.horizontal.celled.list, .ui.horizontal.celled.list { margin-left: 0em; } -ul.ui.horizontal.celled.list li, .ui.horizontal.celled.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -294,8 +346,31 @@ ul.ui.horizontal.celled.list li, padding-right: 0.75em; line-height: 0.6; } -ul.ui.horizontal.celled.list li:last-child, .ui.horizontal.celled.list .item:last-child { border-bottom: none; border-right: 1px solid rgba(0, 0, 0, 0.1); } +/*------------------- + Sizes +--------------------*/ +.ui.mini.list .item { + font-size: 0.8125rem; +} +.ui.tiny.list .item { + font-size: 0.875rem; +} +.ui.small.list .item { + font-size: 0.875rem; +} +.ui.large.list .item { + font-size: 1.125rem; +} +.ui.big.list .item { + font-size: 1.25rem; +} +.ui.huge.list .item { + font-size: 1.375rem; +} +.ui.massive.list .item { + font-size: 1.5rem; +} diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index f755ed93f..565bed233 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -272,18 +272,6 @@ a:hover { } /* lists */ -#example ol { - list-style-position: inside; - margin: 10px 0px 40px; - padding: 0px; -} -#example ol li { - list-style-type: decimal; - margin: 0px 0px 10px; -} -#example ol li a { - font-weight: bold; -} #example .features { list-style-position: inside; margin: 10px 0px 0px; diff --git a/src/elements/button.less b/src/elements/button.less index e4725f37b..59a38187e 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -25,8 +25,8 @@ outline: none; border: none; - background-color: #999999; - color: #FFFFFF; + background-color: #EBEBEB; + color: #999999; padding: 0.8em 1.5em; @@ -186,20 +186,20 @@ opacity: 1 !important; background-color: #B0B0B0; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))); - background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: -o-linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); - background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%); -webkit-box-shadow: - 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset + 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset ; -moz-box-shadow: - 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset + 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset ; box-shadow: - 0px 0px 0.3em 1px rgba(0, 0, 0, 0.2) inset + 0px 0px 0.2em 0px rgba(0, 0, 0, 0.15) inset ; } .ui.buttons .active.button, @@ -217,6 +217,7 @@ .ui.button.hover { opacity: 1 !important; background-color: #A4A4A4; + color: #FFFFFF; } .ui.button:hover .icon, .ui.button.hover .icon { @@ -229,9 +230,10 @@ /* Down */ .ui.button:active, -.ui.button.pressed { +.ui.button.down { opacity: 1 !important; background-color: #8C8C8C; + color: #FFFFFF; -webkit-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0em 0.125em 0.125em 1px rgba(0, 0, 0, 0.2) inset; @@ -634,17 +636,17 @@ .ui.buttons.mini .button, .ui.mini.button { - font-size: 0.8rem; + font-size: 0.8125rem; padding: 0.6em 0.8em; } .ui.tiny.buttons .button, .ui.tiny.button { - font-size: 0.9rem; + font-size: 0.875rem; padding: 0.6em 0.8em; } .ui.small.buttons .button, .ui.small.button { - font-size: 0.9rem; + font-size: 0.875rem; } .ui.large.buttons .button, .ui.large.button { diff --git a/src/elements/list.less b/src/elements/list.less index 7d0a611fc..6cda09103 100755 --- a/src/elements/list.less +++ b/src/elements/list.less @@ -15,34 +15,38 @@ *******************************/ ul.ui.list, +ol.ui.list, .ui.list { + list-style-type: none; margin: 1em 0em; padding: 0em; } +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + padding: 0.5em 0em 0.5em 1.2em; +} ul.ui.list:first-child, +ol.ui.list:first-child, .ui.list:first-child { margin-top: 0em; } ul.ui.list:last-child, +ol.ui.list:last-child, .ui.list:last-child { margin-bottom: 0em; } -ul.ui.list li:first-child, -.ui.list .item:first-child { - border-top: none; -} - - /******************************* Content *******************************/ /* List Item */ ul.ui.list li, +ol.ui.list li, .ui.list .item { display: list-item; list-style-type: none; @@ -53,12 +57,30 @@ ul.ui.list li, } /* Icon */ -.ui.list .icon { - margin: 0em 0.5em 0em 0em; +.ui.list .item > .icon { + margin-right: 0.5em; +} + +/* Image */ +.ui.list .item > img { + display: inline-block; + width: 2em; + margin-right: 0.5em; + + vertical-align: middle; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; +} + +/* Content */ +.ui.list .item > .content { + display: inline-block; + vertical-align: middle; + line-height: 1.2; } /* Link */ -ul.ui.list a, .ui.list a { cursor: pointer; } @@ -86,19 +108,17 @@ ul.ui.list a, /*------------------- Horizontal --------------------*/ -ul.ui.horizontal.list, + .ui.horizontal.list { display: inline-block; font-size: 0em; } -ul.ui.horizontal.list li, .ui.horizontal.list .item { display: inline-block; margin-left: 1em; font-size: 1rem; } -ul.ui.horizontal.list li:first-child, .ui.horizontal.list .item:first-child { margin-left: 0em; } @@ -123,10 +143,61 @@ ul.ui.horizontal.list li:first-child, Variations *******************************/ +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .item { + cursor: pointer; + color: rgba(0, 0, 0, 0.4); + padding: 0.5em; + + -webkit-transition: + 0.2s color ease, + 0.2s padding-left ease, + 0.2s background-color ease + ; + -moz-transition: + 0.2s color ease, + 0.2s padding-left ease, + 0.2s background-color ease + ; + -o-transition: + 0.2s color ease, + 0.2s padding-left ease, + 0.2s background-color ease + ; + -ms-transition: + 0.2s color ease, + 0.2s padding-left ease, + 0.2s background-color ease + ; + transition: + 0.2s color ease, + 0.2s padding-left ease, + 0.2s background-color ease + ; +} +.ui.selection.list .item:hover { + padding-left: 1em; + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item:active { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.7); +} +.ui.selection.list .item.active { + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.7); +} + + /*------------------- Bulleted --------------------*/ + ul.ui.bulleted.list, .ui.bulleted.list { margin-left: 1em; @@ -146,7 +217,6 @@ ul.ui.bulleted.list li:before, } /* Horizontal Bulleted */ - ul.ui.horizontal.bulleted.list, .ui.horizontal.bulleted.list { margin-left: 0em; @@ -173,47 +243,49 @@ ul.ui.horizontal.bulleted.list li:first-child::before, --------------------*/ ol.ui.list, -ul.ui.ordered.list, .ui.ordered.list { counter-reset: ordered; margin-left: 2em; + list-style-type: none; } ol.ui.list li, -ul.ui.ordered.list li, .ui.ordered.list .item { - counter-increment: ordered; + list-style-type: none; position: relative; } ol.ui.list li:before, -ul.ui.ordered.list li:before, .ui.ordered.list .item:before { position: absolute; - top: 0.4em; left: -2em; - content: counter(ordered); - - width: 0.8em; - margin-right: 0.5rem; - padding-right: 0.5em; + counter-increment: ordered; + content: counters(ordered, "."); text-align: right; - line-height: 1.2rem; vertical-align: top; - opacity: 0.8; + opacity: 0.75; +} + +ol.ui.list ol, +.ui.ordered.list .list { + counter-reset: ordered; + padding-left: 2em; +} + +ol.ui.list ol ol li:before, +.ui.ordered.list .list .list .item:before { + left: -2.5em; } /* Horizontal Ordered */ ol.ui.horizontal.list, -ul.ui.ordered.horizontal.list, .ui.ordered.horizontal.list { margin-left: 0em; } ol.ui.horizontal.list li:before, -ul.ui.ordered.horizontal.list li:before, .ui.ordered.horizontal.list .item:before { position: static; - margin: 0em; + margin: 0em 0.5em 0em 0em; } @@ -221,55 +293,62 @@ ul.ui.ordered.horizontal.list li:before, Divided --------------------*/ -ul.ui.divided.list li, -.ui.divided.list .item { +.ui.divided.list > .item, +.ui.divided.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.divided.list li:first-child, +.ui.divided.list .item .menu .item { + border-width: 0px; +} .ui.divided.list .item:first-child { - border-top: none; + border-top-width: 0px; +} + +/* Sub Menu */ +.ui.divided.list .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.divided.list .list .item { + padding-left: 1em; + padding-right: 1em; +} +.ui.divided.list .list .item:first-child { + border-top-width: 1px; } /* Divided bulleted */ -ul.ui.divided.bulleted.list, .ui.divided.bulleted.list { margin-left: 0em; } -ul.ui.divided.bulleted.list li, .ui.divided.bulleted.list .item { padding-left: 1.5em; } -ul.ui.divided.bulleted.list li:before, .ui.divided.bulleted.list .item:before { left: 0em; } /* Divided ordered */ -ol.ui.divided.list, -ul.ui.divided.ordered.list, .ui.divided.ordered.list { margin-left: 0em; } -ol.ui.divided.list li, -ul.ui.divided.ordered.list li, -.ui.divided.ordered.list .item { +.ui.divided.ordered.list > .item { padding-left: 2em; } -ol.ui.divided.list li:before, -ul.ui.divided.ordered.list li:before, -.ui.divided.ordered.list .item:before { +.ui.divided.ordered.list > .item:before { left: 0em; } +.ui.divided.ordered.list .item .list { + margin-left: -2em; +} /* Divided horizontal */ -ul.ui.divided.horizontal.list, .ui.divided.horizontal.list { margin-left: 0em; } -ul.ui.divided.horizontal.list li, .ui.divided.horizontal.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -279,7 +358,6 @@ ul.ui.divided.horizontal.list li, line-height: 0.6; } -ul.ui.horizontal.divided.list li:first-child, .ui.horizontal.divided.list .item:first-child { border-left: none; padding-left: 0em; @@ -292,54 +370,57 @@ ul.ui.horizontal.divided.list li:first-child, Celled --------------------*/ -ul.ui.celled.list li, -.ui.celled.list .item { +.ui.celled.list > .item, +.ui.celled.list > .list { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-left: 0.5em; padding-right: 0.5em; } -ul.ui.celled.list li:last-child, -.ui.celled.list .item:last-child { +.ui.celled.list > .item:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +/* Sub Menu */ +.ui.celled.list .item .list { + margin-left: -1.2em; + margin-right: -1.2em; +} +.ui.celled.list .item .list .item { + border-width: 0px; +} +.ui.celled.list .list .item:first-child { + border-top-width: 0px; +} + /* Celled Bulleted */ -ul.ui.celled.bulleted.list, .ui.celled.bulleted.list { margin-left: 0em; } -ul.ui.celled.bulleted.list li, -.ui.celled.bulleted.list .item { +.ui.celled.bulleted.list > .item { padding-left: 1.5em; } -ul.ui.celled.bulleted.list li:before, -.ui.celled.bulleted.list .item:before { +.ui.celled.bulleted.list > .item:before { left: 0em; } /* Celled Ordered */ -ol.ui.celled.list, -ul.ui.celled.ordered.list, .ui.celled.ordered.list { margin-left: 0em; } -ol.ui.celled.list li, -ul.ui.celled.ordered.list li, .ui.celled.ordered.list .item { padding-left: 2em; } -ol.ui.celled.list li:before, -ul.ui.celled.ordered.list li:before, .ui.celled.ordered.list .item:before { left: 0em; } +.ui.celled.ordered.list .item .list { + margin-left: -2em; +} /* Celled Horizontal */ -ul.ui.horizontal.celled.list, .ui.horizontal.celled.list { margin-left: 0em; } -ul.ui.horizontal.celled.list li, .ui.horizontal.celled.list .item { border-top: none; border-left: 1px solid rgba(0, 0, 0, 0.1); @@ -349,8 +430,34 @@ ul.ui.horizontal.celled.list li, line-height: 0.6; } -ul.ui.horizontal.celled.list li:last-child, .ui.horizontal.celled.list .item:last-child { border-bottom: none; border-right: 1px solid rgba(0, 0, 0, 0.1); +} + + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list .item { + font-size: 0.8125rem; +} +.ui.tiny.list .item { + font-size: 0.875rem; +} +.ui.small.list .item { + font-size: 0.875rem; +} +.ui.large.list .item { + font-size: 1.125rem; +} +.ui.big.list .item { + font-size: 1.25rem; +} +.ui.huge.list .item { + font-size: 1.375rem; +} +.ui.massive.list .item { + font-size: 1.5rem; } \ No newline at end of file