独立 icon-picker 样式

example/docs/zh-CN/guide/changelog.md

@@ -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>

example/src/view/environment.vue

@@ -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>

src/component/iconPicker/index.less

@@ -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;
+}

src/component/iconPicker/index.vue

@@ -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";
 

src/theme/index.less

@@ -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;