magiccube-vue3/package/style/theme.less

vue3-js版组件库

@import './root.css';

// font-size
@font-title: 20px;
@font-sup: 18px;
@font-big: 16px;
@font-default: 14px;
@font-small: 12px;
@font-mini: 10px;

@color-font: #333;
@color-font-nav: #666;
@color-font-title: #111621;
@color-font-sub: #737A89;
@color-font-light: #475166;
@color-font-disabled: #828B97;

@color-default: var(--mc-main-color);
@color-error: var(--mc-error-color);
@color-important: #F5222D;
@color-special: #FF3737;
@color-warning: #faad14;
@color-success: #52c41a;
@color-price: #ff6500;

@color-border: #d9d9d9;
@color-bg: #efefef;
@color-disabled: #d9d9d9;
@color-placeholder: #999;
@color-scroll: #C2C5CC;
@color-hover:#29D1FF;
@color-split: #e8e8e8;
@color-gray-default: #fafafa;

@collapse-header-bg-color: #F4F8FB;
@collapse-header-height: 54px;
@collapse-transition: rgb(209, 219, 229) .3s;
@collapse-box-shadow: 0px 1px 6px 2px rgba(104, 152, 166, 0.16);

@padding-page-default: 24px 32px;
@padding-tab-page: 8px 0 24px;
@padding-panel: 15px;

@content-min-width: 1208px;

@border-radius: 2px;
@border-radius-tab: 2px;
@border-default: 1px solid @color-border;
@border-split: 1px solid @color-split;
@border-subscript: 2px solid @color-default;

@popup-shadow: 0 0 12px rgba(0,0,0,.2);
@card-shadow: 0 0 10px rgba(93,92,92,0.19);
@card-hover-shadow: 0 4px 6px rgba(0,0,0,0.50);
@input-hover-shadow: 0 0 3px 0 #00b0eb6b;

@mask-default: rgba(0,0,0,.5);
@mask-light: rgba(255,255,255,.3);

@shadow-default: 0 0 12px rgba(0,0,0,.2);

@btn-height: 32px;
@btn-big-height: 40px;
@btn-small-height: 24px;
@tab-height: 32px;

@global-padding: 24px;

/* module */
@input-height: 32px;
@label-width: 80px;

@input-background: var(--mc-background-color);
@input-border: 1px solid var(--mc-background-color);
@input-hover-border: 1px solid var(--mc-main-color);
@input-radius: 16px;
@input-placeholder: var(--mc-placeholder-color);

@select-result-border: 1px solid var(--mc-split-color);
@select-result-radius: 12px;
@select-result-background: #DCE4ED;
@select-result-text-color: var(--mc-title-color);


/* z-index */
@popup-z: 10000;
@popup-inner-z: 10001;

@margin-bottom-mini: 16px;
@margin-bottom-item: 24px;
@margin-bottom-form: 32px;

@process-light: #4DC600;
@pause-light: rgba(0,0,0,0.25);

// html{
//     margin: 0;
//     padding: 0;
// }

// body {
//     margin: 0;
//     padding: 0;
//     font-size: 14px;
//     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
//     -webkit-font-smoothing: antialiased;
//     color: @color-font;
// }

// img {
//     border: none;
//     vertical-align: middle;
// }

// * {
//     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
//     box-sizing: border-box;
//     word-break: break-all;
//     word-wrap: break-word;
// }

// a {
//     text-decoration: none;
//     color: @color-default;
// }

// p {
//     margin: 0;
// }

// button {
//     appearance: none;
//     border: none;
//     outline: none;
// }

// h1,
// h2,
// h3,
// h4,
// h5 {
//     margin: 0;
//     padding: 0;
// }

// em,
// i {
//     font-style: normal;
// }

// ul,
// dl,
// dt,
// dd {
//     margin: 0;
//     padding: 0;
//     list-style: none;
//     list-style-position: inside;
// }


// input::-webkit-input-placeholder,
// textarea::-webkit-input-placeholder {
//     color: @color-placeholder;
//     font-size: @font-small;
// }

// input:-moz-placeholder,
// textarea:-moz-placeholder {
//     color: @color-placeholder;
//     font-size: @font-small;
// }

// input::-moz-placeholder,
// textarea::-moz-placeholder {
//     color: @color-placeholder;
//     font-size: @font-small;
// }

// input:-ms-input-placeholder,
// textarea:-ms-input-placeholder {
//     color: @color-placeholder;
//     font-size: @font-small;
// }

// *::-webkit-scrollbar {
//     width: 6px;
//     height: 6px;
// }

// *::-webkit-scrollbar-thumb {
//     border-radius: 6px;
//     background: #DCE4ED !important;
// }

// label {
//     &.required::before {
//         content: '*';
//         margin-right: 5px;
//         color: @color-important;
//     }
// }

// table {
//     width: 100%;
// }