mirror of
https://github.com/WebStackPage/WebStackPage.github.io.git
synced 2026-02-08 12:54:35 +08:00
120 lines
2.8 KiB
Plaintext
Executable File
120 lines
2.8 KiB
Plaintext
Executable File
// Name: Table
|
|
// Description: Defines styles for tables
|
|
//
|
|
// Component: `uk-table`
|
|
//
|
|
// Modifiers: `uk-table-middle`
|
|
// `uk-table-striped`
|
|
// `uk-table-condensed`
|
|
// `uk-table-hover`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@table-margin-vertical: 15px;
|
|
@table-padding-vertical: 8px;
|
|
@table-padding-horizontal: 8px;
|
|
|
|
@table-caption-color: #999;
|
|
@table-caption-font-size: 12px;
|
|
|
|
@table-striped-background: #f5f5f5;
|
|
|
|
@table-condensed-padding-vertical: 4px;
|
|
@table-condensed-padding-horizontal: 8px;
|
|
|
|
@table-hover-background: #EEE;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Table
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Remove most spacing between table cells.
|
|
* 2. Block element behavior
|
|
* 3. Style
|
|
*/
|
|
|
|
.uk-table {
|
|
/* 1 */
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
/* 2 */
|
|
width: 100%;
|
|
/* 3 */
|
|
margin-bottom: @table-margin-vertical;
|
|
}
|
|
|
|
/*
|
|
* Add margin if adjacent element
|
|
*/
|
|
|
|
* + .uk-table { margin-top: @table-margin-vertical; }
|
|
|
|
.uk-table th,
|
|
.uk-table td {
|
|
padding: @table-padding-vertical @table-padding-horizontal;
|
|
.hook-table;
|
|
}
|
|
|
|
/*
|
|
* Set alignment
|
|
*/
|
|
|
|
.uk-table th { text-align: left; }
|
|
.uk-table td { vertical-align: top; }
|
|
|
|
.uk-table thead th { vertical-align: bottom; }
|
|
|
|
/*
|
|
* Caption and footer
|
|
*/
|
|
|
|
.uk-table caption,
|
|
.uk-table tfoot {
|
|
font-size: @table-caption-font-size;
|
|
font-style: italic;
|
|
}
|
|
|
|
.uk-table caption {
|
|
text-align: left;
|
|
color: @table-caption-color;
|
|
}
|
|
|
|
|
|
/* Sub-modifier: `uk-table-middle`
|
|
========================================================================== */
|
|
|
|
.uk-table-middle,
|
|
.uk-table-middle td { vertical-align: middle !important; }
|
|
|
|
|
|
/* Modifier: `uk-table-striped`
|
|
========================================================================== */
|
|
|
|
.uk-table-striped tbody tr:nth-of-type(odd) { background: @table-striped-background; }
|
|
|
|
|
|
/* Modifier: `uk-table-condensed`
|
|
========================================================================== */
|
|
|
|
.uk-table-condensed td { padding: @table-condensed-padding-vertical @table-condensed-padding-horizontal; }
|
|
|
|
|
|
/* Modifier: `uk-table-hover`
|
|
========================================================================== */
|
|
|
|
.uk-table-hover tbody tr:hover { background: @table-hover-background; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-table-misc;
|
|
|
|
.hook-table() {}
|
|
.hook-table-misc() {} |