diff --git a/build/uncompressed/collections/grid.css b/build/uncompressed/collections/grid.css index 2aef461f0..6c944f880 100644 --- a/build/uncompressed/collections/grid.css +++ b/build/uncompressed/collections/grid.css @@ -279,7 +279,7 @@ margin-left: 0% !important; margin-right: 0% !important; } -.ui.divided.grid > .column, +.ui.divided.grid > .column:not(.row), .ui.divided.grid > .row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); @@ -297,16 +297,16 @@ } /* Vertically Divided */ .ui.vertically.divided.grid > .row { - -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); - -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); - box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; } .ui.vertically.divided.grid > .row > .column, -.ui.vertically.divided.grid > .column, +.ui.vertically.divided.grid > .column:not(.row), .ui.vertically.divided.grid > .row:first-child { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; } /*---------------------- Celled diff --git a/build/uncompressed/collections/menu.css b/build/uncompressed/collections/menu.css index c23bbf767..6072e20ee 100644 --- a/build/uncompressed/collections/menu.css +++ b/build/uncompressed/collections/menu.css @@ -390,7 +390,7 @@ margin: 0em; } .ui.vertical.menu .dropdown.item .menu .item { - font-size: 0.875em; + font-size: 1em; padding: 0.75em 1em; } .ui.vertical.menu .dropdown.item .menu .item .icon { diff --git a/build/uncompressed/collections/message.css b/build/uncompressed/collections/message.css index d575cd078..fdc9674d5 100644 --- a/build/uncompressed/collections/message.css +++ b/build/uncompressed/collections/message.css @@ -70,7 +70,6 @@ .ui.message ul.list li { position: relative; list-style-type: none; - font-style: italic; margin: 0em 0em 0em 1em; padding: 0em; } diff --git a/build/uncompressed/elements/list.css b/build/uncompressed/elements/list.css new file mode 100644 index 000000000..f13e20fad --- /dev/null +++ b/build/uncompressed/elements/list.css @@ -0,0 +1,218 @@ +/* + * # Semantic List - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ +/******************************* + List +*******************************/ +ul.ui.list, +.ui.list { + margin: 1em 0em; +} +ul.ui.list:first-child, +.ui.list:first-child { + margin-top: 1em; +} +ul.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, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + padding: 0.3em 0em; + line-height: 1.2; +} +/* Icon */ +.ui.list .icon { + margin: 0em 0.5em 0em 0em; +} +/* Link */ +ul.ui.list a, +.ui.list a { + cursor: pointer; +} +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Header */ +.ui.list .header { + font-weight: bold; +} +/******************************* + Types +*******************************/ +/******************************* + States +*******************************/ +/*------------------- + Hover +--------------------*/ +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*------------------- + Bulleted +--------------------*/ +ul.ui.bulleted.list, +.ui.bulleted.list { + margin-left: 1.5em; +} +ul.ui.bulleted.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.bulleted.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + top: 0.4em; + left: -1.5em; + content: '\25CF'; + font-size: 0.8em; + line-height: 1.2rem; + vertical-align: top; + color: rgba(0, 0, 0, 0.6); +} +/*------------------- + Ordered +--------------------*/ +ol.ui.list, +ul.ui.ordered.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; +} +ol.ui.list li, +ul.ui.ordered.list li, +.ui.ordered.list .item { + counter-increment: ordered; + 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; + border-right: 1px solid rgba(0, 0, 0, 0.1); + padding-right: 0.5em; + text-align: right; + line-height: 1.2rem; + vertical-align: top; + opacity: 0.8; +} +/*------------------- + Divided +--------------------*/ +ul.ui.divided.list li, +.ui.divided.list .item { + 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:first-child { + border-top: none; +} +/* 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 { + padding-left: 2em; +} +ol.ui.divided.list li:before, +ul.ui.divided.ordered.list li:before, +.ui.divided.ordered.list .item:before { + left: 0em; +} +/*------------------- + Celled +--------------------*/ +ul.ui.celled.list li, +.ui.celled.list .item { + 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 { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +/* 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 { + padding-left: 1.5em; +} +ul.ui.celled.bulleted.list li: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; +} diff --git a/node/package.json b/node/package.json index 2452c0c70..537ea95b7 100755 --- a/node/package.json +++ b/node/package.json @@ -4,6 +4,6 @@ "version": 0.1 }, "dependencies": { - "docpad": "~6.48.1" + "docpad": "~6.49.0" } } diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 09ee31357..5482d7eab 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -57,7 +57,6 @@ type : 'UI Collection'

Rows

A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit flush vertically.

-

@@ -339,6 +338,33 @@ type : 'UI Collection'
+
+

Vertically Divided Grid

+

A grid can have dividers between rows

+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
+
+
+
+ +

Celled Grid

A grid can have rows divided into cells

@@ -782,7 +808,7 @@ type : 'UI Collection'

Row Alignment (Floating)

-

A column can be"floated", to either the left or right of its row.

+

A column can be "floated", to either the left or right of its row.

@@ -814,7 +840,7 @@ type : 'UI Collection'

Column Width

-

A column can span across multiple grid columns.

+

A column can vary in width taking up more than a single grid column.

Colume One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 6e908b7f0..6b3674bc9 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -47,7 +47,14 @@ type : 'UI Collection' More
Edit Profile - Choose Language +
+ Choose Language +
+
English
+
Russian
+
Spanish
+
+
Account Settings
diff --git a/node/src/documents/elements/button.html b/node/src/documents/elements/button.html index ffcf1374b..02870b1f3 100755 --- a/node/src/documents/elements/button.html +++ b/node/src/documents/elements/button.html @@ -10,8 +10,8 @@ type : 'UI Element'

Button -
Buttons indicate a possible user action.

+

Buttons indicate a possible user action.

@@ -24,7 +24,7 @@ type : 'UI Element' Groups
-

Standard

+

Types

Basic:

diff --git a/node/src/documents/elements/list.html b/node/src/documents/elements/list.html new file mode 100755 index 000000000..ff758c457 --- /dev/null +++ b/node/src/documents/elements/list.html @@ -0,0 +1,156 @@ +--- +layout : 'default' +css : 'list' +title : 'List' +type : 'UI Collection' +--- + +
+
+

+ List +

+

A list is a group of related items ordered consecutively.

+
+
+
+ +
+
+ Types + Content + States + Variations +
+
+ +

Standard

+
+

List

+

A standard list

+
+
New York City
+
Chicago
+
Los Angeles
+
San Francisco
+
+
+ +
+

Icon List

+

An icon list

+
+ + + What is a FAQ? + + + + How does one go about reading answers to questions in a FAQ + + + + How do you close a web browser? + + + + What is the most popular FAQ question? + +
+
+ +

Content

+ +
+

Link

+

A list can contain a link

+
+ What is a FAQ? + How does one go about reading answers to questions in a FAQ + How do you close a web browser? + What is the most popular FAQ question? +
+
+ +
+

Header

+

A list can contain a header

+
+
+
New York City
+ A lovely city +
+
+
Chicago
+ Also quite a lovely city +
+
+
Los Angeles
+ Sometimes can be a lovely city +
+
+
San Francisco
+ What a lovely city +
+
+
+ +

States

+ + +

Variations

+ +
+

Bulleted

+

A list can mark items with a bullet

+
+
New York City
+
Chicago
+
Los Angeles
+
San Francisco
+
+
+ +
+

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
+
+
+ +
+

Divided

+

A list can show divisions between content

+
+
New York City
+
Chicago
+
Los Angeles
+
San Francisco
+
+
+ +
+

Celled

+

A list can divide its items into cells

+
+
New York City
+
Chicago
+
Los Angeles
+
San Francisco
+
+
+ + + +
\ No newline at end of file diff --git a/node/src/documents/index.html b/node/src/documents/index.html index d2cd5b6ae..294ff9bdf 100755 --- a/node/src/documents/index.html +++ b/node/src/documents/index.html @@ -1,7 +1,7 @@ --- layout : 'default' css : 'index' -title : 'Introduction' +title : 'Getting Started' type : 'Semantic' --- @@ -21,8 +21,9 @@ type : 'Semantic'

Comparing UI Frameworks

-

3 column grid

-
+
+
+

3 column grid

Semantic
@@ -54,9 +55,8 @@ type : 'Semantic'
-
-

Navigation Menu

-
+
+

Navigation Menu

Semantic
@@ -86,9 +86,8 @@ type : 'Semantic'
-
-

Buttons

-
+
+

Buttons

Semantic
@@ -109,5 +108,6 @@ type : 'Semantic'
+
\ No newline at end of file diff --git a/node/src/documents/index_old.html b/node/src/documents/index_old.html index fa24748fe..0eef13c91 100755 --- a/node/src/documents/index_old.html +++ b/node/src/documents/index_old.html @@ -2,7 +2,7 @@ layout : 'default' css : 'index' title : 'Introduction' -type : 'Semantic' +type : 'Not Used' --- diff --git a/node/src/documents/introduction/definitions.html b/node/src/documents/introduction/definitions.html index 7adf03f96..9f2a05ffa 100755 --- a/node/src/documents/introduction/definitions.html +++ b/node/src/documents/introduction/definitions.html @@ -26,26 +26,40 @@ type : 'UI Introduction'

Defining Definitions

-

Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element on a page. A UI definition is portable, and stand-alone

+

Definitions in semantic are groups of css, fonts, images, and javascript which make up a single element. Unlike other javascript libraries, semantic UI elements are stand-alone and only require their own assets to function correctly.

-

Definitions avoid conflicts with other elements by descending rules from a common namespace.

+

CSS Definitions avoid conflicts with other elements by descending rules from a common ui namespace. UI namespaces should use a single word class name that represents its function descriptively on a web site. For example, a button will be namespaced in html using the class name "ui button".

+

Definition Types

Semantic has five different ui definitions. These are useful patterns for describing re-usable parts of a website.

-
    -
  • Element - a basic building block of a website, exists alone or in homogenous groups
    • -
  • Collection - a heterogeneous group of several elements which are usually found together
    • -
  • View - a way to present common website content
    • -
  • Module - an element that also includes behavior as part of its definition
    • -
  • Behavior - a set of behaviors not specfically tied to a design
    • -
+ + + + + + + + + + + + + + + + + + + + + +
Element a basic building block of a website, exists alone or in homogenous groups
Collection a heterogeneous group of several elements which are usually found together
View a way to present common website content
Module an element that also includes behavior as part of its definition
Behavior a set of behaviors not specfically tied to a design

UI Elements

-

UI Elements are interface elements which do not contain other elements inside themselves. This can be thought of as similar in definition as an "element" in chemistry.

- -

UI elements can have plural definitions when they are known to exist together frequently.

+

UI Elements are page elements which are indivisible. This can be thought of as similar in definition as an "element" in chemistry.

-

In this case each button will be large because we understand it is a part of the large button group

+

UI elements can have plural definitions when they are known to exist together in groups. Plural variations allow you to only specify qualities once, allowing them to be inferred across all members of a group.

@@ -55,19 +69,46 @@ type : 'UI Introduction'
Examples of UI elements: -
    -
  • Buttons
    • -
  • Labels
    • -
  • Headers
    • -
  • Progress bars
    • -
- + + + + + + + + + + + + + + + + + + + + + +
Button +
Button
+
Label +
label
+
Input +
+ +
+
Loader +
+
Segment +
Segment
+

UI Collections

-

UI Collections are groups of heteregeneous UI elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.

+

UI Collections are groups of heteregeneous page elements which are usually found together. Carrying the chemistry metaphor, these can be thought of as molecules.

-

UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements, collections are not typically useful to define in plural.

+

UI collections have a definition of elements that exist, or could exist inside of them. They do not usually require all elements to be found, but they describe a list of the "usual suspects". Unlike elements definitions, collections are not typically useful to define in plural.

Examples of UI collections:

    diff --git a/node/src/documents/introduction/types.html b/node/src/documents/introduction/types.html index e79c36558..04ea1fae3 100755 --- a/node/src/documents/introduction/types.html +++ b/node/src/documents/introduction/types.html @@ -12,7 +12,7 @@ type : 'UI Introduction'
    Draft
    Incomplete
    -

    Types are exclusive versions of an element included in its definition

    +

    Types are exclusive versions of an element that very from its prototype or standard definition

@@ -27,7 +27,7 @@ type : 'UI Introduction'

A type is a mutually exclusive change to an element. Types may require different html structures to work correctly, or expect different content.

Content

-

For example an icon menu might expect you to include glyphs instead of text to be formatted correctly

+

An icon menu might expect you to include glyphs instead of text to be formatted correctly

@@ -55,7 +55,7 @@ type : 'UI Introduction'

HTML Differences

-

Types may also require different html to be formatted correctly. A tiered menu needs additional content like a sub menu to display itself correctly

+

Types may also require different html. For example, a tiered menu needs html specified for a sub menu to display itself correctly

diff --git a/node/src/documents/module.html b/node/src/documents/module.html index 1d88d3494..b74d83293 100755 --- a/node/src/documents/module.html +++ b/node/src/documents/module.html @@ -30,7 +30,7 @@ type : 'Semantic'

Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins.

Common Settings

- +
diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html index 6e4ea1244..46b5f6f1e 100755 --- a/node/src/documents/modules/sidebar.html +++ b/node/src/documents/modules/sidebar.html @@ -1,6 +1,6 @@ --- layout : 'default' -css : 'sidebar' +css : 'side' title : 'Sidebar' type : 'UI Module' @@ -10,7 +10,7 @@ type : 'UI Module'
-

Sidebar

+

Sidebar
Incomplete

A sidebar is a menu hidden beside page content

@@ -25,180 +25,14 @@ type : 'UI Module' Settings -
-
- -

Initializing

-

Sidebars are initialized by calling sidebar on an element with class ui sidebar

-
- $('.ui.sidebar') - .sidebar() - ; -
- -

Controlling a sidebar

-

It may also be useful to set a dedicated button as controlling a sidebar. You can do this by calling a separate method

-
- $('.sidebar') - .sidebar('attach events', '.toggle.button') - ; -
- -

Altering a sidebar width

- -

Altering the size of sidebar can be done by modifying sidebar.css

-

Usage

- - -

If a sidebar is called without any arguments all default settings will be used.

- - -

Visibility

-

After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward sidebar, the final visibility status will be hidden. If an animation is inward the element will be visible after the animatino finishes.

-
- $('.dog.image') - .sidebar('scale') - ; -
- -

Static Animations

-

Animations that do not have an in or out animation defined, will maintain their current visibility after running

-
- $('.dog.image') - .sidebar('pulse') - ; -
- -

Sidebar Direction

- -

If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".

- -
- $('.dog.image') - // fade up out is used if available - .sidebar('fade up') - // this is now fade up in - .sidebar('fade up') - ; -
-
- $('.dog.image') - // if a direction if specified it will be obeyed - .sidebar('horizontal flip in') - .sidebar('vertical flip in') - ; -
- -

Passing in settings

-

Sidebars use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.

- -

Queuing animations

- -

Animations called in sequence will be queued. Any queued animation will automatically determine the sidebar direction if none is specified.

-
- $('.dog.image') - .sidebar('horizontal flip', '500ms') - .sidebar('horizontal flip', 500, function() { - alert('done!'); - }) - ; -
- -

Types

- -

Emphasis

-
-

Flash

-

An element can flash to draw attention to itself

-
- $('.dog.image') - .sidebar('flash') - ; -
-
-
-

Shake

-

An element can shake to draw attention to its position

-
- $('.dog.image') - .sidebar('shake') - ; -
-
-
-

Tada

-

An element can give user positive feedback for an action

-
- $('.dog.image') - .sidebar('tada') - ; -
-
-
-

Bounce

-

An element can bounce to politely remind you of itself

-
- $('.dog.image') - .sidebar('bounce') - ; -
-
- -

Appearance

-
-

Flip

-

An element can flip into or out of view vertically or horizontally

-
- $('.dog.image') - .sidebar('horizontal flip') - .sidebar('vertical flip') - ; -
-
-
-

Fade

-

An element can fade into or out of view descending and ascending

-
- $('.dog.image') - .sidebar('fade') - .sidebar('fade up') - .sidebar('fade down') - ; -
-
-
-

Scale

-

An element can scale into or out of view

-
- $('.dog.image') - .sidebar('scale') - ; -
-
- -
-

Slide

-
- $('.dog.image') - .sidebar('slide up') - .sidebar('slide down') - ; -
-
- -

Behavior

- - - - -

Settings

-
-
- -
+

Initializing

+

Sidebars are initialized by calling sidebar on an element with class ui sidebar

+
+ $('.ui.sidebar') + .sidebar() + ;
- \ No newline at end of file diff --git a/node/src/documents/modules/transition.html b/node/src/documents/modules/transition.html index e5c9f7615..097950760 100755 --- a/node/src/documents/modules/transition.html +++ b/node/src/documents/modules/transition.html @@ -170,10 +170,11 @@ type : 'UI Module'

Slide

+

An element can appear to slide in from above or below

$('.dog.image') - .transition('slide up') .transition('slide down') + .transition('slide up') ;
diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css index 2aef461f0..6c944f880 100644 --- a/node/src/files/components/semantic/collections/grid.css +++ b/node/src/files/components/semantic/collections/grid.css @@ -279,7 +279,7 @@ margin-left: 0% !important; margin-right: 0% !important; } -.ui.divided.grid > .column, +.ui.divided.grid > .column:not(.row), .ui.divided.grid > .row > .column { display: table-cell; -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8); @@ -297,16 +297,16 @@ } /* Vertically Divided */ .ui.vertically.divided.grid > .row { - -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); - -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); - box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8); + -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important; } .ui.vertically.divided.grid > .row > .column, -.ui.vertically.divided.grid > .column, +.ui.vertically.divided.grid > .column:not(.row), .ui.vertically.divided.grid > .row:first-child { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; } /*---------------------- Celled diff --git a/node/src/files/components/semantic/collections/menu.css b/node/src/files/components/semantic/collections/menu.css index c23bbf767..6072e20ee 100644 --- a/node/src/files/components/semantic/collections/menu.css +++ b/node/src/files/components/semantic/collections/menu.css @@ -390,7 +390,7 @@ margin: 0em; } .ui.vertical.menu .dropdown.item .menu .item { - font-size: 0.875em; + font-size: 1em; padding: 0.75em 1em; } .ui.vertical.menu .dropdown.item .menu .item .icon { diff --git a/node/src/files/components/semantic/collections/message.css b/node/src/files/components/semantic/collections/message.css index d575cd078..fdc9674d5 100644 --- a/node/src/files/components/semantic/collections/message.css +++ b/node/src/files/components/semantic/collections/message.css @@ -70,7 +70,6 @@ .ui.message ul.list li { position: relative; list-style-type: none; - font-style: italic; margin: 0em 0em 0em 1em; padding: 0em; } diff --git a/node/src/files/components/semantic/elements/list.css b/node/src/files/components/semantic/elements/list.css new file mode 100644 index 000000000..f13e20fad --- /dev/null +++ b/node/src/files/components/semantic/elements/list.css @@ -0,0 +1,218 @@ +/* + * # Semantic List - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ +/******************************* + List +*******************************/ +ul.ui.list, +.ui.list { + margin: 1em 0em; +} +ul.ui.list:first-child, +.ui.list:first-child { + margin-top: 1em; +} +ul.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, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + padding: 0.3em 0em; + line-height: 1.2; +} +/* Icon */ +.ui.list .icon { + margin: 0em 0.5em 0em 0em; +} +/* Link */ +ul.ui.list a, +.ui.list a { + cursor: pointer; +} +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} +/* Header */ +.ui.list .header { + font-weight: bold; +} +/******************************* + Types +*******************************/ +/******************************* + States +*******************************/ +/*------------------- + Hover +--------------------*/ +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} +/******************************* + Variations +*******************************/ +/*------------------- + Bulleted +--------------------*/ +ul.ui.bulleted.list, +.ui.bulleted.list { + margin-left: 1.5em; +} +ul.ui.bulleted.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.bulleted.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + top: 0.4em; + left: -1.5em; + content: '\25CF'; + font-size: 0.8em; + line-height: 1.2rem; + vertical-align: top; + color: rgba(0, 0, 0, 0.6); +} +/*------------------- + Ordered +--------------------*/ +ol.ui.list, +ul.ui.ordered.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; +} +ol.ui.list li, +ul.ui.ordered.list li, +.ui.ordered.list .item { + counter-increment: ordered; + 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; + border-right: 1px solid rgba(0, 0, 0, 0.1); + padding-right: 0.5em; + text-align: right; + line-height: 1.2rem; + vertical-align: top; + opacity: 0.8; +} +/*------------------- + Divided +--------------------*/ +ul.ui.divided.list li, +.ui.divided.list .item { + 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:first-child { + border-top: none; +} +/* 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 { + padding-left: 2em; +} +ol.ui.divided.list li:before, +ul.ui.divided.ordered.list li:before, +.ui.divided.ordered.list .item:before { + left: 0em; +} +/*------------------- + Celled +--------------------*/ +ul.ui.celled.list li, +.ui.celled.list .item { + 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 { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +/* 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 { + padding-left: 1.5em; +} +ul.ui.celled.bulleted.list li: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; +} diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 1c88c3e3c..5703c4361 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -265,12 +265,9 @@ a:hover { z-index: 999; } #example .main.menu .count { -/* font-family: "Hevletica Neue", Arial, sans-serif; -font-size: 0.8em; */ - color: rgba(255, 255, 255, 0.6); -} -#example .main.menu .count:hover { - color: rgba(255, 255, 255, 0.8); + font-family: "Hevletica Neue", Arial, sans-serif; + font-size: 0.8em; + padding-top: 0.9em; } /* lists */ diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index d2be2be32..43942a637 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -34,6 +34,7 @@ + diff --git a/src/collections/grid.less b/src/collections/grid.less index 1f8f909e7..6576c1938 100755 --- a/src/collections/grid.less +++ b/src/collections/grid.less @@ -330,7 +330,7 @@ margin-left: 0% !important; margin-right: 0% !important; } -.ui.divided.grid > .column, +.ui.divided.grid > .column:not(.row), .ui.divided.grid > .row > .column { display: table-cell; -webkit-box-shadow: @@ -360,23 +360,23 @@ .ui.vertically.divided.grid > .row { -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(255, 255, 255, 0.8) + 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ; -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(255, 255, 255, 0.8) + 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ; box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1), - 0px -2px 0px 0px rgba(255, 255, 255, 0.8) + 0px -2px 0px 0px rgba(255, 255, 255, 0.8) !important ; } .ui.vertically.divided.grid > .row > .column, -.ui.vertically.divided.grid > .column, +.ui.vertically.divided.grid > .column:not(.row), .ui.vertically.divided.grid > .row:first-child { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; } diff --git a/src/collections/menu.less b/src/collections/menu.less index 5b7b4ac98..a07364916 100755 --- a/src/collections/menu.less +++ b/src/collections/menu.less @@ -527,7 +527,7 @@ margin: 0em; } .ui.vertical.menu .dropdown.item .menu .item { - font-size: 0.875em; + font-size: 1em; padding: 0.75em 1em; } .ui.vertical.menu .dropdown.item .menu .item .icon { diff --git a/src/collections/message.less b/src/collections/message.less index 1fbaa21b0..48751a696 100755 --- a/src/collections/message.less +++ b/src/collections/message.less @@ -108,7 +108,6 @@ .ui.message ul.list li { position: relative; list-style-type: none; - font-style: italic; margin: 0em 0em 0em 1em; padding: 0em; } diff --git a/src/elements/list.less b/src/elements/list.less new file mode 100755 index 000000000..ca7e2fc83 --- /dev/null +++ b/src/elements/list.less @@ -0,0 +1,258 @@ +/* + * # Semantic List - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 26 2013 + */ + +/******************************* + List +*******************************/ + +ul.ui.list, +.ui.list { + margin: 1em 0em; +} + +ul.ui.list:first-child, +.ui.list:first-child { + margin-top: 1em; +} + +ul.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, +.ui.list .item { + display: list-item; + list-style-type: none; + list-style-position: inside; + + padding: 0.3em 0em; + line-height: 1.2; +} + +/* Icon */ +.ui.list .icon { + margin: 0em 0.5em 0em 0em; +} + +/* Link */ +ul.ui.list a, +.ui.list a { + cursor: pointer; +} +.ui.list a .icon { + color: rgba(0, 0, 0, 0.6); + + -webkit-transition: color 0.2s ease; + -moz-transition: color 0.2s ease; + -o-transition: color 0.2s ease; + -ms-transition: color 0.2s ease; + transition: color 0.2s ease; +} + +/* Header */ +.ui.list .header { + font-weight: bold; +} + + + +/******************************* + Types +*******************************/ + + + + +/******************************* + States +*******************************/ + +/*------------------- + Hover +--------------------*/ + +.ui.list a:hover .icon { + color: rgba(0, 0, 0, 0.8); +} + + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Bulleted +--------------------*/ +ul.ui.bulleted.list, +.ui.bulleted.list { + margin-left: 1.5em; +} +ul.ui.bulleted.list li, +.ui.bulleted.list .item { + position: relative; +} +ul.ui.bulleted.list li:before, +.ui.bulleted.list .item:before { + position: absolute; + top: 0.4em; + left: -1.5em; + content: '\25CF'; + + font-size: 0.8em; + line-height: 1.2rem; + vertical-align: top; + color: rgba(0, 0, 0, 0.6); +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +ul.ui.ordered.list, +.ui.ordered.list { + counter-reset: ordered; + margin-left: 2em; +} +ol.ui.list li, +ul.ui.ordered.list li, +.ui.ordered.list .item { + counter-increment: ordered; + 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; + border-right: 1px solid rgba(0, 0, 0, 0.1); + padding-right: 0.5em; + + text-align: right; + line-height: 1.2rem; + vertical-align: top; + opacity: 0.8; +} + + +/*------------------- + Divided +--------------------*/ + +ul.ui.divided.list li, +.ui.divided.list .item { + 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:first-child { + border-top: none; +} + +/* 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 { + padding-left: 2em; +} +ol.ui.divided.list li:before, +ul.ui.divided.ordered.list li:before, +.ui.divided.ordered.list .item:before { + left: 0em; +} + +/*------------------- + Celled +--------------------*/ + +ul.ui.celled.list li, +.ui.celled.list .item { + 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 { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +/* 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 { + padding-left: 1.5em; +} +ul.ui.celled.bulleted.list li: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; +} \ No newline at end of file
Name Usage