theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨特性: 删除所有公共样式导入, 使用 css3 变量完全代替 less 变量

Browse Source
This commit is contained in:
就眠儀式 2022-04-25 23:03:29 +08:00
parent 57b52152bc
commit 921bb3cc26
61 changed files with 276 additions and 493 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "1.0.5-dev.5",
"version": "1.0.5-dev.8",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",

1
package/component/script/build.es.ts
View File

@ -89,7 +89,6 @@ export default (): UserConfigExport => {
}
},
chunkFileNames: ({ name }) => {
console.log(name);
return name === "index" ? "index.js" : "[name]/index.js";
},
entryFileNames: ({ name }) => {

5
package/component/src/component/avatar/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-avatar {
box-sizing: border-box;
margin: 0;
@ -22,7 +19,7 @@
width: 32px;
height: 32px;
line-height: 32px;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
}
.layui-avatar.layui-avatar-radius {

2
package/component/src/component/avatarList/index.less
View File

@ -1,2 +0,0 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";

6
package/component/src/component/backTop/index.less
View File

@ -1,7 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
/** backtop **/
@width: 50px;
@height: @width;
@ -18,7 +14,7 @@
font-size: 40px;
background-color: #9f9f9f;
color: #ffffff;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
opacity: 0.95;
z-index: 999999;
:hover {

7
package/component/src/component/badge/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
@ -11,7 +8,7 @@
text-align: center;
background-color: #ff5722;
color: #fff;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
}
.layui-badge {
@ -32,7 +29,7 @@
border-width: 1px;
border-style: solid;
background-color: #fff;
border-color: @global-neutral-color-3;
border-color: var(--global-neutral-color-3);
color: #666;
}

3
package/component/src/component/body/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-body {
display: block;
flex: 1;

7
package/component/src/component/breadcrumb/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-breadcrumb {
font-size: 0;
}
@ -14,7 +11,7 @@
}
.layui-breadcrumb a:hover {
color: @global-checked-color !important;
color: var(--global-checked-color) !important;
}
.layui-breadcrumb a:nth-last-child(2) {
@ -28,5 +25,5 @@
.layui-breadcrumb span[lay-separator] {
margin: 0 10px;
color: @global-neutral-color-7;
color: var(--global-neutral-color-7);
}

3
package/component/src/component/button/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
:root {
--button-primary-text-color: #fff;
--button-primary-background-color: var(--global-primary-color);

3
package/component/src/component/buttonContainer/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-btn-container {
font-size: 0;
}

13
package/component/src/component/buttonGroup/index.less
View File

@ -1,8 +1,7 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@button-primary-color: @global-primary-color;
@button-border-radius: @global-border-radius;
:root {
--button-primary-color: var(--global-primary-color);
--button-border-radius: var(--global-border-radius);
}
.layui-btn-group {
vertical-align: middle;
@ -20,11 +19,11 @@
}
.layui-btn-group .layui-btn:first-child {
border-radius: @button-border-radius 0 0 @button-border-radius;
border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
}
.layui-btn-group .layui-btn:last-child {
border-radius: 0 @button-border-radius @button-border-radius 0;
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
}
.layui-btn-group .layui-btn + .layui-btn {

3
package/component/src/component/card/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
:root {
--card-border-radius: var(--global-border-radius);
}

7
package/component/src/component/carousel/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-carousel {
position: relative;
left: 0;
@ -24,7 +21,7 @@
line-height: 20px;
margin: -10px 0 0 -50px;
text-align: center;
color: @global-neutral-color-8;
color: var(--global-neutral-color-8);
font-family: layui-icon !important;
font-size: 30px;
font-style: normal;
@ -139,7 +136,7 @@
height: 10px;
margin: 0 3px;
font-size: 14px;
background-color: @global-neutral-color-3;
background-color: var(--global-neutral-color-3);
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;

37
package/component/src/component/checkbox/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-form-checkbox {
position: relative;
height: 30px;
@ -19,13 +16,13 @@
height: 100%;
font-size: 14px;
border-radius: 2px 0 0 2px;
background-color: @global-neutral-color-6;
background-color: var(--global-neutral-color-6);
color: #fff;
overflow: hidden;
}
.layui-form-checkbox:hover span {
background-color: @global-neutral-color-8;
background-color: var(--global-neutral-color-8);
}
.layui-form-checkbox i {
@ -34,7 +31,7 @@
width: 29px;
height: 28px;
position: absolute;
border: 1px solid @global-neutral-color-6;
border: 1px solid var(--global-neutral-color-6);
border-radius: 0 2px 2px 0;
color: #fff;
font-size: 20px;
@ -42,8 +39,8 @@
}
.layui-form-checkbox:hover i {
border-color: @global-neutral-color-8;
color: @global-neutral-color-8;
border-color: var(--global-neutral-color-8);
color: var(--global-neutral-color-8);
}
.layui-form-checkbox[lay-skin="primary"] {
@ -72,7 +69,7 @@
width: 16px;
height: 16px;
line-height: 16px;
border: 1px solid @global-neutral-color-6;
border: 1px solid var(--global-neutral-color-6);
font-size: 12px;
border-radius: 2px;
background-color: #fff;
@ -81,28 +78,28 @@
}
.layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: @global-checked-color;
border-color: var(--global-checked-color);
color: #fff;
}
.layui-form-checked,
.layui-form-checked:hover {
border-color: @global-checked-color;
border-color: var(--global-checked-color);
}
.layui-form-checked i,
.layui-form-checked:hover i {
color: @global-checked-color;
color: var(--global-checked-color);
}
.layui-form-checked span,
.layui-form-checked:hover span {
background-color: @global-checked-color;
background-color: var(--global-checked-color);
}
.layui-form-checked[lay-skin="primary"] i {
border-color: @global-checked-color !important;
background-color: @global-checked-color;
border-color: var(--global-checked-color) !important;
background-color: var(--global-checked-color);
color: #fff;
}
@ -112,24 +109,24 @@
.layui-checkbox-disabled[lay-skin="primary"] span {
background: 0 0 !important;
color: @global-neutral-color-8 !important;
color: var(--global-neutral-color-8) !important;
}
.layui-checkbox-disabled[lay-skin="primary"]:hover i {
border-color: @global-neutral-color-6;
border-color: var(--global-neutral-color-6);
}
.layui-checkbox-disabled,
.layui-checkbox-disabled i {
border-color: @global-neutral-color-3 !important;
border-color: var(--global-neutral-color-3) !important;
}
.layui-checkbox-disabled span {
background-color: @global-neutral-color-3 !important;
background-color: var(--global-neutral-color-3) !important;
}
.layui-checkbox-disabled em {
color: @global-neutral-color-6 !important;
color: var(--global-neutral-color-6) !important;
}
.layui-checkbox-disabled:hover i {

5
package/component/src/component/collapse/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-collapse {
border-width: 1px;
border-style: solid;
@ -23,7 +20,7 @@
line-height: 42px;
padding: 0 15px 0 35px;
color: #333;
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
cursor: pointer;
font-size: 14px;
overflow: hidden;

15
package/component/src/component/colorPicker/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-color-picker {
position: relative;
user-select: none;
@ -109,7 +106,7 @@
width: 26px;
height: 26px;
display: block;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
background-size: 10px 10px;
}
@ -180,9 +177,9 @@
}
.layui-colorpicker {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
padding: 5px;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
line-height: 24px;
display: inline-block;
cursor: pointer;
@ -191,7 +188,7 @@
}
.layui-colorpicker:hover {
border-color: @global-neutral-color-6;
border-color: var(--global-neutral-color-6);
}
.layui-colorpicker.layui-colorpicker-lg {
@ -223,7 +220,7 @@
height: 100%;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
text-align: center;
}
@ -246,7 +243,7 @@
margin: 5px 0;
padding: 7px;
background: #fff;
border: 1px solid @global-neutral-color-6;
border: 1px solid var(--global-neutral-color-6);
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

3
package/component/src/component/container/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-container {
position: relative;
margin: 0 auto;

3
package/component/src/component/datePicker/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@font-face {
font-family: "laydate-icon";
src: url("./font/iconfont.eot");

5
package/component/src/component/dropdown/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-dropdown {
position: relative;
display: inline-block;
@ -22,7 +19,7 @@
}
.layui-dropdown dl > .layui-dropdown-menu {
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
}
.layui-dropdown-up > dl {

3
package/component/src/component/empty/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-empty {
margin: 0 8px;
font-size: 14px;

3
package/component/src/component/exception/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-exception {
.layui-exception-image {
width: 50%;

12
package/component/src/component/field/index.less
View File

@ -1,19 +1,13 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@field-border-color: var(--field-border-color);
@field-border-radius: var(--field-border-radius);
:root {
--field-border-color: @global-neutral-color-3;
--field-border-radius: @global-border-radius;
--field-border-color: var(--global-neutral-color-3);
--field-border-radius: var(--global-border-radius);
}
.layui-field {
margin-bottom: 10px;
padding: 0;
border-width: 1px;
border-color: @field-border-color;
border-color: var(--field-border-color);
border-style: solid;
}

3
package/component/src/component/footer/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-footer {
box-sizing: border-box;
}

224
package/component/src/component/form/index.less
View File

@ -1,129 +1,125 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-form-item {
margin-bottom: 20px;
clear: both;
*zoom: 1;
}
margin-bottom: 20px;
clear: both;
*zoom: 1;
}
.layui-form-item:after {
content: "\20";
clear: both;
*zoom: 1;
display: block;
height: 0;
}
.layui-form-item:after {
content: "\20";
clear: both;
*zoom: 1;
display: block;
height: 0;
}
.layui-form-label {
float: left;
display: block;
padding: 9px 15px;
width: 80px;
font-weight: 400;
line-height: 20px;
text-align: right;
}
.layui-form-label {
float: left;
display: block;
padding: 9px 15px;
width: 80px;
font-weight: 400;
line-height: 20px;
text-align: right;
}
.layui-form-label-col {
display: block;
float: none;
padding: 9px 0;
line-height: 20px;
text-align: left;
}
.layui-form-label-col {
display: block;
float: none;
padding: 9px 0;
line-height: 20px;
text-align: left;
}
.layui-form-item .layui-inline {
margin-bottom: 5px;
margin-right: 10px;
}
.layui-form-item .layui-inline {
margin-bottom: 5px;
margin-right: 10px;
}
.layui-input-block {
margin-left: 110px;
min-height: 36px;
}
.layui-input-block {
margin-left: 110px;
min-height: 36px;
}
.layui-input-inline {
display: inline-block;
vertical-align: middle;
}
.layui-form-item .layui-input-inline {
float: left;
width: 190px;
margin-right: 10px;
}
.layui-form-text .layui-input-inline {
width: auto;
}
.layui-form-mid {
float: left;
display: block;
padding: 9px 0 !important;
line-height: 20px;
margin-right: 10px;
}
.layui-form-danger + .layui-form-select .layui-input,
.layui-form-danger:focus {
border-color: #ff5722 !important;
}
.layui-form-item .layui-form-checkbox {
margin-top: 4px;
}
.layui-form-item .layui-form-checkbox[lay-skin="primary"] {
margin-top: 10px;
}
.layui-required {
color: #ff5722;
font-size: 12px;
line-height: 1;
}
.layui-form .layui-form-item {
.layui-input-block,
.layui-input-inline {
display: inline-block;
vertical-align: middle;
}
.layui-form-item .layui-input-inline {
float: left;
width: 190px;
margin-right: 10px;
}
.layui-form-text .layui-input-inline {
width: auto;
}
.layui-form-mid {
float: left;
display: block;
padding: 9px 0 !important;
line-height: 20px;
margin-right: 10px;
}
.layui-form-danger + .layui-form-select .layui-input,
.layui-form-danger:focus {
border-color: #ff5722 !important;
}
.layui-form-item .layui-form-checkbox {
margin-top: 4px;
}
.layui-form-item .layui-form-checkbox[lay-skin="primary"] {
margin-top: 10px;
}
.layui-required {
color: #ff5722;
font-size: 12px;
line-height: 1;
}
.layui-form .layui-form-item {
.layui-input-block,
.layui-input-inline {
.layui-form-danger {
&,
.layui-input {
border-color: #ff5722 !important;
}
.layui-form-danger {
&,
.layui-input {
border-color: #ff5722 !important;
}
}
}
}
.layui-error-message {
color: #ff5722;
font-size: 12px;
line-height: 1;
padding-top: 5px;
position: absolute;
top: 100%;
left: 0;
.layui-error-message {
color: #ff5722;
font-size: 12px;
line-height: 1;
padding-top: 5px;
position: absolute;
top: 100%;
left: 0;
}
.layui-error-message-anim {
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: layui-top-show-anim 0.3s ease 1;
animation: layui-top-show-anim 0.3s ease 1;
}
@keyframes layui-top-show-anim {
0% {
opacity: 0.3;
transform: rotateX(45deg);
}
.layui-error-message-anim {
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: layui-top-show-anim 0.3s ease 1;
animation: layui-top-show-anim 0.3s ease 1;
100% {
opacity: 1;
transform: rotateX(0);
}
@keyframes layui-top-show-anim {
0% {
opacity: 0.3;
transform: rotateX(45deg);
}
100% {
opacity: 1;
transform: rotateX(0);
}
}
}

3
package/component/src/component/fullscreen/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-fullscreen {
position: fixed;
top: 0;

3
package/component/src/component/header/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-header {
box-sizing: border-box;
height: 60px;

2
package/component/src/component/icon/index.less
View File

@ -1,2 +0,0 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";

18
package/component/src/component/iconPicker/index.less
View File

@ -1,12 +1,6 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@icon-picker-border-radius: var(--icon-picker-border-radius);
@icon-picker-checked-color: var(--icon-picker-checked-color);
:root {
--icon-picker-border-radius: @global-border-radius;
--icon-picker-checked-color: @global-checked-color;
--icon-picker-border-radius: var(--global-border-radius);
--icon-picker-checked-color: var(--global-checked-color);
}
.layui-iconpicker {
@ -15,7 +9,7 @@
line-height: 38px;
border-width: 1px;
border-style: solid;
border-radius: @icon-picker-border-radius;
border-radius: var(--icon-picker-border-radius);
cursor: pointer;
}
@ -95,13 +89,13 @@
}
.layui-iconpicker-list li:hover {
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
color: rgba(0, 0, 0, 0.5);
}
.layui-iconpicker-list li.layui-this {
border-color: @icon-picker-checked-color;
color: @icon-picker-checked-color;
border-color: var(--icon-picker-checked-color);
color: var(--icon-picker-checked-color);
}
.layui-iconpicker-list li .layui-icon {

14
package/component/src/component/input/index.less
View File

@ -1,12 +1,6 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@input-border-radius: var(--input-border-radius);
@input-border-color: var(--input-border-color);
:root {
--input-border-radius: @global-border-radius;
--input-border-color: @global-neutral-color-3;
--input-border-radius: var(--global-border-radius);
--input-border-color: var(--global-neutral-color-3);
}
.layui-input {
@ -27,8 +21,8 @@
border-width: 1px;
border-style: solid;
display: inline-flex;
border-color: @input-border-color;
border-radius: @input-border-radius;
border-color: var(--input-border-color);
border-radius: var(--input-border-radius);
}
.layui-input-prefix {

7
package/component/src/component/inputNumber/index.less
View File

@ -1,8 +1,5 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@border-color: #eee;
@hover-border-color: @global-primary-color;
@hover-border-color: var(--global-primary-color);
@lg: 40px;
@lg-wdith: 200px;
@lg-right: 20px;
@ -51,7 +48,7 @@
box-sizing: border-box;
border: 1px solid @border-color;
border-color: @border-color;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
overflow: hidden;
.set-size(@lg-wdith, @lg, @lg-right);
margin-left: 5px;

3
package/component/src/component/layout/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-layout {
flex: 1;
display: flex;

7
package/component/src/component/line/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-line {
&-horizontal {
position: relative;
@ -9,7 +6,7 @@
min-width: 100%;
max-width: 100%;
margin: 10px 0;
border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
border-top-style: none;
border-left-style: none;
border-right-style: none;
@ -26,7 +23,7 @@
height: 1em;
margin: 0 8px;
vertical-align: middle;
border-left: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
border-left: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
border-top-style: none;
border-bottom-style: none;
border-right-style: none;

5
package/component/src/component/logo/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-logo {
left: 0;
top: 0;
@ -8,6 +5,6 @@
height: 60px;
line-height: 60px;
text-align: center;
color: @global-primary-color;
color: var(--global-primary-color);
font-size: 16px;
}

13
package/component/src/component/menu/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
top: 0px;
left: calc(100% + 5px);
@ -62,7 +59,7 @@
top: 0;
width: 0;
height: 3px;
background-color: @global-checked-color;
background-color: var(--global-checked-color);
transition: all 0.2s;
-webkit-transition: all 0.2s;
pointer-events: none;
@ -211,13 +208,13 @@
.layui-nav-tree .layui-nav-bar {
width: 5px;
height: 0;
background-color: @global-primary-color;
background-color: var(--global-primary-color);
}
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-this > a:hover {
background-color: @global-primary-color;
background-color: var(--global-primary-color);
color: #fff;
}
@ -293,14 +290,14 @@
.layui-nav-tree.inverted .layui-this,
.layui-nav-tree.inverted .layui-this:hover {
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
margin: 0px 6px;
width: auto;
}
.layui-nav-tree.inverted .layui-this > a,
.layui-nav-tree.inverted .layui-this:hover > a {
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
}
.layui-nav-tree.inverted .layui-this > a {

11
package/component/src/component/page/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-laypage {
display: inline-block;
*display: inline;
@ -33,7 +30,7 @@
.layui-laypage input,
.layui-laypage select,
.layui-laypage span {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
}
.layui-laypage a,
@ -52,7 +49,7 @@
}
.layui-laypage a:hover {
color: @global-primary-color;
color: var(--global-primary-color);
}
.layui-laypage em {
@ -84,7 +81,7 @@
padding: 1px;
width: 100%;
height: 100%;
background-color: @global-primary-color;
background-color: var(--global-primary-color);
}
.layui-laypage-em {
@ -154,7 +151,7 @@
.layui-laypage input:focus,
.layui-laypage select:focus {
border-color: @global-primary-color !important;
border-color: var(--global-primary-color) !important;
}
.layui-laypage button {

14
package/component/src/component/panel/index.less
View File

@ -1,19 +1,13 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@panel-border-color: var(--panel-border-color);
@panel-border-radius: var(--panel-border-radius);
:root {
--panel-border-color: @global-neutral-color-3;
--panel-border-radius: @global-border-radius;
--panel-border-color: var(--global-neutral-color-3);
--panel-border-radius: var(--global-border-radius);
}
.layui-panel {
border-width: 1px;
border-style: solid;
border-radius: @panel-border-radius;
border-color: @panel-border-color;
border-radius: var(--panel-border-radius);
border-color: var(--panel-border-color);
background-color: #fff;
}

2
package/component/src/component/popper/index.less
View File

@ -1,5 +1,3 @@
@import (reference) "../../theme/variable.less";
// 主题颜色
// 浅色 --> 默认使用
@ligh-background: #FFF;

7
package/component/src/component/progress/index.less
View File

@ -1,11 +1,8 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-progress {
position: relative;
height: 6px;
border-radius: 20px;
background-color: @global-neutral-color-3;
background-color: var(--global-neutral-color-3);
}
.layui-progress-bar {
@ -17,7 +14,7 @@
height: 6px;
border-radius: 20px;
text-align: right;
background-color: @global-checked-color;
background-color: var(--global-checked-color);
transition: all 0.3s;
-webkit-transition: all 0.3s;
}

16
package/component/src/component/quote/index.less
View File

@ -1,21 +1,15 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@block-default-color: var(--block-default-color);
@block-border-radius: var(--block-border-radius);
:root {
--block-default-color: @global-checked-color;
--block-border-radius: @global-border-radius;
--block-default-color: var(--global-checked-color);
--block-border-radius: var(--global-border-radius);
}
.layui-quote {
padding: 15px;
line-height: 1.6;
margin-bottom: 10px;
border-left: 5px solid @block-default-color;
border-radius: @block-border-radius;
background-color: @global-neutral-color-1;
border-left: 5px solid var(--block-default-color);
border-radius: var(--block-border-radius);
background-color: var(--global-neutral-color-1);
}
.layui-quote-nm {

11
package/component/src/component/radio/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-form-radio,
.layui-form-radio * {
display: inline-block;
@ -22,19 +19,19 @@
.layui-form-radio > i {
margin-right: 8px;
font-size: 22px;
color: @global-neutral-color-8;
color: var(--global-neutral-color-8);
}
.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed > i {
color: @global-checked-color;
color: var(--global-checked-color);
}
.layui-radio-disabled > i {
color: @global-neutral-color-3 !important;
color: var(--global-neutral-color-3) !important;
}
.layui-radio-disabled * {
color: @global-neutral-color-8 !important;
color: var(--global-neutral-color-8) !important;
}

3
package/component/src/component/rate/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-rate,
.layui-rate * {
display: inline-block;

9
package/component/src/component/result/index.less
View File

@ -1,28 +1,30 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.result {
text-align: center;
}
.result .success svg {
color: #32c682;
text-align: center;
margin-top: 40px;
}
.result .failure svg {
color: #f56c6c;
text-align: center;
margin-top: 40px;
}
.result .title {
margin-top: 25px;
}
.result .desc {
margin-top: 25px;
width: 60%;
margin-left: 20%;
color: rgba(0, 0, 0, 0.45);
}
.result .content {
margin-top: 20px;
width: 80%;
@ -30,6 +32,7 @@
background-color: white;
margin-left: 10%;
}
.result .extra {
padding-top: 10px;
border-top: 1px whitesmoke solid;

3
package/component/src/component/ripple/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-water-ripples-container {
position: relative;
display: inline-block;

3
package/component/src/component/row/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-row:after,
.layui-row:before {
content: "";

3
package/component/src/component/scroll/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.scrollbar-box {
height: 100%;
overflow: hidden !important;

15
package/component/src/component/select/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
dl.layui-anim-upbit > dd input[type="checkbox"] {
display: none;
}
@ -80,7 +77,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
margin-top: -3px;
cursor: pointer;
border-width: 6px;
border-top-color: @global-neutral-color-8;
border-top-color: var(--global-neutral-color-8);
border-top-style: solid;
transition: all 0.3s;
-webkit-transition: all 0.3s;
@ -94,11 +91,11 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
padding: 5px 0;
z-index: 899;
min-width: 100%;
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
max-height: 300px;
overflow-y: auto;
background-color: #fff;
border-radius: @global-border-radius;
border-radius: var(--global-border-radius);
box-sizing: border-box;
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
}
@ -122,7 +119,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
}
.layui-form-select dl dd:hover {
background-color: @global-neutral-color-2;
background-color: var(--global-neutral-color-2);
-webkit-transition: 0.5s all;
transition: 0.5s all;
}
@ -137,8 +134,8 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
}
.layui-form-select dl dd.layui-this {
background-color: @global-neutral-color-2;
color: @global-checked-color;
background-color: var(--global-neutral-color-2);
color: var(--global-checked-color);
font-weight: 700;
}

3
package/component/src/component/side/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-side {
overflow: auto;
overflow-x: hidden;

3
package/component/src/component/skeleton/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.lay-skeleton {
.lay-skeleton-item {
height: 16px;

18
package/component/src/component/slider/index.less
View File

@ -1,7 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
// 横向样式
.layui-slider-v {
width: 100%;
height: 18px;
@ -19,9 +15,9 @@
.layui-slider-btn-v {
width: 12px;
height: 12px;
background-color: @global-back-color;
background-color: var(--global-back-color);
position: absolute;
border: 2px solid @global-primary-color;
border: 2px solid var(--global-primary-color);
border-radius: 50%;
cursor: pointer;
left: 0%;
@ -34,7 +30,7 @@
position: absolute;
top: 6px;
left: 0;
background-color: @global-primary-color;
background-color: var(--global-primary-color);
z-index: 1;
}
@ -57,7 +53,7 @@
}
.layui-slider-disabled-rate {
background-color: @global-primary-color !important;
background-color: var(--global-primary-color) !important;
}
// 纵向样式
@ -75,9 +71,9 @@
.layui-slider-vertical-btn {
width: 12px;
height: 12px;
background-color: @global-back-color;
background-color: var(--global-back-color);
position: absolute;
border: 2px solid @global-primary-color;
border: 2px solid var(--global-primary-color);
border-radius: 50%;
cursor: pointer;
bottom: 0%;
@ -91,7 +87,7 @@
position: absolute;
bottom: 0;
left: 7px;
background-color: @global-primary-color;
background-color: var(--global-primary-color);
z-index: 1;
}

7
package/component/src/component/splitPanel/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.lay-split-panel {
height: 100%;
display: flex;
@ -19,7 +16,7 @@
height: 100%;
width: 3px;
border: 1px #eeeeee solid;
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
border-left: none;
border-right: none;
cursor: col-resize;
@ -51,7 +48,7 @@
height: 3px;
cursor: row-resize;
border: 1px #eeeeee solid;
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
border-top: none;
border-bottom: none;
&:before {

3
package/component/src/component/step/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@width-height-pace: 24px;
@step-color: @step-success-color;
@step-fail-color: #ff5722;

19
package/component/src/component/switch/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-form-switch {
position: relative;
height: 22px;
@ -9,7 +6,7 @@
padding: 0 4px;
border-radius: 20px;
cursor: pointer;
background-color: @global-neutral-color-6;
background-color: var(--global-neutral-color-6);
-webkit-transition: 0.1s linear;
transition: 0.1s linear;
}
@ -44,8 +41,8 @@
}
.layui-form-onswitch {
border-color: @global-checked-color;
background-color: @global-checked-color;
border-color: var(--global-checked-color);
background-color: var(--global-checked-color);
}
.layui-form-onswitch span {
@ -62,24 +59,24 @@
.layui-switch-disabled[lay-skin="primary"] span {
background: 0 0 !important;
color: @global-neutral-color-8 !important;
color: var(--global-neutral-color-8) !important;
}
.layui-switch-disabled[lay-skin="primary"]:hover i {
border-color: @global-neutral-color-6;
border-color: var(--global-neutral-color-6);
}
.layui-switch-disabled,
.layui-switch-disabled i {
border-color: @global-neutral-color-3 !important;
border-color: var(--global-neutral-color-3) !important;
}
.layui-switch-disabled span {
background-color: @global-neutral-color-3 !important;
background-color: var(--global-neutral-color-3) !important;
}
.layui-switch-disabled em {
color: @global-neutral-color-6 !important;
color: var(--global-neutral-color-6) !important;
}
.layui-switch-disabled:hover i {

39
package/component/src/component/tab/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-tab {
margin: 10px 0;
text-align: left !important;
@ -26,7 +23,7 @@
}
.layui-tab-card .layui-tab-head {
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
}
.layui-tab-title {
@ -89,11 +86,11 @@
.layui-tab-title.is-right {
border-left: 1px solid @global-neutral-color-3;
border-left: 1px solid var(--global-neutral-color-3);
}
.layui-tab-title.is-left {
border-right: 1px solid @global-neutral-color-3;
border-right: 1px solid var(--global-neutral-color-3);
}
.layui-tab-title.is-right .layui-this {
@ -125,12 +122,12 @@
}
.layui-tab-title.is-left .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-right-color: #FFF;
}
.layui-tab-title.is-right .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-left-color: #FFF;
}
@ -139,21 +136,21 @@
}
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
color: @global-primary-color;
color: var(--global-primary-color);
}
.layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
border: none;
border-radius: 0;
border-bottom: 2px solid @global-checked-color;
border-bottom: 2px solid var(--global-checked-color);
}
.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title{
border-left: 1px solid @global-neutral-color-3;
border-left: 1px solid var(--global-neutral-color-3);
}
.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
border-right: 1px solid @global-neutral-color-3;
border-right: 1px solid var(--global-neutral-color-3);
}
.layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
@ -164,7 +161,7 @@
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
border: none;
border-radius: 0;
border-right: 2px solid @global-checked-color;
border-right: 2px solid var(--global-checked-color);
margin-left: 1px;
}
@ -172,7 +169,7 @@
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
border: none;
border-radius: 0;
border-left: 2px solid @global-checked-color;
border-left: 2px solid var(--global-checked-color);
margin-right: 1px;
}
@ -195,22 +192,22 @@
}
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-bottom-color: #fff;
}
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-top-color: #fff;
}
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-right-color: #fff;
}
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
border: 1px solid @global-neutral-color-3;
border: 1px solid var(--global-neutral-color-3);
border-left-color: #fff;
}
@ -224,7 +221,7 @@
.layui-tab-card>.layui-tab-more .layui-this {
background: 0 0;
color: @global-checked-color;
color: var(--global-checked-color);
}
.layui-tab-card>.layui-tab-more .layui-this:after {
@ -266,7 +263,7 @@
}
.layui-tab-more li.layui-this:after {
border-bottom-color: @global-neutral-color-3;
border-bottom-color: var(--global-neutral-color-3);
border-radius: 2px;
}
@ -291,7 +288,7 @@
top: 1px;
text-align: center;
font-size: 14px;
color: @global-neutral-color-8;
color: var(--global-neutral-color-8);
transition: all 0.2s;
-webkit-transition: all 0.2s;
}

5
package/component/src/component/table/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-table-col-special {
width: 34px;
}
@ -31,7 +28,7 @@
.layui-table-total,
.layui-table-total tr,
.layui-table[lay-even] tr:nth-child(even) {
background-color: @global-neutral-color-1;
background-color: var(--global-neutral-color-1);
}
.layui-table td,

14
package/component/src/component/textarea/index.less
View File

@ -1,12 +1,6 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@textarea-border-radius: var(--textarea-border-radius);
@textarea-border-color: var(--textarea-border-color);
:root {
--textarea-border-radius: @global-border-radius;
--textarea-border-color: @global-neutral-color-3;
--textarea-border-radius: var(--global-border-radius);
--textarea-border-color: var(--global-neutral-color-3);
}
.layui-textarea {
@ -14,8 +8,8 @@
border-style: solid;
background-color: #fff;
color: rgba(0, 0, 0, 0.85);
border-radius: @textarea-border-radius;
border-color: @textarea-border-color;
border-radius: var(--textarea-border-radius);
border-color: var(--textarea-border-color);
display: block;
width: 100%;
height: auto;

5
package/component/src/component/timeline/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-timeline {
padding-left: 5px;
}
@ -19,7 +16,7 @@
height: 20px;
line-height: 20px;
background-color: #fff;
color: @global-checked-color;
color: var(--global-checked-color);
border-radius: 50%;
text-align: center;
cursor: pointer;

9
package/component/src/component/transfer/index.less
View File

@ -1,10 +1,5 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@transfer-box-border-radius: var(--transfer-box-border-radius);
:root {
--transfer-box-border-radius: @global-border-radius;
--transfer-box-border-radius: var(--global-border-radius);
}
.layui-transfer .layui-btn + .layui-btn {
@ -24,7 +19,7 @@
border-width: 1px;
width: 200px;
height: 360px;
border-radius: @transfer-box-border-radius;
border-radius: var(--transfer-box-border-radius);
background-color: #fff;
}

3
package/component/src/component/tree/index.less
View File

@ -1,6 +1,3 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
.layui-tree {
line-height: 22px;
}

38
package/component/src/component/upload/index.less
View File

@ -1,17 +1,13 @@
@import (reference) "../../theme/variable.less";
@import (reference) "../../theme/public.less";
@import "./cropper.min.css";
.layui-upload-file {
// display: none !important;
opacity: 0.01;
position: relative;
filter: Alpha(opacity=1);
cursor: pointer;
}
.layui-upload-btn-box{
position:relative;
.layui-upload-btn-box {
position: relative;
overflow: hidden;
}
.layui-upload-drag,
@ -37,7 +33,7 @@
.layui-upload-drag {
position: relative;
padding: 30px;
border: 1px dashed @global-neutral-color-4;
border: 1px dashed var(--global-neutral-color-4);
background-color: #fff;
text-align: center;
cursor: pointer;
@ -46,14 +42,14 @@
.layui-upload-drag .layui-icon {
font-size: 50px;
color: @global-primary-color;
color: var(--global-primary-color);
}
.layui-upload-drag[lay-over] {
border-color: @global-primary-color;
border-color: var(--global-primary-color);
}
.layui-upload-drag-draging{
border-color: @global-primary-color;
.layui-upload-drag-draging {
border-color: var(--global-primary-color);
}
.layui-upload-iframe {
@ -82,27 +78,27 @@
opacity: 0.01;
filter: Alpha(opacity=1);
}
.layui-upload-file-disabled{
cursor:not-allowed !important;
.layui-upload-file-disabled {
cursor: not-allowed !important;
}
.layui-btn-container .layui-upload-choose {
padding-left: 0;
}
.layui-upload-drag-disable{
opacity:0.8;
z-index:1;
.layui-upload-drag-disable {
opacity: 0.8;
z-index: 1;
cursor: not-allowed;
}
._lay_upload_img{
._lay_upload_img {
display: block;
max-width: 100%;
}
.layui-upload-list-disabled{
width:auto;
height:auto;
.layui-upload-list-disabled {
width: auto;
height: auto;
pointer-events: none !important;
background-color: #fbfbfb!important;
background-color: #fbfbfb !important;
filter: opacity(0.9);
}

4
package/component/src/theme/public.less
View File

@ -129,7 +129,7 @@ a:hover {
.layui-disabled,
.layui-disabled:hover {
color: @global-neutral-color-6 !important;
color: var(--global-neutral-color-6) !important;
cursor: not-allowed !important;
}
@ -170,7 +170,7 @@ a:hover {
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this:after {
border-color: @global-neutral-color-3;
border-color: var(--global-neutral-color-3);
}
.layui-form input[type="checkbox"],

32
package/component/src/theme/variable.less
View File

@ -1,35 +1,3 @@
@global-primary-color: var(--global-primary-color);
@global-normal-color: var(--global-normal-color);
@global-warm-color: var(--global-warm-color);
@global-danger-color: var(--global-danger-color);
@global-checked-color: var(--global-checked-color);
@global-border-radius: var(--global-border-radius);
@global-fore-color: var(--global-fore-color);
@global-back-color: var(--global-back-color);
@global-neutral-color-1: var(--global-neutral-color-1);
@global-neutral-color-2: var(--global-neutral-color-2);
@global-neutral-color-3: var(--global-neutral-color-3);
@global-neutral-color-4: var(--global-neutral-color-4);
@global-neutral-color-5: var(--global-neutral-color-5);
@global-neutral-color-6: var(--global-neutral-color-6);
@global-neutral-color-7: var(--global-neutral-color-7);
@global-neutral-color-8: var(--global-neutral-color-8);
:root {
--global-primary-color: #009688;