135 lines
2.3 KiB
SCSS
135 lines
2.3 KiB
SCSS
@use 'globals';
|
|
@use 'sass:color';
|
|
|
|
$table-border-color: #ccc;
|
|
|
|
.lens-grid {
|
|
display: grid;
|
|
grid-template:
|
|
'table' 1fr
|
|
'editor' max-content;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.lens-table {
|
|
display: grid;
|
|
grid-area: table;
|
|
grid-template:
|
|
'headers' max-content
|
|
'main' 1fr
|
|
'inserter' max-content;
|
|
height: 100%;
|
|
outline: none;
|
|
overflow: auto;
|
|
width: 100%;
|
|
|
|
&__headers {
|
|
display: flex;
|
|
grid-area: headers;
|
|
align-items: stretch;
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
border: solid 1px #ccc;
|
|
border-top: none;
|
|
border-left: none;
|
|
font-family: "Funnel Sans";
|
|
background: #0001;
|
|
padding: 0.5rem;
|
|
text-align: left;
|
|
}
|
|
|
|
&__header-actions {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
&__main {
|
|
grid-area: main;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&__row {
|
|
align-items: stretch;
|
|
display: flex;
|
|
}
|
|
|
|
&__cell {
|
|
flex: none;
|
|
border: solid 1px $table-border-color;
|
|
border-left: none;
|
|
border-top: none;
|
|
padding: 0;
|
|
|
|
&--insertable {
|
|
border-style: dashed;
|
|
}
|
|
|
|
&--selected {
|
|
.lens-table__cell-content {
|
|
outline: 3px solid #37f;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__cell-content {
|
|
font-family: globals.$font-family-data;
|
|
|
|
&--null {
|
|
color: color.scale(#000, $lightness: 50%, $space: hsl);
|
|
font-style: oblique;
|
|
text-align: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
&--text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
&--uuid {
|
|
font-family: globals.$font-family-mono;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&__inserter {
|
|
grid-area: inserter;
|
|
margin-bottom: 2rem;
|
|
|
|
.lens-table__cell {
|
|
border: dashed 1px $table-border-color;
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.lens-table__row:first-child .lens-table__cell {
|
|
border-top: dashed 1px $table-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lens-editor {
|
|
align-items: stretch;
|
|
border-top: globals.$default-border;
|
|
display: flex;
|
|
grid-area: editor;
|
|
|
|
&__input {
|
|
@include globals.reset_input;
|
|
padding: 0.5rem;
|
|
font-family: globals.$font-family-data;
|
|
flex: 1;
|
|
}
|
|
}
|