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-navigation.scss | 133 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 src/icons/_icons-navigation.scss (limited to 'src/icons/_icons-navigation.scss') diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss new file mode 100644 index 0000000..67e403a --- /dev/null +++ b/src/icons/_icons-navigation.scss @@ -0,0 +1,133 @@ +// Icon arrows +.icon-arrow-down, +.icon-arrow-left, +.icon-arrow-right, +.icon-arrow-up, +.icon-downward, +.icon-back, +.icon-forward, +.icon-upward { + &::before { + border: $icon-border-width solid currentColor; + border-bottom: 0; + border-right: 0; + content: ""; + height: .65em; + width: .65em; + } +} + +.icon-arrow-down { + &::before { + transform: translate(-50%, -75%) rotate(225deg); + } +} + +.icon-arrow-left { + &::before { + transform: translate(-25%, -50%) rotate(-45deg); + } +} + +.icon-arrow-right { + &::before { + transform: translate(-75%, -50%) rotate(135deg); + } +} + +.icon-arrow-up { + &::before { + transform: translate(-50%, -25%) rotate(45deg); + } +} + +.icon-back, +.icon-forward { + &::after { + background: currentColor; + content: ""; + height: $icon-border-width; + width: .8em; + } +} + +.icon-downward, +.icon-upward { + &::after { + background: currentColor; + content: ""; + height: .8em; + width: $icon-border-width; + } +} + +.icon-back { + &::after { + left: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(-45deg); + } +} + +.icon-downward { + &::after { + top: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(-135deg); + } +} + +.icon-forward { + &::after { + left: 45%; + } + &::before { + transform: translate(-50%, -50%) rotate(135deg); + } +} + +.icon-upward { + &::after { + top: 55%; + } + &::before { + transform: translate(-50%, -50%) rotate(45deg); + } +} + +// Icon caret +.icon-caret { + &::before { + border-top: .3em solid currentColor; + border-right: .3em solid transparent; + border-left: .3em solid transparent; + content: ""; + height: 0; + width: 0; + transform: translate(-50%, -25%); + } +} + +// Icon menu +.icon-menu { + &::before { + background: currentColor; + box-shadow: 0 -.35em, 0 .35em; + content: ""; + height: $icon-border-width; + width: 100%; + } +} + +// Icon apps +.icon-apps { + &::before { + background: currentColor; + box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em; + content: ""; + height: 3px; + width: 3px; + } +} -- 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-navigation.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