From 3b6c1a0c4c5a52bf776b78fc6db79163711a5f2e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sat, 23 Sep 2017 18:02:31 +0800
Subject: Spilt Icons code

---
 src/icons/_icons-action.scss | 313 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 313 insertions(+)
 create mode 100644 src/icons/_icons-action.scss

(limited to 'src/icons/_icons-action.scss')

diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
new file mode 100644
index 0000000..7ccc2f7
--- /dev/null
+++ b/src/icons/_icons-action.scss
@@ -0,0 +1,313 @@
+
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    content: "";
+    height: 3px;
+    width: 3px;
+  }
+}
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: .5em;
+    width: .9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// Icon stop
+.icon-stop {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: $icon-border-width;
+  }
+}
+
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    content: "";
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    content: "";
+    height: .75em;
+    top: 60%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
+    content: "";
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: .5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    content: "";
+    height: .4em;
+    left: 100%;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-radius: 75% 0;
+    content: "";
+    height: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: .65em;
+    top: 35%;
+    left: 60%;
+    width: .8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: .9em;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
-- 
cgit v1.3.1-26-gb76a


From 085f9cb7561268f9816079ab70c2297d8a3f3a80 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
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-action.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-26-gb76a