root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

统一 Select 组件配色

develop
就眠仪式 2020-07-19 00:22:23 +08:00
parent 876bf04626
commit c3053b9f62
2 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
component/pear/css/pear-module/select.css
View File

@ -220,7 +220,7 @@ select[xm-select] {
.xm-select-parent dl dd.xm-select-this div i { .xm-select-parent dl dd.xm-select-this div i {
border: none; border: none;
color: #009688; color: #67c23a;
font-size: 18px; font-size: 18px;
} }
@ -294,7 +294,7 @@ select[xm-select] {
.xm-select-parent .xm-select-title div.xm-select-label>span { .xm-select-parent .xm-select-title div.xm-select-label>span {
position: relative; position: relative;
padding: 2px 5px; padding: 2px 5px;
background-color: #009688; background-color: #67c23a;
border-radius: 2px; border-radius: 2px;
color: #FFF; color: #FFF;
display: inline-block; display: inline-block;
@ -332,7 +332,7 @@ select[xm-select] {
.xm-form-selected .xm-select, .xm-form-selected .xm-select,
.xm-form-selected .xm-select:hover { .xm-form-selected .xm-select:hover {
border-color: #009688 !important border-color: #67c23a !important
} }
.xm-select--suffix+div { .xm-select--suffix+div {
@ -400,7 +400,7 @@ div[xm-hg] .xm-select-label {
/* 颜色相关 */ /* 颜色相关 */
div[xm-select-skin] .xm-select-title div.xm-select-label>span { div[xm-select-skin] .xm-select-title div.xm-select-label>span {
border: 1px solid #009688 border: 1px solid #67c23a
} }
div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover { div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover {
@ -439,105 +439,105 @@ div[xm-select-skin=default].xm-form-selected .xm-select:hover {
} }
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span { div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {
background-color: #009688; background-color: #67c23a!important
color: #FFF; color: #FFF;
border: 1px solid #009688 border: 1px solid #67c23a!important
} }
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i { div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {
background-color: #009688; background-color: #67c23a!important
color: #FFF color: #FFF
} }
div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i { div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {
border-color: #009688 border-color: #67c23a!important
} }
div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i { div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {
color: #009688 color: #67c23a!important
} }
div[xm-select-skin=primary].xm-form-selected .xm-select, div[xm-select-skin=primary].xm-form-selected .xm-select,
div[xm-select-skin=primary].xm-form-selected .xm-select:hover { div[xm-select-skin=primary].xm-form-selected .xm-select:hover {
border-color: #009688 !important border-color: #67c23a!important
} }
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span { div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {
background-color: #1E9FFF; background-color: #2D8CF0!important;
color: #FFF; color: #FFF;
border: 1px solid #1E9FFF border: 1px solid #2D8CF0!important;
} }
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i { div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {
background-color: #1E9FFF; background-color: #2D8CF0!important;
color: #FFF color: #FFF
} }
div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i { div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i {
border-color: #1E9FFF border-color: #2D8CF0!important;
} }
div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i { div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i {
color: #1E9FFF color:#2D8CF0 !important;
} }
div[xm-select-skin=normal].xm-form-selected .xm-select, div[xm-select-skin=normal].xm-form-selected .xm-select,
div[xm-select-skin=normal].xm-form-selected .xm-select:hover { div[xm-select-skin=normal].xm-form-selected .xm-select:hover {
border-color: #1E9FFF !important border-color:#2D8CF0!important;
} }
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span { div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span {
background-color: #FFB800; background-color: #e6a23c!important;
color: #FFF; color: #FFF;
border: 1px solid #FFB800 border: 1px solid #e6a23c!important;
} }
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i { div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i {
background-color: #FFB800; background-color: #e6a23c!important;
color: #FFF color: #FFF
} }
div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i { div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i {
border-color: #FFB800 border-color:#e6a23c!important
} }
div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i { div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i {
color: #FFB800 color:#e6a23c!important
} }
div[xm-select-skin=warm].xm-form-selected .xm-select, div[xm-select-skin=warm].xm-form-selected .xm-select,
div[xm-select-skin=warm].xm-form-selected .xm-select:hover { div[xm-select-skin=warm].xm-form-selected .xm-select:hover {
border-color: #FFB800 !important border-color: #e6a23c!important
} }
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span { div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span {
background-color: #FF5722; background-color: #f56c6c!important;
color: #FFF; color: #FFF;
border: 1px solid #FF5722 border: 1px solid #f56c6c!important;
} }
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i { div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i {
background-color: #FF5722; background-color:#f56c6c!important
color: #FFF color: #FFF
} }
div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i { div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i {
border-color: #FF5722 border-color: #f56c6c!important
} }
div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i { div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i {
color: #FF5722 color: #f56c6c!important
} }
div[xm-select-skin=danger].xm-form-selected .xm-select, div[xm-select-skin=danger].xm-form-selected .xm-select,
div[xm-select-skin=danger].xm-form-selected .xm-select:hover { div[xm-select-skin=danger].xm-form-selected .xm-select:hover {
border-color: #FF5722 !important border-color: #f56c6c!important
} }
/* 多选联动 */ /* 多选联动 */
.xm-select-parent .layui-form-danger+.xm-select-title .xm-select { .xm-select-parent .layui-form-danger+.xm-select-title .xm-select {
border-color: #FF5722 !important; border-color: #f56c6c!important
} }
.xm-select-linkage li { .xm-select-linkage li {

2
view/document/button.html
View File

@ -7,6 +7,7 @@
</head> </head>
<body class="pear-container"> <body class="pear-container">
<div class="layui-row layui-col-space10"> <div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header"> <div class="layui-card-header">
开发环境 开发环境
@ -15,6 +16,7 @@
Pear Button 参考 Element UI 样式 ，提供 Button 服务 Pear Button 参考 Element UI 样式 ，提供 Button 服务
</div> </div>
</div> </div>
</div>
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-collapse"> <div class="layui-collapse">
<div class="layui-colla-item"> <div class="layui-colla-item">