diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 504d85026..f41edddf2 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -4,8 +4,12 @@ RELEASE NOTES Version 0.11 - Sep 26, 2013 +Updates -Added relaxed and very relaxed list type with increased padding +Fixes +-Connected items no longer assume 3 items per row +-Fixes display of left corner icon labels Updates -Updated list docs diff --git a/build/less/elements/label.less b/build/less/elements/label.less index e73751ae5..ee8a30101 100644 --- a/build/less/elements/label.less +++ b/build/less/elements/label.less @@ -435,6 +435,9 @@ a.ui.label:hover:before { border-top-color: inherit; } +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} .ui.left.corner.label .text { margin: 0.5em 0em 0em -0.6em; -webkit-transform: rotate(-45deg); diff --git a/build/less/views/item.less b/build/less/views/item.less index 7c1441803..73a01de69 100644 --- a/build/less/views/item.less +++ b/build/less/views/item.less @@ -109,15 +109,23 @@ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; + + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; - -webkit-border-radius: 0.22em; - -moz-border-radius: 0.22em; - border-radius: 0.22em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } @@ -421,6 +429,7 @@ .ui.stackable.items .item { margin: 0em 2em 1em !important; display: block !important; + height: auto !important; width: auto !important; padding: 0% !important; } diff --git a/build/less/views/list.less b/build/less/views/list.less index c9fe165dc..e186aca02 100644 --- a/build/less/views/list.less +++ b/build/less/views/list.less @@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before, } .ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 0.75em; - padding-bottom: 0.75em; + padding-top: 1em; + padding-bottom: 1em; } .ui.horizontal.very.relaxed.list .item { padding-left: 2em; @@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before, --------------------*/ .ui.mini.list .item { - font-size: 0.8125rem; + font-size: 0.7rem; } .ui.tiny.list .item { - font-size: 0.875rem; + font-size: 0.8125rem; } .ui.small.list .item { font-size: 0.875rem; } +.ui.list .item { + font-size: 1em; +} .ui.large.list .item { font-size: 1.125rem; } diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index fad099688..9833d7b58 100644 --- a/build/uncompressed/elements/label.css +++ b/build/uncompressed/elements/label.css @@ -345,6 +345,9 @@ a.ui.label:hover:before { border-left: 0em solid transparent; border-top-color: inherit; } +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} .ui.left.corner.label .text { margin: 0.5em 0em 0em -0.6em; -webkit-transform: rotate(-45deg); diff --git a/build/uncompressed/views/item.css b/build/uncompressed/views/item.css index 40f85632d..3cc886822 100644 --- a/build/uncompressed/views/item.css +++ b/build/uncompressed/views/item.css @@ -89,15 +89,21 @@ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; - -webkit-border-radius: 0.22em; - -moz-border-radius: 0.22em; - border-radius: 0.22em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } /*-------------- Content @@ -366,6 +372,7 @@ .ui.stackable.items .item { margin: 0em 2em 1em !important; display: block !important; + height: auto !important; width: auto !important; padding: 0% !important; } diff --git a/build/uncompressed/views/list.css b/build/uncompressed/views/list.css index 6f2d6be46..68b9aa4f1 100644 --- a/build/uncompressed/views/list.css +++ b/build/uncompressed/views/list.css @@ -404,8 +404,8 @@ ol.ui.horizontal.list li:before, padding-right: 1.25em; } .ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 0.75em; - padding-bottom: 0.75em; + padding-top: 1em; + padding-bottom: 1em; } .ui.horizontal.very.relaxed.list .item { padding-left: 2em; @@ -415,14 +415,17 @@ ol.ui.horizontal.list li:before, Sizes --------------------*/ .ui.mini.list .item { - font-size: 0.8125rem; + font-size: 0.7rem; } .ui.tiny.list .item { - font-size: 0.875rem; + font-size: 0.8125rem; } .ui.small.list .item { font-size: 0.875rem; } +.ui.list .item { + font-size: 1em; +} .ui.large.list .item { font-size: 1.125rem; } diff --git a/node/src/documents/collections/table.html.eco b/node/src/documents/collections/table.html.eco index 0b6370f0c..8a8cd4399 100755 --- a/node/src/documents/collections/table.html.eco +++ b/node/src/documents/collections/table.html.eco @@ -63,7 +63,7 @@ type : 'UI Collection'

Positive / Negative

-

A cell or row may let a user know whether a value is good or bad:

+

A cell or row may let a user know whether a value is good or bad

@@ -98,7 +98,7 @@ type : 'UI Collection'

Cells

Error

-

A cell or row may attention the user to an error or a negative value:

+

A cell or row may attention the user to an error or a negative value

Name
@@ -132,7 +132,7 @@ type : 'UI Collection'

Warning

-

A cell or row may warn a user:

+

A cell or row may warn a user

Name
@@ -166,7 +166,7 @@ type : 'UI Collection'

Active

-

A cell or row can be active:

+

A cell or row can be active or selected by a user

Name
@@ -199,7 +199,7 @@ type : 'UI Collection'

Disabled

-

A cell can be disabled:

+

A cell can be disabled

Name
diff --git a/node/src/documents/modules/shape.html.eco b/node/src/documents/modules/shape.html.eco index 9c51752f5..0f570dd6d 100755 --- a/node/src/documents/modules/shape.html.eco +++ b/node/src/documents/modules/shape.html.eco @@ -89,7 +89,7 @@ type : 'UI Module' - +
Cute Dog
@@ -105,7 +105,7 @@ type : 'UI Module' - +
Silly Dog
@@ -121,7 +121,7 @@ type : 'UI Module' - +
5 days ago
@@ -143,7 +143,7 @@ type : 'UI Module' - +
Cute Dog
@@ -159,7 +159,7 @@ type : 'UI Module' - +
Silly Dog
@@ -175,7 +175,7 @@ type : 'UI Module' - +
5 days ago
diff --git a/node/src/documents/views/items.html.eco b/node/src/documents/views/items.html.eco index 9300147a5..35149963f 100755 --- a/node/src/documents/views/items.html.eco +++ b/node/src/documents/views/items.html.eco @@ -77,10 +77,39 @@ type : 'UI View'
+
+
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+ 199 votes +
+
+
+
5 days ago
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+ 311 votes +
+
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+ 522 votes +
+
+
+
+ +

Variations

Stackable

+
Resize your browser to a smaller size to see the items stack after reaching mobile breakpoints

An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes

@@ -88,7 +117,7 @@ type : 'UI View' - +
Cute Dog
@@ -103,7 +132,7 @@ type : 'UI View' - +
5 days ago
@@ -154,39 +183,41 @@ type : 'UI View'
+ + +
+
-
- -
-
-
Cute Dog
-

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

-
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

-
- -
-
-
Faithful Dog
-

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

-
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

-
- -
-
-
Silly Dog
-

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

-
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+
+
+
Cute Dog
+

This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.

+
+
+
Faithful Dog
+

Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.

+
+
+
Silly Dog
+

Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.

+

Column count

An item list can list how many columns should exist in a row

diff --git a/node/src/documents/views/list.html.eco b/node/src/documents/views/list.html.eco index f250f26de..e7ce8bf1d 100755 --- a/node/src/documents/views/list.html.eco +++ b/node/src/documents/views/list.html.eco @@ -14,7 +14,6 @@ type : 'UI View'
Types Content - States Variations
@@ -273,10 +272,6 @@ type : 'UI View' - -

States

- -

Variations

@@ -361,6 +356,109 @@ type : 'UI View' +
+

Relaxed

+

A list can relax its padding to provide more negative space

+
+
+ +
+ New York City +
A lovely city
+
+
+
+ +
+ Chicago +
A lovely city
+
+
+
+ +
+ Los Angeles +
A lovely city
+
+
+
+
+
+
+
+ +
+ New York City +
A lovely city
+
+
+
+ +
+ Chicago +
A lovely city
+
+
+
+ +
+ Los Angeles +
A lovely city
+
+
+
+
+
+
+
+ +
+ New York City +
A lovely city
+
+
+
+ +
+ Chicago +
A lovely city
+
+
+
+ +
+ Los Angeles +
A lovely city
+
+
+
+
+
+
+
+ +
+ New York City +
A lovely city
+
+
+
+ +
+ Chicago +
A lovely city
+
+
+
+ +
+ Los Angeles +
A lovely city
+
+
+
+
+

Divided

A list can show divisions between content

diff --git a/node/src/files/build/less/elements/label.less b/node/src/files/build/less/elements/label.less index e73751ae5..ee8a30101 100644 --- a/node/src/files/build/less/elements/label.less +++ b/node/src/files/build/less/elements/label.less @@ -435,6 +435,9 @@ a.ui.label:hover:before { border-top-color: inherit; } +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} .ui.left.corner.label .text { margin: 0.5em 0em 0em -0.6em; -webkit-transform: rotate(-45deg); diff --git a/node/src/files/build/less/views/item.less b/node/src/files/build/less/views/item.less index 7c1441803..73a01de69 100644 --- a/node/src/files/build/less/views/item.less +++ b/node/src/files/build/less/views/item.less @@ -109,15 +109,23 @@ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; + + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; - -webkit-border-radius: 0.22em; - -moz-border-radius: 0.22em; - border-radius: 0.22em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } @@ -421,6 +429,7 @@ .ui.stackable.items .item { margin: 0em 2em 1em !important; display: block !important; + height: auto !important; width: auto !important; padding: 0% !important; } diff --git a/node/src/files/build/less/views/list.less b/node/src/files/build/less/views/list.less index c9fe165dc..e186aca02 100644 --- a/node/src/files/build/less/views/list.less +++ b/node/src/files/build/less/views/list.less @@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before, } .ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 0.75em; - padding-bottom: 0.75em; + padding-top: 1em; + padding-bottom: 1em; } .ui.horizontal.very.relaxed.list .item { padding-left: 2em; @@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before, --------------------*/ .ui.mini.list .item { - font-size: 0.8125rem; + font-size: 0.7rem; } .ui.tiny.list .item { - font-size: 0.875rem; + font-size: 0.8125rem; } .ui.small.list .item { font-size: 0.875rem; } +.ui.list .item { + font-size: 1em; +} .ui.large.list .item { font-size: 1.125rem; } diff --git a/node/src/files/build/uncompressed/elements/label.css b/node/src/files/build/uncompressed/elements/label.css index fad099688..9833d7b58 100644 --- a/node/src/files/build/uncompressed/elements/label.css +++ b/node/src/files/build/uncompressed/elements/label.css @@ -345,6 +345,9 @@ a.ui.label:hover:before { border-left: 0em solid transparent; border-top-color: inherit; } +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} .ui.left.corner.label .text { margin: 0.5em 0em 0em -0.6em; -webkit-transform: rotate(-45deg); diff --git a/node/src/files/build/uncompressed/views/item.css b/node/src/files/build/uncompressed/views/item.css index 40f85632d..3cc886822 100644 --- a/node/src/files/build/uncompressed/views/item.css +++ b/node/src/files/build/uncompressed/views/item.css @@ -89,15 +89,21 @@ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; - -webkit-border-radius: 0.22em; - -moz-border-radius: 0.22em; - border-radius: 0.22em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } /*-------------- Content @@ -366,6 +372,7 @@ .ui.stackable.items .item { margin: 0em 2em 1em !important; display: block !important; + height: auto !important; width: auto !important; padding: 0% !important; } diff --git a/node/src/files/build/uncompressed/views/list.css b/node/src/files/build/uncompressed/views/list.css index 6f2d6be46..68b9aa4f1 100644 --- a/node/src/files/build/uncompressed/views/list.css +++ b/node/src/files/build/uncompressed/views/list.css @@ -404,8 +404,8 @@ ol.ui.horizontal.list li:before, padding-right: 1.25em; } .ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 0.75em; - padding-bottom: 0.75em; + padding-top: 1em; + padding-bottom: 1em; } .ui.horizontal.very.relaxed.list .item { padding-left: 2em; @@ -415,14 +415,17 @@ ol.ui.horizontal.list li:before, Sizes --------------------*/ .ui.mini.list .item { - font-size: 0.8125rem; + font-size: 0.7rem; } .ui.tiny.list .item { - font-size: 0.875rem; + font-size: 0.8125rem; } .ui.small.list .item { font-size: 0.875rem; } +.ui.list .item { + font-size: 1em; +} .ui.large.list .item { font-size: 1.125rem; } diff --git a/node/src/files/images/demo/highres6.jpg b/node/src/files/images/demo/highres6.jpg index 704e50bf8..793f8d3d4 100755 Binary files a/node/src/files/images/demo/highres6.jpg and b/node/src/files/images/demo/highres6.jpg differ diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 2324cef1a..fbdce5290 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -215,6 +215,14 @@ a:hover { box-shadow: none; } +/*-------------- + Items +---------------*/ + +#example.item .text.example .item { + min-height: 150px; +} + /*-------------- Masthead diff --git a/src/elements/label.less b/src/elements/label.less index e73751ae5..ee8a30101 100755 --- a/src/elements/label.less +++ b/src/elements/label.less @@ -435,6 +435,9 @@ a.ui.label:hover:before { border-top-color: inherit; } +.ui.left.corner.label .icon { + margin: 0.4em 0em 0em -0.7em; +} .ui.left.corner.label .text { margin: 0.5em 0em 0em -0.6em; -webkit-transform: rotate(-45deg); diff --git a/src/views/item.less b/src/views/item.less index 7c1441803..73a01de69 100755 --- a/src/views/item.less +++ b/src/views/item.less @@ -109,15 +109,23 @@ -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; + + -webkit-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + -moz-box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rbga(0, 0, 0, 0.1); + + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } .ui.items .item > .image > img { position: relative; display: block; width: 100%; overflow: hidden; - -webkit-border-radius: 0.22em; - -moz-border-radius: 0.22em; - border-radius: 0.22em; + -webkit-border-radius: 0.2em; + -moz-border-radius: 0.2em; + border-radius: 0.2em; } @@ -421,6 +429,7 @@ .ui.stackable.items .item { margin: 0em 2em 1em !important; display: block !important; + height: auto !important; width: auto !important; padding: 0% !important; } diff --git a/src/views/list.less b/src/views/list.less index c9fe165dc..e186aca02 100755 --- a/src/views/list.less +++ b/src/views/list.less @@ -494,8 +494,8 @@ ol.ui.horizontal.list li:before, } .ui.very.relaxed.list:not(.horizontal) .item { - padding-top: 0.75em; - padding-bottom: 0.75em; + padding-top: 1em; + padding-bottom: 1em; } .ui.horizontal.very.relaxed.list .item { padding-left: 2em; @@ -508,14 +508,17 @@ ol.ui.horizontal.list li:before, --------------------*/ .ui.mini.list .item { - font-size: 0.8125rem; + font-size: 0.7rem; } .ui.tiny.list .item { - font-size: 0.875rem; + font-size: 0.8125rem; } .ui.small.list .item { font-size: 0.875rem; } +.ui.list .item { + font-size: 1em; +} .ui.large.list .item { font-size: 1.125rem; }
Name