update 夜间模式
This commit is contained in:
6
web-react/src/assets/style/dark/extend.less
Normal file
6
web-react/src/assets/style/dark/extend.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import '~antd/dist/antd.dark.less';
|
||||
@padding-xxs: 4px;
|
||||
@padding-xl: 32px;
|
||||
body {
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
@@ -8,14 +8,6 @@
|
||||
@import './lib/width-height.less';
|
||||
@import './lib/scrollbar.less';
|
||||
@import './main.less';
|
||||
@import './frame/dark.less';
|
||||
@import './frame/light.less';
|
||||
.yo-nav-theme--dark {
|
||||
.dark();
|
||||
}
|
||||
.yo-nav-theme--light {
|
||||
.light();
|
||||
}
|
||||
@import './lib/button.less';
|
||||
@import './lib/card.less';
|
||||
@import './lib/table.less';
|
||||
@@ -39,5 +31,5 @@
|
||||
@import './lib/anchor.less';
|
||||
@import './lib/disabled.less';
|
||||
@import './theme/primary.less';
|
||||
// @import './lib/font-weight.less';
|
||||
@import './public.less';
|
||||
@import './pages/index.less';
|
||||
18
web-react/src/assets/style/dark/lib/color-selector.less
Normal file
18
web-react/src/assets/style/dark/lib/color-selector.less
Normal file
@@ -0,0 +1,18 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-dropdown {
|
||||
.chrome-picker {
|
||||
width: auto !important;
|
||||
margin: -@padding-xxs 0;
|
||||
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.color-selector--palette {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: inset 0 0 0 @border-width-base @border-color-base, inset 0 0 0 3px @black;
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
>table {
|
||||
border-collapse: collapse;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
|
||||
&.ant-tabs-card-bar {
|
||||
.ant-tabs-nav-container {
|
||||
@@ -121,7 +121,7 @@
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: fade(@white, 80%);
|
||||
background-color: fade(@component-background, 80%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
@@ -164,6 +164,6 @@
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
399
web-react/src/assets/style/dark/lib/form.less
Normal file
399
web-react/src/assets/style/dark/lib/form.less
Normal file
@@ -0,0 +1,399 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-form {
|
||||
&--fixed {
|
||||
width: 660px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
.ant-form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @component-background;
|
||||
|
||||
@box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
|
||||
@control-background: darken(@white, 95%) !important;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
.ant-form-item-control {
|
||||
text-align: right;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-number,
|
||||
.ant-mentions,
|
||||
.ant-select-selector,
|
||||
.ant-input-group-addon,
|
||||
.ant-cascader-picker,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-picker {
|
||||
z-index: 1;
|
||||
|
||||
text-align: left;
|
||||
|
||||
color: darken(@white, 10%);
|
||||
border: 0;
|
||||
background-color: @control-background;
|
||||
}
|
||||
.ant-mentions {
|
||||
textarea {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.focus {
|
||||
z-index: 2 !important;
|
||||
|
||||
box-shadow: @box-shadow-focused;
|
||||
}
|
||||
.unfoucs {
|
||||
z-index: 1 !important;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-input {
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
>.ant-input {
|
||||
&:focus {
|
||||
.unfoucs();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-input-number-focused,
|
||||
.ant-mentions-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused,
|
||||
.ant-select-open {
|
||||
z-index: 2;
|
||||
.ant-select-selection {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker:focus {
|
||||
.ant-cascader-input {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
|
||||
.ant-select-selector {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
.ant-picker-focused {
|
||||
.focus();
|
||||
}
|
||||
.ant-input-group {
|
||||
.ant-row-flex {
|
||||
.ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.ant-input-group-addon {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.ant-cascader-picker-clear {
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
|
||||
margin-right: @padding-md;
|
||||
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
>label {
|
||||
color: darken(@white, 10%);
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 61.8%;
|
||||
|
||||
width: 61.8%;
|
||||
min-width: 220px;
|
||||
}
|
||||
.yo-form--fluid {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 100%;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.yo-form--short {
|
||||
.ant-form-item-control {
|
||||
flex: 0 0 38.2%;
|
||||
|
||||
width: 38.2%;
|
||||
}
|
||||
}
|
||||
// 上下布局
|
||||
.yo-form--vertical {
|
||||
display: block;
|
||||
.ant-form-item-control {
|
||||
text-align: left;
|
||||
}
|
||||
&-radio {
|
||||
.ant-radio-wrapper {
|
||||
line-height: @padding-lg;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-right: 0;
|
||||
+.ant-radio-wrapper {
|
||||
margin-top: @padding-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-wrapper {
|
||||
margin-left: @padding-lg;
|
||||
}
|
||||
.ant-form-explain {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: -1px;
|
||||
padding: @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @component-background;
|
||||
&:hover {
|
||||
background-color: lighten(@black, 1%);
|
||||
}
|
||||
&:active {
|
||||
background-color: lighten(@black, 3%);
|
||||
}
|
||||
&--title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
&--content {
|
||||
flex: 1;
|
||||
|
||||
text-align: right;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&--right-icon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
}
|
||||
&.yo-form--no-border {
|
||||
.ant-form-item {
|
||||
padding: @padding-md 0;
|
||||
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-modal-form {
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.yo-form {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: @padding-sm @padding-md @padding-xs;
|
||||
}
|
||||
.yo-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
&:first-child {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-drawer-form {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.yo-drawer-form--body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: @border-width-base + 20px + @padding-md * 2;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
.ant-drawer-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
padding: 10px @padding-md;
|
||||
|
||||
text-align: right;
|
||||
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
background: @component-background;
|
||||
button+button {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
fieldset {
|
||||
margin-bottom: @padding-lg;
|
||||
padding: @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
legend {
|
||||
display: inline-block;
|
||||
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
border: 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
.ant-form-horizontal {
|
||||
.ant-form-item-label {
|
||||
line-height: 1.5;
|
||||
|
||||
margin-right: @padding-xs;
|
||||
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.ant-form-vertical {
|
||||
.ant-form-item-label {
|
||||
>label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-required {
|
||||
&::before {
|
||||
content: '' !important;
|
||||
vertical-align: middle;
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid @highlight-color;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.yo-form-page {
|
||||
.ant-form {
|
||||
.ant-radio-button-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
margin-bottom: @padding-xs;
|
||||
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
border-left-color: @primary-color;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-filter-item {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
margin-bottom: 0;
|
||||
.ant-tag-checkable {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.ant-radio-button-wrapper {
|
||||
border: 0 !important;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @red-6;
|
||||
}
|
||||
}
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
border-color: @red-6;
|
||||
background-color: @red-6;
|
||||
&:hover {
|
||||
border-color: @red-5;
|
||||
background-color: @red-5;
|
||||
}
|
||||
&:active {
|
||||
border-color: @red-7;
|
||||
background-color: @red-7;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,16 +7,17 @@
|
||||
.ant-modal-header {
|
||||
padding: @padding-sm @padding-md;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-close {
|
||||
top: 10px;
|
||||
14
web-react/src/assets/style/dark/lib/scrollbar.less
Normal file
14
web-react/src/assets/style/dark/lib/scrollbar.less
Normal file
@@ -0,0 +1,14 @@
|
||||
@import (reference) '../extend.less';
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
|
||||
background-color: fade(@white, 10%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: @border-radius-base;
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@white, 50%);
|
||||
}
|
||||
240
web-react/src/assets/style/dark/lib/table.less
Normal file
240
web-react/src/assets/style/dark/lib/table.less
Normal file
@@ -0,0 +1,240 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-query-bar {
|
||||
margin-bottom: @padding-xs;
|
||||
.ant-form-inline {
|
||||
.ant-form-item {
|
||||
margin-bottom: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: @padding-md;
|
||||
&--actions {
|
||||
>.ant-btn,
|
||||
>.ant-btn-group {
|
||||
+.ant-btn,
|
||||
+.ant-btn-group {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table {
|
||||
.ant-table-container {
|
||||
&::before,
|
||||
&::after {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
th.ant-table-column-has-sorters {
|
||||
&:hover {
|
||||
background-color: darken(@background-color-base, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
transition-property: background, border-bottom-color;
|
||||
}
|
||||
}
|
||||
>tr.ant-table-row:hover {
|
||||
>td {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-small {
|
||||
>.ant-table-content {
|
||||
>.ant-table-body {
|
||||
margin: 0;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
background-color: @table-selected-row-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-sticky-scroll {
|
||||
display: none;
|
||||
}
|
||||
.yo-table {
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.border-right-none {
|
||||
border-right-width: 0 !important;
|
||||
&:last-child {
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
}
|
||||
.ant-table-content {
|
||||
.ant-table-body {
|
||||
overflow-x: auto !important;
|
||||
>table {
|
||||
>.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-left {
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
border-right-width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-fixed-right {
|
||||
.ant-table-fixed {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>tr {
|
||||
>td {
|
||||
.border-right-none();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-table-bordered {
|
||||
>.ant-table-container {
|
||||
border-top: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
}
|
||||
&--row-no {
|
||||
width: 30px !important;
|
||||
|
||||
background-color: @table-header-bg;
|
||||
}
|
||||
}
|
||||
.yo-table-actions {
|
||||
display: inline-block;
|
||||
|
||||
vertical-align: middle;
|
||||
&--inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.yo-table--column-setting {
|
||||
width: 240px;
|
||||
.ant-dropdown-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.anticon-pushpin {
|
||||
transition: @animation-duration-slow;
|
||||
transform: rotate(45deg);
|
||||
|
||||
color: darken(@white, 40%);
|
||||
}
|
||||
.yo-table--fixed {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
.yo-menu-table {
|
||||
.ant-table {
|
||||
.ant-table-expand-icon-col {
|
||||
width: 28px;
|
||||
}
|
||||
.ant-table-row-expand-icon-cell {
|
||||
z-index: 1;
|
||||
|
||||
padding-right: 0 !important;
|
||||
|
||||
border-right: none !important;
|
||||
+.ant-table-cell {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.ant-table-tbody {
|
||||
>.ant-table-expanded-row-level-1>td {
|
||||
padding: 0;
|
||||
|
||||
border-right: none !important;
|
||||
.ant-table-wrapper {
|
||||
border: none;
|
||||
.ant-table {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ant-table-container {
|
||||
border: none;
|
||||
.ant-table-row-expand-icon-cell {
|
||||
.ant-table-row-expand-icon {
|
||||
left: @padding-md;
|
||||
}
|
||||
+.ant-table-cell {
|
||||
padding-left: @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-table-expanded-row-level-1>td {
|
||||
padding: @padding-sm @padding-xs @padding-sm @padding-xl;
|
||||
|
||||
border-right: @border-width-base @border-style-base @table-border-color !important;
|
||||
.ant-card {
|
||||
max-width: fit-content;
|
||||
margin-bottom: 0;
|
||||
|
||||
background: none;
|
||||
.ant-card-grid {
|
||||
width: 300px;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
background-color: @card-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,10 +22,10 @@
|
||||
color: @warning-color;
|
||||
}
|
||||
.text-gray {
|
||||
color: gray;
|
||||
color: fade(@white, 50%);
|
||||
}
|
||||
.text-normal {
|
||||
color: @normal-color;
|
||||
color: fade(@white, 30%);
|
||||
}
|
||||
.text-white {
|
||||
color: @white;
|
||||
83
web-react/src/assets/style/dark/lib/tree-layout.less
Normal file
83
web-react/src/assets/style/dark/lib/tree-layout.less
Normal file
@@ -0,0 +1,83 @@
|
||||
@import (reference) '../extend.less';
|
||||
@import (reference) './text-color.less';
|
||||
.yo-tree-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-sider {
|
||||
background-color: @component-background;
|
||||
.ant-layout-header {
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
background-color: @component-background;
|
||||
.header-actions {
|
||||
.ant-input-search {
|
||||
margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--collapsed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
|
||||
transform: translateX(-100%);
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black , 20%);
|
||||
}
|
||||
}
|
||||
&--bar {
|
||||
line-height: 20px;
|
||||
|
||||
height: 20px;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
text-align: right;
|
||||
>.anticon {
|
||||
margin-left: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: fade(@white, 50%);
|
||||
&:hover {
|
||||
color: fade(@white, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--content {
|
||||
position: absolute;
|
||||
top: @layout-header-height;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:active {
|
||||
background-color: fade(@white, 45%);
|
||||
}
|
||||
}
|
||||
.ant-tree {
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
658
web-react/src/assets/style/dark/main.less
Normal file
658
web-react/src/assets/style/dark/main.less
Normal file
@@ -0,0 +1,658 @@
|
||||
@import (reference) './extend.less';
|
||||
@import (reference) './lib/container.less';
|
||||
@import (reference) './lib/text-color.less';
|
||||
.yo-layout--spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
>div>.ant-spin {
|
||||
max-height: none;
|
||||
@-webkit-keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
@keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
box-sizing: content-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-animation: borderScale 1s infinite ease-in-out;
|
||||
animation: borderScale 1s infinite ease-in-out;
|
||||
|
||||
color: white;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 50%;
|
||||
>p {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.ant-spin-blur {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-header {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background-color;
|
||||
.anticon {
|
||||
font-size: @font-size-base + 6px;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: color;
|
||||
// 特殊工具按钮
|
||||
.theme-toggle {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 7px 0;
|
||||
|
||||
border-radius: 50%;
|
||||
&--real {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
&--imaginary {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: -6px;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
transform: @animation-duration-slow transform;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
transform-origin: top right;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: fade(@layout-header-background, 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
.ant-select-auto-complete {
|
||||
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
|
||||
.ant-input-affix-wrapper {
|
||||
border: 0;
|
||||
background-color: fade(@white, 15%);
|
||||
&:focus,
|
||||
&-focused {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
.ant-input {
|
||||
color: fade(@white, 85%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
|
||||
overflow-y: auto;
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
overflow: visible;
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @layout-header-background;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-tab-btn {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-tab-subtitle {
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 150px;
|
||||
|
||||
transform: translateY(1px);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
opacity: .75;
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -.5px;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
content: '';
|
||||
transform: scaleX(.5);
|
||||
|
||||
background: linear-gradient(transparent, fade(@black, 30%), transparent);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
line-height: 28px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav-more {
|
||||
padding: 5px @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
>iframe {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-sider {
|
||||
.ant-menu-inline {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.yo-nav {
|
||||
padding-top: @padding-lg;
|
||||
padding-bottom: @padding-lg;
|
||||
&--row {
|
||||
padding: 1px 0;
|
||||
|
||||
column-gap: @padding-md;
|
||||
column-count: 3;
|
||||
}
|
||||
&--col {
|
||||
break-inside: avoid;
|
||||
}
|
||||
&--sub-item {
|
||||
}
|
||||
&--item-group {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding-top: @padding-xs * 2;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
&--item {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-fast;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
color: @white;
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-sider {
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height + 10px;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex: 0 0 @layout-header-height + 10px;
|
||||
|
||||
height: @layout-header-height + 10px;
|
||||
padding: 0 @padding-md 0 @padding-lg;
|
||||
|
||||
color: @white;
|
||||
box-shadow: none;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
&.ant-layout-sider-collapsed {
|
||||
.logo {
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-sider-nav {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black, 25%);
|
||||
&--app {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
margin-top: @padding-sm;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
.text-gray();
|
||||
}
|
||||
.ant-menu {
|
||||
background-color: @layout-header-background;
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
background-color: fade(@white, 4%);
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-blur {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--left-menu,
|
||||
.yo-layout--right-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
|
||||
background-color: @white;
|
||||
>section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@black, 5%);
|
||||
.anticon {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>section {
|
||||
>.ant-layout-sider {
|
||||
.yo-layout-sider();
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--top-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@layout-header-height: 54px;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
flex: 0 0 @layout-header-height;
|
||||
|
||||
height: @layout-header-height;
|
||||
padding: 0;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@white, 20%);
|
||||
.anticon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: (@layout-header-height - 40px) / 2 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height - 10px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
height: @layout-header-height 10px;
|
||||
margin: 5px @padding-lg 5px 0;
|
||||
|
||||
color: @white;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
border-bottom: 0;
|
||||
>.ant-menu-submenu {
|
||||
top: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container-fluid {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-user-popover {
|
||||
width: 280px;
|
||||
padding-top: 0;
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
51
web-react/src/assets/style/dark/pages/account-base.less
Normal file
51
web-react/src/assets/style/dark/pages/account-base.less
Normal file
@@ -0,0 +1,51 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-avatar-info {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
&--cover {
|
||||
font-size: @font-size-lg * 2;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
opacity: 0;
|
||||
color: @white;
|
||||
background-color: fade(@black, 50%);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-avatar-cropper {
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.yo-avatar-preview {
|
||||
overflow: hidden;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
42
web-react/src/assets/style/dark/pages/home.less
Normal file
42
web-react/src/assets/style/dark/pages/home.less
Normal file
@@ -0,0 +1,42 @@
|
||||
@import (reference) '../extend.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row {
|
||||
line-height: 24px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
web-react/src/assets/style/dark/pages/index.less
Normal file
3
web-react/src/assets/style/dark/pages/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
@import './login.less';
|
||||
@import './home.less';
|
||||
@import './account-base.less';
|
||||
86
web-react/src/assets/style/dark/pages/login.less
Normal file
86
web-react/src/assets/style/dark/pages/login.less
Normal file
@@ -0,0 +1,86 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-login {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>img {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: '';
|
||||
|
||||
background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
|
||||
}
|
||||
&--placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.container-sm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
width: 300px;
|
||||
padding: @padding-lg;
|
||||
|
||||
border-radius: @border-radius-base + 2px;
|
||||
background: linear-gradient(45deg, @white, fade(@white, 80%));
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding: @padding-xs 0 0 !important;
|
||||
|
||||
transition: @animation-duration-base;
|
||||
transform: translate(0);
|
||||
>label {
|
||||
font-weight: normal !important;
|
||||
|
||||
color: fade(@black, 40%);
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
.ant-form-item-label {
|
||||
transform: translate(11px, 28px);
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
color: fade(@black, 85%);
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: fade(@black, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-input:focus,
|
||||
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: @primary-color;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
.amap-icon {
|
||||
img {
|
||||
width: 25px;
|
||||
@@ -23,6 +23,7 @@
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
}
|
||||
5
web-react/src/assets/style/dark/theme/primary.less
Normal file
5
web-react/src/assets/style/dark/theme/primary.less
Normal file
@@ -0,0 +1,5 @@
|
||||
@import '../index.less';
|
||||
@primary-color: #00a091;
|
||||
@error-color: @red-7;
|
||||
@font-size-base: 13px;
|
||||
@border-radius-base: 0;
|
||||
35
web-react/src/assets/style/default/index.less
Normal file
35
web-react/src/assets/style/default/index.less
Normal file
@@ -0,0 +1,35 @@
|
||||
@import './extend.less';
|
||||
@import './lib/visibility.less';
|
||||
@import './lib/container.less';
|
||||
@import './lib/align.less';
|
||||
@import './lib/font-size.less';
|
||||
@import './lib/text-color.less';
|
||||
@import './lib/margin.less';
|
||||
@import './lib/width-height.less';
|
||||
@import './lib/scrollbar.less';
|
||||
@import './main.less';
|
||||
@import './lib/button.less';
|
||||
@import './lib/card.less';
|
||||
@import './lib/table.less';
|
||||
@import './lib/list.less';
|
||||
@import './lib/form.less';
|
||||
@import './lib/form-page.less';
|
||||
@import './lib/page.less';
|
||||
@import './lib/description.less';
|
||||
@import './lib/input.less';
|
||||
@import './lib/select.less';
|
||||
@import './lib/checkbox.less';
|
||||
@import './lib/radio.less';
|
||||
@import './lib/cascader.less';
|
||||
@import './lib/upload.less';
|
||||
@import './lib/dropdown.less';
|
||||
@import './lib/modal.less';
|
||||
@import './lib/tree-layout.less';
|
||||
@import './lib/authority-view.less';
|
||||
@import './lib/icon-selector.less';
|
||||
@import './lib/color-selector.less';
|
||||
@import './lib/anchor.less';
|
||||
@import './lib/disabled.less';
|
||||
@import './theme/primary.less';
|
||||
@import './public.less';
|
||||
@import './pages/index.less';
|
||||
9
web-react/src/assets/style/default/lib/align.less
Normal file
9
web-react/src/assets/style/default/lib/align.less
Normal file
@@ -0,0 +1,9 @@
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
11
web-react/src/assets/style/default/lib/anchor.less
Normal file
11
web-react/src/assets/style/default/lib/anchor.less
Normal file
@@ -0,0 +1,11 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-anchor-ink-ball {
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
|
||||
transform: translate(-50%, -10px);
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
53
web-react/src/assets/style/default/lib/authority-view.less
Normal file
53
web-react/src/assets/style/default/lib/authority-view.less
Normal file
@@ -0,0 +1,53 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-authority-view {
|
||||
&--container {
|
||||
>.ant-descriptions-view {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-label {
|
||||
width: 150px;
|
||||
}
|
||||
.ant-descriptions {
|
||||
clear: both;
|
||||
|
||||
margin-bottom: @padding-sm;
|
||||
.ant-descriptions-view {
|
||||
overflow: visible;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
padding: @padding-sm @padding-md;
|
||||
.yo-authority-view--checkbox {
|
||||
display: inline-block;
|
||||
|
||||
width: 150px;
|
||||
margin: @padding-xxs 0;
|
||||
.ant-checkbox-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
margin-bottom: @padding-sm;
|
||||
padding: @padding-xs;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-card {
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: transparent;
|
||||
&-body {
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
web-react/src/assets/style/default/lib/button.less
Normal file
4
web-react/src/assets/style/default/lib/button.less
Normal file
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn {
|
||||
box-shadow: none;
|
||||
}
|
||||
4
web-react/src/assets/style/default/lib/card.less
Normal file
4
web-react/src/assets/style/default/lib/card.less
Normal file
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-card {
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
6
web-react/src/assets/style/default/lib/cascader.less
Normal file
6
web-react/src/assets/style/default/lib/cascader.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-cascader-picker-arrow {
|
||||
svg {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
10
web-react/src/assets/style/default/lib/checkbox.less
Normal file
10
web-react/src/assets/style/default/lib/checkbox.less
Normal file
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-checkbox-wrapper {
|
||||
margin-right: @padding-xs;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
+.ant-checkbox-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
43
web-react/src/assets/style/default/lib/container.less
Normal file
43
web-react/src/assets/style/default/lib/container.less
Normal file
@@ -0,0 +1,43 @@
|
||||
@import (reference) '../extend.less';
|
||||
@container-width: 1400px;
|
||||
.container-base {
|
||||
margin: 0 auto;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
.container {
|
||||
width: @container-width;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.container-md {
|
||||
width: @container-width - 200px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-sm {
|
||||
width: @container-width - 400px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xs {
|
||||
width: @container-width - 600px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-xxs {
|
||||
width: @container-width - 700px;
|
||||
|
||||
.container-base();
|
||||
}
|
||||
.container-fluid {
|
||||
.container-base();
|
||||
}
|
||||
.container-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
10
web-react/src/assets/style/default/lib/description.less
Normal file
10
web-react/src/assets/style/default/lib/description.less
Normal file
@@ -0,0 +1,10 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-descriptions-bordered {
|
||||
.ant-descriptions-view {
|
||||
>table {
|
||||
border-collapse: collapse;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
web-react/src/assets/style/default/lib/disabled.less
Normal file
59
web-react/src/assets/style/default/lib/disabled.less
Normal file
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-btn-primary-disabled,
|
||||
.ant-btn-primary.disabled,
|
||||
.ant-btn-primary[disabled],
|
||||
.ant-btn-primary-disabled:hover,
|
||||
.ant-btn-primary.disabled:hover,
|
||||
.ant-btn-primary[disabled]:hover,
|
||||
.ant-btn-primary-disabled:focus,
|
||||
.ant-btn-primary.disabled:focus,
|
||||
.ant-btn-primary[disabled]:focus,
|
||||
.ant-btn-primary-disabled:active,
|
||||
.ant-btn-primary.disabled:active,
|
||||
.ant-btn-primary[disabled]:active,
|
||||
.ant-btn-primary-disabled.active,
|
||||
.ant-btn-primary.disabled.active,
|
||||
.ant-btn-primary[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-btn-danger-disabled,
|
||||
.ant-btn-danger.disabled,
|
||||
.ant-btn-danger[disabled],
|
||||
.ant-btn-danger-disabled:hover,
|
||||
.ant-btn-danger.disabled:hover,
|
||||
.ant-btn-danger[disabled]:hover,
|
||||
.ant-btn-danger-disabled:focus,
|
||||
.ant-btn-danger.disabled:focus,
|
||||
.ant-btn-danger[disabled]:focus,
|
||||
.ant-btn-danger-disabled:active,
|
||||
.ant-btn-danger.disabled:active,
|
||||
.ant-btn-danger[disabled]:active,
|
||||
.ant-btn-danger-disabled.active,
|
||||
.ant-btn-danger.disabled.active,
|
||||
.ant-btn-danger[disabled].active {
|
||||
opacity: .5;
|
||||
color: @btn-danger-color;
|
||||
border-color: @btn-danger-border;
|
||||
background-color: @btn-danger-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
text-shadow: @btn-text-shadow;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled,
|
||||
.ant-radio-button-wrapper-disabled:first-child,
|
||||
.ant-radio-button-wrapper-disabled:hover {
|
||||
opacity: .5;
|
||||
color: @radio-button-color;
|
||||
background-color: @radio-button-bg;
|
||||
}
|
||||
.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
|
||||
opacity: .5;
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
box-shadow: @btn-primary-shadow;
|
||||
}
|
||||
6
web-react/src/assets/style/default/lib/dropdown.less
Normal file
6
web-react/src/assets/style/default/lib/dropdown.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-dropdown-trigger {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
25
web-react/src/assets/style/default/lib/font-size.less
Normal file
25
web-react/src/assets/style/default/lib/font-size.less
Normal file
@@ -0,0 +1,25 @@
|
||||
@import (reference) '../extend.less';
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
24
web-react/src/assets/style/default/lib/font-weight.less
Normal file
24
web-react/src/assets/style/default/lib/font-weight.less
Normal file
@@ -0,0 +1,24 @@
|
||||
@import (reference) '../extend.less';
|
||||
body {
|
||||
font-weight: 100;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@btn-font-weight: 100;
|
||||
.ant-card-meta-title {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.ant-table-thead {
|
||||
>tr {
|
||||
>th {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
169
web-react/src/assets/style/default/lib/form-page.less
Normal file
169
web-react/src/assets/style/default/lib/form-page.less
Normal file
@@ -0,0 +1,169 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.yo-form-page {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
.yo-tab-external-mount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
background-color: @component-background;
|
||||
|
||||
&.ant-tabs-card-bar {
|
||||
.ant-tabs-nav-container {
|
||||
height: @tabs-card-height + @padding-xs;
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
transition: none;
|
||||
|
||||
.ant-btn();
|
||||
|
||||
&:hover {
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
line-height: @btn-height-base;
|
||||
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.ant-tabs-tab-active {
|
||||
z-index: 2;
|
||||
|
||||
color: @btn-primary-color;
|
||||
border-color: @btn-primary-bg;
|
||||
background-color: @btn-primary-bg;
|
||||
|
||||
&:hover {
|
||||
color: @btn-primary-color;
|
||||
border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
|
||||
&--with-tab {
|
||||
position: absolute;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-right: 7px;
|
||||
|
||||
>.container-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
~.yo-tab-external-mount {
|
||||
>.yo-tab-external-mount-content {
|
||||
>.yo-tab-external-tabpane {
|
||||
padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--bar-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: fade(@component-background, 80%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
>:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&--body {
|
||||
>.ant-card-body {
|
||||
padding: 0;
|
||||
|
||||
>section {
|
||||
padding: @padding-lg;
|
||||
|
||||
>h5 {
|
||||
padding-left: @padding-md;
|
||||
|
||||
border-left: @padding-xs @border-style-base @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
@@ -29,7 +29,7 @@
|
||||
padding: @padding-xs @padding-md;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
|
||||
@box-shadow-focused: 0 0 0 2px fade(@primary-color, 50%);
|
||||
@control-background: lighten(@black, 95%) !important;
|
||||
@@ -58,7 +58,7 @@
|
||||
}
|
||||
.ant-mentions {
|
||||
textarea {
|
||||
background-color: lighten(@black, 95%);
|
||||
background-color: @control-background;
|
||||
}
|
||||
}
|
||||
.focus {
|
||||
@@ -299,7 +299,7 @@
|
||||
text-align: right;
|
||||
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
background: @white;
|
||||
background: @component-background;
|
||||
button+button {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
@@ -346,7 +346,7 @@
|
||||
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 5px solid #f5222d;
|
||||
border-left: 5px solid @highlight-color;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@@ -356,7 +356,7 @@
|
||||
margin-right: @padding-xs;
|
||||
margin-bottom: @padding-xs;
|
||||
|
||||
border-left: @border-width-base @border-style-base @normal-color;
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
&.ant-radio-button-wrapper-checked {
|
||||
border-left-color: @primary-color;
|
||||
}
|
||||
59
web-react/src/assets/style/default/lib/icon-selector.less
Normal file
59
web-react/src/assets/style/default/lib/icon-selector.less
Normal file
@@ -0,0 +1,59 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-icon-selector {
|
||||
.ant-drawer-wrapper-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
position: relative;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
.ant-tabs-content-left {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
.ant-tabs-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: @padding-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-card {
|
||||
margin: 0;
|
||||
}
|
||||
.ant-card-grid {
|
||||
width: 25%;
|
||||
|
||||
text-align: center;
|
||||
>span {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: @padding-xxs -@padding-lg 0;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
&.yo-icon--selected {
|
||||
color: @white;
|
||||
background-color: @primary-color;
|
||||
>span {
|
||||
color: fade(@white, 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
web-react/src/assets/style/default/lib/input.less
Normal file
4
web-react/src/assets/style/default/lib/input.less
Normal file
@@ -0,0 +1,4 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-addon {
|
||||
padding: 0 @padding-xs;
|
||||
}
|
||||
95
web-react/src/assets/style/default/lib/list.less
Normal file
95
web-react/src/assets/style/default/lib/list.less
Normal file
@@ -0,0 +1,95 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-list-bordered {
|
||||
border-color: @border-color-split;
|
||||
background-color: @white;
|
||||
}
|
||||
.yo-list {
|
||||
@title-color: lighten(@black, 70%);
|
||||
@value-color: lighten(@black, 30%);
|
||||
&-content--h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&--item {
|
||||
margin-left: @padding-xl;
|
||||
>span {
|
||||
line-height: 20px;
|
||||
|
||||
color: @title-color;
|
||||
}
|
||||
>p {
|
||||
line-height: 22px;
|
||||
|
||||
margin-top: @padding-xxs;
|
||||
margin-bottom: 0;
|
||||
|
||||
color: @value-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-pagination {
|
||||
margin: @padding-md 0;
|
||||
}
|
||||
.ant-descriptions {
|
||||
.ant-descriptions-item-label {
|
||||
color: @title-color;
|
||||
}
|
||||
.ant-descriptions-item-content {
|
||||
color: @value-color;
|
||||
}
|
||||
.ant-descriptions-row {
|
||||
&:last-child {
|
||||
>td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--scroll {
|
||||
position: relative;
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ant-list-items {
|
||||
min-width: 1000px;
|
||||
}
|
||||
.ant-list-item {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background, border-bottom-color;
|
||||
&:hover {
|
||||
border-bottom-color: lighten(@primary-color, 30%);
|
||||
background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
|
||||
}
|
||||
}
|
||||
&-container {
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
|
||||
width: 30px;
|
||||
|
||||
content: '';
|
||||
transition: box-shadow @animation-duration-slow;
|
||||
pointer-events: none;
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
&.yo-list--ping-left {
|
||||
&::before {
|
||||
box-shadow: inset 10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
&.yo-list--ping-right {
|
||||
&::after {
|
||||
box-shadow: inset -10px 0 8px -8px fade(@black, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
web-react/src/assets/style/default/lib/margin.less
Normal file
68
web-react/src/assets/style/default/lib/margin.less
Normal file
@@ -0,0 +1,68 @@
|
||||
@import (reference) '../extend.less';
|
||||
@margin-padding-position: ~'', ~'-top', ~'-left', ~'-right', ~'-bottom';
|
||||
@margin-padding-position-name: ~'', ~'t', ~'l', ~'r', ~'b';
|
||||
|
||||
.margin-padding (@i) when (@i <=length(@margin-padding-position)) {
|
||||
@position: extract(@margin-padding-position, @i);
|
||||
@name: extract(@margin-padding-position-name, @i);
|
||||
|
||||
.m@{name}-xl {
|
||||
margin@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.m@{name}-lg {
|
||||
margin@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.m@{name}-md {
|
||||
margin@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.m@{name}-sm {
|
||||
margin@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.m@{name}-xs {
|
||||
margin@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.m@{name}-xxs {
|
||||
margin@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xl {
|
||||
padding@{position}: @padding-xl !important;
|
||||
}
|
||||
|
||||
.p@{name}-lg {
|
||||
padding@{position}: @padding-lg !important;
|
||||
}
|
||||
|
||||
.p@{name}-md {
|
||||
padding@{position}: @padding-md !important;
|
||||
}
|
||||
|
||||
.p@{name}-sm {
|
||||
padding@{position}: @padding-sm !important;
|
||||
}
|
||||
|
||||
.p@{name}-xs {
|
||||
padding@{position}: @padding-xs !important;
|
||||
}
|
||||
|
||||
.p@{name}-xxs {
|
||||
padding@{position}: @padding-xxs !important;
|
||||
}
|
||||
|
||||
.m@{name}-none {
|
||||
margin@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.p@{name}-none {
|
||||
padding@{position}: 0 !important;
|
||||
}
|
||||
|
||||
.margin-padding(@i + 1);
|
||||
}
|
||||
|
||||
.margin-padding(1);
|
||||
38
web-react/src/assets/style/default/lib/modal.less
Normal file
38
web-react/src/assets/style/default/lib/modal.less
Normal file
@@ -0,0 +1,38 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-modal-content {
|
||||
background-color: fade(@primary-color, 50%);
|
||||
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.ant-modal-header {
|
||||
padding: @padding-sm @padding-md;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-modal-title {
|
||||
color: fade(@white, 85%);
|
||||
}
|
||||
.ant-modal-body {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: @component-background;
|
||||
}
|
||||
.ant-modal-close {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
color: fade(@white, 75%);
|
||||
background-color: @error-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
.ant-modal-close-x {
|
||||
line-height: 26px;
|
||||
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
8
web-react/src/assets/style/default/lib/page.less
Normal file
8
web-react/src/assets/style/default/lib/page.less
Normal file
@@ -0,0 +1,8 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-page {
|
||||
&--header {
|
||||
padding: @padding-md 0;
|
||||
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
7
web-react/src/assets/style/default/lib/radio.less
Normal file
7
web-react/src/assets/style/default/lib/radio.less
Normal file
@@ -0,0 +1,7 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-radio-button-wrapper-checked {
|
||||
&:not(.ant-radio-button-wrapper-disabled),
|
||||
&:not(.ant-radio-button-wrapper-disabled):hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
6
web-react/src/assets/style/default/lib/select.less
Normal file
6
web-react/src/assets/style/default/lib/select.less
Normal file
@@ -0,0 +1,6 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-select-arrow {
|
||||
.anticon-down {
|
||||
transform: scaleY(.75);
|
||||
}
|
||||
}
|
||||
@@ -228,7 +228,7 @@
|
||||
width: 300px;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @card-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
web-react/src/assets/style/default/lib/text-color.less
Normal file
35
web-react/src/assets/style/default/lib/text-color.less
Normal file
@@ -0,0 +1,35 @@
|
||||
@import (reference) '../extend.less';
|
||||
.text-primary {
|
||||
color: @primary-color;
|
||||
}
|
||||
.text-info {
|
||||
color: @info-color;
|
||||
}
|
||||
.text-success {
|
||||
color: @success-color;
|
||||
}
|
||||
.text-processing {
|
||||
color: @processing-color;
|
||||
}
|
||||
.text-error,
|
||||
.text-danger {
|
||||
color: @error-color;
|
||||
}
|
||||
.text-highlight {
|
||||
color: @highlight-color;
|
||||
}
|
||||
.text-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
.text-gray {
|
||||
color: fade(@black, 50%);
|
||||
}
|
||||
.text-normal {
|
||||
color: fade(@black, 30%);
|
||||
}
|
||||
.text-white {
|
||||
color: @white;
|
||||
}
|
||||
.text-black {
|
||||
color: @black;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@import (reference) '../extend.less';
|
||||
@import (reference) './text-color.less';
|
||||
.yo-tree-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -7,11 +8,11 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-sider {
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
.ant-layout-header {
|
||||
height: @layout-header-height - 20px;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
.header-actions {
|
||||
.ant-input-search {
|
||||
margin: (@layout-header-height - 20px - 32px) / 2 @padding-md;
|
||||
@@ -64,7 +65,7 @@
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background-color: @white;
|
||||
background-color: @component-background;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
@@ -77,6 +78,6 @@
|
||||
}
|
||||
}
|
||||
.ant-tree {
|
||||
color: fade(@black, 60%);
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
29
web-react/src/assets/style/default/lib/upload.less
Normal file
29
web-react/src/assets/style/default/lib/upload.less
Normal file
@@ -0,0 +1,29 @@
|
||||
@import (reference) '../extend.less';
|
||||
.ant-upload-list-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.ant-upload-list-item {
|
||||
height: auto;
|
||||
margin-right: @padding-xs;
|
||||
}
|
||||
.ant-upload-list-item-info {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-xxs @padding-xs;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
.anticon-paper-clip {
|
||||
top: 7.5px;
|
||||
}
|
||||
>span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.ant-upload-list-item-card-actions {
|
||||
position: relative;
|
||||
|
||||
margin-left: @padding-xs;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
46
web-react/src/assets/style/default/lib/visibility.less
Normal file
46
web-react/src/assets/style/default/lib/visibility.less
Normal file
@@ -0,0 +1,46 @@
|
||||
@import (reference) '../extend.less';
|
||||
.hide {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ellipsis-3 {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
47
web-react/src/assets/style/default/lib/width-height.less
Normal file
47
web-react/src/assets/style/default/lib/width-height.less
Normal file
@@ -0,0 +1,47 @@
|
||||
@import (reference) '../extend.less';
|
||||
|
||||
.width-height (@i) when (@i <=20) {
|
||||
|
||||
@n : @i * 50;
|
||||
@px : @n * 1px;
|
||||
|
||||
.w-@{n} {
|
||||
width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-min {
|
||||
min-width: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-max {
|
||||
max-width: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n} {
|
||||
height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-min {
|
||||
min-height: @px !important;
|
||||
}
|
||||
|
||||
.h-@{n}-max {
|
||||
max-height: @px !important;
|
||||
}
|
||||
|
||||
.w-@{n}-p {
|
||||
width: @n * 1% !important;
|
||||
}
|
||||
|
||||
.h-@{n}-p {
|
||||
height: @n * 1% !important;
|
||||
}
|
||||
|
||||
.width-height(@i + 1);
|
||||
}
|
||||
|
||||
.width-height(0);
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
618
web-react/src/assets/style/default/main.less
Normal file
618
web-react/src/assets/style/default/main.less
Normal file
@@ -0,0 +1,618 @@
|
||||
@import (reference) './extend.less';
|
||||
@import (reference) './lib/container.less';
|
||||
@import (reference) './lib/text-color.less';
|
||||
.yo-layout--spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
>div>.ant-spin {
|
||||
max-height: none;
|
||||
@-webkit-keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
@keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
box-sizing: content-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-animation: borderScale 1s infinite ease-in-out;
|
||||
animation: borderScale 1s infinite ease-in-out;
|
||||
|
||||
color: white;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 50%;
|
||||
>p {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.ant-spin-blur {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-header {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background-color;
|
||||
.anticon {
|
||||
font-size: @font-size-base + 6px;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: color;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
.ant-select-auto-complete {
|
||||
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
|
||||
.ant-input-affix-wrapper {
|
||||
border: 0;
|
||||
background-color: fade(@white, 15%);
|
||||
&:focus,
|
||||
&-focused {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
.ant-input {
|
||||
color: fade(@white, 85%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
|
||||
overflow-y: auto;
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
overflow: visible;
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @card-background;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-tab-btn {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-tab-subtitle {
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 150px;
|
||||
|
||||
transform: translateY(1px);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
opacity: .75;
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -.5px;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
content: '';
|
||||
transform: scaleX(.5);
|
||||
|
||||
background: linear-gradient(transparent, fade(@black, 30%), transparent);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
line-height: 28px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav-more {
|
||||
padding: 5px @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
>iframe {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-sider {
|
||||
.ant-menu-inline {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.yo-nav {
|
||||
padding-top: @padding-lg;
|
||||
padding-bottom: @padding-lg;
|
||||
&--row {
|
||||
padding: 1px 0;
|
||||
|
||||
column-gap: @padding-md;
|
||||
column-count: 3;
|
||||
}
|
||||
&--col {
|
||||
break-inside: avoid;
|
||||
}
|
||||
&--sub-item {
|
||||
}
|
||||
&--item-group {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding-top: @padding-xs * 2;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
&--item {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-fast;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
color: @white;
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-sider {
|
||||
height: 100%;
|
||||
|
||||
background-color: @white;
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height + 10px;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex: 0 0 @layout-header-height + 10px;
|
||||
|
||||
height: @layout-header-height + 10px;
|
||||
padding: 0 @padding-md 0 @padding-lg;
|
||||
|
||||
color: @white;
|
||||
box-shadow: none;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
&.ant-layout-sider-collapsed {
|
||||
.logo {
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-sider-nav {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
box-shadow: 2px 0 8px fade(@black, 25%);
|
||||
&--app {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
margin-top: @padding-sm;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
.text-gray();
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-blur {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--left-menu,
|
||||
.yo-layout--right-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
|
||||
background-color: @white;
|
||||
>section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@black, 5%);
|
||||
.anticon {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>section {
|
||||
>.ant-layout-sider {
|
||||
.yo-layout-sider();
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--top-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@layout-header-height: 54px;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
flex: 0 0 @layout-header-height;
|
||||
|
||||
height: @layout-header-height;
|
||||
padding: 0;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@white, 20%);
|
||||
.anticon {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: (@layout-header-height - 40px) / 2 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height - 10px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
height: @layout-header-height 10px;
|
||||
margin: 5px @padding-lg 5px 0;
|
||||
|
||||
color: @white;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
border-bottom: 0;
|
||||
>.ant-menu-submenu {
|
||||
top: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container-fluid {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-user-popover {
|
||||
width: 280px;
|
||||
padding-top: 0;
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
51
web-react/src/assets/style/default/pages/account-base.less
Normal file
51
web-react/src/assets/style/default/pages/account-base.less
Normal file
@@ -0,0 +1,51 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-avatar-info {
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
&--cover {
|
||||
font-size: @font-size-lg * 2;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
opacity: 0;
|
||||
color: @white;
|
||||
background-color: fade(@black, 50%);
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-avatar-cropper {
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.yo-avatar-preview {
|
||||
overflow: hidden;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
42
web-react/src/assets/style/default/pages/home.less
Normal file
42
web-react/src/assets/style/default/pages/home.less
Normal file
@@ -0,0 +1,42 @@
|
||||
@import (reference) '../extend.less';
|
||||
.home-header {
|
||||
margin-bottom: @padding-md;
|
||||
padding: @padding-lg 0;
|
||||
|
||||
background-color: @component-background;
|
||||
}
|
||||
.home-header-row {
|
||||
display: flex;
|
||||
}
|
||||
.home-header-content {
|
||||
margin-left: @padding-lg;
|
||||
h4 {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.home-container {
|
||||
.ant-card-meta-title {
|
||||
font-size: @font-size-base + 1px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
height: 42px;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
.ant-row {
|
||||
line-height: 24px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
web-react/src/assets/style/default/pages/index.less
Normal file
3
web-react/src/assets/style/default/pages/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
@import './login.less';
|
||||
@import './home.less';
|
||||
@import './account-base.less';
|
||||
86
web-react/src/assets/style/default/pages/login.less
Normal file
86
web-react/src/assets/style/default/pages/login.less
Normal file
@@ -0,0 +1,86 @@
|
||||
@import (reference) '../extend.less';
|
||||
.yo-login {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
>img {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: '';
|
||||
|
||||
background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
|
||||
}
|
||||
&--placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.container-sm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.ant-form {
|
||||
width: 300px;
|
||||
padding: @padding-lg;
|
||||
|
||||
border-radius: @border-radius-base + 2px;
|
||||
background: linear-gradient(45deg, @white, fade(@white, 80%));
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-form-item-label {
|
||||
padding: @padding-xs 0 0 !important;
|
||||
|
||||
transition: @animation-duration-base;
|
||||
transform: translate(0);
|
||||
>label {
|
||||
font-weight: normal !important;
|
||||
|
||||
color: fade(@black, 40%);
|
||||
}
|
||||
}
|
||||
&--label {
|
||||
.ant-form-item-label {
|
||||
transform: translate(11px, 28px);
|
||||
}
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
color: fade(@black, 85%);
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: fade(@black, 10%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input:hover,
|
||||
.ant-input:focus,
|
||||
.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-input-affix-wrapper-focused {
|
||||
border-width: 0 0 @border-width-base 0 !important;
|
||||
border-color: @primary-color;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
45
web-react/src/assets/style/default/public.less
Normal file
45
web-react/src/assets/style/default/public.less
Normal file
@@ -0,0 +1,45 @@
|
||||
@import (reference) './extend.less';
|
||||
.yo-map {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
padding: @padding-sm;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @component-background;
|
||||
.amap-icon {
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--search {
|
||||
position: absolute;
|
||||
top: @padding-md;
|
||||
left: @padding-md;
|
||||
z-index: 20;
|
||||
|
||||
width: 25%;
|
||||
min-width: 300px;
|
||||
|
||||
background-color: @component-background;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
}
|
||||
.yo-adorn {
|
||||
&--house-top {
|
||||
height: 65px;
|
||||
|
||||
background: url('~assets/image/adorn/house-top-01.png') no-repeat bottom right;
|
||||
}
|
||||
}
|
||||
a.link-gray {
|
||||
color: fade(@black, 50%);
|
||||
&:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
&:active {
|
||||
color: @link-active-color;
|
||||
}
|
||||
}
|
||||
1
web-react/src/assets/style/default/theme/README.md
Normal file
1
web-react/src/assets/style/default/theme/README.md
Normal file
@@ -0,0 +1 @@
|
||||
/** 在此文件夹中添加控制主题颜色的less文件 **/
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../app.less';
|
||||
@import '../index.less';
|
||||
@primary-color: #007bff;
|
||||
@font-size-base: 13px;
|
||||
@border-radius-base: 0;
|
||||
@@ -1,13 +0,0 @@
|
||||
@import (reference) '../main.less';
|
||||
@layout-header-background: #1c2127;
|
||||
.dark {
|
||||
.main(@nav-background: @layout-header-background;
|
||||
@nav-box-shadow-color: fade(@black, 25%);
|
||||
@nav-scrollbar-background: fade(@white, 50%);
|
||||
@nav-app-color: fade(@white, 35%);
|
||||
@logo-color: @white;
|
||||
@logo-box-shadow: none;
|
||||
@header-action-color: fade(@white, 60%);
|
||||
@header-action-hover-color: @white;
|
||||
@header-action-hover-background: fade(@white, 20%));
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
@import (reference) '../main.less';
|
||||
.light {
|
||||
.main(@nav-background: @white;
|
||||
@nav-box-shadow-color: fade(@black, 5%);
|
||||
@nav-scrollbar-background: fade(@black, 30%);
|
||||
@nav-app-color: fade(@black, 35%);
|
||||
@logo-color: @black;
|
||||
@logo-box-shadow: inset -1px -1px 1px @border-color-split;
|
||||
@header-action-color: fade(@black, 35%);
|
||||
@header-action-hover-color: @icon-color-hover;
|
||||
@header-action-hover-background: fade(@black, 5%));
|
||||
}
|
||||
@@ -1,628 +0,0 @@
|
||||
@import (reference) './extend.less';
|
||||
@import (reference) './lib/container.less';
|
||||
|
||||
.main(@nav-background: @layout-header-background,
|
||||
@nav-box-shadow-color: fade(@black, 25%),
|
||||
@nav-scrollbar-background: fade(@white, 30%),
|
||||
@nav-app-color: fade(@white, 35%),
|
||||
@logo-color: @white,
|
||||
@logo-box-shadow: none,
|
||||
@header-action-color: fade(@white, 60%),
|
||||
@header-action-hover-color: @white,
|
||||
@header-action-hover-background: fade(@white, 20%)) {
|
||||
.yo-layout--spin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: @layout-header-background;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
>div>.ant-spin {
|
||||
max-height: none;
|
||||
@-webkit-keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
@keyframes borderScale {
|
||||
0% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
50% {
|
||||
border: 25px solid transparent;
|
||||
}
|
||||
100% {
|
||||
border: 5px solid white;
|
||||
}
|
||||
}
|
||||
.loader-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
box-sizing: content-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-animation: borderScale 1s infinite ease-in-out;
|
||||
animation: borderScale 1s infinite ease-in-out;
|
||||
|
||||
color: white;
|
||||
border: 5px solid transparent;
|
||||
border-radius: 50%;
|
||||
>p {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
margin-right: -50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
>.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.ant-spin-blur {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-header {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
.header-action {
|
||||
display: inline-block;
|
||||
|
||||
padding: 0 @padding-md;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: background-color;
|
||||
.anticon {
|
||||
font-size: @font-size-base + 6px;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: color;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
.ant-select-auto-complete {
|
||||
margin: (@layout-header-height - 10px - 30px) / 2 @padding-md;
|
||||
.ant-input-affix-wrapper {
|
||||
border: 0;
|
||||
background-color: fade(@white, 15%);
|
||||
&:focus,
|
||||
&-focused {
|
||||
background-color: fade(@white, 30%);
|
||||
}
|
||||
.ant-input {
|
||||
color: fade(@white, 85%);
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-input-suffix {
|
||||
.anticon {
|
||||
color: fade(@white, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
z-index: 10;
|
||||
|
||||
width: 32px + @padding-sm * 2;
|
||||
height: @layout-header-height - 24px;
|
||||
margin: 2px 0;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
.user-container-inner {
|
||||
position: relative;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.user {
|
||||
&--base {
|
||||
line-height: @layout-header-height - 24px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: @layout-header-height - 24px;
|
||||
padding: 0 @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
}
|
||||
&--avatar {
|
||||
box-shadow: 0 0 0 2px @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
position: relative;
|
||||
|
||||
overflow-y: auto;
|
||||
>.yo-tab-external-mount {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
>.ant-tabs {
|
||||
z-index: 5;
|
||||
|
||||
overflow: visible;
|
||||
>.ant-tabs-nav {
|
||||
margin-bottom: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
background-color: @white;
|
||||
box-shadow: 0 2px 12px fade(@black, 8%);
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
.ant-tabs-nav-container {
|
||||
height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-tabs-tab {
|
||||
line-height: 30px;
|
||||
|
||||
height: 30px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
transition: none;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
color: @black;
|
||||
}
|
||||
.ant-tabs-tab-btn {
|
||||
transition: none;
|
||||
}
|
||||
&.ant-tabs-tab-active {
|
||||
border-color: darken(@primary-color, 10%);
|
||||
background-color: @primary-color;
|
||||
.ant-tabs-tab-btn {
|
||||
color: @white;
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
color: fade(@white, 70%);
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-tab-subtitle {
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 150px;
|
||||
|
||||
transform: translateY(1px);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
opacity: .75;
|
||||
}
|
||||
+.ant-tabs-tab {
|
||||
margin-left: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -.5px;
|
||||
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
|
||||
content: '';
|
||||
transform: scaleX(.5);
|
||||
|
||||
background: linear-gradient(transparent, fade(@black, 30%), transparent);
|
||||
}
|
||||
}
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-md * 2 0 @padding-md;
|
||||
}
|
||||
.ant-tabs-tab-unclosable {
|
||||
.ant-dropdown-trigger {
|
||||
padding: 0 @padding-lg 0 @padding-md;
|
||||
}
|
||||
}
|
||||
.ant-tabs-tab-remove {
|
||||
line-height: 28px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.ant-tabs-nav-more {
|
||||
padding: 5px @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.yo-tab-external-mount-content {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
>.yo-tab-external-tabpane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.yo-tab-external-tabpane-inactive {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
>iframe {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-layout-sider {
|
||||
.ant-menu-inline {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
.yo-nav {
|
||||
padding-top: @padding-lg;
|
||||
padding-bottom: @padding-lg;
|
||||
&--row {
|
||||
padding: 1px 0;
|
||||
|
||||
column-gap: @padding-md;
|
||||
column-count: 3;
|
||||
}
|
||||
&--col {
|
||||
break-inside: avoid;
|
||||
}
|
||||
&--sub-item {
|
||||
}
|
||||
&--item-group {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding-top: @padding-xs * 2;
|
||||
|
||||
color: fade(@black, 35%);
|
||||
border: @border-width-base @border-style-base transparent;
|
||||
}
|
||||
&--item {
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-bottom: @padding-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
|
||||
cursor: pointer;
|
||||
transition: @animation-duration-fast;
|
||||
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: @white;
|
||||
&:hover {
|
||||
color: @white;
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout-sider {
|
||||
height: 100%;
|
||||
|
||||
background-color: @nav-background;
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height + 10px;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex: 0 0 @layout-header-height + 10px;
|
||||
|
||||
height: @layout-header-height + 10px;
|
||||
padding: 0 @padding-md 0 @padding-lg;
|
||||
|
||||
color: @logo-color;
|
||||
box-shadow: @logo-box-shadow;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
&.ant-layout-sider-collapsed {
|
||||
.logo {
|
||||
span {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-sider-nav {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
flex: 1 1 100%;
|
||||
|
||||
box-shadow: 2px 0 8px @nav-box-shadow-color;
|
||||
&--app {
|
||||
font-size: @font-size-sm;
|
||||
|
||||
margin-top: @padding-sm;
|
||||
padding: 0 @padding-md;
|
||||
|
||||
color: @nav-app-color;
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
.swiper-scrollbar {
|
||||
transition: @animation-duration-slow;
|
||||
transition-property: opacity;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
.swiper-scrollbar-drag {
|
||||
background-color: @nav-scrollbar-background;
|
||||
}
|
||||
&:hover {
|
||||
.swiper-scrollbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
>.ant-spin-nested-loading {
|
||||
height: 100%;
|
||||
.ant-spin-blur {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--left-menu,
|
||||
.yo-layout--right-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height - 20px;
|
||||
|
||||
z-index: 6;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
padding: 0;
|
||||
|
||||
background-color: @white;
|
||||
>section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
height: @layout-header-height - 20px;
|
||||
.anticon {
|
||||
color: fade(@black, 35%);
|
||||
}
|
||||
&:hover {
|
||||
background-color: fade(@black, 5%);
|
||||
.anticon {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>section {
|
||||
>.ant-layout-sider {
|
||||
.yo-layout-sider();
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-layout--top-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@layout-header-height: 54px;
|
||||
.ant-layout-header {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
z-index: 11;
|
||||
|
||||
flex: 0 0 @layout-header-height;
|
||||
|
||||
height: @layout-header-height;
|
||||
padding: 0;
|
||||
|
||||
background-color: @nav-background;
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
.anticon {
|
||||
color: @header-action-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: @header-action-hover-background;
|
||||
.anticon {
|
||||
color: @header-action-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-container {
|
||||
margin: (@layout-header-height - 40px) / 2 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: @font-size-lg * 1.5;
|
||||
font-weight: 500;
|
||||
line-height: @layout-header-height - 10px;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
height: @layout-header-height 10px;
|
||||
margin: 5px @padding-lg 5px 0;
|
||||
|
||||
color: @logo-color;
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
span {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
}
|
||||
.ant-menu-horizontal {
|
||||
line-height: @layout-header-height;
|
||||
|
||||
border-bottom: 0;
|
||||
>.ant-menu-submenu {
|
||||
top: 0;
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.header-actions {
|
||||
.header-action {
|
||||
line-height: @layout-header-height - 16px;
|
||||
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
.ant-layout-content {
|
||||
.yo-tab-external-mount {
|
||||
>.ant-tabs {
|
||||
>.ant-tabs-bar {
|
||||
.ant-tabs-nav-container {
|
||||
width: @container-width - @padding-md * 2;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--container-fluid {
|
||||
.ant-layout-header {
|
||||
.ant-menu-horizontal {
|
||||
width: 800px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.ant-menu-horizontal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.yo-user-popover {
|
||||
width: 280px;
|
||||
padding-top: 0;
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user