@boligmappa/web-component-search
Version:
Web component for interacting with the Boligmappa APIs
140 lines (139 loc) • 3.16 kB
JavaScript
import { css, unsafeCSS } from "lit";
import { darkGreen } from "./colors";
export const buttonStyles = css `
.back-button {
font-family: var(--search-button-font-family, var(--search-font-family));
color: var(--search-button-back-text-color, ${unsafeCSS(darkGreen)});
background: none;
border: none;
display: inline-block;
margin-left: 0;
text-decoration: underline;
}
.back-button:hover {
color: var(--search-button-back-text-color-hover, #4d898f);
cursor: pointer;
}
.confirm-button {
font-family: var(--search-button-font-family, var(--search-font-family));
display: inline-block;
float: right;
width: 6rem;
height: 1.5rem;
border: none;
font-weight: 500;
border-radius: 0.75rem;
background-color: ${unsafeCSS(darkGreen)};
color: var(--search-button-confirm-text-color, white);
cursor: pointer;
}
.confirm-button.disabled {
pointer-events: none;
background-color: #cdcdcd;
color: var(--search-button-confirm-text-color-disabled, #717171);
}
.button-container {
padding: 0.4rem 1rem;
}
`;
export const innerTableStyles = css `
.inner-table {
width: 100%;
}
.inner-table td {
vertical-align: baseline;
border-bottom: 0;
padding-bottom: 0.5rem;
display: table-cell;
width: auto;
}
.inner-table tr {
width: auto;
display: table-row;
}
.inner-header {
font-size: 0.7rem;
color: #aaa;
}
`;
export const tableStyles = css `
table {
overflow: hidden;
}
tr:hover {
overflow: hidden;
background: #f5f5f5;
}
tr.disabled {
color: #ccc;
pointer-events: none;
}
tr.disabled span.number {
color: #ccc;
}
tr.disabled img {
display: none;
}
tbody td {
border-bottom: 1px solid #ddd;
padding: 0;
}
tfoot td {
border-top: 1px solid #000;
padding: 0;
}
tbody tr:last-child td {
border-bottom: 0;
}
.table-container {
overflow: scroll;
height: 100px;
}
.postal-text {
color: var(--search-postal-text-color, #727272);
font-size: 0.8rem;
}
.tablecell-container {
position: relative;
padding-left: 2rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.empty-tablecell {
padding: 12px 0px;
}
.results-table {
border: var(--search-results-border, 1px solid ${unsafeCSS(darkGreen)});
border-radius: var(--search-results-border-radius, 16px);
background-color: var(--search-results-background-color, white);
z-index: var(--search-results-z-index, 100);
width: 100%;
}
.results-table > tbody {
display: block;
overflow: auto;
max-height: var(--search-results-max-height, 70vh);
}
.results-table tr,
td {
display: block;
width: 100%;
overflow: hidden;
}
.results-text {
display: inline-block;
font-size: 1rem;
}
.number {
color: var(--search-number-color, ${unsafeCSS(darkGreen)});
font-size: 1.2rem;
font-weight: 500;
margin-right: 1rem;
}
@media only screen and (min-height: 1000px) {
.results-table > tbody {
max-height: 714px;
}
}
`;
//# sourceMappingURL=styles.js.map