push
This commit is contained in:
xuziqiang
141
lib/saas/theme/detail.less
Normal file
141
lib/saas/theme/detail.less
Normal file
@@ -0,0 +1,141 @@
|
||||
.ns-view {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
// background: #e5ebf0;
|
||||
}
|
||||
.ns-detail-content {
|
||||
border-top: 16px solid #e5ebf0;
|
||||
padding: 16px 21px;
|
||||
background: #fff;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
:deep(.ant-skeleton-paragraph) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.ant-skeleton-paragraph li:nth-child(n)) {
|
||||
display: block;
|
||||
margin-right: 4%;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-skeleton-paragraph li:nth-child(3n + 3)) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-skeleton-content) {
|
||||
padding: 0 8px 10px 10px;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item-label),
|
||||
:deep(.ant-descriptions-item-content) {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-view) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-item) {
|
||||
padding-right: 20px;
|
||||
|
||||
&:nth-child(2n) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
padding-left: 20px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ns-page-header {
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 7px !important;
|
||||
padding-bottom: 7px !important;
|
||||
width: calc(100% + 32px);
|
||||
margin-left: -16px;
|
||||
.title {
|
||||
cursor: pointer;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-detail {
|
||||
border-bottom: 1px solid #ecedef;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&:first-child {
|
||||
:deep(.ant-descriptions-header) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-descriptions-header) {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.ant-descriptions-title {
|
||||
line-height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-image) {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-detail-html {
|
||||
:deep(table) {
|
||||
border-top: 1px solid #ffffff;
|
||||
border-left: 1px solid #ffffff;
|
||||
|
||||
:deep(p) {
|
||||
font-size: 12px;
|
||||
color: #898e91;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(th) {
|
||||
border-right: 1px solid #ffffff;
|
||||
font-size: 13px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: normal;
|
||||
background: #eff0f2;
|
||||
}
|
||||
|
||||
:deep(td) {
|
||||
border-top: 1px solid #ffffff;
|
||||
border-right: 1px solid #ffffff;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 12px;
|
||||
color: #606060;
|
||||
text-align: center;
|
||||
|
||||
:deep(text) {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
background: rgba(240, 242, 245, 0.5);
|
||||
}
|
||||
}
|
||||
277
lib/saas/theme/global-antd.less
Normal file
277
lib/saas/theme/global-antd.less
Normal file
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
Ant全局组件样式
|
||||
*/
|
||||
.ant-menu-submenu-popup{
|
||||
.ant-menu-title-content a{
|
||||
margin-left: 0!important;
|
||||
}
|
||||
.ant-menu-submenu-title .anticon + span{
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.ant-menu-submenu {
|
||||
height: 40px ;
|
||||
margin-top: 4px !important;
|
||||
margin-bottom: 4px !important;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
.ant-menu-submenu-title .ant-menu-title-content .anticon{
|
||||
margin-left: 0 !important;
|
||||
margin-right: 6px;
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
#app .ant-layout-has-sider .ant-menu-vertical .ant-menu-item,#app .ant-menu-vertical-left .ant-menu-item, #app.ant-menu-vertical-right .ant-menu-item,#app .ant-menu-inline .ant-menu-item,#app .ant-menu-vertical .ant-menu-submenu-title,#app .ant-menu-vertical-left .ant-menu-submenu-title,#app .ant-menu-vertical-right .ant-menu-submenu-title,#app .ant-menu-inline .ant-menu-submenu-title {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
.ant-menu-vertical.ant-menu-sub, .ant-menu-vertical-left.ant-menu-sub, .ant-menu-vertical-right.ant-menu-sub{
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.ant-menu-submenu .ant-menu-sub{
|
||||
min-width: 0 !important;
|
||||
}
|
||||
.ant-layout-sider-children{
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
////头部被选中高度
|
||||
//.ant-menu-item-selected {
|
||||
// height: @layout-header-height;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-item {
|
||||
// line-height: @layout-header-height;
|
||||
//}
|
||||
//
|
||||
//// .ant-layout {
|
||||
//// min-height: auto;
|
||||
//// }
|
||||
//
|
||||
//.ant-menu-inline {
|
||||
// border-right: none;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
|
||||
//.ant-menu-inline > .ant-menu-item {
|
||||
// height: 48px;
|
||||
// line-height: 48px;
|
||||
//}
|
||||
//
|
||||
//.ant-layout-sider-children {
|
||||
// color: @text-color !important;
|
||||
// width: @layout-sider-width;
|
||||
// line-height: 48px;
|
||||
// background: #fff;
|
||||
// box-shadow: 2px 0 6px rgb(0 0 0 / 5%);
|
||||
//}
|
||||
//
|
||||
//.ant-menu-inline .ant-menu-item {
|
||||
// border: 0 !important;
|
||||
// margin: 0 !important;
|
||||
// background-color: @white;
|
||||
//}
|
||||
//
|
||||
////侧边导航
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected::before {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
content: '';
|
||||
background-color: #37abc4;
|
||||
opacity: .1;
|
||||
}
|
||||
//
|
||||
//.ant-menu-item:not(.ant-menu-item-selected) a:hover {
|
||||
// color: @text-color;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-item::after {
|
||||
// z-index: 2;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-light .ant-menu-submenu:not(.ant-menu-submenu-selected) .ant-menu-submenu-title:hover {
|
||||
// color: @text-color;
|
||||
//}
|
||||
//
|
||||
//.ant-layout-sider {
|
||||
// max-width: @layout-sider-width !important;
|
||||
// min-width: @layout-sider-width !important;
|
||||
// width: @layout-sider-width !important;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
|
||||
// color: @layout-sider-arrow-color;
|
||||
//}
|
||||
//
|
||||
//.ant-menu-submenu-arrow {
|
||||
// color: @layout-sider-arrow-color;
|
||||
//}
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
|
||||
// //btn
|
||||
// .ant-btn:hover {
|
||||
// border-color: @border-color-base;
|
||||
// }
|
||||
|
||||
//
|
||||
.ant-btn-primary:hover, .ant-btn-primary:focus {
|
||||
// color: #fff !important;
|
||||
color: #fff ;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//禁用时鼠标光标
|
||||
.ant-btn[disabled],
|
||||
.ant-btn[disabled]:hover,
|
||||
.ant-btn[disabled]:focus,
|
||||
.ant-btn[disabled]:active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ant-input[disabled]:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ant-input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
||||
.ant-input-affix-wrapper-focused {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
//.ant-table-pagination.ant-pagination {
|
||||
// margin: 16px 0 16px 32px;
|
||||
//}
|
||||
|
||||
//弹框
|
||||
.ant-modal-body {
|
||||
overflow-y: auto;
|
||||
max-height: 550px;
|
||||
}
|
||||
|
||||
//校验时的alert提示
|
||||
//.ant-form-item-explain.ant-form-item-explain-error {
|
||||
// min-width: 250px;
|
||||
//}
|
||||
//
|
||||
//// ant-row ant-form-item ant-form-item-has-error ant-form-item-with-help
|
||||
//.ant-form-item-has-error,
|
||||
//.ant-form-item-with-help {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
|
||||
//.ant-pagination {
|
||||
// margin-right: 15px !important;
|
||||
//}
|
||||
|
||||
//日期选择不沾满修正
|
||||
.ant-calendar-picker {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//.ant-btn[disabled],
|
||||
//.ant-btn[disabled]:hover {
|
||||
// border: 1px solid transparent;
|
||||
//}
|
||||
|
||||
//.ant-form-item-control-input-content {
|
||||
// .ant-picker {
|
||||
// width: 270px;
|
||||
// height: 32px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.ant-picker:hover {
|
||||
// border: 1px solid #a5a5b5;
|
||||
//}
|
||||
//
|
||||
//.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||
// height: 32px;
|
||||
//}
|
||||
|
||||
//.ant-btn :hover {
|
||||
// border: 0;
|
||||
//}
|
||||
|
||||
//.ant-btn-primary:not(.ant-btn-background-ghost):not([disabled]) {
|
||||
// color: @white;
|
||||
//}
|
||||
//
|
||||
.ant-form-item-control-input-content {
|
||||
.ant-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
//.ant-picker:hover {
|
||||
// border: 1px solid #a5a5b5;
|
||||
//}
|
||||
//
|
||||
//.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||
// height: 32px;
|
||||
//}
|
||||
|
||||
// 表格选择列固定宽度
|
||||
//.ns-table .ant-table table tr th:first-child:not(.ant-table-selection-column),
|
||||
//.ns-table .ant-table table tr td:first-child:not(.ant-table-selection-column) {
|
||||
// padding-left: 24px;
|
||||
//}
|
||||
//
|
||||
//.ns-table .ant-table table tr th:last-child:not(.ant-table-selection-column),
|
||||
//.ns-table .ant-table table tr td:last-child:not(.ant-table-selection-column) {
|
||||
// padding-left: 12px;
|
||||
//}
|
||||
|
||||
//
|
||||
//.ant-tabs-nav-list {
|
||||
// margin-left: 20px;
|
||||
//}
|
||||
//
|
||||
//.ant-tabs-nav {
|
||||
// margin-bottom: 0;
|
||||
//}
|
||||
|
||||
.ant-empty-description {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
// 表头加粗
|
||||
.ant-table-thead > tr > th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//表头不换行
|
||||
.ant-table-thead > tr > th{
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
|
||||
background-size: cover;
|
||||
}
|
||||
230
lib/saas/theme/global.less
Normal file
230
lib/saas/theme/global.less
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* /* Page Header
|
||||
*
|
||||
* @format
|
||||
*/
|
||||
|
||||
/* Form */
|
||||
|
||||
.ns-form {
|
||||
&.ns-flex-form-vertical {
|
||||
.ant-form-item-label {
|
||||
line-height: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
&.ns-flex-form-horizontal {
|
||||
.ant-col-16 {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&.ns-vertical-form {
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
////最后一个分割线隐藏
|
||||
//&:last-child.ns-child-form {
|
||||
// .ns-child-form-divider {
|
||||
// display: none;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//&:is(.ns-form > .ns-form-body .ant-col:last-child.ns-col-space) > .ns-form-body > .ns-form-item-child:nth-last-child(2) .ant-divider{
|
||||
// display: none;
|
||||
//}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
// 只在悬停时显示输入框 删除图标
|
||||
.ant-form-item {
|
||||
.ant-input-suffix [aria-label='close-circle'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .ant-input-suffix [aria-label='close-circle'] {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-icon {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
fill: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.ns-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
reset
|
||||
*/
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(144 147 153 / 30%);
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #b6b7b9;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
transition: color 99999s 99999s, background-color 9999s 99999s;
|
||||
}
|
||||
|
||||
.ns-cell-rule-popover {
|
||||
.ant-popover-inner-content {
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-form-item-validate-self {
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input:hover,
|
||||
.ant-input-affix-wrapper:hover,
|
||||
.ant-input-number,
|
||||
.ant-picker,
|
||||
&.ant-form-item-has-error
|
||||
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
|
||||
.ant-select-selector {
|
||||
border-color: @border-color-base !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-extra {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden visible;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-sider-children {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ns-view-spinning {
|
||||
position: fixed !important;
|
||||
width: calc(100% - @ns-content-padding * 2 - @layout-sider-width) !important;
|
||||
left: calc(@layout-sider-width + @ns-content-padding) !important;
|
||||
top: calc(@ns-nav-shutters-height + @layout-header-height + @ns-content-padding) !important;
|
||||
}
|
||||
|
||||
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
|
||||
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
|
||||
color: @primary-color;
|
||||
}
|
||||
.ant-menu-submenu-selected .secendIcon {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
//状态颜色
|
||||
.commonStatus {
|
||||
&::before{
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusWarn {
|
||||
&::before{
|
||||
background-color: #fa8214;
|
||||
}
|
||||
}
|
||||
|
||||
.statusSuccess {
|
||||
&::before{
|
||||
background-color: #0D9E3E;
|
||||
}
|
||||
}
|
||||
|
||||
.statusRunning {
|
||||
&::before{
|
||||
background-color: #1C4DDC;
|
||||
}
|
||||
}
|
||||
.statusError {
|
||||
&::before{
|
||||
background-color: #D4321C;
|
||||
}
|
||||
}
|
||||
|
||||
.statusEmpty {
|
||||
&::before{
|
||||
width:0;
|
||||
}
|
||||
width:0;
|
||||
}
|
||||
|
||||
.statusNotStart {
|
||||
&::before{
|
||||
background-color: #8B98AB;
|
||||
}
|
||||
}
|
||||
|
||||
.statusDone{
|
||||
&::before{
|
||||
background-color: #697383;
|
||||
}
|
||||
}
|
||||
|
||||
.statusInvalid{
|
||||
&::before{
|
||||
background-color: #AEAEAE;
|
||||
}
|
||||
}
|
||||
.statusNull {
|
||||
&::before{
|
||||
background-color: #8B98AB;
|
||||
}
|
||||
// background-color: #8B98AB;
|
||||
}/* */
|
||||
.statusNull2{
|
||||
&::before{
|
||||
background-color: #697383;
|
||||
}
|
||||
// background-color: #697383;
|
||||
}
|
||||
3
lib/saas/theme/theme.less
Normal file
3
lib/saas/theme/theme.less
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "global-antd.less";
|
||||
@import "global.less";
|
||||
@import "./transition/index.less";
|
||||
18
lib/saas/theme/transition/base.less
Normal file
18
lib/saas/theme/transition/base.less
Normal file
@@ -0,0 +1,18 @@
|
||||
.transition-default() {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
|
||||
}
|
||||
|
||||
&-move {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-transition {
|
||||
.transition-default();
|
||||
}
|
||||
|
||||
.expand-x-transition {
|
||||
.transition-default();
|
||||
}
|
||||
93
lib/saas/theme/transition/fade.less
Normal file
93
lib/saas/theme/transition/fade.less
Normal file
@@ -0,0 +1,93 @@
|
||||
.fade-transition {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
// Fade Bottom
|
||||
// ///////////////////////////////////////////////
|
||||
|
||||
// Speed: 1x
|
||||
.fade-bottom-enter-active,
|
||||
.fade-bottom-leave-active {
|
||||
transition: opacity 0.25s, transform 0.3s;
|
||||
}
|
||||
|
||||
.fade-bottom-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
|
||||
.fade-bottom-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10%);
|
||||
}
|
||||
|
||||
// fade-scale
|
||||
.fade-scale-leave-active,
|
||||
.fade-scale-enter-active {
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
.fade-scale-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
// ///////////////////////////////////////////////
|
||||
// Fade Top
|
||||
// ///////////////////////////////////////////////
|
||||
|
||||
// Speed: 1x
|
||||
.fade-top-enter-active,
|
||||
.fade-top-leave-active {
|
||||
transition: opacity 0.2s, transform 0.25s;
|
||||
}
|
||||
|
||||
.fade-top-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(8%);
|
||||
}
|
||||
|
||||
.fade-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8%);
|
||||
}
|
||||
10
lib/saas/theme/transition/index.less
Normal file
10
lib/saas/theme/transition/index.less
Normal file
@@ -0,0 +1,10 @@
|
||||
@import './base.less';
|
||||
@import './fade.less';
|
||||
@import './scale.less';
|
||||
@import './slide.less';
|
||||
@import './scroll.less';
|
||||
@import './zoom.less';
|
||||
|
||||
.collapse-transition {
|
||||
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
|
||||
}
|
||||
21
lib/saas/theme/transition/scale.less
Normal file
21
lib/saas/theme/transition/scale.less
Normal file
@@ -0,0 +1,21 @@
|
||||
.scale-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.scale-rotate-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
67
lib/saas/theme/transition/scroll.less
Normal file
67
lib/saas/theme/transition/scroll.less
Normal file
@@ -0,0 +1,67 @@
|
||||
.scroll-y-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
39
lib/saas/theme/transition/slide.less
Normal file
39
lib/saas/theme/transition/slide.less
Normal file
@@ -0,0 +1,39 @@
|
||||
.slide-y-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-y-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-x-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-x-reverse-transition {
|
||||
.transition-default();
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
27
lib/saas/theme/transition/zoom.less
Normal file
27
lib/saas/theme/transition/zoom.less
Normal file
@@ -0,0 +1,27 @@
|
||||
// zoom-out
|
||||
.zoom-out-enter-active,
|
||||
.zoom-out-leave-active {
|
||||
transition: opacity 0.1 ease-in-out, transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
.zoom-out-enter-from,
|
||||
.zoom-out-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
// zoom-fade
|
||||
.zoom-fade-enter-active,
|
||||
.zoom-fade-leave-active {
|
||||
transition: transform 0.2s, opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.zoom-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.zoom-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.06);
|
||||
}
|
||||
53
lib/saas/theme/variable.less
Normal file
53
lib/saas/theme/variable.less
Normal file
@@ -0,0 +1,53 @@
|
||||
@primary-color: #37abc4; // 全局主色
|
||||
|
||||
@white: #fff;
|
||||
@black: #000;
|
||||
@text-color: fade(@black, 85%);
|
||||
@text-color-secondary: fade(@black, 45%);
|
||||
@text-color-dark: fade(@white, 85%);
|
||||
@text-color-secondary-dark: fade(@white, 65%);
|
||||
@backgroundGrey:#E5EBF0;
|
||||
|
||||
|
||||
@font-size-base: 14px; // 主字号
|
||||
|
||||
|
||||
@layout-body-background: #f0f2f5; //框架背景色
|
||||
@layout-header-hover:rgba(0, 0, 0, 0.06);//默认退出hover色
|
||||
@layout-header-background: #37abc4; // 头部背景色
|
||||
@ant-layout-sider-collapsed-background:rgb(255, 255, 255);//导航栏收缩后背景色
|
||||
@layout-header-height: 48px;
|
||||
@layout-header-padding: 0 50px;
|
||||
|
||||
@layout-sider-width: 208px; //侧边导航宽度
|
||||
@layout-sider-arrow-color: #808d96; //侧边导航箭头颜色
|
||||
|
||||
// Border color
|
||||
@border-color-base: hsv(0, 0, 85%); // base border outline a component
|
||||
|
||||
//btn
|
||||
//@btn-disable-color: #9b9b9b; //禁用按钮color
|
||||
//@btn-disable-bg: #f5f5f5; //禁用按钮background
|
||||
//@btn-disable-border: 1px solid #f5f5f5;
|
||||
|
||||
|
||||
//form
|
||||
@form-vertical-label-padding: 0; //垂直label之间内间距
|
||||
@form-vertical-label-margin: 0, 0, 16, 0px; //垂直label之间外间距
|
||||
@form-item-margin-bottom: 24px;
|
||||
|
||||
//menu
|
||||
@menu-item-height: 48px;
|
||||
@menu-item-active-bg: none;
|
||||
@menu-item-boundary-margin: 0px;
|
||||
|
||||
|
||||
//table
|
||||
@table-padding-vertical: 16px;
|
||||
@table-padding-horizontal: 16px;
|
||||
@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
|
||||
@table-padding-horizontal-md: (@table-padding-vertical * 3 / 4);
|
||||
|
||||
//list-table
|
||||
@ns-content-padding: 24px;
|
||||
@ns-nav-shutters-height: 31px;
|
||||
Reference in New Issue
Block a user