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 */
|
||||
$tableBorderColor: var(--semi-color-border);
|
||||
$tableHeaderBgColor: var(--semi-color-fill-0);
|
||||
$tableSelectedBorderColor: rgb(0 101 255);
|
||||
$tableSelectedCellBgColor: transparent;
|
||||
$tableSelectedControlBgColor: #2584ff;
|
||||
$tableResizeHandleBgColor: #adf;
|
||||
|
||||
.tableWrapper {
|
||||
position: relative;
|
||||
margin: 0.5em 0px;
|
||||
.ProseMirror {
|
||||
$tableBorderColor: var(--semi-color-border);
|
||||
$tableHeaderBgColor: var(--semi-color-fill-0);
|
||||
$tableSelectedBorderColor: rgb(0 101 255);
|
||||
$tableSelectedCellBgColor: transparent;
|
||||
$tableSelectedControlBgColor: #2584ff;
|
||||
$tableResizeHandleBgColor: #adf;
|
||||
|
||||
&.has-focus {
|
||||
.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 {
|
||||
.tableWrapper {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $tableBorderColor;
|
||||
}
|
||||
margin: 0.5em 0px;
|
||||
|
||||
th {
|
||||
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;
|
||||
&.has-focus {
|
||||
.scrollWrapper {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grip-column {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -1px;
|
||||
.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;
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 100%;
|
||||
transform: translateX(-8px);
|
||||
box-sizing: border-box;
|
||||
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
font-size: 0;
|
||||
cursor: pointer;
|
||||
tr {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $tableBorderColor;
|
||||
}
|
||||
|
||||
.semi-icon-default {
|
||||
font-size: inherit;
|
||||
th {
|
||||
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 {
|
||||
content: '';
|
||||
.grip-column {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
bottom: 4px;
|
||||
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;
|
||||
top: -12px;
|
||||
left: -1px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: $tableHeaderBgColor;
|
||||
border: 1px solid $tableBorderColor;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $tableSelectedBorderColor;
|
||||
|
||||
> 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 {
|
||||
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 {
|
||||
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;
|
||||
border-color: $tableSelectedControlBgColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.last::after {
|
||||
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);
|
||||
.grip-row {
|
||||
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 {
|
||||
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;
|
||||
left: -12px;
|
||||
top: -1px;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
background: $tableHeaderBgColor;
|
||||
border: 1px solid $tableBorderColor;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $tableSelectedBorderColor;
|
||||
|
||||
> 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 {
|
||||
display: none;
|
||||
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%;
|
||||
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;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.last::after {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
.grip-table {
|
||||
&::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 {
|
||||
background: $tableSelectedControlBgColor;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
&:hover::after {
|
||||
background: $tableSelectedControlBgColor;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
}
|
||||
|
||||
&.selected::after {
|
||||
background: $tableSelectedControlBgColor;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grip-table {
|
||||
&::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;
|
||||
}
|
||||
.column-resize-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
width: 4px;
|
||||
pointer-events: none;
|
||||
background-color: $tableResizeHandleBgColor;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background: $tableSelectedControlBgColor;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
}
|
||||
|
||||
&.selected::after {
|
||||
background: $tableSelectedControlBgColor;
|
||||
border-color: $tableSelectedBorderColor;
|
||||
}
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
|
||||
}
|
||||
}
|
||||
|
||||
.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