独立 icon-picker 样式
This commit is contained in:
就眠儀式
parent
12a608cd42
commit
62a36c0bbd
@ -18,6 +18,7 @@
|
||||
<ul>
|
||||
<li>[新增] icon-picker 颜色选择器。</li>
|
||||
<li>[新增] config-provider 全局配置, 用于主题与国际化切换。</li>
|
||||
<li>[修复] menu 组件导航模式下子菜单错位问题。 </li>
|
||||
<li>[修复] container 容器在不同的分辨率无法自适应的问题</li>
|
||||
<li>[修复] quote 引用的 nm 灰色主题失效。</li>
|
||||
<li>[升级] icons-vue 1.0.5 版本。</li>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<li class="layui-col-sm24">
|
||||
<div class="alone">
|
||||
<a href="https://www.axured.cn/assets/axurefiles/d959191ea7d3a46378456fbd7d72f44f_215/start.html?#g=1&p=%E4%BD%9C%E5%93%81%E4%BB%8B%E7%BB%8D" target="_blank"
|
||||
>axure - layui<cite>基于 layui 的 axure 原型库</cite></a
|
||||
>layui - axure<cite>基于 layui 的 axure 原型库</cite></a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
@import "../../theme/variable.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;
|
||||
}
|
||||
|
||||
.layui-iconpicker {
|
||||
position: relative;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: @icon-picker-border-radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-inline {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layui-iconpicker-title {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main .layui-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main .layui-inline {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layui-iconpicker-split .layui-iconpicker-main {
|
||||
padding: 0 15px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.layui-iconpicker-suffix {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-iconpicker-suffix .layui-icon {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.layui-iconpicker-none {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.layui-iconpicker-search {
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 8px #f0f1f2;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list {
|
||||
padding: 10px 10px 5px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list ul {
|
||||
width: 262px;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 60px;
|
||||
margin: 0 5px 5px 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li:hover {
|
||||
background-color: #fafafa;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li.layui-this {
|
||||
border-color: @icon-picker-checked-color;
|
||||
color: @icon-picker-checked-color;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li .layui-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li .layui-elip {
|
||||
margin-top: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list .layui-none {
|
||||
margin: 30px 0 35px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-scroll .layui-iconpicker-list {
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page {
|
||||
position: relative;
|
||||
padding: 10px 10px 5px;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage a,
|
||||
.layui-iconpicker-page .layui-laypage span {
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-count {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-curr .layui-laypage-em {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-curr em {
|
||||
color: #666;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-first,
|
||||
.layui-iconpicker-page .layui-laypage-last,
|
||||
.layui-iconpicker-page .layui-laypage-spr {
|
||||
display: none;
|
||||
}
|
||||
@ -85,6 +85,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { Ref, ref } from "vue";
|
||||
import { LayIconList as icons } from "@layui/icons-vue";
|
||||
|
||||
|
||||
@ -1945,157 +1945,6 @@ a cite {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layui-iconpicker {
|
||||
position: relative;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: @global-border-radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-iconpicker .layui-inline {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layui-iconpicker-title {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main .layui-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-main .layui-inline {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layui-iconpicker-split .layui-iconpicker-main {
|
||||
padding: 0 15px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
.layui-iconpicker-suffix {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-iconpicker-suffix .layui-icon {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.layui-iconpicker-none {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.layui-iconpicker-search {
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 8px #f0f1f2;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list {
|
||||
padding: 10px 10px 5px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list ul {
|
||||
width: 262px;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 60px;
|
||||
margin: 0 5px 5px 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li:hover {
|
||||
background-color: #fafafa;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li.layui-this {
|
||||
border-color: @global-checked-color;
|
||||
color: @global-checked-color;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li .layui-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list li .layui-elip {
|
||||
margin-top: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-list .layui-none {
|
||||
margin: 30px 0 35px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-scroll .layui-iconpicker-list {
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page {
|
||||
position: relative;
|
||||
padding: 10px 10px 5px;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage a,
|
||||
.layui-iconpicker-page .layui-laypage span {
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-count {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-curr .layui-laypage-em {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-curr em {
|
||||
color: #666;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.layui-iconpicker-page .layui-laypage-first,
|
||||
.layui-iconpicker-page .layui-laypage-last,
|
||||
.layui-iconpicker-page .layui-laypage-spr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-keyboard-header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user