diff options
author | Yan Zhu <picturepan2@hotmail.com> | 2017-03-27 14:08:02 +0300 |
---|---|---|
committer | Yan Zhu <picturepan2@hotmail.com> | 2017-03-27 14:08:02 +0300 |
commit | bc2ebdd15b0d729f45553e7d877eb3308b02e153 (patch) | |
tree | dcc4a0163cebb64190d7e3911b2200f0602f3c07 /docs/css/spectre-icons.css | |
parent | be1c5e2977a536c7d15fa7cd9389cd344ec69428 (diff) |
Add more CSS icons: refresh, search, edit, share, download, upload, people and link
Diffstat (limited to 'docs/css/spectre-icons.css')
-rw-r--r-- | docs/css/spectre-icons.css | 170 |
1 files changed, 165 insertions, 5 deletions
diff --git a/docs/css/spectre-icons.css b/docs/css/spectre-icons.css index 627fb09..f6f8325 100644 --- a/docs/css/spectre-icons.css +++ b/docs/css/spectre-icons.css @@ -71,7 +71,7 @@ content: ""; height: .2rem; left: 60%; - width: 80%; + width: .8em; } .icon-caret::before { border-left: .3em solid transparent; @@ -141,23 +141,183 @@ transform: translate(-50%, -75%) rotate(-45deg); width: .9em; } +.icon-refresh::before { + border: .2rem solid currentColor; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: .9em; + width: .9em; +} +.icon-refresh::after { + border: .2em solid currentColor; + border-left-color: transparent; + border-top-color: transparent; + content: ""; + height: 0; + left: 75%; + top: 25%; + width: 0; +} +.icon-search::before { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .75em; + left: 5%; + top: 5%; + -webkit-transform: translate(0, 0) rotate(45deg); + -ms-transform: translate(0, 0) rotate(45deg); + transform: translate(0, 0) rotate(45deg); + width: .75em; +} +.icon-search::after { + background: currentColor; + content: ""; + height: .2rem; + left: 80%; + top: 80%; + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); + width: .4em; +} +.icon-edit::before { + border: .2rem solid currentColor; + content: ""; + height: .4em; + -webkit-transform: translate(-40%, -60%) rotate(-45deg); + -ms-transform: translate(-40%, -60%) rotate(-45deg); + transform: translate(-40%, -60%) rotate(-45deg); + width: .85em; +} +.icon-edit::after { + border: .15em solid currentColor; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + height: 0; + left: 10%; + top: 95%; + -webkit-transform: translate(0, -100%); + -ms-transform: translate(0, -100%); + transform: translate(0, -100%); + width: 0; +} +.icon-share { + border: .2rem solid currentColor; + border-radius: .2rem; + border-right: 0; + border-top: 0; +} +.icon-share::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .4em; + left: 100%; + top: 35%; + -webkit-transform: translate(-125%, -50%) rotate(135deg); + -ms-transform: translate(-125%, -50%) rotate(135deg); + transform: translate(-125%, -50%) rotate(135deg); + width: .4em; +} +.icon-share::after { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + border-top-left-radius: 50%; + content: ""; + height: .4em; + width: .5em; +} +.icon-download::before, +.icon-upload::before { + border: .2rem solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .5em; + -webkit-transform: translate(-50%, -50%) rotate(-135deg); + -ms-transform: translate(-50%, -50%) rotate(-135deg); + transform: translate(-50%, -50%) rotate(-135deg); + width: .5em; +} +.icon-download::after, +.icon-upload::after { + background: currentColor; + content: ""; + height: .6em; + top: 40%; + width: .2rem; +} +.icon-download { + border-bottom: .2rem solid currentColor; +} +.icon-upload { + border-top: .2rem solid currentColor; +} +.icon-upload::before { + -webkit-transform: translate(-50%, -50%) rotate(45deg); + -ms-transform: translate(-50%, -50%) rotate(45deg); + transform: translate(-50%, -50%) rotate(45deg); +} +.icon-upload::after { + top: 60%; +} .icon-mail::before { border: .2rem solid currentColor; border-radius: .2rem; content: ""; - height: 75%; - width: 100%; + height: .8em; + width: 1em; } .icon-mail::after { border: .2rem solid currentColor; border-right: 0; border-top: 0; content: ""; - height: 50%; + height: .5em; -webkit-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); - width: 50%; + width: .5em; +} +.icon-people::before { + border: .2rem solid currentColor; + border-radius: 50%; + content: ""; + height: .45em; + top: 25%; + width: .45em; +} +.icon-people::after { + border: .2rem solid currentColor; + border-radius: 50% 50% 0 0; + content: ""; + height: .4em; + top: 75%; + width: .9em; +} +.icon-link::before, +.icon-link::after { + border: .2rem solid currentColor; + border-radius: 5em; + border-right-color: transparent; + content: ""; + height: .5em; + width: .75em; +} +.icon-link::before { + -webkit-transform: translate(-70%, -45%) rotate(-45deg); + -ms-transform: translate(-70%, -45%) rotate(-45deg); + transform: translate(-70%, -45%) rotate(-45deg); +} +.icon-link::after { + -webkit-transform: translate(-30%, -55%) rotate(135deg); + -ms-transform: translate(-30%, -55%) rotate(135deg); + transform: translate(-30%, -55%) rotate(135deg); } .btn .icon, .toast .icon, |