assets/stylesheets/table/table.scss
/*
* Styles for the CartoDB table
*/
@-webkit-keyframes highlight-fade {
0% {
background: none;
}
20% {
background: #ECFCE5;
}
80% {
background: #ECFCE5;
}
100% {
background: none;
}
}
@keyframes highlight-fade {
0% {
background: none;
}
20% {
background: #ECFCE5;
}
80% {
background: #ECFCE5;
}
100% {
background: none;
}
}
div.panes {
position: absolute;
top: 78px;
right: 0;
bottom: 0;
left: 0;
// When table/layer is synced
&.synced {
top: 102px;
}
.emptyTableContainer {
display: inline-block;
position: fixed;
width: 100%;
transform-style: linear;
transition: text-indent 300ms;
text-align: center;
.emptynessInfo {
display: inline-block;
position: relative;
top: 1.5em;
width: 600px;
height: 375px;
&.emptyTableInfo {
background: url($assetsDir + '/images/layout/empty_table.png') no-repeat 0 0 #FFF;
}
&.emptyPublicTableInfo {
position: absolute;
left: 5%;
background: url($assetsDir + '/images/layout/empty_public.png') no-repeat center 70px #FFF;
}
&.emptySQLInfo {
background: url($assetsDir + '/images/layout/empty_sql.png') no-repeat 40px 0 #FFF;
}
h4 {
margin-top: 8em;
color: #333;
font-family: "Helvetica", Arial, sans-serif;
font-size: 17px;
font-weight: bold;
text-indent: 0;
}
p {
width: 325px;
margin: 1em auto;
color: #999;
font-size: 15px;
text-indent: 0;
a {
text-decoration: underline;
}
}
}
}
}
div.table {
table {
position: relative;
z-index: 1;
width: 100%;
background: WHITE;
// Table head
thead {
width: 100%;
height: 60px;
div.sqlview {
display: block;
position: absolute;
z-index: 0;
top: 55px;
right: 0;
left: 0;
width: 100%;
height: 37px;
p {
display: inline;
position: fixed;
z-index: 2;
left: 50%;
width: 100%;
margin: 12px 0 0 -50%;
padding: 12px 0;
transform-style: linear;
transition: text-indent 300ms;
border-bottom: 1px solid #CCC;
background-color: #E5FAEA;
box-shadow: rgba(#000, 0.055) 0 3px 1px 0;
color: #333;
color: #666;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 13px;
text-align: center;
text-indent: 0;
}
}
tr {
z-index: 2;
width: 100%;
height: 64px;
background: url($assetsDir + '/images/layout/thead_bkg.jpg') repeat 0 0;
th {
position: relative;
vertical-align: top;
& > div {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 66px;
& > div {
display: inline-block;
position: fixed;
z-index: 1;
width: inherit;
height: 41px;
margin: 0;
padding: 10px 0 15px;
border-bottom: 1px solid #CCC;
background: url($assetsDir + '/images/layout/thead_bkg.jpg') repeat 0 0;
vertical-align: top;
&::after {
content: ' ';
position: absolute;
z-index: 0;
top: 13px;
left: 0;
width: 1px;
height: 42px;
background: rgba(#D9D9D9, 0.5);
}
}
label {
input {
position:relative;
margin: 0;
padding: 11px;
border: 1px solid #C0C1C2;
background: #FFF;
border-radius: 4px;
font-size: 15px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
color: #666666;
z-index:2;
&:focus {
outline:none;
border-color:#999999;
box-shadow: rgba(0,0,0,0.1) 0 0 2px 2px;
}
&::-webkit-input-placeholder {
color:rgba(#666666,0.3);
}
&:-moz-placeholder {
color:rgba(#666666,0.3);
}
}
display: block;
padding: 0 5px;
&.nonInteractuable {
padding: 10px 5px;
span {
display: inline-block;
margin: 6px 0 5px 5px;
color: #7C7C7C;
vertical-align: top;
}
}
&.interactuable {
div,
a {
display: inline-block;
margin: 6px 0 5px 5px;
color: #7C7C7C;
vertical-align: top;
&::after {
content: '';
display: inline-block;
position: relative;
left: 2px;
border-top: 3px solid #7C7C7C;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
vertical-align: top;
}
&:hover {
color: #565656;
text-decoration: none;
&::after {
border-top-color: #565656;
}
}
}
}
a,
div {
display: inline-block;
margin: 6px 0 5px 5px;
color: #7C7C7C;
vertical-align: top;
&:hover {
text-decoration: none;
}
span.geo {
margin: 0 0 0 3px;
padding: 1px 2px;
border: 1px solid #C17400;
border-radius: 2px;
background: ORANGE;
color: WHITE;
text-decoration: uppercase;
&:hover {
cursor: pointer;
}
}
}
input {
margin: 0;
padding: 3px 4px;
border: 1px solid #CCC;
border-radius: 3px;
background: WHITE;
color: #333;
font: bold 13px "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
}
p {
padding: 0 10px;
line-height: 20px;
a {
padding: 0 10px 0 0;
color: #999;
&.disabled {
color: #666;
}
&:hover {
position: relative;
padding: 0 10px 0 0;
color: #666;
text-decoration: none;
&.own::after {
content: ' ';
position: absolute;
right: 0;
margin: 10px 0 0 5px;
border-top: 3px solid #7C7C7C;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
}
}
}
// Fake column name added to each th
&.auto {
padding: 0 25px 0 0;
opacity: 0;
}
}
}
&:first-child {
width: 35px;
min-width: 35px;
}
&:last-child {
padding-right: 62px;
transform-style: linear;
transition: padding-right 500ms;
}
// Column options
div.dropdown {
width: 147px !important;
}
}
}
// Shadow
div.shadow {
position: fixed;
z-index: 0;
top: 144px;
right: 0;
left: 0;
width: 100%;
height: 10px;
background: url($assetsDir + '/images/layout/thead_shadow.png') repeat 0 0;
pointer-events: none;
}
// Horizontal movement
&.horizontal {
tr th > div > div {
position: absolute;
top: 0;
left: 0;
}
}
} // thead
// Table body
tbody {
z-index: 1;
width: 100%;
border: none;
tr.placeholder,
tr.placeholder td {
height: 40px;
border: 1px solid #ECECEC;
cursor: pointer;
.addNewRow {
color: #E5E5E5;
font-size: 22px;
font-weight: bolder;
text-align: center;
vertical-align: middle;
}
}
tr.placeholder.decoration {
height: 15px;
border-bottom: 0;
&:hover {
border-color: #ECECEC;
background: inherit;
& + tr {
border-top-color: #ECECEC;
}
}
}
tr.placeholder.decoration td {
height: 15px;
border-top: 0;
border-bottom: 0;
&:hover {
border-top: 0;
border-color: #ECECEC;
border-top-color: #ECECEC;
background: inherit;
}
}
tr {
width: 100%;
border-top: 1px solid #ECECEC;
// z-index:0;
background: WHITE;
td {
vertical-align: top;
&:not(.row_header) {
div.cell:not(.disabled) {
cursor: pointer;
}
}
&.is-highlighted {
-webkit-animation: highlight-fade 3s ease-in-out 1;
animation: highlight-fade 3s ease-in-out 1;
-webkit-animation-delay: 150ms;
animation-delay: 150ms;
}
div.cell {
display: block;
max-width: 280px;
min-height: 13px;
max-height: 26px;
padding: 15px 10px;
overflow: hidden;
border-left: 1px solid #ECECEC;
color: #666;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
&.disabled {
color: #AAA;
}
&.isNull {
color: #AAA;
font-style: italic;
}
}
// Different column types
div.number {
color: #4DC964;
}
&.rowHeader:first-child {
& > div.row_header {
display: block;
position: relative;
height: 100%;
overflow: visible;
&::before {
content: '';
display: none;
position: absolute;
z-index: 0;
top: 15px;
left: 10px;
width: 12px;
height: 12px;
padding: 0;
border: 1px solid #999;
border-radius: 3px;
background: #FAFAFA;
background: linear-gradient(#FAFAFA, #E8E8E8);
}
&::after {
content: '';
display: none;
position: absolute;
z-index: 0;
top: 21px;
left: 15px;
width: 0;
height: 0;
border-top: 3px solid #666;
border-right: 2px solid transparent;
border-left: 2px solid transparent;
opacity: 1;
line-height: 16px;
}
&:hover::before {
background: linear-gradient(#FAFAFA, #E3D3E3);
background: #E8E8E8;
cursor: pointer;
}
&:active::before {
background: linear-gradient(#E3D3E3, #FAFAFA);
background: #E3D3E3;
}
}
}
&:last-child {
padding-right: 65px;
transform-style: linear;
transition: padding-right 500ms;
border-right: none;
}
}
&:last-child {
border-bottom: 1px solid #ECECEC;
}
&:hover {
border-color: #CCC;
background: #E8F9EC;
& + tr {
border-top-color: #CCC;
}
div.row_header::before,
div.row_header::after {
display: block !important;
}
}
} // tr
}
&.displaced {
// Last column of the table
tbody tr td:last-child,
thead tr th:last-child {
padding-right: 600px;
border-right: none;
}
// When a query is applied, the text should be moved some pixels
div.sqlview p {
text-indent: -600px;
}
// When a query is applied, the loader should be moved some pixels
tfoot.sql_loader div.float_info {
margin-left: -420px;
}
// When there is no results, move the block
tfoot div.emptyTableContainer {
text-indent: -600px;
p,
h4 {
text-indent: 0;
}
}
&.narrow {
tbody tr td:last-child,
thead tr th:last-child {
padding-right: 450px;
}
div.sqlview p {
text-indent: -450px;
}
tfoot.sql_loader div.float_info {
margin-left: -380px;
}
tfoot div.emptyTableContainer {
text-indent: -450px;
}
}
} // table.displaced
} // table
/* PAGINATION ZONE - CAUTION */
// If the user can paginate up (we are removing cells in the process)
// Let's add some top spacing as well to show the pagination loader ;)
// Let's add some bottom spacing to show always when it's neccessary the pagination loader
&.page_down {
padding-bottom: 30px; // More space due to the thead height
}
&.page_up {
padding-top: 180px; // More space due to the thead height
padding-bottom: 0;
thead tr th div > div {
margin-top: -180px;
}
tbody tr:first-child {
border-top: 1px solid #ECECEC;
}
thead div.sqlview p {
margin-top: -168px;
}
}
// public view
&.public {
th:last-child,
tr td:last-child {
padding-right: 0;
}
}
} // div.table
div.order_selector {
position: absolute;
top: -3px;
right: 0;
a.asc {
margin-right: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
a.desc {
margin-right: 10px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
a.asc,
a.desc {
display: inline-block;
position: relative;
margin-top: 13px;
padding: 0;
padding: (21px - 9px) / 2 8px;
background-color: #F2F2F2;
color: #397DB9;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
vertical-align: top;
&:hover {
background-color: #397DB9;
color: #F2F2F2;
}
&.selected {
background-color: #397DB9;
color: #F2F2F2;
cursor: default;
}
}
}
// Hello hacks for Firefox
@-moz-document url-prefix() {
table {
border-collapse: inherit;
}
thead div.sqlview {
z-index: 1 !important;
}
thead tr th div {
z-index: 2 !important;
}
thead div.shadow {
z-index: 1 !important;
}
tbody tr td {
border-spacing: 1px;
border-bottom: 1px solid #ECECEC;
}
}