src/sass/_table_fragment.scss
/**
* Copyright 2015, Symantec Corporation
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree
*/
// Color Variables
$color_table_striped: #fcfcfc;
$color_table_header_hover: #e6e6e6;
$color_table_sortlinks_bg: #fff;
$color_table_loading_text: #ccc;
//Card Element
.card
{
padding: 0px;
border: 1px solid $color_panel_borders;
border-radius: $color_panel_borders;
margin-bottom: 10px;
background-color: $color_white;
border-radius: 0px 1px 3px 2px #e2ecf0;
.card-head
{
padding: 2px 5px 2px 2px;
background-color: $color_panel_header_bg;
border-top-right-radius: $color_panel_borders;
border-top-left-radius: $color_panel_borders;
border-bottom: 1px solid $color_panel_borders;
h4
{
font-size: 1.05em;
font-weight: normal;
display: inline-block;
color: $color_panel_heading_text;
padding: 0px 5px 0px 5px;
}
.icon
{
font-size: 0.9em;
display: inline-block;
color: $color_gray;
padding: 0px 0px 0px 5px;
}
}
.card-body
{
padding: 10px;
}
&.no-head
{
.card-head
{
background-color: transparent;
border-bottom: 0px;
}
}
}
.card-simple
{
margin-bottom: 10px;
}
//Table Directive Scss
.card
{
&.has-table
{
padding: 0px;
.card-body
{
padding: 0px;
min-height: 100px;
table
{
margin: 0px;
thead
{
background-color: $color_panel_header_bg;
border: none;
border-bottom: 1px solid $color_panel_borders;
th
{
font-weight: 400;
color: $color_gray_dark;
}
}
tbody
{
tr
{
td
{
&.primary-attr
{
}
&.table-cell-graph
{
padding: 10px;
text-align: right;
width: 70px;
}
}
}
}
}
}
.card-head {
.column-container {
width: 180px;
}
}
}
}
.table-fragment-header
{
display: flex;
display: -ms-flex-box;
flex-direction: row;
flex-wrap: no-wrap;
.fragment-action-group
{
flex-basis: 16px;
align-self: center;
order: 32767;
-ms-flex-order: 32767;
.fragment-action {
background-color: transparent;
border: none;
font-size: 1.5em;
color: $color_gray;
}
.column-container {
width: 180px;
}
}
.table-toolbar-item
{
flex-basis: auto;
margin-right: 5px;
margin-top: 5px;
align-self: center;
vertical-align: bottom;
}
img
{
flex-basis: 28px;
margin-right: 5px;
margin-top: 5px;
align-self: center;
vertical-align: bottom;
height: 28px;
width: 28px;
}
h3
{
flex-grow: 1;
align-self: center;
}
.btn-group.open .dropdown-toggle.fragment-action {
box-shadow: none;
-webkit-box-shadow: none;
}
}
@for $i from 1 through 20 {
.table-fragment-wrap.hideColumn#{$i} {
.card.has-table.table-fragment {
thead th:nth-child(#{$i}),
tbody td:nth-child(#{$i}) {
display: none;
}
}
}
}
.table-fragment {
.fragment-action {
background-color: transparent;
border: none;
font-size: 20px;
padding-right: 15px;
}
&.no-header
{
table, table thead, table thead tr
{
border-top-right-radius: $color_panel_borders;
border-top-left-radius: $color_panel_borders;
}
}
.btn-group.open .dropdown-toggle.fragment-action {
box-shadow: none;
-webkit-box-shadow: none;
}
thead th.sort-active:hover {
cursor: pointer;
background-color: $color_table_header_hover;
}
tbody tr:nth-child(even) {
background-color: $color_table_striped;
}
.mobileColumnHeader {
display: none;
}
.loadMore {
min-height: 30px;
border-top: 1px solid $color_panel_borders;
cursor: pointer;
overflow: hidden;
color: $color_table_loading_text;
padding: 10px;
.pagination {
margin: 0;
padding-right: 10px;
}
}
.showCheckIcon {
float: right;
}
.no-record-message {
padding: 10px;
}
.progress {
margin-bottom: 0px;
border-radius: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
margin-top:5px;
height: 10px;
.progress-bar {
font-size: 9px;
}
}
}
.async-load {
position: relative;
.load-mask {
background-color: $color_gray_darker;
opacity: 0.2;
display: none;
min-height: 100px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
.loading-text {
font-size: 1.6em;
color: $color_table_loading_text;
vertical-align: middle;
display: inline-block;
margin-top: 50px;
}
}
}
/* XS */
@media screen and (max-width: $screen-xs-max)
{
.card.has-table.table-fragment {
.card-body table {
thead {
display: block;
background-color: $color_table_sortlinks_bg;
padding: 10px;
tr, th {
display: inline;
border: none;
padding: 0px;
color: #fcfcfc;
font-weight: 200;
}
th {
padding-right: 3px;
}
th:not(:last-child)::after {
content: ',';
text-decoration: none;
position: absolute;
}
th:hover {
background-color: transparent;
text-decoration: underline;
}
}
thead:before {
content: 'Currently Showing : ';
}
}
}
.table-fragment {
.showCheckIcon {
float: none;
padding-left: 3px;
}
.mobileColumnHeader {
display: inline;
color: #9C9C9C;
}
}
}
//Elements scss
@media screen and (max-width: $screen-xs-max)
{
table.responsive-table
{
display: block;
padding: 0px 0px 10px 0px;
thead
{
display: none;
}
tbody
{
width: 100%;
display: block;
tr
{
display: block;
border: none;
position: relative;
background-color: transparent;
padding: 0px 80px 10px 0px;
&:not(:last-child)
{
border-bottom: 1px solid $color_panel_header_bg;
}
td
{
background-color: transparent;
display: block;
border: none;
margin: 0px;
padding: 10px 0px 0px 10px;
&.primary-attr
{
.mobileColumnHeader
{
display: none;
}
font-weight: 400;
font-size: 1.01em;
display: block;
width: 100%;
}
&.secondary-attr
{
display: block;
.progress
{
height: 10px;
}
}
&.extra-attr
{
display: block;
color: $color_gray_dark;
font-size: 0.9em;
&:last-child::after
{
content: "";
}
&::after
{
display: inline;
content: "";
margin: 0px;
}
}
&.table-cell-graph
{
display: block;
position: absolute;
right: 10px;
top: 0%;
height: 100%;
}
}
}
}
}
}