From 72577ad974e76209492e52eed8390f210b40f485 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 24 Apr 2013 18:48:13 -0400 Subject: [PATCH] adds docs for ui table Former-commit-id: 1969e0e805e554122db2cf0759286ab48753f12f Former-commit-id: 9eabae0051358cdf42758a809afbf18a543c6bdc --- docs/form.html | 10 +- docs/javascript/table.js | 23 ++ docs/library/tablesort.js | 209 +++++++++++++ docs/stub.html | 197 ++++++++++++ docs/stylesheets/example.css | 2 +- docs/table.html | 585 +++++++++++++++++++++++++++++++++++ src/ui/flat/block.css | 2 + src/ui/flat/button.css | 2 +- src/ui/flat/table.css | 317 +++++++++++++------ src/ui/shaded/text.css | 1 + 10 files changed, 1248 insertions(+), 100 deletions(-) create mode 100755 docs/javascript/table.js create mode 100755 docs/library/tablesort.js create mode 100755 docs/stub.html create mode 100755 docs/table.html diff --git a/docs/form.html b/docs/form.html index 4e54a0881..213a1f76e 100755 --- a/docs/form.html +++ b/docs/form.html @@ -91,8 +91,8 @@
1. Button 2. Form - 3. Headers - 4. Columns + 3. Tables + 4. Columns 5. Elements 6. Tags 7. Items @@ -100,7 +100,7 @@
@@ -283,7 +283,7 @@

Error

-

If form is in an error state, it will automatically show any error message blocks:

+

If a form is in an error state, it will automatically show any error message blocks:

Action Forbidden
@@ -320,7 +320,7 @@

Warning

-

If form is in warning state, it will automatically show any warning message block:

+

If a form is in warning state, it will automatically show any warning message block:

diff --git a/docs/javascript/table.js b/docs/javascript/table.js new file mode 100755 index 000000000..7f13d705a --- /dev/null +++ b/docs/javascript/table.js @@ -0,0 +1,23 @@ +semantic.table = {}; + +// ready event +semantic.table.ready = function() { + + // selector cache + var + $sortTable = $('.sortable.table'), + // alias + handler + ; + + $sortTable + .tablesort() + ; + +}; + + +// attach ready event +$(document) + .ready(semantic.table.ready) +; \ No newline at end of file diff --git a/docs/library/tablesort.js b/docs/library/tablesort.js new file mode 100755 index 000000000..1d3f971c6 --- /dev/null +++ b/docs/library/tablesort.js @@ -0,0 +1,209 @@ +/* + A simple, lightweight jQuery plugin for creating sortable tables. + https://github.com/kylefox/jquery-tablesort + Version 0.0.1 +*/ + +;(function($) { + + $.tablesort = function ($table, settings) { + var self = this; + this.$table = $table; + this.settings = $.extend({}, $.tablesort.defaults, settings); + this.$table.find('thead th').bind('click.tablesort', function() { + if( !$(this).hasClass('disabled') ) { + self.sort($(this)); + } + }); + this.index = null; + this.$th = null; + this.direction = []; + }; + + $.tablesort.prototype = { + + sort: function(th, direction) { + var start = new Date(), + self = this, + table = this.$table, + rows = table.find('tbody tr'), + index = th.index(), + cache = [], + fragment = $('
'), + sortValueForCell = function(th, td, sorter) { + var + sortBy + ; + if(th.data().sortBy) { + sortBy = th.data().sortBy; + return (typeof sortBy === 'function') + ? sortBy(th, td, sorter) + : sortBy + ; + } + return ( td.data('sort') ) + ? td.data('sort') + : td.text() + ; + }, + naturalSort = function naturalSort (a, b) { + var + chunkRegExp = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi, + stripRegExp = /(^[ ]*|[ ]*$)/g, + dateRegExp = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/, + numericRegExp = /^0x[0-9a-f]+$/i, + oRegExp = /^0/, + cLoc = 0, + useInsensitive = function(string) { + return ('' + string).toLowerCase().replace(',', ''); + }, + // convert all to strings strip whitespace + x = useInsensitive(a).replace(stripRegExp, '') || '', + y = useInsensitive(b).replace(stripRegExp, '') || '', + // chunk/tokenize + xChunked = x.replace(chunkRegExp, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'), + yChunked = y.replace(chunkRegExp, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'), + chunkLength = Math.max(xChunked.length, yChunked.length), + // numeric, hex or date detection + xDate = parseInt(x.match(numericRegExp), 10) || (xChunked.length != 1 && x.match(dateRegExp) && Date.parse(x)), + yDate = parseInt(y.match(numericRegExp), 10) || xDate && y.match(dateRegExp) && Date.parse(y) || null, + xHexValue, + yHexValue, + index + ; + // first try and sort Hex codes or Dates + if (yDate) { + if( xDate < yDate ) { + return -1; + } + else if ( xDate > yDate ) { + return 1; + } + } + // natural sorting through split numeric strings and default strings + for(index = 0; index < chunkLength; index++) { + // find floats not starting with '0', string or 0 if not defined (Clint Priest) + xHexValue = !(xChunked[index] || '').match(oRegExp) && parseFloat(xChunked[index]) || xChunked[index] || 0; + yHexValue = !(yChunked[index] || '').match(oRegExp) && parseFloat(yChunked[index]) || yChunked[index] || 0; + // handle numeric vs string comparison - number < string - (Kyle Adams) + if (isNaN(xHexValue) !== isNaN(yHexValue)) { + return ( isNaN(xHexValue) ) + ? 1 + : -1 + ; + } + // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2' + else if (typeof xHexValue !== typeof yHexValue) { + xHexValue += ''; + yHexValue += ''; + } + if (xHexValue < yHexValue) { + return -1; + } + if (xHexValue > yHexValue) { + return 1; + } + } + return 0; + } + ; + + if(rows.length === 0) { + return; + } + + self.$table.find('thead th').removeClass(self.settings.asc + ' ' + self.settings.desc); + + this.$th = th; + if(this.index != index) { + this.direction[index] = 'desc'; + } + else if(direction !== 'asc' && direction !== 'desc') { + this.direction[index] = this.direction[index] === 'desc' ? 'asc' : 'desc'; + } + else { + this.direction[index] = direction; + } + this.index = index; + direction = this.direction[index] == 'asc' ? 1 : -1; + + self.$table.trigger('tablesort:start', [self]); + self.log("Sorting by " + this.index + ' ' + this.direction[index]); + + rows.sort(function(a, b) { + var aRow = $(a); + var bRow = $(b); + var aIndex = aRow.index(); + var bIndex = bRow.index(); + + // Sort value A + if(cache[aIndex]) { + a = cache[aIndex]; + } + else { + a = sortValueForCell(th, self.cellToSort(a), self); + cache[aIndex] = a; + } + // Sort Value B + if(cache[bIndex]) { + b = cache[bIndex]; + } + else { + b = sortValueForCell(th, self.cellToSort(b), self); + cache[bIndex]= b; + } + return (naturalSort(a, b) * direction); + }); + + rows.each(function(i, tr) { + fragment.append(tr); + }); + table.append(fragment.html()); + + th.addClass(self.settings[self.direction[index]]); + + self.log('Sort finished in ' + ((new Date()).getTime() - start.getTime()) + 'ms'); + self.$table.trigger('tablesort:complete', [self]); + + }, + + cellToSort: function(row) { + return $($(row).find('td').get(this.index)); + }, + + + log: function(msg) { + if(($.tablesort.DEBUG || this.settings.debug) && console && console.log) { + console.log('[tablesort] ' + msg); + } + }, + + destroy: function() { + this.$table.find('thead th').unbind('click.tablesort'); + this.$table.data('tablesort', null); + return null; + } + + }; + + $.tablesort.DEBUG = false; + + $.tablesort.defaults = { + debug: $.tablesort.DEBUG, + asc: 'sorted ascending', + desc: 'sorted descending' + }; + + $.fn.tablesort = function(settings) { + var table, sortable, previous; + return this.each(function() { + table = $(this); + previous = table.data('tablesort'); + if(previous) { + previous.destroy(); + } + table.data('tablesort', new $.tablesort(table, settings)); + }); + }; + +})(jQuery); \ No newline at end of file diff --git a/docs/stub.html b/docs/stub.html new file mode 100755 index 000000000..d706d6d26 --- /dev/null +++ b/docs/stub.html @@ -0,0 +1,197 @@ + + + + + UI ZZZZZZZZZZZZZ - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Semantic UI: ZZZZZZZZZZZZZ +
+ +
+ 3 of 14 +
+ 1. Button + 2. Form + 3. Table + 4. Columns + 5. Elements + 6. Tags + 7. Items + 8. Panels +
+
+ +
+ + + + + + +
+ +
+
Change Theme
+
About Semantic
+
Choice 3
+
+
+
+
+
+
+
Menu
+
+
+
+

ZZZZZZZZZZZZZ

+

qqqqqqqqqq

+
+
+
+ +
+
+
  • Standard
    • +
  • States
    • +
  • Variations
    • +
  • Group
    • +
    +
    + +

    Standard

    +
    +

    ZZZZZZZZZZZZZ

    +

    qqqqqqqqqq

    +
    +
    + + +
    +
    +
    + + +

    States

    + +
    +

    Loading

    +

    If a ZZZZZZZZZZZZZ is in loading state, it will automatically show a loading indicator:

    +
    + +
    +

    Error

    +

    If a ZZZZZZZZZZZZZ is in an error state, it will automatically show any error message blocks:

    +
    + +

    Variations

    + +

    Forms

    + +
    +

    Size

    +

    A ZZZZZZZZZZZZZ can also be small or large

    +
    + +

    Groups

    + +
    +

    ZZZZZZZZZZZZZ Groups

    +

    ZZZZZZZZZZZZZ can exist side by side to show relation

    +
    + +
    + + + \ No newline at end of file diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index 3334fad20..f152dbf3b 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -56,7 +56,7 @@ url('../fonts/neutraface-bold.eot'); src: url('../fonts/neutraface-bold.eot?#iefix') format('embeddedopentype'), - url('../fonts/neutraface-bold.woff') format('woff') + url('../fonts/neutraface-bold.otf') format('woff') ; font-style: normal; font-weight: bold; diff --git a/docs/table.html b/docs/table.html new file mode 100755 index 000000000..5dd42e4a2 --- /dev/null +++ b/docs/table.html @@ -0,0 +1,585 @@ + + + + + UI Table - Semantic + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + Semantic UI: Form +
    + +
    + 3 of 14 +
    + 1. Button + 2. Form + 3. Table + 4. Columns + 5. Elements + 6. Tags + 7. Items + 8. Panels +
    +
    + +
    + + + + + + +
    + +
    +
    Change Theme
    +
    About Semantic
    +
    Choice 3
    +
    +
    +
    +
    +
    +
    +
    Menu
    +
    +
    +
    +

    Tables

    +

    Tables are useful for displaying collections of tuples.

    +

    + Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text. +

    +

    Although no plugin has been created using the semantic module spec for sorting tables, other plugins such as kylefox's tablesort may be useful.

    +
    +
    +
    + +
    +
    +
  • Standard
    • +
  • States
    • +
  • Variations
    • +
    +
    + +

    Standard

    +
    +

    Table

    +

    A standard table

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JohnApprovedNone
    JamieApprovedRequires call
    JillDeniedNone
    +
    Add User
    +
    +
    + + +

    States

    + +

    Cells

    +
    +

    Error

    +

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

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    No Name SpecifiedApprovedNone
    JimmyApprovedNone
    JamieApprovedRequires call
    JillApprovedNone
    +
    + +
    +

    Positive / Negative

    +

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

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    No Name SpecifiedApprovedNone
    JimmyApprovedNone
    JamieApprovedRequires call
    JillApprovedNone
    +
    + +
    +

    Warning

    +

    A cell or row may warn a user:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    No Name SpecifiedApprovedNone
    JimmyApprovedNone
    JamieApprovedRequires call
    JillApprovedNone
    +
    + +
    +

    Active

    +

    A cell or row can be active:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JamieApprovedRequires call
    JohnApprovedNone
    JamieApprovedRequires call
    JillApprovedNone
    + +
    + +

    Variations

    + +
    +

    Collapsing

    +

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

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

    Grid

    +

    A table may have a grid to help differentiate cells

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

    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.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JohnNo ActionNone
    JamieApprovedRequires call
    JillDeniedNone
    3 People2 Approved
    +
    +
    +

    Padded

    +

    A table may sometimes need to be more padded for legibility

    + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JohnApprovedHe is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
    JamieApprovedJamie was not interested in purchasing our product.
    +
    +
    +

    Compact

    +

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

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JohnApprovedNone
    JamieApprovedRequires call
    JohnApprovedNone
    JamieApprovedRequires call
    JohnApprovedNone
    JamieApprovedRequires call
    JohnApprovedNone
    JamieApprovedRequires call
    +
    + +
    +

    Size

    +

    A table can also be small or large

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

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameStatusNotes
    JohnApprovedNone
    JamieApprovedRequires call
    JillDeniedNone
    3 People2 Approved
    +
    +
    + + + \ No newline at end of file diff --git a/src/ui/flat/block.css b/src/ui/flat/block.css index d495cdb93..ff8868adb 100755 --- a/src/ui/flat/block.css +++ b/src/ui/flat/block.css @@ -89,6 +89,7 @@ .ui.positive.block { background-color: #EEFFE9; color: #119000; + border-color: #2FCB05; } /* Warning Text Block */ @@ -96,6 +97,7 @@ .ui.warning.header, .ui.warning.block { background-color: #F6F3D5; + border-color: #CBB105; color: #AF9801; } /* Error Text Block */ diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index 061ee6d4a..89c5f6676 100755 --- a/src/ui/flat/button.css +++ b/src/ui/flat/button.css @@ -15,7 +15,7 @@ Button *******************************/ -/* Normal */ +/* Prototype */ .ui.button { cursor: pointer; display: inline-block; diff --git a/src/ui/flat/table.css b/src/ui/flat/table.css index 1339e0008..86d061a85 100755 --- a/src/ui/flat/table.css +++ b/src/ui/flat/table.css @@ -1,103 +1,237 @@ +/* + * # Semantic Table - Flat + * http://github.com/quirkyinc/semantic + * + * + * Copyright 2013 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + * Released: April 24 2013 + */ + + +/******************************* + Table +*******************************/ + +/* Prototype */ .ui.table { width: 100%; + background-color: #FFFFFF; border-collapse: collapse; - background-color: rgba(255, 255, 255, 0.95); - color: #333333; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); -} + color: #444444; + color: rgba(0, 0, 0, 0.75); -/* Standard Table Icons */ -.ui.table i.icon { - vertical-align: middle; - margin: 0px; -} -.ui.table .star-empty, -.ui.table .star-half, -.ui.table .star { - color: #D9B347; + border: 1px solid #DDDDDD; + border-bottom-width: 3px; } - .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: background-color 0.3s ease-out; + -moz-transition: background-color 0.3s ease-out; + -o-transition: background-color 0.3s ease-out; + -ms-transition: background-color 0.3s ease-out; + transition: background-color 0.3s ease-out; } -.ui.table thead tr { -/* - -webkit-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); - -moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); - box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.53); -*/ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } -.ui.table td, .ui.table th { - padding: 6px 10px; + cursor: auto; + text-align: left; + font-weight: bold; + background-color: rgba(0, 0, 0, 0.03); + color: rgba(0, 0, 0, 0.8); + padding: 0.5em 0.7em; + vertical-align: middle; +} + +.ui.table td { + padding: 0.40em 0.7em; vertical-align: middle; } -.ui.table th, +.ui.table tfoot th { + background-color: #FFFFFF; +} +.ui.table tfoot { + border-top: 1px dotted rgba(0, 0, 0, 0.1); +} + +/* Table Striping */ +.ui.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.03); +} + +/* Icons */ +.ui.table i.icon { + vertical-align: middle; + margin: 0px; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +/* Grid */ +.ui.grid.table tr:hover td { + background-color: rgba(0, 0, 0, 0.02); + color: rgba(0, 0, 0, 1); +} + +/* Sortable */ +.ui.sortable.table thead th:hover { + background-image: none; + background-color: rgba(0, 0, 0, 0.04); + color: #333333; +} .ui.sortable.table th.disabled:hover { cursor: auto; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.1); text-align: left; font-weight: bold; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); + color: #333333; + color: rgba(0, 0, 0, 0.8); } -/* Table Striping */ -.ui.table tbody tr:nth-child(2n) { - background-color: rgba(0, 0, 0, 0.04); + +/*-------------- + Error +---------------*/ + +.ui.table tr.error td, +.ui.table td.error, +.ui.table th.error { + background-color: #F8EBEB; + color: #AD0000; + font-weight: bold; + /* border-color: #B06C6C !important; */ +} +.ui.grid.table tr.error:hover td, +.ui.grid.table tr:hover td.error, +.ui.table tr.error:hover td, +.ui.table td:hover.error, +.ui.table th:hover.error { + background-color: #F1DFDF !important; + color: #AD0000; } +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive td, +.ui.table td.positive { + background-color: #EEFFE9; + color: #119000; + font-weight: bold; + /* border-color: #2FCB05 !important; */ +} +.ui.grid.table tr.positive:hover td, +.ui.grid.table tr:hover td.positive, +.ui.table tr.positive:hover td, +.ui.table td:hover.positive, +.ui.table th:hover.positive { + background-color: #DEF5D7 !important; + color: #119000; +} /*-------------- - Variations + Negative ---------------*/ +.ui.table tr.negative td, +.ui.table td.negative { + background-color: #F8EBEB; + color: #AD0000; + font-weight: bold; + /* border-color: #B06C6C !important; */ +} +.ui.grid.table tr.negative:hover td, +.ui.grid.table tr:hover td.negative, +.ui.table tr.negative:hover td, +.ui.table td:hover.negative, +.ui.table th:hover.negative { + background-color: #F1DFDF !important; + color: #AD0000; +} + +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning td, +.ui.table td.warning, +.ui.table th.warning { + background-color: #F6F3D5; + font-weight: bold; + /* border-color: #CBB105 !important; */ + color: #7D6C00; +} +.ui.grid.table tr.warning:hover td, +.ui.grid.table tr:hover td.warning, +.ui.table tr.warning:hover td, +.ui.table td:hover.warning, +.ui.table th:hover.warning { + background-color: #F3EFC8 !important; + color: #7D6C00; +} + + +/*-------------- + Active +---------------*/ + +.ui.table tr.active td, +.ui.table tr td.active { + background-color: #E8E8E8 !important; + color: #555555; + font-weight: bold; + /* border-color: rgba(0, 0, 0, 0.15) !important; */ +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Grid +---------------*/ -/* Grid */ .ui.grid.table { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + color: rgba(0, 0, 0, 0.55); } .ui.grid.table tbody tr, .ui.grid.table tfoot tr { border: none; - } .ui.grid.table th { - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid #E0E0E0; } .ui.grid.table tbody td { - border: 1px solid rgba(0, 0, 0, 0.15); -} + border: 1px solid #E0E0E0; -/* Row with a button */ -.ui.table tr.button td { - padding: 0px; -} -.ui.table tr.button .button { - border: none !important; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; -} - -/* Emphasize a row */ -.ui.table tr.emphasis td, -.ui.table tr td.emphasis { - background-color: rgba(40, 40, 40, 0.7); - text-align: left; - font-weight: bold; - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); + -webkit-transition: color 0.5s ease-out; + -moz-transition: color 0.5s ease-out; + -o-transition: color 0.5s ease-out; + -ms-transition: color 0.5s ease-out; + transition: color 0.5s ease-out; } /* Sortable Table */ @@ -106,27 +240,14 @@ color: #555555; vertical-align: top; } -.ui.sortable.table th:hover { - background-image: none; - background-color: #F4F4F4; -} -.ui.sortable.table th.sorted { - background-image: none; - background-color: #EEEEEE; +.ui.sortable.table th.sorted, +.ui.sortable.table th.sorted:hover { + background-color: rgba(0, 0, 0, 0.1); - border-color: #CACACA; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.4); + border-left: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); - border-bottom-width: 2px; - color: #333333; - text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); - - background: -webkit-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); - background: -moz-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); - background: -o-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); - background: -ms-linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); - background: linear-gradient(top, #EEEEEE 0px, #E2E2E2 100%); } .ui.sortable.table th:after { @@ -154,36 +275,46 @@ content: '\25be'; } -/* Icons */ -.ui.sortable.table th .icon.info-circle { - float: right; -} -/* Red Icons */ -.ui.sortable.table td .icon.cancel-circle { - color: #CC3333; +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; } -/* Green Icons */ -.ui.sortable.table td .icon.check, -.ui.sortable.table td .icon.dollar, -.ui.sortable.table td .icon.money { - color: #40D100; + + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th, +.ui.padded.table td { + padding: 0.8em 1em; } +.ui.compact.table th { + padding: 0.3em 0.5em; +} +.ui.compact.table td { + padding: 0.2em 0.5em; +} /*-------------- - Resizes + Sizes ---------------*/ +/* Small */ +.ui.small.table { + font-size: 14px; +} + +/* Standard */ .ui.table { font-size: 16px; - padding: 10px 12px; } /* Large */ .ui.large.table { font-size: 18px; -} -.ui.large.table td, -.ui.large.table th { - padding: 12px 15px; } \ No newline at end of file diff --git a/src/ui/shaded/text.css b/src/ui/shaded/text.css index 31e97402d..7cfa47ccc 100755 --- a/src/ui/shaded/text.css +++ b/src/ui/shaded/text.css @@ -232,6 +232,7 @@ .ui.green.block, .ui.success.block, .ui.positive.block { + background-color: #EEFFE9; background-image: -webkit-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); background-image: -moz-linear-gradient(#EEFFE9 0px, #D5F3CD 100%); background-image: -o-linear-gradient(#EEFFE9 0px, #D5F3CD 100%);