From 92d7cb7506041c7abb499cc47479355d94fd94fe Mon Sep 17 00:00:00 2001 From: laiweilun Date: Thu, 28 Oct 2021 10:50:38 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=9B=BF=E6=8D=A2=E6=88=90css=E7=94=9F?= =?UTF-8?q?=E6=88=90=E4=B8=89=E8=A7=92=E5=BD=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Demo.vue | 1 - theme/iconfont/demo.css | 539 --------------------------------- theme/iconfont/demo_index.html | 215 ------------- theme/iconfont/iconfont.css | 24 -- theme/iconfont/iconfont.eot | Bin 1840 -> 0 bytes theme/iconfont/iconfont.js | 61 ---- theme/iconfont/iconfont.json | 23 -- theme/iconfont/iconfont.svg | 35 --- theme/iconfont/iconfont.ttf | Bin 1672 -> 0 bytes theme/iconfont/iconfont.woff | Bin 1072 -> 0 bytes theme/iconfont/iconfont.woff2 | Bin 696 -> 0 bytes theme/styles/index.css | 46 ++- 12 files changed, 37 insertions(+), 907 deletions(-) delete mode 100644 theme/iconfont/demo.css delete mode 100644 theme/iconfont/demo_index.html delete mode 100644 theme/iconfont/iconfont.css delete mode 100644 theme/iconfont/iconfont.eot delete mode 100644 theme/iconfont/iconfont.js delete mode 100644 theme/iconfont/iconfont.json delete mode 100644 theme/iconfont/iconfont.svg delete mode 100644 theme/iconfont/iconfont.ttf delete mode 100644 theme/iconfont/iconfont.woff delete mode 100644 theme/iconfont/iconfont.woff2 diff --git a/components/Demo.vue b/components/Demo.vue index ca92b7e..307dd61 100644 --- a/components/Demo.vue +++ b/components/Demo.vue @@ -24,7 +24,6 @@ p, -.markdown > blockquote, -.markdown > .highlight, -.markdown > ol, -.markdown > ul { - width: 80%; -} - -.markdown ul > li { - list-style: circle; -} - -.markdown > ul li, -.markdown blockquote ul > li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown > ul li p, -.markdown > ol li p { - margin: 0.6em 0; -} - -.markdown ol > li { - list-style: decimal; -} - -.markdown > ol li, -.markdown blockquote ol > li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown code { - margin: 0 3px; - padding: 0 5px; - background: #eee; - border-radius: 3px; -} - -.markdown strong, -.markdown b { - font-weight: 600; -} - -.markdown > table { - border-collapse: collapse; - border-spacing: 0px; - empty-cells: show; - border: 1px solid #e9e9e9; - width: 95%; - margin-bottom: 24px; -} - -.markdown > table th { - white-space: nowrap; - color: #333; - font-weight: 600; -} - -.markdown > table th, -.markdown > table td { - border: 1px solid #e9e9e9; - padding: 8px 16px; - text-align: left; -} - -.markdown > table th { - background: #F7F7F7; -} - -.markdown blockquote { - font-size: 90%; - color: #999; - border-left: 4px solid #e9e9e9; - padding-left: 0.8em; - margin: 1em 0; -} - -.markdown blockquote p { - margin: 0; -} - -.markdown .anchor { - opacity: 0; - transition: opacity 0.3s ease; - margin-left: 8px; -} - -.markdown .waiting { - color: #ccc; -} - -.markdown h1:hover .anchor, -.markdown h2:hover .anchor, -.markdown h3:hover .anchor, -.markdown h4:hover .anchor, -.markdown h5:hover .anchor, -.markdown h6:hover .anchor { - opacity: 1; - display: inline-block; -} - -.markdown > br, -.markdown > p > br { - clear: both; -} - - -.hljs { - display: block; - background: white; - padding: 0.5em; - color: #333333; - overflow-x: auto; -} - -.hljs-comment, -.hljs-meta { - color: #969896; -} - -.hljs-string, -.hljs-variable, -.hljs-template-variable, -.hljs-strong, -.hljs-emphasis, -.hljs-quote { - color: #df5000; -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-type { - color: #a71d5d; -} - -.hljs-literal, -.hljs-symbol, -.hljs-bullet, -.hljs-attribute { - color: #0086b3; -} - -.hljs-section, -.hljs-name { - color: #63a35c; -} - -.hljs-tag { - color: #333333; -} - -.hljs-title, -.hljs-attr, -.hljs-selector-id, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #795da3; -} - -.hljs-addition { - color: #55a532; - background-color: #eaffea; -} - -.hljs-deletion { - color: #bd2c00; - background-color: #ffecec; -} - -.hljs-link { - text-decoration: underline; -} - -/* 代码高亮 */ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ -code[class*="language-"], -pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection, -code[class*="language-"]::selection, -code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function, -.token.class-name { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/theme/iconfont/demo_index.html b/theme/iconfont/demo_index.html deleted file mode 100644 index bb41666..0000000 --- a/theme/iconfont/demo_index.html +++ /dev/null @@ -1,215 +0,0 @@ - - - - - IconFont Demo - - - - - - - - - - - -
-

-
-
    -
  • Unicode
    • -
  • Font class
    • -
  • Symbol
    • -
- -
-
-
-
    - -
  • - -
    caret-down
    -
    
    -
    • - -
  • - -
    caret-up
    -
    
    -
    • - -
-
-

Unicode 引用

-
- -

Unicode 是字体在网页端最原始的应用方式，特点是：

-
    -
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • -
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • -
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • -
-
-

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

-
-

Unicode 使用步骤如下：

-

第一步：拷贝项目下面生成的 @font-face

- 
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.eot');
-  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
-      url('iconfont.woff2') format('woff2'),
-      url('iconfont.woff') format('woff'),
-      url('iconfont.ttf') format('truetype'),
-      url('iconfont.svg#iconfont') format('svg');
-}
-
-

第二步：定义使用 iconfont 的样式

- 
.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-

第三步：挑选相应图标并获取字体编码，应用于页面

- 
-<span class="iconfont">&#x33;</span>
-
-
-

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    - caret-down -
    -
    .icon-caret-down -
    -
    • - -
  • - -
    - caret-up -
    -
    .icon-caret-up -
    -
    • - -
-
-

font-class 引用

-
- -

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

-

与 Unicode 使用方式相比，具有如下特点：

-
    -
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • -
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • -
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • -
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 fontclass 代码：

- 
<link rel="stylesheet" href="./iconfont.css">
-
-

第二步：挑选相应图标并获取类名，应用于页面：

- 
<span class="iconfont icon-xxx"></span>
-
-
-

" - iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    caret-down
    -
    #icon-caret-down
    -
    • - -
  • - -
    caret-up
    -
    #icon-caret-up
    -
    • - -
-
-

Symbol 引用

-
- -

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 - 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

-
    -
  • 支持多色图标了，不再受单色限制。
    • -
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • -
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • -
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 symbol 代码：

- 
<script src="./iconfont.js"></script>
-
-

第二步：加入通用 CSS 代码（引入一次就行）：

- 
<style>
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
-
-

第三步：挑选相应图标并获取类名，应用于页面：

- 
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
-
- -
-
- - - diff --git a/theme/iconfont/iconfont.css b/theme/iconfont/iconfont.css deleted file mode 100644 index 3948c2c..0000000 --- a/theme/iconfont/iconfont.css +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: "iconfont"; - src: url('iconfont.eot?t=1612260647105'); /* IE9 */ - src: url('iconfont.eot?t=1612260647105#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABogAAAJsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgpwegE2AiQDDAsIAAQgBYRtBz8bwQXIrrBxDTQYakWzYaPQBZ8EAHzEw/PHvs59701F4GAlToMUDdgsSIdI85IsLUWC/cFzC9MW2cSjLApoxiM64A/2rbk6BHc67hSxogdSqHCnzW45nRyCfUsJyFxfVM/9k8bezue5nN4EOjua387O8RqTxlrW5Ue9AOOAAtwL22QllHEKw6sOcifOE6g3jIDbVw/PgYTCnhaIa1OJQKKQUxSxWStUN6wt4pGo2nQ7JeBh9P34pR4JkqrMnntwdakHBt/7/ier8BYQ8gGBbq5CxiKgEGeNtQNhIXJYfS1iEtjXsOD7lQrfCwJir3wi/jq3tRHMUle6I4unEnx/gwQyqC42egHjjO18fIjGxpvcs1dd+Hu3R/2/ubn6u9Op/7zuyv+/XTp79P/z3f1bqrCvt9+ftd6NMotCvMk5/9cHfHGlfBE64X4RRPDNy91nfvnahgK+clUkvgL31u4zHvwfC9hRDJvtz0XTPd1KZI1AJEEN9aiwU+2+8d4uuJ1Qq2tEosZQhqzWJFnYRVRpsIRqtdZQb4He3KBDExalDvMOQWh1kTT7gqzVQxb2RZVuP6q1Rhj1zqJjzwbTYaa2GMUUdTAryBp50g1OU7HxEdXMEZy3RcIr8sQsgixXy81r9JDnWNDnqj6mEgKTC4pcho5DUJgs1KblNJ36fV6RTW8qW3IDKVsYEqaQDhgrINMQjwx6T6Uqn3+ElBmHwB2muvYVYhPm4EBiBEBeuz3IdC/XdHNK3TAlgYARF1BkFHI4CCjNoyxIM1WWRlR8fdzpFlB3eX2v+337oJ59Vo4UOYr6c8E4LTlaeIk0O/1AAAAA') format('woff2'), - url('iconfont.woff?t=1612260647105') format('woff'), - url('iconfont.ttf?t=1612260647105') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1612260647105#iconfont') format('svg'); /* iOS 4.1- */ -} - -.iconfont { - font-family: "iconfont" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-caret-down:before { - content: "\e8ec"; -} - -.icon-caret-up:before { - content: "\e8ed"; -} - diff --git a/theme/iconfont/iconfont.eot b/theme/iconfont/iconfont.eot deleted file mode 100644 index 61cd1a98354cc70604cf8ba5d2e6ffb1a184d466..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1840 zcmd^A-)kII6#nkq&F*A(h>M|Hp<1RAW2teIE~So2u=%Nvi5fxLo0vAne zpaTaXnG&jGLiA{@Y;BxG84J`LG@rCuw17S&7M8ERfBxIicSDkA$ew@i>U?E!{oNhP zw<%X^o)dhrGyID3-|U|>JDZK^M}N!!vPFH+a-I5-d-uO4rXHtTBytbsr^G+8&$PVg zmPNq1zjLrUe$By);9Bxy%BJVs3d9s%pq?Fe*YVtQYojgdA25Pm;P;~Mf7y8iWLKzP zRC|~Gy*@t7Py{%pA&g}XGG@p=ZePCk(Q|M9i$Y@i=i<_<$|!wjV60Iz_2)`FNm$yW z`iOZxz#hA5YNb4mVh-Zs(xo-dOdKZ~(P=jwa$2HJX$2VpW`*`DG7#ICfN9({ekJ>5 z@)rM~A~<(HXQ+Fstv24Sq3d)|q7m z2J+aHI4nw)H^k{#x$-0^T9e|PT*(wGla{e2O4jI(X^JhYq+-sN&U;17zMK=;(&1z0 zg#2Liqgl$0eweh1#&*%VFSbl`bjK1^emo%2-XEe?b zGq05sW={d9G|rNb|2pz{yoP1X7ck9|!+$L^NzDm-rmH6snNQORy-@fS', - l = (l = document.getElementsByTagName('script'))[l.length - 1].getAttribute('data-injectcss') - if (l && !e.__iconfont__svg__cssinject__) { - e.__iconfont__svg__cssinject__ = !0 - try { - document.write( - '' - ) - } catch (e) { - console && console.log(e) - } - } - function s() { - c || ((c = !0), o()) - } - ;(t = function () { - let e, t, n, o - ;((o = document.createElement('div')).innerHTML = a), - (a = null), - (n = o.getElementsByTagName('svg')[0]) && - (n.setAttribute('aria-hidden', 'true'), - (n.style.position = 'absolute'), - (n.style.width = 0), - (n.style.height = 0), - (n.style.overflow = 'hidden'), - (e = n), - (t = document.body).firstChild - ? ((o = e), (n = t.firstChild).parentNode.insertBefore(o, n)) - : t.appendChild(e)) - }), - document.addEventListener - ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) - ? setTimeout(t, 0) - : ((n = function () { - document.removeEventListener('DOMContentLoaded', n, !1), t() - }), - document.addEventListener('DOMContentLoaded', n, !1)) - : document.attachEvent && - ((o = t), - (i = e.document), - (c = !1), - (d = function () { - try { - i.documentElement.doScroll('left') - } catch (e) { - return void setTimeout(d, 50) - } - s() - })(), - (i.onreadystatechange = function () { - 'complete' == i.readyState && ((i.onreadystatechange = null), s()) - })) -})(window) diff --git a/theme/iconfont/iconfont.json b/theme/iconfont/iconfont.json deleted file mode 100644 index 0453c61..0000000 --- a/theme/iconfont/iconfont.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "id": "", - "name": "", - "font_family": "iconfont", - "css_prefix_text": "icon-", - "description": "", - "glyphs": [ - { - "icon_id": "6598339", - "name": "caret-down", - "font_class": "caret-down", - "unicode": "e8ec", - "unicode_decimal": 59628 - }, - { - "icon_id": "6598341", - "name": "caret-up", - "font_class": "caret-up", - "unicode": "e8ed", - "unicode_decimal": 59629 - } - ] -} diff --git a/theme/iconfont/iconfont.svg b/theme/iconfont/iconfont.svg deleted file mode 100644 index 0b27f3b..0000000 --- a/theme/iconfont/iconfont.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - Created by iconfont - - - - - - - - - - - - - - - - diff --git a/theme/iconfont/iconfont.ttf b/theme/iconfont/iconfont.ttf deleted file mode 100644 index 3ce998a58117a79c43769f42f57883e0f0f85473..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1672 zcmd^9-)j_C6#nkq&F*A(NS6jz!M2Pgjnc+VT*QhLBU+QR2n`zdML{RKvp-~KXPBK> z14b5X9}0!~;+x=~V4;XU2)_Ez;!B}@u*Sy~vo8f7-SoRNcR-^5LGN(x{myrO%(-XJ z4g`P#`jD7gJa_)&ucP0FfH+F__G&jQx|F)$wZ%J_6q*FH<)?=UN~p zu!nXE?5^Xv$5%!hwEqnlUf}nl`%gAs0@)?n=fT=#f4h&18L9wxb(^=Bj2W{3woh+d z`rxbAC?vkm<`?!W$Mnp=SfOgd(BUeRgrzeoHqQsxe#@T6Czyfwdg06pBa_5Q4WiR- zI^?uQo3aWr0$I&c&p_P57);|Q<9D*ZB&T?VieRjPF-i74Yq@c{juV5e!7#bM?4wUN zeS7t)R0zi?D$h(pi>mfpCaWT5c=BfCGnk5fSQaoCZu72#Ewxiu35Dv8Q1$=cS2D&2 zbQ{=}!B!$k=T!G-OJ_;Vc>LSQI;X6_9`2hEyG5z;r8qJzm)-O|fB>RL{B6xX;A&r#X==?cR4>$P1%~W+^v%Fm4r%TSe=s*f7n}O{*jX!?-@g z^CX&h7bVWb-K3Ua137%Gu_QmGafX<4t&(th3OKBBmVErLBcI0?Sk!z0lL*x`WyWdw z96xF-P{cir4NTy%#*+LW8fS?A(Rd6c3^mT8D5S=DRK=vm1x$-}{#58Xkz2P{*X?%A z?>78yluyA~x4G7F!c=Fm^#2cr COX5ZV diff --git a/theme/iconfont/iconfont.woff b/theme/iconfont/iconfont.woff deleted file mode 100644 index 110ed6a301e56c206e364eb65d01813bb44003b2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1072 zcmXT-cXMN4WB>vd0|sso&DH_ogV?CRJvh{ffq{_&C~6GEP8wa=>VgXRB0mu&m(se!e-%d@>sZ0a1uK>lefw(~U<#m;e)Wj491||m}Uk8ZI zr01NUp8*sEisb* zV1}RyI|EZS?}3UrZzt^JZE)aWId13NpwZmWkks+QUd1BI;!gmZ_F0eJMJWkPvx+U) ziWFV^;#I#No3wl5)836!N?Nv20`j*X9EPm<05S(X+O*_B5cye58K zX|zgnqw%KBPVHNUM(+P_A5=W{FW*|dpW!kKnJBVEg z2@H??XRh1&@sC-&%QhX;LoXImMaJ#;{XX^Dlz3 zefl_U*xh08}&DVD%eQPOCM+~0&r703uKX`?MyjoOwQHMY8# WtM0eyXFjB(3yfffsN3w$3=9AO)QThk diff --git a/theme/iconfont/iconfont.woff2 b/theme/iconfont/iconfont.woff2 deleted file mode 100644 index 36a107a73d91e6ed050ccbced81d494e849b0c80..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 696 zcmV;p0!RIKPew8T0RR9100OuG3jhEB00xKv00L|P0RR9100000000000000000000 z0000SLIzdTpCE#K7 z{rIIG36iSJo_lb0sRst%`~D}Z@D>pA0fBC=LdGJX5ND0G17RU@SbZ&G64=+U;QN&d z-wOg_uY4l@I=8hE%u-jnBa5dJe1C%kGN>*#dI95%?RSi6vsYdCd$&jZzqz^k zyVI%vyza{Xzg;?e^#AkS{adQAueaZywcd>~i$c7~IsexOd~v0G5jx?15k&CK%iU*w z`Pzm8zH(J0z5@5w?lT_z9}Cz~44duGMbkaqN@R^dBtZ@JsIXJ*zVY5JxSdd|Yeb^P zP=>75Bw5%+RB5n;YPHr-Z-L(2phFWDr4I8BL1=Z6H2Z?A)k7BcMU`$ps8w$QpUl4Ng9j3bW z6=D .container:first-child { max-width: unset !important; @@ -38,4 +29,41 @@ .DocSearch { --docsearch-primary-color: var(--c-brand) !important; } +.icon-caret-down { + width: 16px; + height: 100%; + position: relative; +} +.icon-caret-down::before { + content: ''; + width: 0; + height: 0; + border-color: inherit; + border: 6px solid transparent; + border-top: 7.5px solid; + position: absolute; + top: 50%; + left: 50%; + margin-top: -2.5px; + margin-left: -6px; +} +.icon-caret-up { + width: 16px; + height: 100%; + position: relative; +} + +.icon-caret-up::before { + content: ''; + width: 0; + height: 0; + border-color: inherit; + border: 6px solid transparent; + border-bottom: 7px solid; + position: absolute; + top: 50%; + left: 50%; + margin-top: -8.5px; + margin-left: -6px; +}