From 3254e90bfa55e3f55850db9bdc33e55ca6e96640 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 25 Mar 2017 10:21:57 +0800 Subject: Add pure CSS Icons --- src/icons.less | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 src/icons.less (limited to 'src/icons.less') diff --git a/src/icons.less b/src/icons.less new file mode 100644 index 0000000..9c071c5 --- /dev/null +++ b/src/icons.less @@ -0,0 +1,63 @@ +// CSS Icons +.icon { + font-size: inherit; + vertical-align: middle; +} + +.icon-arrow-down, +.icon-arrow-left, +.icon-arrow-right, +.icon-arrow-up { + display: inline-block; + height: 1em; + margin: 0; + position: relative; + width: 1em; + + &::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + display: block; + height: .65em; + left: 50%; + position: absolute; + top: 50%; + width: .65em; + transform: translate(-25%, -50%) rotate(-45deg); + transform-origin: 50% 50%; + } +} + +.icon-arrow-down { + transform: rotate(-90deg); +} + +.icon-arrow-right { + transform: rotate(180deg); +} + +.icon-arrow-up { + transform: rotate(90deg); +} + +.icon-caret { + border-top: .4rem solid currentColor; + border-right: .4rem solid transparent; + border-left: .4rem solid transparent; + display: inline-block; + height: 0; + margin: 0; + vertical-align: middle; + width: 0; +} + +// Components with icons +.btn, +.toast, +.menu { + .icon { + vertical-align: -10%; + } +} -- cgit v1.3.1-26-gb76a