forked from opentiny/tiny-engine
1957 lines
42 KiB
Plaintext
1957 lines
42 KiB
Plaintext
:root {
|
||
--ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色
|
||
--ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色
|
||
--ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色
|
||
}
|
||
|
||
// tiny-vue popover 弹框样式
|
||
.tiny-popover.tiny-popper {
|
||
color: var(--ti-lowcode-popover-color);
|
||
background: var(--ti-lowcode-popover-bg-color);
|
||
border: none;
|
||
padding: 6px;
|
||
border-radius: 6px;
|
||
line-height: 16px;
|
||
box-shadow: rgb(0 0 0 / 15%) 0 5px 10px;
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
top: -6px;
|
||
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
margin-left: 16px;
|
||
|
||
.popper__arrow {
|
||
left: -7px;
|
||
border-color: transparent;
|
||
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
right: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.data-source-popper {
|
||
background: var(--ti-lowcode-tabs-bg);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
border: 1px solid var(--ti-lowcode-tabs-border-color);
|
||
padding: 6px 0;
|
||
border-radius: 4px;
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-tabs-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
margin-left: 16px;
|
||
|
||
.popper__arrow {
|
||
left: -7px;
|
||
border-color: transparent;
|
||
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-tabs-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
bottom: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-tabs-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
right: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-tabs-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.data-remote-popper {
|
||
background: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
border-color: var(--ti-lowcode-toolbar-border-color);
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
margin-left: 16px;
|
||
|
||
.popper__arrow {
|
||
left: -7px;
|
||
border-color: transparent;
|
||
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
bottom: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
right: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
li {
|
||
padding: 4px 10px;
|
||
font-size: 12px;
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
li {
|
||
cursor: pointer;
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
padding: 4px 8px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-tootip-input-color);
|
||
background: var(--ti-lowcode-toolbar-active-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.lowcode {
|
||
background: var(--ti-lowcode-custom-popover-bg-color);
|
||
border: 1px solid var(--ti-lowcode-custom-popover-border-color);
|
||
color: var(--ti-lowcode-custom-popover-text-color);
|
||
|
||
.popper__arrow,
|
||
.popper__arrow::after {
|
||
border-bottom-color: var(--ti-lowcode-custom-popover-bg-color);
|
||
}
|
||
|
||
.languageContent {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
&.option-popper {
|
||
background: var(--ti-lowcode-popover-bg-color);
|
||
border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
margin-left: 16px;
|
||
|
||
.popper__arrow {
|
||
left: -7px;
|
||
border-color: transparent;
|
||
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
right: -7px;
|
||
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-popover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-options {
|
||
&.top {
|
||
border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
|
||
margin-bottom: 15px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
height: 26px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 6px;
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.icon-close {
|
||
margin-bottom: 4px;
|
||
margin-right: 0px;
|
||
}
|
||
}
|
||
|
||
.demo-form {
|
||
padding: 6px;
|
||
|
||
.tiny-form-item {
|
||
margin-bottom: 4px;
|
||
|
||
:deep(.tiny-form-item__label) {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
:deep(.tiny-input__inner) {
|
||
color: var(--ti-lowcode-tootip-input-color);
|
||
background: var(--ti-lowcode-tootip-input-background-color);
|
||
border-color: var(--ti-lowcode-tootip-input-border-color);
|
||
|
||
&:focus {
|
||
border-color: var(--ti-lowcode-canvas-handle-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.btn) {
|
||
.tiny-form-item__content {
|
||
display: flex;
|
||
|
||
.tiny-button {
|
||
min-width: auto;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-svg {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
font-size: 14px;
|
||
|
||
&.icon-close {
|
||
margin: 10px;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
&.header-icon {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.isBind {
|
||
color: var(--ti-lowcode-icon-bind-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.option-popper {
|
||
padding: 2px 0;
|
||
min-width: 6%;
|
||
width: auto;
|
||
|
||
.list {
|
||
li {
|
||
text-align: center;
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.collaborator {
|
||
padding: 0;
|
||
}
|
||
|
||
&.fixed-left {
|
||
top: 24px !important;
|
||
transform: translateX(calc(4px - var(--base-right-panel-width)));
|
||
height: calc(100% - 36px);
|
||
}
|
||
}
|
||
|
||
&.media-icon-popover {
|
||
color: var(--ti-lowcode-media-popover-color);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
padding: 20px;
|
||
|
||
&[x-placement^='bottom'] {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.tiny-popover__title {
|
||
color: var(--ti-lowcode-media-popover-title-color);
|
||
font-size: 14px;
|
||
line-height: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.media-title {
|
||
color: var(--ti-lowcode-media-popover-title-color);
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
.sub-title {
|
||
color: var(--ti-lowcode-media-popover-color);
|
||
}
|
||
.icon-stars {
|
||
font-size: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
|
||
&.toolbar-right-popover {
|
||
color: var(--ti-lowcode-toolbar-hover-popper);
|
||
font-size: 14px;
|
||
padding: 10px 16px;
|
||
border-radius: 6px;
|
||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
|
||
'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
|
||
&[x-placement^='bottom'] {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
&.collaboration-popover[x-placement^='bottom'] {
|
||
margin-top: 14px;
|
||
}
|
||
&.collaborator {
|
||
padding: 10px 0;
|
||
}
|
||
}
|
||
|
||
&.block-add-transfer-popover {
|
||
background: var(--ti-lowcode-toolbar-bg);
|
||
border: 1px solid var(--ti-lowcode-tabs-border-color);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
padding: 0;
|
||
|
||
.popper__arrow {
|
||
display: none;
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.sort-item {
|
||
padding: 6px 10px 6px 24px;
|
||
transition: 0.3s;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-button-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.data-remote-popper {
|
||
width: 12%;
|
||
}
|
||
|
||
&.toolbar-media-popper {
|
||
padding: 0;
|
||
font-size: 12px;
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
|
||
&[x-placement^='bottom'] {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
.popper__arrow {
|
||
border-color: transparent;
|
||
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-toolbar-media-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-toolbar-media-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-toolbar-media-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-wrap {
|
||
padding: 20px;
|
||
.title {
|
||
width: 100%;
|
||
color: var(--ti-lowcode-media-popover-title-color);
|
||
background: var(--ti-lowcode-tabs-active-bg);
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
&.text-title {
|
||
background: transparent;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
|
||
|
||
li {
|
||
padding: 4px 8px;
|
||
transition: 0.3s;
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
.tiny-svg {
|
||
margin-right: 6px;
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.more-setting {
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--ti-lowcode-toolbar-sub-title-color);
|
||
padding-top: 12px;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
padding: 8px;
|
||
|
||
span {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color);
|
||
}
|
||
}
|
||
|
||
.setting {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--ti-lowcode-toolbar-sub-title-color);
|
||
padding-top: 12px;
|
||
& > div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
& + div {
|
||
margin-left: 12px;
|
||
}
|
||
|
||
label {
|
||
flex-shrink: 0;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
& > span {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-left: 12px;
|
||
border-radius: 2px;
|
||
transition: 0.3s;
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-icon-hover-bg);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.icon-canvas-fit {
|
||
font-size: 16px;
|
||
color: var(--ti-lowcode-description-minor-color);
|
||
}
|
||
}
|
||
|
||
.tiny-input__suffix {
|
||
right: 4px;
|
||
|
||
.tiny-input__suffix-inner {
|
||
font-size: 12px;
|
||
color: var(--ti-lowcode-description-minor-color);
|
||
}
|
||
}
|
||
|
||
.tiny-input-suffix .tiny-input__inner {
|
||
padding-right: 20px;
|
||
padding-left: 4px;
|
||
|
||
&[readonly] {
|
||
cursor: not-allowed;
|
||
|
||
&:focus {
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.tiny-pager__selector {
|
||
background-color: var(--ti-lowcode-common-hover-bg-1);
|
||
|
||
.tiny-pager__selector-poplist {
|
||
background: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
border: 1px solid var(--ti-lowcode-toolbar-border-color);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
.list-item {
|
||
&.select-pre.is-selected {
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.fit-popper {
|
||
.fit-content {
|
||
display: grid;
|
||
gap: 8px 4px;
|
||
grid-template-columns: 48px 1fr;
|
||
padding: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.fit-content-label {
|
||
color: var(--ti-lowcode-fit-label-color);
|
||
padding: 2px;
|
||
}
|
||
|
||
.fit-content-main {
|
||
place-items: start center;
|
||
height: 64px;
|
||
display: grid;
|
||
gap: 4px 8px;
|
||
grid-template-columns: auto auto;
|
||
grid-template-rows: 1fr 3fr;
|
||
}
|
||
|
||
.coordinate {
|
||
grid-column-start: 1;
|
||
grid-row: 1 / span 3;
|
||
width: 64px;
|
||
height: 64px;
|
||
background: var(--ti-lowcode-fit-coordinate-bg);
|
||
display: inline-grid;
|
||
overflow: hidden;
|
||
justify-items: center;
|
||
border-width: 1px;
|
||
box-sizing: border-box;
|
||
border-style: solid;
|
||
border-color: var(--ti-lowcode-fit-coordinate-border-color);
|
||
border-radius: 2px;
|
||
gap: 0px;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-template-rows: 1fr 1fr 1fr;
|
||
}
|
||
|
||
.coordinate-origin {
|
||
background-color: var(--ti-lowcode-fit-coordinate-bg);
|
||
transition: color 0.1s ease 0s;
|
||
color: var(--ti-lowcode-fit-coordinate-origin-color);
|
||
font-size: 19px;
|
||
|
||
&:hover,
|
||
&.selected {
|
||
color: var(--ti-lowcode-fit-label-color);
|
||
}
|
||
}
|
||
|
||
.input-wrap {
|
||
grid-column-end: span 1;
|
||
grid-row-start: 2;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
display: grid;
|
||
gap: 4px 8px;
|
||
grid-template-columns: auto auto;
|
||
|
||
.left-input {
|
||
grid-column-start: 1;
|
||
}
|
||
|
||
.top-input {
|
||
grid-column-start: 2;
|
||
}
|
||
|
||
.left {
|
||
color: var(--ti-lowcode-fit-label-color);
|
||
justify-self: center;
|
||
grid-column-start: 1;
|
||
}
|
||
|
||
.top {
|
||
color: var(--ti-lowcode-fit-label-color);
|
||
justify-self: center;
|
||
grid-column-start: 2;
|
||
}
|
||
|
||
.tiny-input__inner {
|
||
padding: 0 20px 0 4px;
|
||
}
|
||
|
||
.tiny-input__suffix {
|
||
right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.grid-edit-popper {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
.grid-edit-spacing {
|
||
display: grid;
|
||
gap: 8px 4px;
|
||
grid-template-columns: 44px 1fr 24px 1fr;
|
||
align-items: center;
|
||
padding: 8px;
|
||
|
||
.gap,
|
||
.direction {
|
||
grid-column: 1 / -1;
|
||
display: grid;
|
||
gap: 4px;
|
||
grid-template-columns: 48px 1fr;
|
||
}
|
||
|
||
.direction {
|
||
align-items: center;
|
||
|
||
.radio-button {
|
||
width: 50%;
|
||
}
|
||
}
|
||
|
||
.gap-label {
|
||
display: inline-block;
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.gap-input {
|
||
display: grid;
|
||
gap: 4px;
|
||
grid-template-columns: 1fr 24px 1fr;
|
||
|
||
.svg-icon {
|
||
place-self: center;
|
||
grid-area: 1 / 2 / auto / auto;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 24px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.col {
|
||
place-self: center;
|
||
}
|
||
|
||
.row {
|
||
place-self: center;
|
||
grid-column: 3 / -1;
|
||
}
|
||
|
||
.suffix {
|
||
min-width: 18px;
|
||
}
|
||
}
|
||
|
||
.dense {
|
||
grid-column: 2 / -1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
input[type='checkbox'] {
|
||
accent-color: var(--ti-lowcode-tootip-arrow-border-color);
|
||
}
|
||
|
||
label {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.grid-edit-layout {
|
||
padding: 8px;
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
padding-right: 4px;
|
||
|
||
.tiny-svg {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.item-icon {
|
||
display: none;
|
||
color: var(--ti-lowcode-input-icon-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
& + .item-icon {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
|
||
.option-input {
|
||
&:hover .item-icon {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.layout-item {
|
||
.tiny-svg {
|
||
margin-right: 0;
|
||
}
|
||
|
||
& + .layout-item {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.is-setting {
|
||
color: var(--ti-lowcode-style-setting-label-color);
|
||
background-color: var(--ti-lowcode-style-setting-label-bg);
|
||
}
|
||
}
|
||
|
||
&.icon-popover {
|
||
background-color: var(--ti-lowcode-icon-popover-bg);
|
||
filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px)
|
||
drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px);
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
right: -6px;
|
||
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-icon-popover-bg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// tiny-vue dialogBox 弹框样式
|
||
.tiny-dialog-box__wrapper {
|
||
.tiny-dialog-box {
|
||
background-color: var(--ti-lowcode-dialog-box-bg-color);
|
||
.tiny-dialog-box__header {
|
||
color: var(--ti-lowcode-dialog-header-color);
|
||
background-color: var(--ti-lowcode-dialog-box-bg-color);
|
||
.tiny-dialog-box__headerbtn {
|
||
color: var(--ti-lowcode-dialog-close-btn-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-dialog-close-btn-hover-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-dialog-box__body {
|
||
color: var(--ti-lowcode-dialog-box-body-color);
|
||
|
||
.tiny-collapse {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.tiny-collapse-item__header {
|
||
padding: 0 8px;
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
background-color: var(--ti-lowcode-toolbar-active-bg);
|
||
|
||
svg {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
}
|
||
|
||
.tiny-collapse-item {
|
||
border: none;
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
background: var(--ti-lowcode-toolbar-bg);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
.tiny-collapse-item__wrap {
|
||
background-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
|
||
.tiny-collapse-item__content {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
border: 1px solid var(--ti-lowcode-dialog-demo-border-color);
|
||
border-top: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch-tip {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
.icon {
|
||
font-size: 28px;
|
||
margin-right: 12px;
|
||
}
|
||
}
|
||
|
||
&.update-page {
|
||
.tiny-dialog-box__body {
|
||
.tiny-input {
|
||
margin-bottom: 10px;
|
||
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
|
||
|
||
input {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// tiny-vue modal 模态框
|
||
.tiny-modal__wrapper {
|
||
.tiny-modal__box {
|
||
.tiny-modal__status-wrapper {
|
||
display: none;
|
||
}
|
||
|
||
.tiny-modal__close-btn {
|
||
color: var(--ti-lowcode-modal-close-btn-color);
|
||
|
||
&:hover {
|
||
background-color: unset;
|
||
color: var(--ti-lowcode-modal-close-btn-hover-color);
|
||
}
|
||
}
|
||
|
||
.tiny-modal__body {
|
||
.modal-content {
|
||
color: var(--ti-lowcode-modal-content-color);
|
||
}
|
||
}
|
||
|
||
.tiny-modal__footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.tiny-button--primary {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.status__custom {
|
||
.tiny-modal__footer {
|
||
.tiny-button--default {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// tiny-vue tooltip 提示框
|
||
.tiny-tooltip.tiny-tooltip__popper {
|
||
&.is-dark {
|
||
color: var(--ti-lowcode-tooltip-text-color);
|
||
background: var(--ti-lowcode-tooltip-bg-color);
|
||
padding: 6px;
|
||
border-radius: 2px;
|
||
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
&.is-error {
|
||
background-color: var(--ti-lowcode-tooltip-error-bg-color);
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-tooltip-error-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-tooltip-error-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-tooltip-error-bg-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.tiny-form__valid.is-error {
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
bottom: -6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='top'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-top-color: var(--ti-lowcode-tooltip-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='bottom'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-bottom-color: var(--ti-lowcode-tooltip-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='left'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-left-color: var(--ti-lowcode-tooltip-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&[x-placement^='right'] {
|
||
.popper__arrow {
|
||
&,
|
||
&::after {
|
||
border-right-color: var(--ti-lowcode-tooltip-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.background-type-tooltip {
|
||
z-index: 9999999 !important;
|
||
}
|
||
}
|
||
|
||
.tiny-popper {
|
||
&.tiny-picker-panel {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
background: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
|
||
|
||
.tiny-date-picker__header-label {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
}
|
||
|
||
.tiny-date-picker__time-header {
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
}
|
||
|
||
.tiny-picker-panel__icon-btn {
|
||
color: var(--ti-lowcode-description-minor-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
}
|
||
}
|
||
|
||
.tiny-picker-panel__footer {
|
||
background-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
|
||
.tiny-button--text {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
}
|
||
}
|
||
|
||
.tiny-button--primary {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
border-color: var(--ti-lowcode-toolbar-border-color);
|
||
background-color: var(--ti-lowcode-button-info-bg-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
border-color: var(--ti-lowcode-toolbar-border-color);
|
||
background-color: var(--ti-lowcode-button-info-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-date-table {
|
||
td.next-month,
|
||
td.pre-month {
|
||
color: var(--ti-lowcode-description-minor-color);
|
||
|
||
span:hover {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
|
||
th {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
}
|
||
|
||
td.current:not(.disabled) span {
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
|
||
td.available:hover span {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-time-panel {
|
||
background: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
|
||
}
|
||
|
||
.tiny-time-spinner__item {
|
||
color: var(--ti-lowcode-description-minor-color);
|
||
|
||
&.active:not(.disabled) {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
}
|
||
|
||
&:hover:not(.disabled):not(.active) {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
background: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-time-panel__footer {
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
|
||
.cancel {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
}
|
||
|
||
.confirm {
|
||
color: var(--ti-lowcode-button-info-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-time-panel__content {
|
||
&::after,
|
||
&::before {
|
||
border-color: var(--ti-lowcode-toolbar-border-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-grid {
|
||
svg {
|
||
color: var(--ti-grid-primary-color);
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.tiny-grid__body-wrapper {
|
||
.tiny-grid-body__column {
|
||
border-bottom: 0;
|
||
cursor: pointer;
|
||
color: var(--ti-lowcode-base-text-color);
|
||
|
||
.tree-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
|
||
.node-icon {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-grid-body__row {
|
||
.tiny-grid-default-input {
|
||
background: var(--ti-lowcode-input-bg);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
&,
|
||
&:not(.row__hover):nth-child(2n) {
|
||
background: var(--ti-lowcode-tiny-grid-row-hover-bg);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
&:hover {
|
||
background: var(--ti-lowcode-toolbar-bg);
|
||
}
|
||
|
||
&.row__current {
|
||
background: var(--ti-lowcode-node-current-bg);
|
||
|
||
span {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
|
||
svg {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
}
|
||
|
||
&.sortable-chosen {
|
||
background: var(--ti-lowcode-node-current-bg);
|
||
|
||
&.nodrag {
|
||
background: var(--ti-lowcode-node-nodrag-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.nav-tree {
|
||
.tiny-grid-body__column {
|
||
height: 32px;
|
||
}
|
||
|
||
.tiny-grid-cell {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-grid-tree-wrapper {
|
||
width: 14px;
|
||
|
||
.tiny-grid-tree__node-btn {
|
||
font-size: 8px;
|
||
color: var(--ti-lowcode-tree-icon-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-grid__fixed-right-wrapper,
|
||
.tiny-grid__fixed-left-wrapper {
|
||
background-color: var(--ti-lowcode-common-bg-1);
|
||
}
|
||
|
||
.tiny-grid-checkbox {
|
||
input {
|
||
& + .tiny-grid-checkbox__icon {
|
||
border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
|
||
background-color: transparent;
|
||
svg {
|
||
color: var(--ti-lowcode-tiny-grid-checkbox-svg-color);
|
||
}
|
||
}
|
||
|
||
&:checked + .tiny-grid-checkbox__icon {
|
||
border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
|
||
|
||
svg {
|
||
color: var(--ti-lowcode-common-primary-color);
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&[type='checkbox']:checked + .tiny-grid-checkbox__icon {
|
||
background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color);
|
||
border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
|
||
}
|
||
}
|
||
&.is__indeterminate {
|
||
.tiny-grid-checkbox__icon svg {
|
||
color: var(--ti-lowcode-common-primary-color);
|
||
}
|
||
}
|
||
}
|
||
.tiny-grid-radio {
|
||
input + .tiny-grid-radio__icon > svg.icon-radio-selected {
|
||
color: var(--ti-lowcode-tiny-radio-selected-svg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.stripe-tiny-grid.tiny-grid {
|
||
background-color: var(--ti-lowcode-common-component-bg);
|
||
.tiny-grid {
|
||
background-color: var(--ti-lowcode-common-component-bg);
|
||
}
|
||
|
||
.tiny-grid__header-wrapper {
|
||
background-color: var(--ti-lowcode-tabs-bg);
|
||
|
||
.tiny-grid-header__column {
|
||
color: var(--ti-lowcode-stripe-grid-header-text-color);
|
||
height: 39px;
|
||
}
|
||
|
||
.tiny-grid__repair {
|
||
border-color: var(--ti-lowcode-tabs-border-color);
|
||
}
|
||
|
||
.tiny-grid-resizable.is__line:before {
|
||
background-color: var(--ti-lowcode-toolbar-active-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-grid__body-wrapper {
|
||
.tiny-grid-body__column {
|
||
height: 44px;
|
||
}
|
||
|
||
.tiny-grid-body__row,
|
||
.tiny-grid-body__row:not(.row__hover):nth-child(2n) {
|
||
background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color);
|
||
|
||
&:hover {
|
||
background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg);
|
||
}
|
||
|
||
&.row__current {
|
||
background-color: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-grid-body__row:not(.row__hover):nth-child(2n) {
|
||
background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color);
|
||
}
|
||
}
|
||
|
||
.tiny-grid__empty-text {
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
}
|
||
}
|
||
|
||
.tiny-search {
|
||
div.tiny-search__line {
|
||
&:hover {
|
||
background-color: var(--ti-lowcode-search-hover-bg);
|
||
}
|
||
&.focus {
|
||
.tiny-search__input-btn {
|
||
color: var(--ti-lowcode-search-hover-icon-color);
|
||
}
|
||
.tiny-search__prefix svg {
|
||
color: var(--ti-lowcode-search-hover-icon-color);
|
||
}
|
||
}
|
||
|
||
.tiny-search__input-btn {
|
||
color: var(--ti-lowcode-search-icon-color);
|
||
&:hover {
|
||
color: var(--ti-lowcode-search-hover-icon-color);
|
||
}
|
||
}
|
||
.tiny-search__prefix svg {
|
||
color: var(--ti-lowcode-search-icon-color);
|
||
&:hover {
|
||
color: var(--ti-lowcode-search-hover-icon-color);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.tiny-search__input {
|
||
color: var(--ti-lowcode-search-input-color);
|
||
&::placeholder {
|
||
color: var(--ti-lowcode-search-input-placeholder-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-input {
|
||
.tiny-input__inner {
|
||
border-color: var(--ti-lowcode-input-border-color);
|
||
background-color: var(--ti-lowcode-input-bg-color);
|
||
color: var(--ti-lowcode-input-color);
|
||
|
||
&:focus {
|
||
border-color: var(--ti-lowcode-input-focus-border-color);
|
||
}
|
||
&::placeholder {
|
||
color: var(--ti-lowcode-input-placeholder-color);
|
||
}
|
||
&:hover {
|
||
border-color: var(--ti-lowcode-input-hover-border-color);
|
||
}
|
||
}
|
||
|
||
&.is-disabled {
|
||
.tiny-input__inner {
|
||
border-color: var(--ti-lowcode-input-disabled-border-color);
|
||
background: var(--ti-lowcode-input-disabled-bg-color);
|
||
}
|
||
}
|
||
|
||
// 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item
|
||
// 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item
|
||
&.status-error {
|
||
.tiny-input__inner {
|
||
border-color: var(--ti-lowcode-input-error-border-color);
|
||
background-color: var(--ti-lowcode-input-error-bg-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-textarea {
|
||
border-color: var(--ti-lowcode-textarea-border-color);
|
||
|
||
&:hover,
|
||
&:has(.tiny-textarea__inner:focus) {
|
||
border-color: var(--ti-lowcode-textarea-hover-border-color);
|
||
}
|
||
|
||
.tiny-textarea__inner {
|
||
background-color: var(--ti-lowcode-textarea-input-bg-color);
|
||
color: var(--ti-lowcode-textarea-input-color);
|
||
}
|
||
}
|
||
|
||
.tiny-numeric {
|
||
.tiny-numeric__decrease,
|
||
.tiny-numeric__increase {
|
||
color: var(--ti-lowcode-tiny-numeric-icon-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-tiny-numeric-icon-hover-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
span.tiny-switch {
|
||
background-color: var(--ti-lowcode-tiny-switch-bg-color);
|
||
|
||
&.tiny-switch-checked {
|
||
background-color: var(--ti-lowcode-tiny-switch-checked-bg-color);
|
||
}
|
||
|
||
&::after {
|
||
background-color: var(--ti-lowcode-tiny-switch-dot-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-select {
|
||
div.tiny-input {
|
||
&.is-focus {
|
||
.tiny-input__inner {
|
||
border-color: var(--ti-lowcode-select-focus-border-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-select__tags {
|
||
.tiny-tag {
|
||
color: var(--ti-lowcode-select-tags-text-color);
|
||
background-color: var(--ti-lowcode-select-tags-bg-color);
|
||
|
||
.tiny-tag__close {
|
||
color: var(--ti-lowcode-select-tags-text-color);
|
||
&:hover {
|
||
color: var(--ti-lowcode-select-suffix-icon-color-hover);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-input {
|
||
.tiny-input__inner {
|
||
padding: 8px;
|
||
}
|
||
|
||
.tiny-select__caret {
|
||
color: var(--ti-lowcode-select-tags-text-color);
|
||
}
|
||
|
||
.tiny-input__suffix-inner {
|
||
&:hover {
|
||
.tiny-select__caret {
|
||
color: var(--ti-lowcode-select-suffix-icon-color-hover);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-select-dropdown {
|
||
&.tiny-popper {
|
||
background-color: var(--ti-lowcode-dropdown-bg-color);
|
||
border: 1px solid var(--ti-lowcode-dropdown-border-color);
|
||
|
||
&.select-popper {
|
||
margin-top: 3px;
|
||
|
||
.tiny-select-dropdown__item.tiny-option {
|
||
width: 79px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 4px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tiny-select-dropdown__list {
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.tiny-select-dropdown__wrap {
|
||
min-height: 50px;
|
||
margin-bottom: -8px !important;
|
||
margin-right: -8px !important;
|
||
}
|
||
}
|
||
|
||
.cursor-option {
|
||
padding: 0 4px 0 12px;
|
||
|
||
.item-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.item-label {
|
||
font-size: 14px;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-select-dropdown__item {
|
||
&.tiny-option {
|
||
color: var(--ti-lowcode-dropdown-item-text-color);
|
||
background-color: var(--ti-lowcode-dropdown-bg-color);
|
||
|
||
&.hover,
|
||
&:hover {
|
||
background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
}
|
||
|
||
&.selected {
|
||
color: var(--ti-lowcode-dropdown-item-selected-color);
|
||
background-color: var(--ti-lowcode-dropdown-item-selected-bg);
|
||
|
||
& > span {
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
&.is-disabled > a {
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.is-multiple {
|
||
.tiny-select-dropdown__item.tiny-option {
|
||
&:not(.is-disabled).hover,
|
||
&:not(.is-disabled):hover {
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);
|
||
|
||
.tiny-svg {
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
}
|
||
}
|
||
|
||
&.is-disabled:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.selected {
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
background-color: transparent;
|
||
font-weight: 600;
|
||
|
||
.tiny-svg {
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
}
|
||
|
||
& > span {
|
||
padding-left: 0;
|
||
|
||
&::before {
|
||
content: '';
|
||
}
|
||
}
|
||
}
|
||
|
||
& > span {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-select-group__wrap {
|
||
&:not(:last-of-type)::after {
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--ti-lowcode-toolbar-border-color);
|
||
}
|
||
|
||
.tiny-select-group__title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
background: var(--ti-lowcode-toolbar-bg);
|
||
padding: 2px 0 2px 8px;
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
|
||
.tiny-tree {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
background: var(--ti-lowcode-toolbar-view-hover-bg);
|
||
|
||
.tiny-tree-node__expand-icon {
|
||
&,
|
||
&.expanded {
|
||
color: var(--ti-lowcode-dialog-font-color);
|
||
}
|
||
|
||
&:not(.is-leaf) {
|
||
margin-left: 12px;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
|
||
.tiny-tree-node__content {
|
||
&:hover {
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
|
||
.tiny-tree-node {
|
||
&.is-current,
|
||
&:focus {
|
||
& > .tiny-tree-node__content {
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.position-origin-select {
|
||
min-width: 72px !important;
|
||
z-index: 9999999 !important;
|
||
}
|
||
}
|
||
|
||
.tiny-tree {
|
||
.tiny-tree-node__label {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
button {
|
||
&.tiny-button {
|
||
&.tiny-button--default {
|
||
color: var(--ti-lowcode-button-default-color);
|
||
border-color: var(--ti-lowcode-button-default-border-color);
|
||
background-color: var(--ti-lowcode-button-default-bg);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-button-default-hover-color);
|
||
border-color: var(--ti-lowcode-button-default-hover-border-color);
|
||
background-color: var(--ti-lowcode-button-default-hover-bg);
|
||
}
|
||
|
||
&.is-disabled {
|
||
color: var(--ti-lowcode-button-default-disabled-color);
|
||
border-color: var(--ti-lowcode-button-default-disabled-border-color);
|
||
background-color: var(--ti-lowcode-button-default-disabled-bg);
|
||
}
|
||
}
|
||
|
||
&.tiny-button--info {
|
||
color: var(--ti-lowcode-button-info-color);
|
||
border-color: var(--ti-lowcode-button-info-border-color);
|
||
background-color: var(--ti-lowcode-button-info-bg-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-button-info-hover-color);
|
||
border-color: var(--ti-lowcode-button-info-hover-border-color);
|
||
background-color: var(--ti-lowcode-button-info-hover-bg-color);
|
||
}
|
||
}
|
||
&.tiny-button--primary {
|
||
color: var(--ti-lowcode-button-primary-color);
|
||
border-color: var(--ti-lowcode-button-primary-border-color);
|
||
background-color: var(--ti-lowcode-button-primary-bg-color);
|
||
|
||
&:hover {
|
||
color: var(--ti-lowcode-button-primary-hover-color);
|
||
border-color: var(--ti-lowcode-button-primary-hover-border-color);
|
||
background-color: var(--ti-lowcode-button-primary-hover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-button-group {
|
||
ul.tiny-group-item {
|
||
border: 1px solid var(--ti-lowcode-tabs-border-color);
|
||
border-radius: 2px;
|
||
|
||
li {
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
|
||
&.active {
|
||
&:hover button:not(.disabled),
|
||
button:not(.disabled) {
|
||
background: var(--ti-lowcode-tabs-bg);
|
||
border-color: var(--ti-lowcode-tabs-bg);
|
||
color: var(--ti-lowcode-toolbar-icon-color);
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
button:not(.disabled) {
|
||
color: var(--ti-lowcode-dropdown-item-hover-text-color);
|
||
background-color: var(--ti-lowcode-common-component-bg);
|
||
}
|
||
}
|
||
|
||
&:not(:last-child) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
button {
|
||
background-color: var(--ti-lowcode-canvas-wrap-bg);
|
||
color: var(--ti-lowcode-toolbar-breadcrumb-color);
|
||
|
||
&::before {
|
||
background: var(--ti-lowcode-tabs-border-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-form {
|
||
.tiny-form-item__label {
|
||
padding-right: 8px;
|
||
color: var(--ti-lowcode-input-label-color);
|
||
}
|
||
|
||
.tiny-form-item {
|
||
&.is-error {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-collapse {
|
||
.tiny-collapse-item {
|
||
border: none;
|
||
// 第一项的外边距会与其他元素外边距相加形成最终外边距，因此第一项外边距不调整
|
||
+ .tiny-collapse-item {
|
||
margin-top: 4px;
|
||
}
|
||
.tiny-collapse-item__header {
|
||
padding-left: 16px;
|
||
}
|
||
.components-items {
|
||
.item {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-collapse-item__header {
|
||
color: var(--ti-lowcode-collapse-item-header-color);
|
||
background: var(--ti-lowcode-collapse-item-header-bg-color);
|
||
position: relative;
|
||
min-height: 32px;
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
|
||
&:hover,
|
||
&.is-active {
|
||
color: var(--ti-lowcode-collapse-item-header-active-color);
|
||
}
|
||
|
||
.tiny-collapse-item__arrow {
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
|
||
.tiny-collapse-item,
|
||
.tiny-collapse-item__wrap {
|
||
background-color: var(--ti-lowcode-collapse-item-bg-color);
|
||
}
|
||
|
||
.tiny-collapse-item__content {
|
||
color: var(--ti-lowcode-collapse-item-content-color);
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
|
||
.tiny-collapse-item__wrap {
|
||
overflow: inherit;
|
||
}
|
||
}
|
||
|
||
.canvas-slot-choose {
|
||
div {
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: var(--ti-lowcode-button-info-color);
|
||
|
||
&:hover {
|
||
background-color: var(--ti-lowcode-component-item-hover-bg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-notify {
|
||
.tiny-notify__close-zone {
|
||
color: var(--ti-lowcode-notify-close-color);
|
||
&:hover {
|
||
color: var(--ti-lowcode-notify-close-hover-color);
|
||
}
|
||
}
|
||
|
||
&.tiny-notify--error {
|
||
.tiny-notify__icon-status {
|
||
color: var(--ti-lowcode-base-error-color);
|
||
}
|
||
}
|
||
|
||
&.tiny-notify--info {
|
||
.tiny-notify__icon-status {
|
||
color: var(--ti-lowcode-base-prompt-color);
|
||
}
|
||
}
|
||
|
||
&.tiny-notify--success {
|
||
.tiny-notify__icon-status {
|
||
color: var(--ti-lowcode-base-success-color);
|
||
}
|
||
}
|
||
|
||
&.tiny-notify--warning {
|
||
.tiny-notify__icon-status {
|
||
color: var(--ti-lowcode-base-warn-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-tabs {
|
||
// tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器
|
||
&.full-width-tabs {
|
||
.tiny-tabs__nav {
|
||
float: none;
|
||
display: flex;
|
||
.tiny-tabs__item {
|
||
flex: 1 1 auto;
|
||
}
|
||
}
|
||
}
|
||
&__item__title {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.tiny-dropdown {
|
||
&__trigger {
|
||
color: var(--ti-lowcode-trigger-color);
|
||
&:not(&__caret-button):hover {
|
||
color: var(--ti-lowcode-trigger-hover-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-wrap {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
|
||
.empty-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
color: var(--ti-lowcode-empty-icon-color);
|
||
}
|
||
|
||
.empty-text {
|
||
margin-top: 6px;
|
||
margin-bottom: 0;
|
||
font-size: 12px;
|
||
color: var(--ti-lowcode-common-text-color-5);
|
||
}
|
||
}
|
||
|
||
.tiny-radio-group {
|
||
.tiny-radio-button {
|
||
&:first-child {
|
||
.tiny-radio-button__inner {
|
||
border-color: var(--ti-lowcode-radio-button-border-color);
|
||
}
|
||
}
|
||
.tiny-radio-button__orig-radio:checked {
|
||
& + .tiny-radio-button__inner {
|
||
background-color: var(--ti-lowcode-tiny-radio-button-checked-bg);
|
||
border-color: var(--ti-lowcode-radio-button-border-color);
|
||
&:hover {
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
&__inner {
|
||
background-color: var(--ti-lowcode-tiny-radio-button-bg);
|
||
color: var(--ti-lowcode-radio-button-color);
|
||
border-color: var(--ti-lowcode-radio-button-border-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.tiny-loading {
|
||
.tiny-loading__spinner {
|
||
margin-top: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.global-desc-info {
|
||
color: var(--ti-lowcode-common-text-desc-color);
|
||
}
|