src/app/styles/base/_icons.styl
/*
* ICONS
* =====
*
* This file contains icons declarations.
*/
$icon
background-position center
background-repeat no-repeat
$icon-before-after
content ''
display inline-block
width 1em
height 1em
$icon-menu
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='17' viewBox='0 0 20 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 .999c0-.552.455-.999.992-.999h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999h-18.016c-.548 0-.992-.443-.992-.999v-1.002zm0 7c0-.552.455-.999.992-.999h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999h-18.016c-.548 0-.992-.443-.992-.999v-1.002zm0 7c0-.552.455-.999.992-.999h18.016c.548 0 .992.443.992.999v1.002c0 .552-.455.999-.992.999h-18.016c-.548 0-.992-.443-.992-.999v-1.002z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-logo
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='30' height='22' viewBox='0 0 24 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 18h-11.145c-3.505 0-6.355-2.81-6.355-6.264 0-1.647.643-3.203 1.812-4.38 1.024-1.03 2.351-1.672 3.786-1.839.169-1.415.82-2.722 1.866-3.731 1.195-1.153 2.773-1.786 4.444-1.786 1.671 0 3.249.633 4.444 1.786 1.042 1.005 1.69 2.305 1.864 3.712 3.237.286 5.784 2.975 5.784 6.239 0 2.773-1.838 5.131-4.377 5.952 0 0-.929.311-2.123.311zm.145-2c2.406 0 4.355-1.921 4.355-4.263 0-2.199-1.726-4.049-3.96-4.246-.939-.083-1.693-.811-1.809-1.747-.118-.956-.558-1.834-1.267-2.518-.82-.791-1.9-1.225-3.056-1.225-1.155 0-2.235.434-3.056 1.226-.713.687-1.153 1.57-1.268 2.53-.11.919-.836 1.642-1.755 1.749-.989.115-1.896.555-2.598 1.261-.797.803-1.232 1.853-1.232 2.971 0 2.343 1.948 4.264 4.355 4.264h11.29zm-9.061-4.723c.154.231.441.554.866.873.707.53 1.56.85 2.55.85.99 0 1.843-.32 2.55-.85.425-.319.712-.641.866-.873.153-.23.091-.54-.139-.693-.23-.153-.54-.091-.693.139-.096.144-.309.384-.634.627-.543.407-1.19.65-1.95.65s-1.407-.243-1.95-.65c-.325-.244-.538-.484-.634-.627-.153-.23-.464-.292-.693-.139-.23.153-.292.464-.139.693z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-magnifier
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.57 14.567c-1.296.903-2.871 1.433-4.57 1.433-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8c0 1.699-.529 3.273-1.432 4.569l5.432 5.433-1.998 1.998-5.432-5.433zm-4.57-.567c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-folder
@extend $icon
@extend $icon-before-after
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.999c0-.552.438-.999 1.003-.999h4.994c.554 0 1.003.453 1.003 1h8.002c.551 0 .998.444.998 1v1h-16v-2.001zm0 3.001h16v9.005c0 .55-.445.995-1.001.995h-13.998c-.553 0-1.001-.456-1.001-.995v-9.005z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-cog
@extend $icon
@extend $icon-before-after
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.249 7.078c.052.259.078.568.078.925 0 .358-.026.666-.078.925l1.621 1.333c.13.086.162.203.098.352-.325.95-.859 1.826-1.602 2.627-.104.124-.229.155-.371.094l-2.031-.668c-.521.396-1.08.705-1.68.926l-.409 1.999c-.026.147-.117.234-.273.259-.561.1-1.094.148-1.602.148-.507 0-1.042-.049-1.602-.148-.156-.024-.247-.111-.273-.259l-.409-1.999c-.639-.234-1.198-.544-1.68-.926l-2.031.668c-.144.062-.267.03-.371-.094-.742-.802-1.275-1.677-1.602-2.627-.065-.148-.032-.266.098-.352l1.621-1.333c-.052-.26-.078-.567-.078-.925 0-.358.026-.667.078-.925l-1.621-1.332c-.13-.086-.163-.204-.098-.352.325-.949.859-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667c.48-.383 1.041-.691 1.68-.925l.409-1.999c.026-.148.117-.234.273-.259 1.067-.21 2.135-.21 3.202 0 .156.024.247.111.273.259l.409 1.999c.6.223 1.159.531 1.68.925l2.031-.667c.143-.062.267-.03.371.093.742.803 1.275 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zm-6.249-2.578c-1.933 0-3.5 1.567-3.5 3.5s1.567 3.5 3.5 3.5 3.5-1.567 3.5-3.5-1.567-3.5-3.5-3.5z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-sync
@extend $icon
@extend $icon-before-after
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.822 12.822l.835.835c-3.124 3.124-8.19 3.124-11.314 0-3.124-3.124-3.124-8.19 0-11.314 3.124-3.124 8.19-3.124 11.314 0l-1.414 1.414c-2.343-2.343-6.142-2.343-8.485 0-2.343 2.343-2.343 6.142 0 8.485 2.309 2.309 6.031 2.343 8.382.101l-2.213-1.549 4.924-.868.868 4.924-2.896-2.028z' fill='%23fff'/%3E%3C/svg%3E ")
$icon-backup
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 19h2.5c1.195 0 2.123-.311 2.123-.311 2.538-.822 4.377-3.18 4.377-5.952 0-3.264-2.547-5.953-5.784-6.239-.174-1.407-.822-2.708-1.864-3.712-1.195-1.152-2.773-1.786-4.444-1.786-1.671 0-3.249.633-4.444 1.786-1.046 1.009-1.696 2.317-1.866 3.731-1.435.167-2.762.808-3.786 1.839-1.169 1.177-1.812 2.733-1.812 4.38 0 3.454 2.85 6.264 6.355 6.264h2.645v-2h-2.645c-2.407 0-4.355-1.921-4.355-4.264 0-1.119.434-2.168 1.232-2.971.702-.706 1.609-1.146 2.598-1.261.919-.107 1.645-.83 1.755-1.749.115-.96.556-1.842 1.268-2.53.821-.792 1.9-1.226 3.056-1.226 1.155 0 2.235.434 3.056 1.225.709.684 1.149 1.562 1.267 2.518.116.936.869 1.664 1.809 1.747 2.234.197 3.96 2.047 3.96 4.246 0 2.342-1.95 4.263-4.355 4.263h-2.645v2zm-3-10l4 4h-3v10h-2v-10h-3l4-4z' fill='%234F5B69'/%3E%3C/svg%3E ")
$icon-download
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18h2.5c1.195 0 2.123-.311 2.123-.311 2.538-.822 4.377-3.18 4.377-5.952 0-3.264-2.547-5.953-5.784-6.239-.174-1.407-.822-2.708-1.864-3.712-1.195-1.152-2.773-1.786-4.444-1.786-1.671 0-3.249.633-4.444 1.786-1.046 1.009-1.696 2.317-1.866 3.731-1.435.167-2.762.808-3.786 1.839-1.169 1.177-1.812 2.733-1.812 4.38 0 3.454 2.85 6.264 6.355 6.264h2.645v-2h-2.645c-2.407 0-4.355-1.921-4.355-4.264 0-1.119.434-2.168 1.232-2.971.702-.706 1.609-1.146 2.598-1.261.919-.107 1.645-.83 1.755-1.749.115-.96.556-1.842 1.268-2.53.821-.792 1.9-1.226 3.056-1.226 1.155 0 2.235.434 3.056 1.225.709.684 1.149 1.562 1.267 2.518.116.936.869 1.664 1.809 1.747 2.234.197 3.96 2.047 3.96 4.246 0 2.342-1.95 4.263-4.355 4.263h-2.645v2zm-3 5.986l4-4h-3v-10h-2v10h-3l4 4z' fill='%23CEDAE4'/%3E%3C/svg%3E ")
$icon-phone
@extend $icon
background-image url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23CEDAE4' d='M18.006 0h-12.012c-1.099 0-1.994.898-1.994 2.005v19.99c0 1.109.893 2.005 1.994 2.005h12.012c1.1 0 1.994-.898 1.994-2.005v-19.99c0-1.108-.893-2.005-1.994-2.005zm-7.006 1h2v1h-2v-1zm1 22c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm6-3h-12v-17h12v17z'/%3E%3C/svg%3E")
.icon-download
width 24px
height 24px
@extend $icon-download
.icon-phone
width 24px
height 24px
@extend $icon-phone
// Files Types
// --------------------------------------------------------
.item-icon-left .icon-type
top 10px
left 10px
.icon-type
top 0
width 32px
background-image url("../img/sprite-files-type.svg")
background-repeat no-repeat
&.type-folder
background-position 0 0
&.type-file
&.undefined
background-position -32px 0
&.type-archive
background-position -64px 0
&.type-code
background-position -96px 0
&.type-text
background-position -128px 0
&.type-presentation
background-position -160px 0
&.type-spreadsheet
background-position -192px 0
&.type-pdf
background-position -224px 0
&.type-binary
background-position -256px 0
&.type-audio
background-position -288px 0
&.type-video
background-position -320px 0
&.type-image
background-position -352px 0