Skip to content

Z
zui

zzx_123123 / zui
与 Fork 源项目一致

Fork自 易企天创 / zui

通知 1
Star 0
Fork 0
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 074e5912 编写于 作者: C Catouse
浏览文件
操作

* add less style of tables.

上级 31f9e8b0
隐藏空白更改
内联 并排
Showing with 675 addition and 184 deletion
dist/css/zui.css
浏览文件 @ 074e5912
......@@ -1633,27 +1633,6 @@ fieldset[disabled] .form-control {
textarea.form-control {
height: auto;
}
.form-focus {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0 none;
}
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
/* IE8-9 */
line-height: normal;
}
input[type="file"] {
display: block;
}
select[multiple],
select[size] {
height: auto;
......@@ -1663,13 +1642,6 @@ select optgroup {
font-style: inherit;
font-family: inherit;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
height: auto;
......@@ -1686,161 +1658,10 @@ input[type="number"]::-webkit-inner-spin-button {
.form-control::-webkit-input-placeholder {
color: #808080;
}
.radio,
.checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
}
.radio label,
.checkbox label {
display: inline;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 1px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 4px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
textarea.input-lg {
height: auto;
}
.has-warning .help-block,
.has-warning .control-label {
color: #ed9c28;
}
.has-warning .form-control {
border-color: #ed9c28;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
border-color: #d18211;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f5c786;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f5c786;
}
.has-warning .input-group-addon {
color: #ed9c28;
border-color: #ed9c28;
background-color: #fcf8e3;
}
.has-error .help-block,
.has-error .control-label {
color: #d2322d;
}
.has-error .form-control {
border-color: #d2322d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
border-color: #a82824;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #e48481;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #e48481;
}
.has-error .input-group-addon {
color: #d2322d;
border-color: #d2322d;
background-color: #f2dede;
}
.has-success .help-block,
.has-success .control-label {
color: #47a447;
}
.has-success .form-control {
border-color: #47a447;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
border-color: #388038;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #86cb86;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #86cb86;
}
.has-success .input-group-addon {
color: #47a447;
border-color: #47a447;
background-color: #dff0d8;
}
.form-control-static {
margin-bottom: 0;
padding-top: 7px;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 2px;
}
.breadcrumb > li {
......@@ -1995,6 +1816,215 @@ h6.header-dividing,
border-bottom: 1px solid #e5e5e5;
padding-bottom: 9px;
}
table {
max-width: 100%;
background-color: transparent;
}
th {
text-align: left;
}
.table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-bottom: 1px solid #dddddd;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 1px solid #dddddd;
background-color: #f1f1f1;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}
.table-bordered {
border: 1px solid #dddddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #dddddd;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}
table col[class*="col-"] {
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
float: none;
display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
background-color: #f5f5f5;
}
.table > thead > tr > td.active:first-child,
.table > tbody > tr > td.active:first-child,
.table > tfoot > tr > td.active:first-child,
.table > thead > tr > th.active:first-child,
.table > tbody > tr > th.active:first-child,
.table > tfoot > tr > th.active:first-child,
.table > thead > tr.active > td:first-child,
.table > tbody > tr.active > td:first-child,
.table > tfoot > tr.active > td:first-child,
.table > thead > tr.active > th:first-child,
.table > tbody > tr.active > th:first-child,
.table > tfoot > tr.active > th:first-child {
border-left: 5px solid #999999;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th {
background-color: #d0e9c6;
border-color: #c9e2b3;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
background-color: #f2dede;
border-color: #eed3d7;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th {
background-color: #ebcccc;
border-color: #e6c1c7;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
background-color: #fcf8e3;
border-color: #fbeed5;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th {
background-color: #faf2cc;
border-color: #f8e5be;
}
@media (max-width: 768px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
-webkit-overflow-scrolling: touch;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
.table-responsive > .table-bordered {
border: 0;
}
.table-responsive > .table-bordered > thead > tr > th:first-child,
.table-responsive > .table-bordered > tbody > tr > th:first-child,
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
.table-responsive > .table-bordered > thead > tr > td:first-child,
.table-responsive > .table-bordered > tbody > tr > td:first-child,
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.table-responsive > .table-bordered > thead > tr > th:last-child,
.table-responsive > .table-bordered > tbody > tr > th:last-child,
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
.table-responsive > .table-bordered > thead > tr > td:last-child,
.table-responsive > .table-bordered > tbody > tr > td:last-child,
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.table-responsive > .table-bordered > tbody > tr:last-child > th,
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
.table-responsive > .table-bordered > tbody > tr:last-child > td,
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
......
examples/tables.html
浏览文件 @ 074e5912
......@@ -9,6 +9,226 @@
<title>ZUI</title>
<link href="{../dist/css/zui.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
</head>
\ No newline at end of file
<link href="../dist/css/zui.css" rel="stylesheet">
<link href="../assets/css/doc.css" rel="stylesheet">
</head>
<body>
<article>
<section id="buttons" class="page-section">
<h1 class="header-dividing">表格</h1>
<h2>类型</h2>
<table class="table">
<tbody>
<tr>
<th class="col-md-2">名称</th>
<th>描述</th>
</tr>
<tr>
<td>表头</td>
<td>一般表格的第一行作为表头，用于描述表中每一列数据名称。为区别于表格其他行，表头具备不同的样式，例如字体加粗等。在垂直显示一组数据的表格中，表头也可能是垂直的第一列，而不是行。</td>
</tr>
<tr>
<td>内容</td>
<td>一般内容会在单元格内靠左对齐，对于数字可能靠右对齐比较好。在一些表格中，内容可以按单元格选择或者按行选择，选中的部分会以不同的样式区分。为了使得行与行便于区分，通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。</td>
</tr>
<tr>
<td>表尾</td>
<td>表位放置与表末尾提供与表相关补充数据或操作，不过并不常见。</td>
</tr>
</tbody>
</table>
<h2>参数</h2>
<h3>隔行交替样式的表</h3>
<p><code>.table-striped</code></p>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<h3>响应鼠标悬停</h3>
<p><code>.table-hover</code></p>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<h3>带所有边框的表格</h3>
<p><code>.table-bordered</code></p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sunshine</td>
<td>Sunday</td>
<td>catouse</td>
</tr>
<tr>
<td>4</td>
<td>Sunday</td>
<td>Sunshine</td>
<td>catouse</td>
</tr>
<tr>
<td>2</td>
<td>catouse</td>
<td>azhi</td>
<td>zenUI</td>
</tr>
<tr>
<td>3</td>
<td>&nbsp;</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<h3>更为紧凑的表格</h3>
<p><code>.table-condensed</code></p>
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colcol-md-="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3>色彩标记</h3>
<p>可以根据语义标记整行或者某一单元格</p>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>描述</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>表示成功或积极的行为。</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="danger">
<td>2</td>
<td>表示一个危险或存有潜在危险的行为。</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>表示警告，可能需要注意。</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="active">
<td>4</td>
<td>标记为激活行。</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</section>
</article>
</body>
</html>
\ No newline at end of file
src/less/basic/variables.less
浏览文件 @ 074e5912
......@@ -177,6 +177,22 @@
@caret-width-large: 5px;
// Tables
// -------------------------
@table-cell-padding: 8px;
@table-condensed-cell-padding: 5px;
@table-bg: transparent; // overall background-color
@table-head-bg: @gray-pale;
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5;
@table-bg-active: @table-bg-hover;
@table-border-active: @gray-light;
@table-border-color: #ddd; // table and cell border
// BUTTONS
// -------------------------------------------------
......
src/less/components/tables.less
浏览文件 @ 074e5912
......@@ -37,8 +37,226 @@ th
padding: @table-cell-padding;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
border-bottom: 1px solid @table-border-color;
// border-top: 1px solid lighten(@table-border-color, 5%);
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
}
}
// Bottom align for column headings
> thead > tr > th
{
vertical-align: bottom;
border-bottom: 1px solid @table-border-color;
background-color: @table-head-bg;
}
}
// Condensed table w/ half padding
.table-condensed
{
> thead,
> tbody,
> tfoot
{
> tr
{
> th,
> td
{
padding: @table-condensed-cell-padding;
}
}
}
}
// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered
{
border: 1px solid @table-border-color;
> thead,
> tbody,
> tfoot
{
> tr
{
> th,
> td
{
border: 1px solid @table-border-color;
}
}
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped > tbody > tr:nth-child(odd)
{
> td,
> th
{
background-color: @table-bg-accent;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover > tbody > tr:hover
{
> td,
> th
{
background-color: @table-bg-hover;
}
}
// Table cell sizing
//
// Reset default table behavior
table col[class*="col-"]
{
float: none;
display: table-column;
}
table
{
td,
th
{
&[class*="col-"]
{
float: none;
display: table-cell;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr
{
> td.active,
> th.active,
&.active > td,
&.active > th
{
background-color: @table-bg-active;
&:first-child
{
border-left: 5px solid @table-border-active;
}
}
}
// Generate the contextual variants
.table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm-min)
{
.table-responsive
{
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing
> .table
{
margin-bottom: 0;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot
{
> tr
{
> th,
> td
{
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered
{
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot
{
> tr
{
> th:first-child,
> td:first-child
{
border-left: 0;
}
> th:last-child,
> td:last-child
{
border-right: 0;
}
}
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot
{
> tr:last-child
{
> th,
> td
{
border-bottom: 0;
}
}
}
}
}
}
\ No newline at end of file
}
src/less/zui.less
浏览文件 @ 074e5912
......@@ -38,6 +38,13 @@
@import "controls/headers.less";
//
// COMPONENTS
// --------------------------------------------------
@import "components/tables.less";
//
// ASSETS
// --------------------------------------------------
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或