Skip to content

Instantly share code, notes, and snippets.

@matmac

matmac/ns-table-fixed-header.less

Created May 5, 2016 11:25
Show Gist options
  • Save matmac/d6b5f5be275c02eba023fe395ba21e00 to your computer and use it in GitHub Desktop.
Save matmac/d6b5f5be275c02eba023fe395ba21e00 to your computer and use it in GitHub Desktop.
Download ZIP
N
Raw
ns-table-fixed-header.less
@color-table-generic: #333;
@color-header-last-child: #999;
@background-color-header: #e9e9e9;
@badge-border-thickness: 2px;
.absolute-table-wrapper {
bottom: 0;
position: absolute;
left: 10px;
right: 10px;
top: 47px;
}
.table-fixed-header {
border: 1px solid #ddd;
float: left;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
.rounded(3px);
&::-webkit-scrollbar {
display: none;
}
&.absolute {
bottom: 0;
position: absolute;
top: 0 !important;
}
<<<<<<< HEAD
.fixed-table-container-inner {
background: white;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
table {
background-color: white;
margin-bottom: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
.empty-slate {
text-align:center;
border: none;
.horizontal-align();
left: 50%;
padding: 0;
position: absolute;
top: 50px;
width: 100%;
h4 {
color: #333333;
display: block;
font: 10px @osb;
text-transform: uppercase;
margin: 0 0 15px;
padding: 0;
text-align: center;
}
p {
.ease(.3s);
float:left;
font: 12px @osl;
margin-top:20px;
text-align:center;
text-transform: uppercase;
width:100%;
span {
font-family:@osb;
&:last-child {
font-family:@osl;
}
}
}
}
thead {
.hidden-header {
.th-inner {
height: 0;
margin: 0;
overflow-y: hidden;
padding-right: 5px;
position: static;
white-space: nowrap;
}
}
}
th {
border: none !important;
padding: 0 !important;
padding-left: 8px !important;
&:first-child {
.th-inner {
border: none !important;
}
}
.centered {
margin: 0 auto !important;
width: 0 !important;
.th-inner {
width: 100%;
margin-left: -50%;
text-align: center;
border: none;
}
}
.sort-arrow {
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
cursor: pointer;
display: inline-block;
height: 0;
margin-left: 2px;
margin-top: -1px;
vertical-align: middle;
width: 0;
}
&.desc {
.sort-arrow {
border-bottom: 4px dashed;
border-bottom: 4px solid\9;
border-top: none;
}
}
span + span {
color: #777;
}
.fa {
float: right;
font-size: 14px;
}
&.actions {
.th-inner {
width: 30px;
}
}
}
td {
font: 10px @osb;
text-align: left;
position: relative;
vertical-align: middle;
span {
display: block;
font-family: @osb;
}
span + span {
font-family: @osl;
}
.packages, .options {
span {
border: 1px solid @ns-badge-dark-blue;
color: #333;
display: inline-block;
font-family: @ossm;
margin-bottom: 4px;
padding: 0 3px;
.rounded(3px);
text-align: center;
width: 30px;
}
}
.options {
=======
.table-fixed-header-body {
display: flex;
flex: 1;
flex-direction: column;
// max-height: 200px;
header {
align-items: center;
background: @background-color-header;
display: flex;
flex: 0 0 auto;
// width: 800px;
.flex-column {
flex: 1;
font: 10px @osb;
padding: 4px;
display: flex;
flex-direction: column;
min-height: 35px;
justify-content: center;
border-right: 1px solid fade(black, 4%);
&:last-child {
border: none;
}
span {
display: block;
&:first-of-type {
color: @color-table-generic !important;
}
&:last-of-type {
color: @color-header-last-child;
}
.sort-arrow {
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
cursor: pointer;
display: inline-block;
height: 0;
margin-left: 2px;
margin-top: -1px;
vertical-align: middle;
width: 0;
&.desc {
border-bottom: 4px dashed;
border-bottom: 4px solid\9;
border-top: none;
}
}
}
&.actions {
flex: 0.3;
font: 12px fontAwesome;
text-align: center;
>>>>>>> 3401286... New table component styles
span {
color: #999 !important;
}
}
}
}
.table-fixed-content {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
// width: 800px;
&::-webkit-scrollbar {
display: none;
}
.flex-row {
display: flex;
flex: 0 0 auto;
span:empty, li:empty {
align-items: center;
display: flex;
min-height: 3px;
position: relative;
width: 100%;
&:after {
background: lightgray;
content: ' ';
height: 3px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 100%;
}
}
li:empty {
&:after {
width: calc(~'100% - 8px');
}
}
.do-not-call {
position: relative;
&:after {
content: '\f095';
font: 12px FontAwesome;
left: 50%;
margin: -5px 0 0 -5px;
position: absolute;
top: 50%;
}
.fa {
color: fade(black, 30%);
font-size: 22px;
}
}
<<<<<<< HEAD
&.trade {
padding-left: 20px;
padding-right: 20px;
}
&.ship {
padding-left: 30px;
padding-right: 30px;
}
.actions {
text-align: center;
margin-left: 3px;
&:after {
color: @ns-baby-blue;
content: '\2807';
cursor: pointer;
font-size: 20px;
}
}
.dropdown-menu {
left: auto;
right: 0;
a {
font-size: 11px;
list-style-type: disc !important;
&:hover {
background: @ns-baby-blue;
color: white;
}
}
}
&.actions {
text-align: right;
}
}
.first .th-inner {
border-left: none;
padding-left: 6px;
}
.th-inner {
font: 9px @osb;
line-height: 13px;
margin-left: -5px;
margin-top: 10px;
padding-left: 5px;
position: absolute;
text-align: left;
text-transform: uppercase;
top: 0;
}
// Checkboxes
[type="checkbox"]:not(:checked) + label:before {
background: white;
border: 1px solid #ccc;
}
}
}
// Double Header
&.double {
padding-top: 37px;
.header-background {
height: 37px;
}
.fixed-table-container-inner {
table {
thead {
tr {
=======
> ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex: 1;
> li {
align-items: center;
>>>>>>> 3401286... New table component styles
color: #333;
display: flex;
flex: 1;
flex-wrap: wrap;
font: 10px @ossm;
border-right: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 4px;
word-break: break-all;
&.center {
justify-content: center;
}
> span {
float: left;
width: 100%;
&:nth-of-type(1) {
color: #333;
}
&:nth-of-type(2) {
color: #999 !important;
}
}
ul:not(.dropdown-menu) {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
li {
text-transform: uppercase;
.rounded(3px);
text-align: center;
width: 30px;
}
&.paints, &.uph, &.options, &.packages {
float: left;
width: 100%;
text-align: left;
li {
display: inline-block;
margin: 1px 0;
}
<<<<<<< HEAD
=======
}
&.paints {
li {
border: @badge-border-thickness solid @ns-badge-blue;
}
}
&.uph {
li {
border: @badge-border-thickness solid @ns-badge-green;
}
}
&.options {
li {
border: @badge-border-thickness solid @ns-badge-green;
}
}
&.packages {
li {
border: @badge-border-thickness solid @ns-badge-blue;
}
>>>>>>> 3401286... New table component styles
}
}
&.actions {
flex: 0.3;
.dropdown, .dropup {
margin-left: 5px;
.dropdown-toggle {
cursor: pointer;
&:after {
content: '\2807';
font-size: 20px;
}
}
}
ul {
li {
font: 10px @osb;
a {
&:hover {
background: fade(black, 3%);
color: white;
}
}
}
}
}
&:last-child {
border-right: none;
}
}
&:hover {
background: fade(black, 3%);
// color: white;
// span {
// color: white !important;
// }
// li {
// ul {
// &.packages, &.paints {
// li {
// border-color: fade(white, 80%);
// }
// }
// &.options, &.uph {
// li {
// border-color: fade(white, 40%);
// }
// }
// li {
// color: white;
// }
// }
// }
// span:empty, li:empty {
// background: fade(white, 80%);
// }
// .do-not-call {
// .fa {
// color: fade(white, 40%);
// }
// }
}
}
<<<<<<< HEAD
.th-inner {
display: flex;
justify-content: center;
flex-direction: column;
height: 38px;
padding-bottom: 5px;
}
=======
}
}
footer {
align-items: center;
background: orange;
color: white;
display: flex;
flex: 0 0 40px;
// width: 800px;
.footer-content {
position: fixed;
>>>>>>> 3401286... New table component styles
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment