richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes to label/table

pull/13/head
Jack Lukic 11 years ago
parent
75001e1600
commit
90bb95dfb3
8 changed files with 402 additions and 132 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      build/uncompressed/collections/table.css
  2. 3
      component.json
  3. 28
      node/Gruntfile.js
  4. 67
      node/package.json
  5. 67
      node/src/documents/collections/table.html
  6. 120
      node/src/files/components/semantic/collections/table.css
  7. 128
      src/collections/table.less
  8. 1
      src/elements/label.less

120
build/uncompressed/collections/table.css
View File

@ -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;

3
component.json
View File

@ -15,8 +15,7 @@
"framework"
],
"license" : [
"http://bartaz.mit-license.org/",
"http://www.gnu.org/licenses/"
"http://bartaz.mit-license.org/"
],
"main": [

28
node/Gruntfile.js
View File

@ -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);
};

67
node/package.json
View File

@ -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 <us@bevry.me> (http://bevry.me)",
"maintainers": [
"Luke Karrys (http://lukekarrys.com)"
],
"contributors": [
"Benjamin Lupton <b@lupton.cc> (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"
}
}

67
node/src/documents/collections/table.html
View File

@ -28,8 +28,8 @@ type : 'UI Collection'
<div class="example">
<h4 class="ui header">Table</h4>
<p>A standard table</p>
<div class="ui info message">
<p>This example uses a <a href="/elements/segment.html">ui segment</a> and to add padding and a background color. This is not required.</p>
<div class="ui ignorede info message">
<p>This example uses a <a href="/elements/segment.html">segment</a> to add padding and a background color.</p>
</div>
<table class="ui sortable table segment">
<thead>
@ -311,6 +311,36 @@ type : 'UI Collection'
</table>
</div>
<div class="example">
<h4 class="ui header">Column Width</h4>
<p>A table can specify the width of individual columns independently.</p>
<div class="ui ignored info message">Tables use a 16 column grid. This should be the total width of all elements in a column</div>
<table class="ui five column table segment">
<thead>
<th class="ten wide">Name</th>
<th class="six wide">Status</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
</tr>
</tbody>
<tfoot>
<th>3 People</th>
<th>2 Approved</th>
</tfoot>
</table>
</div>
<div class="example">
<h4 class="ui header">Collapsing</h4>
@ -350,7 +380,38 @@ type : 'UI Collection'
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>A tables colors can be inverted</p>
<table class="ui inverted segment table segment">
<table class="ui inverted table segment">
<thead>
<th>Name</th>
<th>Status</th>
<th>Notes</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
<td>None</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
<td>Requires call</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
<td>None</td>
</tr>
</tbody>
<tfoot>
<th>3 People</th>
<th>2 Approved</th>
<th></th>
</tfoot>
</table>
</div>
<div class="another example">
<table class="ui inverted red table segment">
<thead>
<th>Name</th>
<th>Status</th>

120
node/src/files/components/semantic/collections/table.css
View File

@ -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;

128
src/collections/table.less
View File

@ -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;

1
src/elements/label.less
View File

@ -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;

Write Preview
Loading…
Cancel
Save