From 3b6c1a0c4c5a52bf776b78fc6db79163711a5f2e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 23 Sep 2017 18:02:31 +0800 Subject: Spilt Icons code --- src/icons/_icons-object.scss | 176 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 src/icons/_icons-object.scss (limited to 'src/icons/_icons-object.scss') diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss new file mode 100644 index 0000000..09e083b --- /dev/null +++ b/src/icons/_icons-object.scss @@ -0,0 +1,176 @@ +// Icon time +.icon-time { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + background: currentColor; + content: ""; + height: .4em; + transform: translate(-50%, -75%); + width: $icon-border-width; + } + &::after { + background: currentColor; + content: ""; + height: .3em; + transform: translate(-50%, -75%) rotate(90deg); + transform-origin: 50% 90%; + width: $icon-border-width; + } +} + +// Icon mail +.icon-mail { + &::before { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + content: ""; + height: .8em; + width: 1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-right: 0; + border-top: 0; + content: ""; + height: .5em; + transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg); + width: .5em; + } +} + +// Icon people +.icon-people { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .45em; + top: 25%; + width: .45em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 0 0; + content: ""; + height: .4em; + top: 75%; + width: .9em; + } +} + +// Icon message +.icon-message { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-radius: $border-radius; + border-right: 0; + &::before { + border: $icon-border-width solid currentColor; + border-left: 0; + border-bottom-right-radius: $border-radius; + border-top: 0; + content: ""; + height: .8em; + left: 65%; + top: 40%; + width: .7em; + } + &::after { + background: currentColor; + border-radius: $border-radius; + content: ""; + height: .3em; + left: 10%; + top: 100%; + transform: translate(0, -90%) rotate(45deg); + width: $icon-border-width; + } +} + +// Icon photo +.icon-photo { + border: $icon-border-width solid currentColor; + border-radius: $border-radius; + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .25em; + left: 35%; + top: 35%; + width: .25em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-left: 0; + content: ""; + height: .5em; + left: 60%; + transform: translate(-50%, 25%) rotate(-45deg); + width: .5em; + } +} + +// Icon link +.icon-link { + &::before, + &::after { + border: $icon-border-width solid currentColor; + border-radius: 5em 0 0 5em; + border-right: 0; + content: ""; + height: .5em; + width: .75em; + } + &::before { + transform: translate(-70%, -45%) rotate(-45deg); + } + &::after { + transform: translate(-30%, -55%) rotate(135deg); + } +} + +// Icon location +.icon-location { + &::before { + border: $icon-border-width solid currentColor; + border-radius: 50% 50% 50% 0; + content: ""; + height: .8em; + transform: translate(-50%, -60%) rotate(-45deg); + width: .8em; + } + &::after { + border: $icon-border-width solid currentColor; + border-radius: 50%; + content: ""; + height: .2em; + transform: translate(-50%, -80%); + width: .2em; + } +} + +// Icon emoji +.icon-emoji { + border: $icon-border-width solid currentColor; + border-radius: 50%; + &::before { + border-radius: 50%; + box-shadow: -.17em -.15em, .17em -.15em; + content: ""; + height: .1em; + width: .1em; + } + &::after { + border: $icon-border-width solid currentColor; + border-bottom-color: transparent; + border-radius: 50%; + border-right-color: transparent; + content: ""; + height: .5em; + transform: translate(-50%, -40%) rotate(-135deg); + width: .5em; + } +} -- cgit v1.3.1-23-gd82d From 085f9cb7561268f9816079ab70c2297d8a3f3a80 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 30 Sep 2017 16:36:44 +0800 Subject: Update Changelog and code style --- CHANGELOG.md | 12 ++++++++++++ docs/dist/spectre-icons.css | 2 +- src/icons/_icons-action.scss | 3 +++ src/icons/_icons-navigation.scss | 2 +- src/icons/_icons-object.scss | 2 +- 5 files changed, 18 insertions(+), 3 deletions(-) (limited to 'src/icons/_icons-object.scss') diff --git a/CHANGELOG.md b/CHANGELOG.md index a186d9d..cf07837 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ ## Spectre.css Changelog +### [v0.4.3](https://github.com/picturepan2/spectre/releases/tag/v0.4.3) + +- Add Icon Sizes #284 +- Add Large Modals #293 +- Update primary color to #5755d9 +- Change Tooltips `white-space` to `pre` #292 +- Encode SVG Data URI (thanks to @mariodev) #297 #298 +- Improve Buttons and Forms small and large variables +- Improve Filters code +- Improve gulpfile and package +- Add Importing SASS Docs + ### [v0.4.2](https://github.com/picturepan2/spectre/releases/tag/v0.4.2) - Add Off-screen experimental diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css index 2050e28..eecae06 100644 --- a/docs/dist/spectre-icons.css +++ b/docs/dist/spectre-icons.css @@ -125,7 +125,7 @@ border-top: .3em solid currentColor; content: ""; height: 0; - transform: translate(-50%, -25%); + transform: translate(-50%, -25%); width: 0; } diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss index 7ccc2f7..807f05e 100644 --- a/src/icons/_icons-action.scss +++ b/src/icons/_icons-action.scss @@ -40,6 +40,7 @@ width: 3px; } } + .icon-more-vert { &::before { box-shadow: 0 -.4em, 0 .4em; @@ -57,6 +58,7 @@ width: 100%; } } + .icon-plus, .icon-cross { &::after { @@ -66,6 +68,7 @@ width: $icon-border-width; } } + .icon-cross { &::before { width: 100%; diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss index 67e403a..7d7fcd3 100644 --- a/src/icons/_icons-navigation.scss +++ b/src/icons/_icons-navigation.scss @@ -105,8 +105,8 @@ border-left: .3em solid transparent; content: ""; height: 0; - width: 0; transform: translate(-50%, -25%); + width: 0; } } diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss index 09e083b..746d25b 100644 --- a/src/icons/_icons-object.scss +++ b/src/icons/_icons-object.scss @@ -67,8 +67,8 @@ border-right: 0; &::before { border: $icon-border-width solid currentColor; - border-left: 0; border-bottom-right-radius: $border-radius; + border-left: 0; border-top: 0; content: ""; height: .8em; -- cgit v1.3.1-23-gd82d