diff --git a/front/package.json b/front/package.json index da4f497fe..ce37b954e 100644 --- a/front/package.json +++ b/front/package.json @@ -1,6 +1,6 @@ { "name": "BFBAN", - "version": "2.9.16", + "version": "2.9.17", "private": true, "scripts": { "serve:development-legacyProvider-windows": "set NODE_OPTIONS=--openssl-legacy-provider && npm run serve:development", diff --git a/front/public/config/themes.json b/front/public/config/themes.json index 61589c17a..63a1a20f1 100644 --- a/front/public/config/themes.json +++ b/front/public/config/themes.json @@ -74,6 +74,18 @@ }, "src": "" }, + { + "type": "local", + "name": "miside", + "img": "public/theme/miside/main.png", + "themeColor": "#cd5951", + "version": "0.2", + "authorInfo": { + "authorName": "cabbagelol", + "authorUpdate": "2024-12-31" + }, + "src": "" + }, { "type": "local", "name": "KarmaBlue", diff --git a/front/public/theme/miside/alert.less b/front/public/theme/miside/alert.less new file mode 100644 index 000000000..339ff43ea --- /dev/null +++ b/front/public/theme/miside/alert.less @@ -0,0 +1,105 @@ +@alert-prefix-cls: ~"@{css-prefix}alert"; +@icon-prefix-cls: ~"@{css-prefix}icon"; +@alert-text-color: @text-color; +@alert-title-color: @title-color; + +.@{alert-prefix-cls}{ + position: relative; + padding: 8px 48px 8px 16px; + border-radius: @border-radius-small; + color: @alert-text-color; + font-size: @font-size-base; + line-height: 16px; + margin-bottom: 10px; + + &&-with-icon{ + padding: 8px 48px 8px 38px; + } + + &-icon { + font-size: @font-size-large; + top: 6px; + left: 12px; + position: absolute; + } + + &-desc { + font-size: @font-size-base; + color: @alert-text-color; + opacity: .5; + line-height: 21px; + display: none; + text-align: justify; + } + + &-success { + border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`; + background-color: fade(@success-color, 10%); + .@{alert-prefix-cls}-icon { + color: @success-color; + } + } + + &-info { + border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 10)`; + background-color: fade(@primary-color, 10%); + .@{alert-prefix-cls}-icon { + color: @primary-color; + } + } + + &-warning { + border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`; + background-color: fade(@warning-color, 10%); + .@{alert-prefix-cls}-icon { + color: @warning-color; + } + } + + &-error { + border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 20)` !important; + background-color: fade(@error-color, 10%); + .@{alert-prefix-cls}-icon { + color: @error-color; + } + } + + &-close { + .content-close(-3px); + } + + &-with-desc { + padding: 16px; + position: relative; + border-radius: @border-radius-small; + margin-bottom: 10px; + color: @alert-text-color; + line-height: 1.5; + } + + &-with-desc&-with-icon{ + padding: 16px 16px 16px 69px; + } + + &-with-desc &-desc{ + display: block; + } + + &-with-desc &-message { + font-size: @font-size-large; + color: @alert-title-color; + display: block; + margin-bottom: 4px; + } + + &-with-desc &-icon { + top: 50%; + left: 24px; + margin-top: -24px; + font-size: 28px; + } + + &-with-banner{ + border-radius: 0; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/button.less b/front/public/theme/miside/button.less new file mode 100644 index 000000000..471d181e1 --- /dev/null +++ b/front/public/theme/miside/button.less @@ -0,0 +1,201 @@ +@btn-prefix-cls: ~"@{css-prefix}btn"; + +.@{btn-prefix-cls} { + .btn; + .btn-default; + + &-long{ + width: 100%; + } + + & > .ivu-icon + span, & > span + .ivu-icon{ + margin-left: 4px; + } + + &-primary { + .btn-primary; + color: @text-color; + + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) { + border-right-color: @btn-group-border; + border-left-color: @btn-group-border; + } + + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child { + &:not(:last-child) { + border-right-color: @btn-group-border; + &[disabled] { + border-right-color: @btn-default-border; + } + } + } + + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child), + .@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} { + border-left-color: @btn-group-border; + &[disabled] { + border-left-color: @btn-default-border; + } + } + + .@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) { + border-top-color: @btn-group-border; + border-bottom-color: @btn-group-border; + } + + .@{btn-prefix-cls}-group-vertical &:first-child { + &:not(:last-child) { + border-bottom-color: @btn-group-border; + &[disabled] { + border-top-color: @btn-default-border; + } + } + } + + .@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child), + .@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} { + border-top-color: @btn-group-border; + &[disabled] { + border-bottom-color: @btn-default-border; + } + } + } + + &-dashed{ + .btn-dashed; + } + + &-text{ + .btn-text; + } + + &-success { + .btn-color(@success-color); + } + + &-warning { + .btn-color(@warning-color); + } + + &-error { + .btn-color(@error-color); + } + + &-info { + .btn-color(@info-color); + } + + &-circle, + &-circle-outline { + .btn-circle(@btn-prefix-cls); + } + + &:before { + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; + background: #fff; + opacity: 0.35; + content: ''; + border-radius: inherit; + z-index: 1; + transition: opacity @transition-time; + pointer-events: none; + display: none; + } + + &&-loading { + pointer-events: none; + position: relative; + + &:before { + display: block; + } + } + + &-group { + .btn-group(@btn-prefix-cls); + } + + &-group-vertical { + .btn-group-vertical(@btn-prefix-cls); + } + + // The new ghost in 3.0 + &-ghost{ + color: #fff; + background: transparent; + &:hover{ + background: transparent; + } + } + &-ghost, &-dashed, &-ghost&-default{ + color: #fff; + border-color: #fff; + background-color: transparent !important; + + &:hover{ + color: tint(@primary-color, 20%); + border-color: tint(@primary-color, 20%); + } + } + &-ghost&-primary{ + color: @primary-color; + &:hover{ + color: tint(@primary-color, 20%); + background: fade(tint(@primary-color, 95%), 50%); + } + } + &-ghost&-info{ + color: @info-color; + &:hover{ + color: tint(@info-color, 20%); + background: fade(tint(@info-color, 95%), 50%); + } + } + &-ghost&-success{ + color: @success-color; + &:hover{ + color: tint(@success-color, 20%); + background: fade(tint(@success-color, 95%), 50%); + } + } + &-ghost&-warning{ + color: @warning-color; + &:hover{ + color: tint(@warning-color, 20%); + background: fade(tint(@warning-color, 95%), 50%); + } + } + &-ghost&-error{ + color: @error-color; + &:hover{ + color: tint(@error-color, 20%); + background: fade(tint(@error-color, 95%), 50%); + } + } + + &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{ + background: transparent !important; + color: fade(#fff, 25%); + border-color: @btn-disable-border; + } + &-ghost&-text[disabled]{ + background: transparent; + color: fade(#fff, 25%); + } +} + +a.@{btn-prefix-cls} { + padding-top: 0.1px; + line-height: @btn-height-base - 2px; + + &-large { + line-height: @btn-height-large - 2px; + } + &-small { + line-height: @btn-height-small - 2px; + } +} diff --git a/front/public/theme/miside/card.less b/front/public/theme/miside/card.less new file mode 100644 index 000000000..edfc02b5d --- /dev/null +++ b/front/public/theme/miside/card.less @@ -0,0 +1,47 @@ +@card-background: tint(@primary-color, 95%); + +.@{tabs-prefix-cls} { + color: @text-color; + + &&-card > &-bar &-tab { + border: 1px solid transparent; + background: @card-background !important; + } + + &&-card > &-bar &-tab-active { + background: transparent; + border-color: @card-background; + color: @card-background; + } +} + +.@{select-dropdown-prefix-cls} { + background-color: @card-background !important; +} + +@card-prefix-cls: ~"@{css-prefix}card"; + +.@{card-prefix-cls} { + background: @card-background; + + &:hover { + border-color: #000; + } +} + +@tag-prefix-cls: ~"@{css-prefix}tag"; + +.@{tag-prefix-cls} { + background: @background-color-base; + + &-dot { + background: #2d2c2c !important; + } +} + +.@{modal-prefix-cls} { + &-content { + position: relative; + background-color: #373838 !important; + } +} diff --git a/front/public/theme/miside/custom.less b/front/public/theme/miside/custom.less new file mode 100644 index 000000000..88b28b7e9 --- /dev/null +++ b/front/public/theme/miside/custom.less @@ -0,0 +1,239 @@ +// Color +@primary-color : #cd5951; +@info-color : #3f3959; +@success-color : #19be6b; +@processing-color : #ca9f9e; +@warning-color : #ff9900; +@error-color : #ed4014; +@normal-color : #000; +@link-color : @text-color; +@link-hover-color : tint(@link-color, 3%); +@link-active-color : shade(@link-color, 1%); +@selected-color : fade(@primary-color, 10%); +@tooltip-color : #fff; +@subsidiary-color : #808695; +@rate-star-color : #f5a623; +@white: #fff; +@black: #535353; + +// Base +@body-background : transparent; +@component-background : transparent; +@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +@code-family : Consolas,Menlo,Courier,monospace; +@title-color : shade(@primary-color, 90%); +@text-color : shade(@primary-color, 90%); +@text-color-secondary: fade(@black, 45%); +@heading-color: fade(#000, 85%); +@heading-color-dark: fade(#000, 100%); +@font-size-base : 14px; +@font-size-small : 12px; +@font-size-large : @font-size-base + 2px; +@line-height-base : 1.5; +@line-height-computed : floor((@font-size-base * @line-height-base)); +@border-radius-base : 6px; +@border-radius-small : 4px; +@cursor-disabled : not-allowed; + +// vertical paddings +@padding-lg: 24px; // containers +@padding-md: 16px; // small containers and buttons +@padding-sm: 12px; // Form controls and items +@padding-xs: 8px; // small items + +// Border color +@border-color-base : #e5cfcd; // outside +@border-color-split : #e5cfcd; // inside +@border-width-base : 1px; // width of the border for a component +@border-style-base : solid; // style of a components border + +// Background color +@background-color-base : @primary-color; // base +@background-color-select-hover: @input-disabled-bg; +@tooltip-bg : rgba(70, 76, 91, .9); +@head-bg : @primary-color; +@table-thead-bg : tint(@primary-color, 50%); +@table-td-stripe-bg : #555; +@table-td-hover-bg : #555; +@table-td-highlight-bg : #555; +@menu-dark-title : #515a6e; +@menu-dark-active-bg : #363e4f; +@menu-dark-subsidiary-color : rgba(255,255,255,.7); +@menu-dark-group-title-color : rgba(255,255,255,.36); +@date-picker-cell-hover-bg : tint(@primary-color, 28%); + +// Shadow +@shadow-color : rgba(0, 0, 0, .2); +@shadow-base : @shadow-down; +@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1); +@shadow-up : 0 -1px 6px @shadow-color; +@shadow-down : 0 1px 6px @shadow-color; +@shadow-left : -1px 0 6px @shadow-color; +@shadow-right : 1px 0 6px @shadow-color; + +// Button +@btn-height-base : 32px; +@btn-height-large : 40px; +@btn-height-small : 24px; + +@btn-padding-base : 0 @padding-md - 1px; +@btn-padding-large : @btn-padding-base; +@btn-padding-small : 0 @padding-xs - 1px; + +@btn-font-weight : normal; +@btn-padding-base-icon : 5px 15px 6px; +@btn-padding-large-icon : 6px 15px 6px 15px; +@btn-padding-small-icon : 1px 7px 2px; +@btn-font-size : @font-size-base; +@btn-font-size-large : @font-size-large; +@btn-font-size-small : @font-size-base; +@btn-border-radius : 4px; +@btn-border-radius-small: 3px; +@btn-group-border : shade(@primary-color, 5%); + +@btn-disable-color : rgba(242, 242, 242, 0.5); +@btn-disable-bg : @background-color-base; +@btn-disable-border : @border-color-base; + +@btn-default-color : @text-color; +@btn-default-bg : #fff; +@btn-default-border : @border-color-base; + +@btn-primary-color : #fff; +@btn-primary-bg : @primary-color; + +@btn-ghost-color : @text-color; +@btn-ghost-bg : #fff; +@btn-ghost-border : @border-color-base; + +@btn-circle-size : @btn-height-base; +@btn-circle-size-large : @btn-height-large; +@btn-circle-size-small : @btn-height-small; + +@btn-square-size : @btn-height-base; +@btn-square-size-large : @btn-height-large; +@btn-square-size-small : @btn-height-small; + +// Layout and Grid +@grid-columns : 24; +@grid-gutter-width : 0; +@layout-body-background : shade(@primary-color, 88%); +@layout-header-background : shade(@primary-color, 88%); +@layout-header-height : 64px; +@layout-header-padding : 0 50px; +@layout-footer-padding : 24px 50px; +@layout-footer-background : @layout-body-background; +@layout-sider-background : @layout-header-background; +@layout-trigger-height : 48px; +@layout-trigger-color : #fff; +@layout-zero-trigger-width : 36px; +@layout-zero-trigger-height : 42px; + +// Legend +@legend-color : #999; + +// Input +@input-height-base : 32px; +@input-height-large : 40px; +@input-height-small : 24px; + +@input-padding-horizontal : 7px; +@input-padding-vertical-base : 4px; +@input-padding-vertical-small: 1px; +@input-padding-vertical-large: 6px; + +@input-placeholder-color : @btn-disable-color; +@input-color : @text-color; +@input-border-color : @border-color-base; +@input-bg : tint(@primary-color, 90%); +@input-group-bg : @input-bg; + +@input-hover-border-color : @primary-color; +@input-focus-border-color : @primary-color; +@input-disabled-bg : #383838; + +// Tag +@tag-font-size : 12px; + +// Media queries breakpoints +// Extra small screen / phone +@screen-xs : 480px; +@screen-xs-min : @screen-xs; +@screen-xs-max : (@screen-xs-min - 1); + +// Small screen / tablet +@screen-sm : 576px; +@screen-sm-min : @screen-sm; +@screen-sm-max : (@screen-sm-min - 1); + +// Medium screen / desktop +@screen-md : 768px; +@screen-md-min : @screen-md; +@screen-md-max : (@screen-md-min - 1); + +// Large screen / wide desktop +@screen-lg : 992px; +@screen-lg-min : @screen-lg; +@screen-lg-max : (@screen-lg-min - 1); + +// Extra large screen / full hd +@screen-xl : 1200px; +@screen-xl-min : @screen-xl; +@screen-xl-max : (@screen-xl-min - 1); + +// Extra extra large screen / large descktop +@screen-xxl : 1600px; +@screen-xxl-min : @screen-xxl; +@screen-xxl-max : (@screen-xxl-min - 1); + +// Z-index +@zindex-spin : 8; +@zindex-affix : 10; +@zindex-back-top : 10; +@zindex-select : 900; +@zindex-modal : 1000; +@zindex-drawer : 1000; +@zindex-message : 1010; +@zindex-notification : 1010; +@zindex-tooltip : 1060; +@zindex-transfer : 1060; +@zindex-loading-bar : 2000; +@zindex-spin-fullscreen : 2010; + +// Animation +@animation-time : .3s; +@animation-time-quick : .15s; +@transition-time : .2s; +@ease-in-out : ease-in-out; + +// Slider +@slider-color : tint(@primary-color, 20%); +@slider-height : 4px; +@slider-margin : 16px 0; +@slider-button-wrap-size : 18px; +@slider-button-wrap-offset : -5px; +@slider-disabled-color : #ccc; + +// Avatar +@avatar-size-base: 32px; +@avatar-size-lg: 40px; +@avatar-size-sm: 24px; +@avatar-font-size-base: 18px; +@avatar-font-size-lg: 24px; +@avatar-font-size-sm: 14px; +@avatar-bg: #ccc; +@avatar-color: #fff; +@avatar-border-radius: @border-radius-small; + +// Anchor +@anchor-border-width: 2px; + +// List +// --- +@list-header-background: transparent; +@list-footer-background: transparent; +@list-empty-text-padding: @padding-md; +@list-item-padding: @padding-sm 0; +@list-item-meta-margin-bottom: @padding-md; +@list-item-meta-avatar-margin-right: @padding-md; +@list-item-meta-title-margin-bottom: @padding-sm; diff --git a/front/public/theme/miside/divider.less b/front/public/theme/miside/divider.less new file mode 100644 index 000000000..1e53f0c39 --- /dev/null +++ b/front/public/theme/miside/divider.less @@ -0,0 +1,109 @@ +@divider-prefix-cls: ~"@{css-prefix}divider"; + +.@{divider-prefix-cls} { + .reset-component; + background: @border-color-split; + + &, // for compatiable + &-vertical { + margin: 0 8px; + display: inline-block; + height: 0.9em; + width: 1px; + vertical-align: middle; + position: relative; + top: -0.06em; + } + &-horizontal { + display: block; + height: 1px; + width: 100%; + min-width: 100%; + margin: 24px 0; + clear: both; + } + &-horizontal&-with-text-center, + &-horizontal&-with-text-left, + &-horizontal&-with-text-right { + display: table; + white-space: nowrap; + text-align: center; + background: transparent; + font-weight: 500; + color: @title-color; + font-size: @font-size-large; + margin: 16px 0; + &:before, + &:after { + content: ''; + display: table-cell; + // Chrome 91 #913 + //position: relative; + top: 50%; + width: 50%; + border-top: 1px solid @border-color-split; + transform: translateY(50%); + } + } + + &-horizontal&-small&-with-text-center, + &-horizontal&-small&-with-text-left, + &-horizontal&-small&-with-text-right{ + font-size: @font-size-base; + margin: 8px 0; + } + + &-horizontal&-with-text-left, + &-horizontal&-with-text-right { + .@{divider-prefix-cls}-inner-text { + display: inline-block; + padding: 0 10px; + } + } + + &-horizontal&-with-text-left { + &:before { + top: 50%; + width: 5%; + } + &:after { + top: 50%; + width: 95%; + } + } + + &-horizontal&-with-text-right { + &:before { + top: 50%; + width: 95%; + } + &:after { + top: 50%; + width: 5%; + } + } + + &-inner-text { + display: inline-block; + padding: 0 24px; + } + + &-dashed { + background: none; + border-top: 1px dashed @border-color-split; + } + &-horizontal&-with-text&-dashed, + &-horizontal&-with-text-left&-dashed, + &-horizontal&-with-text-right&-dashed { + border-top: 0; + &:before, + &:after { + border-style: dashed none none; + } + } + &-plain&-with-text, &-plain&-with-text-left, &-plain&-with-text-right { + color: @text-color; + font-weight: normal; + font-size: @font-size-base; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/dropdown.less b/front/public/theme/miside/dropdown.less new file mode 100644 index 000000000..adc55da24 --- /dev/null +++ b/front/public/theme/miside/dropdown.less @@ -0,0 +1,37 @@ +@dropdown-prefix-cls: ~"@{css-prefix}dropdown"; +@dropdown-item-prefix-cls: ~"@{dropdown-prefix-cls}-item"; + +.@{dropdown-prefix-cls} { + display: inline-block; + + .@{select-dropdown-prefix-cls} { + overflow: visible; + max-height: none; + } + .@{dropdown-prefix-cls} { + width: 100%; + } + + &-rel{ + //display: inline-block; + position: relative; + &-user-select-none{ + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + } + + &-menu{ + min-width: 100px; + } + + &-transfer{ + width: auto; + } + &-item-selected, &-item&-item-selected:hover{ + background: ~`colorPalette("@{primary-color}", 1)`; + } +} + +.select-item(@dropdown-prefix-cls, @dropdown-item-prefix-cls); \ No newline at end of file diff --git a/front/public/theme/miside/images/miside-background.png b/front/public/theme/miside/images/miside-background.png new file mode 100644 index 000000000..fc9878a2d Binary files /dev/null and b/front/public/theme/miside/images/miside-background.png differ diff --git a/front/public/theme/miside/index.less b/front/public/theme/miside/index.less new file mode 100644 index 000000000..cadb62217 --- /dev/null +++ b/front/public/theme/miside/index.less @@ -0,0 +1,33 @@ +@import '~view-design/src/styles/index.less'; + +@import "./mixins/index"; +@import "./mixins/input"; + +@import "../quill/quill.bfban"; + +@import 'pages/body'; +@import "pages/edit"; +@import "pages/detail"; +@import "pages/html"; +@import "pages/cropper"; + +@import "card"; +@import "custom.less"; +@import "input"; +@import "select"; +@import "radio"; +@import "spin"; +@import "button"; +@import "select-dropdown"; +@import "steps"; +@import "table"; +@import "list"; +@import "split"; +@import "time"; +@import "poptip"; +@import "tag"; +@import "alert"; +@import "menu"; +@import "divider"; +@import "dropdown"; +@import "page"; diff --git a/front/public/theme/miside/input.less b/front/public/theme/miside/input.less new file mode 100644 index 000000000..92cac9ee7 --- /dev/null +++ b/front/public/theme/miside/input.less @@ -0,0 +1,223 @@ +@input-prefix-cls: ~"@{css-prefix}input"; + +.@{input-prefix-cls} { + .input; + &-wrapper{ + display: inline-block; + width: 100%; + position: relative; + vertical-align: middle; + + // #2149 & #2219 + line-height: normal; + } + &-icon { + width: 32px; + height: @input-height-base; + line-height: @input-height-base; + font-size: 16px; + text-align: center; + color: @subsidiary-color; + position: absolute; + right: 0; + z-index: 3; + } + &-hide-icon &-icon{ + display: none; + } + &-icon-validate{ + display: none; + } + + &-icon-clear{ + display: none; + } + + &-wrapper:hover{ + .@{input-prefix-cls}-icon-clear{ + display: inline-block; + } + } + + &-icon-normal + &{ + padding-right: 32px; + } + // #554 + &-hide-icon &-icon-normal + &{ + padding-right: @input-padding-horizontal; + } + + &-wrapper-large &-icon{ + font-size: 18px; + height: @input-height-large; + line-height: @input-height-large; + } + &-wrapper-small &-icon{ + width: 24px; + font-size: 14px; + height: @input-height-small; + line-height: @input-height-small; + + //+ .@{input-prefix-cls} { + // padding-right: 24px; + //} + } + + // prefix & suffix + &-prefix, &-suffix{ + width: 32px; + height: 100%; + text-align: center; + position: absolute; + left: 0; + top: 0; + z-index: 1; + i{ + font-size: 16px; + line-height: @input-height-base; + color: @subsidiary-color; + } + } + &-suffix{ + left: auto; + right: 0; + } + &-wrapper-small &-prefix, &-wrapper-small &-suffix{ + i{ + font-size: 14px; + line-height: @input-height-small; + } + } + &-wrapper-large &-prefix, &-wrapper-large &-suffix{ + i{ + font-size: 18px; + line-height: @input-height-large; + } + } + + &-with-prefix{ + padding-left: 32px; + } + &-with-suffix{ + padding-right: 32px; + } + + // search + &-search{ + cursor: pointer; + padding: 0 16px !important; + background: @primary-color !important; + color: #fff !important; + border-color: @primary-color !important; + transition: all @transition-time @ease-in-out; + position: relative; + z-index: 2; + + i{ + font-size: 16px; + } + + &:hover{ + background: tint(@primary-color, 20%) !important; + border-color: tint(@primary-color, 20%) !important; + } + &:active{ + background: shade(@primary-color, 5%) !important; + border-color: shade(@primary-color, 5%) !important; + } + + &-icon{ + cursor: pointer; + transition: color @transition-time @ease-in-out; + &:hover{ + color: inherit; + } + } + + &:before{ + content: ''; + display: block; + width: 1px; + position: absolute; + top: -1px; + bottom: -1px; + left: -1px; + background: inherit; + } + } + &-wrapper-small &-search{ + padding: 0 12px !important; + i{ + font-size: 14px; + } + } + &-wrapper-large &-search{ + padding: 0 20px !important; + i{ + font-size: 18px; + } + } + &-with-search{ + &:hover{ + .@{input-prefix-cls} { + border-color: tint(@primary-color, 20%); + } + } + } + + &-word-count{ + text-align: center; + position: absolute; + right: @input-padding-horizontal; + top: 2px; + bottom: 2px; + padding-left: @input-padding-horizontal; + background: transparent !important; + z-index: 1; + display: inline-flex; + align-items: center; + color: @subsidiary-color; + font-size: @font-size-small; + } + &-wrapper-disabled &-word-count{ + background: @input-disabled-bg; + } + &-type-textarea &-word-count{ + align-items: flex-end; + top: auto; + } +} + +.@{input-prefix-cls}-group{ + .input-group(~"@{input-prefix-cls}"); +} + +.@{form-item-prefix-cls}-error{ + .@{input-prefix-cls}{ + .input-error; + &-icon{ + color: @error-color; + } + } + .@{input-prefix-cls}-group{ + .input-group-error; + } + .@{transfer-prefix-cls} { + .@{input-prefix-cls} { + .input; + &-icon{ + color: @subsidiary-color; + } + } + } +} +.@{form-item-prefix-cls}-validating{ + .@{input-prefix-cls}{ + &-icon-validate{ + display: inline-block; + } + &-icon + .@{input-prefix-cls}{ + padding-right: 32px; + } + } +} \ No newline at end of file diff --git a/front/public/theme/miside/list.less b/front/public/theme/miside/list.less new file mode 100644 index 000000000..abd55cd14 --- /dev/null +++ b/front/public/theme/miside/list.less @@ -0,0 +1,269 @@ +@list-prefix-cls: ~"@{css-prefix}list"; +@text-color-secondary: @subsidiary-color; + +.@{list-prefix-cls} { + position: relative; + + &-items { + margin: 0; + padding: 0; + list-style: none; + } + + &-item{ + background-color: #212121; + display: flex; + align-items: center; + padding: @list-item-padding; + + &-content { + color: @text-color; + } + + &-meta{ + display: flex; + flex: 1; + align-items: flex-start; + font-size: 0; + + &-avatar { + margin-right: @list-item-meta-avatar-margin-right; + } + &-content { + flex: 1 0; + } + &-title { + font-weight: 500; + margin-bottom: 4px; + color: @text-color; + font-size: @font-size-base; + line-height: 22px; + > a { + color: @text-color; + transition: all @transition-time; + &:hover { + color: @primary-color; + } + } + } + &-description { + color: @text-color-secondary; + font-size: @font-size-base; + line-height: 22px; + } + } + + &-action { + flex: 0 0 auto; + margin-left: 48px; + padding: 0; + font-size: 0; + list-style: none; + & > li { + position: relative; + display: inline-block; + padding: 0 8px; + color: @text-color-secondary; + font-size: @font-size-base; + line-height: 22px; + text-align: center; + cursor: pointer; + + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + width: 1px; + height: 14px; + margin-top: -7px; + background-color: @border-color-split; + } + } + & > li:first-child { + padding-left: 0; + } + & > li:last-child { + &:after{ + display: none; + } + } + &-split { + + } + } + } + + &-header { + background: @list-header-background; + } + + &-footer { + background: @list-footer-background; + } + + &-header, + &-footer { + padding-top: 12px; + padding-bottom: 12px; + } + + &-split &-item { + border-bottom: 1px solid @border-color-split; + &:last-child { + border-bottom: none; + } + } + + &-split &-header { + border-bottom: 1px solid @border-color-split; + } + &-split &-footer{ + border-top: 1px solid @border-color-split; + } + + &-large &-item { + padding-top: 16px; + padding-bottom: 16px; + } + + &-small &-item { + padding-top: 8px; + padding-bottom: 8px; + } + + &-vertical &-item { + align-items: initial; + + &-main { + display: block; + flex: 1; + } + + &-extra { + margin-left: 40px; + } + + &-meta { + margin-bottom: @list-item-meta-margin-bottom; + + &-title { + margin-bottom: @list-item-meta-title-margin-bottom; + color: @heading-color; + font-size: @font-size-large; + line-height: 24px; + } + } + + &-action { + margin-top: @padding-md; + margin-left: auto; + + > li { + padding: 0 16px; + &:first-child { + padding-left: 0; + } + } + } + } + + // without flex + &-item-no-flex { + display: block; + } + + // Horizontal + &:not(.@{list-prefix-cls}-vertical) { + .@{list-prefix-cls}-item-no-flex { + .@{list-prefix-cls}-item-action { + float: right; + } + } + } +} + +.@{list-prefix-cls}-bordered { + border: 1px solid @border-color-base; + border-radius: @border-radius-base; + .@{list-prefix-cls}-header { + padding-right: 24px; + padding-left: 24px; + } + + .@{list-prefix-cls}-footer { + padding-right: 24px; + padding-left: 24px; + } + + .@{list-prefix-cls}-item { + padding-right: 24px; + padding-left: 24px; + border-bottom: 1px solid @border-color-split; + } + + .@{list-prefix-cls}-pagination { + margin: 16px 24px; + } + + &.@{list-prefix-cls}-small { + .@{list-prefix-cls}-item { + padding-right: 16px; + padding-left: 16px; + } + .@{list-prefix-cls}-header, + .@{list-prefix-cls}-footer { + padding: 8px 16px; + } + } + + &.@{list-prefix-cls}-large { + .@{list-prefix-cls}-header, + .@{list-prefix-cls}-footer { + padding: 16px 24px; + } + } +} + +// responsive + +@media screen and (max-width: @screen-md) { + .@{list-prefix-cls} { + &-item { + &-action { + margin-left: 24px; + } + } + } + + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + &-extra { + margin-left: 24px; + } + } + } +} + +@media screen and (max-width: @screen-sm) { + .@{list-prefix-cls} { + &-item { + flex-wrap: wrap; + &-action { + margin-left: 12px; + } + } + } + + .@{list-prefix-cls}-vertical { + .@{list-prefix-cls}-item { + flex-wrap: wrap-reverse; + &-main { + min-width: 220px; + } + &-extra { + margin: auto auto 16px; + } + } + } +} diff --git a/front/public/theme/miside/menu.less b/front/public/theme/miside/menu.less new file mode 100644 index 000000000..2b278d936 --- /dev/null +++ b/front/public/theme/miside/menu.less @@ -0,0 +1,274 @@ +@menu-prefix-cls: ~"@{css-prefix}menu"; +@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item"; + +.@{menu-prefix-cls} { + display: block; + margin: 0; + padding: 0; + outline: none; + list-style: none; + color: @text-color; + font-size: @font-size-base; + position: relative; + z-index: @zindex-select; + + &-horizontal{ + height: 60px; + line-height: 60px; + + &.@{menu-prefix-cls}-light{ + &:after{ + content: ''; + display: block; + width: 100%; + height: 1px; + background: @border-color-base; + position: absolute; + bottom: 0; + left: 0; + } + } + } + &-vertical{ + &.@{menu-prefix-cls}-light{ + &:after{ + content: ''; + display: block; + width: 1px; + height: 100%; + background: @border-color-base; + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: 1; + } + } + } + + &-light{ + background: initial; + } + &-dark{ + background: @menu-dark-title; + } + &-primary{ + background: @primary-color; + } + + &-item{ + display: block; + outline: none; + list-style: none; + font-size: @font-size-base; + position: relative; + z-index: 1; + cursor: pointer; + transition: all @transition-time @ease-in-out; + } + a&-item{ + color: inherit; + &:hover, &:active{ + color: inherit; + } + } + &-item > i{ + margin-right: 6px; + } + &-submenu-title > i, &-submenu-title span > i{ + margin-right: 8px; + } + + &-horizontal &-item, + &-horizontal &-submenu + { + float: left; + padding: 0 20px; + position: relative; + cursor: pointer; + z-index: 3; + transition: all @transition-time @ease-in-out; + } + + &-light&-horizontal &-item, &-light&-horizontal &-submenu{ + height: inherit; + line-height: inherit; + border-bottom: 2px solid transparent; + color: @text-color; + &-active, &:hover{ + color: @primary-color; + border-bottom: 2px solid @primary-color; + } + } + + &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{ + color: @menu-dark-subsidiary-color; + &-active, &:hover{ + color: #fff; + } + } + + &-primary&-horizontal &-item, &-primary&-horizontal &-submenu{ + color: #fff; + &-active, &:hover{ + //background: @link-active-color; + } + } + + &-horizontal &-submenu .@{select-dropdown-prefix-cls} { + min-width: 100%; + width: auto; + max-height: none; + .@{menu-prefix-cls}-item{ + height: auto; + line-height: normal; + border-bottom: 0; + float: none; + } + } + + &-item-group{ + line-height: normal; + &-title { + height: 30px; + line-height: 30px; + padding-left: 8px; + font-size: @font-size-small; + color: @legend-color; + } + + & > ul{ + padding: 0 !important; + list-style: none !important; + } + } + + // vertical + &-vertical &-item, + &-vertical &-submenu-title + { + padding: 14px 24px; + position: relative; + cursor: pointer; + z-index: 1; + transition: all @transition-time @ease-in-out; + + &:hover{ + //background: @background-color-select-hover; + color: @primary-color; + } + } + + &-vertical &-submenu-title-icon{ + // #5592 支持自定义图标 size 后，换一种位置 + //float: right; + //position: relative; + //top: 4px; + position: absolute; + top: 50%; + right: 24px; + transform: translateY(-50%); + } + &-submenu-title-icon { + transition: transform @transition-time @ease-in-out; + } + &-horizontal &-opened > * > &-submenu-title-icon{ + transform: rotate(180deg); + } + &-vertical &-opened > * > &-submenu-title-icon{ + transform: translateY(-50%) rotate(180deg); + } + + &-vertical &-submenu{ + &-nested{ + padding-left: 20px; + } + .@{menu-prefix-cls}-item{ + padding-left: 43px; + } + } + &-vertical &-item-group{ + &-title{ + height: 48px; + line-height: 48px; + font-size: @font-size-base; + padding-left: 28px; + } + } + &-dark&-vertical &-item-group{ + &-title{ + color: @menu-dark-group-title-color; + } + } + + &-light&-vertical &-item{ + &-active:not(.@{menu-prefix-cls}-submenu){ + color: @title-color; + background: ~`colorPalette("@{primary-color}", 8)`; + z-index: 2; + &:after{ + content: ''; + display: block; + width: 2px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + background: @primary-color; + } + } + } + + &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{ + color: @menu-dark-subsidiary-color; + &-active:not(.@{menu-prefix-cls}-submenu), + &-active:not(.@{menu-prefix-cls}-submenu):hover + { + background: @menu-dark-active-bg; + } + &:hover{ + color: #fff; + background: @menu-dark-title; + } + &-active:not(.@{menu-prefix-cls}-submenu){ + color: @primary-color; + //border-right: 2px solid @primary-color; + } + } + &-dark&-vertical &-submenu &-item{ + &:hover{ + color: #fff; + background: transparent !important; + } + &-active,&-active:hover{ + border-right: none; + color: #fff; + background: @primary-color !important; + } + } + // &-dark&-vertical &-item-active &-submenu-title{ + // color: #fff; + // } + &-dark&-vertical &-child-item-active > &-submenu-title{ + color: #fff; + } + + &-dark&-vertical &-opened{ + background: @menu-dark-active-bg; + .@{menu-prefix-cls}-submenu-title{ + background: @menu-dark-title; + } + + .@{menu-prefix-cls}-submenu-has-parent-submenu{ + .@{menu-prefix-cls}-submenu-title{ + background: transparent; + } + } + } +} +.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); + +.@{menu-dropdown-item-prefix-cls} { + padding: 7px 16px 8px; + font-size: @font-size-base !important; +} \ No newline at end of file diff --git a/front/public/theme/miside/mixins/checkbox.css b/front/public/theme/miside/mixins/checkbox.css new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/mixins/checkbox.css.map b/front/public/theme/miside/mixins/checkbox.css.map new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/mixins/checkbox.less b/front/public/theme/miside/mixins/checkbox.less new file mode 100644 index 000000000..8578a3a8b --- /dev/null +++ b/front/public/theme/miside/mixins/checkbox.less @@ -0,0 +1,292 @@ +.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") { + @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner"; + + .@{checkbox-prefix-cls}-focus { + box-shadow: 0 0 0 2px fade(@primary-color, 20%); + z-index: 1; + } + + // 普通状态 + .@{checkbox-prefix-cls} { + display: inline-block; + vertical-align: middle; + white-space: nowrap; + cursor: pointer; + //outline: none; + line-height: 1; + position: relative; + + &-disabled{ + cursor: @cursor-disabled; + } + + &:hover { + .@{checkbox-inner-prefix-cls} { + border-color: #bcbcbc; + } + } + + &-inner { + display: inline-block; + width: 16px; + height: 16px; + position: relative; + top: 0; + left: 0; + border: 1px solid @border-color-base; + border-radius: 2px; + background-color: initial; + transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; + + &:after { + content: ''; + display: table; + width: 4px; + height: 8px; + position: absolute; + top: 1px; + left: 4px; + border: 2px solid #fff; + border-top: 0; + border-left: 0; + transform: rotate(45deg) scale(0); + transition: all @transition-time @ease-in-out; + } + } + &-large{ + & .@{checkbox-inner-prefix-cls} { + width: 18px; + height: 18px; + &:after{ + width: 5px; + height: 9px; + } + } + } + &-small{ + font-size: @font-size-base; + & .@{checkbox-inner-prefix-cls} { + width: 14px; + height: 14px; + &:after{ + top: 0; + left: 3px; + } + } + } + + &-input { + width: 100%; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + cursor: pointer; + opacity: 0; + + &[disabled]{ + cursor: @cursor-disabled; + } + } + &-border{ + border: 1px solid @border-color-base; + border-radius: @btn-border-radius; + height: @btn-height-base; + line-height: @btn-height-base - 2px; + padding: @btn-padding-base; + transition: border @transition-time @ease-in-out; + } + &-small&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-small &-border{ + height: @btn-height-small; + line-height: @btn-height-small - 2px; + padding: @btn-padding-small; + } + &-large&-border, .@{checkbox-prefix-cls}-group.@{checkbox-prefix-cls}-large &-border{ + height: @btn-height-large; + line-height: @btn-height-large - 4px; + padding: @btn-padding-large; + } + } + + .@{checkbox-prefix-cls}-wrapper-checked.@{checkbox-prefix-cls}-border{ + border-color: @primary-color; + } + .@{checkbox-prefix-cls}-wrapper-disabled.@{checkbox-prefix-cls}-border{ + border-color: @btn-disable-border; + } + + // 选中状态 + .@{checkbox-prefix-cls}-checked { + + &:hover { + .@{checkbox-inner-prefix-cls} { + border-color: @primary-color; + } + } + + .@{checkbox-inner-prefix-cls} { + border-color: @primary-color; + background-color: @primary-color; + + &:after { + content: ''; + display: table; + width: 4px; + height: 8px; + position: absolute; + top: 2px; + left: 5px; + border: 2px solid #fff; + border-top: 0; + border-left: 0; + transform: rotate(45deg) scale(1); + transition: all @transition-time @ease-in-out; + } + } + } + .@{checkbox-prefix-cls}-large{ + .@{checkbox-prefix-cls}-checked{ + .@{checkbox-inner-prefix-cls} { + &:after{ + width: 6px; + height: 10px; + } + } + } + } + .@{checkbox-prefix-cls}-small{ + .@{checkbox-prefix-cls}-checked{ + .@{checkbox-inner-prefix-cls} { + &:after{ + top: 1px; + left: 4px; + } + } + } + } + + // 禁用 + .@{checkbox-prefix-cls}-disabled { + &.@{checkbox-prefix-cls}-checked { + &:hover { + .@{checkbox-inner-prefix-cls} { + border-color: @border-color-base; + } + } + + .@{checkbox-inner-prefix-cls} { + background-color: #f3f3f3; + border-color: @border-color-base; + + &:after { + animation-name: none; + border-color: #ccc; + } + } + } + + &:hover { + .@{checkbox-inner-prefix-cls} { + border-color: @border-color-base; + } + } + + .@{checkbox-inner-prefix-cls} { + border-color: @border-color-base; + background-color: #f3f3f3; + &:after { + animation-name: none; + border-color: #f3f3f3; + } + } + + .@{checkbox-inner-prefix-cls}-input { + cursor: default; + } + + & + span { + color: #ccc; + cursor: @cursor-disabled; + } + } + + // 半选状态 + .@{checkbox-prefix-cls}-indeterminate{ + .@{checkbox-inner-prefix-cls}:after{ + content: ''; + width: 10px; + height: 1px; + transform: scale(1); + position: absolute; + left: 2px; + top: 6px; + } + + &:hover { + .@{checkbox-inner-prefix-cls} { + border-color: @primary-color; + } + } + .@{checkbox-inner-prefix-cls}{ + background-color: @primary-color; + border-color: @primary-color; + } + &.@{checkbox-prefix-cls}-disabled{ + .@{checkbox-inner-prefix-cls}{ + background-color: #f3f3f3; + border-color: @border-color-base; + } + .@{checkbox-inner-prefix-cls}:after{ + border-color: @input-placeholder-color; + } + } + } + .@{checkbox-prefix-cls}-large { + .@{checkbox-prefix-cls}-indeterminate{ + .@{checkbox-inner-prefix-cls}:after{ + width: 12px; + top: 7px; + } + } + } + .@{checkbox-prefix-cls}-small { + .@{checkbox-prefix-cls}-indeterminate{ + .@{checkbox-inner-prefix-cls}:after{ + width: 8px; + top: 5px; + } + } + } + + .@{checkbox-prefix-cls}-wrapper { + cursor: pointer; + font-size: @font-size-base; + display: inline-block; + margin-right: 8px; + //outline: none; + + &-disabled{ + cursor: @cursor-disabled; + } + + &.@{checkbox-prefix-cls}-large{ + font-size: @font-size-large; + } + } + + .@{checkbox-prefix-cls}-wrapper + span, + .@{checkbox-prefix-cls} + span { + //margin-left: 4px; + margin-right: 4px; + } + + .@{checkbox-prefix-cls}-group { + font-size: @font-size-base; + &-item { + display: inline-block; + } + } +} \ No newline at end of file diff --git a/front/public/theme/miside/mixins/index.less b/front/public/theme/miside/mixins/index.less new file mode 100644 index 000000000..056b31689 --- /dev/null +++ b/front/public/theme/miside/mixins/index.less @@ -0,0 +1,2 @@ +@import "checkbox"; +@import "select"; \ No newline at end of file diff --git a/front/public/theme/miside/mixins/input.css b/front/public/theme/miside/mixins/input.css new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/mixins/input.css.map b/front/public/theme/miside/mixins/input.css.map new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/mixins/input.less b/front/public/theme/miside/mixins/input.less new file mode 100644 index 000000000..6e17f6669 --- /dev/null +++ b/front/public/theme/miside/mixins/input.less @@ -0,0 +1,290 @@ +.hover(@color: @input-hover-border-color) { + border-color: tint(@color, 20%); +} +.hover-error() { + border-color: @error-color; +} + +.active(@color: @input-hover-border-color) { + border-color: tint(@color, 20%); + outline: 0; + box-shadow: 0 0 0 2px fade(@color, 20%); +} +.active-error() { + border-color: @error-color; + outline: 0; + box-shadow: 0 0 0 2px fade(@error-color, 20%); +} + +.disabled() { + background-color: @input-disabled-bg; + opacity: 1; + cursor: @cursor-disabled; + color: #ccc; + &:hover { + .hover(@input-border-color); + } +} + +.input-large() { + font-size: @font-size-large; + padding: @input-padding-vertical-large @input-padding-horizontal; + height: @input-height-large; +} + +.input-small() { + padding: @input-padding-vertical-small @input-padding-horizontal; + height: @input-height-small; + border-radius: @btn-border-radius-small; +} + +.input() { + display: inline-block; + width: 100%; + height: @input-height-base; + line-height: @line-height-base; + padding: @input-padding-vertical-base @input-padding-horizontal; + font-size: @font-size-base; + border: 1px solid @input-border-color; + border-radius: @btn-border-radius; + color: @input-color; + background-color: @input-bg; + background-image: none; + position: relative; + cursor: text; + .placeholder(); + transition: border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out; + + &:hover { + .hover(); + } + + &:focus { + .active(); + } + + &[disabled], + fieldset[disabled] & { + .disabled(); + } + + // Reset height for textarea + textarea& { + max-width: 100%; + height: auto; + min-height: @input-height-base; + vertical-align: bottom; + font-size: @font-size-base; + } + + // Size + &-large { + .input-large(); + } + + &-small { + .input-small(); + } + + &-no-border{ + border-radius: 0; + border-color: transparent; + &:hover{ + border-color: transparent; + } + &:focus{ + border-color: transparent; + box-shadow: none; + } + &[disabled]{ + background-color: transparent; + &:hover { + border-color: transparent; + } + } + } +} + +.input-error() { + border: 1px solid @error-color; + &:hover { + .hover-error; + } + &:focus { + .active-error; + } +} + +.input-group(@inputClass) { + display: table; + width: 100%; + border-collapse: separate; + position: relative; + font-size: @font-size-base; + + .ivu-form-inline &{ + top: 1px; // fixed when using in form inline, + } + + &-large{ + font-size: @font-size-large; + } + + // Undo padding and float of grid classes + &[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; + } + + > [class*="col-"] { + padding-right: 8px; + } + + &-prepend, + &-append, + > .@{inputClass} { + display: table-cell; + + //&:not(:first-child):not(:last-child) { + // border-radius: 0; + //} + } + &-with-prepend .@{inputClass}, + &-with-prepend&-small .@{inputClass} + { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &-with-append .@{inputClass}, + &-with-append&-small .@{inputClass} + { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &-prepend .@{css-prefix}btn, + &-append .@{css-prefix}btn + { + border-color: transparent; + background-color: transparent; + color: inherit; + margin: -(@input-padding-vertical-base + 2) (-@input-padding-horizontal); + } + + &-prepend, + &-append + { + width: 1px; // To make addon/wrap as small as possible + white-space: nowrap; + vertical-align: middle; + } + + .@{inputClass} { + width: 100%; + float: left; + margin-bottom: 0; + position: relative; + z-index: 2; + } + + &-prepend, + &-append + { + padding: @input-padding-vertical-base @input-padding-horizontal; + font-size: inherit; + font-weight: normal; + line-height: 1; + color: @input-color; + text-align: center; + background-color: @input-group-bg; + border: 1px solid @input-border-color; + border-radius: @btn-border-radius; + + // Reset Select's style in addon + .@{css-prefix}select { + margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false + + &-selection { + background-color: inherit; + margin: -1px; + border: 1px solid transparent; + } + + &-visible .@{css-prefix}select-selection{ + box-shadow: none; + } + } + } + + // Reset rounded corners + > span > .@{inputClass}:first-child, + > .@{inputClass}:first-child, + &-prepend + { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; + + // Reset Select's style in addon + .@{css-prefix}-select .@{css-prefix}-select-selection { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + + &-prepend { + border-right: 0; + } + &-append { + border-left: 0; + } + + > .@{inputClass}:last-child, + &-append + { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; + + // Reset Select's style in addon + .@{css-prefix}-select .@{css-prefix}-select-selection { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + + // Sizing options + &-large .@{inputClass}, + &-large > &-prepend, + &-large > &-append + { + .input-large(); + } + + &-small .@{inputClass}, + &-small > &-prepend, + &-small > &-append + { + .input-small(); + } +} + +.input-group-error{ + &-prepend, + &-append + { + background-color: hsla(@error-color, 10%); + border: 1px solid @error-color; + .@{css-prefix}select { + &-selection { + background-color: inherit; + border: 1px solid transparent; + } + } + } + &-prepend { + border-right: 0; + } + &-append { + border-left: 0; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/mixins/select.less b/front/public/theme/miside/mixins/select.less new file mode 100644 index 000000000..57351351b --- /dev/null +++ b/front/public/theme/miside/mixins/select.less @@ -0,0 +1,10 @@ +.select-item(@size-class, @item-class) { + .@{item-class} { + &-divided { + border-top-color: @border-color-base; + } + &-divided:before { + background-color: @border-color-split; + } + } +} \ No newline at end of file diff --git a/front/public/theme/miside/modal.less b/front/public/theme/miside/modal.less new file mode 100644 index 000000000..a0dec6855 --- /dev/null +++ b/front/public/theme/miside/modal.less @@ -0,0 +1,201 @@ +@modal-prefix-cls: ~"@{css-prefix}modal"; +@confirm-prefix-cls: ~"@{css-prefix}modal-confirm"; + +.@{modal-prefix-cls} { + width: auto; + margin: 0 auto; + position: relative; + outline: none; + top: 100px; + + &-hidden { + display: none !important; + } + + &-wrap { + position: fixed; + overflow: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal; + -webkit-overflow-scrolling: touch; + outline: 0; + } + + &-wrap * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + &-mask { + .mask; + } + + &-content { + position: relative; + background-color: #fff; + border: 0; + border-radius: @border-radius-base; + background-clip: padding-box; + box-shadow: 0 4px 12px rgba(0,0,0,.15); + + &-no-mask{ + pointer-events: auto; + } + &-drag{ + position: absolute; + .@{modal-prefix-cls}-header{ + cursor: move; + } + } + &-dragging{ + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + } + + &-header { + .content-header; + } + + &-close { + z-index: 1; + .content-close(1px, 31px); + } + + &-body { + padding: 16px; + font-size: @font-size-base; + line-height: 1.5; + } + + &-footer { + border-top: 1px solid @border-color-split; + padding: 12px 18px 12px 18px; + text-align: right; + button + button { + margin-left: 8px; + margin-bottom: 0; + } + } + + &-fullscreen{ + width: 100% !important; + top: 0; + bottom: 0; + position: absolute; + + @modal-header-height: 51px; + @modal-footer-height: 61px; + + .@{modal-prefix-cls}-content{ + width: 100%; + border-radius: 0; + position: absolute; + top: 0; + bottom: 0; + } + + .@{modal-prefix-cls}-body{ + width: 100%; + overflow: auto; + position: absolute; + top: @modal-header-height; + bottom: @modal-footer-height; + } + &-no-header .@{modal-prefix-cls}-body{ + top: 0; + } + &-no-footer .@{modal-prefix-cls}-body{ + bottom: 0; + } + .@{modal-prefix-cls}-footer{ + position: absolute; + width: 100%; + bottom: 0; + } + } + &-no-mask{ + pointer-events: none; + } +} + +@media (max-width: @screen-sm) { + .@{modal-prefix-cls} { + width: auto !important; + margin: 10px; + } + .@{modal-prefix-cls}-fullscreen{ + width: 100% !important; + margin: 0; + } + .vertical-center-modal { + .@{modal-prefix-cls} { + flex: 1; + } + } +} + +.@{confirm-prefix-cls} { + padding: 6px 16px 8px; + &-head { + padding: 0 12px 0 0; + &-icon { + display: inline-block; + font-size: 28px; + vertical-align: middle; + position: relative; + top: -2px; + + &-info { + color: @primary-color; + } + &-success { + color: @success-color; + } + &-warning { + color: @warning-color; + } + &-error { + color: @error-color; + } + &-confirm { + color: @warning-color; + } + } + + &-title { + display: inline-block; + vertical-align: middle; + margin-left: 12px; + font-size: @font-size-large; + color: @title-color; + font-weight: 500; + } + } + + &-body{ + padding-left: 40px; + font-size: @font-size-base; + color: @text-color; + position: relative; + + &-render{ + margin: 0; + padding: 0; + } + } + + &-footer{ + margin-top: 20px; + text-align: right; + + button + button { + margin-left: 8px; + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/front/public/theme/miside/page.less b/front/public/theme/miside/page.less new file mode 100644 index 000000000..7500d29fa --- /dev/null +++ b/front/public/theme/miside/page.less @@ -0,0 +1,324 @@ +@page-prefix-cls: ~"@{css-prefix}page"; + +.@{page-prefix-cls} { + &:after { + content: ''; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } + + &-item { + display: inline-block; + //float: left; + vertical-align: middle; + min-width: @btn-circle-size; + height: @btn-circle-size; + line-height: @btn-circle-size - 2px; + margin-right: 4px; + text-align: center; + list-style: none; + background-color: #2f2f2f; + user-select: none; + cursor: pointer; + font-family: Arial; + font-weight: 500; + border: 1px solid @border-color-base; + border-radius: @btn-border-radius; + //transition: all @transition-time @ease-in-out; + transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out; + + a { + margin: 0 6px; + text-decoration: none; + color: @text-color; + //transition: none; + } + + &:hover { + border-color: @primary-color; + a { + color: @primary-color; + } + } + + &-active { + background-color: hsl(@primary-color, 50%); + border-color: @primary-color; + + a, &:hover a { + color: @white; + } + } + } + + &-with-disabled &-item, &-with-disabled &-disabled{ + cursor: @cursor-disabled; + background-color: @input-disabled-bg; + a { + color: #ccc; + } + &:hover { + border-color: @border-color-base; + a { + color: #ccc; + cursor: @cursor-disabled; + } + } + &-active { + background-color: @border-color-base; + border-color: @border-color-base; + + a, &:hover a { + color: #fff; + } + } + } + + &-item-jump-prev, &-item-jump-next { + i{ + color: #ccc; + } + i:first-child{ + display: none; + } + + &:hover { + i:first-child{ + display: inline; + color: @primary-color; + } + i:last-child{ + display: none; + } + } + } + + &-with-disabled &-item-jump-prev, &-with-disabled &-item-jump-next{ + cursor: @cursor-disabled; + i{ + color: #ccc; + } + &:hover { + i:first-child{ + display: none; + } + i:last-child{ + display: inline; + } + } + } + + &-item-jump-prev:hover { + i:first-child:after { + content: "\F115"; + margin-left: -8px; + } + } + + &-item-jump-next:hover { + i:first-child:after { + content: "\F11F"; + margin-left: -8px; + } + } + + &-prev{ + margin-right: 4px; + } + + &-item-jump-prev, + &-item-jump-next{ + margin-right: 4px; + } + + &-prev, + &-next, + &-item-jump-prev, + &-item-jump-next { + display: inline-block; + vertical-align: middle; + user-select: none; + //float: left; + min-width: @btn-circle-size; + height: @btn-circle-size; + line-height: @btn-circle-size - 2px; + list-style: none; + text-align: center; + cursor: pointer; + color: #666; + font-family: Arial; + border: 1px solid @border-color-base; + border-radius: @btn-border-radius; + transition: all @transition-time @ease-in-out; + } + &-item-jump-prev, + &-item-jump-next{ + border-color: transparent; + } + + &-prev, + &-next { + background-color: @primary-color; + + a { + color: #666; + font-size: 14px; + } + + &:hover { + border-color: @primary-color; + + a { + color: hsla(@primary-color, 10%); + } + } + } + + &-disabled { + cursor: @cursor-disabled; + a { + color: #ccc; + } + &:hover { + border-color: @border-color-base; + a { + color: #ccc; + cursor: @cursor-disabled; + } + } + } + + &-options { + display: inline-block; + vertical-align: middle; + //float: left; + margin-left: 15px; + &-sizer { + display: inline-block; + //float: left; + margin-right: 10px; + } + + &-elevator { + display: inline-block; + vertical-align: middle; + //float: left; + height: @btn-circle-size; + line-height: @btn-circle-size; + + input { + .input; + border-radius: @btn-border-radius; + margin: 0 8px; + width: 50px; + } + } + } + + &-total { + display: inline-block; + //float: left; + height: @btn-circle-size; + line-height: @btn-circle-size; + margin-right: 10px; + } + + &-simple &-prev, + &-simple &-next { + margin: 0; + border: 0; + height: 24px; + line-height: normal; + font-size: 18px; + } + + &-simple &-simple-pager { + display: inline-block; + //float: left; + margin-right: 8px; + vertical-align: middle; + + input { + .input; + width: 30px; + height: 24px; + margin: 0 8px; + padding: 5px 8px; + text-align: center; + box-sizing: border-box; + background-color: #fff; + outline: none; + border: 1px solid @border-color-base; + border-radius: @btn-border-radius; + transition: border-color @transition-time @ease-in-out; + + &:hover { + border-color: @primary-color; + } + } + + span{ + padding: 0 8px 0 2px; + } + } + + &-custom-text, &-custom-text:hover{ + border-color: transparent; + } +} + +.@{page-prefix-cls} { + &.mini &-total { + height: @btn-circle-size-small; + line-height: @btn-circle-size-small; + } + + &.mini &-item { + border: 0; + margin: 0; + min-width: @btn-circle-size-small; + height: @btn-circle-size-small; + line-height: @btn-circle-size-small; + border-radius: @btn-border-radius-small; + } + + &.mini &-prev, + &.mini &-next { + margin: 0; + min-width: @btn-circle-size-small; + height: @btn-circle-size-small; + line-height: @btn-circle-size-small - 2px; + border: 0; + + a { + i:after { + height: @btn-circle-size-small; + line-height: @btn-circle-size-small; + } + } + } + + &.mini &-item-jump-prev, + &.mini &-item-jump-next { + height: @btn-circle-size-small; + line-height: @btn-circle-size-small; + border: none; + margin-right: 0; + } + + &.mini &-options { + margin-left: 8px; + &-elevator { + height: @btn-circle-size-small; + line-height: @btn-circle-size-small; + + input { + .input-small; + width: 44px; + } + } + } +} diff --git a/front/public/theme/miside/pages/body.less b/front/public/theme/miside/pages/body.less new file mode 100644 index 000000000..a28800833 --- /dev/null +++ b/front/public/theme/miside/pages/body.less @@ -0,0 +1,46 @@ +*::selection { + background: fade(@primary-color, 60%); +} + +body, html { + overflow-x: hidden; + background-color: tint(@primary-color, 80%) !important; +} + +@media screen and (min-width: 1024px) { + body, html { + background-image: url(../images/miside-background.png); + background-size: cover; + background-attachment: fixed; + background-position-x: 100%; + background-repeat: no-repeat; + backdrop-filter: blur(10px); + } +} + +// header +header { + background-image: linear-gradient(@primary-color, transparent) !important; +} + +// nav +.nav a.link { + padding: 0.7rem 0.8rem; + text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0 !important; +} + +footer { + background-color: tint(@primary-color, 80%); +} + +// styles_herosection +.styles_herosection { + .styles_bg { + background: linear-gradient(302.61deg, tint(@primary-color, 80%) -0.71%, #fff9ad6e 89.57%); + filter: blur(60px); + } +} + +.app { + background: linear-gradient(90deg, tint(@primary-color, 80%) 30%, hsla(@primary-color, 40%) 100%); +} diff --git a/front/public/theme/miside/pages/cropper.less b/front/public/theme/miside/pages/cropper.less new file mode 100644 index 000000000..1255bb558 --- /dev/null +++ b/front/public/theme/miside/pages/cropper.less @@ -0,0 +1,10 @@ +@cropper-primary-color: @primary-color; + +.crop-point, +.crop-line { + background-color: @cropper-primary-color !important; +} + +.cropper-view-box { + outline-color: @cropper-primary-color !important; +} \ No newline at end of file diff --git a/front/public/theme/miside/pages/detail.less b/front/public/theme/miside/pages/detail.less new file mode 100644 index 000000000..71561e06b --- /dev/null +++ b/front/public/theme/miside/pages/detail.less @@ -0,0 +1,3 @@ +.ivu-timeline-item-head { + background-color: transparent !important; +} diff --git a/front/public/theme/miside/pages/edit.less b/front/public/theme/miside/pages/edit.less new file mode 100644 index 000000000..d0f84bd2b --- /dev/null +++ b/front/public/theme/miside/pages/edit.less @@ -0,0 +1,7 @@ +.ql-toolbar.ql-snow { + border: 1px solid #212121; +} + +.ql-container.ql-snow { + border: 1px solid #212121; +} \ No newline at end of file diff --git a/front/public/theme/miside/pages/html.css b/front/public/theme/miside/pages/html.css new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/pages/html.css.map b/front/public/theme/miside/pages/html.css.map new file mode 100644 index 000000000..e69de29bb diff --git a/front/public/theme/miside/pages/html.less b/front/public/theme/miside/pages/html.less new file mode 100644 index 000000000..fc3ffb093 --- /dev/null +++ b/front/public/theme/miside/pages/html.less @@ -0,0 +1,8 @@ +.video-box, +.link-box, +.img-box { + background-color: fade(@primary-color, 10%); + color: @primary-color; + border-top: 1px solid fade(@primary-color, 20%); + border-bottom: 1px solid fade(@primary-color, 20%); +} \ No newline at end of file diff --git a/front/public/theme/miside/poptip.less b/front/public/theme/miside/poptip.less new file mode 100644 index 000000000..991979ec5 --- /dev/null +++ b/front/public/theme/miside/poptip.less @@ -0,0 +1,155 @@ +@poptip-prefix-cls: ~"@{css-prefix}poptip"; +@poptip-arrow: ~"@{poptip-prefix-cls}-arrow"; +@poptip-max-width: 250px; +@poptip-arrow-width: 7px; +@poptip-arrow-outer-width: (@poptip-arrow-width + 1); +@poptip-distance: @poptip-arrow-width - 1 + 4; +@poptip-arrow-color: hsla(0,0%,85%,.5); + +.@{poptip-prefix-cls} { + display: inline-block; + + &-rel{ + display: inline-block; + position: relative; + } + + &-title { + margin: 0; + padding: 8px 16px; + position: relative; + + &:after{ + content: ''; + display: block; + height: 1px; + position: absolute; + left: 8px; + right: 8px; + bottom: 0; + background-color: @border-color-split; + } + + &-inner{ + color: @title-color; + font-size: @font-size-base; + font-weight: 500; + } + } + + &-body{ + padding: 8px 16px; + + &-content{ + overflow: auto; + + &-word-wrap{ + white-space: pre-wrap; + text-align: justify; + } + + &-inner{ + color: @text-color; + } + } + } + + &-inner{ + width: 100%; + background-color: @border-color-split; + background-clip: padding-box; + //border: 1px solid @border-color-split; + border-radius: @border-radius-small; + box-shadow: @shadow-base; + white-space: nowrap; + } + + &-popper{ + min-width: 150px; + font-size: @font-size-base; + .popper(@poptip-arrow, @poptip-arrow-width, @poptip-distance, @poptip-arrow-color); + + &[x-placement^="top"] .@{poptip-arrow}:after { + content: " "; + bottom: 1px; + margin-left: -@poptip-arrow-width; + border-bottom-width: 0; + border-top-width: @poptip-arrow-width; + border-top-color: @border-color-split; + } + + &[x-placement^="right"] .@{poptip-arrow}:after { + content: " "; + left: 1px; + bottom: -@poptip-arrow-width; + border-left-width: 0; + border-right-width: @poptip-arrow-width; + border-right-color: @border-color-split; + } + + &[x-placement^="bottom"] .@{poptip-arrow}:after { + content: " "; + top: 1px; + margin-left: -@poptip-arrow-width; + border-top-width: 0; + border-bottom-width: @poptip-arrow-width; + border-bottom-color: @border-color-split; + } + + &[x-placement^="left"] .@{poptip-arrow}:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-width: @poptip-arrow-width; + border-left-color: #fff; + bottom: -@poptip-arrow-width; + } + } + + &-arrow{ + &, &:after{ + display: block; + width: 0; + height: 0; + position: absolute; + border-color: transparent; + border-style: solid; + } + } + &-arrow { + border-width: @poptip-arrow-outer-width; + } + &-arrow:after{ + content: ""; + border-width: @poptip-arrow-width; + } + + &-confirm &-popper{ + max-width: 300px; + } + &-confirm &-inner{ + white-space: normal; + } + + &-confirm &-body{ + padding: 16px 16px 8px; + .ivu-icon{ + font-size: 16px; + color: @warning-color; + line-height: 18px; + position: absolute; + } + + &-message{ + padding-left: 20px; + } + } + + &-confirm &-footer{ + text-align: right; + padding: 8px 16px 16px; + button { + margin-left: 4px; + } + } +} diff --git a/front/public/theme/miside/radio.less b/front/public/theme/miside/radio.less new file mode 100644 index 000000000..e26b3d5b6 --- /dev/null +++ b/front/public/theme/miside/radio.less @@ -0,0 +1,379 @@ +@radio-color: #672d29; +@radio-prefix-cls: ~"@{css-prefix}radio"; +@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group"; +@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner"; +@radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button"; + +.@{radio-prefix-cls}-focus { + box-shadow: 0 0 0 2px fade(@radio-color, 20%); + z-index: 1; +} + +.@{radio-group-prefix-cls} { + display: inline-block; + font-size: @font-size-base; + vertical-align: middle; + //outline: none; + &-vertical{ + .@{radio-prefix-cls}-wrapper { + display: block; + height: 30px; + line-height: 30px; + } + } +} + +// 普通状态 - Normal state +.@{radio-prefix-cls}-wrapper { + font-size: @font-size-base; + vertical-align: middle; + display: inline-block; + position: relative; + white-space: nowrap; + margin-right: 8px; + cursor: pointer; + &-disabled{ + cursor: @cursor-disabled; + } + //outline: none; +} + +.@{radio-prefix-cls} { + display: inline-block; + margin-right: 4px; + white-space: nowrap; + //outline: none; + position: relative; + line-height: 1; + vertical-align: middle; + cursor: pointer; + &:hover { + .@{radio-inner-prefix-cls} { + border-color: #bcbcbc; + } + } + &-inner { + display: inline-block; + width: 16px; + height: 16px; + position: relative; + top: 0; + left: 0; + background-color: initial; + border: 1px solid @border-color-base; + border-radius: 50%; + transition: all @transition-time @ease-in-out; + + &:after { + position: absolute; + width: 10px; + height: 10px; + left: 2px; + top: 2px; + border-radius: @border-radius-base; + display: table; + border-top: 0; + border-left: 0; + content: ' '; + background-color: @primary-color; + opacity: 0; + transition: all @transition-time @ease-in-out; + transform: scale(0); + } + } + &-large{ + font-size: @font-size-large; + & .@{radio-inner-prefix-cls}{ + width: 18px; + height: 18px; + &:after{ + width: 12px; + height: 12px; + } + } + &.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{ + font-size: @font-size-large; + } + } + &-small{ + & .@{radio-inner-prefix-cls}{ + width: 14px; + height: 14px; + &:after{ + width: 8px; + height: 8px; + } + } + } + + &-input { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + opacity: 0; + cursor: pointer; + } + + &-border{ + border: 1px solid @border-color-base; + border-radius: @btn-border-radius; + height: @btn-height-base; + line-height: @btn-height-base - 2px; + padding: @btn-padding-base; + transition: border @transition-time @ease-in-out; + } + &-small&-border, .@{radio-group-prefix-cls}-small &-border{ + height: @btn-height-small; + line-height: @btn-height-small - 2px; + padding: @btn-padding-small; + } + &-large&-border, .@{radio-group-prefix-cls}-large &-border{ + height: @btn-height-large; + line-height: @btn-height-large - 4px; + padding: @btn-padding-large; + } +} + +.@{radio-prefix-cls}-wrapper-checked.@{radio-prefix-cls}-border{ + border-color: @primary-color; +} +.@{radio-prefix-cls}-wrapper-disabled.@{radio-prefix-cls}-border{ + border-color: @btn-disable-border; +} + +// 选中状态 - Selected state +.@{radio-prefix-cls}-checked { + .@{radio-inner-prefix-cls} { + border-color: @primary-color; + &:after { + opacity: 1; + transform: scale(1); + transition: all @transition-time @ease-in-out; + } + } + &:hover { + .@{radio-inner-prefix-cls} { + border-color: @primary-color; + } + } +} + +.@{radio-prefix-cls}-disabled { + cursor: @cursor-disabled; + .@{radio-prefix-cls}-input { + cursor: @cursor-disabled; + } + + &:hover { + .@{radio-inner-prefix-cls} { + border-color: @border-color-base; + } + } + .@{radio-inner-prefix-cls} { + border-color: @border-color-base; + background-color: #f3f3f3; + &:after { + background-color: #cccccc; + } + } + + .@{radio-prefix-cls}-disabled + span { + color: #ccc; + } +} + +span.@{radio-prefix-cls} + * { + margin-left: 2px; + margin-right: 2px; +} + +// 按钮样式 - Button style +.@{radio-group-button-prefix-cls} { + font-size: 0; + -webkit-text-size-adjust:none; + + .@{radio-prefix-cls}{ + width: 0; + margin-right: 0; + } + + .@{radio-prefix-cls}-wrapper { + display: inline-block; + height: @btn-circle-size; + line-height: @btn-circle-size - 2px; + margin: 0; + padding: 0 16px - 1px; + font-size: @font-size-base; + color: @btn-default-color; + transition: all @transition-time ease-in-out; + cursor: pointer; + border: 1px solid @border-color-base; + border-left: 0; + background-color: @border-color-base !important; + position: relative; + + > span { + margin-left: 0; + } + + &:before, &:after { + content: ''; + display: block; + position: absolute; + width: 1px; + height: 100%; + left: -1px; + top: 0; + background: @border-color-base; + //visibility: hidden; + transition: all @transition-time ease-in-out; + } + + &:after{ + height: @btn-circle-size + 4px; + left: -1px; + top: -3px; + background: fade(@primary-color, 20%); + opacity: 0; + } + + &:first-child { + border-radius: @btn-border-radius 0 0 @btn-border-radius; + border-left: 1px solid @border-color-base; + &:before, &:after { + display: none; + } + } + + &:last-child { + border-radius: 0 @btn-border-radius @btn-border-radius 0; + } + + &:first-child:last-child { + border-radius: @btn-border-radius; + } + + &:hover { + position: relative; + color: @primary-color; + & .@{radio-prefix-cls} { + background-color: black; + } + } + + .@{radio-prefix-cls}-inner, + input { + opacity: 0; + width: 0; + height: 0; + } + + &-checked { + background-color: shade(@primary-color, 1%) !important; + border-color: @primary-color; + color: @normal-color; + box-shadow: -1px 0 0 0 @primary-color; + z-index: 1; + + &:before{ + background: @primary-color; + opacity: 0.1; + } + + &.@{radio-prefix-cls}-focus{ + box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%); + transition: all @transition-time ease-in-out; + &:after{ + left: -3px; + top: -3px; + opacity: 1; + background: fade(@primary-color, 20%); + } + &:first-child{ + box-shadow: 0 0 0 2px fade(@primary-color, 20%); + } + } + + &:first-child { + border-color: @primary-color; + box-shadow: none; + } + + &:hover { + border-color: tint(@primary-color, 20%); + //box-shadow: -1px 0 0 0 tint(@primary-color, 20%); + color: tint(@primary-color, 20%); + } + + &:active { + border-color: shade(@primary-color, 5%); + //box-shadow: -1px 0 0 0 shade(@primary-color, 5%); + color: shade(@primary-color, 5%); + } + } + + &-disabled { + border-color: @border-color-base; + background-color: @background-color-base; + cursor: @cursor-disabled; + color: #ccc; + + &:first-child, + &:hover { + border-color: @border-color-base; + background-color: @background-color-base; + color: #ccc; + } + &:first-child { + border-left-color: @border-color-base; + } + } + + &-disabled.@{radio-prefix-cls}-wrapper-checked { + color: #fff; + background-color: #e6e6e6; + border-color: @border-color-base; + box-shadow: none!important; + } + } + &-solid .@{radio-prefix-cls}-wrapper{ + &-checked:not(.@{radio-prefix-cls}-wrapper-disabled){ + background: @primary-color; + color: #fff; + &:hover{ + background: tint(@primary-color, 20%); + color: #fff; + } + } + } +} + +.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{ + height: @btn-circle-size-large; + line-height: @btn-circle-size-large - 2px; + font-size: @font-size-large; + &:after{ + height: @btn-circle-size-large + 4px; + } +} + +.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{ + height: @btn-circle-size-small; + line-height: @btn-circle-size-small - 2px; + padding: 0 12px; + font-size: @font-size-base; + + &:after{ + height: @btn-circle-size-small + 4px; + } + + &:first-child { + border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small; + } + &:last-child { + border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0; + } +} diff --git a/front/public/theme/miside/select-dropdown.less b/front/public/theme/miside/select-dropdown.less new file mode 100644 index 000000000..26df4507b --- /dev/null +++ b/front/public/theme/miside/select-dropdown.less @@ -0,0 +1,30 @@ +@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown"; +@transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height"; + +.@{select-dropdown-prefix-cls} { + width: inherit; + max-height: 200px; + overflow: auto; + margin: 5px 0; + padding: 5px 0; + background-color: #fff; + box-sizing: border-box; + //border: 1px solid @border-color-split; + border-radius: @btn-border-radius; + //box-shadow: 0 1px 3px rgba(0,0,0,.2); + box-shadow: @shadow-base; + position: absolute; + z-index: @zindex-select; + &-transfer{ + z-index: @zindex-transfer; + width: auto; + } + &.@{transfer-no-max-height} { + max-height: none; + } +} +.@{modal-prefix-cls} { + .@{select-dropdown-prefix-cls} { + position: absolute !important; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/select.less b/front/public/theme/miside/select.less new file mode 100644 index 000000000..e4931be0b --- /dev/null +++ b/front/public/theme/miside/select.less @@ -0,0 +1,362 @@ +@select-prefix-cls: ~"@{css-prefix}select"; +@select-item-prefix-cls: ~"@{css-prefix}select-item"; +@select-group-prefix-cls: ~"@{css-prefix}select-group"; + +.@{select-prefix-cls} { + display: inline-block; + width: 100%; + box-sizing: border-box; + vertical-align: middle; + color: @text-color; + font-size: @font-size-base; + //position: relative; + line-height: normal; + + &-selection { + display: block; + box-sizing: border-box; + outline: none; + user-select: none; + cursor: pointer; + position: relative; + + background-color: transparent !important; + border-radius: @btn-border-radius; + border: 1px solid @border-color-base; + transition: all @transition-time @ease-in-out; + + &:hover, &-focused { + .hover(); + .@{select-prefix-cls}-arrow { + display: inline-block; + } + } + } + + &-arrow { + .inner-arrow(); + } + + &-visible{ + .@{select-prefix-cls}-selection{ + .active(); + } + + .@{select-prefix-cls}-arrow { + transform: translateY(-50%) rotate(180deg); + display: inline-block; + } + } + + &-disabled { + .@{select-prefix-cls}-selection { + .disabled(); + + .@{select-prefix-cls}-arrow { + color: @slider-disabled-color; + } + + &:hover { + border-color: @border-color-base; + box-shadow: none; + + .@{select-prefix-cls}-arrow { + display: inline-block; + } + } + } + } + + &-single &-selection{ + height: @input-height-base; + position: relative; + + .@{select-prefix-cls}-placeholder{ + color: @input-placeholder-color; + } + + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ + display: block; + height: @input-height-base - 2px; + line-height: @input-height-base - 2px; + font-size: @font-size-base; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 8px; + padding-right: 24px; + } + } + + &-multiple &-selection{ + padding: 0 24px 0 4px; + //min-height: @input-height-base; + + .@{select-prefix-cls}-placeholder{ + display: block; + height: @input-height-base - 2px; + line-height: @input-height-base - 2px; + color: @input-placeholder-color; + font-size: @font-size-base; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-left: 4px; + padding-right: 22px; + } + } + &-default&-multiple &-selection{ + min-height: @input-height-base; + } + + &-large&-single &-selection{ + height: @input-height-large; + + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ + height: @input-height-large - 2px; + line-height: @input-height-large - 2px; + font-size: @font-size-large; + } + } + + &-large&-multiple &-selection{ + min-height: @input-height-large; + + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ + min-height: @input-height-large - 2px; + line-height: @input-height-large - 2px; + font-size: @font-size-large; + } + } + + &-small&-single &-selection{ + height: @input-height-small; + border-radius: @btn-border-radius-small; + + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ + height: @input-height-small - 2px; + line-height: @input-height-small - 2px; + } + } + + &-small&-multiple &-selection{ + min-height: @input-height-small; + border-radius: @btn-border-radius-small; + + .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ + height: auto; + min-height: @input-height-small - 2px; + line-height: @input-height-small - 2px; + } + } + + // input + &-input{ + display: inline-block; + height: @input-height-base; + line-height: @input-height-base; + padding: 0 24px 0 8px; + font-size: @font-size-base; + outline: none; + border: none; + box-sizing: border-box; + color: @input-color; + background-color: transparent; + position: relative; + cursor: pointer; + .placeholder(); + + &[disabled]{ + cursor: @cursor-disabled; + color: #ccc; + -webkit-text-fill-color: #ccc; // #5249 + } + } + + &-single &-input{ + width: 100%; + } + + &-large &-input, &-large&-multiple &-input{ + font-size: @font-size-large; + height: @input-height-large - 8px; + line-height: @input-height-large - 8px; + top: 3px; + } + + &-small &-input, &-small&-multiple &-input{ + height: @input-height-small - 6px; + line-height: @input-height-small - 6px; + top: 2px; + } + + &-multiple &-input{ + height: @input-height-base - 6px; + line-height: @input-height-base - 6px; + padding: 0 0 0 4px; + top: 2px; + } + + &-not-found{ + text-align: center; + color: @btn-disable-color; + li:not([class^=ivu-]){ + margin-bottom: 0; + } + } + &-loading{ + text-align: center; + color: @btn-disable-color; + } + + &-multiple .@{css-prefix}tag{ + height: 24px; + line-height: 22px; + margin: 3px 4px 3px 0; + max-width: 99%; + position: relative; + span:not(.ivu-select-max-tag){ + display: block; + margin-right: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + i{ + display: block; + position: absolute; + right: 4px; + top: 4px; + } + } + &-multiple-tag-hidden{ + margin-right: 0 !important; + } + + &-large&-multiple .@{css-prefix}tag{ + height: 32px; + line-height: 30px; + font-size: @font-size-large; + i{ + top: 9px; + } + } + + &-small&-multiple .@{css-prefix}tag{ + height: 17px; + line-height: 15px; + font-size: @font-size-small; + padding: 0 6px; + margin: 3px 4px 2px 0; + span{ + margin-right: 14px; + } + i{ + top: 1px; + right: 2px; + } + } + + &-dropdown-list { + //display: inline-block; + min-width: 100%; + list-style: none; + } + + & &-dropdown{ + width: auto; + } + + &-prefix{ + display: inline-block; + vertical-align: middle; + i{ + vertical-align: top; + } + } + &-head-with-prefix{ + display: inline-block !important; + vertical-align: middle; + } + &-single &-prefix{ + padding-left: 4px; + } + &-single &-head-with-prefix, &-multiple &-head-with-prefix{ + padding-left: 0 !important; + } + + &-head-flex{ + display: flex; + align-items: center; + } + + &-multiple &-head-flex &-prefix{ + margin-right: 4px; + } +} + +.select-item(@select-prefix-cls, @select-item-prefix-cls); + +.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} { + position: relative; + &-selected{ + color: @selected-color; + background: transparent !important; + } + &-focus,&-selected:hover{ + background: @background-color-select-hover; + } + + &-selected&-focus { + color: shade(@selected-color, 10%); + background: #fff; + } + + &-selected:after{ + .ivu-icon(); + //float: right; + font-size: 24px; + content: '\F171'; + color: @selected-color; + position: absolute; + top: 2px; + right: 8px; + } + &-selected.ivu-select-item-disabled{ + color: @btn-disable-color; + &:after{ + color: @btn-disable-color; + } + &:hover{ + background-color: #fff; + } + } +} + +.@{select-group-prefix-cls} { + list-style: none; + margin: 0; + padding: 0; + + &-title { + padding-left: 8px; + font-size: 14px; + color: @legend-color; + height: 30px; + line-height: 30px; + } +} + +.@{form-item-prefix-cls}-error{ + .@{select-prefix-cls}{ + &-selection{ + border: 1px solid @error-color; + } + &-arrow{ + color: @error-color; + } + &-visible .@{select-prefix-cls}-selection{ + .active-error; + } + } +} \ No newline at end of file diff --git a/front/public/theme/miside/spin.less b/front/public/theme/miside/spin.less new file mode 100644 index 000000000..422ef917d --- /dev/null +++ b/front/public/theme/miside/spin.less @@ -0,0 +1,92 @@ +@spin-prefix-cls: ~"@{css-prefix}spin"; +@spin-dot-size-small: 12px; +@spin-dot-size: 20px; +@spin-dot-size-large: 32px; + +.@{spin-prefix-cls} { + color: @primary-color; + vertical-align: middle; + text-align: center; + + &-dot { + position: relative; + display: block; + border-radius: 50%; + background-color: @primary-color; + .square(@spin-dot-size); + animation: ani-spin-bounce 1s 0s ease-in-out infinite; + } + + &-large &-dot { + .square(@spin-dot-size-large); + } + + &-small &-dot { + .square(@spin-dot-size-small); + } + + &-fix { + position: absolute; + top: 0; + left: 0; + z-index: @zindex-spin; + .square(100%); + background-color: rgba(0,0,0,.6); + } + &-fullscreen{ + z-index: @zindex-spin-fullscreen; + &-wrapper{ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + } + + &-fix &-main { + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + + &-fix &-dot { + display: inline-block; + } + + &-text, + &-show-text &-dot { + display: none; + } + + &-show-text &-text { + display: block; + } +} + +// use in Table loading, Table right border is not included in .ivu-table-wrapper, so fix it +.@{table-prefix-cls}-wrapper{ + > .@{spin-prefix-cls}-fix{ + border: none; + } +} +.@{table-prefix-cls}-wrapper-with-border{ + > .@{spin-prefix-cls}-fix{ + border: 1px solid @border-color-base; + border-top: 0; + border-left: 0; + } +} + +@keyframes ani-spin-bounce { + 0% { + transform: scale(0); + } + + 100% { + transform: scale(1); + opacity: 0; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/split.less b/front/public/theme/miside/split.less new file mode 100644 index 000000000..2a43e0d71 --- /dev/null +++ b/front/public/theme/miside/split.less @@ -0,0 +1,10 @@ +@split-prefix-cls: ~"@{css-prefix}split"; +@box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.4); +@trigger-bar-background: #fff; +@trigger-background: #fff; +@trigger-width: 6px; +@trigger-bar-width: 4px; +@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2; +@trigger-bar-interval: 3px; +@trigger-bar-weight: 1px; +@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8; diff --git a/front/public/theme/miside/steps.less b/front/public/theme/miside/steps.less new file mode 100644 index 000000000..a169bc4ad --- /dev/null +++ b/front/public/theme/miside/steps.less @@ -0,0 +1,367 @@ +@steps-prefix-cls: ~"@{css-prefix}steps"; +@steps-wait-icon-color: #ccc; +@steps-wait-title-color: #999; +@steps-wait-description-color: @steps-wait-title-color; +@steps-wait-tail-color: @border-color-split; +@steps-title-color: #666; + +.@{steps-prefix-cls} { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + font-size: 0; + line-height: 1.5; + + &-item{ + display: inline-block; + position: relative; + vertical-align: top; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + overflow: hidden; + &:last-child{ + -webkit-box-flex: 0; + -ms-flex: 0; + flex: none; + } + + &.@{steps-prefix-cls}-status-wait{ + .@{steps-prefix-cls}-head-inner { + background-color: #fff; + > .@{steps-prefix-cls}-icon, span { + color: @steps-wait-icon-color; + } + } + .@{steps-prefix-cls}-title { + color: @steps-wait-title-color; + } + .@{steps-prefix-cls}-content { + color: @steps-wait-description-color; + } + .@{steps-prefix-cls}-tail > i { + background-color: @steps-wait-tail-color; + } + } + &.@{steps-prefix-cls}-status-process { + .@{steps-prefix-cls}-head-inner { + border-color: @primary-color; + background-color: @primary-color; + > .@{steps-prefix-cls}-icon, span { + color: #fff; + } + } + .@{steps-prefix-cls}-title { + color: @steps-title-color; + } + .@{steps-prefix-cls}-content { + color: @steps-title-color; + } + .@{steps-prefix-cls}-tail > i { + background-color: @border-color-split; + } + } + &.@{steps-prefix-cls}-status-finish { + .@{steps-prefix-cls}-head-inner { + background-color: #fff; + border-color: @primary-color; + > .@{steps-prefix-cls}-icon, span { + color: @primary-color; + } + } + .@{steps-prefix-cls}-tail > i:after { + width: 100%; + background: @primary-color; + transition: all @transition-time @ease-in-out; + opacity: 1; + } + .@{steps-prefix-cls}-title { + color: @steps-wait-title-color; + } + .@{steps-prefix-cls}-content { + color: @steps-wait-description-color; + } + } + + &.@{steps-prefix-cls}-status-error { + .@{steps-prefix-cls}-head-inner { + background-color: #fff; + border-color: @error-color; + > .@{steps-prefix-cls}-icon { + color: @error-color; + } + } + .@{steps-prefix-cls}-title { + color: @error-color; + } + .@{steps-prefix-cls}-content { + color: @error-color; + } + .@{steps-prefix-cls}-tail > i { + background-color: @border-color-split; + } + } + + &.@{steps-prefix-cls}-next-error { + .@{steps-prefix-cls}-tail > i, + .@{steps-prefix-cls}-tail > i:after { + background-color: @error-color; + } + } + + &.@{steps-prefix-cls}-custom { + .@{steps-prefix-cls}-head-inner { + background: none; + border: 0; + width: auto; + height: auto; + > .@{steps-prefix-cls}-icon { + font-size: 20px; + top: 2px; + width: 20px; + height: 20px; + } + } + &.@{steps-prefix-cls}-status-process { + .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon { + color: @primary-color; + } + } + } + } + &-item:last-child &-tail{ + display: none; + } + + .@{steps-prefix-cls}-head, + .@{steps-prefix-cls}-main { + position: relative; + display: inline-block; + vertical-align: top; + } + .@{steps-prefix-cls}-head { + background: #373838 !important; + } + + .@{steps-prefix-cls}-head-inner { + display: block; + width: 26px; + height: 26px; + line-height: 24px; + margin-right: 8px; + text-align: center; + border: 1px solid @steps-wait-icon-color; + border-radius: 50%; + font-size: 14px; + transition: background-color @transition-time @ease-in-out; + + > .@{steps-prefix-cls}-icon { + line-height: 1; + position: relative; + + &.ivu-icon { + font-size: 24px; + &-ios-checkmark-empty, + &-ios-close-empty { + font-weight: bold; + } + } + } + } + .@{steps-prefix-cls}-main { + margin-top: 2.5px; + display: inline; + } + .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-title{ + margin-top: 2.5px; + } + + .@{steps-prefix-cls}-title { + display: inline-block; + margin-bottom: 4px; + padding-right: 10px; + font-size: 14px; + font-weight: bold; + color: #666; + background: #373838 !important; + + > a:first-child:last-child { + color: #666; + } + } + .@{steps-prefix-cls}-item-last { + .@{steps-prefix-cls}-title { + padding-right: 0; + width: 100%; + } + } + .@{steps-prefix-cls}-content { + font-size: 12px; + color: #999; + } + .@{steps-prefix-cls}-tail { + width: 100%; + padding: 0 10px; + position: absolute; + left: 0; + top: 13px; + > i { + display: inline-block; + width: 100%; + height: 1px; + vertical-align: top; + background: @border-color-split; + border-radius: 1px; + position: relative; + &:after { + content: ''; + width: 0; + height: 100%; + background: @border-color-split; + opacity: 0; + position: absolute; + top: 0; + } + } + } + + &.@{steps-prefix-cls}-small { + .@{steps-prefix-cls}-head-inner { + width: 18px; + height: 18px; + line-height: 16px; + margin-right: 10px; + text-align: center; + border-radius: 50%; + font-size: 12px; + + > .@{steps-prefix-cls}-icon.ivu-icon { + font-size: 16px; + top: 0; + } + } + .@{steps-prefix-cls}-main { + margin-top: 0; + } + .@{steps-prefix-cls}-title { + margin-bottom: 4px; + margin-top: 0; + color: #666; + font-size: 12px; + font-weight: bold; + } + .@{steps-prefix-cls}-content { + font-size: 12px; + color: #999; + padding-left: 30px; + } + .@{steps-prefix-cls}-tail { + top: 8px; + padding: 0 8px; + > i { + height: 1px; + width: 100%; + border-radius: 1px; + } + } + } + + &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner, + .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner { + width: inherit; + height: inherit; + line-height: inherit; + border-radius: 0; + border: 0; + background: none; + } +} + +.@{steps-prefix-cls}-vertical { + display: block; + .@{steps-prefix-cls}-item { + display: block; + overflow: visible; + } + + .@{steps-prefix-cls}-tail { + position: absolute; + left: 13px; + top: 0; + height: 100%; + width: 1px; + padding: 30px 0 4px 0; + > i { + height: 100%; + width: 1px; + &:after { + height: 0; + width: 100%; + } + } + } + + .@{steps-prefix-cls}-status-finish { + .@{steps-prefix-cls}-tail > i:after { + height: 100%; + } + } + + .@{steps-prefix-cls}-head { + float: left; + &-inner { + margin-right: 16px; + } + } + + .@{steps-prefix-cls}-main { + min-height: 47px; + overflow: hidden; + display: block; + .@{steps-prefix-cls}-title { + line-height: 26px; + } + .@{steps-prefix-cls}-content { + padding-bottom: 12px; + padding-left: 0; + } + } + + .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon { + left: 4px; + } + &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon { + left: 0; + } +} + +.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small { + .@{steps-prefix-cls}-tail { + position: absolute; + left: 9px; + top: 0; + padding: 22px 0 4px 0; + > i { + height: 100%; + } + } + + .@{steps-prefix-cls}-title { + line-height: 18px; + } +} + +.@{steps-prefix-cls}-horizontal { + &.@{steps-prefix-cls}-hidden { + visibility: hidden; + } + .@{steps-prefix-cls}-content { + //max-width: 100px; + padding-left: 35px; + } + .@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head { + padding-left: 10px; + margin-left: -10px; + } +} \ No newline at end of file diff --git a/front/public/theme/miside/table.less b/front/public/theme/miside/table.less new file mode 100644 index 000000000..c2ed1ee59 --- /dev/null +++ b/front/public/theme/miside/table.less @@ -0,0 +1,536 @@ +@table-prefix-cls: ~"@{css-prefix}table"; +@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item"; +@table-bg: #fff; + +.@{table-prefix-cls} { + &-wrapper{ + position: relative; + //border: 1px solid @border-color-base; + //border-bottom: 0; + //border-right: 0; + overflow: hidden; // 开启 max-height 时，没有 overflow: hidden，则底部多出 1px，早期没有 overflow 是因为有些控件没有加 transfer + &-with-border{ + border: 1px solid @border-color-base; + border-bottom: 0; + border-right: 0; + } + } + width: inherit; + height: 100%; + max-width: 100%; + overflow: hidden; + color: @text-color; + font-size: @font-size-base; + box-sizing: border-box; + //position: relative; + + &-summary{ + border-top: 1px solid @border-color-split; + tr td{ + background-color: @table-thead-bg; + } + } + + &-with-summary{ + .ivu-table-tbody{ + tr:last-child td{ + border-bottom: none; + } + } + } + + &-resize-line{ + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 1px; + border-right: 1px dashed @border-color-split; + } + + &-hide{ + opacity: 0; + } + + &:before{ + content: ''; + width: 100%; + height: 1px; + position: absolute; + left: 0; + bottom: 0; + background-color: @border-color-base; + //z-index: 1; + z-index: 4; // 解决开启 border，同时固定表头和列，fixed 的最底下没有边框 + } + + &-border:after{ + content: ''; + width: 1px; + height: 100%; + position: absolute; + top: 0; + right: 0; + background-color: @border-color-base; + z-index: 3; + } + + &-with-header{ + //border-radius: @border-radius-base @border-radius-base 0 0; + } + + &-with-footer{ + //border: 1px solid @border-color-base; + //border-radius: 0 0 @border-radius-base @border-radius-base; + } + + &-with-header&-with-footer{ + //border-radius: @border-radius-base; + } + + &-title, &-footer{ + height: 48px; + line-height: 48px; + border-bottom: 1px solid @border-color-split; + } + &-footer{ + border-bottom: none; + } + + &-header{ + overflow: hidden; + thead{ + tr{ + th{ + position: relative; + height: 100%; + padding: 8px 0; + } + } + } + &-resizable{ + position: absolute; + width: 10px; + height: 100%; + bottom: 0; + right: -5px; + cursor: col-resize; + z-index: 1; + } + } + &-body{ + //overflow: auto; + //position: relative; + + } + &-overflowX{ + overflow-x: scroll; + } + &-overflowY{ + overflow-y: scroll; + } + &-tip{ + overflow-x: auto; + overflow-y: hidden; + //position: relative; + } + + &-with-fixed-top&-with-footer{ + .@{table-prefix-cls}-footer{ + border-top: 1px solid @border-color-base; + } + tbody tr:last-child td{ + border-bottom: none; + } + } + + th, td + { + min-width: 0; + height: 48px; + box-sizing: border-box; + text-align: left; + text-overflow: ellipsis; + vertical-align: middle; + border-bottom: 1px solid @border-color-split; + background-color: @table-bg !important; + } + + th { + height: 40px; + white-space: nowrap; + overflow: hidden; + background-color: @table-thead-bg; + } + td{ + background-color: #fff; + transition: background-color @transition-time @ease-in-out; + } + + th&-column, + td&-column + { + &-left{ + text-align: left; + } + &-center{ + text-align: center; + } + &-right{ + text-align: right; + } + } + + & table{ + //width: 100%; + table-layout: fixed; + } + &-border{ + th,td{ + border-right: 1px solid @border-color-split; + } + } + &-cell{ + padding-left: 18px; + padding-right: 18px; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + word-break: break-all; + box-sizing: border-box; + + &-ellipsis { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-tooltip{ + width: 100%; + display: flex; + align-items: center; + &-content{ + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &-with-expand{ + height: 47px; + line-height: 47px; + padding: 0; + text-align: center; + } + + &-expand{ + cursor: pointer; + transition: transform @transition-time @ease-in-out; + i{ + font-size: @font-size-base; + } + &-expanded{ + transform: rotate(90deg); + } + } + &-sort{ + cursor: pointer; + user-select: none; + } + + // #3159 + &-with-selection{ + .@{checkbox-prefix-cls}-wrapper{ + margin-right: 0; + } + } + + &-tree{ + display: inline-block; + width: 16px; + height: 16px; + border: 1px solid @border-color-base; + border-radius: 2px; + background-color: #fff; + line-height: 12px; + cursor: pointer; + vertical-align: middle; + transition: color @transition-time @ease-in-out, border-color @transition-time @ease-in-out; + + &-empty{ + cursor: default; + color: transparent; + background-color: transparent; + border-color: transparent; + } + + &:hover { + color: @primary-color; + border-color: @primary-color; + } + &-empty:hover{ + color: transparent; + border-color: transparent; + } + + &-loading{ + cursor: default; + background-color: transparent; + border-color: transparent; + &:hover{ + border-color: transparent; + } + } + + &-level{ + display: inline-block; + height: 16px; + } + } + &-slot{ + &-inline{ + display: inline; + } + &-inline-block{ + display: inline-block; + } + } + } + &-hidden{ + visibility: hidden; + } + th &-cell{ + display: inline-block; + //position: relative; + word-wrap: normal; + vertical-align: middle; + } + + td&-expanded-cell{ + padding: 20px 50px; + background: @table-thead-bg; + } + + &-stripe &-body, + &-stripe &-fixed-body + { + tr:nth-child(2n) { + td{ + background-color: @table-td-stripe-bg; + } + } + // #1380 + tr.@{table-prefix-cls}-row-hover{ + td{ + background-color: @table-td-hover-bg; + } + } + } + + tr&-row-hover{ + td{ + background-color: @table-td-hover-bg; + } + } + + &-large { + font-size: @font-size-large; + th{ + height: 48px; + } + td{ + height: 60px; + } + &-title, &-footer{ + height: 60px; + line-height: 60px; + } + .@{table-prefix-cls}-cell-with-expand{ + height: 59px; + line-height: 59px; + i{ + font-size: @font-size-base+2; + } + } + } + + &-small{ + font-size: @font-size-small; + th{ + height: 32px; + } + td{ + height: 40px; + } + &-title, &-footer{ + height: 40px; + line-height: 40px; + } + .@{table-prefix-cls}-cell-with-expand{ + height: 39px; + line-height: 39px; + } + } + + &-row-highlight, + tr&-row-highlight&-row-hover, + &-stripe &-body tr&-row-highlight:nth-child(2n), + &-stripe &-fixed-body tr&-row-highlight:nth-child(2n) + { + td{ + background-color: @table-td-highlight-bg; + } + } + + &-fixed, &-fixed-right{ + position: absolute; + top: 0; + left: 0; + box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2); + + &::before { + content: ''; + width: 100%; + height: 1px; + background-color: @border-color-base; + position: absolute; + left: 0; + bottom: 0; + z-index: 4; + } + } + &-fixed-right{ + top: 0; + left: auto; + right: 0; + box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); + } + &-fixed-right-header{ + position: absolute; + top: -1px; + right: 0; + background-color: @table-thead-bg; + border-top: 1px solid @border-color-base; + border-bottom: 1px solid @border-color-split; + } + &-fixed-header{ + overflow: hidden; + // 在 #1387 里，添加了下面的代码，但是在 #5174 会出现新的问题。 + // 但是，在新版本里，注释掉后，#1387 的问题并没有再复现，所以注释掉 + //&-with-empty{ + // .@{table-prefix-cls}-hidden{ + // .@{table-prefix-cls}-sort{ + // display: none; + // } + // .@{table-prefix-cls}-cell span{ + // display: none; + // } + // } + //} + thead{ + tr{ + th{ + position: relative; + height: 100%; + padding: 8px 0; + } + } + } + } + &-fixed-body{ + overflow: hidden; + position: relative; + z-index: 3; + } + + &-fixed-shadow { + width: 1px; + height: 100%; + position: absolute; + top: 0; + right: 0; + box-shadow: @shadow-right; + overflow: hidden; + z-index: 1; + } + + &-sort{ + .sortable(); + } + &-filter{ + display: inline-block; + cursor: pointer; + position: relative; + //top: 1px; + + i{ + color: @btn-disable-color; + transition: color @transition-time @ease-in-out; + &:hover{ + color: inherit; + } + &.on{ + color: @primary-color; + } + } + &-list{ + padding: 8px 0 0; + &-item{ + padding: 0 12px 8px; + + .ivu-checkbox-wrapper + .ivu-checkbox-wrapper{ + margin: 0; + } + label { + display: block; + + & > span{ + margin-right: 4px; + } + } + } + ul{ + padding-bottom: 8px; + } + .select-item(@table-prefix-cls, @table-select-item-prefix-cls); + } + &-footer{ + padding: 4px; + border-top: 1px solid @border-color-split; + overflow: hidden; + button:first-child{ + float: left; + } + button:last-child{ + float: right; + } + } + } + + &-tip { + table { + width: 100%; + + td { + text-align: center; + } + } + } + + &-expanded-hidden{ + visibility: hidden; + } + + &-context-menu{ + position: absolute; + } +} +.ivu-table-popper{ + min-width: 0; + text-align: left; + .ivu-poptip-body{ + padding: 0; + } +} diff --git a/front/public/theme/miside/tag.less b/front/public/theme/miside/tag.less new file mode 100644 index 000000000..98269621e --- /dev/null +++ b/front/public/theme/miside/tag.less @@ -0,0 +1,266 @@ +@tag-prefix-cls: ~"@{css-prefix}tag"; +@tag-close-prefix-cls: ivu-icon-ios-close; +@tag-color: @primary-color; + +.@{tag-prefix-cls} { + display: inline-block; + height: 22px; + line-height: 22px; + margin: 2px 4px 2px 0; + padding: 0 8px; + border: 1px solid @border-color-split; + border-radius: @btn-border-radius-small; + color: tint(@border-color-split, 80%); + background: fade(@background-color-base, 50%); + font-size: @tag-font-size; + vertical-align: middle; + opacity: 1; + overflow: hidden; + transition: all @transition-time @ease-in-out; + + &-size-large{ + height: 32px; + line-height: 32px; + padding: 0 12px; + } + &-size-medium{ + height: 28px; + line-height: 28px; + padding: 0 10px; + } + + // for color and unchecked + &:not(&-border):not(&-dot):not(&-checked){ + background: transparent; + border: 0; + color: @text-color; + .@{tag-close-prefix-cls} { + color: @text-color !important; + } + } + + &-color{ + &-error{ + color: @error-color !important; + border-color: @error-color; + } + &-success{ + color: @success-color !important; + border-color: @success-color; + } + &-primary{ + color: @tag-color !important; + border-color: @tag-color; + } + &-warning{ + color: @warning-color !important; + border-color: @warning-color; + } + &-white{ + color: rgb(255, 255, 255) !important; + } + } + + &-dot{ + height: 32px; + line-height: 32px; + border: 1px solid @border-color-split !important; + color: @text-color !important; + background: #fff !important; + padding: 0 12px; + + &-inner{ + display: inline-block; + width: 12px; + height: 12px; + margin-right: 8px; + border-radius: 50%; + background: @border-color-split; + position: relative; + top: 1px; + } + .@{tag-close-prefix-cls} { + color: #666 !important; + margin-left: 12px !important; + } + } + + &-border{ + height: 24px; + line-height: 24px; + border: 1px solid @border-color-split; + color: @border-color-split; + background: @white !important; + position: relative; + + .@{tag-close-prefix-cls} { + color: #666; + margin-left: 12px !important; + } + + &:after{ + content: ""; + display: none; + width: 1px; + background: themeColor; + position: absolute; + top: 0; + bottom: 0; + right: 22px; + } + + &.@{tag-prefix-cls}-closable { + &:after{ + display: block; + } + .@{tag-close-prefix-cls} { + margin-left: 18px !important; + left: 4px; + top: -1px; + } + } + + &.@{tag-prefix-cls}-primary { + color: @tag-color !important; + border: 1px solid @tag-color !important; + + &:after{ + background: @tag-color; + } + .@{tag-close-prefix-cls}{ + color: @tag-color !important; + } + } + &.@{tag-prefix-cls}-success { + color: @success-color !important; + border: 1px solid @success-color !important; + + &:after{ + background: @success-color; + } + .@{tag-close-prefix-cls}{ + color: @success-color !important; + } + } + &.@{tag-prefix-cls}-warning { + color: @warning-color !important; + border: 1px solid @warning-color !important; + + &:after{ + background: @warning-color; + } + .@{tag-close-prefix-cls}{ + color: @warning-color !important; + } + } + &.@{tag-prefix-cls}-error { + color: @error-color !important; + border: 1px solid @error-color !important; + + &:after{ + background: @error-color; + } + .@{tag-close-prefix-cls}{ + color: @error-color !important; + } + } + } + + &:hover { + opacity: 0.85; + } + + &-text { + a:first-child:last-child { + display: inline-block; + margin: 0 -8px; + padding: 0 8px; + } + color: @text-color; + } + + .@{tag-close-prefix-cls} { + .iconfont-size-under-12px(20px); + cursor: pointer; + margin-left: 2px; + color: #666; + opacity: 0.66; + position: relative; + top: -1px; + //transition: all @transition-time @ease-in-out; + + &:hover { + opacity: 1; + } + } + + &-primary, + &-success, + &-warning, + &-error { + border: 0; + &, + a, + a:hover, + .@{tag-close-prefix-cls}, + .@{tag-close-prefix-cls}:hover { + color: #fff; + } + } + + &-primary, + &-primary&-dot &-dot-inner + { + background: @tag-color; + } + + &-success, + &-success&-dot &-dot-inner + { + background: @success-color; + } + + &-warning, + &-warning&-dot &-dot-inner + { + background: @warning-color; + } + + &-error, + &-error&-dot &-dot-inner + { + background: @error-color; + } + + @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple; + + .make-color-classes(@i: length(@colors)) when (@i > 0) { + .make-color-classes(@i - 1); + @color: extract(@colors, @i); + @lightColor: "@{color}-1"; + @lightBorderColor: "@{color}-3"; + @darkColor: "@{color}-6"; + &-@{color} { + line-height: 20px; + background: @@lightColor; + border-color: @@lightBorderColor; + .@{tag-prefix-cls}-text{ + color: @@darkColor !important; + } + &.@{tag-prefix-cls}-dot{ + line-height: 32px; + } + & a { + color: #000 !important; + } + } + .ivu-tag-size-large&-@{color} { + line-height: 30px; + } + .ivu-tag-size-medium&-@{color} { + line-height: 26px; + } + } + + .make-color-classes(); +} diff --git a/front/public/theme/miside/time.less b/front/public/theme/miside/time.less new file mode 100644 index 000000000..2d3fe4695 --- /dev/null +++ b/front/public/theme/miside/time.less @@ -0,0 +1,12 @@ +@time-prefix-cls: ~"@{css-prefix}time"; + +.@{time-prefix-cls} { + color: @normal-color; + + &-with-hash{ + cursor: pointer; + &:hover{ + text-decoration: underline; + } + } +} \ No newline at end of file