diff --git a/build/uncompressed/collections/table.css b/build/uncompressed/collections/table.css index cde649ec1..e27bf1398 100644 --- a/build/uncompressed/collections/table.css +++ b/build/uncompressed/collections/table.css @@ -17,9 +17,7 @@ width: 100%; border-collapse: collapse; } -.ui.table thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} +/* Table Content */ .ui.table th, .ui.table tr, .ui.table td { @@ -34,24 +32,42 @@ -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} .ui.table th { cursor: auto; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.03); text-align: left; - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.8); padding: 0.5em 0.7em; vertical-align: middle; } -.ui.table tfoot th { - font-weight: normal; - font-style: italic; +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; +} +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; +} +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; +} +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; } +/* Table Cells */ .ui.table td { padding: 0.40em 0.7em; vertical-align: middle; } +/* Footer */ .ui.table tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table tfoot th { + font-weight: normal; + font-style: italic; } /* Table Striping */ .ui.table tbody tr:nth-child(2n) { @@ -64,7 +80,7 @@ .ui.table > .icon:only-child { margin: 0em; } -/* table segment */ +/* Table Segment */ .ui.table.segment:after { display: none; } @@ -80,7 +96,7 @@ /* Sortable */ .ui.sortable.table thead th:hover { background-image: none; - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.08); color: #333333; } .ui.sortable.table th.disabled:hover { @@ -229,6 +245,71 @@ .ui.sixteen.column.table td { width: 6.25%; } +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} /*-------------- Celled ---------------*/ @@ -245,7 +326,12 @@ .ui.celled.table tbody td { border: 1px solid #E0E0E0; } -/* Sortable Table */ +.ui.celled.table.segment th { + border: none; +} +/*-------------- + Sortable +---------------*/ .ui.sortable.table thead th { cursor: pointer; white-space: nowrap; @@ -256,7 +342,6 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: rgba(0, 0, 0, 0.05); } .ui.sortable.table thead th:after { display: inline-block; @@ -268,7 +353,6 @@ font-style: normal; font-weight: normal; text-decoration: inherit; - vertical-align: text-top; } .ui.sortable.table thead th.ascending:after { content: '\25b4'; @@ -279,10 +363,15 @@ /*-------------- Inverted ---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); +} .ui.inverted.table th { background-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.9); } +/* Stripes */ .ui.inverted.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.06); } @@ -298,10 +387,9 @@ .ui.basic.table th { background-color: transparent; padding: 0.5em; - font-weight: normal; } .ui.basic.table tbody tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-bottom: 1px solid rgba(0, 0, 0, 0.03); } .ui.basic.table td { padding: 0.8em 0.5em; diff --git a/component.json b/component.json index 8f3728e5d..e6eaff414 100755 --- a/component.json +++ b/component.json @@ -15,8 +15,7 @@ "framework" ], "license" : [ - "http://bartaz.mit-license.org/", - "http://www.gnu.org/licenses/" + "http://bartaz.mit-license.org/" ], "main": [ diff --git a/node/Gruntfile.js b/node/Gruntfile.js index 168e92d8e..3b1dfc8a3 100755 --- a/node/Gruntfile.js +++ b/node/Gruntfile.js @@ -1,6 +1,16 @@ module.exports = function(grunt) { var - tasks = [ + defaultTasks = [ + // watch less folder + 'watch' + ], + watchTasks = [ + // compiles less + 'less:buildCSS', + // copies files over to docs + 'copy:libraryToDocs' + ], + buildTasks = [ // clean build directory 'clean:build', @@ -13,8 +23,8 @@ module.exports = function(grunt) { // creates minified css of each file 'cssmin:minifyCSS', - // creates release css - 'cssmin:buildReleaseCSS', + // creates custom license in header + 'cssmin:addBanner', // creates minified js of each file 'uglify:minifyJS', @@ -25,7 +35,7 @@ module.exports = function(grunt) { // cleans docs folder 'clean:docs', - // copies files over to docs + // copies spec files over to docs 'copy:specToDocs', // copies files over to docs @@ -46,7 +56,7 @@ module.exports = function(grunt) { '../src/**/*.less', '../src/**/*.js' ], - tasks : tasks + tasks : watchTasks } }, @@ -166,7 +176,7 @@ module.exports = function(grunt) { ext : '.min.css' }, - buildReleaseCSS: { + addBanner: { options : { banner : '' + '/*\n' + @@ -227,7 +237,6 @@ module.exports = function(grunt) { } } }, - s3: { options: '<%= server.cdn %>', deploy: { @@ -248,7 +257,6 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-docco'); grunt.loadNpmTasks('grunt-bower-task'); grunt.loadNpmTasks('grunt-css'); - grunt.loadNpmTasks('grunt-s3'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-less'); @@ -258,6 +266,6 @@ module.exports = function(grunt) { grunt.initConfig(config); - grunt.registerTask('default', [ 'watch' ]); - grunt.registerTask('deploy', ['s3:deploy']); + grunt.registerTask('default', defaultTasks); + grunt.registerTask('build', buildTasks); }; diff --git a/node/package.json b/node/package.json index c423f6ab8..86efcc3e2 100755 --- a/node/package.json +++ b/node/package.json @@ -2,70 +2,5 @@ "semantic": { "name": "Semantic UI", "version": 0.1 - }, - "name": "html5-boilerplate-frontend.docpad", - "version": "0.1.0", - "private": true, - "description": "HTML5 Boilerplate skeleton for DocPad. Bare essentials for building a modern website with best practices. Adds frontend plugins asset compilation.", - "homepage": "https://github.com/lukekarrys/html5-boilerplate.docpad", - "keywords": [ - "docpad-skeleton", - "docpad", - "website", - "skeleton", - "html5 boilerplate", - "h5bp", - "grunt" - ], - "author": "Bevry Pty Ltd (http://bevry.me)", - "maintainers": [ - "Luke Karrys (http://lukekarrys.com)" - ], - "contributors": [ - "Benjamin Lupton (http://balupton.com)", - "Luke Karrys (http://lukekarrys.com)" - ], - "bugs": { - "url": "https://github.com/lukekarrys/html5-boilerplate.docpad/issues" - }, - "repository": { - "type": "git", - "url": "http://github.com/lukekarrys/html5-boilerplate.docpad.git" - }, - "engines": { - "node": "0.8.x", - "npm": "1.1.x" - }, - "dependencies": { - "docpad": "~6.48.0", - "docpad-plugin-coffeescript": "~2.2.2", - "docpad-plugin-eco": "~2.0.2", - "docpad-plugin-marked": "~2.1.1", - "docpad-plugin-partials": "~2.7.2", - "docpad-plugin-stylus": "~2.4.0", - "docpad-plugin-text": "~2.2.4", - "grunt": "~0.4.0", - "bal-util": "~1.15.3", - "underscore": "~1.4.3", - "docpad-plugin-html2coffee": "~2.1.3", - "docpad-plugin-jade": "~2.5.0", - "docpad-plugin-ghpages": "~2.3.0", - "docpad-plugin-paged": "~2.2.2", - "docpad-plugin-handlebars": "~2.2.2", - "docpad-plugin-livereload": "~2.5.1" - }, - "devDependencies": { - "grunt-contrib-watch": "~0.4.4", - "grunt-css": "~0.5.4", - "grunt-bower-task": "~0.2.3", - "grunt-contrib-copy": "~0.4.1", - "grunt-contrib-uglify": "~0.2.2", - "grunt-contrib-cssmin": "~0.6.1", - "grunt-contrib-less": "~0.5.2", - "grunt-contrib-clean": "~0.4.1", - "bal-util": "~1.15.4", - "underscore": "~1.4.4", - "grunt": "~0.4.1" - }, - "main": "node_modules/docpad/bin/docpad-server" + } } diff --git a/node/src/documents/collections/table.html b/node/src/documents/collections/table.html index 81e2adbb3..e46f0a6bc 100755 --- a/node/src/documents/collections/table.html +++ b/node/src/documents/collections/table.html @@ -28,8 +28,8 @@ type : 'UI Collection'

Table

A standard table

-
-

This example uses a ui segment and to add padding and a background color. This is not required.

+
+

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

@@ -311,6 +311,36 @@ 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
+ + + + + + + + + + + + + + + + + + + + + + + +
NameStatus
JohnApproved
JamieApproved
JillDenied
3 People2 Approved
+
+

Collapsing

@@ -350,7 +380,38 @@ type : 'UI Collection'

Inverted

A tables colors can be inverted

- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameStatusNotes
JohnApprovedNone
JamieApprovedRequires call
JillDeniedNone
3 People2 Approved
+
+
+ diff --git a/node/src/files/components/semantic/collections/table.css b/node/src/files/components/semantic/collections/table.css index cde649ec1..e27bf1398 100644 --- a/node/src/files/components/semantic/collections/table.css +++ b/node/src/files/components/semantic/collections/table.css @@ -17,9 +17,7 @@ width: 100%; border-collapse: collapse; } -.ui.table thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} +/* Table Content */ .ui.table th, .ui.table tr, .ui.table td { @@ -34,24 +32,42 @@ -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} .ui.table th { cursor: auto; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.03); text-align: left; - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.8); padding: 0.5em 0.7em; vertical-align: middle; } -.ui.table tfoot th { - font-weight: normal; - font-style: italic; +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; +} +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; +} +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; +} +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; } +/* Table Cells */ .ui.table td { padding: 0.40em 0.7em; vertical-align: middle; } +/* Footer */ .ui.table tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table tfoot th { + font-weight: normal; + font-style: italic; } /* Table Striping */ .ui.table tbody tr:nth-child(2n) { @@ -64,7 +80,7 @@ .ui.table > .icon:only-child { margin: 0em; } -/* table segment */ +/* Table Segment */ .ui.table.segment:after { display: none; } @@ -80,7 +96,7 @@ /* Sortable */ .ui.sortable.table thead th:hover { background-image: none; - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.08); color: #333333; } .ui.sortable.table th.disabled:hover { @@ -229,6 +245,71 @@ .ui.sixteen.column.table td { width: 6.25%; } +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} /*-------------- Celled ---------------*/ @@ -245,7 +326,12 @@ .ui.celled.table tbody td { border: 1px solid #E0E0E0; } -/* Sortable Table */ +.ui.celled.table.segment th { + border: none; +} +/*-------------- + Sortable +---------------*/ .ui.sortable.table thead th { cursor: pointer; white-space: nowrap; @@ -256,7 +342,6 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - background-color: rgba(0, 0, 0, 0.05); } .ui.sortable.table thead th:after { display: inline-block; @@ -268,7 +353,6 @@ font-style: normal; font-weight: normal; text-decoration: inherit; - vertical-align: text-top; } .ui.sortable.table thead th.ascending:after { content: '\25b4'; @@ -279,10 +363,15 @@ /*-------------- Inverted ---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); +} .ui.inverted.table th { background-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.9); } +/* Stripes */ .ui.inverted.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.06); } @@ -298,10 +387,9 @@ .ui.basic.table th { background-color: transparent; padding: 0.5em; - font-weight: normal; } .ui.basic.table tbody tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-bottom: 1px solid rgba(0, 0, 0, 0.03); } .ui.basic.table td { padding: 0.8em 0.5em; diff --git a/src/collections/table.less b/src/collections/table.less index 0df6d41ba..a71e05926 100755 --- a/src/collections/table.less +++ b/src/collections/table.less @@ -20,9 +20,8 @@ width: 100%; border-collapse: collapse; } -.ui.table thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); -} + +/* Table Content */ .ui.table th, .ui.table tr, .ui.table td { @@ -39,28 +38,47 @@ -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } + +/* Headers */ +.ui.table thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.03); +} .ui.table th { cursor: auto; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.03); text-align: left; - color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.8); padding: 0.5em 0.7em; vertical-align: middle; } -.ui.table tfoot th { - font-weight: normal; - font-style: italic; +.ui.table thead th:first-child { + border-radius: 5px 0px 0px 0px; +} +.ui.table thead th:last-child { + border-radius: 0px 5px 0px 0px; +} +.ui.table tfoot th:first-child { + border-radius: 0px 0px 0px 5px; +} +.ui.table tfoot th:last-child { + border-radius: 0px 0px 5px 0px; } +/* Table Cells */ .ui.table td { padding: 0.40em 0.7em; vertical-align: middle; } +/* Footer */ .ui.table tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgba(0, 0, 0, 0.03); +} +.ui.table tfoot th { + font-weight: normal; + font-style: italic; } /* Table Striping */ @@ -76,7 +94,7 @@ margin: 0em; } -/* table segment */ +/* Table Segment */ .ui.table.segment:after { display: none; } @@ -95,7 +113,7 @@ /* Sortable */ .ui.sortable.table thead th:hover { background-image: none; - background-color: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.08); color: #333333; } .ui.sortable.table th.disabled:hover { @@ -261,6 +279,73 @@ width: 6.25%; } +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: 6.25%; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: 12.5%; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: 18.75%; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: 25%; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: 31.25%; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: 37.5%; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: 43.75%; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: 50%; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: 56.25%; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: 62.5%; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: 68.75%; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: 75%; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: 81.25%; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: 87.5%; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: 93.75%; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: 100%; +} + + /*-------------- Celled ---------------*/ @@ -278,8 +363,14 @@ .ui.celled.table tbody td { border: 1px solid #E0E0E0; } +.ui.celled.table.segment th { + border: none; +} + +/*-------------- + Sortable +---------------*/ -/* Sortable Table */ .ui.sortable.table thead th { cursor: pointer; white-space: nowrap; @@ -290,8 +381,6 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - - background-color: rgba(0, 0, 0, 0.05); } .ui.sortable.table thead th:after { @@ -306,8 +395,6 @@ font-style: normal; font-weight: normal; text-decoration: inherit; - - vertical-align: text-top; } .ui.sortable.table thead th.ascending:after { content: '\25b4'; @@ -320,10 +407,16 @@ Inverted ---------------*/ +/* Text Color */ +.ui.inverted.table td { + color: rgba(255, 255, 255, 0.9); +} .ui.inverted.table th { background-color: rgba(0, 0, 0, 0.15); color: rgba(255, 255, 255, 0.9); } + +/* Stripes */ .ui.inverted.table tbody tr:nth-child(2n) { background-color: rgba(255, 255, 255, 0.06); } @@ -344,10 +437,9 @@ .ui.basic.table th { background-color: transparent; padding: 0.5em; - font-weight: normal; } .ui.basic.table tbody tr { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-bottom: 1px solid rgba(0, 0, 0, 0.03); } .ui.basic.table td { padding: 0.8em 0.5em; diff --git a/src/elements/label.less b/src/elements/label.less index 5f21cc07e..3e91e8e97 100755 --- a/src/elements/label.less +++ b/src/elements/label.less @@ -529,7 +529,6 @@ a.ui.teal.label:hover:before { .ui.circular.labels .label, .ui.circular.label { margin-top: -1em; - height: 2em; padding: 0.5em !important;
Name Status