From 4d0ef99e0ddd062984bd9e424ef3c694a90d16d6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 21 Aug 2013 17:15:55 -0400 Subject: [PATCH] Adds more sidebar examples, adds css technique for fixed position relative to content --- build/uncompressed/collections/table.css | 15 +- build/uncompressed/modules/sidebar.css | 12 +- node/src/documents/collections/table.html | 51 ++- node/src/documents/elements/input.html | 17 +- node/src/documents/guide/cssguide.html | 405 +++++++++--------- node/src/documents/modules/sidebar.html | 49 ++- .../components/semantic/collections/table.css | 15 +- .../components/semantic/modules/sidebar.css | 12 +- node/src/layouts/default.html.eco | 4 +- src/collections/table.less | 19 +- src/modules/sidebar.less | 14 +- 11 files changed, 356 insertions(+), 257 deletions(-) diff --git a/build/uncompressed/collections/table.css b/build/uncompressed/collections/table.css index 106ee551e..5eba95b9c 100644 --- a/build/uncompressed/collections/table.css +++ b/build/uncompressed/collections/table.css @@ -1,5 +1,5 @@ /* - * # Semantic Table - Flat + * # Semantic Table * http://github.com/quirkyinc/semantic * * @@ -175,7 +175,7 @@ color: #7D6C00; } /*-------------- - Active + Active ---------------*/ .ui.table tr.active td, .ui.table tr td.active { @@ -185,7 +185,7 @@ } /*-------------- - Disabled + Disabled ---------------*/ .ui.table tr.disabled td, .ui.table tr td.disabled, @@ -374,6 +374,15 @@ .ui.inverted.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.06); } +/*-------------- + Definition +---------------*/ +.ui.definition.table tr { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.definition.table td:first-child { + font-weight: bold; +} /*-------------- Collapsing ---------------*/ diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css index aa9410bde..ee843ac02 100644 --- a/build/uncompressed/modules/sidebar.css +++ b/build/uncompressed/modules/sidebar.css @@ -96,14 +96,14 @@ body { Variations *******************************/ .ui.floating.sidebar { - -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { - -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.top.floating.sidebar { -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html index 8755c940d..d11244aeb 100755 --- a/node/src/documents/collections/table.html +++ b/node/src/documents/collections/table.html @@ -15,7 +15,7 @@ type : 'UI Collection'
- +
Types @@ -23,7 +23,7 @@ type : 'UI Collection' Variations
- +

Types

Table

@@ -61,9 +61,9 @@ type : 'UI Collection'
- +

States

- +

Positive / Negative

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

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

Cells

Error

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

Warning

A cell or row may warn a user:

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

Active

A cell or row can be active:

@@ -232,11 +232,11 @@ type : 'UI Collection' - +

Variations

- +

Basic

A table can reduce its complexity to increase readability.

@@ -441,7 +441,30 @@ type : 'UI Collection'
- + +
+

Definition

+

A table may be formatted specifically to provide definitions

+ + + + + + + + + + + + + + + + + +
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
+
+

Celled

A table may be divided each row into separate cells

@@ -475,13 +498,13 @@ type : 'UI Collection'
- +

Sortable

A table may allow a user to sort contents by clicking on a table header.

- +

Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.

- + @@ -588,7 +611,7 @@ type : 'UI Collection'
Name
- +

Size

A table can also be small or large

diff --git a/node/src/documents/elements/input.html b/node/src/documents/elements/input.html index 8d061f042..c8261162b 100755 --- a/node/src/documents/elements/input.html +++ b/node/src/documents/elements/input.html @@ -7,7 +7,6 @@ type : 'UI Element'
-
Links
Download
@@ -18,10 +17,10 @@ type : 'UI Element'
Authoring Guide
-

+

Input -
Inputs allow a user to enter information

+

Inputs allow a user to enter information

@@ -52,7 +51,7 @@ type : 'UI Element'
- +

Error

An input field can show the data contains errors

@@ -60,9 +59,9 @@ type : 'UI Element'
- +

Variations

- +

Icon

An input can be formatted with an icon

@@ -77,7 +76,7 @@ type : 'UI Element'
- +

Labeled

An input can be formatted with a label

@@ -94,9 +93,9 @@ type : 'UI Element'
New
- + - +

Action

An input can be formatted to alert the user to an action they may perform

diff --git a/node/src/documents/guide/cssguide.html b/node/src/documents/guide/cssguide.html index 8932c3033..c05df4c7d 100755 --- a/node/src/documents/guide/cssguide.html +++ b/node/src/documents/guide/cssguide.html @@ -14,13 +14,223 @@ type : 'UI Guide'
+ Techniques Style Guide Units - Techniques
+ +

Techniques

+ +

Conditional Content Formatting

+

Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.

+ +
+ .ui.widget .image { + float: left; + width: 2em; + } + .ui.widget .content { + color: #000000; + } + // content is only floated if image exists + .ui.widget .image + .content { + margin-left: 3em; + } +
+ +

Fixing Whitespace with Inline Block

+

In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.

+
+ /* remove whitespace */ + .ui.group { + font-size: 0em; + } + .ui.group .item { + display: inline-block; + font-size: 1rem; + } +
+ +

CSS :not is Awesome

+

Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to "cancel out" of that opacity change on content inside.

+

Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.

+
+ /* blur everything but the dimmer */ + body.dimmed :not(.dimmer){ + -webkit-filter: blur(15px) grayscale(0.7); + -moz-filter: blur(15px) grayscale(0.7); + } + body.dimmed .dimmer * { + -webkit-filter: none; + -moz-filter: none; + } +
+ +

Prevent Accidental Highlighting

+

Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.

+
+ .ui.thingy { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } +
+ +

Joining borders

+

Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.

+
+ /* this might not go so well */ + .ui.thingy { + border: 1px solid #DDDDDD; + } + /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */ + .ui.thingy { + outline: 1px solid rgba(0, 0, 0, 0.1); + } + /* classic but works */ + .ui.thingy { + outline: 1px solid #DDDDDD; + } + /* this works too */ + .ui.thingy { + -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; + -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; + box-shadow: 0px 0px 0px 1px #DDDDDD; + } +
+ +

Using transparency

+

RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.

+

Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba

+
+ .ui.thingy { + background-color: #FAFAFA; + color: rgba(0, 0, 0, 0.7); + } + .red.ui.thingy { + background-color: #FF0000; + } +
+ +

Nothing is always Fixed

+

CSS fixed allows you to have content stick to an offset position in a page regardless of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. This will change the offset context to the transformed element instead of the page. +

This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.

+
+ .ui.content { + transform: rotateZ(0deg); + overflow: scroll; + } + // fixed will stay in its current offset relative to the parent container + .ui.content .fixed.thingy { + position: fixed; + top: 0px; + width: 100%; + } +
+ +

Centering Content with Transform

+

Using percentages in CSS will give you a ratio based on the size of the parent element. For exaple setting content to be left 50% will set content to start at exactly halfway across its parent.

Sometimes you want content to positioned relative to its own size. Inside calls to transform, percentages are based on the current element size so this can be done.

+
+ + /* doesnt work */ + .ui.modal { + width: 800px; + height: 500px; + left: 50%; + top: 50%; + margin: -50% 0px 0px -50%x; + } + + /* works with measurements */ + .ui.modal { + width: 800px; + height: 500px; + left: 50%; + top: 50%; + margin: -250px 0px 0px -400px; + } + + /* with transform no measurements needed */ + .ui.modal { + position: absolute; + width: 800px; + top: 50%; + left: 50%; + transform: transformX(-50%) transformY(-50%); + } +
+ +

Consider alternatives to floats

+

CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.

+

Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.

+

To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content

+
+ /* not the best */ + .ui.thingy { + display: block; + overflow: hidden; + } + .ui.thingy .part { + display: block; + float: left; + } + + /* these do the same thing */ + .ui.thingy { + display: block; + font-size: 0rem; + } + .ui.thingy .part { + display: inline-block; + font-size: 1rem; + } +
+ + +

Onion Skinning

+

One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.

+
+ .ui.thingy { + background-color: #FAFAFA; + } + .ui.red.thingy { + background-color: #FF0000; + } + .ui.green.thingy { + background-color: #00FF00; + } + .ui.blue.thingy { + background-color: #0000FF; + } + .ui.thingy:hover { + 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%) + ; + } +
+ + +

Style Guide

Don't Hyphenate

@@ -262,197 +472,4 @@ type : 'UI Guide' font-size: 0.8em; }
- - -

Techniques

- -

Conditional Content Formatting

-

Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.

- -
- .ui.widget .image { - float: left; - width: 2em; - } - .ui.widget .content { - color: #000000; - } - // content is only floated if image exists - .ui.widget .image + .content { - margin-left: 3em; - } -
- -

Fixing Whitespace with Inline Block

-

In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.

-
- /* remove whitespace */ - .ui.group { - font-size: 0em; - } - .ui.group .item { - display: inline-block; - font-size: 1rem; - } -
- -

CSS :not is Awesome

-

Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to "cancel out" of that opacity change on content inside.

-

Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.

-
- /* blur everything but the dimmer */ - body.dimmed :not(.dimmer){ - -webkit-filter: blur(15px) grayscale(0.7); - -moz-filter: blur(15px) grayscale(0.7); - } - body.dimmed .dimmer * { - -webkit-filter: none; - -moz-filter: none; - } -
- -

Prevent Accidental Highlighting

-

Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.

-
- .ui.thingy { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } -
- -

Joining borders

-

Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.

-
- /* this might not go so well */ - .ui.thingy { - border: 1px solid #DDDDDD; - } - /* rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade */ - .ui.thingy { - outline: 1px solid rgba(0, 0, 0, 0.1); - } - /* classic but works */ - .ui.thingy { - outline: 1px solid #DDDDDD; - } - /* this works too */ - .ui.thingy { - -moz-box-shadow: 0px 0px 0px 1px #DDDDDD; - -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; - box-shadow: 0px 0px 0px 1px #DDDDDD; - } -
- -

Using transparency

-

RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.

-

Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba

-
- .ui.thingy { - background-color: #FAFAFA; - color: rgba(0, 0, 0, 0.7); - } - .red.ui.thingy { - background-color: #FF0000; - } -
- -

Centering Content with Transform

-

Using percentages in CSS will give you a ratio based on the size of the parent element. For exaple setting content to be left 50% will set content to start at exactly halfway across its parent.

Sometimes you want content to positioned relative to its own size. Inside calls to transform, percentages are based on the current element size so this can be done.

-
- - /* doesnt work */ - .ui.modal { - width: 800px; - height: 500px; - left: 50%; - top: 50%; - margin: -50% 0px 0px -50%x; - } - - /* works with measurements */ - .ui.modal { - width: 800px; - height: 500px; - left: 50%; - top: 50%; - margin: -250px 0px 0px -400px; - } - - /* with transform no measurements needed */ - .ui.modal { - position: absolute; - width: 800px; - top: 50%; - left: 50%; - transform: transformX(-50%) transformY(-50%); - } -
- -

Consider alternatives to floats

-

CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.

-

Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.

-

To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content

-
- /* not the best */ - .ui.thingy { - display: block; - overflow: hidden; - } - .ui.thingy .part { - display: block; - float: left; - } - - /* these do the same thing */ - .ui.thingy { - display: block; - font-size: 0rem; - } - .ui.thingy .part { - display: inline-block; - font-size: 1rem; - } -
- - -

Onion Skinning

-

One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.

-
- .ui.thingy { - background-color: #FAFAFA; - } - .ui.red.thingy { - background-color: #FF0000; - } - .ui.green.thingy { - background-color: #00FF00; - } - .ui.blue.thingy { - background-color: #0000FF; - } - .ui.thingy:hover { - 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%) - ; - } -
- \ No newline at end of file diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html index 214368870..3499ea60c 100755 --- a/node/src/documents/modules/sidebar.html +++ b/node/src/documents/modules/sidebar.html @@ -30,7 +30,7 @@ type : 'UI Module'
-

Sidebar
Incomplete

+

Sidebar

A sidebar is a menu hidden beside page content

@@ -40,12 +40,12 @@ type : 'UI Module'
Initializing Usage - Types + Variations Behavior Settings
-

Initializing

+

Initializing

Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.

Fixed Position Snafoos
@@ -66,7 +66,7 @@ type : 'UI Module' ;
-

Usage

+

Usage

Showing a sidebar

@@ -105,24 +105,55 @@ type : 'UI Module'

For convenience calling attach events will allow you to bind events. By default this will toggle the sidebar in and out of view on click

$('.ui.demo.sidebar') - .sidebar('attach events', '.trigger.button') + .sidebar('attach events', '.toggle.button') ; - $('.trigger.button') + $('.toggle.button') .removeClass('disabled') ;
-
+
Trigger Sidebar
-
+

Triggering custom action with other content

You can also however specify what action should occur when the element is clicked

$('.ui.demo.sidebar') - .sidebar('attach events', '.trigger.button', 'show') + .sidebar('attach events', '.open.button') + ; + $('.open.button') + .removeClass('disabled') + ; +
+
+ + Trigger Sidebar +
+
+ +

Variations

+ +
+

Floating

+

A sidebar can appear floating above content

+
+ $('.ui.demo.sidebar') + .addClass('floating') + .sidebar('toggle') + ; +
+
+ +
+

Overlay

+

A sidebar can overlay page content instead of pushing it to the side

+
+ $('.ui.demo.sidebar') + .sidebar('setting', 'overlay', true) + .sidebar('toggle') ;
diff --git a/node/src/files/components/semantic/collections/table.css b/node/src/files/components/semantic/collections/table.css index 106ee551e..5eba95b9c 100644 --- a/node/src/files/components/semantic/collections/table.css +++ b/node/src/files/components/semantic/collections/table.css @@ -1,5 +1,5 @@ /* - * # Semantic Table - Flat + * # Semantic Table * http://github.com/quirkyinc/semantic * * @@ -175,7 +175,7 @@ color: #7D6C00; } /*-------------- - Active + Active ---------------*/ .ui.table tr.active td, .ui.table tr td.active { @@ -185,7 +185,7 @@ } /*-------------- - Disabled + Disabled ---------------*/ .ui.table tr.disabled td, .ui.table tr td.disabled, @@ -374,6 +374,15 @@ .ui.inverted.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.06); } +/*-------------- + Definition +---------------*/ +.ui.definition.table tr { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.definition.table td:first-child { + font-weight: bold; +} /*-------------- Collapsing ---------------*/ diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css index aa9410bde..ee843ac02 100644 --- a/node/src/files/components/semantic/modules/sidebar.css +++ b/node/src/files/components/semantic/modules/sidebar.css @@ -96,14 +96,14 @@ body { Variations *******************************/ .ui.floating.sidebar { - -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { - -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.top.floating.sidebar { -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index db3367dc3..474120858 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -24,8 +24,8 @@ - - + diff --git a/src/collections/table.less b/src/collections/table.less index 2bad716ea..4b767e939 100755 --- a/src/collections/table.less +++ b/src/collections/table.less @@ -1,5 +1,5 @@ /* - * # Semantic Table - Flat + * # Semantic Table * http://github.com/quirkyinc/semantic * * @@ -203,7 +203,7 @@ /*-------------- - Active + Active ---------------*/ .ui.table tr.active td, @@ -214,7 +214,7 @@ } /*-------------- - Disabled + Disabled ---------------*/ .ui.table tr.disabled td, @@ -421,6 +421,19 @@ } +/*-------------- + Definition +---------------*/ + +.ui.definition.table tr { + border-top: 1px solid rgba(0, 0, 0 ,0.1); +} + +.ui.definition.table td:first-child { + font-weight: bold; +} + + /*-------------- Collapsing ---------------*/ diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less index f58a8a6a7..548dfef80 100755 --- a/src/modules/sidebar.less +++ b/src/modules/sidebar.less @@ -113,22 +113,20 @@ body { } - - /******************************* Variations *******************************/ .ui.floating.sidebar { - -webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow:0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { - -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); - box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); } .ui.top.floating.sidebar {