deploy-ease-platform/frontend/src/pages/Workflow/Definition/Designer/NodePanel.module.less
2024-12-05 20:40:04 +08:00

125 lines
2.6 KiB
Plaintext

.nodeTabs {
height: 100%;
:global {
.ant-tabs {
height: 100%;
.ant-tabs-nav {
margin-bottom: 12px;
padding: 0 12px;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
.ant-tabs-tab {
padding: 12px 0;
font-size: 14px;
transition: all 0.3s;
&:hover {
color: #1890ff;
}
.anticon {
margin-right: 8px;
}
}
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #1890ff;
font-weight: 500;
}
}
.ant-tabs-ink-bar {
background: #1890ff;
}
}
}
.ant-tabs-content {
height: calc(100% - 46px);
padding: 0 12px 12px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
&:hover {
background: #999;
}
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
}
.ant-empty {
margin: 32px 0;
color: #999;
}
}
}
.nodeCard {
margin-bottom: 16px;
cursor: move;
border-radius: 4px;
transition: all 0.3s;
background: #fff;
border: 1px solid #f0f0f0;
padding: 12px;
&:hover {
border-color: #1890ff;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
transform: translateY(-1px);
}
.nodeIcon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
color: #fff;
font-size: 20px;
transition: all 0.3s;
.anticon {
transition: all 0.3s;
}
}
&:hover .nodeIcon {
transform: scale(1.1);
.anticon {
transform: scale(1.1);
}
}
.nodeName {
font-size: 14px;
color: #333;
text-align: center;
line-height: 1.5;
margin: 0;
font-weight: 500;
}
&:active {
transform: scale(0.98);
}
}