mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
9.3 KiB
315 lines
9.3 KiB
// Name: Table
|
|
// Description: Styles for tables
|
|
//
|
|
// Component: `uk-table`
|
|
//
|
|
// Modifiers: `uk-table-middle`
|
|
// `uk-table-divider`
|
|
// `uk-table-striped`
|
|
// `uk-table-hover`
|
|
// `uk-table-small`
|
|
// `uk-table-justify`
|
|
// `uk-table-shrink`
|
|
// `uk-table-expand`
|
|
// `uk-table-link`
|
|
// `uk-table-responsive`
|
|
//
|
|
// States: `uk-active`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$table-margin-vertical: $global-margin !default;
|
|
|
|
$table-cell-padding-vertical: 16px !default;
|
|
$table-cell-padding-horizontal: 12px !default;
|
|
|
|
$table-header-cell-font-size: $global-font-size !default;
|
|
$table-header-cell-font-weight: bold !default;
|
|
$table-header-cell-color: $global-color !default;
|
|
|
|
$table-footer-font-size: $global-small-font-size !default;
|
|
|
|
$table-caption-font-size: $global-small-font-size !default;
|
|
$table-caption-color: $global-muted-color !default;
|
|
|
|
$table-row-active-background: #ffd !default;
|
|
|
|
$table-divider-border-width: $global-border-width !default;
|
|
$table-divider-border: $global-border !default;
|
|
|
|
$table-striped-row-background: $global-muted-background !default;
|
|
|
|
$table-hover-row-background: $table-row-active-background !default;
|
|
|
|
$table-small-cell-padding-vertical: 10px !default;
|
|
$table-small-cell-padding-horizontal: 12px !default;
|
|
|
|
$table-large-cell-padding-vertical: 22px !default;
|
|
$table-large-cell-padding-horizontal: 12px !default;
|
|
|
|
$table-expand-min-width: 150px !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Table
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Remove most spacing between table cells.
|
|
* 2. Behave like a block element
|
|
* 3. Style
|
|
*/
|
|
|
|
.uk-table {
|
|
/* 1 */
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
/* 2 */
|
|
width: 100%;
|
|
/* 3 */
|
|
margin-bottom: $table-margin-vertical;
|
|
@if(mixin-exists(hook-table)) {@include hook-table();}
|
|
}
|
|
|
|
/* Add margin if adjacent element */
|
|
* + .uk-table { margin-top: $table-margin-vertical; }
|
|
|
|
|
|
/* Header cell
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Style
|
|
*/
|
|
|
|
.uk-table th {
|
|
padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
|
|
text-align: left;
|
|
vertical-align: bottom;
|
|
/* 1 */
|
|
font-size: $table-header-cell-font-size;
|
|
font-weight: $table-header-cell-font-weight;
|
|
color: $table-header-cell-color;
|
|
@if(mixin-exists(hook-table-header-cell)) {@include hook-table-header-cell();}
|
|
}
|
|
|
|
|
|
/* Cell
|
|
========================================================================== */
|
|
|
|
.uk-table td {
|
|
padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
|
|
vertical-align: top;
|
|
@if(mixin-exists(hook-table-cell)) {@include hook-table-cell();}
|
|
}
|
|
|
|
/*
|
|
* Remove margin from the last-child
|
|
*/
|
|
|
|
.uk-table td > :last-child { margin-bottom: 0; }
|
|
|
|
|
|
/* Footer
|
|
========================================================================== */
|
|
|
|
.uk-table tfoot {
|
|
font-size: $table-footer-font-size;
|
|
@if(mixin-exists(hook-table-footer)) {@include hook-table-footer();}
|
|
}
|
|
|
|
|
|
/* Caption
|
|
========================================================================== */
|
|
|
|
.uk-table caption {
|
|
font-size: $table-caption-font-size;
|
|
text-align: left;
|
|
color: $table-caption-color;
|
|
@if(mixin-exists(hook-table-caption)) {@include hook-table-caption();}
|
|
}
|
|
|
|
|
|
/* Alignment modifier
|
|
========================================================================== */
|
|
|
|
.uk-table-middle,
|
|
.uk-table-middle td { vertical-align: middle !important; }
|
|
|
|
|
|
/* Style modifiers
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Divider
|
|
*/
|
|
|
|
.uk-table-divider > tr:not(:first-child),
|
|
.uk-table-divider > :not(:first-child) > tr,
|
|
.uk-table-divider > :first-child > tr:not(:first-child) {
|
|
border-top: $table-divider-border-width solid $table-divider-border;
|
|
@if(mixin-exists(hook-table-divider)) {@include hook-table-divider();}
|
|
}
|
|
|
|
/*
|
|
* Striped
|
|
*/
|
|
|
|
.uk-table-striped > tr:nth-of-type(odd),
|
|
.uk-table-striped tbody tr:nth-of-type(odd) {
|
|
background: $table-striped-row-background;
|
|
@if(mixin-exists(hook-table-striped)) {@include hook-table-striped();}
|
|
}
|
|
|
|
/*
|
|
* Hover
|
|
*/
|
|
|
|
.uk-table-hover > tr:hover,
|
|
.uk-table-hover tbody tr:hover {
|
|
background: $table-hover-row-background;
|
|
@if(mixin-exists(hook-table-hover)) {@include hook-table-hover();}
|
|
}
|
|
|
|
|
|
/* Active state
|
|
========================================================================== */
|
|
|
|
.uk-table > tr.uk-active,
|
|
.uk-table tbody tr.uk-active {
|
|
background: $table-row-active-background;
|
|
@if(mixin-exists(hook-table-row-active)) {@include hook-table-row-active();}
|
|
}
|
|
|
|
/* Size modifier
|
|
========================================================================== */
|
|
|
|
.uk-table-small th,
|
|
.uk-table-small td {
|
|
padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal;
|
|
@if(mixin-exists(hook-table-small)) {@include hook-table-small();}
|
|
}
|
|
|
|
.uk-table-large th,
|
|
.uk-table-large td {
|
|
padding: $table-large-cell-padding-vertical $table-large-cell-padding-horizontal;
|
|
@if(mixin-exists(hook-table-large)) {@include hook-table-large();}
|
|
}
|
|
|
|
|
|
/* Justify modifier
|
|
========================================================================== */
|
|
|
|
.uk-table-justify th:first-child,
|
|
.uk-table-justify td:first-child { padding-left: 0; }
|
|
|
|
.uk-table-justify th:last-child,
|
|
.uk-table-justify td:last-child { padding-right: 0; }
|
|
|
|
|
|
/* Cell size modifier
|
|
========================================================================== */
|
|
|
|
.uk-table-shrink { width: 1px; }
|
|
.uk-table-expand { min-width: $table-expand-min-width; }
|
|
|
|
|
|
/* Cell link modifier
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Does not work with `uk-table-justify` at the moment
|
|
*/
|
|
|
|
.uk-table-link { padding: 0 !important; }
|
|
|
|
.uk-table-link > a {
|
|
display: block;
|
|
padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
|
|
}
|
|
|
|
.uk-table-small .uk-table-link > a { padding: $table-small-cell-padding-vertical $table-small-cell-padding-horizontal; }
|
|
|
|
|
|
/* Responsive table
|
|
========================================================================== */
|
|
|
|
|
|
/* Phone landscape and smaller */
|
|
@media (max-width: $breakpoint-small-max) {
|
|
|
|
.uk-table-responsive,
|
|
.uk-table-responsive tbody,
|
|
.uk-table-responsive th,
|
|
.uk-table-responsive td,
|
|
.uk-table-responsive tr { display: block; }
|
|
|
|
.uk-table-responsive thead { display: none; }
|
|
|
|
.uk-table-responsive th,
|
|
.uk-table-responsive td {
|
|
width: auto !important;
|
|
max-width: none !important;
|
|
min-width: 0 !important;
|
|
overflow: visible !important;
|
|
white-space: normal !important;
|
|
}
|
|
|
|
.uk-table-responsive th:not(:first-child):not(.uk-table-link),
|
|
.uk-table-responsive td:not(:first-child):not(.uk-table-link),
|
|
.uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round($table-cell-padding-vertical / 3) !important; }
|
|
|
|
.uk-table-responsive th:not(:last-child):not(.uk-table-link),
|
|
.uk-table-responsive td:not(:last-child):not(.uk-table-link),
|
|
.uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round($table-cell-padding-vertical / 3) !important; }
|
|
|
|
.uk-table-justify.uk-table-responsive th,
|
|
.uk-table-justify.uk-table-responsive td {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-table-misc)) {@include hook-table-misc();}
|
|
|
|
// @mixin hook-table(){}
|
|
// @mixin hook-table-header-cell(){}
|
|
// @mixin hook-table-cell(){}
|
|
// @mixin hook-table-footer(){}
|
|
// @mixin hook-table-caption(){}
|
|
// @mixin hook-table-row-active(){}
|
|
// @mixin hook-table-divider(){}
|
|
// @mixin hook-table-striped(){}
|
|
// @mixin hook-table-hover(){}
|
|
// @mixin hook-table-small(){}
|
|
// @mixin hook-table-large(){}
|
|
// @mixin hook-table-misc(){}
|
|
|
|
|
|
// Inverse
|
|
// ========================================================================
|
|
|
|
$inverse-table-header-cell-color: $inverse-global-color !default;
|
|
$inverse-table-caption-color: $inverse-global-muted-color !default;
|
|
$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default;
|
|
$inverse-table-divider-border: $inverse-global-border !default;
|
|
$inverse-table-striped-row-background: $inverse-global-muted-background !default;
|
|
$inverse-table-hover-row-background: $inverse-table-row-active-background !default;
|
|
|
|
|
|
|
|
// @mixin hook-inverse-table-header-cell(){}
|
|
// @mixin hook-inverse-table-caption(){}
|
|
// @mixin hook-inverse-table-row-active(){}
|
|
// @mixin hook-inverse-table-divider(){}
|
|
// @mixin hook-inverse-table-striped(){}
|
|
// @mixin hook-inverse-table-hover(){}
|