Merge pull request #124 from rcausey/master

Adding borderless play/pause/stop icons
BrightspaceUI · Mar 13, 2017 · 11b4f93 · 11b4f93
2 parents c6ab8a3 + e80c891
commit 11b4f93
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 12 deletions.
diff --git a/d2l-icons.md b/d2l-icons.md
@@ -129,18 +129,19 @@ Size: `30px` x `30`px
 
 | Icon | Name || Icon | Name || Icon | Name |
 | :---: | :--- | --- | :---: | :--- | --- | :---: | :--- |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/alert.svg?raw=true) | alert || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/download.svg?raw=true) | download || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/notification-bell.svg?raw=true) | notification-bell |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/bookmark.svg?raw=true) | bookmark || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/email-open.svg?raw=true) | email-open || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/pause.svg?raw=true) | pause |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/calendar.svg?raw=true) | calendar || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/email.svg?raw=true) | email || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/pic.svg?raw=true) | pic |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/check-circle.svg?raw=true) | check-circle || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/gear.svg?raw=true) | gear || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/play.svg?raw=true) | play |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-down.svg?raw=true) | chevron-down || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/grade.svg?raw=true) | grade || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/preview.svg?raw=true) | preview |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-left.svg?raw=true) | chevron-left || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/help.svg?raw=true) | help || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/profile-default.svg?raw=true) | profile-default |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-right.svg?raw=true) | chevron-right || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/home.svg?raw=true) | home || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/search.svg?raw=true) | search |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-up.svg?raw=true) | chevron-up || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/image.svg?raw=true) | image || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/stop.svg?raw=true) | stop |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/classes.svg?raw=true) | classes || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/lock-unlocked.svg?raw=true) | lock-unlocked || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/syllabus.svg?raw=true) | syllabus |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/close-thick.svg?raw=true) | close-thick || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/lock.svg?raw=true) | lock || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/upload.svg?raw=true) | upload |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/close.svg?raw=true) | close || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/menu-hamburger.svg?raw=true) | menu-hamburger || &nbsp; | &nbsp; |
-| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/discussions.svg?raw=true) | discussions || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/news.svg?raw=true) | news || &nbsp; | &nbsp; |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/alert.svg?raw=true) | alert || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/email-open.svg?raw=true) | email-open || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/pause.svg?raw=true) | pause |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/bookmark.svg?raw=true) | bookmark || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/email.svg?raw=true) | email || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/pic.svg?raw=true) | pic |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/calendar.svg?raw=true) | calendar || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/gear.svg?raw=true) | gear || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/play-borderless.svg?raw=true) | play-borderless |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/check-circle.svg?raw=true) | check-circle || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/grade.svg?raw=true) | grade || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/play.svg?raw=true) | play |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-down.svg?raw=true) | chevron-down || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/help.svg?raw=true) | help || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/preview.svg?raw=true) | preview |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-left.svg?raw=true) | chevron-left || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/home.svg?raw=true) | home || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/profile-default.svg?raw=true) | profile-default |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-right.svg?raw=true) | chevron-right || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/image.svg?raw=true) | image || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/search.svg?raw=true) | search |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/chevron-up.svg?raw=true) | chevron-up || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/lock-unlocked.svg?raw=true) | lock-unlocked || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/stop-borderless.svg?raw=true) | stop-borderless |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/classes.svg?raw=true) | classes || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/lock.svg?raw=true) | lock || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/stop.svg?raw=true) | stop |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/close-thick.svg?raw=true) | close-thick || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/menu-hamburger.svg?raw=true) | menu-hamburger || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/syllabus.svg?raw=true) | syllabus |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/close.svg?raw=true) | close || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/news.svg?raw=true) | news || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/upload.svg?raw=true) | upload |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/discussions.svg?raw=true) | discussions || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/notification-bell.svg?raw=true) | notification-bell || &nbsp; | &nbsp; |
+| ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/download.svg?raw=true) | download || ![](https://rawgit.com/BrightspaceUI/icons/master/images/tier3/pause-borderless.svg?raw=true) | pause-borderless || &nbsp; | &nbsp; |
 
 ## html-editor
 

diff --git a/icons.scss b/icons.scss
@@ -2429,6 +2429,12 @@
 		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M26%202a2%202%200%200%201%202%202v22a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h22m0-2H4a4%204%200%200%200-4%204v22a4%204%200%200%200%204%204h22a4%204%200%200%200%204-4V4a4%204%200%200%200-4-4z%22%2F%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M12%2010v10h-2V10h2m0-2h-2a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2V10a2%202%200%200%200-2-2zM20%2010v10h-2V10h2m0-2h-2a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h2a2%202%200%200%200%202-2V10a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E");
 	}
 }
+@mixin d2l-icon-tier3-pause-borderless() {
+	@include d2l-icon();
+	&:before {
+		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M9%2030H4a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h5a4%204%200%200%201%204%204v22a4%204%200%200%201-4%204zM4%202a2%202%200%200%200-2%202v22a2%202%200%200%200%202%202h5a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2zM26%2030h-5a4%204%200%200%201-4-4V4a4%204%200%200%201%204-4h5a4%204%200%200%201%204%204v22a4%204%200%200%201-4%204zM21%202a2%202%200%200%200-2%202v22a2%202%200%200%200%202%202h5a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E");
+	}
+}
 @mixin d2l-icon-tier3-pic() {
 	@include d2l-icon();
 	&:before {
@@ -2441,6 +2447,12 @@
 		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M26%202c1.103%200%202%20.897%202%202v22c0%201.103-.897%202-2%202H4c-1.103%200-2-.897-2-2V4c0-1.103.897-2%202-2h22m0-2H4C1.8%200%200%201.8%200%204v22c0%202.2%201.8%204%204%204h22c2.2%200%204-1.8%204-4V4c0-2.2-1.8-4-4-4z%22%2F%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M12%209l9%206-9%206V9m0-2a2%202%200%200%200-2%202v12a2%202%200%200%200%203.11%201.664l9-6a2%202%200%200%200-.001-3.328l-9-6A1.997%201.997%200%200%200%2012%207z%22%2F%3E%3C%2Fsvg%3E");
 	}
 }
+@mixin d2l-icon-tier3-play-borderless() {
+	@include d2l-icon();
+	&:before {
+		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M7%202l18%2013L7%2028V2m0-2a2%202%200%200%200-2%202v26a2%202%200%200%200%203.17%201.62l18-13a2%202%200%200%200%200-3.24l-18-13A2%202%200%200%200%207%200z%22%2F%3E%3C%2Fsvg%3E");
+	}
+}
 @mixin d2l-icon-tier3-preview() {
 	@include d2l-icon();
 	&:before {
@@ -2465,6 +2477,12 @@
 		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M26%202c1.103%200%202%20.897%202%202v22c0%201.103-.897%202-2%202H4c-1.103%200-2-.897-2-2V4c0-1.103.897-2%202-2h22m0-2H4C1.8%200%200%201.8%200%204v22c0%202.2%201.8%204%204%204h22c2.2%200%204-1.8%204-4V4c0-2.2-1.8-4-4-4z%22%2F%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M20%2010v10H10V10h10m0-2H10c-1.1%200-2%20.9-2%202v10c0%201.1.9%202%202%202h10c1.1%200%202-.9%202-2V10c0-1.1-.9-2-2-2z%22%2F%3E%3C%2Fsvg%3E");
 	}
 }
+@mixin d2l-icon-tier3-stop-borderless() {
+	@include d2l-icon();
+	&:before {
+		content: url("data:image/svg+xml,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M23%2030H7a7%207%200%200%201-7-7V7a7%207%200%200%201%207-7h16a7%207%200%200%201%207%207v16a7%207%200%200%201-7%207zM7%202a5%205%200%200%200-5%205v16a5%205%200%200%200%205%205h16a5%205%200%200%200%205-5V7a5%205%200%200%200-5-5z%22%2F%3E%3C%2Fsvg%3E");
+	}
+}
 @mixin d2l-icon-tier3-syllabus() {
 	@include d2l-icon();
 	&:before {

diff --git a/images/tier3/pause-borderless.svg b/images/tier3/pause-borderless.svg
diff --git a/images/tier3/play-borderless.svg b/images/tier3/play-borderless.svg
diff --git a/images/tier3/stop-borderless.svg b/images/tier3/stop-borderless.svg
diff --git a/tier3-icons.html b/tier3-icons.html
@@ -96,6 +96,10 @@
           <path d="M9.34 20.974c.263.087.546-.054.634-.316.3-.903.36-1.605.36-3.195 0-3.065.418-4.508 2.52-6.61.195-.194.195-.51 0-.706-.195-.195-.512-.195-.707 0-2.323 2.323-2.814 4.01-2.814 7.317 0 1.484-.052 2.11-.308 2.88-.088.26.054.543.316.63z"/>
           <path d="M26.942 22.29c-1.29-1.29-1.94-2.53-1.94-7.29 0-4.32-1.96-7.83-5-9.64V4C20 1.8 18.2 0 16 0h-2c-2.2 0-4 1.8-4 4v1.36C6.957 7.17 4.997 10.68 4.997 15c0 4.76-.65 6-1.94 7.29-1.51 1.51-1.51 3.71.7 3.71h6.34c.46 2.28 2.482 4 4.902 4s4.44-1.72 4.9-4h6.34c2.21 0 2.21-2.2.7-3.71zM12 4c0-1.1.9-2 2-2h2c1.1 0 2 .9 2 2v.46c-.94-.3-1.95-.46-3-.46s-2.06.16-3 .46V4zm3 24c-1.3 0-2.41-.84-2.82-2h5.64c-.41 1.16-1.52 2-2.82 2zM4.218 24c.06-.09.14-.19.25-.29 1.71-1.71 2.53-3.47 2.53-8.71 0-5.31 3.43-9 8.002-9s8.002 3.69 8.002 9c0 5.24.82 7 2.53 8.71.11.1.19.2.25.29H4.22z"/>
         </g>
+        <g id="pause-borderless">
+          <path d="M9,30H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H9a4,4,0,0,1,4,4V26A4,4,0,0,1,9,30ZM4,2A2,2,0,0,0,2,4V26a2,2,0,0,0,2,2H9a2,2,0,0,0,2-2V4A2,2,0,0,0,9,2Z"/>
+          <path d="M26,30H21a4,4,0,0,1-4-4V4a4,4,0,0,1,4-4h5a4,4,0,0,1,4,4V26A4,4,0,0,1,26,30ZM21,2a2,2,0,0,0-2,2V26a2,2,0,0,0,2,2h5a2,2,0,0,0,2-2V4a2,2,0,0,0-2-2Z"/>
+        </g>
         <g id="pause">
           <path d="M26,2a2,2,0,0,1,2,2V26a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V4A2,2,0,0,1,4,2H26m0-2H4A4,4,0,0,0,0,4V26a4,4,0,0,0,4,4H26a4,4,0,0,0,4-4V4a4,4,0,0,0-4-4Z"/>
           <path d="M12,10V20H10V10h2m0-2H10a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2h2a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"/>
@@ -105,6 +109,9 @@
           <path d="M15 20c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-7c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z"/>
           <path d="M27.11 8.01C27.08 8 27.04 8 27 8h-6.44l-.7-1.74C19.55 5.5 18.82 5 18 5h-6c-.76 0-1.45.43-1.79 1.11L9.27 8H7c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H3c-1.65 0-3 1.35-3 3v12c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3V11c0-1.61-1.29-2.94-2.89-2.99zM28 23c0 .54-.46 1-1 1H3c-.54 0-1-.46-1-1v-9h7.35c-.23.63-.35 1.3-.35 2 0 3.31 2.69 6 6 6s6-2.69 6-6c0-.7-.12-1.37-.35-2H28v9zm-18-7c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5zm18-3h-7.81c-1.03-1.79-2.97-3-5.19-3s-4.16 1.21-5.19 3H2v-2c0-.54.46-1 1-1h6.88c.05 0 .1 0 .14-.01.31-.04.57-.23.72-.48.01-.03 1.05-2.05 1.09-2.1.18-.24.46-.41.79-.41h4.7c.41 0 .77.25.92.61l.72 1.78c.15.36.51.61.92.61H27c.09 0 .19.01.27.04.42.12.73.51.73.96v2z"/>
         </g>
+        <g id="play-borderless">
+          <path d="M7,2,25,15,7,28V2M7,0A2,2,0,0,0,5,2V28a2,2,0,0,0,3.17,1.62l18-13a2,2,0,0,0,0-3.24l-18-13A2,2,0,0,0,7,0Z"/>
+        </g>
         <g id="play">
           <path d="M26,2c1.103,0,2,0.897,2,2v22c0,1.103-0.897,2-2,2H4c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2H26 M26,0H4
 	C1.8,0,0,1.8,0,4v22c0,2.2,1.8,4,4,4h22c2.2,0,4-1.8,4-4V4C30,1.8,28.2,0,26,0L26,0z"/>
@@ -124,6 +131,9 @@
           <path d="M28.828 23.17l-4.285-4.24c-.756-.75-1.765-1.17-2.854-1.17-.354 0-.707.05-1.04.14l-1.39-1.38c1.21-1.7 1.915-3.78 1.915-6.02 0-5.8-4.74-10.5-10.587-10.5S0 4.7 0 10.5 4.74 21 10.587 21c2.128 0 4.114-.63 5.768-1.71l1.452 1.44c-.1.33-.14.68-.14 1.03 0 1.07.412 2.08 1.18 2.83l4.274 4.24c.757.75 1.776 1.17 2.855 1.17 1.08 0 2.087-.42 2.854-1.17 1.56-1.56 1.56-4.1-.002-5.66zM2.018 10.5c0-4.69 3.84-8.5 8.57-8.5s8.57 3.81 8.57 8.5-3.842 8.5-8.57 8.5-8.57-3.81-8.57-8.5zm25.378 16.92c-.786.78-2.067.78-2.853 0l-4.275-4.25c-.383-.37-.585-.87-.585-1.41 0-.54.212-1.04.585-1.41.383-.38.887-.59 1.422-.59.544 0 1.05.21 1.432.59l4.275 4.24c.786.78.786 2.05 0 2.83z"/>
           <path d="M11 16.5c0 .28-.22.5-.5.5h-.01C6.9 16.99 4 14.09 4 10.5S6.9 4.01 10.49 4h.01c.28 0 .5.22.5.5s-.22.5-.5.5h-.01C7.46 5.01 5 7.47 5 10.5s2.46 5.49 5.49 5.5h.01c.28 0 .5.22.5.5z"/>
         </g>
+        <g id="stop-borderless">
+          <path d="M23,30H7a7,7,0,0,1-7-7V7A7,7,0,0,1,7,0H23a7,7,0,0,1,7,7V23A7,7,0,0,1,23,30ZM7,2A5,5,0,0,0,2,7V23a5,5,0,0,0,5,5H23a5,5,0,0,0,5-5V7a5,5,0,0,0-5-5Z"/>
+        </g>
         <g id="stop">
           <path d="M26,2c1.103,0,2,0.897,2,2v22c0,1.103-0.897,2-2,2H4c-1.103,0-2-0.897-2-2V4c0-1.103,0.897-2,2-2H26 M26,0H4
 	C1.8,0,0,1.8,0,4v22c0,2.2,1.8,4,4,4h22c2.2,0,4-1.8,4-4V4C30,1.8,28.2,0,26,0L26,0z"/>