Skip to content

Instantly share code, notes, and snippets.

@matmac
Created May 5, 2016 11:28
Show Gist options
  • Save matmac/e5510bf1bacdccb0be3b052ea4265f57 to your computer and use it in GitHub Desktop.
Save matmac/e5510bf1bacdccb0be3b052ea4265f57 to your computer and use it in GitHub Desktop.
NetStar table component styles
@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;
}
.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;
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;
}
}
> ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex: 1;
> li {
align-items: center;
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;
}
}
&.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;
}
}
}
&.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%);
// }
// }
}
}
}
}
footer {
align-items: center;
background: orange;
color: white;
display: flex;
flex: 0 0 40px;
// width: 800px;
.footer-content {
position: fixed;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment