mirror of https://github.com/fantasticit/think.git
fix css
This commit is contained in:
fantasticit
parent
c6abfab7c8
commit
b0e32f0c94
|
|
@ -1,285 +1,288 @@
|
||||||
/* stylelint-disable */
|
/* stylelint-disable */
|
||||||
$tableBorderColor: var(--semi-color-border);
|
|
||||||
$tableHeaderBgColor: var(--semi-color-fill-0);
|
|
||||||
$tableSelectedBorderColor: rgb(0 101 255);
|
|
||||||
$tableSelectedCellBgColor: transparent;
|
|
||||||
$tableSelectedControlBgColor: #2584ff;
|
|
||||||
$tableResizeHandleBgColor: #adf;
|
|
||||||
|
|
||||||
.tableWrapper {
|
.ProseMirror {
|
||||||
position: relative;
|
$tableBorderColor: var(--semi-color-border);
|
||||||
margin: 0.5em 0px;
|
$tableHeaderBgColor: var(--semi-color-fill-0);
|
||||||
|
$tableSelectedBorderColor: rgb(0 101 255);
|
||||||
|
$tableSelectedCellBgColor: transparent;
|
||||||
|
$tableSelectedControlBgColor: #2584ff;
|
||||||
|
$tableResizeHandleBgColor: #adf;
|
||||||
|
|
||||||
&.has-focus {
|
.tableWrapper {
|
||||||
.scrollWrapper {
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollWrapper {
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-left: 28px;
|
|
||||||
padding-top: 28px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-left: -28px;
|
|
||||||
margin-top: -20px;
|
|
||||||
margin-bottom: -8px;
|
|
||||||
border-left: 1px solid transparent;
|
|
||||||
border-right: 1px solid transparent;
|
|
||||||
-webkit-transition: border 250ms ease-in-out 0s;
|
|
||||||
transition: border 250ms ease-in-out 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid $tableBorderColor;
|
margin: 0.5em 0px;
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
&.has-focus {
|
||||||
background: $tableHeaderBgColor;
|
.scrollWrapper {
|
||||||
}
|
margin-top: -20px;
|
||||||
|
}
|
||||||
td,
|
|
||||||
th {
|
|
||||||
position: relative;
|
|
||||||
vertical-align: top;
|
|
||||||
border: 1px solid $tableBorderColor;
|
|
||||||
position: relative;
|
|
||||||
padding: 4px 8px;
|
|
||||||
text-align: left;
|
|
||||||
min-width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedCell {
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid $tableSelectedBorderColor;
|
|
||||||
background-color: $tableSelectedCellBgColor;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid $tableSelectedBorderColor;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -1px;
|
|
||||||
top: -1px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 12;
|
|
||||||
display: inline-block;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grip-column {
|
.scrollWrapper {
|
||||||
position: absolute;
|
overflow-y: hidden;
|
||||||
top: -12px;
|
overflow-x: auto;
|
||||||
left: -1px;
|
padding-left: 28px;
|
||||||
|
padding-top: 28px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-left: -28px;
|
||||||
|
margin-top: -20px;
|
||||||
|
margin-bottom: -8px;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
-webkit-transition: border 250ms ease-in-out 0s;
|
||||||
|
transition: border 250ms ease-in-out 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
> span {
|
box-sizing: border-box;
|
||||||
position: absolute;
|
|
||||||
top: -18px;
|
|
||||||
left: 100%;
|
|
||||||
transform: translateX(-8px);
|
|
||||||
|
|
||||||
display: inline-block;
|
* {
|
||||||
width: 16px;
|
box-sizing: border-box;
|
||||||
height: 16px;
|
}
|
||||||
|
|
||||||
font-size: 0;
|
tr {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
|
border-bottom: 1px solid $tableBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
.semi-icon-default {
|
th {
|
||||||
font-size: inherit;
|
background: $tableHeaderBgColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
border: 1px solid $tableBorderColor;
|
||||||
|
position: relative;
|
||||||
|
padding: 4px 8px;
|
||||||
|
text-align: left;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedCell {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid $tableSelectedBorderColor;
|
||||||
|
background-color: $tableSelectedCellBgColor;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid $tableSelectedBorderColor;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -1px;
|
||||||
|
top: -1px;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 12;
|
||||||
|
display: inline-block;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
.grip-column {
|
||||||
content: '';
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100%;
|
top: -12px;
|
||||||
bottom: 4px;
|
left: -1px;
|
||||||
transform: translateX(-1px);
|
|
||||||
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
background-color: $tableBorderColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
box-sizing: content-box;
|
|
||||||
content: '';
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10px;
|
|
||||||
background: $tableHeaderBgColor;
|
|
||||||
border: 1px solid $tableBorderColor;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $tableSelectedBorderColor;
|
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
font-size: 14px;
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
left: 100%;
|
||||||
|
transform: translateX(-8px);
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
font-size: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.semi-icon-default {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: none;
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
bottom: 4px;
|
||||||
|
transform: translateX(-1px);
|
||||||
|
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: $tableBorderColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
box-sizing: content-box;
|
||||||
|
content: '';
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 10px;
|
||||||
|
background: $tableHeaderBgColor;
|
||||||
|
border: 1px solid $tableBorderColor;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $tableSelectedBorderColor;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: $tableSelectedControlBgColor;
|
||||||
|
border-color: $tableSelectedControlBgColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.last::after {
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
background: $tableSelectedControlBgColor;
|
background: $tableSelectedControlBgColor;
|
||||||
border-color: $tableSelectedControlBgColor;
|
border-color: $tableSelectedControlBgColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.last::after {
|
.grip-row {
|
||||||
border-top-right-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected::after {
|
|
||||||
background: $tableSelectedControlBgColor;
|
|
||||||
border-color: $tableSelectedControlBgColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grip-row {
|
|
||||||
position: absolute;
|
|
||||||
left: -12px;
|
|
||||||
top: -1px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
transform: translateY(8px);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -16px;
|
left: -12px;
|
||||||
bottom: 4px;
|
top: -1px;
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
|
|
||||||
font-size: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.semi-icon-default {
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -10px;
|
|
||||||
bottom: -2px;
|
|
||||||
width: 4px;
|
|
||||||
height: 4px;
|
|
||||||
background-color: $tableBorderColor;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
box-sizing: content-box;
|
|
||||||
content: '';
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 10px;
|
|
||||||
background: $tableHeaderBgColor;
|
|
||||||
border: 1px solid $tableBorderColor;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $tableSelectedBorderColor;
|
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
font-size: 14px;
|
transform: translateY(8px);
|
||||||
|
position: absolute;
|
||||||
|
left: -16px;
|
||||||
|
bottom: 4px;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
font-size: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.semi-icon-default {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: none;
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -10px;
|
||||||
|
bottom: -2px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: $tableBorderColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
box-sizing: content-box;
|
||||||
|
content: '';
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 10px;
|
||||||
|
background: $tableHeaderBgColor;
|
||||||
|
border: 1px solid $tableBorderColor;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $tableSelectedBorderColor;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: $tableSelectedControlBgColor;
|
||||||
|
border-color: $tableSelectedBorderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.last::after {
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
background: $tableSelectedControlBgColor;
|
background: $tableSelectedControlBgColor;
|
||||||
border-color: $tableSelectedBorderColor;
|
border-color: $tableSelectedBorderColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.last::after {
|
.grip-table {
|
||||||
border-bottom-left-radius: 3px;
|
&::after {
|
||||||
}
|
box-sizing: content-box;
|
||||||
|
content: '';
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
left: -12px;
|
||||||
|
display: block;
|
||||||
|
background: $tableHeaderBgColor;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border: 1px solid $tableBorderColor;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
&.selected::after {
|
&:hover::after {
|
||||||
background: $tableSelectedControlBgColor;
|
background: $tableSelectedControlBgColor;
|
||||||
border-color: $tableSelectedBorderColor;
|
border-color: $tableSelectedBorderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected::after {
|
||||||
|
background: $tableSelectedControlBgColor;
|
||||||
|
border-color: $tableSelectedBorderColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grip-table {
|
.column-resize-handle {
|
||||||
&::after {
|
position: absolute;
|
||||||
box-sizing: content-box;
|
top: 0;
|
||||||
content: '';
|
right: -2px;
|
||||||
cursor: pointer;
|
bottom: -2px;
|
||||||
position: absolute;
|
width: 4px;
|
||||||
top: -12px;
|
pointer-events: none;
|
||||||
left: -12px;
|
background-color: $tableResizeHandleBgColor;
|
||||||
display: block;
|
}
|
||||||
background: $tableHeaderBgColor;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border: 1px solid $tableBorderColor;
|
|
||||||
border-top-left-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
.resize-cursor {
|
||||||
background: $tableSelectedControlBgColor;
|
cursor: ew-resize;
|
||||||
border-color: $tableSelectedBorderColor;
|
cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
|
||||||
}
|
|
||||||
|
|
||||||
&.selected::after {
|
|
||||||
background: $tableSelectedControlBgColor;
|
|
||||||
border-color: $tableSelectedBorderColor;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-resize-handle {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: -2px;
|
|
||||||
bottom: -2px;
|
|
||||||
width: 4px;
|
|
||||||
pointer-events: none;
|
|
||||||
background-color: $tableResizeHandleBgColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resize-cursor {
|
|
||||||
cursor: ew-resize;
|
|
||||||
cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue