diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 8c6045c00..1d598d89a 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -8,6 +8,7 @@ - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description`` **Enhancements** +- **Table** - Tables are no longer striped by default, must specify variation 'striped' - **Form** - Form now has a success state which will automatically display success messages - **Form** - Forms in 'success' state will now show success messages inside - **List** - Child lists can now be formatted to sit inside text content diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco index f195c8908..850e63844 100755 --- a/server/documents/collections/table.html.eco +++ b/server/documents/collections/table.html.eco @@ -31,10 +31,7 @@ type : 'UI Collection'

Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.

-
-

This example uses a segment to add padding and a background color.

-
- +
@@ -70,7 +67,7 @@ type : 'UI Collection'

Positive / Negative

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

-
Name Status
+
@@ -80,7 +77,7 @@ type : 'UI Collection' - + @@ -90,9 +87,9 @@ type : 'UI Collection' - + - + @@ -105,7 +102,7 @@ type : 'UI Collection'

Error

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

-
Name Status
No Name Specified UnknownNoneNone
Jimmy
Jamie Unknown Requires call Requires call
Jill Unknown None
+
@@ -139,7 +136,7 @@ type : 'UI Collection'

Warning

A cell or row may warn a user

-
Name Status
+
@@ -173,7 +170,7 @@ type : 'UI Collection'

Active

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

-
Name Status
+
@@ -206,7 +203,7 @@ type : 'UI Collection'

Disabled

A cell can be disabled

-
Name Status
+
@@ -240,10 +237,44 @@ type : 'UI Collection'

Variations

+
+

Striped

+

A table can stripe alternate rows of content with a darker color to increase contrast

+
Name Status
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+ +

Celled

A table may be divided each row into separate cells

- +
@@ -307,7 +338,7 @@ type : 'UI Collection'

Even Width

A table can specify its column count to divide its content evenly

-
Name Status
+
@@ -352,7 +383,7 @@ type : 'UI Collection'

Column Width

A table can specify the width of individual columns independently.

Tables use a 16 column grid. This should be the total width of all elements in a column
-
Name Status
+
@@ -382,7 +413,7 @@ type : 'UI Collection'

Collapsing

By default tables take the size of their container. A collapsing takes up only as much space as its rows.

-
Name Status
+
@@ -417,7 +448,7 @@ type : 'UI Collection'

Inverted

A tables colors can be inverted

-
Name Status
+
@@ -448,7 +479,7 @@ type : 'UI Collection'
Name Status
- +
@@ -482,7 +513,7 @@ type : 'UI Collection'

Definition

A table may be formatted specifically to provide definitions

-
Name Status
+
@@ -509,7 +540,7 @@ type : 'UI Collection'
Adding a classname of ascending or descending to the th 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.
-
Behavior Arguments
+
@@ -542,7 +573,7 @@ type : 'UI Collection'

Padded

A table may sometimes need to be more padded for legibility

-
Name Status
+
@@ -565,7 +596,7 @@ type : 'UI Collection'

Compact

A table may sometimes need to be more compact to make more rows visible at a time

-
Name Status
+
@@ -619,7 +650,7 @@ type : 'UI Collection'

Size

A table can also be small or large

-
Name Status
+
@@ -650,7 +681,7 @@ type : 'UI Collection'
Name Status
- +
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 24950f11a..74324b00d 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -9,6 +9,16 @@ * */ +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'table'; + +@import '../../semantic.config'; + + /******************************* Table *******************************/ @@ -16,80 +26,80 @@ /* Prototype */ .ui.table { width: 100%; - border-collapse: collapse; + background: @background; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; +} + +.ui.table { + border-collapse: @borderCollapse; + border-spacing: @borderSpacing; } /* Table Content */ .ui.table th, -.ui.table tr, .ui.table td { - border-collapse: collapse; - - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - - -webkit-transition: all 0.1s ease-out; - -moz-transition: all 0.1s ease-out; - -o-transition: all 0.1s ease-out; - -ms-transition: all 0.1s ease-out; - transition: all 0.1s ease-out; + transition: @transition; } /* Headers */ -.ui.table thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.03); -} -.ui.table tfoot th { - background-color: rgba(0, 0, 0, 0.03); -} -.ui.table th { +.ui.table thead th { + border-bottom: @headerBorder; cursor: auto; - - background-color: rgba(0, 0, 0, 0.05); - - text-align: left; - color: rgba(0, 0, 0, 0.8); - padding: 0.5em 0.7em; - vertical-align: middle; + background-color: @headerBackground; + text-align: @headerAlign; + color: @headerColor; + padding: @headerVerticalPadding @headerHorizontalPadding; + vertical-align: @headerVerticalAlign; + font-style: @headerFontStyle; + font-weight: @headerFontWeight; + text-transform: @headerTextTransform; } .ui.table thead th:first-child { - border-radius: 5px 0px 0px 0px; + border-radius: @borderRadius 0em 0em 0em; } .ui.table thead th:last-child { - border-radius: 0px 5px 0px 0px; + border-radius: 0em @borderRadius 0em 0em; +} + +/* Footer */ +.ui.table tfoot th { + cursor: auto; + border-top: @footerBorder; + background-color: @footerBackground; + text-align: @footerAlign; + color: @footerColor; + padding: @footerVerticalPadding @footerHorizontalPadding; + vertical-align: @footerVerticalAlign; + font-style: @footerFontStyle; + font-weight: @footerFontWeight; + text-transform: @footerTextTransform; } .ui.table tfoot th:first-child { - border-radius: 0px 0px 0px 5px; + border-radius: 0em 0em 0em @borderRadius; } .ui.table tfoot th:last-child { - border-radius: 0px 0px 5px 0px; -} - -/* Table Cells */ -.ui.table td { - padding: 0.5em 0.7em; - vertical-align: middle; + border-radius: 0em 0em @borderRadius 0em; } -/* Footer */ -.ui.table tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.03); +/* Table Row */ +.ui.table tr td { + border-top: @rowBorder; } -.ui.table tfoot th { - font-weight: normal; - font-style: italic; +.ui.table tr:first-child td { + border-top: none; } -/* Table Striping */ -.ui.table tbody tr:nth-child(2n) { - background-color: rgba(0, 0, 50, 0.02); +/* Table Cells */ +.ui.table td { + padding: @cellVerticalPadding @cellHorizontalPadding; + vertical-align: @cellVerticalAlign; } /* Icons */ .ui.table > .icon { - vertical-align: baseline; + vertical-align: @iconVerticalAlign; } .ui.table > .icon:only-child { margin: 0em; @@ -105,15 +115,16 @@ /* Responsive */ - @media only screen and (max-width : 768px) { .ui.table { display: block; padding: 0em; } - .ui.table thead, + .ui.table thead { + display: @responsiveHeaderDisplay; + } .ui.table tfoot { - display: none; + display: @responsiveFooterDisplay; } .ui.table tbody { display: block; @@ -126,16 +137,16 @@ width: 100% !important; display: block; border: none !important; - padding: 0.25em 0.75em; - box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow } .ui.table td:first-child { font-weight: bold; - padding-top: 1em; + padding-top: @responsiveRowVerticalPadding; } .ui.table td:last-child { - box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; - padding-bottom: 1em; + box-shadow: @responsiveRowBoxShadow; + padding-bottom: @responsiveRowVerticalPadding; } /* Clear BG Colors */ @@ -144,7 +155,7 @@ .ui.table tr > td.active, .ui.table tr > td.positive, .ui.table tr > td.negative { - background-color: transparent !important; + background-color: @responsiveStatusColor !important; } } @@ -154,52 +165,26 @@ States *******************************/ -/*-------------- - Hover ----------------*/ - -/* Sortable */ -.ui.sortable.table th.disabled:hover { - cursor: auto; - text-align: left; - font-weight: bold; - color: #333333; - color: rgba(0, 0, 0, 0.8); -} -.ui.sortable.table thead th:hover { - background-color: rgba(0, 0, 0, 0.13); - color: rgba(0, 0, 0, 0.8); -} - -/* Inverted Sortable */ -.ui.inverted.sortable.table thead th:hover { - background-color: rgba(255, 255, 255, 0.13); - color: rgba(255, 255, 255, 1); -} - - /*-------------- Positive ---------------*/ .ui.table tr.positive, .ui.table td.positive { - -webkit-box-shadow: 2px 0px 0px #119000 inset; - -moz-box-shadow: 2px 0px 0px #119000 inset; - box-shadow: 2px 0px 0px #119000 inset; + box-shadow: @positiveBoxShadow; } .ui.table tr.positive td, .ui.table td.positive { - background-color: #F2F8F0 !important; - color: #119000 !important; + background: @positiveBackgroundColor !important; + color: @positiveColor !important; } .ui.celled.table tr.positive:hover td, .ui.celled.table tr:hover td.positive, .ui.table tr.positive:hover td, .ui.table td:hover.positive, .ui.table th:hover.positive { - background-color: #ECF5E9 !important; - color: #119000 !important; + background: @positiveBackgroundHover !important; + color: @positiveColorHover !important; } /*-------------- @@ -208,8 +193,6 @@ .ui.table tr.negative, .ui.table td.negative { - -webkit-box-shadow: 2px 0px 0px #CD2929 inset; - -moz-box-shadow: 2px 0px 0px #CD2929 inset; box-shadow: 2px 0px 0px #CD2929 inset; } .ui.table tr.negative td, @@ -232,8 +215,6 @@ .ui.table tr.error, .ui.table td.error { - -webkit-box-shadow: 2px 0px 0px #CD2929 inset; - -moz-box-shadow: 2px 0px 0px #CD2929 inset; box-shadow: 2px 0px 0px #CD2929 inset; } .ui.table tr.error td, @@ -257,8 +238,6 @@ .ui.table tr.warning, .ui.table td.warning { - -webkit-box-shadow: 2px 0px 0px #7D6C00 inset; - -moz-box-shadow: 2px 0px 0px #7D6C00 inset; box-shadow: 2px 0px 0px #7D6C00 inset; } .ui.table tr.warning td, @@ -283,8 +262,6 @@ .ui.table tr.active, .ui.table td.active { - -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; - -moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; } @@ -310,6 +287,16 @@ Variations *******************************/ +/*-------------- + Striped +---------------*/ + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: @stripedBackground; +} + /*-------------- Column Count ---------------*/ @@ -440,7 +427,11 @@ } .ui.celled.table th, .ui.celled.table td { - border: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid rgba(0, 0, 0, 0.1); +} +.ui.celled.table th:first-child, +.ui.celled.table td:first-child { + border-left: none; } /* Coupling with segment */ @@ -469,9 +460,6 @@ } .ui.sortable.table thead th.sorted, .ui.sortable.table thead th.sorted:hover { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -495,6 +483,26 @@ content: '\25be'; } +/* Sortable Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + text-align: left; + font-weight: bold; + color: #333333; + color: rgba(0, 0, 0, 0.8); +} +.ui.sortable.table thead th:hover { + background-color: rgba(0, 0, 0, 0.13); + color: rgba(0, 0, 0, 0.8); +} + +/* Inverted Sortable */ +.ui.inverted.sortable.table thead th:hover { + background-color: rgba(255, 255, 255, 0.13); + color: rgba(255, 255, 255, 1); +} + + /*-------------- Inverted ---------------*/ @@ -583,4 +591,6 @@ /* Large */ .ui.large.table { font-size: 1.1em; -} \ No newline at end of file +} + +.loadUIOverrides(); diff --git a/src/themes/_site/collections/table.overrides b/src/themes/_site/collections/table.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/_site/collections/table.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/_site/collections/table.variables b/src/themes/_site/collections/table.variables new file mode 100644 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/collections/table.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/packages/default/collections/table.overrides b/src/themes/packages/default/collections/table.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/packages/default/collections/table.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/packages/default/collections/table.variables b/src/themes/packages/default/collections/table.variables new file mode 100644 index 000000000..fcf9fd995 --- /dev/null +++ b/src/themes/packages/default/collections/table.variables @@ -0,0 +1,97 @@ +/*------------------- + Globals Used +--------------------*/ + +// @textColor +// @borderColor +// @invertedUnselectedTextColor + +/*------------------- + Collection +--------------------*/ + +@borderCollapse: separate; +@borderSpacing: 0px; +@transition: all 0.2s @defaultEasing; +@borderRadius: 0.25rem; +@background: #FFFFFF; +@border: 1px solid @solidBorderColor; +@boxShadow: none; + +/*-------------- + Elements +---------------*/ + +/* Table Row */ +@rowBorder: 1px solid @solidBorderColor; + +/* Table Cell */ +@cellVerticalPadding: 0.7em; +@cellHorizontalPadding: 0.8em; +@cellVerticalAlign: middle; +@cellBorder: 1px solid @solidBorderColor; + +/* Table Header */ +@headerBorder: 1px solid rgba(0, 0, 0, 0.1); +@headerBackground: transparent; +@headerAlign: left; +@headerVerticalAlign: middle; +@headerColor: @textColor; +@headerVerticalPadding: @cellVerticalPadding; +@headerHorizontalPadding: @cellHorizontalPadding; +@headerFontStyle: none; +@headerFontWeight: bold; +@headerTextTransform: none; + +/* Table Footer */ +@footerBorder: 1px solid rgba(0, 0, 0, 0.1); +@footerBackground: rgba(0, 0, 0, 0.05); +@footerAlign: left; +@footerVerticalAlign: middle; +@footerColor: @textColor; +@footerVerticalPadding: 1em; +@footerHorizontalPadding: @cellHorizontalPadding; +@footerFontStyle: italic; +@footerFontWeight: normal; +@footerTextTransform: none; + +/* Responsive Size */ +@responsiveHeaderDisplay: none; +@responsiveFooterDisplay: none; + +@responsiveRowVerticalPadding: 1em; +@responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; + +@responsiveCellVerticalPadding: 0.25em; +@responsiveCellHorizontalPadding: 0.75em; +@responsiveCellBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; + +@responsiveStatusColor: transparent; + +/*-------------- + Couplings +---------------*/ + +@iconVerticalAlign: baseline; + + +/*-------------- + States +---------------*/ + +@stateMarkerWidth: 2px; + +/* Positive */ +@positiveColor: #119000; +@positiveBackgroundColor: #F2F8F0; +@positiveBoxShadow: @stateMarkerWidth 0px 0px @positiveColor inset; + +@positiveBackgroundHover: #ECF5E9; +@positiveColorHover: #119000; + + +/*-------------- + Types +---------------*/ + +@stripedBackground: rgba(0, 0, 50, 0.03);
Name Status