Mercurial > nebulaweb3
view default/assets/scss/components/_table.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line source
// main: ../style.scss /******************************** ********************************* Tables ********************************* *********************************/ .table { thead tr.thead-inverse th { background: inherit; } &.table-inverse thead th { border-width: 0; } > tbody > tr:first-child > td { border-top: none; } &.table-borderless { td, th { border: none; } } > tbody > tr[class*="bg-"] > td { color: #fff; } > thead > tr > th { border-bottom-width: 1px; border-top-width: 0px; } &.color-table > thead > tr > th { border: 0; } .progress { margin: 0; margin-bottom: 0 !important; position: relative; top: em(8,12); } } td.footable-sortable>span.fooicon, th.footable-sortable>span.fooicon { top: em(13,12); font-size: em(12,14); } .table, .table-bordered { &, > tbody > tr > td, > thead > tr > th, > tbody > tr > th { border-color: $theme-border-color; } } /* DataTables ========================*/ .dataTables_wrapper { label { font-weight: normal } .dataTables_filter input { padding: em(5) em(10); border: rem(1) solid #eee; border-radius: rem(2); transition: all 0.3s ease; &:focus { border-color: $info; } } .dataTables_length { margin: em(15) auto; select { padding: em(3) em(7); } } table.dataTable { border: rem(1) solid #eee; margin-top: em(20); thead th { border-color: $theme-border-color; } th, td { padding: em(15) em(20); } tfoot { th { border-top: rem(1) solid #eee; } } thead { th { border-top: 0 } .sorting, .sorting_asc, .sorting_desc { background: none; position: relative; &:before { @include position(absolute, 50% em(10) null null ); transform: translateY(-50%); font-family: "Material Icons"; font-feature-settings: 'liga'; font-size: em(18); } } .sorting_asc::before { content: 'expand_less' } .sorting_desc::before { content: 'expand_more' } .sorting::before { content: 'sort'; opacity: 0.1; } } } .dataTables_info { margin-top: em(20); } .dataTables_paginate { margin-top: em(30); padding: 0; border: rem(1) solid #eee; .paginate_button { transition: all 0.3s ease; border: 0; &:hover { background: none; border: 0; color: $body-color !important; } &:focus { box-shadow:none } &.current { background: $primary; border: 0; border-radius: 0; color: #fff !important; &:hover { background: darken( $primary, 10%); border: 0; color: #fff !important; } } &.next, &.previous { border: 0; } } } } /* Bootstrap Tables ========================*/ .bootstrap-table { position: relative; .btn { cursor: pointer; i { &:before { font-family: "Material Icons"; display: block; line-height: 1; font-style: normal; font-size: em(20,15); } } &[name="refresh"] { i:before { content: "refresh"; } } &[name="toggle"] { i:before { content: "dehaze"; } } i.glyphicon-th:before { content: "apps"; display: inline; vertical-align: middle; } } } .fixed-table-toolbar { display: inline-flex; @include position(absolute, 0 em(15) null null); z-index: 1; transform: translateY(-100%); margin-top: em(-10); .search { order: -1; } .btn-group { &, & > .btn-group { display: flex; } .btn { display: inline-flex; } } .search, .columns { margin-top: 0; margin-bottom: 0; // line-height: em(20); .btn { padding: 0 em(10); } .dropdown-menu { input { display: none; } label { cursor:pointer; &:before { display: inline-block; line-height: 1; vertical-align: middle; text-align: center; @include size( em(20) ); content: ""; font-family: "feather"; font-feature-settings: 'liga'; background: none; border: rem(2) solid #eee; margin-right: em(10); transition: all 0.3s ease; color: #fff; } &.checkbox-checked::before { content: "\e925"; background: $primary; color: #fff; border-color: $primary; } } } } @include mobile { display: none; } body.rtl & { left: 0; right: auto; } } .fixed-table-container { border: 0; border-bottom: rem(1) solid #eee; thead th { .both { background: none; position: relative; &:before { content: ''; @include position(absolute, 50% em(10) null null ); transform: translateY(-50%); font-family: "Material Icons"; font-feature-settings: 'liga'; font-size: em(18); } } .both.asc::before { content: 'expand_less'; opacity: 1 } .both.desc::before { content: 'expand_more'; opacity: 1 } .both::before { content: 'sort'; opacity: 0.1 } } } .bootstrap-table .table { border: rem(1) solid #eee; > thead > tr > th { border-bottom: rem(1) solid #eee; } } /* Responsive Tables ========================*/ .responsive-utilities .is-hidden { color: #ccc; background-color: #f9f9f9 !important; } .responsive-utilities .is-visible { color: #468847; background-color: #dff0d8 !important; } .tablesaw { .tablesaw-sortable-head { &:before { content:''; @include position(absolute, 50% em(10) null null ); transform: translateY(-50%); font-family: "Material Icons"; font-feature-settings: 'liga'; font-size: em(18); } } .tablesaw-sortable-ascending:before { content: 'expand_less'; } .tablesaw-sortable-descending:before { content: 'expand_more'; } } // .tablesaw-toolbar { // margin-right: 20px; // margin-bottom: 10px; // } .tablesaw-bar { .tablesaw-columntoggle-popup { .btn-group { display: inline-block; margin: em(10) 0 em(5) 0; label { height: auto; line-height: 2rem; input { height: auto; position: relative; top: em(2); } } } } } .tablesaw-bar .tablesaw-bar-section .btn-select { padding: em(5, 12.25) em(10, 12.25); padding-right: em(50, 12.25); font-weight: normal; position: relative; font-family: $font-family-base; background: #eee; text-transform: none; span { line-height: em(20, 12.25); height: em(20, 12.25); display: block; } select { cursor: pointer; } &:after { display: none; } &:before { content: 'expand_more'; font-family: "Material Icons"; font-feature-settings: 'liga'; font-size: em(18, 12.25); text-transform: lowercase; @include position(absolute, 50% em(10, 12.25) null null); transform: translateY(-50%); line-height: 1; } } .tablesaw-sortable-arrow { display: none; } .tablesaw-swipe .tablesaw-cell-persist { border-right: rem(1) solid #eee; } /* Editable ========================*/ .table-editable, .table-editable-inline { .tabledit-toolbar { display: inline !important; .tabledit-save-button, .tabledit-confirm-button, .tabledit-restore-button { margin-left: em(8,12); } .btn-group { .btn { cursor: pointer; span.glyphicon { &::before { font-family: "feather"; display: inline-block; line-height: 1; font-style: normal; font-size: em(16,12); font-weight: 300; position: relative; top: 3px; } } .glyphicon-pencil::before { content: "\e950"; } .glyphicon-trash::before { content: "\e9cd"; } } } } tr.tabledit-deleted-row { display: none; } } /* Footable ========================*/ .footable { .footable-sortable { .fooicon { display: none; } &:before { content: 'sort'; opacity: 0; font-family: 'Material Icons'; font-feature-settings: 'liga'; @include position(absolute, 50% em(10) null null); transform: translateY(-50%); font-size: em(18); transition: all 0.3s ease; } &:hover::before { opacity: 1; } &.footable-asc::before { content: 'expand_more'; opacity: 1; } &.footable-desc::before { content: 'expand_less'; opacity: 1; } } .footable-filtering { th { border-top: none; } form.form-inline { margin-top: 0; margin-bottom: em(15); float: right; } } .checkbox { input[type="checkbox"] { opacity: 1; } } .footable-first-visible { span{ &::before{ display: none; } &::after { font-family: "FontAwesome"; display: block; font-style: normal; font-size: em(18); font-weight: 300; } } .fooicon-plus::after { content: "\f067"; } .fooicon-minus::after { content: "\f068"; } } .input-group-btn { display: inline-block; .btn { span.fooicon { &::before { display: none; } &::after { font-family: "FontAwesome"; display: block; font-style: normal; font-size: em(16, 15); font-weight: 300; } } .fooicon-search::after { content: "\f002"; } } } .footable-paging { span.label { font-size: em(11); background: rgba(0,0,0,.7); color: #fff; } .pagination { margin: auto; display: inline-block; > li.active > a { background: #51d2b7; border-color: #51d2b7; color: #fff; } li { a { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: em(-1); line-height: 1.25; color: #51d2b7; background-color: #fff; border: rem(1) solid #ddd; &:hover { background: #51d2b7; border-color: #51d2b7; color: #fff; } } &.footable-page-nav[data-page="first"] { a { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } } &.footable-page-nav[data-page="last"] { a { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } } } } } } table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox input[type="checkbox"] { line-height: 1em; height: 1em; top: 50%; transform: translateY(-50%); } .footable-filtering { .footable-filtering-search { .dropdown-menu { li { a { display: block; width: 100%; padding: em(3) 1.42857em; padding-top: 0.35714em; padding-bottom: 0.35714em; clear: both; font-weight: normal; color: #888; text-align: inherit; white-space: nowrap; background: none; border: 0; &:hover { color: #555; text-decoration: none; background-color: #f7fafc; } label { cursor: pointer; } } } } } }