From be1c5e2977a536c7d15fa7cd9389cd344ec69428 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 27 Mar 2017 10:44:41 +0800 Subject: Add more icons: arrows and mail --- src/icons.less | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 57 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/icons.less b/src/icons.less index 99c6b75..2082c75 100644 --- a/src/icons.less +++ b/src/icons.less @@ -22,7 +22,11 @@ .icon-arrow-down, .icon-arrow-left, .icon-arrow-right, -.icon-arrow-up { +.icon-arrow-up, +.icon-downward, +.icon-back, +.icon-forward, +.icon-upward { &::before { border: @icon-border-width solid currentColor; border-bottom: 0; @@ -34,18 +38,37 @@ } } -.icon-arrow-down { +.icon-arrow-down, +.icon-downward { transform: rotate(-90deg); } -.icon-arrow-right { +.icon-arrow-right, +.icon-forward { transform: rotate(180deg); } -.icon-arrow-up { +.icon-arrow-up, +.icon-upward { transform: rotate(90deg); } +.icon-downward, +.icon-back, +.icon-forward, +.icon-upward { + &::before { + transform: translate(-50%, -50%) rotate(-45deg); + } + &::after { + background: currentColor; + content: ""; + height: @icon-border-width; + left: 60%; + width: 80%; + } +} + // Icon caret .icon-caret { &::before { @@ -96,7 +119,7 @@ background: currentColor; content: ""; height: @icon-border-width; - width: 100%; + width: 90%; } } .icon-plus, @@ -104,11 +127,17 @@ &::after { background: currentColor; content: ""; - height: 100%; + height: 90%; width: @icon-border-width; } } .icon-cross { + &::before { + width: 100%; + } + &::after { + height: 100%; + } &::before, &::after { transform: translate(-50%, -50%) rotate(45deg); @@ -122,12 +151,32 @@ border-right: 0; border-top: 0; content: ""; - height: .6em; - width: 1em; + height: .5em; + width: .9em; transform: translate(-50%, -75%) rotate(-45deg); } } +// Icon mail +.icon-mail { + &::before { + border: @icon-border-width solid currentColor; + border-radius: @border-radius; + content: ""; + height: 75%; + width: 100%; + } + &::after { + border: @icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: 50%; + transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + width: 50%; + } +} + // Components with icons .btn, .toast, -- cgit v1.3.1-23-gd82d