├── .gitattributes ├── .github └── iconoo.png ├── .gitignore ├── .npmignore ├── README.md ├── build └── iconoo.css ├── circle.yml ├── dist └── iconoo.min.css ├── gulpfile.js ├── index.html ├── index.js ├── license ├── package.json └── sass ├── functions.scss ├── generals.scss ├── iconoo.scss ├── icons.scss ├── icons ├── arrow.scss ├── audioCtrl.scss ├── caret.scss ├── check.scss ├── cross.scss ├── emoji.scss ├── home.scss ├── location.scss ├── menu.scss ├── refresh.scss ├── search.scss ├── share.scss ├── textAlign.scss └── volume.scss ├── mixins.scss ├── temp ├── asterisk.scss ├── bluetooth.scss ├── book.scss ├── bookmark.scss ├── calendar.scss ├── camera.scss ├── cart.scss ├── chain.scss ├── chart.scss ├── circle.scss ├── clock.scss ├── comment.scss ├── creditCard.scss ├── crop.scss ├── cup.scss ├── devices.scss ├── display.scss ├── document.scss ├── dropper.scss ├── exclamation.scss ├── eye.scss ├── file.scss ├── filter.scss ├── flag.scss ├── folder.scss ├── forbidden.scss ├── gear.scss ├── headphone.scss ├── heart.scss ├── image.scss ├── infinity.scss ├── keyboard.scss ├── logos.scss ├── mail.scss ├── market.scss ├── microphone.scss ├── moon.scss ├── mouse.scss ├── music.scss ├── paperclip.scss ├── piano.scss ├── power.scss ├── rename.scss ├── rss.scss ├── ruler.scss ├── signin.scss ├── signout.scss ├── sitemap.scss ├── sliders.scss ├── socials.scss ├── spinner.scss ├── sun.scss ├── support.scss ├── tag.scss ├── terminal.scss ├── trash.scss ├── user.scss └── video.scss └── variables.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.github/iconoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qieguo2016/iconoo/9259e5c10e83bea5fb5f370860769527b1a81f6b/.github/iconoo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .DS_Store? 3 | 4 | .editorconfig 5 | 6 | node_modules/ 7 | .idea 8 | *debug.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | build 4 | .github 5 | 6 | .editorconfig 7 | gulpfile.js 8 | index.html -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iconoo 2 | 3 | [![CircleCI](https://img.shields.io/circleci/project/qieguo2016/iconoo.svg)](https://github.com/qieguo2016/iconoo) [![GitHub stars](https://img.shields.io/github/stars/qieguo2016/iconoo.svg)](https://github.com/qieguo2016/iconoo/stargazers) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/qieguo2016/iconoo/master/license) 4 | 5 | **iconoo**是一个纯CSS的图标库，基于 **[icono][1]** 改造而成，增加了整体缩放功能（线宽不变）和`webpack`引入方式。 6 | 7 | **[LIVE DEMO][2]** 8 | 9 | ![iconoo][3] 10 | 11 | ## How to use 12 | 13 | - **[下载][4]** 后直接link引入css文件，然后直接在标签中引入相应的class即可，例如： 14 | 15 | `` 16 | 17 | `
` 18 | 19 | `` 20 | 21 | `` 22 | 23 | - 如果你使用webpack，那么可以直接使用安装npm包并引入iconoo库即可。 24 | 25 | ```bash 26 | // 安装包 27 | npm i iconoo 28 | 29 | // 通过webpack引入 30 | require('iconoo'); 31 | ``` 32 | 33 | **PS：** 34 | 35 | - 设置font-size可等比缩放图标，同时保持线宽不变，默认值为20px（图标宽高为30px） 36 | 37 | - 设置zoom或者transform scale可等比缩放图标，线宽也同时变大 38 | 39 | - 如果需要改变线宽和其他全局属性，请下载源码，更改variables.sass内的相应变量 40 | 41 | ------- 42 | 43 | # iconoo 44 | 45 | **iconoo** is an icon pack that needs no external resources. **iconoo** is base on **[icono][1]**, and it is flexible, and you don't need to calculate any diamesion. 46 | 47 | [LIVE DEMO][2] 48 | 49 | ## How to use 50 | 51 | - [Download][3] the css file and link it to your page, then use these class in every tag you want, like these： 52 | 53 | `` 54 | 55 | `
` 56 | 57 | `` 58 | 59 | `` 60 | 61 | - if you use webpack，then you can install iconoo via npm and import into your app like this: 62 | 63 | ```bash 64 | npm i iconoo 65 | 66 | require('iconoo'); 67 | ``` 68 | 69 | PS: You can simple adjust the size of icons by setting its font-size, of course you can also scale icons by zoom or transform: scale. 70 | 71 | [1]:https://github.com/saeedalipoor/icono 72 | [2]:https://qieguo2016.github.io/iconoo/ 73 | [3]:https://github.com/qieguo2016/iconoo/blob/master/.github/iconoo.png 74 | [4]:https://github.com/qieguo2016/iconoo/blob/master/dist/iconoo.min.css 75 | 76 | ------ 77 | 78 | ## Available classes 79 | 80 | * `iconoo-pin` 81 | * `iconoo-locationArrow` 82 | * `iconoo-sync` 83 | * `iconoo-reset` 84 | * `iconoo-share` 85 | * `iconoo-search` 86 | * `iconoo-home` 87 | * `iconoo-bars` 88 | * `iconoo-ellipsis` 89 | * `iconoo-tiles` 90 | * `iconoo-list` 91 | * `iconoo-smile` 92 | * `iconoo-frown` 93 | * `iconoo-meh` 94 | * `iconoo-volume` 95 | * `iconoo-volumeLow` 96 | * `iconoo-volumeMedium` 97 | * `iconoo-volumeHigh` 98 | * `iconoo-volumeDecrease` 99 | * `iconoo-volumeIncrease` 100 | * `iconoo-volumeMute` 101 | * `iconoo-play` 102 | * `iconoo-pause` 103 | * `iconoo-stop` 104 | * `iconoo-rewind` 105 | * `iconoo-forward` 106 | * `iconoo-next` 107 | * `iconoo-previous` 108 | * `iconoo-rightArrow` 109 | * `iconoo-leftArrow` 110 | * `iconoo-upArrow` 111 | * `iconoo-downArrow` 112 | * `iconoo-check` 113 | * `iconoo-checkCircle` 114 | * `iconoo-cross` 115 | * `iconoo-crossCircle` 116 | * `iconoo-plus` 117 | * `iconoo-plusCircle` 118 | * `iconoo-caretRight` 119 | * `iconoo-caretLeft` 120 | * `iconoo-caretUp` 121 | * `iconoo-caretDown` 122 | * `iconoo-caretRightCircle` 123 | * `iconoo-caretLeftCircle` 124 | * `iconoo-caretUpCircle` 125 | * `iconoo-caretDownCircle` 126 | * `iconoo-caretRightSquare` 127 | * `iconoo-caretLeftSquare` 128 | * `iconoo-caretUpSquare` 129 | * `iconoo-caretDownSquare` 130 | 131 | ## Development & Contributing 132 | 133 | Using npm install the dependencies: 134 | 135 | $ npm install 136 | 137 | Run Gulp 138 | 139 | $ gulp 140 | 141 | -------------------------------------------------------------------------------- /build/iconoo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .iconoo-stroke { 3 | border: 2px solid; } 4 | 5 | .stickCenterV, .iconoo-textIndent:before, .iconoo-textOutdent:before, .iconoo-list:before, .iconoo-volumeLow:before, .iconoo-volumeMedium:before, .iconoo-volumeHigh:before, .iconoo-volumeHigh:after, .iconoo-volumeDecrease:before, .iconoo-volumeIncrease:before, .iconoo-volumeMute:before, .iconoo-volumeDecrease:after, .iconoo-volumeIncrease:after, .iconoo-volumeMute:after, .iconoo-rightArrow:before, .iconoo-leftArrow:before, .iconoo-upArrow:before, .iconoo-downArrow:before { 6 | position: absolute; 7 | top: 50%; 8 | -webkit-transform: translateY(-50%); 9 | -ms-transform: translateY(-50%); 10 | transform: translateY(-50%); } 11 | 12 | .stickCenterH, [class*="iconoo-textAlign"].iconoo-textAlignCenter:before, [class*="iconoo-textAlign"].iconoo-textAlignCenter:after, .iconoo-search:before { 13 | position: absolute; 14 | left: 50%; 15 | -webkit-transform: translateX(-50%); 16 | -ms-transform: translateX(-50%); 17 | transform: translateX(-50%); } 18 | 19 | .stickCenter, .iconoo-pin:before, [class*="iconoo-plus"]:before, [class*="iconoo-plus"]:after, [class*="iconoo-cross"]:before, [class*="iconoo-cross"]:after { 20 | position: absolute; 21 | left: 50%; 22 | top: 50%; 23 | -webkit-transform: translate(-50%, -50%); 24 | -ms-transform: translate(-50%, -50%); 25 | transform: translate(-50%, -50%); } 26 | 27 | .spin[class*="spin"] { 28 | -webkit-animation: loading-spinner 2s infinite linear; 29 | animation: loading-spinner 2s infinite linear; } 30 | 31 | @-webkit-keyframes loading-spinner { 32 | 0% { 33 | -webkit-transform: rotate(0deg); 34 | transform: rotate(0deg); } 35 | 100% { 36 | -webkit-transform: rotate(360deg); 37 | transform: rotate(360deg); } } 38 | 39 | @keyframes loading-spinner { 40 | 0% { 41 | -webkit-transform: rotate(0deg); 42 | transform: rotate(0deg); } 43 | 100% { 44 | -webkit-transform: rotate(360deg); 45 | transform: rotate(360deg); } } 46 | 47 | /** 48 | * emoji 表情符 49 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 50 | * 主控参数默认值 font-size: $U20; 51 | * $strokeSize，笔触大小，这里用来指定边框线宽 52 | */ 53 | [class*="iconoo-textAlign"] { 54 | width: 1.3em; 55 | height: 1.1em; 56 | margin: 0.2em 0.1em; } 57 | [class*="iconoo-textAlign"]:before, [class*="iconoo-textAlign"]:after { 58 | position: absolute; 59 | height: 2px; 60 | -webkit-box-shadow: inset 0 0 0 1em, 0 0.4em 0 0, 0 0.8em 0 0; 61 | box-shadow: inset 0 0 0 1em, 0 0.4em 0 0, 0 0.8em 0 0; 62 | right: 0; } 63 | [class*="iconoo-textAlign"]:before { 64 | width: 1.3em; 65 | top: 0; } 66 | [class*="iconoo-textAlign"]:after { 67 | width: 0.9em; 68 | top: 0.2em; } 69 | [class*="iconoo-textAlign"].iconoo-textAlignLeft:before, [class*="iconoo-textAlign"].iconoo-textAlignLeft:after { 70 | left: 0; } 71 | 72 | .iconoo-textIndent, .iconoo-textOutdent { 73 | width: 1em; 74 | height: 0.8em; 75 | border-width: 0.2em 0 0.2em 0.4em; 76 | border-style: solid; 77 | border-color: transparent; 78 | -webkit-box-shadow: 0 -2px, 0 2px, inset 0 2px, inset 0 -2px; 79 | box-shadow: 0 -2px, 0 2px, inset 0 2px, inset 0 -2px; 80 | margin: 0.35em 0.25em; } 81 | .iconoo-textIndent:before, .iconoo-textOutdent:before { 82 | left: -0.4em; 83 | border: 0.25em solid; 84 | border-top-color: transparent; 85 | border-bottom-color: transparent; 86 | border-right-width: 0; } 87 | 88 | .iconoo-textOutdent:before { 89 | border-left-width: 0; 90 | border-right-width: 0.25em; } 91 | 92 | /** 93 | * Pin、 94 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 95 | * 主控参数默认值 font-size: $U20; 96 | * $strokeSize，笔触大小，也就是图标的线宽 97 | */ 98 | .iconoo-locationArrow { 99 | width: 1.5em; 100 | height: 1.5em; } 101 | .iconoo-locationArrow:before { 102 | position: absolute; 103 | left: 0.35em; 104 | top: 0.8em; 105 | border-width: 0.3em 0 0.3em 0.3em; 106 | border-style: solid; 107 | border-left-color: transparent; 108 | -webkit-transform: rotate(-45deg); 109 | -ms-transform: rotate(-45deg); 110 | transform: rotate(-45deg); } 111 | .iconoo-locationArrow:after { 112 | position: absolute; 113 | top: 0.5em; 114 | left: 0.1em; 115 | border-width: 0.5em; 116 | border-style: solid; 117 | border-bottom-color: transparent; 118 | border-left-color: transparent; 119 | -webkit-transform: skew(-30deg, -30deg); 120 | -ms-transform: skew(-30deg, -30deg); 121 | transform: skew(-30deg, -30deg); } 122 | 123 | .iconoo-pin { 124 | width: 1.1em; 125 | height: 1.1em; 126 | border: 2px solid; 127 | border-radius: 50% 50% 50% 0; 128 | -webkit-transform: rotate(-45deg); 129 | -ms-transform: rotate(-45deg); 130 | transform: rotate(-45deg); } 131 | .iconoo-pin:before { 132 | position: absolute; 133 | width: 0.3em; 134 | height: 0.3em; 135 | border: 2px solid; 136 | border-radius: 50%; } 137 | 138 | /** 139 | * search 140 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 141 | * 主控参数默认值 font-size: $U20; 142 | * $strokeSize，笔触大小，也就是图标的线宽 143 | */ 144 | .iconoo-home { 145 | width: 1.1em; 146 | height: 0.8em; 147 | border: 2px solid; 148 | border-top: none; 149 | margin: 0.65em 0.2em 0.05em 0.2em; } 150 | .iconoo-home:before { 151 | width: 1em; 152 | height: 1em; 153 | -webkit-transform: translate(-50%, -0.35em) rotate(45deg); 154 | -ms-transform: translate(-50%, -0.35em) rotate(45deg); 155 | transform: translate(-50%, -0.35em) rotate(45deg); 156 | position: absolute; 157 | left: 50%; 158 | margin: auto; 159 | border: 2px solid; 160 | border-right-color: transparent; 161 | border-bottom-color: transparent; 162 | -webkit-box-sizing: border-box; 163 | box-sizing: border-box; } 164 | .iconoo-home:after { 165 | position: absolute; 166 | width: 0.3em; 167 | height: 0.5em; 168 | bottom: 0; 169 | position: absolute; 170 | left: 50%; 171 | -webkit-transform: translateX(-50%); 172 | -ms-transform: translateX(-50%); 173 | transform: translateX(-50%); 174 | border: 1px solid; 175 | border-bottom: none; } 176 | 177 | /** 178 | * Reset、Sync 179 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 180 | * 主控参数默认值 font-size: $U20; 181 | * $strokeSize，笔触大小，也就是图标的线宽 182 | */ 183 | .iconoo-reset { 184 | width: 1.5em; 185 | height: 1.5em; 186 | border-radius: 50%; 187 | border-width: 2px; 188 | border-style: solid; 189 | border-left-color: transparent; } 190 | .iconoo-reset:before { 191 | position: absolute; 192 | width: 0; 193 | height: 0; 194 | border-width: 0.3em; 195 | border-style: solid; 196 | border-right-color: transparent; 197 | border-left-color: transparent; 198 | border-bottom-color: transparent; 199 | bottom: 0; 200 | right: 50%; 201 | -webkit-transform: translateX(-50%) rotate(135deg); 202 | -ms-transform: translateX(-50%) rotate(135deg); 203 | transform: translateX(-50%) rotate(135deg); } 204 | 205 | .iconoo-sync { 206 | width: 1.5em; 207 | height: 1.5em; 208 | border-radius: 50%; 209 | border: 2px solid; 210 | border-right-color: transparent; 211 | border-left-color: transparent; } 212 | .iconoo-sync:before, .iconoo-sync:after { 213 | position: absolute; 214 | width: 0; 215 | height: 0; 216 | border-width: 0.3em; 217 | border-style: solid; 218 | border-right-color: transparent; 219 | border-bottom-color: transparent; 220 | border-left-color: transparent; } 221 | .iconoo-sync:before { 222 | -webkit-transform: translateX(50%) rotate(-45deg); 223 | -ms-transform: translateX(50%) rotate(-45deg); 224 | transform: translateX(50%) rotate(-45deg); 225 | left: 50%; 226 | top: 0; } 227 | .iconoo-sync:after { 228 | -webkit-transform: translateX(-50%) rotate(135deg); 229 | -ms-transform: translateX(-50%) rotate(135deg); 230 | transform: translateX(-50%) rotate(135deg); 231 | right: 50%; 232 | bottom: 0; } 233 | 234 | /** 235 | * Share 236 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 237 | * 主控参数默认值 font-size: $U20; 238 | * PS：这里没有线宽的概念，只有等比缩放。 239 | */ 240 | .iconoo-share { 241 | height: 0.45em; 242 | width: 0.45em; 243 | border-radius: 50%; 244 | -webkit-box-shadow: inset 0 0 0 1em, 1.1em -0.5em 0 0, 1.1em 0.5em 0 0; 245 | box-shadow: inset 0 0 0 1em, 1.1em -0.5em 0 0, 1.1em 0.5em 0 0; 246 | margin: 0.55em 1.15em 0.55em -0.05em; } 247 | .iconoo-share:before, .iconoo-share:after { 248 | position: absolute; 249 | width: 1.2em; 250 | height: 0.1em; 251 | -webkit-box-shadow: inset 0 0 0 1em; 252 | box-shadow: inset 0 0 0 1em; 253 | left: 0; } 254 | .iconoo-share:before { 255 | -webkit-transform-origin: left; 256 | -ms-transform-origin: left; 257 | transform-origin: left; 258 | -webkit-transform: translate(0.35em, 0.1em) rotate(-25deg); 259 | -ms-transform: translate(0.35em, 0.1em) rotate(-25deg); 260 | transform: translate(0.35em, 0.1em) rotate(-25deg); } 261 | .iconoo-share:after { 262 | -webkit-transform-origin: left; 263 | -ms-transform-origin: left; 264 | transform-origin: left; 265 | -webkit-transform: translate(0.25em, 0.2em) rotate(25deg); 266 | -ms-transform: translate(0.25em, 0.2em) rotate(25deg); 267 | transform: translate(0.25em, 0.2em) rotate(25deg); } 268 | 269 | /** 270 | * search 271 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 272 | * 主控参数默认值 font-size: $U20; 273 | * PS：这里没有线宽的概念，只有等比缩放。 274 | */ 275 | .iconoo-bars, .iconoo-hamburger { 276 | width: 1em; 277 | height: 0.1em; 278 | -webkit-box-shadow: inset 0 0 0 1em, 0 -0.3em, 0 0.3em; 279 | box-shadow: inset 0 0 0 1em, 0 -0.3em, 0 0.3em; 280 | margin: 0.7em 0.25em; } 281 | 282 | .iconoo-ellipsis { 283 | width: 0.2em; 284 | height: 0.2em; 285 | -webkit-box-shadow: 0 -0.4em 0, 0 0 0 1em inset, 0 0.4em 0; 286 | box-shadow: 0 -0.4em 0, 0 0 0 1em inset, 0 0.4em 0; 287 | margin: 0.65em; } 288 | 289 | .iconoo-tiles { 290 | width: 0.2em; 291 | height: 0.2em; 292 | -webkit-box-shadow: 0 -0.4em 0, -0.4em -0.4em 0, 0.4em -0.4em 0, 0 0 0 1em inset, -0.4em 0 0, 0.4em 0 0, 0 0.4em 0, -0.4em 0.4em 0, 0.4em 0.4em 0; 293 | box-shadow: 0 -0.4em 0, -0.4em -0.4em 0, 0.4em -0.4em 0, 0 0 0 1em inset, -0.4em 0 0, 0.4em 0 0, 0 0.4em 0, -0.4em 0.4em 0, 0.4em 0.4em 0; 294 | margin: 0.65em; } 295 | 296 | .iconoo-list { 297 | width: 0.2em; 298 | height: 0.2em; 299 | -webkit-box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; 300 | box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; 301 | margin: 0.65em 1.2em 0.65em 0.1em; } 302 | .iconoo-list:before { 303 | width: 0.9em; 304 | height: 0.2em; 305 | left: 0.4em; 306 | -webkit-box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; 307 | box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; } 308 | 309 | /** 310 | * search 311 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 312 | * 主控参数默认值 font-size: $U20; 313 | * PS：这里没有线宽的概念，只有等比缩放。 314 | */ 315 | .iconoo-search { 316 | width: 1em; 317 | height: 1em; 318 | border-radius: 50%; 319 | border: 0.1em solid; 320 | -webkit-transform: rotate(45deg); 321 | -ms-transform: rotate(45deg); 322 | transform: rotate(45deg); 323 | margin: 0.15em 0.15em 0.35em 0.35em; } 324 | .iconoo-search:before { 325 | width: 0.2em; 326 | height: 0.65em; 327 | -webkit-box-shadow: inset 0 0 0 1em; 328 | box-shadow: inset 0 0 0 1em; 329 | top: 0.85em; 330 | border-radius: 0 0 0.05em 0.05em; } 331 | 332 | /** 333 | * Volume 334 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 335 | * 主控参数默认值 font-size: $U20; 336 | * PS：这里没有线宽的概念，只有等比缩放。 337 | */ 338 | .iconoo-volume, .iconoo-volumeLow, .iconoo-volumeMedium, .iconoo-volumeHigh, .iconoo-volumeDecrease, .iconoo-volumeIncrease, .iconoo-volumeMute { 339 | width: 0; 340 | height: 0; 341 | border: 0.35em solid; 342 | border-left: none; 343 | border-top-color: transparent; 344 | border-bottom-color: transparent; 345 | padding: 0.3em 0.2em; 346 | -webkit-box-shadow: inset 0.2em 0; 347 | box-shadow: inset 0.2em 0; 348 | margin: 0.1em 0.375em; } 349 | 350 | .iconoo-volumeLow, .iconoo-volumeMedium, .iconoo-volumeHigh { 351 | margin: 0.1em 0.5em 0.1em 0.25em; } 352 | .iconoo-volumeLow:before, .iconoo-volumeMedium:before, .iconoo-volumeHigh:before, .iconoo-volumeHigh:after { 353 | width: 0.75em; 354 | height: 0.75em; 355 | position: absolute; 356 | border: 0.1em solid; 357 | border-radius: 50%; 358 | border-top-color: transparent; 359 | border-bottom-color: transparent; 360 | border-left-color: transparent; 361 | left: 0.1em; } 362 | 363 | .iconoo-volumeMedium, .iconoo-volumeHigh { 364 | margin: 0.1em 0.6em 0.1em 0.15em; } 365 | .iconoo-volumeMedium:before, .iconoo-volumeHigh:before { 366 | border-style: double; 367 | border-width: 0.3em; 368 | left: -0.1em; } 369 | 370 | .iconoo-volumeHigh { 371 | margin: 0.1em 0.7em 0.1em 0.05em; } 372 | .iconoo-volumeHigh:after { 373 | width: 1.6em; 374 | height: 1.6em; 375 | left: -0.35em; } 376 | 377 | .iconoo-volumeDecrease, .iconoo-volumeIncrease, .iconoo-volumeMute { 378 | margin: 0.1em 0.7em 0.1em 0.05em; } 379 | .iconoo-volumeDecrease:before, .iconoo-volumeIncrease:before, .iconoo-volumeMute:before, .iconoo-volumeDecrease:after, .iconoo-volumeIncrease:after, .iconoo-volumeMute:after { 380 | -webkit-box-shadow: inset 0 0 0 1em; 381 | box-shadow: inset 0 0 0 1em; } 382 | .iconoo-volumeDecrease:before, .iconoo-volumeIncrease:before, .iconoo-volumeMute:before { 383 | width: 0.5em; 384 | height: 0.1em; 385 | left: 0.85em; } 386 | 387 | .iconoo-volumeIncrease:after, .iconoo-volumeMute:after { 388 | height: 0.5em; 389 | width: 0.1em; 390 | left: 1.05em; } 391 | 392 | .iconoo-volumeMute:after, .iconoo-volumeMute:before { 393 | -webkit-transform: translateY(-50%) rotate(45deg); 394 | -ms-transform: translateY(-50%) rotate(45deg); 395 | transform: translateY(-50%) rotate(45deg); } 396 | 397 | /** 398 | * Cross & Plus 399 | * Cross is 45degree rotated plus 400 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 401 | * 主控参数默认值 font-size: $U20; 402 | * $strokeSize，笔触大小，也就是图标的线宽 403 | */ 404 | [class*="iconoo-plus"], [class*="iconoo-cross"] { 405 | width: 1.5em; 406 | height: 1.5em; } 407 | [class*="iconoo-plus"]:before, [class*="iconoo-plus"]:after, [class*="iconoo-cross"]:before, [class*="iconoo-cross"]:after { 408 | -webkit-box-shadow: inset 0 0 0 1em; 409 | box-shadow: inset 0 0 0 1em; } 410 | [class*="iconoo-plus"]:before, [class*="iconoo-cross"]:before { 411 | width: 1em; 412 | height: 2px; } 413 | [class*="iconoo-plus"]:after, [class*="iconoo-cross"]:after { 414 | height: 1em; 415 | width: 2px; } 416 | [class*="iconoo-plus"][class*="Circle"]:before, [class*="iconoo-cross"][class*="Circle"]:before { 417 | width: 0.9em; } 418 | [class*="iconoo-plus"][class*="Circle"]:after, [class*="iconoo-cross"][class*="Circle"]:after { 419 | height: 0.9em; } 420 | 421 | .iconoo-cross, .iconoo-crossCircle { 422 | -webkit-transform: rotate(45deg); 423 | -ms-transform: rotate(45deg); 424 | transform: rotate(45deg); } 425 | 426 | /** 427 | * Check 428 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 429 | * 主控参数默认值 font-size: $U20; 430 | * $strokeSize，笔触大小，也就是图标的线宽 431 | */ 432 | [class*="iconoo-check"] { 433 | width: 1.5em; 434 | height: 1.5em; 435 | -webkit-transform: rotate(-45deg); 436 | -ms-transform: rotate(-45deg); 437 | transform: rotate(-45deg); } 438 | [class*="iconoo-check"]:before, [class*="iconoo-check"]:after { 439 | -webkit-box-shadow: inset 0 0 0 1em; 440 | box-shadow: inset 0 0 0 1em; } 441 | [class*="iconoo-check"]:before { 442 | width: 1em; 443 | height: 2px; 444 | position: absolute; 445 | left: 0.9em; 446 | top: 0.9em; 447 | -webkit-transform: translate(-50%, -50%); 448 | -ms-transform: translate(-50%, -50%); 449 | transform: translate(-50%, -50%); } 450 | [class*="iconoo-check"]:after { 451 | height: 0.6em; 452 | width: 2px; 453 | position: absolute; 454 | left: 0.4em; 455 | bottom: 0.6em; } 456 | [class*="iconoo-check"][class*="Circle"]:before { 457 | width: 0.78em; 458 | top: 0.9em; 459 | left: 0.85em; } 460 | [class*="iconoo-check"][class*="Circle"]:after { 461 | height: 0.4em; 462 | left: 0.46em; 463 | bottom: 0.6em; } 464 | 465 | /** 466 | * 音频视频控制按钮：Play, Pause,Stop,Next,... 467 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 468 | * 主控参数默认值 font-size: $U20; 469 | * PS：这里没有线宽的概念，只有等比缩放。 470 | */ 471 | .iconoo-play { 472 | width: 0; 473 | height: 0; 474 | margin: 0.25em 0.35em; 475 | border-width: 0.5em 0 0.5em 0.8em; 476 | border-style: solid; 477 | border-top-color: transparent; 478 | border-bottom-color: transparent; } 479 | 480 | .iconoo-pause { 481 | width: 0.3em; 482 | height: 1em; 483 | margin: 0.25em 0.9em 0.25em 0.3em; 484 | -webkit-box-shadow: inset 0 0 0 1em, 0.6em 0 0 0; 485 | box-shadow: inset 0 0 0 1em, 0.6em 0 0 0; } 486 | 487 | .iconoo-stop { 488 | width: 0; 489 | height: 0; 490 | border: solid 0.5em; 491 | margin: 0.25em; } 492 | 493 | .iconoo-forward, .iconoo-rewind { 494 | width: 0; 495 | height: 0; 496 | margin: 0.25em; 497 | border: 0.5em solid transparent; 498 | border-left: 0.5em solid; } 499 | .iconoo-forward:before, .iconoo-rewind:before { 500 | position: absolute; 501 | left: 0; 502 | top: -0.5em; 503 | width: 0; 504 | height: 0; 505 | border: 0.5em solid transparent; 506 | border-left: 0.5em solid; } 507 | 508 | .iconoo-rewind { 509 | -webkit-transform: rotate(180deg); 510 | -ms-transform: rotate(180deg); 511 | transform: rotate(180deg); } 512 | 513 | .iconoo-next, .iconoo-previous { 514 | width: 0; 515 | height: 0; 516 | margin: 0.25em 0.15em 0.25em 0.35em; 517 | border: 0.5em solid transparent; 518 | border-left: 0.5em solid; } 519 | .iconoo-next:before, .iconoo-previous:before { 520 | position: absolute; 521 | left: 0; 522 | top: -0.5em; 523 | width: 0; 524 | height: 0; 525 | border-width: 0.5em 0.15em; 526 | border-style: solid; } 527 | 528 | .iconoo-previous { 529 | -webkit-transform: translateX(-0.25em) rotate(180deg); 530 | -ms-transform: translateX(-0.25em) rotate(180deg); 531 | transform: translateX(-0.25em) rotate(180deg); } 532 | 533 | /** 534 | * emoji 表情符 535 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 536 | * 主控参数默认值 font-size: $U20; 537 | * $strokeSize，笔触大小，这里用来指定边框线宽 538 | */ 539 | .iconoo-smile, .iconoo-frown, .iconoo-meh { 540 | border-radius: 50%; 541 | border: 2px solid; 542 | height: 1.5em; 543 | width: 1.5em; } 544 | .iconoo-smile:before, .iconoo-frown:before, .iconoo-meh:before { 545 | border-radius: 50%; 546 | -webkit-box-shadow: 0.5em 0 0 0, 0 0 0 1em inset; 547 | box-shadow: 0.5em 0 0 0, 0 0 0 1em inset; 548 | height: 0.2em; 549 | width: 0.2em; 550 | position: absolute; 551 | left: 0; 552 | right: 0; 553 | margin: 0 auto; 554 | -webkit-transform: translate(-0.25em, 0.35em); 555 | -ms-transform: translate(-0.25em, 0.35em); 556 | transform: translate(-0.25em, 0.35em); } 557 | .iconoo-smile:after, .iconoo-frown:after, .iconoo-meh:after { 558 | border-radius: 50%; 559 | border: 2px solid; 560 | border-top-color: transparent; 561 | border-left-color: transparent; 562 | border-right-color: transparent; 563 | height: 0.8em; 564 | width: 0.8em; 565 | position: absolute; 566 | left: 0; 567 | right: 0; 568 | top: 0; 569 | bottom: 0; 570 | margin: auto; } 571 | 572 | .iconoo-frown:after { 573 | -webkit-transform: rotate(180deg); 574 | -ms-transform: rotate(180deg); 575 | transform: rotate(180deg); 576 | -webkit-transform-origin: center 85%; 577 | -ms-transform-origin: center 85%; 578 | transform-origin: center 85%; } 579 | 580 | .iconoo-meh:after { 581 | top: -0.2em; 582 | width: 0.6em; 583 | border-left-width: 0; 584 | border-right-width: 0; 585 | border-radius: 0; } 586 | 587 | /** 588 | * Carets 589 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 590 | * 主控参数默认值 font-size: $U20; 591 | * $strokeSize，笔触大小，也就是图标的线宽 592 | */ 593 | .iconoo-caretRight, .iconoo-caretRightCircle, .iconoo-caretRightSquare, .iconoo-caretLeft, .iconoo-caretLeftCircle, .iconoo-caretLeftSquare, .iconoo-caretUp, .iconoo-caretUpCircle, .iconoo-caretUpSquare, .iconoo-caretDown, .iconoo-caretDownCircle, .iconoo-caretDownSquare { 594 | width: 0.5em; 595 | height: 1em; 596 | margin: 0.25em 0.5em; } 597 | .iconoo-caretRight:before, .iconoo-caretRightCircle:before, .iconoo-caretRightSquare:before, .iconoo-caretLeft:before, .iconoo-caretLeftCircle:before, .iconoo-caretLeftSquare:before, .iconoo-caretUp:before, .iconoo-caretUpCircle:before, .iconoo-caretUpSquare:before, .iconoo-caretDown:before, .iconoo-caretDownCircle:before, .iconoo-caretDownSquare:before, .iconoo-caretRight:after, .iconoo-caretRightCircle:after, .iconoo-caretRightSquare:after, .iconoo-caretLeft:after, .iconoo-caretLeftCircle:after, .iconoo-caretLeftSquare:after, .iconoo-caretUp:after, .iconoo-caretUpCircle:after, .iconoo-caretUpSquare:after, .iconoo-caretDown:after, .iconoo-caretDownCircle:after, .iconoo-caretDownSquare:after { 598 | width: 0.707em; 599 | height: 2px; 600 | position: absolute; 601 | top: 0; 602 | bottom: 0; 603 | margin: auto 0; 604 | right: 0; 605 | -webkit-box-shadow: inset 0 0 0 1em; 606 | box-shadow: inset 0 0 0 1em; 607 | -webkit-transform-origin: right; 608 | -ms-transform-origin: right; 609 | transform-origin: right; } 610 | .iconoo-caretRight:before, .iconoo-caretRightCircle:before, .iconoo-caretRightSquare:before, .iconoo-caretLeft:before, .iconoo-caretLeftCircle:before, .iconoo-caretLeftSquare:before, .iconoo-caretUp:before, .iconoo-caretUpCircle:before, .iconoo-caretUpSquare:before, .iconoo-caretDown:before, .iconoo-caretDownCircle:before, .iconoo-caretDownSquare:before { 611 | -webkit-transform: rotate(45deg); 612 | -ms-transform: rotate(45deg); 613 | transform: rotate(45deg); } 614 | .iconoo-caretRight:after, .iconoo-caretRightCircle:after, .iconoo-caretRightSquare:after, .iconoo-caretLeft:after, .iconoo-caretLeftCircle:after, .iconoo-caretLeftSquare:after, .iconoo-caretUp:after, .iconoo-caretUpCircle:after, .iconoo-caretUpSquare:after, .iconoo-caretDown:after, .iconoo-caretDownCircle:after, .iconoo-caretDownSquare:after { 615 | -webkit-transform: rotate(-45deg); 616 | -ms-transform: rotate(-45deg); 617 | transform: rotate(-45deg); } 618 | 619 | .iconoo-caretLeft, .iconoo-caretLeftCircle, .iconoo-caretLeftSquare { 620 | -webkit-transform: rotate(180deg); 621 | -ms-transform: rotate(180deg); 622 | transform: rotate(180deg); } 623 | 624 | .iconoo-caretUp, .iconoo-caretUpCircle, .iconoo-caretUpSquare { 625 | -webkit-transform: rotate(-90deg); 626 | -ms-transform: rotate(-90deg); 627 | transform: rotate(-90deg); } 628 | 629 | .iconoo-caretDown, .iconoo-caretDownCircle, .iconoo-caretDownSquare { 630 | -webkit-transform: rotate(90deg); 631 | -ms-transform: rotate(90deg); 632 | transform: rotate(90deg); } 633 | 634 | [class*="iconoo-caret"][class*="Circle"]:before, [class*="iconoo-caret"][class*="Circle"]:after, [class*="iconoo-caret"][class*="Square"]:before, [class*="iconoo-caret"][class*="Square"]:after { 635 | width: 0.55em; 636 | right: 0.5em; } 637 | 638 | /** 639 | * Arrow 640 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 641 | * 主控参数默认值 font-size: $U20; 642 | * PS：这里没有线宽的概念，只有等比缩放。 643 | */ 644 | .plus { 645 | -webkit-box-sizing: border-box; 646 | box-sizing: border-box; 647 | display: inline-block; 648 | position: relative; 649 | font-size: 20px; } 650 | 651 | .plus:before, plus:after { 652 | content: ''; 653 | pointer-events: none; 654 | position: absolute; 655 | left: 50%; 656 | top: 50%; 657 | -webkit-transform: translate(-50%, -50%); 658 | -ms-transform: translate(-50%, -50%); 659 | transform: translate(-50%, -50%); 660 | -webkit-box-shadow: inset 0 0 0 1em; 661 | box-shadow: inset 0 0 0 1em; } 662 | 663 | .plus:before { 664 | width: 1em; 665 | height: 2px; } 666 | 667 | .plus:after { 668 | height: 1em; 669 | width: 2px; } 670 | 671 | .iconoo-rightArrow, .iconoo-leftArrow, .iconoo-upArrow, .iconoo-downArrow { 672 | width: 0.8em; 673 | height: 0.2em; 674 | -webkit-box-shadow: inset 0 0 0 1em; 675 | box-shadow: inset 0 0 0 1em; 676 | margin: 0.65em 0.55em 0.65em 0.15em; } 677 | .iconoo-rightArrow:before, .iconoo-leftArrow:before, .iconoo-upArrow:before, .iconoo-downArrow:before { 678 | border-style: solid; 679 | border-width: 0.4em 0 0.4em 0.4em; 680 | border-color: transparent; 681 | border-left-color: inherit; 682 | left: 100%; 683 | right: auto; } 684 | 685 | .iconoo-leftArrow { 686 | -webkit-transform: translateX(0.4em) rotate(180deg); 687 | -ms-transform: translateX(0.4em) rotate(180deg); 688 | transform: translateX(0.4em) rotate(180deg); } 689 | 690 | .iconoo-upArrow { 691 | -webkit-transform: translate(0.2em, 0.2em) rotate(-90deg); 692 | -ms-transform: translate(0.2em, 0.2em) rotate(-90deg); 693 | transform: translate(0.2em, 0.2em) rotate(-90deg); } 694 | 695 | .iconoo-downArrow { 696 | -webkit-transform: translate(0.2em, -0.2em) rotate(90deg); 697 | -ms-transform: translate(0.2em, -0.2em) rotate(90deg); 698 | transform: translate(0.2em, -0.2em) rotate(90deg); } 699 | 700 | [class*="iconoo-"] { 701 | display: inline-block; 702 | position: relative; 703 | vertical-align: middle; 704 | color: #ddd; 705 | font-size: 20px; 706 | font-style: normal; 707 | text-align: left; 708 | text-indent: -9999px; 709 | direction: ltr; } 710 | [class*="iconoo-"]:before, [class*="iconoo-"]:after { 711 | content: ''; 712 | pointer-events: none; } 713 | [class*="iconoo-"][class*="Circle"] { 714 | -webkit-box-shadow: 0 0 0 2px; 715 | box-shadow: 0 0 0 2px; 716 | border-radius: 50%; 717 | width: 1.5em; 718 | height: 1.5em; 719 | margin: 0; } 720 | [class*="iconoo-"][class*="Square"] { 721 | -webkit-box-shadow: 0 0 0 2px; 722 | box-shadow: 0 0 0 2px; 723 | border-radius: 4px; 724 | width: 1.5em; 725 | height: 1.5em; 726 | margin: 0; } 727 | [class*="iconoo-"], [class*="iconoo-"] * { 728 | -webkit-box-sizing: border-box; 729 | box-sizing: border-box; } 730 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | dependencies: 2 | pre: 3 | - npm config set "//registry.npmjs.org/:_authToken" $NPM_TOKEN 4 | - nvm install 4; 5 | 6 | test: 7 | override: 8 | - nvm use 4 && npm run build 9 | 10 | deployment: 11 | npm: 12 | tag: /v[0-9]+(\.[0-9]+)*/ 13 | commands: 14 | - npm publish 15 | -------------------------------------------------------------------------------- /dist/iconoo.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.iconoo-pin,.iconoo-stroke{border:2px solid}.iconoo-home:before,.plus{-webkit-box-sizing:border-box}.plus:before,[class*=iconoo-]:after,[class*=iconoo-]:before,plus:after{content:'';pointer-events:none}.iconoo-downArrow:before,.iconoo-leftArrow:before,.iconoo-list:before,.iconoo-rightArrow:before,.iconoo-textIndent:before,.iconoo-textOutdent:before,.iconoo-upArrow:before,.iconoo-volumeDecrease:after,.iconoo-volumeDecrease:before,.iconoo-volumeHigh:after,.iconoo-volumeHigh:before,.iconoo-volumeIncrease:after,.iconoo-volumeIncrease:before,.iconoo-volumeLow:before,.iconoo-volumeMedium:before,.iconoo-volumeMute:after,.iconoo-volumeMute:before,.stickCenterV{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.iconoo-search:before,.stickCenterH,[class*=iconoo-textAlign].iconoo-textAlignCenter:after,[class*=iconoo-textAlign].iconoo-textAlignCenter:before{position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.iconoo-pin:before,.stickCenter,[class*=iconoo-plus]:after,[class*=iconoo-plus]:before,[class*=iconoo-cross]:after,[class*=iconoo-cross]:before{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.spin[class*=spin]{-webkit-animation:loading-spinner 2s infinite linear;animation:loading-spinner 2s infinite linear}@-webkit-keyframes loading-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-spinner{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}[class*=iconoo-textAlign]{width:1.3em;height:1.1em;margin:.2em .1em}[class*=iconoo-textAlign]:after,[class*=iconoo-textAlign]:before{position:absolute;height:2px;-webkit-box-shadow:inset 0 0 0 1em,0 .4em 0 0,0 .8em 0 0;box-shadow:inset 0 0 0 1em,0 .4em 0 0,0 .8em 0 0;right:0}[class*=iconoo-textAlign]:before{width:1.3em;top:0}[class*=iconoo-textAlign]:after{width:.9em;top:.2em}[class*=iconoo-textAlign].iconoo-textAlignLeft:after,[class*=iconoo-textAlign].iconoo-textAlignLeft:before{left:0}.iconoo-textIndent,.iconoo-textOutdent{width:1em;height:.8em;border-width:.2em 0 .2em .4em;border-style:solid;border-color:transparent;-webkit-box-shadow:0 -2px,0 2px,inset 0 2px,inset 0 -2px;box-shadow:0 -2px,0 2px,inset 0 2px,inset 0 -2px;margin:.35em .25em}.iconoo-textIndent:before,.iconoo-textOutdent:before{left:-.4em;border:.25em solid;border-top-color:transparent;border-bottom-color:transparent;border-right-width:0}.iconoo-locationArrow:after,.iconoo-locationArrow:before{border-style:solid;border-left-color:transparent;position:absolute}.iconoo-textOutdent:before{border-left-width:0;border-right-width:.25em}.iconoo-locationArrow{width:1.5em;height:1.5em}.iconoo-locationArrow:before{left:.35em;top:.8em;border-width:.3em 0 .3em .3em;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.iconoo-locationArrow:after{top:.5em;left:.1em;border-width:.5em;border-bottom-color:transparent;-webkit-transform:skew(-30deg,-30deg);-ms-transform:skew(-30deg,-30deg);transform:skew(-30deg,-30deg)}.iconoo-pin{width:1.1em;height:1.1em;border-radius:50% 50% 50% 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.iconoo-pin:before{position:absolute;width:.3em;height:.3em;border:2px solid;border-radius:50%}.iconoo-home{width:1.1em;height:.8em;border:2px solid;border-top:none;margin:.65em .2em .05em}.iconoo-home:before{width:1em;height:1em;-webkit-transform:translate(-50%,-.35em) rotate(45deg);-ms-transform:translate(-50%,-.35em) rotate(45deg);transform:translate(-50%,-.35em) rotate(45deg);position:absolute;left:50%;margin:auto;border:2px solid;border-right-color:transparent;border-bottom-color:transparent;box-sizing:border-box}.iconoo-home:after{width:.3em;height:.5em;bottom:0;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border:1px solid;border-bottom:none}.iconoo-reset,.iconoo-reset:before{border-style:solid;border-left-color:transparent}.iconoo-reset{width:1.5em;height:1.5em;border-radius:50%;border-width:2px}.iconoo-reset:before{position:absolute;width:0;height:0;border-width:.3em;border-right-color:transparent;border-bottom-color:transparent;bottom:0;right:50%;-webkit-transform:translateX(-50%) rotate(135deg);-ms-transform:translateX(-50%) rotate(135deg);transform:translateX(-50%) rotate(135deg)}.iconoo-sync{width:1.5em;height:1.5em;border-radius:50%;border:2px solid;border-right-color:transparent;border-left-color:transparent}.iconoo-sync:after,.iconoo-sync:before{position:absolute;width:0;height:0;border-width:.3em;border-style:solid;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.iconoo-sync:before{-webkit-transform:translateX(50%) rotate(-45deg);-ms-transform:translateX(50%) rotate(-45deg);transform:translateX(50%) rotate(-45deg);left:50%;top:0}.iconoo-sync:after{-webkit-transform:translateX(-50%) rotate(135deg);-ms-transform:translateX(-50%) rotate(135deg);transform:translateX(-50%) rotate(135deg);right:50%;bottom:0}.iconoo-share{height:.45em;width:.45em;border-radius:50%;-webkit-box-shadow:inset 0 0 0 1em,1.1em -.5em 0 0,1.1em .5em 0 0;box-shadow:inset 0 0 0 1em,1.1em -.5em 0 0,1.1em .5em 0 0;margin:.55em 1.15em .55em -.05em}.iconoo-share:after,.iconoo-share:before{position:absolute;width:1.2em;height:.1em;-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em;left:0}.iconoo-share:before{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:translate(.35em,.1em) rotate(-25deg);-ms-transform:translate(.35em,.1em) rotate(-25deg);transform:translate(.35em,.1em) rotate(-25deg)}.iconoo-share:after{-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:translate(.25em,.2em) rotate(25deg);-ms-transform:translate(.25em,.2em) rotate(25deg);transform:translate(.25em,.2em) rotate(25deg)}.iconoo-bars,.iconoo-hamburger{width:1em;height:.1em;-webkit-box-shadow:inset 0 0 0 1em,0 -.3em,0 .3em;box-shadow:inset 0 0 0 1em,0 -.3em,0 .3em;margin:.7em .25em}.iconoo-ellipsis,.iconoo-tiles{margin:.65em;width:.2em;height:.2em}.iconoo-ellipsis{-webkit-box-shadow:0 -.4em 0,0 0 0 1em inset,0 .4em 0;box-shadow:0 -.4em 0,0 0 0 1em inset,0 .4em 0}.iconoo-tiles{-webkit-box-shadow:0 -.4em 0,-.4em -.4em 0,.4em -.4em 0,0 0 0 1em inset,-.4em 0 0,.4em 0 0,0 .4em 0,-.4em .4em 0,.4em .4em 0;box-shadow:0 -.4em 0,-.4em -.4em 0,.4em -.4em 0,0 0 0 1em inset,-.4em 0 0,.4em 0 0,0 .4em 0,-.4em .4em 0,.4em .4em 0}.iconoo-list{width:.2em;height:.2em;-webkit-box-shadow:inset 0 0 0 1em,0 -.4em 0 0,0 .4em 0 0;box-shadow:inset 0 0 0 1em,0 -.4em 0 0,0 .4em 0 0;margin:.65em 1.2em .65em .1em}.iconoo-list:before{width:.9em;height:.2em;left:.4em;-webkit-box-shadow:inset 0 0 0 1em,0 -.4em 0 0,0 .4em 0 0;box-shadow:inset 0 0 0 1em,0 -.4em 0 0,0 .4em 0 0}.iconoo-search{width:1em;height:1em;border-radius:50%;border:.1em solid;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);margin:.15em .15em .35em .35em}.iconoo-search:before{width:.2em;height:.65em;-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em;top:.85em;border-radius:0 0 .05em .05em}.iconoo-volume,.iconoo-volumeDecrease,.iconoo-volumeHigh,.iconoo-volumeIncrease,.iconoo-volumeLow,.iconoo-volumeMedium,.iconoo-volumeMute{width:0;height:0;border:.35em solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent;padding:.3em .2em;-webkit-box-shadow:inset .2em 0;box-shadow:inset .2em 0;margin:.1em .375em}.iconoo-volumeHigh,.iconoo-volumeLow,.iconoo-volumeMedium{margin:.1em .5em .1em .25em}.iconoo-volumeHigh:after,.iconoo-volumeHigh:before,.iconoo-volumeLow:before,.iconoo-volumeMedium:before{width:.75em;height:.75em;position:absolute;border:.1em solid;border-radius:50%;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent;left:.1em}.iconoo-volumeHigh,.iconoo-volumeMedium{margin:.1em .6em .1em .15em}.iconoo-volumeDecrease,.iconoo-volumeHigh,.iconoo-volumeIncrease,.iconoo-volumeMute{margin:.1em .7em .1em .05em}.iconoo-volumeHigh:before,.iconoo-volumeMedium:before{border-style:double;border-width:.3em;left:-.1em}.iconoo-volumeHigh:after{width:1.6em;height:1.6em;left:-.35em}.iconoo-volumeDecrease:after,.iconoo-volumeDecrease:before,.iconoo-volumeIncrease:after,.iconoo-volumeIncrease:before,.iconoo-volumeMute:after,.iconoo-volumeMute:before{-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em}.iconoo-volumeDecrease:before,.iconoo-volumeIncrease:before,.iconoo-volumeMute:before{width:.5em;height:.1em;left:.85em}.iconoo-volumeIncrease:after,.iconoo-volumeMute:after{height:.5em;width:.1em;left:1.05em}.iconoo-volumeMute:after,.iconoo-volumeMute:before{-webkit-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg)}[class*=iconoo-plus],[class*=iconoo-cross]{width:1.5em;height:1.5em}[class*=iconoo-plus]:after,[class*=iconoo-plus]:before,[class*=iconoo-cross]:after,[class*=iconoo-cross]:before{-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em}[class*=iconoo-plus]:before,[class*=iconoo-cross]:before{width:1em;height:2px}[class*=iconoo-plus]:after,[class*=iconoo-cross]:after{height:1em;width:2px}[class*=iconoo-plus][class*=Circle]:before,[class*=iconoo-cross][class*=Circle]:before{width:.9em}[class*=iconoo-plus][class*=Circle]:after,[class*=iconoo-cross][class*=Circle]:after{height:.9em}.iconoo-cross,.iconoo-crossCircle{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}[class*=iconoo-check]{width:1.5em;height:1.5em;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}[class*=iconoo-check]:after,[class*=iconoo-check]:before{-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em}[class*=iconoo-check]:before{width:1em;height:2px;position:absolute;left:.9em;top:.9em;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}[class*=iconoo-check]:after{height:.6em;width:2px;position:absolute;left:.4em;bottom:.6em}[class*=iconoo-check][class*=Circle]:before{width:.78em;top:.9em;left:.85em}[class*=iconoo-check][class*=Circle]:after{height:.4em;left:.46em;bottom:.6em}.iconoo-play{width:0;height:0;margin:.25em .35em;border-width:.5em 0 .5em .8em;border-style:solid;border-top-color:transparent;border-bottom-color:transparent}.iconoo-pause{width:.3em;height:1em;margin:.25em .9em .25em .3em;-webkit-box-shadow:inset 0 0 0 1em,.6em 0 0 0;box-shadow:inset 0 0 0 1em,.6em 0 0 0}.iconoo-stop{width:0;height:0;border:.5em solid;margin:.25em}.iconoo-forward,.iconoo-rewind{width:0;height:0;margin:.25em;border:.5em solid transparent;border-left:.5em solid}.iconoo-forward:before,.iconoo-rewind:before{position:absolute;left:0;top:-.5em;width:0;height:0;border:.5em solid transparent;border-left:.5em solid}.iconoo-rewind{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.iconoo-next,.iconoo-previous{width:0;height:0;margin:.25em .15em .25em .35em;border:.5em solid transparent;border-left:.5em solid}.iconoo-next:before,.iconoo-previous:before{position:absolute;left:0;top:-.5em;width:0;height:0;border-width:.5em .15em;border-style:solid}.iconoo-previous{-webkit-transform:translateX(-.25em) rotate(180deg);-ms-transform:translateX(-.25em) rotate(180deg);transform:translateX(-.25em) rotate(180deg)}.iconoo-frown,.iconoo-meh,.iconoo-smile{border-radius:50%;border:2px solid;height:1.5em;width:1.5em}.iconoo-frown:before,.iconoo-meh:before,.iconoo-smile:before{border-radius:50%;-webkit-box-shadow:.5em 0 0 0,0 0 0 1em inset;box-shadow:.5em 0 0 0,0 0 0 1em inset;height:.2em;width:.2em;position:absolute;left:0;right:0;margin:0 auto;-webkit-transform:translate(-.25em,.35em);-ms-transform:translate(-.25em,.35em);transform:translate(-.25em,.35em)}.iconoo-frown:after,.iconoo-meh:after,.iconoo-smile:after{border-radius:50%;border:2px solid;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;height:.8em;width:.8em;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.iconoo-frown:after{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform-origin:center 85%;-ms-transform-origin:center 85%;transform-origin:center 85%}.iconoo-meh:after{top:-.2em;width:.6em;border-left-width:0;border-right-width:0;border-radius:0}.iconoo-caretDown,.iconoo-caretDownCircle,.iconoo-caretDownSquare,.iconoo-caretLeft,.iconoo-caretLeftCircle,.iconoo-caretLeftSquare,.iconoo-caretRight,.iconoo-caretRightCircle,.iconoo-caretRightSquare,.iconoo-caretUp,.iconoo-caretUpCircle,.iconoo-caretUpSquare{width:.5em;height:1em;margin:.25em .5em}.iconoo-caretDown:after,.iconoo-caretDown:before,.iconoo-caretDownCircle:after,.iconoo-caretDownCircle:before,.iconoo-caretDownSquare:after,.iconoo-caretDownSquare:before,.iconoo-caretLeft:after,.iconoo-caretLeft:before,.iconoo-caretLeftCircle:after,.iconoo-caretLeftCircle:before,.iconoo-caretLeftSquare:after,.iconoo-caretLeftSquare:before,.iconoo-caretRight:after,.iconoo-caretRight:before,.iconoo-caretRightCircle:after,.iconoo-caretRightCircle:before,.iconoo-caretRightSquare:after,.iconoo-caretRightSquare:before,.iconoo-caretUp:after,.iconoo-caretUp:before,.iconoo-caretUpCircle:after,.iconoo-caretUpCircle:before,.iconoo-caretUpSquare:after,.iconoo-caretUpSquare:before{width:.707em;height:2px;position:absolute;top:0;bottom:0;margin:auto 0;right:0;-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right}.iconoo-caretDown:before,.iconoo-caretDownCircle:before,.iconoo-caretDownSquare:before,.iconoo-caretLeft:before,.iconoo-caretLeftCircle:before,.iconoo-caretLeftSquare:before,.iconoo-caretRight:before,.iconoo-caretRightCircle:before,.iconoo-caretRightSquare:before,.iconoo-caretUp:before,.iconoo-caretUpCircle:before,.iconoo-caretUpSquare:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.iconoo-caretDown:after,.iconoo-caretDownCircle:after,.iconoo-caretDownSquare:after,.iconoo-caretLeft:after,.iconoo-caretLeftCircle:after,.iconoo-caretLeftSquare:after,.iconoo-caretRight:after,.iconoo-caretRightCircle:after,.iconoo-caretRightSquare:after,.iconoo-caretUp:after,.iconoo-caretUpCircle:after,.iconoo-caretUpSquare:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.iconoo-caretLeft,.iconoo-caretLeftCircle,.iconoo-caretLeftSquare{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.iconoo-caretUp,.iconoo-caretUpCircle,.iconoo-caretUpSquare{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.iconoo-caretDown,.iconoo-caretDownCircle,.iconoo-caretDownSquare{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}[class*=iconoo-caret][class*=Circle]:after,[class*=iconoo-caret][class*=Circle]:before,[class*=iconoo-caret][class*=Square]:after,[class*=iconoo-caret][class*=Square]:before{width:.55em;right:.5em}.plus{box-sizing:border-box;display:inline-block;position:relative;font-size:20px}.plus:before,plus:after{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em}.plus:before{width:1em;height:2px}.plus:after{height:1em;width:2px}.iconoo-downArrow,.iconoo-leftArrow,.iconoo-rightArrow,.iconoo-upArrow{width:.8em;height:.2em;-webkit-box-shadow:inset 0 0 0 1em;box-shadow:inset 0 0 0 1em;margin:.65em .55em .65em .15em}.iconoo-downArrow:before,.iconoo-leftArrow:before,.iconoo-rightArrow:before,.iconoo-upArrow:before{border-style:solid;border-width:.4em 0 .4em .4em;border-color:transparent;border-left-color:inherit;left:100%;right:auto}.iconoo-leftArrow{-webkit-transform:translateX(.4em) rotate(180deg);-ms-transform:translateX(.4em) rotate(180deg);transform:translateX(.4em) rotate(180deg)}.iconoo-upArrow{-webkit-transform:translate(.2em,.2em) rotate(-90deg);-ms-transform:translate(.2em,.2em) rotate(-90deg);transform:translate(.2em,.2em) rotate(-90deg)}.iconoo-downArrow{-webkit-transform:translate(.2em,-.2em) rotate(90deg);-ms-transform:translate(.2em,-.2em) rotate(90deg);transform:translate(.2em,-.2em) rotate(90deg)}[class*=iconoo-]{display:inline-block;position:relative;vertical-align:middle;color:#ddd;font-size:20px;font-style:normal;text-align:left;text-indent:-9999px;direction:ltr}[class*=iconoo-][class*=Circle]{-webkit-box-shadow:0 0 0 2px;box-shadow:0 0 0 2px;border-radius:50%;width:1.5em;height:1.5em;margin:0}[class*=iconoo-][class*=Square]{-webkit-box-shadow:0 0 0 2px;box-shadow:0 0 0 2px;border-radius:4px;width:1.5em;height:1.5em;margin:0}[class*=iconoo-],[class*=iconoo-] *{-webkit-box-sizing:border-box;box-sizing:border-box} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | watch = require('gulp-watch'), 4 | minCSS = require("gulp-clean-css"), 5 | rename = require('gulp-rename'), 6 | plumber = require('gulp-plumber'), 7 | browserSync = require('browser-sync'), 8 | notify = require('gulp-notify'), 9 | autoprefixer = require('gulp-autoprefixer'); 10 | 11 | // 编译sass文件 12 | gulp.task('scss', function () { 13 | return gulp.src('./sass/iconoo.scss') 14 | .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) 15 | .pipe(sass()) 16 | .pipe(autoprefixer('last 10 version')) 17 | .pipe(gulp.dest('./build')) 18 | .pipe(notify({message: 'sass编译完成'})); 19 | }); 20 | 21 | // .css -> .min.css 22 | gulp.task('cssmin', function () { 23 | gulp.src('./build/*.css') 24 | .pipe(minCSS()) 25 | .pipe(rename({suffix: '.min'})) 26 | .pipe(gulp.dest('./dist')) 27 | .pipe(notify({message: 'css压缩完成'})); 28 | }); 29 | 30 | // live realod the browser 31 | gulp.task('browser-sync', function () { 32 | browserSync({ 33 | server: { 34 | baseDir : './', 35 | index : 'index.html', 36 | reloadDelay: 2000 37 | }, 38 | port : 8090, 39 | }); 40 | }); 41 | 42 | gulp.task('default', ['browser-sync'], function () { 43 | gulp.watch(['./sass/**/*.scss'], ['scss', browserSync.reload]); 44 | }); 45 | 46 | gulp.task('release', ['cssmin']); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Iconoo Test icons 6 | 7 | 55 | 56 | 57 |
58 | 59 | Fork me on GitHub 63 | 64 |

You can set fontsize to adjust icon's size. Of course you can also scale icons by setting zoom or transform-scale. Download

65 |
66 | 117 |
118 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by qieguo on 2016/10/25. 3 | */ 4 | 'use strict'; 5 | 6 | require('./dist/iconoo.min.css'); -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 qieguo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iconoo", 3 | "version": "1.0.9", 4 | "description": "A Flexible Pure CSS Icons Pack. One Tag One Icon.", 5 | "main": "index", 6 | "scripts": { 7 | "build": "gulp release" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/qieguo2016/iconoo.git" 12 | }, 13 | "author": { 14 | "name": "qieguo", 15 | "email": "qieguo.chow@gmail.com", 16 | "url": "https://github.com/qieguo2016" 17 | }, 18 | "keywords": [ 19 | "css", 20 | "icons", 21 | "ui", 22 | "iconoo", 23 | "flexible", 24 | "pure CSS" 25 | ], 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/qieguo2016/iconoo/issues" 29 | }, 30 | "homepage": "http://qieguo2016.github.io/iconoo/", 31 | "devDependencies": { 32 | "browser-sync": "*", 33 | "gulp": "^3.9.1", 34 | "gulp-autoprefixer": "^3.1.1", 35 | "gulp-clean-css": "^2.0.12", 36 | "gulp-notify": "^2.2.0", 37 | "gulp-plumber": "^0.6.6", 38 | "gulp-rename": "^1.2.0", 39 | "gulp-sass": "^2.3.2", 40 | "gulp-watch": "^3.0.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /sass/functions.scss: -------------------------------------------------------------------------------- 1 | // Math functions given from https://github.com/terkel/mathsass 2 | 3 | // Note: now there is no need to used this. 4 | 5 | /** 6 | * Returns base to the exponent power. 7 | * @param {Number} $base The base number 8 | * @param {Number} $exp The exponent to which to raise base 9 | * @return {Number} 10 | * @example 11 | * pow(4, 2) // 16 12 | * pow(4, -2) // 0.0625 13 | * pow(4, 0.2) // 1.31951 14 | */ 15 | @function pow ($base, $exp) { 16 | @if $exp == floor($exp) { 17 | $r: 1; 18 | $s: 0; 19 | @if $exp < 0 { 20 | $exp: $exp * -1; 21 | $s: 1; 22 | } 23 | @while $exp > 0 { 24 | @if $exp % 2 == 1 { 25 | $r: $r * $base; 26 | } 27 | $exp: floor($exp * 0.5); 28 | $base: $base * $base; 29 | } 30 | @return if($s != 0, 1 / $r, $r); 31 | } @else { 32 | @return exp(log($base) * $exp); 33 | } 34 | } 35 | 36 | /** 37 | * Returns the square root of a number. 38 | * @param {Number} $x 39 | * @example 40 | * sqrt(2) // 1.41421 41 | * sqrt(5) // 2.23607 42 | */ 43 | @function sqrt ($x) { 44 | @if $x < 0 { 45 | @warn "Argument for `sqrt()` must be a positive number."; 46 | @return null; 47 | } 48 | $ret: 1; 49 | @for $i from 1 through 24 { 50 | $ret: $ret - (pow($ret, 2) - $x) / (2 * $ret); 51 | } 52 | @return $ret; 53 | } -------------------------------------------------------------------------------- /sass/generals.scss: -------------------------------------------------------------------------------- 1 | .iconoo-stroke { 2 | border: $U2 solid; 3 | } 4 | 5 | .stickCenterV { 6 | @include stickCenterV; 7 | } 8 | 9 | .stickCenterH { 10 | @include stickCenterH; 11 | } 12 | 13 | .stickCenter { 14 | @include stickCenter; 15 | } 16 | 17 | .spin[class*="spin"] { 18 | animation: loading-spinner 2s infinite linear; 19 | } 20 | 21 | @keyframes loading-spinner { 22 | 0% { 23 | transform: rotate(0deg); 24 | } 25 | 100% { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /sass/iconoo.scss: -------------------------------------------------------------------------------- 1 | // Welcome to iconoo 2 | // You can use this file in your project instead of .css file, and build it with other your less files. 3 | @import "variables"; 4 | @import "mixins"; 5 | //@import "functions"; 6 | @import "generals"; 7 | @import "icons"; 8 | 9 | // $strokeSize，笔触大小，这里用来指定边框线宽 10 | 11 | [class*="iconoo-"] { 12 | display: inline-block; 13 | position: relative; 14 | vertical-align: middle; 15 | color: $maincolor; 16 | font-size: 20px; //主控参数 17 | font-style: normal; 18 | text-align: left; 19 | text-indent: -9999px; 20 | direction: ltr; 21 | &:before, &:after { 22 | content: ''; 23 | pointer-events: none; 24 | //display: block; 25 | } 26 | &[class*="Circle"] { 27 | box-shadow: 0 0 0 $strokeSize; //采用box-shadow来画边框 28 | border-radius: 50%; 29 | width: 1.5em; 30 | height: 1.5em; 31 | margin: 0; 32 | } 33 | &[class*="Square"] { 34 | box-shadow: 0 0 0 $strokeSize; //采用box-shadow来画边框 35 | border-radius: $U4; 36 | width: 1.5em; 37 | height: 1.5em; 38 | margin: 0; 39 | } 40 | &, & * { 41 | box-sizing: border-box; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /sass/icons.scss: -------------------------------------------------------------------------------- 1 | @import "icons/textAlign"; 2 | 3 | @import "icons/location"; 4 | 5 | @import "icons/home"; 6 | 7 | @import "icons/refresh"; 8 | 9 | @import "icons/share"; 10 | 11 | @import "icons/menu"; 12 | 13 | @import "icons/search"; 14 | 15 | @import "icons/volume"; // 7 iconos 16 | 17 | @import "icons/cross"; 18 | 19 | @import "icons/check"; 20 | 21 | @import "icons/audioCtrl"; // 7 iconos 22 | 23 | @import "icons/emoji"; // 3 iconos 24 | 25 | @import "icons/caret"; // 4 iconos 26 | 27 | @import "icons/arrow"; // 4 iconos 28 | 29 | // ========================================== // 30 | 31 | // 以下部分为icono的图标，未改造 32 | 33 | //@import "temp/logos"; 34 | // 35 | //@import "temp/mail"; 36 | // 37 | //@import "temp/rss"; 38 | // 39 | //@import "temp/power"; 40 | // 41 | //@import "temp/heart"; 42 | // 43 | //@import "temp/infinity"; 44 | // 45 | //@import "temp/flag"; 46 | // 47 | //@import "temp/file"; 48 | // 49 | //@import "temp/document"; 50 | // 51 | //@import "temp/folder"; 52 | // 53 | //@import "temp/eye"; 54 | // 55 | //@import "temp/sliders"; 56 | // 57 | //@import "temp/gear"; 58 | // 59 | //@import "temp/signIn"; 60 | // 61 | //@import "temp/signOut"; 62 | // 63 | //@import "temp/support"; 64 | // 65 | //@import "temp/dropper"; 66 | // 67 | //@import "temp/chain"; 68 | // 69 | //@import "temp/rename"; 70 | // 71 | //@import "temp/book"; 72 | // 73 | //@import "temp/forbidden"; 74 | // 75 | //@import "temp/trash"; 76 | // 77 | //@import "temp/keyboard"; 78 | // 79 | //@import "temp/mouse"; 80 | // 81 | //@import "temp/user"; 82 | // 83 | //@import "temp/crop"; 84 | // 85 | //@import "temp/display"; 86 | // 87 | //@import "temp/devices"; 88 | // 89 | //@import "temp/image"; 90 | // 91 | //@import "temp/headphone"; 92 | // 93 | //@import "temp/music"; 94 | // 95 | //@import "temp/video"; 96 | // 97 | //@import "temp/microphone"; 98 | // 99 | //@import "temp/asterisk"; 100 | // 101 | //@import "temp/terminal"; 102 | // 103 | //@import "temp/paperClip"; 104 | // 105 | //@import "temp/market"; 106 | // 107 | //@import "temp/clock"; 108 | // 109 | //@import "temp/exclamation"; 110 | // 111 | //@import "temp/comment"; // 2 iconos 112 | // 113 | //@import "temp/chart"; // 3 iconos 114 | // 115 | //@import "temp/bookmark"; // 2 iconos 116 | // 117 | //@import "temp/filter"; 118 | // 119 | //@import "temp/tag"; 120 | // 121 | //@import "temp/calendar"; 122 | // 123 | //@import "temp/camera"; 124 | // 125 | //@import "temp/piano"; 126 | // 127 | //@import "temp/ruler"; 128 | // 129 | //@import "temp/socials"; 130 | // 131 | //@import "temp/creditCard"; 132 | // 133 | //@import "temp/cup"; 134 | // 135 | //@import "temp/sun"; 136 | // 137 | //@import "temp/moon"; 138 | // 139 | //@import "temp/cart"; 140 | // 141 | //@import "temp/sitemap"; 142 | // 143 | //@import "temp/circle"; 144 | // 145 | //@import "temp/spinner"; 146 | // 147 | //@import "temp/bluetooth"; -------------------------------------------------------------------------------- /sass/icons/arrow.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Arrow 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | .plus { 8 | box-sizing: border-box; 9 | display: inline-block; 10 | position: relative; 11 | font-size: 20px; 12 | } 13 | 14 | .plus:before, plus:after { 15 | content: ''; 16 | pointer-events: none; 17 | position: absolute; 18 | left: 50%; 19 | top: 50%; 20 | transform: translate(-50%, -50%); 21 | box-shadow: inset 0 0 0 1em; 22 | } 23 | 24 | .plus:before { 25 | width: 1em; 26 | height: 2px; 27 | } 28 | 29 | .plus:after { 30 | height: 1em; 31 | width: 2px; 32 | } 33 | 34 | .iconoo-rightArrow { 35 | width: 0.8em; 36 | height: 0.2em; 37 | box-shadow: inset 0 0 0 1em; 38 | margin: 0.65em 0.55em 0.65em 0.15em; 39 | &:before { 40 | @extend .stickCenterV; 41 | border-style: solid; 42 | border-width: 0.4em 0 0.4em 0.4em; 43 | border-color: transparent; 44 | border-left-color: inherit; 45 | left: 100%; 46 | right: auto; 47 | } 48 | } 49 | 50 | .iconoo-leftArrow { 51 | @extend .iconoo-rightArrow; 52 | transform: translateX(0.4em) rotate(180deg); 53 | } 54 | 55 | .iconoo-upArrow { 56 | @extend .iconoo-rightArrow; 57 | transform: translate(0.2em, 0.2em) rotate(-90deg); 58 | } 59 | 60 | .iconoo-downArrow { 61 | @extend .iconoo-rightArrow; 62 | transform: translate(0.2em, -0.2em) rotate(90deg); 63 | } -------------------------------------------------------------------------------- /sass/icons/audioCtrl.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 音频视频控制按钮：Play, Pause,Stop,Next,... 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .iconoo-play { 9 | width: 0; 10 | height: 0; 11 | margin: 0.25em 0.35em; 12 | border-width: 0.5em 0 0.5em 0.8em; 13 | border-style: solid; 14 | border-top-color: transparent; 15 | border-bottom-color: transparent; 16 | } 17 | 18 | .iconoo-pause { 19 | width: 0.3em; 20 | height: 1em; 21 | margin: 0.25em 0.9em 0.25em 0.3em; 22 | box-shadow: inset 0 0 0 1em, 0.6em 0 0 0; 23 | } 24 | 25 | .iconoo-stop { 26 | width: 0; 27 | height: 0; 28 | border: solid 0.5em; 29 | margin: 0.25em; 30 | } 31 | 32 | .iconoo-forward { 33 | width: 0; 34 | height: 0; 35 | margin: 0.25em; 36 | border: 0.5em solid transparent; 37 | border-left: 0.5em solid; 38 | &:before { 39 | position: absolute; 40 | left: 0; 41 | top: -0.5em; 42 | width: 0; 43 | height: 0; 44 | border: 0.5em solid transparent; 45 | border-left: 0.5em solid; 46 | } 47 | } 48 | 49 | .iconoo-rewind { 50 | @extend .iconoo-forward; 51 | transform: rotate(180deg); 52 | } 53 | 54 | .iconoo-next { 55 | width: 0; 56 | height: 0; 57 | margin: 0.25em 0.15em 0.25em 0.35em; 58 | border: 0.5em solid transparent; 59 | border-left: 0.5em solid; 60 | &:before { 61 | position: absolute; 62 | left: 0; 63 | top: -0.5em; 64 | width: 0; 65 | height: 0; 66 | border-width: 0.5em 0.15em; 67 | border-style: solid; 68 | } 69 | } 70 | 71 | .iconoo-previous { 72 | @extend .iconoo-next; 73 | transform: translateX(-0.25em) rotate(180deg); 74 | } -------------------------------------------------------------------------------- /sass/icons/caret.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Carets 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，也就是图标的线宽 6 | */ 7 | 8 | .iconoo-caretRight { 9 | width: 0.5em; 10 | height: 1em; 11 | margin: 0.25em 0.5em; 12 | &:before, &:after { 13 | width: 0.707em; //width effects icon size, base on icon's font-size 14 | height: $strokeSize; //height effects line width 15 | position: absolute; 16 | top: 0; 17 | bottom: 0; 18 | margin: auto 0; 19 | right: 0; 20 | box-shadow: inset 0 0 0 1em; 21 | transform-origin: right; 22 | } 23 | &:before { 24 | transform: rotate(45deg); 25 | } 26 | &:after { 27 | transform: rotate(-45deg); 28 | } 29 | } 30 | 31 | .iconoo-caretRightCircle, .iconoo-caretRightSquare { 32 | @extend .iconoo-caretRight; 33 | } 34 | 35 | .iconoo-caretLeft { 36 | @extend .iconoo-caretRight; 37 | transform: rotate(180deg); 38 | } 39 | 40 | .iconoo-caretLeftCircle, .iconoo-caretLeftSquare { 41 | @extend .iconoo-caretLeft; 42 | } 43 | 44 | .iconoo-caretUp { 45 | @extend .iconoo-caretRight; 46 | transform: rotate(-90deg); 47 | } 48 | 49 | .iconoo-caretUpCircle, .iconoo-caretUpSquare { 50 | @extend .iconoo-caretUp; 51 | } 52 | 53 | .iconoo-caretDown { 54 | @extend .iconoo-caretRight; 55 | transform: rotate(90deg); 56 | } 57 | 58 | .iconoo-caretDownCircle, .iconoo-caretDownSquare { 59 | @extend .iconoo-caretDown; 60 | } 61 | 62 | [class*="iconoo-caret"] { 63 | &[class*="Circle"], &[class*="Square"] { 64 | &:before, &:after { 65 | width: 0.55em; //width effects icon size, base on icon's font-size 66 | right: 0.5em; //居中 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /sass/icons/check.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Check 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，也就是图标的线宽 6 | */ 7 | 8 | [class*="iconoo-check"] { 9 | width: 1.5em; 10 | height: 1.5em; 11 | transform: rotate(-45deg); 12 | &:before, &:after { 13 | box-shadow: inset 0 0 0 1em; 14 | } 15 | &:before { 16 | width: 1em; 17 | height: $strokeSize; 18 | position: absolute; 19 | left: 0.9em; 20 | top: 0.9em; 21 | transform: translate(-50%, -50%); 22 | } 23 | &:after { 24 | height: 0.6em; 25 | width: $strokeSize; 26 | position: absolute; 27 | left: 0.4em; 28 | bottom: 0.6em; 29 | } 30 | &[class*="Circle"] { 31 | &:before { 32 | width: 0.78em; 33 | top: 0.9em; 34 | left: 0.85em; 35 | } 36 | &:after { 37 | height: 0.4em; 38 | left: 0.46em; 39 | bottom: 0.6em; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /sass/icons/cross.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Cross & Plus 3 | * Cross is 45degree rotated plus 4 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 5 | * 主控参数默认值 font-size: $U20; 6 | * $strokeSize，笔触大小，也就是图标的线宽 7 | */ 8 | 9 | [class*="iconoo-plus"], [class*="iconoo-cross"] { 10 | width: 1.5em; 11 | height: 1.5em; 12 | &:before, &:after { 13 | @extend .stickCenter; 14 | box-shadow: inset 0 0 0 1em; 15 | } 16 | &:before { 17 | width: 1em; 18 | height: $strokeSize; 19 | } 20 | &:after { 21 | height: 1em; 22 | width: $strokeSize; 23 | } 24 | &[class*="Circle"] { 25 | &:before { 26 | width: 0.9em; 27 | } 28 | &:after { 29 | height: 0.9em; 30 | } 31 | } 32 | } 33 | 34 | .iconoo-cross, .iconoo-crossCircle{ 35 | transform: rotate(45deg); 36 | } -------------------------------------------------------------------------------- /sass/icons/emoji.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * emoji 表情符 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，这里用来指定边框线宽 6 | */ 7 | 8 | .iconoo-smile { 9 | border-radius: 50%; 10 | border: $strokeSize solid; 11 | height: 1.5em; 12 | width: 1.5em; 13 | &:before { 14 | border-radius: 50%; 15 | box-shadow: 0.5em 0 0 0, 0 0 0 1em inset; 16 | height: 0.2em; 17 | width: 0.2em; 18 | position: absolute; 19 | left: 0; 20 | right: 0; 21 | margin: 0 auto; 22 | transform: translate(-0.25em, 0.35em); 23 | } 24 | &:after { 25 | border-radius: 50%; 26 | border: $strokeSize solid; 27 | border-top-color: transparent; 28 | border-left-color: transparent; 29 | border-right-color: transparent; 30 | height: 0.8em; 31 | width: 0.8em; 32 | position: absolute; 33 | left: 0; 34 | right: 0; 35 | top: 0; 36 | bottom: 0; 37 | margin: auto; 38 | } 39 | } 40 | 41 | .iconoo-frown { 42 | @extend .iconoo-smile; 43 | &:before { 44 | @extend .iconoo-smile:before; 45 | } 46 | &:after { 47 | @extend .iconoo-smile:after; 48 | transform: rotate(180deg); 49 | transform-origin: center 85%; 50 | } 51 | } 52 | 53 | .iconoo-meh { 54 | @extend .iconoo-smile; 55 | &:before { 56 | @extend .iconoo-smile:before; 57 | } 58 | &:after { 59 | @extend .iconoo-smile:after; 60 | top: -0.2em; 61 | width: 0.6em; 62 | border-left-width: 0; 63 | border-right-width: 0; 64 | border-radius: 0; 65 | } 66 | } -------------------------------------------------------------------------------- /sass/icons/home.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * search 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，也就是图标的线宽 6 | */ 7 | 8 | .iconoo-home { 9 | width: 1.1em; 10 | height: 0.8em; 11 | border: $strokeSize solid; 12 | border-top: none; 13 | margin: 0.65em 0.2em 0.05em 0.2em; 14 | &:before { 15 | width: 1em; 16 | height: 1em; 17 | transform: translate(-50%, -0.35em) rotate(45deg); 18 | position: absolute; 19 | left: 50%; 20 | margin: auto; 21 | border: $strokeSize solid; 22 | border-right-color: transparent; 23 | border-bottom-color: transparent; 24 | box-sizing: border-box; 25 | } 26 | &:after { 27 | position: absolute; 28 | width: 0.3em; 29 | height: 0.5em; 30 | bottom: 0; 31 | @include stickCenterH(); 32 | border: $strokeSize/2 solid; 33 | border-bottom: none; 34 | } 35 | } -------------------------------------------------------------------------------- /sass/icons/location.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Pin、 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，也就是图标的线宽 6 | */ 7 | 8 | .iconoo-locationArrow { 9 | width: 1.5em; 10 | height: 1.5em; 11 | &:before { 12 | position: absolute; 13 | left: 0.35em; 14 | top: 0.8em; 15 | border-width: 0.3em 0 0.3em 0.3em; 16 | border-style: solid; 17 | border-left-color: transparent; 18 | transform: rotate(-45deg); 19 | } 20 | &:after { 21 | position: absolute; 22 | top: 0.5em; 23 | left: 0.1em; 24 | border-width: 0.5em; 25 | border-style: solid; 26 | border-bottom-color: transparent; 27 | border-left-color: transparent; 28 | transform: skew(-30deg, -30deg); 29 | } 30 | } 31 | 32 | .iconoo-pin { 33 | width: 1.1em; 34 | height: 1.1em; 35 | border: $strokeSize solid; 36 | border-radius: 50% 50% 50% 0; 37 | transform: rotate(-45deg); 38 | &:before { 39 | position: absolute; 40 | width: 0.3em; 41 | height: 0.3em; 42 | border: $strokeSize solid; 43 | border-radius: 50%; 44 | @extend .stickCenter; 45 | } 46 | } -------------------------------------------------------------------------------- /sass/icons/menu.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * search 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .iconoo-bars { 9 | width: 1em; 10 | height: 0.1em; 11 | box-shadow: inset 0 0 0 1em, 0 -0.3em, 0 0.3em; 12 | margin: 0.7em 0.25em; 13 | } 14 | 15 | .iconoo-hamburger { 16 | @extend .iconoo-bars; //will be deprecate 17 | } 18 | 19 | .iconoo-ellipsis { 20 | width: 0.2em; 21 | height: 0.2em; 22 | box-shadow: 0 -0.4em 0, 0 0 0 1em inset, 0 0.4em 0; 23 | margin: 0.65em; 24 | } 25 | 26 | .iconoo-tiles { 27 | width: 0.2em; 28 | height: 0.2em; 29 | box-shadow: 0 -0.4em 0, -0.4em -0.4em 0, 0.4em -0.4em 0, 30 | 0 0 0 1em inset, -0.4em 0 0, 0.4em 0 0, 31 | 0 0.4em 0, -0.4em 0.4em 0, 0.4em 0.4em 0; 32 | margin: 0.65em; 33 | } 34 | 35 | .iconoo-list { 36 | width: 0.2em; 37 | height: 0.2em; 38 | box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; 39 | margin: 0.65em 1.2em 0.65em 0.1em; 40 | &:before { 41 | @extend .stickCenterV; 42 | width: 0.9em; 43 | height: 0.2em; 44 | left: 0.4em; 45 | box-shadow: inset 0 0 0 1em, 0 -0.4em 0 0, 0 0.4em 0 0; 46 | } 47 | } -------------------------------------------------------------------------------- /sass/icons/refresh.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset、Sync 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，也就是图标的线宽 6 | */ 7 | 8 | .iconoo-reset { 9 | width: 1.5em; 10 | height: 1.5em; 11 | border-radius: 50%; 12 | border-width: $strokeSize; 13 | border-style: solid; 14 | border-left-color: transparent; 15 | &:before { 16 | position: absolute; 17 | width: 0; 18 | height: 0; 19 | border-width: 0.3em; 20 | border-style: solid; 21 | border-right-color: transparent; 22 | border-left-color: transparent; 23 | border-bottom-color: transparent; 24 | bottom: 0; 25 | right: 50%; 26 | transform: translateX(-50%) rotate(135deg); 27 | } 28 | } 29 | 30 | .iconoo-sync { 31 | width: 1.5em; 32 | height: 1.5em; 33 | border-radius: 50%; 34 | border: $strokeSize solid; 35 | border-right-color: transparent; 36 | border-left-color: transparent; 37 | &:before, &:after { 38 | position: absolute; 39 | width: 0; 40 | height: 0; 41 | border-width: 0.3em; 42 | border-style: solid; 43 | border-right-color: transparent; 44 | border-bottom-color: transparent; 45 | border-left-color: transparent; 46 | } 47 | &:before { 48 | transform: translateX(50%) rotate(-45deg); 49 | left: 50%; 50 | top: 0; 51 | } 52 | &:after { 53 | transform: translateX(-50%) rotate(135deg); 54 | right: 50%; 55 | bottom: 0; 56 | } 57 | } -------------------------------------------------------------------------------- /sass/icons/search.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * search 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .iconoo-search { 9 | width: 1em; 10 | height: 1em; 11 | border-radius: 50%; 12 | border: 0.1em solid; 13 | transform: rotate(45deg); 14 | margin: 0.15em 0.15em 0.35em 0.35em; 15 | &:before { 16 | width: 0.2em; 17 | height: 0.65em; 18 | @extend .stickCenterH; 19 | box-shadow: inset 0 0 0 1em; 20 | top: 0.85em; 21 | border-radius: 0 0 0.05em 0.05em; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/icons/share.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Share 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .iconoo-share { 9 | height: 0.45em; 10 | width: 0.45em; 11 | border-radius: 50%; 12 | box-shadow: inset 0 0 0 1em, 1.1em -0.5em 0 0, 1.1em 0.5em 0 0; 13 | margin: 0.55em 1.15em 0.55em -0.05em; 14 | &:before, &:after { 15 | position: absolute; 16 | width: 1.2em; 17 | height: 0.1em; 18 | box-shadow: inset 0 0 0 1em; 19 | left: 0; 20 | } 21 | &:before { 22 | transform-origin: left; 23 | transform: translate(0.35em, 0.1em) rotate(-25deg); 24 | } 25 | &:after { 26 | transform-origin: left; 27 | transform: translate(0.25em, 0.2em) rotate(25deg); 28 | } 29 | } -------------------------------------------------------------------------------- /sass/icons/textAlign.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * emoji 表情符 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * $strokeSize，笔触大小，这里用来指定边框线宽 6 | */ 7 | 8 | [class*="iconoo-textAlign"] { 9 | width: 1.3em; 10 | height: 1.1em; 11 | margin: 0.2em 0.1em; 12 | &:before, &:after { 13 | position: absolute; 14 | height: $strokeSize; 15 | box-shadow: inset 0 0 0 1em, 0 0.4em 0 0, 0 0.8em 0 0; 16 | right: 0; 17 | } 18 | &:before { 19 | width: 1.3em; 20 | top: 0; 21 | } 22 | &:after { 23 | width: 0.9em; 24 | top: 0.2em; 25 | } 26 | &.iconoo-textAlignCenter { 27 | &:before, &:after { 28 | @extend .stickCenterH; 29 | } 30 | } 31 | &.iconoo-textAlignLeft { 32 | &:before, &:after { 33 | left: 0; 34 | } 35 | } 36 | } 37 | 38 | .iconoo-textIndent { 39 | width: 1em; 40 | height: 0.8em; 41 | border-width: 0.2em 0 0.2em 0.4em; 42 | border-style: solid; 43 | border-color: transparent; 44 | box-shadow: 0 -1*$strokeSize, 0 $strokeSize, inset 0 $strokeSize, inset 0 -1*$strokeSize; 45 | margin: 0.35em 0.25em; 46 | &:before { 47 | @extend .stickCenterV; 48 | left: -0.4em; 49 | border: 0.25em solid; 50 | border-top-color: transparent; 51 | border-bottom-color: transparent; 52 | border-right-width: 0; 53 | } 54 | } 55 | 56 | .iconoo-textOutdent { 57 | @extend .iconoo-textIndent; 58 | &:before { 59 | @extend .iconoo-textIndent:before; 60 | border-left-width: 0; 61 | border-right-width: 0.25em; 62 | } 63 | } -------------------------------------------------------------------------------- /sass/icons/volume.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Volume 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .iconoo-volume { 9 | width: 0; 10 | height: 0; 11 | border: 0.35em solid; 12 | border-left: none; 13 | border-top-color: transparent; 14 | border-bottom-color: transparent; 15 | padding: 0.3em 0.2em; 16 | box-shadow: inset 0.2em 0; 17 | margin: 0.1em 0.375em; 18 | } 19 | 20 | .iconoo-volumeLow { 21 | @extend .iconoo-volume; 22 | margin: 0.1em 0.5em 0.1em 0.25em; 23 | &:before { 24 | width: 0.75em; 25 | height: 0.75em; 26 | position: absolute; 27 | border: 0.1em solid; 28 | border-radius: 50%; 29 | border-top-color: transparent; 30 | border-bottom-color: transparent; 31 | border-left-color: transparent; 32 | left: 0.1em; 33 | @extend .stickCenterV; 34 | } 35 | } 36 | 37 | .iconoo-volumeMedium { 38 | @extend .iconoo-volumeLow; 39 | margin: 0.1em 0.6em 0.1em 0.15em; 40 | &:before { 41 | border-style: double; 42 | border-width: 0.3em; 43 | left: -0.1em; 44 | } 45 | } 46 | 47 | .iconoo-volumeHigh { 48 | @extend .iconoo-volumeMedium; 49 | margin: 0.1em 0.7em 0.1em 0.05em; 50 | &:after { 51 | @extend .iconoo-volumeLow:before; 52 | width: 1.6em; 53 | height: 1.6em; 54 | left: -0.35em; 55 | } 56 | } 57 | 58 | .iconoo-volumeDecrease { 59 | @extend .iconoo-volume; 60 | margin: 0.1em 0.7em 0.1em 0.05em; 61 | &:before, &:after { 62 | @extend .stickCenterV; 63 | box-shadow: inset 0 0 0 1em; 64 | } 65 | &:before { 66 | width: 0.5em; 67 | height: 0.1em; 68 | left: 0.85em; 69 | } 70 | } 71 | 72 | .iconoo-volumeIncrease { 73 | @extend .iconoo-volumeDecrease; 74 | &:after { 75 | height: 0.5em; 76 | width: 0.1em; 77 | left: 1.05em; 78 | } 79 | } 80 | 81 | .iconoo-volumeMute { 82 | @extend .iconoo-volumeIncrease; 83 | &:after, &:before { 84 | transform: translateY(-50%) rotate(45deg); 85 | } 86 | } -------------------------------------------------------------------------------- /sass/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin stickCenter($top: 0, $right: 0, $bottom: 0, $left: 0){ 2 | position: absolute; 3 | @if ($top == $bottom){ 4 | @if ($left == $right){ 5 | //stick center method 1 6 | left: 50%; 7 | top: 50%; 8 | transform: translate(-50%, -50%); 9 | }@else{ 10 | //stick center V 11 | top: 50%; 12 | transform: translateY(-50%); 13 | right: $right; 14 | left: $left; 15 | margin: 0 auto; 16 | } 17 | }@else if ($left == $right){ 18 | //stick center H 19 | left: 50%; 20 | transform: translateX(-50%); 21 | top: $top; 22 | bottom: $bottom; 23 | margin: auto 0; 24 | }@else{ 25 | //stick center method 2 26 | top: $top; 27 | right: $right; 28 | bottom: $bottom; 29 | left: $left; 30 | margin: auto; 31 | } 32 | } 33 | @mixin stickCenterH{ 34 | position: absolute; 35 | left: 50%; 36 | transform: translateX(-50%); 37 | } 38 | @mixin stickCenterV{ 39 | position: absolute; 40 | top: 50%; 41 | transform: translateY(-50%); 42 | } 43 | @mixin square($length){ 44 | width: $length; height: $length; 45 | } 46 | @mixin goldenRectL($width){ 47 | width: $width; 48 | height: ceil($width/1.61803398875); 49 | } 50 | @mixin goldenRectP($width){ 51 | width: $width; 52 | height: ceil($width*1.61803398875); 53 | } 54 | @mixin wDiagonal($length){ 55 | width: ceil(sqrt(2 * $length * $length)); 56 | } 57 | @mixin hDiagonal($length){ 58 | height: ceil(sqrt(2 * $length * $length)); 59 | } -------------------------------------------------------------------------------- /sass/temp/asterisk.scss: -------------------------------------------------------------------------------- 1 | //*-- Asterisk --*\\ 2 | .icono-asterisk{ 3 | width: $U4; 4 | height: $U20; 5 | box-shadow: inset 0 0 0 $U32; 6 | border-radius: $U1; 7 | margin: $U7 $U15; 8 | &:before, &:after{ 9 | position: absolute; 10 | @extend .icono-asterisk; 11 | margin: 0; 12 | left: 0; 13 | top: 0; 14 | } 15 | &:before{ 16 | transform: rotate(-58deg); 17 | } 18 | &:after{ 19 | transform: rotate(58deg); 20 | } 21 | } -------------------------------------------------------------------------------- /sass/temp/bluetooth.scss: -------------------------------------------------------------------------------- 1 | //*-- Bluetooth --*\\ 2 | .icono-bluetooth{ 3 | width: $U3; 4 | height: $U26; 5 | box-shadow: inset 0 0 0 $U32; 6 | margin: $U4 $U15 $U4 $U16; 7 | &:before, &:after{ 8 | position: absolute; 9 | width: $U18; 10 | height: $U8; 11 | border-width: $U3 $U3 $U3 0; 12 | border-style: solid; 13 | border-top-color: transparent; 14 | top: $U2; 15 | left: -$U13; 16 | transform: rotate(-45deg); 17 | } 18 | &:after{ 19 | top: $U10; 20 | transform: rotate(45deg) rotateX(180deg); 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /sass/temp/book.scss: -------------------------------------------------------------------------------- 1 | //*-- Book --*\\ 2 | .icono-book{ 3 | width: $U26; 4 | height: $U22; 5 | border-radius: 0 0 0 $U6; 6 | @extend .icono-stroke; 7 | border-top: none; 8 | margin: $U10 $U4 $U2; 9 | &:before{ 10 | position: absolute; 11 | width: $U24; 12 | height: $U7; 13 | box-sizing: border-box; 14 | @extend .icono-stroke; 15 | border-top: none; 16 | border-right: none; 17 | left: -1*$U2; 18 | top: -1*$U5; 19 | border-radius: 0 0 0 $U6; 20 | } 21 | &:after{ 22 | position: absolute; 23 | width: $U24; 24 | height: $U8; 25 | box-sizing: border-box; 26 | left: -1*$U2; 27 | top: -1*$U8; 28 | @extend .icono-stroke; 29 | border-bottom: none; 30 | border-radius: $U6 0 0 0; 31 | } 32 | } -------------------------------------------------------------------------------- /sass/temp/bookmark.scss: -------------------------------------------------------------------------------- 1 | //*-- Bookmark --*\\ 2 | .icono-bookmark{ 3 | width: 0; 4 | height: 0; 5 | border: $U9 solid; 6 | border-bottom-color: transparent; 7 | box-shadow: 0 -1*$U4; 8 | border-radius: $U3 $U3 0 0; 9 | margin: $U10 $U8 $U6; 10 | } 11 | .icono-bookmarkEmpty{ 12 | width: $U18; 13 | height: $U22; 14 | @extend .icono-stroke; 15 | border-bottom: none; 16 | border-radius: $U3 $U3 $U2 $U2; 17 | overflow: hidden; 18 | margin: $U6 $U8; 19 | &:before{ 20 | position: absolute; 21 | width: $U12; 22 | height: $U12; 23 | bottom: 0; 24 | left: 0; 25 | @extend .icono-stroke; 26 | border-right: none; 27 | border-bottom: none; 28 | transform: rotate(45deg) translate(35%, 35%); 29 | } 30 | } -------------------------------------------------------------------------------- /sass/temp/calendar.scss: -------------------------------------------------------------------------------- 1 | //*-- Calendar --*\\ 2 | .icono-calendar{ 3 | width: $U32; 4 | height: $U28; 5 | border-width: $U4 $U2 $U2; 6 | border-style: solid; 7 | border-radius: $U4; 8 | margin: $U5 $U1 $U1; 9 | &:before{ 10 | position: absolute; 11 | width: $U4; 12 | height: $U4; 13 | top: $U3; 14 | left: $U3; 15 | box-shadow: inset 0 0 0 $U32, $U6 0, $U12 0, $U18 0, 16 | 0 $U6, $U6 $U6, $U12 $U6, $U18 $U6, 17 | 0 $U12, $U6 $U12, $U12 $U12, $U18 $U12; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U4; 22 | height: $U8; 23 | box-shadow: inset 0 0 0 $U32, $U16 0; 24 | border-radius: $U4; 25 | top: -1*$U8; 26 | left: $U4; 27 | } 28 | } -------------------------------------------------------------------------------- /sass/temp/camera.scss: -------------------------------------------------------------------------------- 1 | //*-- camera --*\\ 2 | .icono-camera{ 3 | width: $U32; 4 | height: $U24; 5 | border-radius: $U4; 6 | @extend .icono-stroke; 7 | margin: $U5 $U1; 8 | &:before{ 9 | @extend .stickCenter; 10 | width: $U10; 11 | height: $U10; 12 | border: $U1 solid transparent; 13 | box-shadow: inset 0 0 0 $U1, 0 0 0 $U2; 14 | border-radius: 50%; 15 | } 16 | &:after{ 17 | position: absolute; 18 | width: $U4; 19 | height: $U2; 20 | right: $U2; 21 | top: $U2; 22 | box-shadow: inset 0 0 0 $U32; 23 | } 24 | } -------------------------------------------------------------------------------- /sass/temp/cart.scss: -------------------------------------------------------------------------------- 1 | //*-- Cart --*\\ 2 | .icono-cart{ 3 | width: $U22; 4 | height: 0; 5 | border-width: $U14 $U6 0 $U2; 6 | border-style: solid; 7 | border-right-color: transparent; 8 | border-left-color: transparent; 9 | margin: $U9 $U3 $U11 $U9; 10 | &:before{ 11 | position: absolute; 12 | width: $U4; 13 | height: $U4; 14 | border-radius: 50%; 15 | box-shadow: inset 0 0 0 $U32, $U13 0, -1*$U4 -1*$U20 0 $U1; 16 | top: $U2; 17 | left: -$U3; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /sass/temp/chain.scss: -------------------------------------------------------------------------------- 1 | //*-- Chain --*\\ 2 | .icono-chain{ 3 | width: $U16; 4 | height: $U2; 5 | box-shadow: inset 0 0 0 $U32; 6 | transform: rotate(-45deg); 7 | margin: $U16 $U9; 8 | &:before, &:after{ 9 | @include goldenRectL($U12); 10 | @extend .stickCenterV; 11 | @extend .icono-stroke; 12 | border-radius: $U4; 13 | } 14 | &:before{ 15 | right: -1*$U10; 16 | } 17 | &:after{ 18 | left: -1*$U10; 19 | } 20 | } -------------------------------------------------------------------------------- /sass/temp/chart.scss: -------------------------------------------------------------------------------- 1 | //*-- Chart --*\\ 2 | .icono-areaChart{ 3 | width: $U30; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-top-width: 0; 7 | border-right-width: 0; 8 | border-color: transparent; 9 | box-shadow: -1*$U2 $U2; 10 | overflow: hidden; 11 | margin: $U4 0 $U8 $U4; 12 | &:before{ 13 | $bSpace: $U7; 14 | position: absolute; 15 | left: 0; 16 | bottom: $bSpace; 17 | border: $U6 solid transparent; 18 | border-bottom-color: currentColor; 19 | box-shadow: 0 $bSpace; 20 | } 21 | &:after{ 22 | $bSpace: $U4; 23 | position: absolute; 24 | left: $U11; 25 | bottom: $bSpace; 26 | border-width: 0 $U6 $U13; 27 | border-style: solid; 28 | border-color: transparent; 29 | border-bottom-color: currentColor; 30 | box-shadow: 0 $bSpace; 31 | } 32 | } 33 | .icono-barChart{ 34 | width: $U30; 35 | height: $U22; 36 | @extend .icono-stroke; 37 | border-top-width: 0; 38 | border-right-width: 0; 39 | border-color: transparent; 40 | box-shadow: -1*$U2 $U2; 41 | overflow: hidden; 42 | box-shadow: -1*$U2 $U2; 43 | margin: $U4 0 $U8 $U4; 44 | &:before{ 45 | position: absolute; 46 | left: 0; 47 | bottom: 0; 48 | width: $U4; 49 | height: $U15; 50 | box-shadow: inset 0 -1*$U8 0 0, $U6 0, $U12 $U7, $U18 $U5; 51 | } 52 | } 53 | .icono-pieChart{ 54 | width: 0; 55 | height: 0; 56 | border: $U15 solid; 57 | border-right-color: transparent; 58 | border-radius: 50%; 59 | transform: rotate(-45deg); 60 | margin: $U2; 61 | &:before{ 62 | position: absolute; 63 | width: 0; 64 | height: 0; 65 | left: -1*$U11; 66 | top: -1*$U14; 67 | border: $U14 solid; 68 | border-left-color: transparent; 69 | border-bottom-color: transparent; 70 | border-top-color: transparent; 71 | border-radius: 50%; 72 | } 73 | } -------------------------------------------------------------------------------- /sass/temp/circle.scss: -------------------------------------------------------------------------------- 1 | //*-- Circle --*\\ 2 | .icono-circle{ 3 | width: $U22; 4 | height: $U22; 5 | border: $U2 solid; 6 | border-radius: 50%; 7 | margin: $U6; 8 | } 9 | -------------------------------------------------------------------------------- /sass/temp/clock.scss: -------------------------------------------------------------------------------- 1 | //*-- Clock --*\\ 2 | .icono-clock{ 3 | width: $U26; 4 | height: $U26; 5 | border-radius: 50%; 6 | @extend .icono-stroke; 7 | margin: $U4; 8 | &:before, &:after{ 9 | @extend .stickCenter; 10 | top: 35%; 11 | box-shadow: inset 0 0 0 $U32; 12 | border-radius: $U2; 13 | } 14 | &:before{ 15 | width: $U2; 16 | height: $U9; 17 | } 18 | &:after{ 19 | width: $U6; 20 | height: $U2; 21 | transform-origin: left center; 22 | transform: rotate(45deg) translate($U1, $U2); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /sass/temp/comment.scss: -------------------------------------------------------------------------------- 1 | //*-- Comment --*\\ 2 | .icono-commentEmpty{ 3 | width: $U30; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-radius: $U4 $U4 $U7 $U7; 7 | border-bottom-color: transparent; 8 | margin: $U5 $U2 $U7; 9 | &:before{ 10 | position: absolute; 11 | width: $U6; 12 | height: $U6; 13 | border-width: 0 0 $U2 $U2; 14 | border-style: solid; 15 | transform: rotate(-45deg); 16 | bottom: -1*$U4; 17 | left: $U6; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U8; 22 | height: $U2; 23 | border-width: 0 $U12 0 $U6; 24 | border-style: solid; 25 | bottom: 0; 26 | left: 0; 27 | } 28 | } 29 | .icono-comment{ 30 | width: $U30; 31 | height: $U20; 32 | box-shadow: inset 0 0 0 $U32; 33 | border-radius: $U4; 34 | margin: $U5 $U2 $U9; 35 | &:before{ 36 | position: absolute; 37 | width: $U8; 38 | height: $U8; 39 | box-shadow: inset 0 0 0 $U32; 40 | transform: rotate(-45deg); 41 | bottom: -1*$U4; 42 | left: $U6; 43 | } 44 | } -------------------------------------------------------------------------------- /sass/temp/creditCard.scss: -------------------------------------------------------------------------------- 1 | //*-- Credit Card --*\\ 2 | .icono-creditCard{ 3 | width: $U32; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | border-radius: $U3; 7 | margin: $U5 $U1; 8 | &:before{ 9 | position: absolute; 10 | top: $U4; 11 | width: 100%; 12 | height: $U6; 13 | box-shadow: inset 0 0 0 $U32; 14 | } 15 | &:after{ 16 | left: $U3; 17 | bottom: $U3; 18 | position: absolute; 19 | width: $U4; 20 | height: $U2; 21 | box-shadow: inset 0 0 0 $U32, $U6 0; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/temp/crop.scss: -------------------------------------------------------------------------------- 1 | //*-- Crop --*\\ 2 | .icono-crop{ 3 | @include square($U21); 4 | @extend .icono-stroke; 5 | border-left: none; 6 | border-bottom: none; 7 | margin: $U9 $U9 $U4 $U4; 8 | &:before{ 9 | position: absolute; 10 | @include square($U21); 11 | @extend .icono-stroke; 12 | top: -1*$U7; 13 | right: -1*$U7; 14 | border-top: none; 15 | border-right: none; 16 | box-sizing: border-box; 17 | } 18 | &:after{ 19 | //@include wDiagonal($U19); 20 | width: $U27; 21 | height: $U1; 22 | @include stickCenter(0, 0, $U12, $U2); 23 | box-shadow: inset 0 0 0 $U32; 24 | transform: rotate(-45deg); 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/cup.scss: -------------------------------------------------------------------------------- 1 | //*-- Cup --*\\ 2 | .icono-cup{ 3 | width: $U22; 4 | height: $U16; 5 | box-shadow: inset 0 0 0 $U32; 6 | border-radius: 0 0 $U5 $U5; 7 | margin: $U6 $U6 $U12; 8 | &:before{ 9 | position: absolute; 10 | right: -1*$U3; 11 | top: $U4; 12 | width: $U5; 13 | height: $U5; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 $U2; 16 | } 17 | &:after{ 18 | @extend .stickCenterH; 19 | bottom: -1*$U5; 20 | width: $U26; 21 | height: $U3; 22 | border-radius: 0 0 $U3 $U3; 23 | box-shadow: inset 0 0 0 $U32; 24 | } 25 | } -------------------------------------------------------------------------------- /sass/temp/devices.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 各种设备简图：Play, Pause,Stop,Next,... 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | //*-- iMac --*\\ 9 | .icono-imac{ 10 | width: $U28; 11 | height: $U24; 12 | @extend .icono-stroke; 13 | border-width: $U2 $U2 $U6; 14 | border-color: transparent; 15 | border-radius: $U3; 16 | box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset; 17 | margin: $U3 $U3 $U7; 18 | &:before{ 19 | position: absolute; 20 | height: $U4; 21 | right: -1*$U3; 22 | left: -1*$U3; 23 | bottom: -1*$U6; 24 | box-shadow: inset 0 0 0 $U32; 25 | border-radius: 0 0 $U3 $U3; 26 | } 27 | &:after{ 28 | width: $U9; 29 | height: $U7; 30 | @extend .stickCenterH; 31 | box-shadow: inset 0 0 0 $U32; 32 | bottom: -1*$U12; 33 | border-radius: $U32 $U32 0 0 #{'/'} 2*$U32; 34 | } 35 | } 36 | .icono-imacBold{ 37 | width: $U28; 38 | height: $U22; 39 | @extend .icono-stroke; 40 | border-radius: $U4; 41 | margin: $U4 $U3 $U8; 42 | &:before{ 43 | width: $U9; 44 | height: $U7; 45 | @extend .stickCenterH; 46 | box-shadow: inset 0 0 0 $U32; 47 | bottom: -1*$U6; 48 | border-radius: $U32 $U32 0 0 #{'/'} 2*$U32; 49 | } 50 | &:after{ 51 | width: $U24; 52 | height: $U3; 53 | @extend .stickCenterH; 54 | box-shadow: inset 0 0 0 $U32; 55 | bottom: 0; 56 | } 57 | } 58 | 59 | //*-- iPhone --*\\ 60 | .icono-iphone{ 61 | width: $U19; 62 | height: $U31; 63 | @extend .icono-stroke; 64 | border-radius: $U3; 65 | border-width: $U5 $U1; 66 | border-color: transparent; 67 | box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset; 68 | margin: $U2 $U8 $U1 $U7; 69 | &:before, &:after{ 70 | @extend .stickCenterH; 71 | box-shadow: inset 0 0 0 $U32; 72 | } 73 | &:before{ 74 | width: $U3; 75 | height: $U1; 76 | top: -1*$U3; 77 | } 78 | &:after{ 79 | width: $U3; 80 | height: $U3; 81 | bottom: -1*$U4; 82 | border-radius: 50%; 83 | } 84 | } 85 | .icono-iphoneBold{ 86 | width: $U20; 87 | height: $U32; 88 | margin: $U1 $U7; 89 | border-radius: $U4; 90 | @extend .icono-stroke; 91 | border-width: $U5 $U2; 92 | } 93 | 94 | //*-- Macbook --*\\ 95 | .icono-macbook{ 96 | width: $U32; 97 | height: $U2; 98 | box-shadow: inset 0 0 0 $U32; 99 | border-radius: 0 0 $U32 $U32 #{'/'} $U3; 100 | margin: $U25 $U1 $U7 $U1; 101 | &:before{ 102 | width: $U20; 103 | height: $U14; 104 | @extend .icono-stroke; 105 | @extend .stickCenterH; 106 | bottom: $U2; 107 | border-width: $U3 $U1 $U1 $U1; 108 | border-color: transparent; 109 | border-radius: $U3 $U3 0 0; 110 | box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset; 111 | } 112 | } 113 | .icono-macbookBold{ 114 | width: $U32; 115 | height: $U2; 116 | box-shadow: inset 0 0 0 $U32; 117 | margin: $U25 $U1 $U7 $U1; 118 | &:before{ 119 | width: $U20; 120 | height: $U14; 121 | @extend .stickCenterH; 122 | bottom: $U2; 123 | @extend .icono-stroke; 124 | border-width: $U3 $U2 $U1; 125 | border-radius: $U3 $U3 0 0; 126 | } 127 | } 128 | 129 | //*-- Nexus --*\\ 130 | .icono-nexus{ 131 | width: $U21; 132 | height: $U32; 133 | @extend .icono-stroke; 134 | border-width: $U3 $U1; 135 | border-radius: $U16 #{'/'} $U3; 136 | margin: $U1 $U7 $U1 $U6; 137 | } -------------------------------------------------------------------------------- /sass/temp/display.scss: -------------------------------------------------------------------------------- 1 | //*-- Display --*\\ 2 | .icono-display{ 3 | width: $U26; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | margin: $U4 $U4 $U8; 7 | &:before{ 8 | width: $U4; 9 | height: $U3; 10 | @extend .stickCenterH; 11 | bottom: -1*$U5; 12 | box-shadow: inset 0 0 0 $U32; 13 | } 14 | &:after{ 15 | width: $U14; 16 | height: $U2; 17 | @extend .stickCenterH; 18 | bottom: -1*$U6; 19 | box-shadow: inset 0 0 0 $U32; 20 | } 21 | } -------------------------------------------------------------------------------- /sass/temp/document.scss: -------------------------------------------------------------------------------- 1 | //*-- Document --*\\ 2 | .icono-document{ 3 | width: $U26; 4 | height: $U32; 5 | border-radius: 0 0 0 $U10; 6 | @extend .icono-stroke; 7 | margin: $U1 $U4; 8 | &:before{ 9 | position: absolute; 10 | @include square(0); 11 | left: -1*$U3; 12 | bottom: -1*$U3; 13 | border-width: $U5; 14 | border-style: solid; 15 | border-bottom-color: transparent; 16 | border-left-color: transparent; 17 | } 18 | &:after{ 19 | width: $U13; 20 | height: $U2; 21 | @extend .stickCenter; 22 | box-shadow: inset 0 0 0 $U32, 0 -1*$U5 0 0, 0 $U5 0 0; 23 | } 24 | } -------------------------------------------------------------------------------- /sass/temp/dropper.scss: -------------------------------------------------------------------------------- 1 | //*-- Dropper --*\\ 2 | .icono-dropper{ 3 | // @include wDiagonal($U28); 4 | width: 2*$U20; 5 | height: $U14; 6 | border-width: $U3; 7 | border-style: solid; 8 | border-right: none; 9 | border-top-color: transparent; 10 | border-bottom-color: transparent; 11 | border-left-color: transparent; 12 | box-shadow: -1*$U9 0 0 $U2 inset, 0 0 0 $U2 inset; 13 | border-radius: 50% $U6 $U6 50%; 14 | transform: rotate(-45deg); 15 | margin: $U12 -1*$U2 $U8 -1*$U4; 16 | &:before{ 17 | width: $U4; 18 | height: $U14; 19 | right: $U10; 20 | box-shadow: inset 0 0 0 $U32; 21 | @extend .stickCenterV; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/temp/exclamation.scss: -------------------------------------------------------------------------------- 1 | //*-- Exclamation --*\\ 2 | [class*="icono-exclamation"]{ 3 | overflow: visible; 4 | width: $U30; 5 | border-bottom: $U2 solid; 6 | border-radius: 0 0 $U4 $U4; 7 | margin: $U26 $U2 $U6; 8 | &:before{ 9 | position: absolute; 10 | width: $U26; 11 | height: $U26; 12 | left: $U1; 13 | top: -1*$U14; 14 | border-width: $U2 0 0 $U2; 15 | border-style: solid; 16 | border-radius: $U4 0; 17 | transform: rotate(45deg) skew(12deg, 12deg); 18 | } 19 | &:after{ 20 | width: $U4; 21 | height: $U3; 22 | top: -1*$U14; 23 | @extend .stickCenterH; 24 | box-shadow: inset 0 0 0 $U32, 0 $U3, 0 $U8; 25 | } 26 | &[class*="Circle"]{ 27 | height: $U30; 28 | margin: $U2; 29 | &:before{ 30 | display: none; 31 | } 32 | &:after{ 33 | box-shadow: inset 0 0 0 $U32, 0 $U3, 0 $U5, 0 $U10; 34 | top: $U6; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /sass/temp/eye.scss: -------------------------------------------------------------------------------- 1 | //*-- Eye --*\\ 2 | .icono-eye{ 3 | border-radius: 80% 20%; 4 | transform: rotate(45deg); 5 | @extend .icono-stroke; 6 | border-width: $U2 $U1 $U1 $U2; 7 | height: $U28; 8 | width: $U28; 9 | margin: $U3 $U3; 10 | &:before{ 11 | border-radius: 50%; 12 | box-shadow: 0 -1*$U3 0 $U3 inset; 13 | height: $U11; 14 | width: $U11; 15 | @extend .stickCenter; 16 | } 17 | } -------------------------------------------------------------------------------- /sass/temp/file.scss: -------------------------------------------------------------------------------- 1 | //*-- File --*\\ 2 | .icono-file{ 3 | width: $U26; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-radius: 0 $U12 0 0; 7 | margin: $U1 $U4; 8 | &:before{ 9 | position:absolute; 10 | top: -1*$U2; 11 | right:-1*$U2; 12 | border-style: solid; 13 | width: 0; 14 | height: 0; 15 | border-width: $U5; 16 | border-top-color: transparent; 17 | border-right-color: transparent; 18 | } 19 | &:after{ 20 | 21 | } 22 | } -------------------------------------------------------------------------------- /sass/temp/filter.scss: -------------------------------------------------------------------------------- 1 | //*-- Filter --*\\ 2 | .icono-filter{ 3 | width: 0; 4 | height: 0; 5 | border: $U10 solid; 6 | border-bottom: none; 7 | border-left-color: transparent; 8 | border-right-color: transparent; 9 | padding: $U3; 10 | box-shadow: inset 0 $U7; 11 | margin: $U9 $U4; 12 | } -------------------------------------------------------------------------------- /sass/temp/flag.scss: -------------------------------------------------------------------------------- 1 | //*-- Flag --*\\ 2 | .icono-flag{ 3 | width: $U22; 4 | height: $U25; 5 | border-left: $U3 solid; 6 | margin: $U5 $U6 $U4; 7 | &:before, &:after{ 8 | position:absolute; 9 | width: $U9; 10 | height: $U8; 11 | @extend .icono-stroke; 12 | } 13 | &:before{ 14 | left: -1*$U2; 15 | top: 1px; 16 | border-radius: 0 2px 0 0; 17 | border-right-width: $U2 + 1; 18 | } 19 | &:after{ 20 | width: $U5; 21 | left: $U9; 22 | top: $U4; 23 | border-left-width: $U2 + 1; 24 | border-radius: 2px 2px 0 2px; 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/folder.scss: -------------------------------------------------------------------------------- 1 | //*-- Folder --*\\ 2 | .icono-folder{ 3 | width: $U18; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-left-width: 0; 7 | border-radius: 0 $U3 $U3 0; 8 | margin: $U8 $U2 $U4 $U14; 9 | &:before{ 10 | position: absolute; 11 | width: $U12; 12 | height: $U20; 13 | left: -1*$U12; 14 | bottom: -1*$U2; 15 | border-width: 0 0 $U2 $U2; 16 | border-style: solid; 17 | border-radius: 0 0 0 $U3; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U10; 22 | height: $U5; 23 | left: -1*$U12; 24 | top: -1*$U7; 25 | border-width: $U2 $U2 0 $U2; 26 | border-style: solid; 27 | border-radius: $U3 $U3 0 0; 28 | } 29 | } -------------------------------------------------------------------------------- /sass/temp/forbidden.scss: -------------------------------------------------------------------------------- 1 | //*-- Forbidden --*\\ 2 | .icono-forbidden{ 3 | @include square($U28); 4 | @extend .icono-stroke; 5 | border-width: $U3; 6 | border-radius: 50%; 7 | margin: $U3; 8 | transform: rotate(45deg); 9 | &:before{ 10 | @extend .stickCenter; 11 | width: $U24; 12 | height: $U4; 13 | box-shadow: inset 0 0 0 $U32; 14 | } 15 | } -------------------------------------------------------------------------------- /sass/temp/gear.scss: -------------------------------------------------------------------------------- 1 | //*-- Gear --*\\ 2 | .icono-gear{ 3 | width: $U32; 4 | height: $U32; 5 | border: $U3 dotted; 6 | border-radius: 50%; 7 | margin: $U1; 8 | &:before{ 9 | @extend .stickCenter; 10 | width: $U22; 11 | height: $U22; 12 | box-shadow: 0 0 0 $U3, 0 0 0 $U2 inset; 13 | border-radius: 50%; 14 | border: $U6 solid transparent; 15 | box-sizing: border-box; 16 | } 17 | } -------------------------------------------------------------------------------- /sass/temp/headphone.scss: -------------------------------------------------------------------------------- 1 | //*-- Headphone --*\\ 2 | .icono-headphone{ 3 | width: $U30; 4 | height: $U27; 5 | @extend .icono-stroke; 6 | border-bottom-color: transparent; 7 | border-radius: $U32#{'/'}$U32 $U32 $U16 $U16; 8 | margin: $U2 $U2 $U5; 9 | &:before{ 10 | position: absolute; 11 | width: $U4; 12 | height: $U12; 13 | left: $U1; 14 | bottom: -1*$U4; 15 | border-radius: $U5; 16 | box-shadow: inset 0 0 0 $U32, $U20 0 0 0; 17 | } 18 | } -------------------------------------------------------------------------------- /sass/temp/heart.scss: -------------------------------------------------------------------------------- 1 | //*-- Heart --*\\ 2 | .icono-heart{ 3 | width: $U20; 4 | height: $U20; 5 | @extend .icono-stroke; 6 | border-top-color: transparent; 7 | border-left-color: transparent; 8 | transform: rotate(45deg); 9 | border-radius: $U4 0; 10 | margin: $U9 $U7 $U5; 11 | &:before, &:after{ 12 | position: absolute; 13 | @extend .icono-stroke; 14 | } 15 | &:before{ 16 | width: ceil($U20/2.5); 17 | height: ceil($U20*0.69); 18 | left: -1*ceil($U20/2.5)-$U2; 19 | bottom: -1*$U2; 20 | border-radius: $U20 0 0 $U20; 21 | border-right-color: transparent; 22 | } 23 | &:after{ 24 | width: ceil($U20*0.69); 25 | height: ceil($U20/2.5); 26 | right: -1*$U2; 27 | top: -1*ceil($U20/2.5)-$U2; 28 | border-radius: $U20 $U20 0 0; 29 | border-bottom-color: transparent; 30 | } 31 | } -------------------------------------------------------------------------------- /sass/temp/image.scss: -------------------------------------------------------------------------------- 1 | //*-- Image --*\\ 2 | .icono-image{ 3 | width: $U30; 4 | height: $U26; 5 | @extend .icono-stroke; 6 | border-radius: $U3; 7 | overflow: hidden; 8 | margin: $U4 $U2; 9 | &:before{ 10 | position: absolute; 11 | width: $U20; 12 | height: $U20; 13 | left: -1*$U2; 14 | top: $U14; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 $U32, $U10 -1*$U6 0 0; 17 | } 18 | &:after{ 19 | position: absolute; 20 | @include square($U4); 21 | border-radius: 50%; 22 | box-shadow: inset 0 0 0 $U32; 23 | top: $U5; 24 | right: $U5; 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/infinity.scss: -------------------------------------------------------------------------------- 1 | //*-- Infinity --*\\ 2 | .icono-infinity{ 3 | width: $U32; 4 | height: $U16; 5 | margin: $U9 $U1; 6 | &:before, &:after{ 7 | width: $U10; 8 | height: $U10; 9 | position: absolute; 10 | @extend .icono-stroke; 11 | transform: rotate(45deg); 12 | } 13 | &:before{ 14 | left: 0; 15 | border-radius: $U32 0 $U32 $U32; 16 | } 17 | &:after{ 18 | right: 1px; 19 | border-radius: $U32 $U32 $U32 0; 20 | } 21 | } -------------------------------------------------------------------------------- /sass/temp/keyboard.scss: -------------------------------------------------------------------------------- 1 | //*-- Keyboard --*\\ 2 | .icono-keyboard{ 3 | width: $U32; 4 | height: $U22; 5 | border-radius: $U3; 6 | @extend .icono-stroke; 7 | margin: $U6 $U1; 8 | &:before{ 9 | @include square($U2); 10 | @extend .stickCenter; 11 | box-shadow: -1*$U2 -1*$U4 0, -1*$U6 -1*$U4 0, -1*$U10 -1*$U4 0, $U2 -1*$U4 0, $U6 -1*$U4 0, $U8 -1*$U4 0, $U10 -1*$U4 0, 12 | -1*$U4 0 0, -1*$U8 0 0, -1*$U10 0 0, inset 0 0 0 $U32, $U4 0 0, $U8 0 0, $U10 0 0, 13 | $U4 $U4 0, $U2 $U4 0, 0 $U4 0, -1*$U2 $U4 0, -1*$U6 $U4 0, -1*$U10 $U4 0, $U6 $U4 0, $U10 $U4 0; 14 | } 15 | } -------------------------------------------------------------------------------- /sass/temp/logos.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 各种logo简图：Play, Pause,Stop,Next,... 3 | * 需要调整尺寸的时候只需要设置font-size即可等比缩放 4 | * 主控参数默认值 font-size: $U20; 5 | * PS：这里没有线宽的概念，只有等比缩放。 6 | */ 7 | 8 | .icono-icono{ 9 | width: $U13; 10 | height: $U4; 11 | box-shadow: inset 0 0 0 $U32, 0 $U16, $U17 -1*$U18; 12 | transform: skew(0, 30deg); 13 | margin: $U11 $U19 $U19 $U2; 14 | &:before{ 15 | position: absolute; 16 | width: $U13; 17 | height: $U4; 18 | box-shadow: inset 0 0 0 $U32, 0 $U16, -1*$U17 -1*$U17; 19 | right: -1*$U17; 20 | top: -1*$U10; 21 | transform: skew(0, -48deg); 22 | } 23 | &:after{ 24 | position: absolute; 25 | width: $U22; 26 | height: $U15; 27 | left: 0; 28 | top: -1*$U5; 29 | border: $U4 solid; 30 | border-top-color: transparent; 31 | border-bottom: none; 32 | transform: skew(0, -30deg) scaleY(0.6); 33 | } 34 | } -------------------------------------------------------------------------------- /sass/temp/mail.scss: -------------------------------------------------------------------------------- 1 | //*-- Mail --*\\ 2 | .icono-mail{ 3 | @include goldenRectL($U28); 4 | @extend .icono-stroke; 5 | overflow: hidden; 6 | margin: $U8 $U3; 7 | &:before{ 8 | position: absolute; 9 | @include square($U32/1.3); 10 | @extend .icono-stroke; 11 | transform: rotate(50deg) skew(-10deg, -20deg); 12 | top: -1*$U20; 13 | left: -1*$U3; 14 | } 15 | } -------------------------------------------------------------------------------- /sass/temp/market.scss: -------------------------------------------------------------------------------- 1 | //*-- Market --*\\ 2 | .icono-market{ 3 | width: $U32; 4 | height: $U12; 5 | @extend .icono-stroke; 6 | border-top: none; 7 | margin: $U19 $U1 $U3; 8 | &:before{ 9 | width: $U6; 10 | height: $U13; 11 | position: absolute; 12 | top: -1*$U15; 13 | left: -1*$U5; 14 | border-radius: 0 0 $U10 $U10; 15 | border-left: none; 16 | box-shadow: inset 0 0 0 $U32, $U8 0 0, $U16 0 0, $U24 0 0, $U32 0 0; 17 | } 18 | &:after{ 19 | width: $U6; 20 | height: $U6; 21 | bottom: -1*$U2; 22 | @extend .stickCenterH; 23 | @extend .icono-stroke; 24 | } 25 | } -------------------------------------------------------------------------------- /sass/temp/microphone.scss: -------------------------------------------------------------------------------- 1 | //*-- Microphone --*\\ 2 | .icono-microphone{ 3 | width: $U22; 4 | height: $U15; 5 | @extend .icono-stroke; 6 | border-width: 0 $U2 $U2; 7 | border-radius: $U20#{'/'}0 0 $U20 $U20; 8 | margin: $U12 $U6 $U7; 9 | &:before{ 10 | width: $U10; 11 | height: $U18; 12 | @extend .stickCenterH; 13 | top: -1*$U11; 14 | border-radius: $U20; 15 | @extend .icono-stroke; 16 | } 17 | &:after{ 18 | width: $U2; 19 | height: $U2; 20 | bottom: -1*$U4; 21 | @extend .stickCenterH; 22 | box-shadow: inset 0 0 0 $U32, 0 $U2, 0 $U4, -1*$U2 $U4, -1*$U4 $U4, -1*$U6 $U4, $U2 $U4, $U4 $U4, $U6 $U4; 23 | } 24 | } -------------------------------------------------------------------------------- /sass/temp/moon.scss: -------------------------------------------------------------------------------- 1 | //*-- Moon --*\\ 2 | .icono-moon{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 50%; 6 | overflow: hidden; 7 | margin: $U6; 8 | &:before{ 9 | position: absolute; 10 | width: $U20; 11 | height: $U20; 12 | top: -$U2; 13 | left: $U6; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 $U32; 16 | } 17 | } -------------------------------------------------------------------------------- /sass/temp/mouse.scss: -------------------------------------------------------------------------------- 1 | //*-- Mouse --*\\ 2 | .icono-mouse{ 3 | width: $U23; 4 | height: $U32; 5 | border-radius: $U11 $U11 $U12 $U12; 6 | @extend .icono-stroke; 7 | margin: $U1 $U5 $U1 $U6; 8 | &:before{ 9 | width: $U1; 10 | height: $U6; 11 | border-radius: $U2; 12 | @extend .stickCenterH; 13 | @extend .icono-stroke; 14 | border-color: transparent; 15 | border-width: $U1; 16 | top: $U5; 17 | box-shadow: 0 0 0 $U1, 0 0 0 $U2 inset; 18 | } 19 | &:after{ 20 | width: $U1; 21 | height: $U4; 22 | @extend .stickCenterH; 23 | top: 0; 24 | box-shadow: inset 0 0 0 $U32, 0 $U13 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/music.scss: -------------------------------------------------------------------------------- 1 | //*-- Music --*\\ 2 | .icono-music{ 3 | width: $U18; 4 | height: $U6; 5 | transform: skewY(-15deg); 6 | box-shadow: inset 0 0 0 $U32; 7 | border-radius: $U2 $U2 0 0; 8 | margin: $U4 $U5 $U24 $U11; 9 | &:before{ 10 | position: absolute; 11 | width: $U2; 12 | height: $U16; 13 | left: 0; 14 | top: $U4; 15 | box-shadow: inset 0 0 0 $U32, $U16 0 0 0; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: $U10; 20 | height: $U8; 21 | left: -1*$U8; 22 | top: $U17; 23 | border-radius: 50%; 24 | box-shadow: inset 0 0 0 $U32, $U16 0 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/paperclip.scss: -------------------------------------------------------------------------------- 1 | //*-- Paper clip --*\\ 2 | .icono-paperClip{ 3 | width: $U24; 4 | height: $U18; 5 | @extend .icono-stroke; 6 | border-left: none; 7 | border-radius: 0 $U16 $U16 0; 8 | transform: rotate(-45deg); 9 | margin: $U5 0 $U11 $U10; 10 | &:before{ 11 | width: $U18; 12 | height: $U6; 13 | right: $U2; 14 | @extend .stickCenterV; 15 | @extend .icono-stroke; 16 | border-radius: 0 $U16 $U16 0; 17 | border-left: none; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U12; 22 | height: $U10; 23 | left: -1*$U12; 24 | top: -1*$U2; 25 | @extend .icono-stroke; 26 | border-right: none; 27 | border-radius: $U16 0 0 $U16; 28 | 29 | } 30 | } -------------------------------------------------------------------------------- /sass/temp/piano.scss: -------------------------------------------------------------------------------- 1 | //*-- piano --*\\ 2 | .icono-piano{ 3 | width: $U28; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | margin: $U6 $U3; 7 | &:before{ 8 | position: absolute; 9 | left: $U4; 10 | top: 0; 11 | width: $U1; 12 | height: 100%; 13 | box-shadow: inset 0 0 0 $U32, $U5 0, $U10 0, $U15 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: $U3; 18 | height: $U12; 19 | left: $U3; 20 | top: 0; 21 | box-shadow: inset 0 0 0 $U32, $U5 0, $U10 0, $U15 0; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/temp/power.scss: -------------------------------------------------------------------------------- 1 | //*-- Power --*\\ 2 | .icono-power{ 3 | width: $U22; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-radius: 50%; 7 | border-top-color: transparent; 8 | margin: $U6; 9 | &:before{ 10 | position: absolute; 11 | top: -15%; 12 | left: $U8; 13 | width: $U2; 14 | height:60%; 15 | box-shadow: inset 0 0 0 $U32; 16 | } 17 | } -------------------------------------------------------------------------------- /sass/temp/rename.scss: -------------------------------------------------------------------------------- 1 | //*-- Rename --*\\ 2 | .icono-rename{ 3 | width: $U26; 4 | height: $U10; 5 | @extend .icono-stroke; 6 | border-color: transparent; 7 | border-width: $U3; 8 | box-shadow: 0 0 0 $U1, $U11 0 0 0 inset; 9 | margin: $U12 $U4; 10 | &:before{ 11 | width: $U1; 12 | height: $U18; 13 | @extend .stickCenterV; 14 | left: $U9; 15 | border-width: $U2 $U4; 16 | border-style: solid; 17 | border-right-color: transparent; 18 | border-left-color: transparent; 19 | box-shadow: 0 0 0 $U1 inset; 20 | } 21 | } -------------------------------------------------------------------------------- /sass/temp/rss.scss: -------------------------------------------------------------------------------- 1 | //*-- RSS --*\\ 2 | .icono-rss{ 3 | @include square($U22); 4 | overflow: hidden; 5 | margin: $U6; 6 | &:before, &:after{ 7 | position: absolute; 8 | border-radius: 50%; 9 | } 10 | &:before{ 11 | @include square($U6); 12 | box-shadow: 0 0 $U32 inset; 13 | left: 0; 14 | bottom: 0; 15 | } 16 | &:after{ 17 | @include square($U27); 18 | right: 15%; 19 | top: 15%; 20 | border: $U4 solid transparent; 21 | box-shadow: inset 0 0 0 $U2, 0 0 0 $U2; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/temp/ruler.scss: -------------------------------------------------------------------------------- 1 | //*-- Ruler --*\\ 2 | .icono-ruler{ 3 | width: $U27; 4 | height: $U12; 5 | @extend .icono-stroke; 6 | margin: $U11 $U4 $U11 $U3; 7 | &:before{ 8 | position: absolute; 9 | width: $U1; 10 | height: $U4; 11 | box-shadow: inset 0 0 0 $U32, $U6 0, $U12 0; 12 | left: $U5; 13 | top: 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: $U1; 18 | height: $U2; 19 | box-shadow: inset 0 0 0 $U32, $U2 0, $U6 0, $U8 0, $U12 0, $U14 0, $U18 0, $U20 0; 20 | left: $U1; 21 | top: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/temp/signin.scss: -------------------------------------------------------------------------------- 1 | //*-- Sign in --*\\ 2 | .icono-signIn{ 3 | width: $U18; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-left: none; 7 | margin-left: $U5; 8 | border-radius: 0 $U3 $U3 0; 9 | margin: $U1 $U8; 10 | &:before{ 11 | position: absolute; 12 | width: $U11; 13 | height: $U11; 14 | left:-1*$U10; 15 | top:$U7; 16 | @extend .icono-stroke; 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 $U4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /sass/temp/signout.scss: -------------------------------------------------------------------------------- 1 | //*-- Sign out --*\\ 2 | .icono-signOut{ 3 | width: $U18; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-right: none; 7 | margin-right: $U5; 8 | border-radius: $U3 0 0 $U3; 9 | margin: $U1 $U8; 10 | &:before{ 11 | position: absolute; 12 | width: $U11; 13 | height: $U11; 14 | right:-1*$U2; 15 | top:$U7; 16 | @extend .icono-stroke; 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 $U4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /sass/temp/sitemap.scss: -------------------------------------------------------------------------------- 1 | //* Sitemap *\\ 2 | .icono-sitemap { 3 | width: $U24; 4 | height: $U2; 5 | box-shadow: 0 -1*$U5; 6 | margin: $U21 $U5 $U11; 7 | &:before { 8 | @extend .stickCenterH; 9 | width: $U6; 10 | height: $U6; 11 | border-radius: $U2; 12 | box-shadow: inset 0 0 0 $U32, $U11 0, -1*$U11 0, 0 -1*$U14 0 $U1; 13 | } 14 | &:after { 15 | @extend .stickCenterH; 16 | width: $U2; 17 | height: $U10; 18 | box-shadow: 0 -1*$U7, $U11 -1*$U5, -1*$U11 -1*$U5; 19 | } 20 | } -------------------------------------------------------------------------------- /sass/temp/sliders.scss: -------------------------------------------------------------------------------- 1 | //*-- Sliders --*\\ 2 | .icono-sliders{ 3 | height: $U30; 4 | width: $U30; 5 | margin: $U2; 6 | &:before, &:after{ 7 | transform: translateX(-50%); 8 | left: 50%; 9 | position: absolute; 10 | } 11 | &:before{ 12 | width: $U8; 13 | height: $U7; 14 | border-radius: $U2; 15 | top: 67%; 16 | box-shadow: inset 0 0 0 $U32, $U10 -1*$U10, -1*$U10 -1*$U14; 17 | } 18 | &:after{ 19 | position: absolute; 20 | width: $U2; 21 | height:100%; 22 | box-shadow: inset 0 0 0 $U32, $U10 0, -1*$U10 0; 23 | } 24 | } -------------------------------------------------------------------------------- /sass/temp/socials.scss: -------------------------------------------------------------------------------- 1 | //*-- Socials --*\\ 2 | .icono-facebook{ 3 | width: $U9; 4 | height: $U26; 5 | box-shadow: inset $U2 $U4 0 0; 6 | border-left: $U3 solid; 7 | border-radius: $U5 0 0 0; 8 | margin: $U4 $U11 $U4 $U14; 9 | &:before{ 10 | position: absolute; 11 | top: $U9; 12 | left: -1*$U6; 13 | width: $U11; 14 | height: 0; 15 | border-top: $U4 solid; 16 | border-right: $U1 solid transparent; 17 | } 18 | } 19 | .icono-twitter{ 20 | width: $U14; 21 | height: $U23; 22 | border-radius: 0 0 0 $U8; 23 | box-shadow: -1*$U6 $U2 0 0; 24 | margin: $U4 $U7 $U7 $U13; 25 | &:before{ 26 | position: absolute; 27 | bottom: -1*$U2; 28 | left: -1*$U6; 29 | width: $U17; 30 | height: $U6; 31 | border-radius: 0 0 0 $U8; 32 | box-shadow: inset $U4 -1*$U6, 0 -1*$U11; 33 | } 34 | &:after{ 35 | position: absolute; 36 | width: $U6; 37 | height: $U6; 38 | box-shadow: inset 0 0 0 $U32, $U13 $U8, $U13 $U19; 39 | border-radius: 50%; 40 | left: -1*$U6; 41 | } 42 | } 43 | .icono-gplus{ 44 | width: $U10; 45 | height: $U2; 46 | box-shadow: inset 0 0 0 $U32; 47 | margin: $U14 $U4 $U18 $U20; 48 | &:before{ 49 | position: absolute; 50 | top: -$U5; 51 | right: $U10; 52 | content: "g" !important; 53 | font-family: georgia; 54 | font-size: $U32; 55 | text-indent: 0; 56 | line-height: 0; 57 | } 58 | &:after{ 59 | @extend .stickCenter; 60 | width: $U2; 61 | height: $U10; 62 | box-shadow: inset 0 0 0 $U32; 63 | } 64 | } 65 | .icono-linkedIn{ 66 | width: $U5; 67 | height: $U16; 68 | box-shadow: inset 0 0 0 $U32, $U8 0; 69 | margin: $U12 $U24 $U6 $U5; 70 | &:before{ 71 | position: absolute; 72 | width: $U5; 73 | height: $U5; 74 | box-shadow: inset 0 0 0 $U32; 75 | top: -1*$U7; 76 | left: 0; 77 | border-radius: 50%; 78 | } 79 | &:after{ 80 | position: absolute; 81 | width: $U12; 82 | height: $U16; 83 | border-right: $U1 solid; 84 | left: $U11; 85 | bottom: 0; 86 | border-radius: $U8 $U5 0 0#{'/'}$U11 $U5 0 0; 87 | box-shadow: inset -1*$U4 $U4; 88 | } 89 | } 90 | .icono-instagram{ 91 | width: $U26; 92 | height: $U26; 93 | box-shadow: inset 0 0 0 $U2; 94 | border-radius: $U4; 95 | margin: $U4; 96 | &:before{ 97 | @extend .stickCenter; 98 | width: $U10; 99 | height: $U10; 100 | border-radius: 50%; 101 | box-shadow: 0 0 0 $U3; 102 | } 103 | &:after{ 104 | position: absolute; 105 | width: $U5; 106 | height: $U5; 107 | border-radius: $U1; 108 | right: $U3; 109 | top: $U3; 110 | box-shadow: 0 0 0 $U2, $U1 $U1 0 $U2, -1*$U5 -1*$U1 0 $U1, -1*$U10 -1*$U1 0 $U1, -1*$U16 $U1 0 $U2; 111 | } 112 | } 113 | .icono-flickr{ 114 | width: $U24; 115 | height: $U24; 116 | overflow: hidden; 117 | border-radius: $U4; 118 | margin: $U5; 119 | &:before, &:after{ 120 | @extend .stickCenterV; 121 | width: $U7; 122 | height: $U7; 123 | border-radius: 50%; 124 | } 125 | &:before{ 126 | left: $U4; 127 | box-shadow: 0 0 0 $U1, 0 -1*$U10 0 $U6, 0 $U10 0 $U6, -1*$U4 0 0 $U3; 128 | } 129 | &:after{ 130 | right: $U4; 131 | box-shadow: 0 0 0 $U1, 0 -1*$U10 0 $U6, 0 $U10 0 $U6, $U4 0 0 $U3; 132 | } 133 | } 134 | .icono-delicious{ 135 | width: $U24; 136 | height: $U24; 137 | overflow: hidden; 138 | border-radius: $U4; 139 | box-shadow: inset 0 0 0 $U2; 140 | margin: $U5; 141 | &:before{ 142 | position: absolute; 143 | width: $U12; 144 | height: $U12; 145 | box-shadow: inset 0 0 0 $U32, $U12 -1*$U12 0 0; 146 | left: 0; 147 | bottom: 0; 148 | } 149 | } 150 | .icono-codepen{ 151 | width: $U2; 152 | height: $U10; 153 | box-shadow: inset 0 0 0 $U32, 0 $U15, -1*$U11 $U7, $U11 $U7; 154 | margin: $U4 $U16 $U20; 155 | &:before{ 156 | position: absolute; 157 | right: $U2; 158 | top: $U3; 159 | width: $U11; 160 | height: $U4; 161 | transform: skew(0, -35deg) scaleY(0.6); 162 | box-shadow: inset 0 0 0 $U32, 0 $U13, $U11 $U26, $U12 $U32+$U7; 163 | } 164 | &:after{ 165 | position: absolute; 166 | left: $U2; 167 | top: $U3; 168 | width: $U11; 169 | height: $U4; 170 | transform: skew(0, 35deg) scaleY(0.6); 171 | box-shadow: inset 0 0 0 $U32, 0 $U13, -1*$U11 $U26, -1*$U12 $U32+$U7; 172 | } 173 | } 174 | .icono-blogger{ 175 | width: $U24; 176 | height: $U14; 177 | border-radius: 0 0 $U7 $U7; 178 | margin: $U14 $U5 $U6; 179 | &, &:before{ 180 | border-width: $U6; 181 | border-style: solid; 182 | } 183 | &:before{ 184 | position: absolute; 185 | width: $U8; 186 | height: $U2; 187 | left: -1*$U6; 188 | top: -1*$U15; 189 | border-radius: $U6 $U6 0 0; 190 | } 191 | } 192 | .icono-disqus{ 193 | width: $U31; 194 | height: $U31; 195 | box-shadow: inset 0 0 0 $U32; 196 | border-radius: 50%; 197 | margin: $U1 $U1 $U2 $U2; 198 | &:before{ 199 | position: absolute; 200 | width: 0; 201 | height: 0; 202 | border: $U5 solid transparent; 203 | border-top: $U10 solid; 204 | transform: rotate(50deg); 205 | left: -$U5; 206 | top: $U20; 207 | } 208 | } 209 | .icono-dribbble{ 210 | width: $U26; 211 | height: $U26; 212 | border-radius: 50%; 213 | box-shadow: inset 0 0 0 $U2; 214 | overflow: hidden; 215 | position: relative; 216 | background-image: radial-gradient(50% 100%, transparent 0, transparent $U9, currentColor $U10, currentColor $U11, transparent $U12); 217 | background-repeat: no-repeat; 218 | background-position: -$U8 center; 219 | transform: rotate(-25deg); 220 | margin: $U4; 221 | &:after, &:before{ 222 | position: absolute; 223 | border-radius: 50%; 224 | border: $U2 solid; 225 | width: 2*$U20; 226 | height: $U30; 227 | } 228 | &:after{ 229 | top: $U14; 230 | left: -$U7; 231 | width: $U32; 232 | } 233 | &:before{ 234 | left: -$U6; 235 | top: -$U23; 236 | } 237 | } 238 | 239 | //*-- Youtube --*\\ 240 | .icono-youtube{ 241 | border-right-color: transparent; 242 | border-left-color: transparent; 243 | border-radius: $U10; 244 | width: $U32; 245 | height: $U32 / 1.4357; 246 | margin: $U6 $U1; 247 | &, &:before{ 248 | @extend .icono-stroke; 249 | } 250 | &:before{ 251 | position: absolute; 252 | top: 0; 253 | right: 0; 254 | bottom: 0; 255 | left: 0; 256 | border-top-color: transparent; 257 | border-bottom-color: transparent; 258 | border-radius: $U6 #{'/'} $U3; 259 | } 260 | &:after{ 261 | width: 0; 262 | height: 0; 263 | @extend .stickCenter; 264 | border-width: $U4 0 $U4 $U8; 265 | border-style: solid; 266 | border-top-color: transparent; 267 | border-bottom-color: transparent; 268 | } 269 | } -------------------------------------------------------------------------------- /sass/temp/spinner.scss: -------------------------------------------------------------------------------- 1 | //*-- Spinner --*\\ 2 | .icono-spinner{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 50%; 6 | box-shadow: -1*$U16 0 0 -1*$U9,-1*$U11 -1*$U11 0 -1*$U9,0 -1*$U16 0 -1*$U9,1*$U11 -1*$U11 0 -1*$U8,1*$U16 0 0 -1*$U7,1*$U11 1*$U11 0 -1*$U7,0 1*$U16 0 -1*$U7,-1*$U11 1*$U11 0 -1*$U7; 7 | margin: $U7; 8 | } 9 | -------------------------------------------------------------------------------- /sass/temp/sun.scss: -------------------------------------------------------------------------------- 1 | //*-- Sun --*\\ 2 | .icono-sun{ 3 | width: $U22; 4 | height: $U22; 5 | border: $U2 solid; 6 | border-radius: 50%; 7 | box-shadow: -1*$U15 0 0 -1*$U9, $U15 0 0 -1*$U9, 0 -1*$U15 0 -1*$U9, 0 $U15 0 -1*$U9, 8 | $U11 $U11 0 -1*$U9, -1*$U11 -1*$U11 0 -1*$U9, $U11 -1*$U11 0 -1*$U9, -1*$U11 $U11 0 -1*$U9; 9 | margin: $U6; 10 | } -------------------------------------------------------------------------------- /sass/temp/support.scss: -------------------------------------------------------------------------------- 1 | //*-- Support --*\\ 2 | .icono-support{ 3 | width: $U26; 4 | height: $U26; 5 | border: $U5 solid transparent; 6 | box-shadow: 0 0 0 $U2 inset, 0 0 0 $U2; 7 | border-radius: 50%; 8 | margin: $U4; 9 | &:before{ 10 | position:absolute; 11 | width: $U7; 12 | height: $U7; 13 | top: -1*$U3; 14 | left: -1*$U3; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 $U32, $U21 0 0 0; 17 | } 18 | &:after{ 19 | position:absolute; 20 | width: $U7; 21 | height: $U7; 22 | top: -1*$U3; 23 | right: -1*$U3; 24 | transform: rotate(135deg); 25 | box-shadow: inset 0 0 0 $U32, $U21 0 0 0; 26 | } 27 | } -------------------------------------------------------------------------------- /sass/temp/tag.scss: -------------------------------------------------------------------------------- 1 | //*-- Tag --*\\ 2 | .icono-tag{ 3 | width: $U18; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | border-radius: $U6 $U6 $U4 $U4; 7 | border-top: none; 8 | transform: rotate(45deg); 9 | margin: $U5 $U8; 10 | &:before{ 11 | position: absolute; 12 | top: -1*$U4; 13 | left: $U1; 14 | width: $U10; 15 | height: $U10; 16 | border-width: $U2 0 0 $U2; 17 | border-style: solid; 18 | transform: rotate(45deg); 19 | border-radius: $U5 0 0 0; 20 | } 21 | &:after{ 22 | @extend .stickCenterH; 23 | top: $U1; 24 | width: $U3; 25 | height: $U3; 26 | @extend .icono-stroke; 27 | border-radius: 50%; 28 | } 29 | } -------------------------------------------------------------------------------- /sass/temp/terminal.scss: -------------------------------------------------------------------------------- 1 | //*-- Terminal --*\\ 2 | .icono-terminal{ 3 | width: $U28; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | margin: $U5 $U3; 7 | &:before{ 8 | width: $U5; 9 | height: $U5; 10 | position: absolute; 11 | top: 50%; 12 | transform: translateY(-50%) rotate(45deg); 13 | left: $U3; 14 | border-width: $U2 $U2 0 0; 15 | border-style: solid; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: $U5; 20 | height: 0; 21 | border-bottom: $U2 solid; 22 | right: $U6; 23 | bottom: $U4; 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /sass/temp/trash.scss: -------------------------------------------------------------------------------- 1 | //*-- Trash --*\\ 2 | .icono-trash{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 0 0 $U3 $U3; 6 | @extend .icono-stroke; 7 | border-top: none; 8 | margin: $U9 $U6 $U3; 9 | &:before{ 10 | width: $U8; 11 | height: $U2; 12 | @extend .stickCenterH; 13 | top: -1*$U6; 14 | box-shadow: inset 0 0 0 $U32, -1*$U10 1*$U2 0 0, -1*$U6 1*$U2 0 0, 0 $U2 0 0, $U6 $U2 0 0, $U10 $U2 0 0; 15 | } 16 | } -------------------------------------------------------------------------------- /sass/temp/user.scss: -------------------------------------------------------------------------------- 1 | //*-- User --*\\ 2 | .icono-user{ 3 | width: $U32; 4 | height: $U14; 5 | @extend .icono-stroke; 6 | border-radius: 2*$U32 2*$U32 0 0 #{'/'} 2*$U32; 7 | margin: $U18 $U1 $U2; 8 | &:before{ 9 | @include square($U12); 10 | @extend .stickCenterH; 11 | top: -1*$U20; 12 | @extend .icono-stroke; 13 | border-radius: 50%; 14 | } 15 | &:after{ 16 | 17 | } 18 | } -------------------------------------------------------------------------------- /sass/temp/video.scss: -------------------------------------------------------------------------------- 1 | //*-- Video --*\\ 2 | .icono-video{ 3 | width: $U20; 4 | height: $U20; 5 | @extend .icono-stroke; 6 | margin: $U7 $U7; 7 | &:before{ 8 | @extend .stickCenterV; 9 | width: $U3; 10 | height: $U3; 11 | left: -1*$U8; 12 | box-shadow: inset 0 0 0 $U32, 0 -1*$U8 0 0, 0 $U8 0 0, $U29 0 0 0,$U29 -1*$U8 0 0, $U29 $U8 0 0; 13 | } 14 | &:after{ 15 | @extend .stickCenter; 16 | width: 0; 17 | height: 0; 18 | border-width: $U4 0 $U4 $U6; 19 | border-style: solid; 20 | border-top-color: transparent; 21 | border-bottom-color: transparent; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sass/variables.scss: -------------------------------------------------------------------------------- 1 | // front color of icons 2 | $maincolor: #ddd; 3 | 4 | // 整体缩放因子，影响所有图标，包括线宽都会被改变 5 | $size: 32px; //pixel for this version 6 | 7 | $U1: ceil($size/32); 8 | $U2: ceil($size/16); 9 | $U3: ceil($size/12); 10 | $U4: ceil($size/8); 11 | $U5: ceil($size/7); 12 | $U6: ceil($size/5.4); 13 | $U7: ceil($size/4.9); 14 | $U8: ceil($size/4); 15 | $U9: ceil($size/3.7); 16 | $U10: ceil($size/3.2); 17 | $U11: ceil($size/3.1); 18 | $U12: ceil($size/2.7); 19 | $U13: ceil($size/2.5); 20 | $U14: ceil($size/2.3); 21 | $U15: ceil($size/2.2); 22 | $U16: ceil($size/2); 23 | $U17: ceil($size/1.9); 24 | $U18: ceil($size/1.8); 25 | $U19: ceil($size/1.7); 26 | $U20: ceil($size/1.6); 27 | $U21: ceil($size/1.55); 28 | $U22: ceil($size/1.5); 29 | $U23: ceil($size/1.4); 30 | $U24: ceil($size/1.34); 31 | $U25: ceil($size/1.3); 32 | $U26: ceil($size/1.25); 33 | $U27: ceil($size/1.2); 34 | $U28: ceil($size/1.15); 35 | $U29: ceil($size/1.12); 36 | $U30: ceil($size/1.1); 37 | $U31: ceil($size/1.05); 38 | $U32: $size; 39 | 40 | // icon stroke 41 | $stroke: 2px solid; 42 | $strokeSize: 2px; 43 | 44 | // icon size 只影响图标自身大小，不影响线宽 45 | // 原理：将i标签的font-size设置为iconSize，后代使用em单位来做对父级的响应。 46 | // 所以，单独设置i标签的font-size就可以控制单个图标的大小了 47 | // PS: 设置图标的宽高是不能影响图标的实际大小的，图标大小只受内部before和after影响。 48 | $iconSize: 20px; --------------------------------------------------------------------------------