├── main.scss ├── .gitignore ├── README.md ├── package.json ├── LICENSE ├── pixelperfectcss-settings.scss ├── pixelperfectcss.min.css └── pixelperfectcss-scss.scss /main.scss: -------------------------------------------------------------------------------- 1 | @import "pixelperfectcss-settings"; 2 | @import "pixelperfectcss-scss"; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | yarn.lock 5 | package-lock.json 6 | npm-shrinkwrap.json 7 | node_modules 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [pixelperfectcss-scss](https://dnomak.com/pixelperfectcss/) 2 | 3 | Pixel Perfect CSS (Scss) 4 | 5 | ## Install 6 | 7 | ### [Settings download](https://raw.githubusercontent.com/pixelperfectcss/pixelperfectcss-scss/master/pixelperfectcss-settings.scss) 8 | ```scss 9 | @import "pixelperfectcss-settings"; 10 | @import "node_modules/pixelperfectcss-scss/pixelperfectcss-scss"; 11 | ``` 12 | 13 | ### [npm](https://www.npmjs.com/package/pixelperfectcss-scss) 14 | ```bash 15 | $ npm install --save pixelperfectcss-scss 16 | ``` 17 | 18 | ## Build 19 | ```bash 20 | $ git clone git@github.com:pixelperfectcss/pixelperfectcss-scss.git 21 | $ cd pixelperfectcss-scss 22 | $ npm install 23 | $ npm run build 24 | ``` 25 | 26 | ## License 27 | Pixel Perfect CSS is licensed under the [MIT](LICENSE) license. 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixelperfectcss-scss", 3 | "version": "1.0.5", 4 | "homepage": "https://dnomak.com/pixelperfectcss/", 5 | "description": "Pixel Perfect CSS (Scss)", 6 | "author": "@dnomak ", 7 | "license": "MIT", 8 | "main": "pixelperfectcss-scss.scss", 9 | "scripts": { 10 | "build": "node-sass main.scss pixelperfectcss.css --output-style expanded; node-sass main.scss pixelperfectcss.min.css --output-style compressed" 11 | }, 12 | "keywords": [ 13 | "css", 14 | "sass", 15 | "scss" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/pixelperfectcss/pixelperfectcss-scss.git" 20 | }, 21 | "dependencies": { 22 | "node-sass": "^4.11.0" 23 | }, 24 | "engines": { 25 | "node": "10.14.1", 26 | "npm": "6.5.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 - Doğukan Güven Nomak 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 | -------------------------------------------------------------------------------- /pixelperfectcss-settings.scss: -------------------------------------------------------------------------------- 1 | /*! Pixel Perfect CSS 1.0.5 | Settings | Scss | MIT License | dnomak.com/pixelperfectcss */ 2 | 3 | // breakpoint 4 | $pixelperfectcss-breakpoint: ( 5 | "xl": "", 6 | "lg": "(max-width: 1024px)", 7 | "md": "(max-width: 768px)", 8 | "sm": "(max-width: 667px)", 9 | ); 10 | 11 | // color, background-color, border-color 12 | $property-color: ( 13 | "white": "#FFFFFF", 14 | 15 | "gray-100": "#F5F5F5", 16 | "gray-200": "#E8E8E8", 17 | "gray-300": "#D8D8D8", 18 | "gray-400": "#B1B1B1", 19 | "gray-500": "#A1A1A1", 20 | 21 | "red-100": "#FCA9B6", 22 | "red-200": "#F9536D", 23 | "red-300": "#F72848", 24 | "red-400": "#C6203A", 25 | "red-500": "#94182B", 26 | 27 | "green-100": "#A0EEC3", 28 | "green-200": "#41DD87", 29 | "green-300": "#12D469", 30 | "green-400": "#0EAA54", 31 | "green-500": "#0B7F3F", 32 | 33 | "blue-100": "#9FD4FB", 34 | "blue-200": "#40A9F8", 35 | "blue-300": "#1094F6", 36 | "blue-400": "#0D76C5", 37 | "blue-500": "#0A5994", 38 | 39 | "purple-100": "#D5B1E5", 40 | "purple-200": "#AC63CA", 41 | "purple-300": "#973CBD", 42 | "purple-400": "#793097", 43 | "purple-500": "#5B2471", 44 | 45 | "yellow-100": "#FFEB99", 46 | "yellow-200": "#FFD633", 47 | "yellow-300": "#FFCC00", 48 | "yellow-400": "#CCA300", 49 | "yellow-500": "#997A00", 50 | 51 | "black-100": "#666666", 52 | "black-200": "#555555", 53 | "black-300": "#444444", 54 | "black-400": "#333333", 55 | "black-500": "#222222", 56 | ); 57 | $selector-color: ( 58 | "cl": "not-breakpoint-class", 59 | "ho": "hover", 60 | "fo": "focus", 61 | "ac": "active", 62 | "pl": "placeholder", 63 | ); 64 | 65 | // width 66 | $property-border-width: ( 67 | "0", 68 | "1", 69 | "2", 70 | ); 71 | $selector-border-width: ( 72 | "cl": "not-breakpoint-class", 73 | ); 74 | 75 | // border-style 76 | $property-border-style: ( 77 | "bsso": "solid", 78 | "bsda": "dashed", 79 | "bsdo": "dotted", 80 | ); 81 | $selector-border-style: ( 82 | "cl": "not-breakpoint-class", 83 | ); 84 | 85 | // border-radius 86 | $property-border-radius: ( 87 | "50%", 88 | "0", 89 | "4", 90 | "8", 91 | "16", 92 | "24", 93 | "40", 94 | ); 95 | $selector-border-radius: ( 96 | "cl": "not-breakpoint-class", 97 | ); 98 | 99 | // position 100 | $property-position: ( 101 | "pr": "relative", 102 | "pa": "absolute", 103 | "pf": "fixed", 104 | "ps": "static", 105 | ); 106 | $selector-position: ( 107 | "cl": "not-breakpoint-class", 108 | ); 109 | 110 | // left, right, top, bottom 111 | $property-position-value: ( 112 | "100%", 113 | "50%", 114 | "0", 115 | "8", 116 | "16", 117 | "-8", 118 | "-16", 119 | ); 120 | $selector-position-value: ( 121 | "cl": "not-breakpoint-class", 122 | ); 123 | 124 | // z-index 125 | $property-z-index: ( 126 | "1", 127 | "2", 128 | ); 129 | $selector-z-index: ( 130 | "cl": "not-breakpoint-class", 131 | ); 132 | 133 | // transform 134 | $property-transform: ( 135 | "tn": "none", 136 | ); 137 | $selector-transform: ( 138 | "cl": "breakpoint-class", 139 | ); 140 | 141 | // transform-translate 142 | $property-transform-translate: ( 143 | "50": "50%", 144 | "-50": "-50%", 145 | ); 146 | $selector-transform-translate: ( 147 | "cl": "not-breakpoint-class", 148 | ); 149 | 150 | // display 151 | $property-display: ( 152 | "dn": "none", 153 | "db": "block", 154 | "di": "inline", 155 | "dib": "inline-block", 156 | ); 157 | $selector-display: ( 158 | "cl": "breakpoint-class", 159 | ); 160 | 161 | // width 162 | $property-width: (); 163 | $selector-width: ( 164 | "cl": "not-breakpoint-class", 165 | ); 166 | 167 | // max-width 168 | $property-max-width: (); 169 | $selector-max-width: ( 170 | "cl": "not-breakpoint-class", 171 | ); 172 | 173 | // min-width 174 | $property-min-width: (); 175 | $selector-min-width: ( 176 | "cl": "not-breakpoint-class", 177 | ); 178 | 179 | // line-height 180 | $property-line-height: ( 181 | "0", 182 | "8", 183 | "16", 184 | "24", 185 | "40", 186 | ); 187 | $selector-line-height: ( 188 | "cl": "not-breakpoint-class", 189 | ); 190 | 191 | // height 192 | $property-height: ( 193 | "0", 194 | "8", 195 | "16", 196 | "24", 197 | "40", 198 | ); 199 | $selector-height: ( 200 | "cl": "not-breakpoint-class", 201 | ); 202 | 203 | // max-height 204 | $property-max-height: (); 205 | $selector-max-height: ( 206 | "cl": "not-breakpoint-class", 207 | ); 208 | 209 | // min-height 210 | $property-min-height: (); 211 | $selector-min-height: ( 212 | "cl": "not-breakpoint-class", 213 | ); 214 | 215 | // margin 216 | $property-margin: ( 217 | "auto", 218 | "0", 219 | "8", 220 | "16", 221 | "24", 222 | "40", 223 | ); 224 | $selector-margin: ( 225 | "cl": "breakpoint-class", 226 | ); 227 | 228 | // padding 229 | $property-padding: ( 230 | "0", 231 | "8", 232 | "16", 233 | "24", 234 | "40", 235 | ); 236 | $selector-padding: ( 237 | "cl": "breakpoint-class", 238 | ); 239 | 240 | // overflow 241 | $property-overflow: ( 242 | "ov": "visible", 243 | "oh": "hidden", 244 | "oa": "auto", 245 | "os": "scroll", 246 | ); 247 | $selector-overflow: ( 248 | "cl": "breakpoint-class", 249 | ); 250 | 251 | // opacity 252 | $property-opacity: ( 253 | "0": "0", 254 | "50": "0.50", 255 | "100": "1", 256 | ); 257 | $selector-opacity: ( 258 | "cl": "not-breakpoint-class", 259 | "ho": "hover", 260 | ); 261 | 262 | // font-size 263 | $property-font-size: ( 264 | "0", 265 | "12", 266 | "14", 267 | "16", 268 | "18", 269 | "20", 270 | "22", 271 | "24", 272 | "26", 273 | "28", 274 | "30", 275 | "32", 276 | ); 277 | $selector-font-size: ( 278 | "cl": "not-breakpoint-class", 279 | ); 280 | 281 | // text-align 282 | $property-text-align: ( 283 | "tal": "left", 284 | "tar": "right", 285 | "tac": "center", 286 | "taj": "justify", 287 | ); 288 | $selector-text-align: ( 289 | "cl": "breakpoint-class", 290 | ); 291 | 292 | // letter-spacing 293 | $property-letter-spacing: ( 294 | "1", 295 | "2", 296 | ); 297 | $selector-letter-spacing: ( 298 | "cl": "not-breakpoint-class" 299 | ); 300 | 301 | // font-weight 302 | $property-font-weight: ( 303 | "200", 304 | "300", 305 | "400", 306 | "500", 307 | "600", 308 | "700", 309 | "800", 310 | "900", 311 | ); 312 | $selector-font-weight: ( 313 | "cl": "not-breakpoint-class" 314 | ); 315 | 316 | // font-style 317 | $property-font-style: ( 318 | "fsi": "italic", 319 | ); 320 | $selector-font-style: ( 321 | "cl": "not-breakpoint-class", 322 | ); 323 | 324 | // vertical-align 325 | $property-vertical-align: ( 326 | "vat": "top", 327 | "vam": "middle", 328 | "vab": "bottom", 329 | ); 330 | $selector-vertical-align: ( 331 | "cl": "not-breakpoint-class" 332 | ); 333 | 334 | // text-transform 335 | $property-text-transform: ( 336 | "ttu": "uppercase", 337 | "ttl": "lowercase", 338 | "ttc": "capitalize", 339 | ); 340 | $selector-text-transform: ( 341 | "cl": "not-breakpoint-class", 342 | ); 343 | 344 | // text-decoration 345 | $property-text-decoration: ( 346 | "tdu": "underline", 347 | "tdlt": "line-through", 348 | ); 349 | $selector-text-decoration: ( 350 | "cl": "not-breakpoint-class", 351 | "ho": "hover", 352 | ); 353 | 354 | // text-overflow 355 | $property-text-overflow: ( 356 | "toe": "ellipsis", 357 | ); 358 | $selector-text-overflow: ( 359 | "cl": "not-breakpoint-class", 360 | ); 361 | 362 | // white-space 363 | $property-white-space: ( 364 | "wsnw": "nowrap", 365 | "wspw": "pre-wrap", 366 | ); 367 | $selector-white-space: ( 368 | "cl": "not-breakpoint-class", 369 | ); 370 | 371 | // word-break 372 | $property-word-break: ( 373 | "wbbw": "break-word", 374 | "wbba": "break-all", 375 | ); 376 | $selector-word-break: ( 377 | "cl": "not-breakpoint-class", 378 | ); 379 | 380 | // cursor 381 | $property-cursor: ( 382 | "ca": "auto", 383 | "cd": "default", 384 | "cp": "pointer", 385 | "ct": "text", 386 | "cn": "not-allowed", 387 | ); 388 | $selector-cursor: ( 389 | "cl": "not-breakpoint-class", 390 | ); 391 | 392 | // user-select 393 | $property-user-select: ( 394 | "usn": "none", 395 | "ust": "text", 396 | "usa": "all", 397 | ); 398 | $selector-user-select: ( 399 | "cl": "not-breakpoint-class", 400 | ); 401 | 402 | // pointer-events 403 | $property-pointer-events: ( 404 | "pen": "none", 405 | "pea": "auto", 406 | ); 407 | $selector-pointer-events: ( 408 | "cl": "not-breakpoint-class", 409 | ); 410 | -------------------------------------------------------------------------------- /pixelperfectcss.min.css: -------------------------------------------------------------------------------- 1 | /*! Pixel Perfect CSS 1.0.5 | Settings | Scss | MIT License | dnomak.com/pixelperfectcss *//*! Pixel Perfect CSS 1.0.5 | Scss | MIT License | dnomak.com/pixelperfectcss */.xl-co-white{color:#FFFFFF}.xl-ba-white{background-color:#FFFFFF}.xl-bo-white{border-color:#FFFFFF}.xl-co-gray-100{color:#F5F5F5}.xl-ba-gray-100{background-color:#F5F5F5}.xl-bo-gray-100{border-color:#F5F5F5}.xl-co-gray-200{color:#E8E8E8}.xl-ba-gray-200{background-color:#E8E8E8}.xl-bo-gray-200{border-color:#E8E8E8}.xl-co-gray-300{color:#D8D8D8}.xl-ba-gray-300{background-color:#D8D8D8}.xl-bo-gray-300{border-color:#D8D8D8}.xl-co-gray-400{color:#B1B1B1}.xl-ba-gray-400{background-color:#B1B1B1}.xl-bo-gray-400{border-color:#B1B1B1}.xl-co-gray-500{color:#A1A1A1}.xl-ba-gray-500{background-color:#A1A1A1}.xl-bo-gray-500{border-color:#A1A1A1}.xl-co-red-100{color:#FCA9B6}.xl-ba-red-100{background-color:#FCA9B6}.xl-bo-red-100{border-color:#FCA9B6}.xl-co-red-200{color:#F9536D}.xl-ba-red-200{background-color:#F9536D}.xl-bo-red-200{border-color:#F9536D}.xl-co-red-300{color:#F72848}.xl-ba-red-300{background-color:#F72848}.xl-bo-red-300{border-color:#F72848}.xl-co-red-400{color:#C6203A}.xl-ba-red-400{background-color:#C6203A}.xl-bo-red-400{border-color:#C6203A}.xl-co-red-500{color:#94182B}.xl-ba-red-500{background-color:#94182B}.xl-bo-red-500{border-color:#94182B}.xl-co-green-100{color:#A0EEC3}.xl-ba-green-100{background-color:#A0EEC3}.xl-bo-green-100{border-color:#A0EEC3}.xl-co-green-200{color:#41DD87}.xl-ba-green-200{background-color:#41DD87}.xl-bo-green-200{border-color:#41DD87}.xl-co-green-300{color:#12D469}.xl-ba-green-300{background-color:#12D469}.xl-bo-green-300{border-color:#12D469}.xl-co-green-400{color:#0EAA54}.xl-ba-green-400{background-color:#0EAA54}.xl-bo-green-400{border-color:#0EAA54}.xl-co-green-500{color:#0B7F3F}.xl-ba-green-500{background-color:#0B7F3F}.xl-bo-green-500{border-color:#0B7F3F}.xl-co-blue-100{color:#9FD4FB}.xl-ba-blue-100{background-color:#9FD4FB}.xl-bo-blue-100{border-color:#9FD4FB}.xl-co-blue-200{color:#40A9F8}.xl-ba-blue-200{background-color:#40A9F8}.xl-bo-blue-200{border-color:#40A9F8}.xl-co-blue-300{color:#1094F6}.xl-ba-blue-300{background-color:#1094F6}.xl-bo-blue-300{border-color:#1094F6}.xl-co-blue-400{color:#0D76C5}.xl-ba-blue-400{background-color:#0D76C5}.xl-bo-blue-400{border-color:#0D76C5}.xl-co-blue-500{color:#0A5994}.xl-ba-blue-500{background-color:#0A5994}.xl-bo-blue-500{border-color:#0A5994}.xl-co-purple-100{color:#D5B1E5}.xl-ba-purple-100{background-color:#D5B1E5}.xl-bo-purple-100{border-color:#D5B1E5}.xl-co-purple-200{color:#AC63CA}.xl-ba-purple-200{background-color:#AC63CA}.xl-bo-purple-200{border-color:#AC63CA}.xl-co-purple-300{color:#973CBD}.xl-ba-purple-300{background-color:#973CBD}.xl-bo-purple-300{border-color:#973CBD}.xl-co-purple-400{color:#793097}.xl-ba-purple-400{background-color:#793097}.xl-bo-purple-400{border-color:#793097}.xl-co-purple-500{color:#5B2471}.xl-ba-purple-500{background-color:#5B2471}.xl-bo-purple-500{border-color:#5B2471}.xl-co-yellow-100{color:#FFEB99}.xl-ba-yellow-100{background-color:#FFEB99}.xl-bo-yellow-100{border-color:#FFEB99}.xl-co-yellow-200{color:#FFD633}.xl-ba-yellow-200{background-color:#FFD633}.xl-bo-yellow-200{border-color:#FFD633}.xl-co-yellow-300{color:#FFCC00}.xl-ba-yellow-300{background-color:#FFCC00}.xl-bo-yellow-300{border-color:#FFCC00}.xl-co-yellow-400{color:#CCA300}.xl-ba-yellow-400{background-color:#CCA300}.xl-bo-yellow-400{border-color:#CCA300}.xl-co-yellow-500{color:#997A00}.xl-ba-yellow-500{background-color:#997A00}.xl-bo-yellow-500{border-color:#997A00}.xl-co-black-100{color:#666666}.xl-ba-black-100{background-color:#666666}.xl-bo-black-100{border-color:#666666}.xl-co-black-200{color:#555555}.xl-ba-black-200{background-color:#555555}.xl-bo-black-200{border-color:#555555}.xl-co-black-300{color:#444444}.xl-ba-black-300{background-color:#444444}.xl-bo-black-300{border-color:#444444}.xl-co-black-400{color:#333333}.xl-ba-black-400{background-color:#333333}.xl-bo-black-400{border-color:#333333}.xl-co-black-500{color:#222222}.xl-ba-black-500{background-color:#222222}.xl-bo-black-500{border-color:#222222}.ho-co-white:hover{color:#FFFFFF}.ho-ba-white:hover{background-color:#FFFFFF}.ho-bo-white:hover{border-color:#FFFFFF}.ho-co-gray-100:hover{color:#F5F5F5}.ho-ba-gray-100:hover{background-color:#F5F5F5}.ho-bo-gray-100:hover{border-color:#F5F5F5}.ho-co-gray-200:hover{color:#E8E8E8}.ho-ba-gray-200:hover{background-color:#E8E8E8}.ho-bo-gray-200:hover{border-color:#E8E8E8}.ho-co-gray-300:hover{color:#D8D8D8}.ho-ba-gray-300:hover{background-color:#D8D8D8}.ho-bo-gray-300:hover{border-color:#D8D8D8}.ho-co-gray-400:hover{color:#B1B1B1}.ho-ba-gray-400:hover{background-color:#B1B1B1}.ho-bo-gray-400:hover{border-color:#B1B1B1}.ho-co-gray-500:hover{color:#A1A1A1}.ho-ba-gray-500:hover{background-color:#A1A1A1}.ho-bo-gray-500:hover{border-color:#A1A1A1}.ho-co-red-100:hover{color:#FCA9B6}.ho-ba-red-100:hover{background-color:#FCA9B6}.ho-bo-red-100:hover{border-color:#FCA9B6}.ho-co-red-200:hover{color:#F9536D}.ho-ba-red-200:hover{background-color:#F9536D}.ho-bo-red-200:hover{border-color:#F9536D}.ho-co-red-300:hover{color:#F72848}.ho-ba-red-300:hover{background-color:#F72848}.ho-bo-red-300:hover{border-color:#F72848}.ho-co-red-400:hover{color:#C6203A}.ho-ba-red-400:hover{background-color:#C6203A}.ho-bo-red-400:hover{border-color:#C6203A}.ho-co-red-500:hover{color:#94182B}.ho-ba-red-500:hover{background-color:#94182B}.ho-bo-red-500:hover{border-color:#94182B}.ho-co-green-100:hover{color:#A0EEC3}.ho-ba-green-100:hover{background-color:#A0EEC3}.ho-bo-green-100:hover{border-color:#A0EEC3}.ho-co-green-200:hover{color:#41DD87}.ho-ba-green-200:hover{background-color:#41DD87}.ho-bo-green-200:hover{border-color:#41DD87}.ho-co-green-300:hover{color:#12D469}.ho-ba-green-300:hover{background-color:#12D469}.ho-bo-green-300:hover{border-color:#12D469}.ho-co-green-400:hover{color:#0EAA54}.ho-ba-green-400:hover{background-color:#0EAA54}.ho-bo-green-400:hover{border-color:#0EAA54}.ho-co-green-500:hover{color:#0B7F3F}.ho-ba-green-500:hover{background-color:#0B7F3F}.ho-bo-green-500:hover{border-color:#0B7F3F}.ho-co-blue-100:hover{color:#9FD4FB}.ho-ba-blue-100:hover{background-color:#9FD4FB}.ho-bo-blue-100:hover{border-color:#9FD4FB}.ho-co-blue-200:hover{color:#40A9F8}.ho-ba-blue-200:hover{background-color:#40A9F8}.ho-bo-blue-200:hover{border-color:#40A9F8}.ho-co-blue-300:hover{color:#1094F6}.ho-ba-blue-300:hover{background-color:#1094F6}.ho-bo-blue-300:hover{border-color:#1094F6}.ho-co-blue-400:hover{color:#0D76C5}.ho-ba-blue-400:hover{background-color:#0D76C5}.ho-bo-blue-400:hover{border-color:#0D76C5}.ho-co-blue-500:hover{color:#0A5994}.ho-ba-blue-500:hover{background-color:#0A5994}.ho-bo-blue-500:hover{border-color:#0A5994}.ho-co-purple-100:hover{color:#D5B1E5}.ho-ba-purple-100:hover{background-color:#D5B1E5}.ho-bo-purple-100:hover{border-color:#D5B1E5}.ho-co-purple-200:hover{color:#AC63CA}.ho-ba-purple-200:hover{background-color:#AC63CA}.ho-bo-purple-200:hover{border-color:#AC63CA}.ho-co-purple-300:hover{color:#973CBD}.ho-ba-purple-300:hover{background-color:#973CBD}.ho-bo-purple-300:hover{border-color:#973CBD}.ho-co-purple-400:hover{color:#793097}.ho-ba-purple-400:hover{background-color:#793097}.ho-bo-purple-400:hover{border-color:#793097}.ho-co-purple-500:hover{color:#5B2471}.ho-ba-purple-500:hover{background-color:#5B2471}.ho-bo-purple-500:hover{border-color:#5B2471}.ho-co-yellow-100:hover{color:#FFEB99}.ho-ba-yellow-100:hover{background-color:#FFEB99}.ho-bo-yellow-100:hover{border-color:#FFEB99}.ho-co-yellow-200:hover{color:#FFD633}.ho-ba-yellow-200:hover{background-color:#FFD633}.ho-bo-yellow-200:hover{border-color:#FFD633}.ho-co-yellow-300:hover{color:#FFCC00}.ho-ba-yellow-300:hover{background-color:#FFCC00}.ho-bo-yellow-300:hover{border-color:#FFCC00}.ho-co-yellow-400:hover{color:#CCA300}.ho-ba-yellow-400:hover{background-color:#CCA300}.ho-bo-yellow-400:hover{border-color:#CCA300}.ho-co-yellow-500:hover{color:#997A00}.ho-ba-yellow-500:hover{background-color:#997A00}.ho-bo-yellow-500:hover{border-color:#997A00}.ho-co-black-100:hover{color:#666666}.ho-ba-black-100:hover{background-color:#666666}.ho-bo-black-100:hover{border-color:#666666}.ho-co-black-200:hover{color:#555555}.ho-ba-black-200:hover{background-color:#555555}.ho-bo-black-200:hover{border-color:#555555}.ho-co-black-300:hover{color:#444444}.ho-ba-black-300:hover{background-color:#444444}.ho-bo-black-300:hover{border-color:#444444}.ho-co-black-400:hover{color:#333333}.ho-ba-black-400:hover{background-color:#333333}.ho-bo-black-400:hover{border-color:#333333}.ho-co-black-500:hover{color:#222222}.ho-ba-black-500:hover{background-color:#222222}.ho-bo-black-500:hover{border-color:#222222}.fo-co-white:focus{color:#FFFFFF}.fo-ba-white:focus{background-color:#FFFFFF}.fo-bo-white:focus{border-color:#FFFFFF}.fo-co-gray-100:focus{color:#F5F5F5}.fo-ba-gray-100:focus{background-color:#F5F5F5}.fo-bo-gray-100:focus{border-color:#F5F5F5}.fo-co-gray-200:focus{color:#E8E8E8}.fo-ba-gray-200:focus{background-color:#E8E8E8}.fo-bo-gray-200:focus{border-color:#E8E8E8}.fo-co-gray-300:focus{color:#D8D8D8}.fo-ba-gray-300:focus{background-color:#D8D8D8}.fo-bo-gray-300:focus{border-color:#D8D8D8}.fo-co-gray-400:focus{color:#B1B1B1}.fo-ba-gray-400:focus{background-color:#B1B1B1}.fo-bo-gray-400:focus{border-color:#B1B1B1}.fo-co-gray-500:focus{color:#A1A1A1}.fo-ba-gray-500:focus{background-color:#A1A1A1}.fo-bo-gray-500:focus{border-color:#A1A1A1}.fo-co-red-100:focus{color:#FCA9B6}.fo-ba-red-100:focus{background-color:#FCA9B6}.fo-bo-red-100:focus{border-color:#FCA9B6}.fo-co-red-200:focus{color:#F9536D}.fo-ba-red-200:focus{background-color:#F9536D}.fo-bo-red-200:focus{border-color:#F9536D}.fo-co-red-300:focus{color:#F72848}.fo-ba-red-300:focus{background-color:#F72848}.fo-bo-red-300:focus{border-color:#F72848}.fo-co-red-400:focus{color:#C6203A}.fo-ba-red-400:focus{background-color:#C6203A}.fo-bo-red-400:focus{border-color:#C6203A}.fo-co-red-500:focus{color:#94182B}.fo-ba-red-500:focus{background-color:#94182B}.fo-bo-red-500:focus{border-color:#94182B}.fo-co-green-100:focus{color:#A0EEC3}.fo-ba-green-100:focus{background-color:#A0EEC3}.fo-bo-green-100:focus{border-color:#A0EEC3}.fo-co-green-200:focus{color:#41DD87}.fo-ba-green-200:focus{background-color:#41DD87}.fo-bo-green-200:focus{border-color:#41DD87}.fo-co-green-300:focus{color:#12D469}.fo-ba-green-300:focus{background-color:#12D469}.fo-bo-green-300:focus{border-color:#12D469}.fo-co-green-400:focus{color:#0EAA54}.fo-ba-green-400:focus{background-color:#0EAA54}.fo-bo-green-400:focus{border-color:#0EAA54}.fo-co-green-500:focus{color:#0B7F3F}.fo-ba-green-500:focus{background-color:#0B7F3F}.fo-bo-green-500:focus{border-color:#0B7F3F}.fo-co-blue-100:focus{color:#9FD4FB}.fo-ba-blue-100:focus{background-color:#9FD4FB}.fo-bo-blue-100:focus{border-color:#9FD4FB}.fo-co-blue-200:focus{color:#40A9F8}.fo-ba-blue-200:focus{background-color:#40A9F8}.fo-bo-blue-200:focus{border-color:#40A9F8}.fo-co-blue-300:focus{color:#1094F6}.fo-ba-blue-300:focus{background-color:#1094F6}.fo-bo-blue-300:focus{border-color:#1094F6}.fo-co-blue-400:focus{color:#0D76C5}.fo-ba-blue-400:focus{background-color:#0D76C5}.fo-bo-blue-400:focus{border-color:#0D76C5}.fo-co-blue-500:focus{color:#0A5994}.fo-ba-blue-500:focus{background-color:#0A5994}.fo-bo-blue-500:focus{border-color:#0A5994}.fo-co-purple-100:focus{color:#D5B1E5}.fo-ba-purple-100:focus{background-color:#D5B1E5}.fo-bo-purple-100:focus{border-color:#D5B1E5}.fo-co-purple-200:focus{color:#AC63CA}.fo-ba-purple-200:focus{background-color:#AC63CA}.fo-bo-purple-200:focus{border-color:#AC63CA}.fo-co-purple-300:focus{color:#973CBD}.fo-ba-purple-300:focus{background-color:#973CBD}.fo-bo-purple-300:focus{border-color:#973CBD}.fo-co-purple-400:focus{color:#793097}.fo-ba-purple-400:focus{background-color:#793097}.fo-bo-purple-400:focus{border-color:#793097}.fo-co-purple-500:focus{color:#5B2471}.fo-ba-purple-500:focus{background-color:#5B2471}.fo-bo-purple-500:focus{border-color:#5B2471}.fo-co-yellow-100:focus{color:#FFEB99}.fo-ba-yellow-100:focus{background-color:#FFEB99}.fo-bo-yellow-100:focus{border-color:#FFEB99}.fo-co-yellow-200:focus{color:#FFD633}.fo-ba-yellow-200:focus{background-color:#FFD633}.fo-bo-yellow-200:focus{border-color:#FFD633}.fo-co-yellow-300:focus{color:#FFCC00}.fo-ba-yellow-300:focus{background-color:#FFCC00}.fo-bo-yellow-300:focus{border-color:#FFCC00}.fo-co-yellow-400:focus{color:#CCA300}.fo-ba-yellow-400:focus{background-color:#CCA300}.fo-bo-yellow-400:focus{border-color:#CCA300}.fo-co-yellow-500:focus{color:#997A00}.fo-ba-yellow-500:focus{background-color:#997A00}.fo-bo-yellow-500:focus{border-color:#997A00}.fo-co-black-100:focus{color:#666666}.fo-ba-black-100:focus{background-color:#666666}.fo-bo-black-100:focus{border-color:#666666}.fo-co-black-200:focus{color:#555555}.fo-ba-black-200:focus{background-color:#555555}.fo-bo-black-200:focus{border-color:#555555}.fo-co-black-300:focus{color:#444444}.fo-ba-black-300:focus{background-color:#444444}.fo-bo-black-300:focus{border-color:#444444}.fo-co-black-400:focus{color:#333333}.fo-ba-black-400:focus{background-color:#333333}.fo-bo-black-400:focus{border-color:#333333}.fo-co-black-500:focus{color:#222222}.fo-ba-black-500:focus{background-color:#222222}.fo-bo-black-500:focus{border-color:#222222}.ac-co-white:active{color:#FFFFFF}.ac-ba-white:active{background-color:#FFFFFF}.ac-bo-white:active{border-color:#FFFFFF}.ac-co-gray-100:active{color:#F5F5F5}.ac-ba-gray-100:active{background-color:#F5F5F5}.ac-bo-gray-100:active{border-color:#F5F5F5}.ac-co-gray-200:active{color:#E8E8E8}.ac-ba-gray-200:active{background-color:#E8E8E8}.ac-bo-gray-200:active{border-color:#E8E8E8}.ac-co-gray-300:active{color:#D8D8D8}.ac-ba-gray-300:active{background-color:#D8D8D8}.ac-bo-gray-300:active{border-color:#D8D8D8}.ac-co-gray-400:active{color:#B1B1B1}.ac-ba-gray-400:active{background-color:#B1B1B1}.ac-bo-gray-400:active{border-color:#B1B1B1}.ac-co-gray-500:active{color:#A1A1A1}.ac-ba-gray-500:active{background-color:#A1A1A1}.ac-bo-gray-500:active{border-color:#A1A1A1}.ac-co-red-100:active{color:#FCA9B6}.ac-ba-red-100:active{background-color:#FCA9B6}.ac-bo-red-100:active{border-color:#FCA9B6}.ac-co-red-200:active{color:#F9536D}.ac-ba-red-200:active{background-color:#F9536D}.ac-bo-red-200:active{border-color:#F9536D}.ac-co-red-300:active{color:#F72848}.ac-ba-red-300:active{background-color:#F72848}.ac-bo-red-300:active{border-color:#F72848}.ac-co-red-400:active{color:#C6203A}.ac-ba-red-400:active{background-color:#C6203A}.ac-bo-red-400:active{border-color:#C6203A}.ac-co-red-500:active{color:#94182B}.ac-ba-red-500:active{background-color:#94182B}.ac-bo-red-500:active{border-color:#94182B}.ac-co-green-100:active{color:#A0EEC3}.ac-ba-green-100:active{background-color:#A0EEC3}.ac-bo-green-100:active{border-color:#A0EEC3}.ac-co-green-200:active{color:#41DD87}.ac-ba-green-200:active{background-color:#41DD87}.ac-bo-green-200:active{border-color:#41DD87}.ac-co-green-300:active{color:#12D469}.ac-ba-green-300:active{background-color:#12D469}.ac-bo-green-300:active{border-color:#12D469}.ac-co-green-400:active{color:#0EAA54}.ac-ba-green-400:active{background-color:#0EAA54}.ac-bo-green-400:active{border-color:#0EAA54}.ac-co-green-500:active{color:#0B7F3F}.ac-ba-green-500:active{background-color:#0B7F3F}.ac-bo-green-500:active{border-color:#0B7F3F}.ac-co-blue-100:active{color:#9FD4FB}.ac-ba-blue-100:active{background-color:#9FD4FB}.ac-bo-blue-100:active{border-color:#9FD4FB}.ac-co-blue-200:active{color:#40A9F8}.ac-ba-blue-200:active{background-color:#40A9F8}.ac-bo-blue-200:active{border-color:#40A9F8}.ac-co-blue-300:active{color:#1094F6}.ac-ba-blue-300:active{background-color:#1094F6}.ac-bo-blue-300:active{border-color:#1094F6}.ac-co-blue-400:active{color:#0D76C5}.ac-ba-blue-400:active{background-color:#0D76C5}.ac-bo-blue-400:active{border-color:#0D76C5}.ac-co-blue-500:active{color:#0A5994}.ac-ba-blue-500:active{background-color:#0A5994}.ac-bo-blue-500:active{border-color:#0A5994}.ac-co-purple-100:active{color:#D5B1E5}.ac-ba-purple-100:active{background-color:#D5B1E5}.ac-bo-purple-100:active{border-color:#D5B1E5}.ac-co-purple-200:active{color:#AC63CA}.ac-ba-purple-200:active{background-color:#AC63CA}.ac-bo-purple-200:active{border-color:#AC63CA}.ac-co-purple-300:active{color:#973CBD}.ac-ba-purple-300:active{background-color:#973CBD}.ac-bo-purple-300:active{border-color:#973CBD}.ac-co-purple-400:active{color:#793097}.ac-ba-purple-400:active{background-color:#793097}.ac-bo-purple-400:active{border-color:#793097}.ac-co-purple-500:active{color:#5B2471}.ac-ba-purple-500:active{background-color:#5B2471}.ac-bo-purple-500:active{border-color:#5B2471}.ac-co-yellow-100:active{color:#FFEB99}.ac-ba-yellow-100:active{background-color:#FFEB99}.ac-bo-yellow-100:active{border-color:#FFEB99}.ac-co-yellow-200:active{color:#FFD633}.ac-ba-yellow-200:active{background-color:#FFD633}.ac-bo-yellow-200:active{border-color:#FFD633}.ac-co-yellow-300:active{color:#FFCC00}.ac-ba-yellow-300:active{background-color:#FFCC00}.ac-bo-yellow-300:active{border-color:#FFCC00}.ac-co-yellow-400:active{color:#CCA300}.ac-ba-yellow-400:active{background-color:#CCA300}.ac-bo-yellow-400:active{border-color:#CCA300}.ac-co-yellow-500:active{color:#997A00}.ac-ba-yellow-500:active{background-color:#997A00}.ac-bo-yellow-500:active{border-color:#997A00}.ac-co-black-100:active{color:#666666}.ac-ba-black-100:active{background-color:#666666}.ac-bo-black-100:active{border-color:#666666}.ac-co-black-200:active{color:#555555}.ac-ba-black-200:active{background-color:#555555}.ac-bo-black-200:active{border-color:#555555}.ac-co-black-300:active{color:#444444}.ac-ba-black-300:active{background-color:#444444}.ac-bo-black-300:active{border-color:#444444}.ac-co-black-400:active{color:#333333}.ac-ba-black-400:active{background-color:#333333}.ac-bo-black-400:active{border-color:#333333}.ac-co-black-500:active{color:#222222}.ac-ba-black-500:active{background-color:#222222}.ac-bo-black-500:active{border-color:#222222}.pl-co-white::-webkit-input-placeholder{color:#FFFFFF}.pl-co-white::-moz-placeholder{color:#FFFFFF}.pl-co-white:-ms-input-placeholder{color:#FFFFFF}.pl-co-white:-moz-placeholder{color:#FFFFFF}.pl-ba-white::-webkit-input-placeholder{background-color:#FFFFFF}.pl-ba-white::-moz-placeholder{background-color:#FFFFFF}.pl-ba-white:-ms-input-placeholder{background-color:#FFFFFF}.pl-ba-white:-moz-placeholder{background-color:#FFFFFF}.pl-bo-white::-webkit-input-placeholder{border-color:#FFFFFF}.pl-bo-white::-moz-placeholder{border-color:#FFFFFF}.pl-bo-white:-ms-input-placeholder{border-color:#FFFFFF}.pl-bo-white:-moz-placeholder{border-color:#FFFFFF}.pl-co-gray-100::-webkit-input-placeholder{color:#F5F5F5}.pl-co-gray-100::-moz-placeholder{color:#F5F5F5}.pl-co-gray-100:-ms-input-placeholder{color:#F5F5F5}.pl-co-gray-100:-moz-placeholder{color:#F5F5F5}.pl-ba-gray-100::-webkit-input-placeholder{background-color:#F5F5F5}.pl-ba-gray-100::-moz-placeholder{background-color:#F5F5F5}.pl-ba-gray-100:-ms-input-placeholder{background-color:#F5F5F5}.pl-ba-gray-100:-moz-placeholder{background-color:#F5F5F5}.pl-bo-gray-100::-webkit-input-placeholder{border-color:#F5F5F5}.pl-bo-gray-100::-moz-placeholder{border-color:#F5F5F5}.pl-bo-gray-100:-ms-input-placeholder{border-color:#F5F5F5}.pl-bo-gray-100:-moz-placeholder{border-color:#F5F5F5}.pl-co-gray-200::-webkit-input-placeholder{color:#E8E8E8}.pl-co-gray-200::-moz-placeholder{color:#E8E8E8}.pl-co-gray-200:-ms-input-placeholder{color:#E8E8E8}.pl-co-gray-200:-moz-placeholder{color:#E8E8E8}.pl-ba-gray-200::-webkit-input-placeholder{background-color:#E8E8E8}.pl-ba-gray-200::-moz-placeholder{background-color:#E8E8E8}.pl-ba-gray-200:-ms-input-placeholder{background-color:#E8E8E8}.pl-ba-gray-200:-moz-placeholder{background-color:#E8E8E8}.pl-bo-gray-200::-webkit-input-placeholder{border-color:#E8E8E8}.pl-bo-gray-200::-moz-placeholder{border-color:#E8E8E8}.pl-bo-gray-200:-ms-input-placeholder{border-color:#E8E8E8}.pl-bo-gray-200:-moz-placeholder{border-color:#E8E8E8}.pl-co-gray-300::-webkit-input-placeholder{color:#D8D8D8}.pl-co-gray-300::-moz-placeholder{color:#D8D8D8}.pl-co-gray-300:-ms-input-placeholder{color:#D8D8D8}.pl-co-gray-300:-moz-placeholder{color:#D8D8D8}.pl-ba-gray-300::-webkit-input-placeholder{background-color:#D8D8D8}.pl-ba-gray-300::-moz-placeholder{background-color:#D8D8D8}.pl-ba-gray-300:-ms-input-placeholder{background-color:#D8D8D8}.pl-ba-gray-300:-moz-placeholder{background-color:#D8D8D8}.pl-bo-gray-300::-webkit-input-placeholder{border-color:#D8D8D8}.pl-bo-gray-300::-moz-placeholder{border-color:#D8D8D8}.pl-bo-gray-300:-ms-input-placeholder{border-color:#D8D8D8}.pl-bo-gray-300:-moz-placeholder{border-color:#D8D8D8}.pl-co-gray-400::-webkit-input-placeholder{color:#B1B1B1}.pl-co-gray-400::-moz-placeholder{color:#B1B1B1}.pl-co-gray-400:-ms-input-placeholder{color:#B1B1B1}.pl-co-gray-400:-moz-placeholder{color:#B1B1B1}.pl-ba-gray-400::-webkit-input-placeholder{background-color:#B1B1B1}.pl-ba-gray-400::-moz-placeholder{background-color:#B1B1B1}.pl-ba-gray-400:-ms-input-placeholder{background-color:#B1B1B1}.pl-ba-gray-400:-moz-placeholder{background-color:#B1B1B1}.pl-bo-gray-400::-webkit-input-placeholder{border-color:#B1B1B1}.pl-bo-gray-400::-moz-placeholder{border-color:#B1B1B1}.pl-bo-gray-400:-ms-input-placeholder{border-color:#B1B1B1}.pl-bo-gray-400:-moz-placeholder{border-color:#B1B1B1}.pl-co-gray-500::-webkit-input-placeholder{color:#A1A1A1}.pl-co-gray-500::-moz-placeholder{color:#A1A1A1}.pl-co-gray-500:-ms-input-placeholder{color:#A1A1A1}.pl-co-gray-500:-moz-placeholder{color:#A1A1A1}.pl-ba-gray-500::-webkit-input-placeholder{background-color:#A1A1A1}.pl-ba-gray-500::-moz-placeholder{background-color:#A1A1A1}.pl-ba-gray-500:-ms-input-placeholder{background-color:#A1A1A1}.pl-ba-gray-500:-moz-placeholder{background-color:#A1A1A1}.pl-bo-gray-500::-webkit-input-placeholder{border-color:#A1A1A1}.pl-bo-gray-500::-moz-placeholder{border-color:#A1A1A1}.pl-bo-gray-500:-ms-input-placeholder{border-color:#A1A1A1}.pl-bo-gray-500:-moz-placeholder{border-color:#A1A1A1}.pl-co-red-100::-webkit-input-placeholder{color:#FCA9B6}.pl-co-red-100::-moz-placeholder{color:#FCA9B6}.pl-co-red-100:-ms-input-placeholder{color:#FCA9B6}.pl-co-red-100:-moz-placeholder{color:#FCA9B6}.pl-ba-red-100::-webkit-input-placeholder{background-color:#FCA9B6}.pl-ba-red-100::-moz-placeholder{background-color:#FCA9B6}.pl-ba-red-100:-ms-input-placeholder{background-color:#FCA9B6}.pl-ba-red-100:-moz-placeholder{background-color:#FCA9B6}.pl-bo-red-100::-webkit-input-placeholder{border-color:#FCA9B6}.pl-bo-red-100::-moz-placeholder{border-color:#FCA9B6}.pl-bo-red-100:-ms-input-placeholder{border-color:#FCA9B6}.pl-bo-red-100:-moz-placeholder{border-color:#FCA9B6}.pl-co-red-200::-webkit-input-placeholder{color:#F9536D}.pl-co-red-200::-moz-placeholder{color:#F9536D}.pl-co-red-200:-ms-input-placeholder{color:#F9536D}.pl-co-red-200:-moz-placeholder{color:#F9536D}.pl-ba-red-200::-webkit-input-placeholder{background-color:#F9536D}.pl-ba-red-200::-moz-placeholder{background-color:#F9536D}.pl-ba-red-200:-ms-input-placeholder{background-color:#F9536D}.pl-ba-red-200:-moz-placeholder{background-color:#F9536D}.pl-bo-red-200::-webkit-input-placeholder{border-color:#F9536D}.pl-bo-red-200::-moz-placeholder{border-color:#F9536D}.pl-bo-red-200:-ms-input-placeholder{border-color:#F9536D}.pl-bo-red-200:-moz-placeholder{border-color:#F9536D}.pl-co-red-300::-webkit-input-placeholder{color:#F72848}.pl-co-red-300::-moz-placeholder{color:#F72848}.pl-co-red-300:-ms-input-placeholder{color:#F72848}.pl-co-red-300:-moz-placeholder{color:#F72848}.pl-ba-red-300::-webkit-input-placeholder{background-color:#F72848}.pl-ba-red-300::-moz-placeholder{background-color:#F72848}.pl-ba-red-300:-ms-input-placeholder{background-color:#F72848}.pl-ba-red-300:-moz-placeholder{background-color:#F72848}.pl-bo-red-300::-webkit-input-placeholder{border-color:#F72848}.pl-bo-red-300::-moz-placeholder{border-color:#F72848}.pl-bo-red-300:-ms-input-placeholder{border-color:#F72848}.pl-bo-red-300:-moz-placeholder{border-color:#F72848}.pl-co-red-400::-webkit-input-placeholder{color:#C6203A}.pl-co-red-400::-moz-placeholder{color:#C6203A}.pl-co-red-400:-ms-input-placeholder{color:#C6203A}.pl-co-red-400:-moz-placeholder{color:#C6203A}.pl-ba-red-400::-webkit-input-placeholder{background-color:#C6203A}.pl-ba-red-400::-moz-placeholder{background-color:#C6203A}.pl-ba-red-400:-ms-input-placeholder{background-color:#C6203A}.pl-ba-red-400:-moz-placeholder{background-color:#C6203A}.pl-bo-red-400::-webkit-input-placeholder{border-color:#C6203A}.pl-bo-red-400::-moz-placeholder{border-color:#C6203A}.pl-bo-red-400:-ms-input-placeholder{border-color:#C6203A}.pl-bo-red-400:-moz-placeholder{border-color:#C6203A}.pl-co-red-500::-webkit-input-placeholder{color:#94182B}.pl-co-red-500::-moz-placeholder{color:#94182B}.pl-co-red-500:-ms-input-placeholder{color:#94182B}.pl-co-red-500:-moz-placeholder{color:#94182B}.pl-ba-red-500::-webkit-input-placeholder{background-color:#94182B}.pl-ba-red-500::-moz-placeholder{background-color:#94182B}.pl-ba-red-500:-ms-input-placeholder{background-color:#94182B}.pl-ba-red-500:-moz-placeholder{background-color:#94182B}.pl-bo-red-500::-webkit-input-placeholder{border-color:#94182B}.pl-bo-red-500::-moz-placeholder{border-color:#94182B}.pl-bo-red-500:-ms-input-placeholder{border-color:#94182B}.pl-bo-red-500:-moz-placeholder{border-color:#94182B}.pl-co-green-100::-webkit-input-placeholder{color:#A0EEC3}.pl-co-green-100::-moz-placeholder{color:#A0EEC3}.pl-co-green-100:-ms-input-placeholder{color:#A0EEC3}.pl-co-green-100:-moz-placeholder{color:#A0EEC3}.pl-ba-green-100::-webkit-input-placeholder{background-color:#A0EEC3}.pl-ba-green-100::-moz-placeholder{background-color:#A0EEC3}.pl-ba-green-100:-ms-input-placeholder{background-color:#A0EEC3}.pl-ba-green-100:-moz-placeholder{background-color:#A0EEC3}.pl-bo-green-100::-webkit-input-placeholder{border-color:#A0EEC3}.pl-bo-green-100::-moz-placeholder{border-color:#A0EEC3}.pl-bo-green-100:-ms-input-placeholder{border-color:#A0EEC3}.pl-bo-green-100:-moz-placeholder{border-color:#A0EEC3}.pl-co-green-200::-webkit-input-placeholder{color:#41DD87}.pl-co-green-200::-moz-placeholder{color:#41DD87}.pl-co-green-200:-ms-input-placeholder{color:#41DD87}.pl-co-green-200:-moz-placeholder{color:#41DD87}.pl-ba-green-200::-webkit-input-placeholder{background-color:#41DD87}.pl-ba-green-200::-moz-placeholder{background-color:#41DD87}.pl-ba-green-200:-ms-input-placeholder{background-color:#41DD87}.pl-ba-green-200:-moz-placeholder{background-color:#41DD87}.pl-bo-green-200::-webkit-input-placeholder{border-color:#41DD87}.pl-bo-green-200::-moz-placeholder{border-color:#41DD87}.pl-bo-green-200:-ms-input-placeholder{border-color:#41DD87}.pl-bo-green-200:-moz-placeholder{border-color:#41DD87}.pl-co-green-300::-webkit-input-placeholder{color:#12D469}.pl-co-green-300::-moz-placeholder{color:#12D469}.pl-co-green-300:-ms-input-placeholder{color:#12D469}.pl-co-green-300:-moz-placeholder{color:#12D469}.pl-ba-green-300::-webkit-input-placeholder{background-color:#12D469}.pl-ba-green-300::-moz-placeholder{background-color:#12D469}.pl-ba-green-300:-ms-input-placeholder{background-color:#12D469}.pl-ba-green-300:-moz-placeholder{background-color:#12D469}.pl-bo-green-300::-webkit-input-placeholder{border-color:#12D469}.pl-bo-green-300::-moz-placeholder{border-color:#12D469}.pl-bo-green-300:-ms-input-placeholder{border-color:#12D469}.pl-bo-green-300:-moz-placeholder{border-color:#12D469}.pl-co-green-400::-webkit-input-placeholder{color:#0EAA54}.pl-co-green-400::-moz-placeholder{color:#0EAA54}.pl-co-green-400:-ms-input-placeholder{color:#0EAA54}.pl-co-green-400:-moz-placeholder{color:#0EAA54}.pl-ba-green-400::-webkit-input-placeholder{background-color:#0EAA54}.pl-ba-green-400::-moz-placeholder{background-color:#0EAA54}.pl-ba-green-400:-ms-input-placeholder{background-color:#0EAA54}.pl-ba-green-400:-moz-placeholder{background-color:#0EAA54}.pl-bo-green-400::-webkit-input-placeholder{border-color:#0EAA54}.pl-bo-green-400::-moz-placeholder{border-color:#0EAA54}.pl-bo-green-400:-ms-input-placeholder{border-color:#0EAA54}.pl-bo-green-400:-moz-placeholder{border-color:#0EAA54}.pl-co-green-500::-webkit-input-placeholder{color:#0B7F3F}.pl-co-green-500::-moz-placeholder{color:#0B7F3F}.pl-co-green-500:-ms-input-placeholder{color:#0B7F3F}.pl-co-green-500:-moz-placeholder{color:#0B7F3F}.pl-ba-green-500::-webkit-input-placeholder{background-color:#0B7F3F}.pl-ba-green-500::-moz-placeholder{background-color:#0B7F3F}.pl-ba-green-500:-ms-input-placeholder{background-color:#0B7F3F}.pl-ba-green-500:-moz-placeholder{background-color:#0B7F3F}.pl-bo-green-500::-webkit-input-placeholder{border-color:#0B7F3F}.pl-bo-green-500::-moz-placeholder{border-color:#0B7F3F}.pl-bo-green-500:-ms-input-placeholder{border-color:#0B7F3F}.pl-bo-green-500:-moz-placeholder{border-color:#0B7F3F}.pl-co-blue-100::-webkit-input-placeholder{color:#9FD4FB}.pl-co-blue-100::-moz-placeholder{color:#9FD4FB}.pl-co-blue-100:-ms-input-placeholder{color:#9FD4FB}.pl-co-blue-100:-moz-placeholder{color:#9FD4FB}.pl-ba-blue-100::-webkit-input-placeholder{background-color:#9FD4FB}.pl-ba-blue-100::-moz-placeholder{background-color:#9FD4FB}.pl-ba-blue-100:-ms-input-placeholder{background-color:#9FD4FB}.pl-ba-blue-100:-moz-placeholder{background-color:#9FD4FB}.pl-bo-blue-100::-webkit-input-placeholder{border-color:#9FD4FB}.pl-bo-blue-100::-moz-placeholder{border-color:#9FD4FB}.pl-bo-blue-100:-ms-input-placeholder{border-color:#9FD4FB}.pl-bo-blue-100:-moz-placeholder{border-color:#9FD4FB}.pl-co-blue-200::-webkit-input-placeholder{color:#40A9F8}.pl-co-blue-200::-moz-placeholder{color:#40A9F8}.pl-co-blue-200:-ms-input-placeholder{color:#40A9F8}.pl-co-blue-200:-moz-placeholder{color:#40A9F8}.pl-ba-blue-200::-webkit-input-placeholder{background-color:#40A9F8}.pl-ba-blue-200::-moz-placeholder{background-color:#40A9F8}.pl-ba-blue-200:-ms-input-placeholder{background-color:#40A9F8}.pl-ba-blue-200:-moz-placeholder{background-color:#40A9F8}.pl-bo-blue-200::-webkit-input-placeholder{border-color:#40A9F8}.pl-bo-blue-200::-moz-placeholder{border-color:#40A9F8}.pl-bo-blue-200:-ms-input-placeholder{border-color:#40A9F8}.pl-bo-blue-200:-moz-placeholder{border-color:#40A9F8}.pl-co-blue-300::-webkit-input-placeholder{color:#1094F6}.pl-co-blue-300::-moz-placeholder{color:#1094F6}.pl-co-blue-300:-ms-input-placeholder{color:#1094F6}.pl-co-blue-300:-moz-placeholder{color:#1094F6}.pl-ba-blue-300::-webkit-input-placeholder{background-color:#1094F6}.pl-ba-blue-300::-moz-placeholder{background-color:#1094F6}.pl-ba-blue-300:-ms-input-placeholder{background-color:#1094F6}.pl-ba-blue-300:-moz-placeholder{background-color:#1094F6}.pl-bo-blue-300::-webkit-input-placeholder{border-color:#1094F6}.pl-bo-blue-300::-moz-placeholder{border-color:#1094F6}.pl-bo-blue-300:-ms-input-placeholder{border-color:#1094F6}.pl-bo-blue-300:-moz-placeholder{border-color:#1094F6}.pl-co-blue-400::-webkit-input-placeholder{color:#0D76C5}.pl-co-blue-400::-moz-placeholder{color:#0D76C5}.pl-co-blue-400:-ms-input-placeholder{color:#0D76C5}.pl-co-blue-400:-moz-placeholder{color:#0D76C5}.pl-ba-blue-400::-webkit-input-placeholder{background-color:#0D76C5}.pl-ba-blue-400::-moz-placeholder{background-color:#0D76C5}.pl-ba-blue-400:-ms-input-placeholder{background-color:#0D76C5}.pl-ba-blue-400:-moz-placeholder{background-color:#0D76C5}.pl-bo-blue-400::-webkit-input-placeholder{border-color:#0D76C5}.pl-bo-blue-400::-moz-placeholder{border-color:#0D76C5}.pl-bo-blue-400:-ms-input-placeholder{border-color:#0D76C5}.pl-bo-blue-400:-moz-placeholder{border-color:#0D76C5}.pl-co-blue-500::-webkit-input-placeholder{color:#0A5994}.pl-co-blue-500::-moz-placeholder{color:#0A5994}.pl-co-blue-500:-ms-input-placeholder{color:#0A5994}.pl-co-blue-500:-moz-placeholder{color:#0A5994}.pl-ba-blue-500::-webkit-input-placeholder{background-color:#0A5994}.pl-ba-blue-500::-moz-placeholder{background-color:#0A5994}.pl-ba-blue-500:-ms-input-placeholder{background-color:#0A5994}.pl-ba-blue-500:-moz-placeholder{background-color:#0A5994}.pl-bo-blue-500::-webkit-input-placeholder{border-color:#0A5994}.pl-bo-blue-500::-moz-placeholder{border-color:#0A5994}.pl-bo-blue-500:-ms-input-placeholder{border-color:#0A5994}.pl-bo-blue-500:-moz-placeholder{border-color:#0A5994}.pl-co-purple-100::-webkit-input-placeholder{color:#D5B1E5}.pl-co-purple-100::-moz-placeholder{color:#D5B1E5}.pl-co-purple-100:-ms-input-placeholder{color:#D5B1E5}.pl-co-purple-100:-moz-placeholder{color:#D5B1E5}.pl-ba-purple-100::-webkit-input-placeholder{background-color:#D5B1E5}.pl-ba-purple-100::-moz-placeholder{background-color:#D5B1E5}.pl-ba-purple-100:-ms-input-placeholder{background-color:#D5B1E5}.pl-ba-purple-100:-moz-placeholder{background-color:#D5B1E5}.pl-bo-purple-100::-webkit-input-placeholder{border-color:#D5B1E5}.pl-bo-purple-100::-moz-placeholder{border-color:#D5B1E5}.pl-bo-purple-100:-ms-input-placeholder{border-color:#D5B1E5}.pl-bo-purple-100:-moz-placeholder{border-color:#D5B1E5}.pl-co-purple-200::-webkit-input-placeholder{color:#AC63CA}.pl-co-purple-200::-moz-placeholder{color:#AC63CA}.pl-co-purple-200:-ms-input-placeholder{color:#AC63CA}.pl-co-purple-200:-moz-placeholder{color:#AC63CA}.pl-ba-purple-200::-webkit-input-placeholder{background-color:#AC63CA}.pl-ba-purple-200::-moz-placeholder{background-color:#AC63CA}.pl-ba-purple-200:-ms-input-placeholder{background-color:#AC63CA}.pl-ba-purple-200:-moz-placeholder{background-color:#AC63CA}.pl-bo-purple-200::-webkit-input-placeholder{border-color:#AC63CA}.pl-bo-purple-200::-moz-placeholder{border-color:#AC63CA}.pl-bo-purple-200:-ms-input-placeholder{border-color:#AC63CA}.pl-bo-purple-200:-moz-placeholder{border-color:#AC63CA}.pl-co-purple-300::-webkit-input-placeholder{color:#973CBD}.pl-co-purple-300::-moz-placeholder{color:#973CBD}.pl-co-purple-300:-ms-input-placeholder{color:#973CBD}.pl-co-purple-300:-moz-placeholder{color:#973CBD}.pl-ba-purple-300::-webkit-input-placeholder{background-color:#973CBD}.pl-ba-purple-300::-moz-placeholder{background-color:#973CBD}.pl-ba-purple-300:-ms-input-placeholder{background-color:#973CBD}.pl-ba-purple-300:-moz-placeholder{background-color:#973CBD}.pl-bo-purple-300::-webkit-input-placeholder{border-color:#973CBD}.pl-bo-purple-300::-moz-placeholder{border-color:#973CBD}.pl-bo-purple-300:-ms-input-placeholder{border-color:#973CBD}.pl-bo-purple-300:-moz-placeholder{border-color:#973CBD}.pl-co-purple-400::-webkit-input-placeholder{color:#793097}.pl-co-purple-400::-moz-placeholder{color:#793097}.pl-co-purple-400:-ms-input-placeholder{color:#793097}.pl-co-purple-400:-moz-placeholder{color:#793097}.pl-ba-purple-400::-webkit-input-placeholder{background-color:#793097}.pl-ba-purple-400::-moz-placeholder{background-color:#793097}.pl-ba-purple-400:-ms-input-placeholder{background-color:#793097}.pl-ba-purple-400:-moz-placeholder{background-color:#793097}.pl-bo-purple-400::-webkit-input-placeholder{border-color:#793097}.pl-bo-purple-400::-moz-placeholder{border-color:#793097}.pl-bo-purple-400:-ms-input-placeholder{border-color:#793097}.pl-bo-purple-400:-moz-placeholder{border-color:#793097}.pl-co-purple-500::-webkit-input-placeholder{color:#5B2471}.pl-co-purple-500::-moz-placeholder{color:#5B2471}.pl-co-purple-500:-ms-input-placeholder{color:#5B2471}.pl-co-purple-500:-moz-placeholder{color:#5B2471}.pl-ba-purple-500::-webkit-input-placeholder{background-color:#5B2471}.pl-ba-purple-500::-moz-placeholder{background-color:#5B2471}.pl-ba-purple-500:-ms-input-placeholder{background-color:#5B2471}.pl-ba-purple-500:-moz-placeholder{background-color:#5B2471}.pl-bo-purple-500::-webkit-input-placeholder{border-color:#5B2471}.pl-bo-purple-500::-moz-placeholder{border-color:#5B2471}.pl-bo-purple-500:-ms-input-placeholder{border-color:#5B2471}.pl-bo-purple-500:-moz-placeholder{border-color:#5B2471}.pl-co-yellow-100::-webkit-input-placeholder{color:#FFEB99}.pl-co-yellow-100::-moz-placeholder{color:#FFEB99}.pl-co-yellow-100:-ms-input-placeholder{color:#FFEB99}.pl-co-yellow-100:-moz-placeholder{color:#FFEB99}.pl-ba-yellow-100::-webkit-input-placeholder{background-color:#FFEB99}.pl-ba-yellow-100::-moz-placeholder{background-color:#FFEB99}.pl-ba-yellow-100:-ms-input-placeholder{background-color:#FFEB99}.pl-ba-yellow-100:-moz-placeholder{background-color:#FFEB99}.pl-bo-yellow-100::-webkit-input-placeholder{border-color:#FFEB99}.pl-bo-yellow-100::-moz-placeholder{border-color:#FFEB99}.pl-bo-yellow-100:-ms-input-placeholder{border-color:#FFEB99}.pl-bo-yellow-100:-moz-placeholder{border-color:#FFEB99}.pl-co-yellow-200::-webkit-input-placeholder{color:#FFD633}.pl-co-yellow-200::-moz-placeholder{color:#FFD633}.pl-co-yellow-200:-ms-input-placeholder{color:#FFD633}.pl-co-yellow-200:-moz-placeholder{color:#FFD633}.pl-ba-yellow-200::-webkit-input-placeholder{background-color:#FFD633}.pl-ba-yellow-200::-moz-placeholder{background-color:#FFD633}.pl-ba-yellow-200:-ms-input-placeholder{background-color:#FFD633}.pl-ba-yellow-200:-moz-placeholder{background-color:#FFD633}.pl-bo-yellow-200::-webkit-input-placeholder{border-color:#FFD633}.pl-bo-yellow-200::-moz-placeholder{border-color:#FFD633}.pl-bo-yellow-200:-ms-input-placeholder{border-color:#FFD633}.pl-bo-yellow-200:-moz-placeholder{border-color:#FFD633}.pl-co-yellow-300::-webkit-input-placeholder{color:#FFCC00}.pl-co-yellow-300::-moz-placeholder{color:#FFCC00}.pl-co-yellow-300:-ms-input-placeholder{color:#FFCC00}.pl-co-yellow-300:-moz-placeholder{color:#FFCC00}.pl-ba-yellow-300::-webkit-input-placeholder{background-color:#FFCC00}.pl-ba-yellow-300::-moz-placeholder{background-color:#FFCC00}.pl-ba-yellow-300:-ms-input-placeholder{background-color:#FFCC00}.pl-ba-yellow-300:-moz-placeholder{background-color:#FFCC00}.pl-bo-yellow-300::-webkit-input-placeholder{border-color:#FFCC00}.pl-bo-yellow-300::-moz-placeholder{border-color:#FFCC00}.pl-bo-yellow-300:-ms-input-placeholder{border-color:#FFCC00}.pl-bo-yellow-300:-moz-placeholder{border-color:#FFCC00}.pl-co-yellow-400::-webkit-input-placeholder{color:#CCA300}.pl-co-yellow-400::-moz-placeholder{color:#CCA300}.pl-co-yellow-400:-ms-input-placeholder{color:#CCA300}.pl-co-yellow-400:-moz-placeholder{color:#CCA300}.pl-ba-yellow-400::-webkit-input-placeholder{background-color:#CCA300}.pl-ba-yellow-400::-moz-placeholder{background-color:#CCA300}.pl-ba-yellow-400:-ms-input-placeholder{background-color:#CCA300}.pl-ba-yellow-400:-moz-placeholder{background-color:#CCA300}.pl-bo-yellow-400::-webkit-input-placeholder{border-color:#CCA300}.pl-bo-yellow-400::-moz-placeholder{border-color:#CCA300}.pl-bo-yellow-400:-ms-input-placeholder{border-color:#CCA300}.pl-bo-yellow-400:-moz-placeholder{border-color:#CCA300}.pl-co-yellow-500::-webkit-input-placeholder{color:#997A00}.pl-co-yellow-500::-moz-placeholder{color:#997A00}.pl-co-yellow-500:-ms-input-placeholder{color:#997A00}.pl-co-yellow-500:-moz-placeholder{color:#997A00}.pl-ba-yellow-500::-webkit-input-placeholder{background-color:#997A00}.pl-ba-yellow-500::-moz-placeholder{background-color:#997A00}.pl-ba-yellow-500:-ms-input-placeholder{background-color:#997A00}.pl-ba-yellow-500:-moz-placeholder{background-color:#997A00}.pl-bo-yellow-500::-webkit-input-placeholder{border-color:#997A00}.pl-bo-yellow-500::-moz-placeholder{border-color:#997A00}.pl-bo-yellow-500:-ms-input-placeholder{border-color:#997A00}.pl-bo-yellow-500:-moz-placeholder{border-color:#997A00}.pl-co-black-100::-webkit-input-placeholder{color:#666666}.pl-co-black-100::-moz-placeholder{color:#666666}.pl-co-black-100:-ms-input-placeholder{color:#666666}.pl-co-black-100:-moz-placeholder{color:#666666}.pl-ba-black-100::-webkit-input-placeholder{background-color:#666666}.pl-ba-black-100::-moz-placeholder{background-color:#666666}.pl-ba-black-100:-ms-input-placeholder{background-color:#666666}.pl-ba-black-100:-moz-placeholder{background-color:#666666}.pl-bo-black-100::-webkit-input-placeholder{border-color:#666666}.pl-bo-black-100::-moz-placeholder{border-color:#666666}.pl-bo-black-100:-ms-input-placeholder{border-color:#666666}.pl-bo-black-100:-moz-placeholder{border-color:#666666}.pl-co-black-200::-webkit-input-placeholder{color:#555555}.pl-co-black-200::-moz-placeholder{color:#555555}.pl-co-black-200:-ms-input-placeholder{color:#555555}.pl-co-black-200:-moz-placeholder{color:#555555}.pl-ba-black-200::-webkit-input-placeholder{background-color:#555555}.pl-ba-black-200::-moz-placeholder{background-color:#555555}.pl-ba-black-200:-ms-input-placeholder{background-color:#555555}.pl-ba-black-200:-moz-placeholder{background-color:#555555}.pl-bo-black-200::-webkit-input-placeholder{border-color:#555555}.pl-bo-black-200::-moz-placeholder{border-color:#555555}.pl-bo-black-200:-ms-input-placeholder{border-color:#555555}.pl-bo-black-200:-moz-placeholder{border-color:#555555}.pl-co-black-300::-webkit-input-placeholder{color:#444444}.pl-co-black-300::-moz-placeholder{color:#444444}.pl-co-black-300:-ms-input-placeholder{color:#444444}.pl-co-black-300:-moz-placeholder{color:#444444}.pl-ba-black-300::-webkit-input-placeholder{background-color:#444444}.pl-ba-black-300::-moz-placeholder{background-color:#444444}.pl-ba-black-300:-ms-input-placeholder{background-color:#444444}.pl-ba-black-300:-moz-placeholder{background-color:#444444}.pl-bo-black-300::-webkit-input-placeholder{border-color:#444444}.pl-bo-black-300::-moz-placeholder{border-color:#444444}.pl-bo-black-300:-ms-input-placeholder{border-color:#444444}.pl-bo-black-300:-moz-placeholder{border-color:#444444}.pl-co-black-400::-webkit-input-placeholder{color:#333333}.pl-co-black-400::-moz-placeholder{color:#333333}.pl-co-black-400:-ms-input-placeholder{color:#333333}.pl-co-black-400:-moz-placeholder{color:#333333}.pl-ba-black-400::-webkit-input-placeholder{background-color:#333333}.pl-ba-black-400::-moz-placeholder{background-color:#333333}.pl-ba-black-400:-ms-input-placeholder{background-color:#333333}.pl-ba-black-400:-moz-placeholder{background-color:#333333}.pl-bo-black-400::-webkit-input-placeholder{border-color:#333333}.pl-bo-black-400::-moz-placeholder{border-color:#333333}.pl-bo-black-400:-ms-input-placeholder{border-color:#333333}.pl-bo-black-400:-moz-placeholder{border-color:#333333}.pl-co-black-500::-webkit-input-placeholder{color:#222222}.pl-co-black-500::-moz-placeholder{color:#222222}.pl-co-black-500:-ms-input-placeholder{color:#222222}.pl-co-black-500:-moz-placeholder{color:#222222}.pl-ba-black-500::-webkit-input-placeholder{background-color:#222222}.pl-ba-black-500::-moz-placeholder{background-color:#222222}.pl-ba-black-500:-ms-input-placeholder{background-color:#222222}.pl-ba-black-500:-moz-placeholder{background-color:#222222}.pl-bo-black-500::-webkit-input-placeholder{border-color:#222222}.pl-bo-black-500::-moz-placeholder{border-color:#222222}.pl-bo-black-500:-ms-input-placeholder{border-color:#222222}.pl-bo-black-500:-moz-placeholder{border-color:#222222}.xl-bw0{border-width:0px}.xl-bwl0{border-left-width:0px}.xl-bwr0{border-right-width:0px}.xl-bwt0{border-top-width:0px}.xl-bwb0{border-bottom-width:0px}.xl-bwx0{border-left-width:0px;border-right-width:0px}.xl-bwy0{border-top-width:0px;border-bottom-width:0px}.xl-bw1{border-width:1px}.xl-bwl1{border-left-width:1px}.xl-bwr1{border-right-width:1px}.xl-bwt1{border-top-width:1px}.xl-bwb1{border-bottom-width:1px}.xl-bwx1{border-left-width:1px;border-right-width:1px}.xl-bwy1{border-top-width:1px;border-bottom-width:1px}.xl-bw2{border-width:2px}.xl-bwl2{border-left-width:2px}.xl-bwr2{border-right-width:2px}.xl-bwt2{border-top-width:2px}.xl-bwb2{border-bottom-width:2px}.xl-bwx2{border-left-width:2px;border-right-width:2px}.xl-bwy2{border-top-width:2px;border-bottom-width:2px}.xl-bsso{border-style:solid}.xl-bsda{border-style:dashed}.xl-bsdo{border-style:dotted}.xl-br50p{border-radius:50%}.xl-br0{border-radius:0px}.xl-brtl0{border-top-left-radius:0px}.xl-brtr0{border-top-right-radius:0px}.xl-brbl0{border-bottom-left-radius:0px}.xl-brbr0{border-bottom-right-radius:0px}.xl-brl0{border-top-left-radius:0px;border-bottom-left-radius:0px}.xl-brr0{border-top-right-radius:0px;border-bottom-right-radius:0px}.xl-brt0{border-top-left-radius:0px;border-top-right-radius:0px}.xl-brb0{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.xl-br4{border-radius:4px}.xl-brtl4{border-top-left-radius:4px}.xl-brtr4{border-top-right-radius:4px}.xl-brbl4{border-bottom-left-radius:4px}.xl-brbr4{border-bottom-right-radius:4px}.xl-brl4{border-top-left-radius:4px;border-bottom-left-radius:4px}.xl-brr4{border-top-right-radius:4px;border-bottom-right-radius:4px}.xl-brt4{border-top-left-radius:4px;border-top-right-radius:4px}.xl-brb4{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.xl-br8{border-radius:8px}.xl-brtl8{border-top-left-radius:8px}.xl-brtr8{border-top-right-radius:8px}.xl-brbl8{border-bottom-left-radius:8px}.xl-brbr8{border-bottom-right-radius:8px}.xl-brl8{border-top-left-radius:8px;border-bottom-left-radius:8px}.xl-brr8{border-top-right-radius:8px;border-bottom-right-radius:8px}.xl-brt8{border-top-left-radius:8px;border-top-right-radius:8px}.xl-brb8{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.xl-br16{border-radius:16px}.xl-brtl16{border-top-left-radius:16px}.xl-brtr16{border-top-right-radius:16px}.xl-brbl16{border-bottom-left-radius:16px}.xl-brbr16{border-bottom-right-radius:16px}.xl-brl16{border-top-left-radius:16px;border-bottom-left-radius:16px}.xl-brr16{border-top-right-radius:16px;border-bottom-right-radius:16px}.xl-brt16{border-top-left-radius:16px;border-top-right-radius:16px}.xl-brb16{border-bottom-left-radius:16px;border-bottom-right-radius:16px}.xl-br24{border-radius:24px}.xl-brtl24{border-top-left-radius:24px}.xl-brtr24{border-top-right-radius:24px}.xl-brbl24{border-bottom-left-radius:24px}.xl-brbr24{border-bottom-right-radius:24px}.xl-brl24{border-top-left-radius:24px;border-bottom-left-radius:24px}.xl-brr24{border-top-right-radius:24px;border-bottom-right-radius:24px}.xl-brt24{border-top-left-radius:24px;border-top-right-radius:24px}.xl-brb24{border-bottom-left-radius:24px;border-bottom-right-radius:24px}.xl-br40{border-radius:40px}.xl-brtl40{border-top-left-radius:40px}.xl-brtr40{border-top-right-radius:40px}.xl-brbl40{border-bottom-left-radius:40px}.xl-brbr40{border-bottom-right-radius:40px}.xl-brl40{border-top-left-radius:40px;border-bottom-left-radius:40px}.xl-brr40{border-top-right-radius:40px;border-bottom-right-radius:40px}.xl-brt40{border-top-left-radius:40px;border-top-right-radius:40px}.xl-brb40{border-bottom-left-radius:40px;border-bottom-right-radius:40px}.xl-pr{position:relative}.xl-pa{position:absolute}.xl-pf{position:fixed}.xl-ps{position:static}.xl-l100p{left:100%}.xl-r100p{right:100%}.xl-t100p{top:100%}.xl-b100p{bottom:100%}.xl-l50p{left:50%}.xl-r50p{right:50%}.xl-t50p{top:50%}.xl-b50p{bottom:50%}.xl-l0{left:0px}.xl-r0{right:0px}.xl-t0{top:0px}.xl-b0{bottom:0px}.xl-l8{left:8px}.xl-r8{right:8px}.xl-t8{top:8px}.xl-b8{bottom:8px}.xl-l16{left:16px}.xl-r16{right:16px}.xl-t16{top:16px}.xl-b16{bottom:16px}.xl-l-8{left:-8px}.xl-r-8{right:-8px}.xl-t-8{top:-8px}.xl-b-8{bottom:-8px}.xl-l-16{left:-16px}.xl-r-16{right:-16px}.xl-t-16{top:-16px}.xl-b-16{bottom:-16px}.xl-zi1{z-index:1}.xl-zi2{z-index:2}.xl-tn{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.xl-ttx50p{-webkit-transform:translateX(50%);-moz-transform:translateX(50%);-ms-transform:translateX(50%);-o-transform:translateX(50%);transform:translateX(50%)}.xl-tty50p{-webkit-transform:translateY(50%);-moz-transform:translateY(50%);-ms-transform:translateY(50%);-o-transform:translateY(50%);transform:translateY(50%)}.xl-ttx-50p{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.xl-tty-50p{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.xl-dn{display:none}.xl-db{display:block}.xl-di{display:inline}.xl-dib{display:inline-block}.xl-lh0{line-height:0px}.xl-lh8{line-height:8px}.xl-lh16{line-height:16px}.xl-lh24{line-height:24px}.xl-lh40{line-height:40px}.xl-h0{height:0px}.xl-h8{height:8px}.xl-h16{height:16px}.xl-h24{height:24px}.xl-h40{height:40px}.xl-ma{margin-left:auto;margin-right:auto}.xl-m0{margin:0px}.xl-ml0{margin-left:0px}.xl-mr0{margin-right:0px}.xl-mt0{margin-top:0px}.xl-mb0{margin-bottom:0px}.xl-mx0{margin-left:0px;margin-right:0px}.xl-my0{margin-top:0px;margin-bottom:0px}.xl-m8{margin:8px}.xl-ml8{margin-left:8px}.xl-mr8{margin-right:8px}.xl-mt8{margin-top:8px}.xl-mb8{margin-bottom:8px}.xl-mx8{margin-left:8px;margin-right:8px}.xl-my8{margin-top:8px;margin-bottom:8px}.xl-m16{margin:16px}.xl-ml16{margin-left:16px}.xl-mr16{margin-right:16px}.xl-mt16{margin-top:16px}.xl-mb16{margin-bottom:16px}.xl-mx16{margin-left:16px;margin-right:16px}.xl-my16{margin-top:16px;margin-bottom:16px}.xl-m24{margin:24px}.xl-ml24{margin-left:24px}.xl-mr24{margin-right:24px}.xl-mt24{margin-top:24px}.xl-mb24{margin-bottom:24px}.xl-mx24{margin-left:24px;margin-right:24px}.xl-my24{margin-top:24px;margin-bottom:24px}.xl-m40{margin:40px}.xl-ml40{margin-left:40px}.xl-mr40{margin-right:40px}.xl-mt40{margin-top:40px}.xl-mb40{margin-bottom:40px}.xl-mx40{margin-left:40px;margin-right:40px}.xl-my40{margin-top:40px;margin-bottom:40px}.xl-p0{padding:0px}.xl-pl0{padding-left:0px}.xl-pr0{padding-right:0px}.xl-pt0{padding-top:0px}.xl-pb0{padding-bottom:0px}.xl-px0{padding-left:0px;padding-right:0px}.xl-py0{padding-top:0px;padding-bottom:0px}.xl-p8{padding:8px}.xl-pl8{padding-left:8px}.xl-pr8{padding-right:8px}.xl-pt8{padding-top:8px}.xl-pb8{padding-bottom:8px}.xl-px8{padding-left:8px;padding-right:8px}.xl-py8{padding-top:8px;padding-bottom:8px}.xl-p16{padding:16px}.xl-pl16{padding-left:16px}.xl-pr16{padding-right:16px}.xl-pt16{padding-top:16px}.xl-pb16{padding-bottom:16px}.xl-px16{padding-left:16px;padding-right:16px}.xl-py16{padding-top:16px;padding-bottom:16px}.xl-p24{padding:24px}.xl-pl24{padding-left:24px}.xl-pr24{padding-right:24px}.xl-pt24{padding-top:24px}.xl-pb24{padding-bottom:24px}.xl-px24{padding-left:24px;padding-right:24px}.xl-py24{padding-top:24px;padding-bottom:24px}.xl-p40{padding:40px}.xl-pl40{padding-left:40px}.xl-pr40{padding-right:40px}.xl-pt40{padding-top:40px}.xl-pb40{padding-bottom:40px}.xl-px40{padding-left:40px;padding-right:40px}.xl-py40{padding-top:40px;padding-bottom:40px}.xl-ov{overflow:visible}.xl-oh{overflow:hidden}.xl-oa{overflow:auto}.xl-os{overflow:scroll}.xl-o0{opacity:0}.xl-o50{opacity:0.50}.xl-o100{opacity:1}.ho-o0:hover{opacity:0}.ho-o50:hover{opacity:0.50}.ho-o100:hover{opacity:1}.xl-fs0{font-size:0px}.xl-fs12{font-size:12px}.xl-fs14{font-size:14px}.xl-fs16{font-size:16px}.xl-fs18{font-size:18px}.xl-fs20{font-size:20px}.xl-fs22{font-size:22px}.xl-fs24{font-size:24px}.xl-fs26{font-size:26px}.xl-fs28{font-size:28px}.xl-fs30{font-size:30px}.xl-fs32{font-size:32px}.xl-tal{text-align:left}.xl-tar{text-align:right}.xl-tac{text-align:center}.xl-taj{text-align:justify}.xl-ls1{letter-spacing:1px}.xl-ls2{letter-spacing:2px}.xl-fw200{font-style:normal;font-weight:200}.xl-fw300{font-style:normal;font-weight:300}.xl-fw400{font-style:normal;font-weight:400}.xl-fw500{font-style:normal;font-weight:500}.xl-fw600{font-style:normal;font-weight:600}.xl-fw700{font-style:normal;font-weight:700}.xl-fw800{font-style:normal;font-weight:800}.xl-fw900{font-style:normal;font-weight:900}.xl-fsi{font-style:italic}.xl-vat{vertical-align:top}.xl-vam{vertical-align:middle}.xl-vab{vertical-align:bottom}.xl-ttu{text-transform:uppercase}.xl-ttl{text-transform:lowercase}.xl-ttc{text-transform:capitalize}.xl-tdu{text-decoration:underline}.xl-tdlt{text-decoration:line-through}.ho-tdu:hover{text-decoration:underline}.ho-tdlt:hover{text-decoration:line-through}.xl-toe{text-overflow:ellipsis}.xl-wsnw{white-space:nowrap}.xl-wspw{white-space:pre-wrap}.xl-wbbw{word-break:break-word}.xl-wbba{word-break:break-all}.xl-ca{cursor:auto}.xl-cd{cursor:default}.xl-cp{cursor:pointer}.xl-ct{cursor:text}.xl-cn{cursor:not-allowed}.xl-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.xl-ust{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.xl-usa{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.xl-pen{pointer-events:none}.xl-pea{pointer-events:auto}@media (max-width: 1024px){.lg-tn{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.lg-dn{display:none}.lg-db{display:block}.lg-di{display:inline}.lg-dib{display:inline-block}.lg-ma{margin-left:auto;margin-right:auto}.lg-m0{margin:0px}.lg-ml0{margin-left:0px}.lg-mr0{margin-right:0px}.lg-mt0{margin-top:0px}.lg-mb0{margin-bottom:0px}.lg-mx0{margin-left:0px;margin-right:0px}.lg-my0{margin-top:0px;margin-bottom:0px}.lg-m8{margin:8px}.lg-ml8{margin-left:8px}.lg-mr8{margin-right:8px}.lg-mt8{margin-top:8px}.lg-mb8{margin-bottom:8px}.lg-mx8{margin-left:8px;margin-right:8px}.lg-my8{margin-top:8px;margin-bottom:8px}.lg-m16{margin:16px}.lg-ml16{margin-left:16px}.lg-mr16{margin-right:16px}.lg-mt16{margin-top:16px}.lg-mb16{margin-bottom:16px}.lg-mx16{margin-left:16px;margin-right:16px}.lg-my16{margin-top:16px;margin-bottom:16px}.lg-m24{margin:24px}.lg-ml24{margin-left:24px}.lg-mr24{margin-right:24px}.lg-mt24{margin-top:24px}.lg-mb24{margin-bottom:24px}.lg-mx24{margin-left:24px;margin-right:24px}.lg-my24{margin-top:24px;margin-bottom:24px}.lg-m40{margin:40px}.lg-ml40{margin-left:40px}.lg-mr40{margin-right:40px}.lg-mt40{margin-top:40px}.lg-mb40{margin-bottom:40px}.lg-mx40{margin-left:40px;margin-right:40px}.lg-my40{margin-top:40px;margin-bottom:40px}.lg-p0{padding:0px}.lg-pl0{padding-left:0px}.lg-pr0{padding-right:0px}.lg-pt0{padding-top:0px}.lg-pb0{padding-bottom:0px}.lg-px0{padding-left:0px;padding-right:0px}.lg-py0{padding-top:0px;padding-bottom:0px}.lg-p8{padding:8px}.lg-pl8{padding-left:8px}.lg-pr8{padding-right:8px}.lg-pt8{padding-top:8px}.lg-pb8{padding-bottom:8px}.lg-px8{padding-left:8px;padding-right:8px}.lg-py8{padding-top:8px;padding-bottom:8px}.lg-p16{padding:16px}.lg-pl16{padding-left:16px}.lg-pr16{padding-right:16px}.lg-pt16{padding-top:16px}.lg-pb16{padding-bottom:16px}.lg-px16{padding-left:16px;padding-right:16px}.lg-py16{padding-top:16px;padding-bottom:16px}.lg-p24{padding:24px}.lg-pl24{padding-left:24px}.lg-pr24{padding-right:24px}.lg-pt24{padding-top:24px}.lg-pb24{padding-bottom:24px}.lg-px24{padding-left:24px;padding-right:24px}.lg-py24{padding-top:24px;padding-bottom:24px}.lg-p40{padding:40px}.lg-pl40{padding-left:40px}.lg-pr40{padding-right:40px}.lg-pt40{padding-top:40px}.lg-pb40{padding-bottom:40px}.lg-px40{padding-left:40px;padding-right:40px}.lg-py40{padding-top:40px;padding-bottom:40px}.lg-ov{overflow:visible}.lg-oh{overflow:hidden}.lg-oa{overflow:auto}.lg-os{overflow:scroll}.lg-tal{text-align:left}.lg-tar{text-align:right}.lg-tac{text-align:center}.lg-taj{text-align:justify}}@media (max-width: 768px){.md-tn{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.md-dn{display:none}.md-db{display:block}.md-di{display:inline}.md-dib{display:inline-block}.md-ma{margin-left:auto;margin-right:auto}.md-m0{margin:0px}.md-ml0{margin-left:0px}.md-mr0{margin-right:0px}.md-mt0{margin-top:0px}.md-mb0{margin-bottom:0px}.md-mx0{margin-left:0px;margin-right:0px}.md-my0{margin-top:0px;margin-bottom:0px}.md-m8{margin:8px}.md-ml8{margin-left:8px}.md-mr8{margin-right:8px}.md-mt8{margin-top:8px}.md-mb8{margin-bottom:8px}.md-mx8{margin-left:8px;margin-right:8px}.md-my8{margin-top:8px;margin-bottom:8px}.md-m16{margin:16px}.md-ml16{margin-left:16px}.md-mr16{margin-right:16px}.md-mt16{margin-top:16px}.md-mb16{margin-bottom:16px}.md-mx16{margin-left:16px;margin-right:16px}.md-my16{margin-top:16px;margin-bottom:16px}.md-m24{margin:24px}.md-ml24{margin-left:24px}.md-mr24{margin-right:24px}.md-mt24{margin-top:24px}.md-mb24{margin-bottom:24px}.md-mx24{margin-left:24px;margin-right:24px}.md-my24{margin-top:24px;margin-bottom:24px}.md-m40{margin:40px}.md-ml40{margin-left:40px}.md-mr40{margin-right:40px}.md-mt40{margin-top:40px}.md-mb40{margin-bottom:40px}.md-mx40{margin-left:40px;margin-right:40px}.md-my40{margin-top:40px;margin-bottom:40px}.md-p0{padding:0px}.md-pl0{padding-left:0px}.md-pr0{padding-right:0px}.md-pt0{padding-top:0px}.md-pb0{padding-bottom:0px}.md-px0{padding-left:0px;padding-right:0px}.md-py0{padding-top:0px;padding-bottom:0px}.md-p8{padding:8px}.md-pl8{padding-left:8px}.md-pr8{padding-right:8px}.md-pt8{padding-top:8px}.md-pb8{padding-bottom:8px}.md-px8{padding-left:8px;padding-right:8px}.md-py8{padding-top:8px;padding-bottom:8px}.md-p16{padding:16px}.md-pl16{padding-left:16px}.md-pr16{padding-right:16px}.md-pt16{padding-top:16px}.md-pb16{padding-bottom:16px}.md-px16{padding-left:16px;padding-right:16px}.md-py16{padding-top:16px;padding-bottom:16px}.md-p24{padding:24px}.md-pl24{padding-left:24px}.md-pr24{padding-right:24px}.md-pt24{padding-top:24px}.md-pb24{padding-bottom:24px}.md-px24{padding-left:24px;padding-right:24px}.md-py24{padding-top:24px;padding-bottom:24px}.md-p40{padding:40px}.md-pl40{padding-left:40px}.md-pr40{padding-right:40px}.md-pt40{padding-top:40px}.md-pb40{padding-bottom:40px}.md-px40{padding-left:40px;padding-right:40px}.md-py40{padding-top:40px;padding-bottom:40px}.md-ov{overflow:visible}.md-oh{overflow:hidden}.md-oa{overflow:auto}.md-os{overflow:scroll}.md-tal{text-align:left}.md-tar{text-align:right}.md-tac{text-align:center}.md-taj{text-align:justify}}@media (max-width: 667px){.sm-tn{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.sm-dn{display:none}.sm-db{display:block}.sm-di{display:inline}.sm-dib{display:inline-block}.sm-ma{margin-left:auto;margin-right:auto}.sm-m0{margin:0px}.sm-ml0{margin-left:0px}.sm-mr0{margin-right:0px}.sm-mt0{margin-top:0px}.sm-mb0{margin-bottom:0px}.sm-mx0{margin-left:0px;margin-right:0px}.sm-my0{margin-top:0px;margin-bottom:0px}.sm-m8{margin:8px}.sm-ml8{margin-left:8px}.sm-mr8{margin-right:8px}.sm-mt8{margin-top:8px}.sm-mb8{margin-bottom:8px}.sm-mx8{margin-left:8px;margin-right:8px}.sm-my8{margin-top:8px;margin-bottom:8px}.sm-m16{margin:16px}.sm-ml16{margin-left:16px}.sm-mr16{margin-right:16px}.sm-mt16{margin-top:16px}.sm-mb16{margin-bottom:16px}.sm-mx16{margin-left:16px;margin-right:16px}.sm-my16{margin-top:16px;margin-bottom:16px}.sm-m24{margin:24px}.sm-ml24{margin-left:24px}.sm-mr24{margin-right:24px}.sm-mt24{margin-top:24px}.sm-mb24{margin-bottom:24px}.sm-mx24{margin-left:24px;margin-right:24px}.sm-my24{margin-top:24px;margin-bottom:24px}.sm-m40{margin:40px}.sm-ml40{margin-left:40px}.sm-mr40{margin-right:40px}.sm-mt40{margin-top:40px}.sm-mb40{margin-bottom:40px}.sm-mx40{margin-left:40px;margin-right:40px}.sm-my40{margin-top:40px;margin-bottom:40px}.sm-p0{padding:0px}.sm-pl0{padding-left:0px}.sm-pr0{padding-right:0px}.sm-pt0{padding-top:0px}.sm-pb0{padding-bottom:0px}.sm-px0{padding-left:0px;padding-right:0px}.sm-py0{padding-top:0px;padding-bottom:0px}.sm-p8{padding:8px}.sm-pl8{padding-left:8px}.sm-pr8{padding-right:8px}.sm-pt8{padding-top:8px}.sm-pb8{padding-bottom:8px}.sm-px8{padding-left:8px;padding-right:8px}.sm-py8{padding-top:8px;padding-bottom:8px}.sm-p16{padding:16px}.sm-pl16{padding-left:16px}.sm-pr16{padding-right:16px}.sm-pt16{padding-top:16px}.sm-pb16{padding-bottom:16px}.sm-px16{padding-left:16px;padding-right:16px}.sm-py16{padding-top:16px;padding-bottom:16px}.sm-p24{padding:24px}.sm-pl24{padding-left:24px}.sm-pr24{padding-right:24px}.sm-pt24{padding-top:24px}.sm-pb24{padding-bottom:24px}.sm-px24{padding-left:24px;padding-right:24px}.sm-py24{padding-top:24px;padding-bottom:24px}.sm-p40{padding:40px}.sm-pl40{padding-left:40px}.sm-pr40{padding-right:40px}.sm-pt40{padding-top:40px}.sm-pb40{padding-bottom:40px}.sm-px40{padding-left:40px;padding-right:40px}.sm-py40{padding-top:40px;padding-bottom:40px}.sm-ov{overflow:visible}.sm-oh{overflow:hidden}.sm-oa{overflow:auto}.sm-os{overflow:scroll}.sm-tal{text-align:left}.sm-tar{text-align:right}.sm-tac{text-align:center}.sm-taj{text-align:justify}} 2 | -------------------------------------------------------------------------------- /pixelperfectcss-scss.scss: -------------------------------------------------------------------------------- 1 | /*! Pixel Perfect CSS 1.0.5 | Scss | MIT License | dnomak.com/pixelperfectcss */ 2 | 3 | @each $pixelperfectcss-breakpoint-key, $pixelperfectcss-breakpoint-val in $pixelperfectcss-breakpoint { 4 | @if $pixelperfectcss-breakpoint-val == "" { 5 | @each $selector-color-key, $selector-color-val in $selector-color { 6 | @each $color-key, $color-val in $property-color { 7 | @if $selector-color-val == "breakpoint-class" { 8 | .#{$pixelperfectcss-breakpoint-key}-co-#{$color-key} { color: #{$color-val}; } 9 | .#{$pixelperfectcss-breakpoint-key}-ba-#{$color-key} { background-color: #{$color-val}; } 10 | .#{$pixelperfectcss-breakpoint-key}-bo-#{$color-key} { border-color: #{$color-val}; } 11 | } 12 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "not-breakpoint-class" { 13 | .#{$pixelperfectcss-breakpoint-key}-co-#{$color-key} { color: #{$color-val}; } 14 | .#{$pixelperfectcss-breakpoint-key}-ba-#{$color-key} { background-color: #{$color-val}; } 15 | .#{$pixelperfectcss-breakpoint-key}-bo-#{$color-key} { border-color: #{$color-val}; } 16 | } 17 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val != "breakpoint-class" and $selector-color-val != "placeholder" and $selector-color-val != "selection" { 18 | .#{$selector-color-key}-co-#{$color-key}:#{$selector-color-val} { color: #{$color-val}; } 19 | .#{$selector-color-key}-ba-#{$color-key}:#{$selector-color-val} { background-color: #{$color-val}; } 20 | .#{$selector-color-key}-bo-#{$color-key}:#{$selector-color-val} { border-color: #{$color-val}; } 21 | } 22 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "placeholder" { 23 | .#{$selector-color-key}-co-#{$color-key}::-webkit-input-placeholder { color: #{$color-val}; } 24 | .#{$selector-color-key}-co-#{$color-key}::-moz-placeholder { color: #{$color-val}; } 25 | .#{$selector-color-key}-co-#{$color-key}:-ms-input-placeholder { color: #{$color-val}; } 26 | .#{$selector-color-key}-co-#{$color-key}:-moz-placeholder { color: #{$color-val}; } 27 | .#{$selector-color-key}-ba-#{$color-key}::-webkit-input-placeholder { background-color: #{$color-val}; } 28 | .#{$selector-color-key}-ba-#{$color-key}::-moz-placeholder { background-color: #{$color-val}; } 29 | .#{$selector-color-key}-ba-#{$color-key}:-ms-input-placeholder { background-color: #{$color-val}; } 30 | .#{$selector-color-key}-ba-#{$color-key}:-moz-placeholder { background-color: #{$color-val}; } 31 | .#{$selector-color-key}-bo-#{$color-key}::-webkit-input-placeholder { border-color: #{$color-val}; } 32 | .#{$selector-color-key}-bo-#{$color-key}::-moz-placeholder { border-color: #{$color-val}; } 33 | .#{$selector-color-key}-bo-#{$color-key}:-ms-input-placeholder { border-color: #{$color-val}; } 34 | .#{$selector-color-key}-bo-#{$color-key}:-moz-placeholder { border-color: #{$color-val}; } 35 | } 36 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "selection" { 37 | .#{$selector-color-key}-co-#{$color-key}::-moz-selection { color: #{$color-val}; } 38 | .#{$selector-color-key}-co-#{$color-key}::selection { color: #{$color-val}; } 39 | .#{$selector-color-key}-ba-#{$color-key}::-moz-selection { background-color: #{$color-val}; } 40 | .#{$selector-color-key}-ba-#{$color-key}::selection { background-color: #{$color-val}; } 41 | } 42 | } 43 | } 44 | @each $selector-border-width-key, $selector-border-width-val in $selector-border-width { 45 | @each $border-width-val in $property-border-width { 46 | @if $selector-border-width-val == "breakpoint-class" { 47 | .#{$pixelperfectcss-breakpoint-key}-bw#{$border-width-val} { border-width: #{$border-width-val}px; } 48 | .#{$pixelperfectcss-breakpoint-key}-bwl#{$border-width-val} { border-left-width: #{$border-width-val}px; } 49 | .#{$pixelperfectcss-breakpoint-key}-bwr#{$border-width-val} { border-right-width: #{$border-width-val}px; } 50 | .#{$pixelperfectcss-breakpoint-key}-bwt#{$border-width-val} { border-top-width: #{$border-width-val}px; } 51 | .#{$pixelperfectcss-breakpoint-key}-bwb#{$border-width-val} { border-bottom-width: #{$border-width-val}px; } 52 | .#{$pixelperfectcss-breakpoint-key}-bwx#{$border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 53 | .#{$pixelperfectcss-breakpoint-key}-bwy#{$border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 54 | } 55 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-width-val == "not-breakpoint-class" { 56 | .#{$pixelperfectcss-breakpoint-key}-bw#{$border-width-val} { border-width: #{$border-width-val}px; } 57 | .#{$pixelperfectcss-breakpoint-key}-bwl#{$border-width-val} { border-left-width: #{$border-width-val}px; } 58 | .#{$pixelperfectcss-breakpoint-key}-bwr#{$border-width-val} { border-right-width: #{$border-width-val}px; } 59 | .#{$pixelperfectcss-breakpoint-key}-bwt#{$border-width-val} { border-top-width: #{$border-width-val}px; } 60 | .#{$pixelperfectcss-breakpoint-key}-bwb#{$border-width-val} { border-bottom-width: #{$border-width-val}px; } 61 | .#{$pixelperfectcss-breakpoint-key}-bwx#{$border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 62 | .#{$pixelperfectcss-breakpoint-key}-bwy#{$border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 63 | } 64 | @else if $pixelperfectcss-breakpoint-val == "" { 65 | .#{$selector-border-width-key}-bw#{$border-width-val}:#{$selector-border-width-val} { border-width: #{$border-width-val}px; } 66 | .#{$selector-border-width-key}-bwl#{$border-width-val}:#{$selector-border-width-val} { border-left-width: #{$border-width-val}px; } 67 | .#{$selector-border-width-key}-bwr#{$border-width-val}:#{$selector-border-width-val} { border-right-width: #{$border-width-val}px; } 68 | .#{$selector-border-width-key}-bwt#{$border-width-val}:#{$selector-border-width-val} { border-top-width: #{$border-width-val}px; } 69 | .#{$selector-border-width-key}-bwb#{$border-width-val}:#{$selector-border-width-val} { border-bottom-width: #{$border-width-val}px; } 70 | .#{$selector-border-width-key}-bwx#{$border-width-val}:#{$selector-border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 71 | .#{$selector-border-width-key}-bwy#{$border-width-val}:#{$selector-border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 72 | } 73 | } 74 | } 75 | @each $selector-border-style-key, $selector-border-style-val in $selector-border-style { 76 | @each $border-style-key, $border-style-val in $property-border-style { 77 | @if $selector-border-style-val == "breakpoint-class" { 78 | .#{$pixelperfectcss-breakpoint-key}-#{$border-style-key} { border-style: #{$border-style-val}; } 79 | } 80 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-style-val == "not-breakpoint-class" { 81 | .#{$pixelperfectcss-breakpoint-key}-#{$border-style-key} { border-style: #{$border-style-val}; } 82 | } 83 | @else if $pixelperfectcss-breakpoint-val == "" { 84 | .#{$selector-border-style-key}-#{$border-style-key}:#{$selector-border-style-val} { border-style: #{$border-style-val}; } 85 | } 86 | } 87 | } 88 | @each $selector-border-radius-key, $selector-border-radius-val in $selector-border-radius { 89 | @each $border-radius-val in $property-border-radius { 90 | @if $selector-border-radius-val == "breakpoint-class" { 91 | @if $border-radius-val == "50%" { 92 | .#{$pixelperfectcss-breakpoint-key}-br50p { border-radius: #{$border-radius-val}; } 93 | } 94 | @else { 95 | .#{$pixelperfectcss-breakpoint-key}-br#{$border-radius-val} { border-radius: #{$border-radius-val}px; } 96 | .#{$pixelperfectcss-breakpoint-key}-brtl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 97 | .#{$pixelperfectcss-breakpoint-key}-brtr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 98 | .#{$pixelperfectcss-breakpoint-key}-brbl#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 99 | .#{$pixelperfectcss-breakpoint-key}-brbr#{$border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 100 | .#{$pixelperfectcss-breakpoint-key}-brl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 101 | .#{$pixelperfectcss-breakpoint-key}-brr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 102 | .#{$pixelperfectcss-breakpoint-key}-brt#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 103 | .#{$pixelperfectcss-breakpoint-key}-brb#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 104 | } 105 | } 106 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-radius-val == "not-breakpoint-class" { 107 | @if $border-radius-val == "50%" { 108 | .#{$pixelperfectcss-breakpoint-key}-br50p { border-radius: #{$border-radius-val}; } 109 | } 110 | @else { 111 | .#{$pixelperfectcss-breakpoint-key}-br#{$border-radius-val} { border-radius: #{$border-radius-val}px; } 112 | .#{$pixelperfectcss-breakpoint-key}-brtl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 113 | .#{$pixelperfectcss-breakpoint-key}-brtr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 114 | .#{$pixelperfectcss-breakpoint-key}-brbl#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 115 | .#{$pixelperfectcss-breakpoint-key}-brbr#{$border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 116 | .#{$pixelperfectcss-breakpoint-key}-brl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 117 | .#{$pixelperfectcss-breakpoint-key}-brr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 118 | .#{$pixelperfectcss-breakpoint-key}-brt#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 119 | .#{$pixelperfectcss-breakpoint-key}-brb#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 120 | } 121 | } 122 | @else if $pixelperfectcss-breakpoint-val == "" { 123 | @if $border-radius-val == "50%" { 124 | .#{$selector-border-radius-key}-br50p:#{$selector-border-radius-val} { border-radius: #{$border-radius-val}; } 125 | } 126 | @else { 127 | .#{$selector-border-radius-key}-br#{$border-radius-val}:#{$selector-border-radius-val} { border-radius: #{$border-radius-val}px; } 128 | .#{$selector-border-radius-key}-brtl#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 129 | .#{$selector-border-radius-key}-brtr#{$border-radius-val}:#{$selector-border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 130 | .#{$selector-border-radius-key}-brbl#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 131 | .#{$selector-border-radius-key}-brbr#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 132 | .#{$selector-border-radius-key}-brl#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 133 | .#{$selector-border-radius-key}-brr#{$border-radius-val}:#{$selector-border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 134 | .#{$selector-border-radius-key}-brt#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 135 | .#{$selector-border-radius-key}-brb#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 136 | } 137 | } 138 | } 139 | } 140 | @each $selector-position-key, $selector-position-val in $selector-position { 141 | @each $position-key, $position-val in $property-position { 142 | @if $selector-position-val == "breakpoint-class" { 143 | .#{$pixelperfectcss-breakpoint-key}-#{$position-key} { position: #{$position-val}; } 144 | } 145 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-position-val == "not-breakpoint-class" { 146 | .#{$pixelperfectcss-breakpoint-key}-#{$position-key} { position: #{$position-val}; } 147 | } 148 | @else if $pixelperfectcss-breakpoint-val == "" { 149 | .#{$selector-position-key}-#{$position-key}:#{$selector-position-val} { position: #{$position-val}; } 150 | } 151 | } 152 | } 153 | @each $selector-position-value-key, $selector-position-value-val in $selector-position-value { 154 | @each $position-value-val in $property-position-value { 155 | @if $selector-position-value-val == "breakpoint-class" { 156 | @if $position-value-val == "100%" { 157 | .#{$pixelperfectcss-breakpoint-key}-l100p { left: #{$position-value-val}; } 158 | .#{$pixelperfectcss-breakpoint-key}-r100p { right: #{$position-value-val}; } 159 | .#{$pixelperfectcss-breakpoint-key}-t100p { top: #{$position-value-val}; } 160 | .#{$pixelperfectcss-breakpoint-key}-b100p { bottom: #{$position-value-val}; } 161 | } 162 | @else if $position-value-val == "50%" { 163 | .#{$pixelperfectcss-breakpoint-key}-l50p { left: #{$position-value-val}; } 164 | .#{$pixelperfectcss-breakpoint-key}-r50p { right: #{$position-value-val}; } 165 | .#{$pixelperfectcss-breakpoint-key}-t50p { top: #{$position-value-val}; } 166 | .#{$pixelperfectcss-breakpoint-key}-b50p { bottom: #{$position-value-val}; } 167 | } 168 | @else { 169 | .#{$pixelperfectcss-breakpoint-key}-l#{$position-value-val} { left: #{$position-value-val}px; } 170 | .#{$pixelperfectcss-breakpoint-key}-r#{$position-value-val} { right: #{$position-value-val}px; } 171 | .#{$pixelperfectcss-breakpoint-key}-t#{$position-value-val} { top: #{$position-value-val}px; } 172 | .#{$pixelperfectcss-breakpoint-key}-b#{$position-value-val} { bottom: #{$position-value-val}px; } 173 | } 174 | } 175 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-position-value-val == "not-breakpoint-class" { 176 | @if $position-value-val == "100%" { 177 | .#{$pixelperfectcss-breakpoint-key}-l100p { left: #{$position-value-val}; } 178 | .#{$pixelperfectcss-breakpoint-key}-r100p { right: #{$position-value-val}; } 179 | .#{$pixelperfectcss-breakpoint-key}-t100p { top: #{$position-value-val}; } 180 | .#{$pixelperfectcss-breakpoint-key}-b100p { bottom: #{$position-value-val}; } 181 | } 182 | @else if $position-value-val == "50%" { 183 | .#{$pixelperfectcss-breakpoint-key}-l50p { left: #{$position-value-val}; } 184 | .#{$pixelperfectcss-breakpoint-key}-r50p { right: #{$position-value-val}; } 185 | .#{$pixelperfectcss-breakpoint-key}-t50p { top: #{$position-value-val}; } 186 | .#{$pixelperfectcss-breakpoint-key}-b50p { bottom: #{$position-value-val}; } 187 | } 188 | @else { 189 | .#{$pixelperfectcss-breakpoint-key}-l#{$position-value-val} { left: #{$position-value-val}px; } 190 | .#{$pixelperfectcss-breakpoint-key}-r#{$position-value-val} { right: #{$position-value-val}px; } 191 | .#{$pixelperfectcss-breakpoint-key}-t#{$position-value-val} { top: #{$position-value-val}px; } 192 | .#{$pixelperfectcss-breakpoint-key}-b#{$position-value-val} { bottom: #{$position-value-val}px; } 193 | } 194 | } 195 | @else if $pixelperfectcss-breakpoint-val == "" { 196 | @if $position-value-val == "100%" { 197 | .#{$selector-position-value-key}-l100p:#{$selector-position-value-val} { left: #{$position-value-val}; } 198 | .#{$selector-position-value-key}-r100p:#{$selector-position-value-val} { right: #{$position-value-val}; } 199 | .#{$selector-position-value-key}-t100p:#{$selector-position-value-val} { top: #{$position-value-val}; } 200 | .#{$selector-position-value-key}-b100p:#{$selector-position-value-val} { bottom: #{$position-value-val}; } 201 | } 202 | @else if $position-value-val == "50%" { 203 | .#{$selector-position-value-key}-l50p:#{$selector-position-value-val} { left: #{$position-value-val}; } 204 | .#{$selector-position-value-key}-r50p:#{$selector-position-value-val} { right: #{$position-value-val}; } 205 | .#{$selector-position-value-key}-t50p:#{$selector-position-value-val} { top: #{$position-value-val}; } 206 | .#{$selector-position-value-key}-b50p:#{$selector-position-value-val} { bottom: #{$position-value-val}; } 207 | } 208 | @else { 209 | .#{$selector-position-value-key}-l#{$position-value-val}:#{$selector-position-value-val} { left: #{$position-value-val}px; } 210 | .#{$selector-position-value-key}-r#{$position-value-val}:#{$selector-position-value-val} { right: #{$position-value-val}px; } 211 | .#{$selector-position-value-key}-t#{$position-value-val}:#{$selector-position-value-val} { top: #{$position-value-val}px; } 212 | .#{$selector-position-value-key}-b#{$position-value-val}:#{$selector-position-value-val} { bottom: #{$position-value-val}px; } 213 | } 214 | } 215 | } 216 | } 217 | @each $selector-z-index-key, $selector-z-index-val in $selector-z-index { 218 | @each $z-index-val in $property-z-index { 219 | @if $selector-z-index-val == "breakpoint-class" { 220 | .#{$pixelperfectcss-breakpoint-key}-zi#{$z-index-val} { z-index: #{$z-index-val}; } 221 | } 222 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-z-index-val == "not-breakpoint-class" { 223 | .#{$pixelperfectcss-breakpoint-key}-zi#{$z-index-val} { z-index: #{$z-index-val}; } 224 | } 225 | @else if $pixelperfectcss-breakpoint-val == "" { 226 | .#{$selector-z-index-key}-zi#{$z-index-val}:#{$selector-z-index-val} { z-index: #{$z-index-val}; } 227 | } 228 | } 229 | } 230 | @each $selector-transform-key, $selector-transform-val in $selector-transform { 231 | @each $transform-key, $transform-val in $property-transform { 232 | @if $selector-transform-val == "breakpoint-class" { 233 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 234 | } 235 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-transform-val == "not-breakpoint-class" { 236 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 237 | } 238 | @else if $pixelperfectcss-breakpoint-val == "" { 239 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key}:#{$selector-transform-val} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 240 | .#{$selector-transform-key}-#{$transform-key} { transform: #{$transform-val}; } 241 | } 242 | } 243 | } 244 | @each $selector-transform-translate-key, $selector-transform-translate-val in $selector-transform-translate { 245 | @each $transform-translate-key, $transform-translate-val in $property-transform-translate { 246 | @if $selector-transform-translate-val == "breakpoint-class" { 247 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 248 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 249 | } 250 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-transform-translate-val == "not-breakpoint-class" { 251 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 252 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 253 | } 254 | @else if $pixelperfectcss-breakpoint-val == "" { 255 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p:#{$selector-transform-translate-val} { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 256 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p:#{$selector-transform-translate-val} { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 257 | } 258 | } 259 | } 260 | @each $selector-display-key, $selector-display-val in $selector-display { 261 | @each $display-key, $display-val in $property-display { 262 | @if $selector-display-val == "breakpoint-class" { 263 | .#{$pixelperfectcss-breakpoint-key}-#{$display-key} { display: #{$display-val}; } 264 | } 265 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-display-val == "not-breakpoint-class" { 266 | .#{$pixelperfectcss-breakpoint-key}-#{$display-key} { display: #{$display-val}; } 267 | } 268 | @else if $pixelperfectcss-breakpoint-val == "" { 269 | .#{$selector-display-key}-#{$display-key}:#{$selector-display-val} { display: #{$display-val}; } 270 | } 271 | } 272 | } 273 | @each $selector-width-key, $selector-width-val in $selector-width { 274 | @each $width-val in $property-width { 275 | @if $selector-width-val == "breakpoint-class" { 276 | .#{$pixelperfectcss-breakpoint-key}-w#{$width-val} { width: #{$width-val}px; } 277 | } 278 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-width-val == "not-breakpoint-class" { 279 | .#{$pixelperfectcss-breakpoint-key}-w#{$width-val} { width: #{$width-val}px; } 280 | } 281 | @else if $pixelperfectcss-breakpoint-val == "" { 282 | .#{$selector-width-key}-w#{$width-val}:#{$selector-width-val} { width: #{$width-val}px; } 283 | } 284 | } 285 | } 286 | @each $selector-max-width-key, $selector-max-width-val in $selector-max-width { 287 | @each $max-width-val in $property-max-width { 288 | @if $selector-max-width-val == "breakpoint-class" { 289 | .#{$pixelperfectcss-breakpoint-key}-maw#{$max-width-val} { max-width: #{$max-width-val}px; } 290 | } 291 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-max-width-val == "not-breakpoint-class" { 292 | .#{$pixelperfectcss-breakpoint-key}-maw#{$max-width-val} { max-width: #{$max-width-val}px; } 293 | } 294 | @else if $pixelperfectcss-breakpoint-val == "" { 295 | .#{$selector-max-width-key}-maw#{$max-width-val}:#{$selector-max-width-val} { max-width: #{$max-width-val}px; } 296 | } 297 | } 298 | } 299 | @each $selector-min-width-key, $selector-min-width-val in $selector-min-width { 300 | @each $min-width-val in $property-min-width { 301 | @if $selector-min-width-val == "breakpoint-class" { 302 | .#{$pixelperfectcss-breakpoint-key}-miw#{$min-width-val} { min-width: #{$min-width-val}px; } 303 | } 304 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-min-width-val == "not-breakpoint-class" { 305 | .#{$pixelperfectcss-breakpoint-key}-miw#{$min-width-val} { min-width: #{$min-width-val}px; } 306 | } 307 | @else if $pixelperfectcss-breakpoint-val == "" { 308 | .#{$selector-min-width-key}-miw#{$min-width-val}:#{$selector-min-width-val} { min-width: #{$min-width-val}px; } 309 | } 310 | } 311 | } 312 | @each $selector-line-height-key, $selector-line-height-val in $selector-line-height { 313 | @each $line-height-val in $property-line-height { 314 | @if $selector-line-height-val == "breakpoint-class" { 315 | .#{$pixelperfectcss-breakpoint-key}-lh#{$line-height-val} { line-height: #{$line-height-val}px; } 316 | } 317 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-line-height-val == "not-breakpoint-class" { 318 | .#{$pixelperfectcss-breakpoint-key}-lh#{$line-height-val} { line-height: #{$line-height-val}px; } 319 | } 320 | @else if $pixelperfectcss-breakpoint-val == "" { 321 | .#{$selector-line-height-key}-lh#{$line-height-val}:#{$selector-line-height-val} { line-height: #{$line-height-val}px; } 322 | } 323 | } 324 | } 325 | @each $selector-height-key, $selector-height-val in $selector-height { 326 | @each $height-val in $property-height { 327 | @if $selector-height-val == "breakpoint-class" { 328 | .#{$pixelperfectcss-breakpoint-key}-h#{$height-val} { height: #{$height-val}px; } 329 | } 330 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-height-val == "not-breakpoint-class" { 331 | .#{$pixelperfectcss-breakpoint-key}-h#{$height-val} { height: #{$height-val}px; } 332 | } 333 | @else if $pixelperfectcss-breakpoint-val == "" { 334 | .#{$selector-height-key}-h#{$height-val}:#{$selector-height-val} { height: #{$height-val}px; } 335 | } 336 | } 337 | } 338 | @each $selector-max-height-key, $selector-max-height-val in $selector-max-height { 339 | @each $max-height-val in $property-max-height { 340 | @if $selector-max-height-val == "breakpoint-class" { 341 | .#{$pixelperfectcss-breakpoint-key}-mah#{$max-height-val} { max-height: #{$max-height-val}px; } 342 | } 343 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-max-height-val == "not-breakpoint-class" { 344 | .#{$pixelperfectcss-breakpoint-key}-mah#{$max-height-val} { max-height: #{$max-height-val}px; } 345 | } 346 | @else if $pixelperfectcss-breakpoint-val == "" { 347 | .#{$selector-max-height-key}-mah#{$max-height-val}:#{$selector-max-height-val} { max-height: #{$max-height-val}px; } 348 | } 349 | } 350 | } 351 | @each $selector-min-height-key, $selector-min-height-val in $selector-min-height { 352 | @each $min-height-val in $property-min-height { 353 | @if $selector-min-height-val == "breakpoint-class" { 354 | .#{$pixelperfectcss-breakpoint-key}-mih#{$min-height-val} { min-height: #{$min-height-val}px; } 355 | } 356 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-min-height-val == "not-breakpoint-class" { 357 | .#{$pixelperfectcss-breakpoint-key}-mih#{$min-height-val} { min-height: #{$min-height-val}px; } 358 | } 359 | @else if $pixelperfectcss-breakpoint-val == "" { 360 | .#{$selector-min-height-key}-mih#{$min-height-val}:#{$selector-min-height-val} { min-height: #{$min-height-val}px; } 361 | } 362 | } 363 | } 364 | @each $selector-margin-key, $selector-margin-val in $selector-margin { 365 | @each $margin-val in $property-margin { 366 | @if $selector-margin-val == "breakpoint-class" { 367 | @if $margin-val == "auto" { 368 | .#{$pixelperfectcss-breakpoint-key}-ma { margin-left: #{$margin-val}; margin-right: #{$margin-val}; } 369 | } 370 | @else { 371 | .#{$pixelperfectcss-breakpoint-key}-m#{$margin-val} { margin: #{$margin-val}px; } 372 | .#{$pixelperfectcss-breakpoint-key}-ml#{$margin-val} { margin-left: #{$margin-val}px; } 373 | .#{$pixelperfectcss-breakpoint-key}-mr#{$margin-val} { margin-right: #{$margin-val}px; } 374 | .#{$pixelperfectcss-breakpoint-key}-mt#{$margin-val} { margin-top: #{$margin-val}px; } 375 | .#{$pixelperfectcss-breakpoint-key}-mb#{$margin-val} { margin-bottom: #{$margin-val}px; } 376 | .#{$pixelperfectcss-breakpoint-key}-mx#{$margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 377 | .#{$pixelperfectcss-breakpoint-key}-my#{$margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 378 | } 379 | } 380 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-margin-val == "not-breakpoint-class" { 381 | @if $margin-val == "auto" { 382 | .#{$pixelperfectcss-breakpoint-key}-ma { margin-left: #{$margin-val}; margin-right: #{$margin-val}; } 383 | } 384 | @else { 385 | .#{$pixelperfectcss-breakpoint-key}-m#{$margin-val} { margin: #{$margin-val}px; } 386 | .#{$pixelperfectcss-breakpoint-key}-ml#{$margin-val} { margin-left: #{$margin-val}px; } 387 | .#{$pixelperfectcss-breakpoint-key}-mr#{$margin-val} { margin-right: #{$margin-val}px; } 388 | .#{$pixelperfectcss-breakpoint-key}-mt#{$margin-val} { margin-top: #{$margin-val}px; } 389 | .#{$pixelperfectcss-breakpoint-key}-mb#{$margin-val} { margin-bottom: #{$margin-val}px; } 390 | .#{$pixelperfectcss-breakpoint-key}-mx#{$margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 391 | .#{$pixelperfectcss-breakpoint-key}-my#{$margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 392 | } 393 | } 394 | @else if $pixelperfectcss-breakpoint-val == "" { 395 | .#{$selector-margin-key}-m#{$margin-val}:#{$selector-margin-val} { margin: #{$margin-val}px; } 396 | .#{$selector-margin-key}-ml#{$margin-val}:#{$selector-margin-val} { margin-left: #{$margin-val}px; } 397 | .#{$selector-margin-key}-mr#{$margin-val}:#{$selector-margin-val} { margin-right: #{$margin-val}px; } 398 | .#{$selector-margin-key}-mt#{$margin-val}:#{$selector-margin-val} { margin-top: #{$margin-val}px; } 399 | .#{$selector-margin-key}-mb#{$margin-val}:#{$selector-margin-val} { margin-bottom: #{$margin-val}px; } 400 | .#{$selector-margin-key}-mx#{$margin-val}:#{$selector-margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 401 | .#{$selector-margin-key}-my#{$margin-val}:#{$selector-margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 402 | } 403 | } 404 | } 405 | @each $selector-padding-key, $selector-padding-val in $selector-padding { 406 | @each $padding-val in $property-padding { 407 | @if $selector-padding-val == "breakpoint-class" { 408 | .#{$pixelperfectcss-breakpoint-key}-p#{$padding-val} { padding: #{$padding-val}px; } 409 | .#{$pixelperfectcss-breakpoint-key}-pl#{$padding-val} { padding-left: #{$padding-val}px; } 410 | .#{$pixelperfectcss-breakpoint-key}-pr#{$padding-val} { padding-right: #{$padding-val}px; } 411 | .#{$pixelperfectcss-breakpoint-key}-pt#{$padding-val} { padding-top: #{$padding-val}px; } 412 | .#{$pixelperfectcss-breakpoint-key}-pb#{$padding-val} { padding-bottom: #{$padding-val}px; } 413 | .#{$pixelperfectcss-breakpoint-key}-px#{$padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 414 | .#{$pixelperfectcss-breakpoint-key}-py#{$padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 415 | } 416 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-padding-val == "not-breakpoint-class" { 417 | .#{$pixelperfectcss-breakpoint-key}-p#{$padding-val} { padding: #{$padding-val}px; } 418 | .#{$pixelperfectcss-breakpoint-key}-pl#{$padding-val} { padding-left: #{$padding-val}px; } 419 | .#{$pixelperfectcss-breakpoint-key}-pr#{$padding-val} { padding-right: #{$padding-val}px; } 420 | .#{$pixelperfectcss-breakpoint-key}-pt#{$padding-val} { padding-top: #{$padding-val}px; } 421 | .#{$pixelperfectcss-breakpoint-key}-pb#{$padding-val} { padding-bottom: #{$padding-val}px; } 422 | .#{$pixelperfectcss-breakpoint-key}-px#{$padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 423 | .#{$pixelperfectcss-breakpoint-key}-py#{$padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 424 | } 425 | @else if $pixelperfectcss-breakpoint-val == "" { 426 | .#{$selector-padding-key}-p#{$padding-val}:#{$selector-padding-val} { padding: #{$padding-val}px; } 427 | .#{$selector-padding-key}-pl#{$padding-val}:#{$selector-padding-val} { padding-left: #{$padding-val}px; } 428 | .#{$selector-padding-key}-pr#{$padding-val}:#{$selector-padding-val} { padding-right: #{$padding-val}px; } 429 | .#{$selector-padding-key}-pt#{$padding-val}:#{$selector-padding-val} { padding-top: #{$padding-val}px; } 430 | .#{$selector-padding-key}-pb#{$padding-val}:#{$selector-padding-val} { padding-bottom: #{$padding-val}px; } 431 | .#{$selector-padding-key}-px#{$padding-val}:#{$selector-padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 432 | .#{$selector-padding-key}-py#{$padding-val}:#{$selector-padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 433 | } 434 | } 435 | } 436 | @each $selector-overflow-key, $selector-overflow-val in $selector-overflow { 437 | @each $overflow-key, $overflow-val in $property-overflow { 438 | @if $selector-overflow-val == "breakpoint-class" { 439 | .#{$pixelperfectcss-breakpoint-key}-#{$overflow-key} { overflow: #{$overflow-val}; } 440 | } 441 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-overflow-val == "not-breakpoint-class" { 442 | .#{$pixelperfectcss-breakpoint-key}-#{$overflow-key} { overflow: #{$overflow-val}; } 443 | } 444 | @else if $pixelperfectcss-breakpoint-val == "" { 445 | .#{$selector-overflow-key}-#{$overflow-key}:#{$selector-overflow-val} { overflow: #{$overflow-val}; } 446 | } 447 | } 448 | } 449 | @each $selector-opacity-key, $selector-opacity-val in $selector-opacity { 450 | @each $opacity-key, $opacity-val in $property-opacity { 451 | @if $selector-opacity-val == "breakpoint-class" { 452 | .#{$pixelperfectcss-breakpoint-key}-o#{$opacity-key} { opacity: #{$opacity-val}; } 453 | } 454 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-opacity-val == "not-breakpoint-class" { 455 | .#{$pixelperfectcss-breakpoint-key}-o#{$opacity-key} { opacity: #{$opacity-val}; } 456 | } 457 | @else if $pixelperfectcss-breakpoint-val == "" { 458 | .#{$selector-opacity-key}-o#{$opacity-key}:#{$selector-opacity-val} { opacity: #{$opacity-val}; } 459 | } 460 | } 461 | } 462 | @each $selector-font-size-key, $selector-font-size-val in $selector-font-size { 463 | @each $font-size-val in $property-font-size { 464 | @if $selector-font-size-val == "breakpoint-class" { 465 | .#{$pixelperfectcss-breakpoint-key}-fs#{$font-size-val} { font-size: #{$font-size-val}px; } 466 | } 467 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-size-val == "not-breakpoint-class" { 468 | .#{$pixelperfectcss-breakpoint-key}-fs#{$font-size-val} { font-size: #{$font-size-val}px; } 469 | } 470 | @else if $pixelperfectcss-breakpoint-val == "" { 471 | .#{$selector-font-size-key}-fs#{$font-size-val}:#{$selector-font-size-val} { font-size: #{$font-size-val}px; } 472 | } 473 | } 474 | } 475 | @each $selector-text-align-key, $selector-text-align-val in $selector-text-align { 476 | @each $text-align-key, $text-align-val in $property-text-align { 477 | @if $selector-text-align-val == "breakpoint-class" { 478 | .#{$pixelperfectcss-breakpoint-key}-#{$text-align-key} { text-align: #{$text-align-val}; } 479 | } 480 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-align-val == "not-breakpoint-class" { 481 | .#{$pixelperfectcss-breakpoint-key}-#{$text-align-key} { text-align: #{$text-align-val}; } 482 | } 483 | @else if $pixelperfectcss-breakpoint-val == "" { 484 | .#{$selector-text-align-key}-#{$text-align-key}:#{$selector-text-align-val} { text-align: #{$text-align-val}; } 485 | } 486 | } 487 | } 488 | @each $selector-letter-spacing-key, $selector-letter-spacing-val in $selector-letter-spacing { 489 | @each $letter-spacing-val in $property-letter-spacing { 490 | @if $selector-letter-spacing-val == "breakpoint-class" { 491 | .#{$pixelperfectcss-breakpoint-key}-ls#{$letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 492 | } 493 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-letter-spacing-val == "not-breakpoint-class" { 494 | .#{$pixelperfectcss-breakpoint-key}-ls#{$letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 495 | } 496 | @else if $pixelperfectcss-breakpoint-val == "" { 497 | .#{$selector-letter-spacing-key}-ls#{$letter-spacing-val}:#{$selector-letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 498 | } 499 | } 500 | } 501 | @each $selector-font-weight-key, $selector-font-weight-val in $selector-font-weight { 502 | @each $font-weight-val in $property-font-weight { 503 | @if $selector-font-weight-val == "breakpoint-class" { 504 | .#{$pixelperfectcss-breakpoint-key}-fw#{$font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 505 | } 506 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-weight-val == "not-breakpoint-class" { 507 | .#{$pixelperfectcss-breakpoint-key}-fw#{$font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 508 | } 509 | @else if $pixelperfectcss-breakpoint-val == "" { 510 | .#{$selector-font-weight-key}-fw#{$font-weight-val}:#{$selector-font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 511 | } 512 | } 513 | } 514 | @each $selector-font-style-key, $selector-font-style-val in $selector-font-style { 515 | @each $font-style-key, $font-style-val in $property-font-style { 516 | @if $selector-font-style-val == "breakpoint-class" { 517 | .#{$pixelperfectcss-breakpoint-key}-#{$font-style-key} { font-style: #{$font-style-val}; } 518 | } 519 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-style-val == "not-breakpoint-class" { 520 | .#{$pixelperfectcss-breakpoint-key}-#{$font-style-key} { font-style: #{$font-style-val}; } 521 | } 522 | @else if $pixelperfectcss-breakpoint-val == "" { 523 | .#{$selector-font-style-key}-#{$font-style-key}:#{$selector-font-style-val} { font-style: #{$font-style-val}; } 524 | } 525 | } 526 | } 527 | @each $selector-vertical-align-key, $selector-vertical-align-val in $selector-vertical-align { 528 | @each $vertical-align-key, $vertical-align-val in $property-vertical-align { 529 | @if $selector-vertical-align-val == "breakpoint-class" { 530 | .#{$pixelperfectcss-breakpoint-key}-#{$vertical-align-key} { vertical-align: #{$vertical-align-val}; } 531 | } 532 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-vertical-align-val == "not-breakpoint-class" { 533 | .#{$pixelperfectcss-breakpoint-key}-#{$vertical-align-key} { vertical-align: #{$vertical-align-val}; } 534 | } 535 | @else if $pixelperfectcss-breakpoint-val == "" { 536 | .#{$selector-vertical-align-key}-#{$vertical-align-key}:#{$selector-vertical-align-val} { vertical-align: #{$vertical-align-val}; } 537 | } 538 | } 539 | } 540 | @each $selector-text-transform-key, $selector-text-transform-val in $selector-text-transform { 541 | @each $text-transform-key, $text-transform-val in $property-text-transform { 542 | @if $selector-text-transform-val == "breakpoint-class" { 543 | .#{$pixelperfectcss-breakpoint-key}-#{$text-transform-key} { text-transform: #{$text-transform-val}; } 544 | } 545 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-transform-val == "not-breakpoint-class" { 546 | .#{$pixelperfectcss-breakpoint-key}-#{$text-transform-key} { text-transform: #{$text-transform-val}; } 547 | } 548 | @else if $pixelperfectcss-breakpoint-val == "" { 549 | .#{$selector-text-transform-key}-#{$text-transform-key}:#{$selector-text-transform-val} { text-transform: #{$text-transform-val}; } 550 | } 551 | } 552 | } 553 | @each $selector-text-decoration-key, $selector-text-decoration-val in $selector-text-decoration { 554 | @each $text-decoration-key, $text-decoration-val in $property-text-decoration { 555 | @if $selector-text-decoration-val == "breakpoint-class" { 556 | .#{$pixelperfectcss-breakpoint-key}-#{$text-decoration-key} { text-decoration: #{$text-decoration-val}; } 557 | } 558 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-decoration-val == "not-breakpoint-class" { 559 | .#{$pixelperfectcss-breakpoint-key}-#{$text-decoration-key} { text-decoration: #{$text-decoration-val}; } 560 | } 561 | @else if $pixelperfectcss-breakpoint-val == "" { 562 | .#{$selector-text-decoration-key}-#{$text-decoration-key}:#{$selector-text-decoration-val} { text-decoration: #{$text-decoration-val}; } 563 | } 564 | } 565 | } 566 | @each $selector-text-overflow-key, $selector-text-overflow-val in $selector-text-overflow { 567 | @each $text-overflow-key, $text-overflow-val in $property-text-overflow { 568 | @if $selector-text-overflow-val == "breakpoint-class" { 569 | .#{$pixelperfectcss-breakpoint-key}-#{$text-overflow-key} { text-overflow: #{$text-overflow-val}; } 570 | } 571 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-overflow-val == "not-breakpoint-class" { 572 | .#{$pixelperfectcss-breakpoint-key}-#{$text-overflow-key} { text-overflow: #{$text-overflow-val}; } 573 | } 574 | @else if $pixelperfectcss-breakpoint-val == "" { 575 | .#{$selector-text-overflow-key}-#{$text-overflow-key}:#{$selector-text-overflow-val} { text-overflow: #{$text-overflow-val}; } 576 | } 577 | } 578 | } 579 | @each $selector-white-space-key, $selector-white-space-val in $selector-white-space { 580 | @each $white-space-key, $white-space-val in $property-white-space { 581 | @if $selector-white-space-val == "breakpoint-class" { 582 | .#{$pixelperfectcss-breakpoint-key}-#{$white-space-key} { white-space: #{$white-space-val}; } 583 | } 584 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-white-space-val == "not-breakpoint-class" { 585 | .#{$pixelperfectcss-breakpoint-key}-#{$white-space-key} { white-space: #{$white-space-val}; } 586 | } 587 | @else if $pixelperfectcss-breakpoint-val == "" { 588 | .#{$selector-white-space-key}-#{$white-space-key}:#{$selector-white-space-val} { white-space: #{$white-space-val}; } 589 | } 590 | } 591 | } 592 | @each $selector-word-break-key, $selector-word-break-val in $selector-word-break { 593 | @each $word-break-key, $word-break-val in $property-word-break { 594 | @if $selector-word-break-val == "breakpoint-class" { 595 | .#{$pixelperfectcss-breakpoint-key}-#{$word-break-key} { word-break: #{$word-break-val}; } 596 | } 597 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-word-break-val == "not-breakpoint-class" { 598 | .#{$pixelperfectcss-breakpoint-key}-#{$word-break-key} { word-break: #{$word-break-val}; } 599 | } 600 | @else if $pixelperfectcss-breakpoint-val == "" { 601 | .#{$selector-word-break-key}-#{$word-break-key}:#{$selector-word-break-val} { word-break: #{$word-break-val}; } 602 | } 603 | } 604 | } 605 | @each $selector-cursor-key, $selector-cursor-val in $selector-cursor { 606 | @each $cursor-key, $cursor-val in $property-cursor { 607 | @if $selector-cursor-val == "breakpoint-class" { 608 | .#{$pixelperfectcss-breakpoint-key}-#{$cursor-key} { cursor: #{$cursor-val}; } 609 | } 610 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-cursor-val == "not-breakpoint-class" { 611 | .#{$pixelperfectcss-breakpoint-key}-#{$cursor-key} { cursor: #{$cursor-val}; } 612 | } 613 | @else if $pixelperfectcss-breakpoint-val == "" { 614 | .#{$selector-cursor-key}-#{$cursor-key}:#{$selector-cursor-val} { cursor: #{$cursor-val}; } 615 | } 616 | } 617 | } 618 | @each $selector-user-select-key, $selector-user-select-val in $selector-user-select { 619 | @each $user-select-key, $user-select-val in $property-user-select { 620 | @if $selector-user-select-val == "breakpoint-class" { 621 | .#{$pixelperfectcss-breakpoint-key}-#{$user-select-key} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 622 | } 623 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-user-select-val == "not-breakpoint-class" { 624 | .#{$pixelperfectcss-breakpoint-key}-#{$user-select-key} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 625 | } 626 | @else if $pixelperfectcss-breakpoint-val == "" { 627 | .#{$selector-user-select-key}-#{$user-select-key}:#{$selector-user-select-val} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 628 | } 629 | } 630 | } 631 | @each $selector-pointer-events-key, $selector-pointer-events-val in $selector-pointer-events { 632 | @each $pointer-events-key, $pointer-events-val in $property-pointer-events { 633 | @if $selector-pointer-events-val == "breakpoint-class" { 634 | .#{$pixelperfectcss-breakpoint-key}-#{$pointer-events-key} { pointer-events: #{$pointer-events-val}; } 635 | } 636 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-pointer-events-val == "not-breakpoint-class" { 637 | .#{$pixelperfectcss-breakpoint-key}-#{$pointer-events-key} { pointer-events: #{$pointer-events-val}; } 638 | } 639 | @else if $pixelperfectcss-breakpoint-val == "" { 640 | .#{$selector-pointer-events-key}-#{$pointer-events-key}:#{$selector-pointer-events-val} { pointer-events: #{$pointer-events-val}; } 641 | } 642 | } 643 | } 644 | } 645 | @else if $pixelperfectcss-breakpoint-val != "" { 646 | @media #{$pixelperfectcss-breakpoint-val} { 647 | @each $selector-color-key, $selector-color-val in $selector-color { 648 | @each $color-key, $color-val in $property-color { 649 | @if $selector-color-val == "breakpoint-class" { 650 | .#{$pixelperfectcss-breakpoint-key}-co-#{$color-key} { color: #{$color-val}; } 651 | .#{$pixelperfectcss-breakpoint-key}-ba-#{$color-key} { background-color: #{$color-val}; } 652 | .#{$pixelperfectcss-breakpoint-key}-bo-#{$color-key} { border-color: #{$color-val}; } 653 | } 654 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "not-breakpoint-class" { 655 | .#{$pixelperfectcss-breakpoint-key}-co-#{$color-key} { color: #{$color-val}; } 656 | .#{$pixelperfectcss-breakpoint-key}-ba-#{$color-key} { background-color: #{$color-val}; } 657 | .#{$pixelperfectcss-breakpoint-key}-bo-#{$color-key} { border-color: #{$color-val}; } 658 | } 659 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val != "breakpoint-class" and $selector-color-val != "placeholder" and $selector-color-val != "selection" { 660 | .#{$selector-color-key}-co-#{$color-key}:#{$selector-color-val} { color: #{$color-val}; } 661 | .#{$selector-color-key}-ba-#{$color-key}:#{$selector-color-val} { background-color: #{$color-val}; } 662 | .#{$selector-color-key}-bo-#{$color-key}:#{$selector-color-val} { border-color: #{$color-val}; } 663 | } 664 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "placeholder" { 665 | .#{$selector-color-key}-co-#{$color-key}::-webkit-input-placeholder { color: #{$color-val}; } 666 | .#{$selector-color-key}-co-#{$color-key}::-moz-placeholder { color: #{$color-val}; } 667 | .#{$selector-color-key}-co-#{$color-key}:-ms-input-placeholder { color: #{$color-val}; } 668 | .#{$selector-color-key}-co-#{$color-key}:-moz-placeholder { color: #{$color-val}; } 669 | .#{$selector-color-key}-ba-#{$color-key}::-webkit-input-placeholder { background-color: #{$color-val}; } 670 | .#{$selector-color-key}-ba-#{$color-key}::-moz-placeholder { background-color: #{$color-val}; } 671 | .#{$selector-color-key}-ba-#{$color-key}:-ms-input-placeholder { background-color: #{$color-val}; } 672 | .#{$selector-color-key}-ba-#{$color-key}:-moz-placeholder { background-color: #{$color-val}; } 673 | .#{$selector-color-key}-bo-#{$color-key}::-webkit-input-placeholder { border-color: #{$color-val}; } 674 | .#{$selector-color-key}-bo-#{$color-key}::-moz-placeholder { border-color: #{$color-val}; } 675 | .#{$selector-color-key}-bo-#{$color-key}:-ms-input-placeholder { border-color: #{$color-val}; } 676 | .#{$selector-color-key}-bo-#{$color-key}:-moz-placeholder { border-color: #{$color-val}; } 677 | } 678 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-color-val == "selection" { 679 | .#{$selector-color-key}-co-#{$color-key}::-moz-selection { color: #{$color-val}; } 680 | .#{$selector-color-key}-co-#{$color-key}::selection { color: #{$color-val}; } 681 | .#{$selector-color-key}-ba-#{$color-key}::-moz-selection { background-color: #{$color-val}; } 682 | .#{$selector-color-key}-ba-#{$color-key}::selection { background-color: #{$color-val}; } 683 | } 684 | } 685 | } 686 | @each $selector-border-width-key, $selector-border-width-val in $selector-border-width { 687 | @each $border-width-val in $property-border-width { 688 | @if $selector-border-width-val == "breakpoint-class" { 689 | .#{$pixelperfectcss-breakpoint-key}-bw#{$border-width-val} { border-width: #{$border-width-val}px; } 690 | .#{$pixelperfectcss-breakpoint-key}-bwl#{$border-width-val} { border-left-width: #{$border-width-val}px; } 691 | .#{$pixelperfectcss-breakpoint-key}-bwr#{$border-width-val} { border-right-width: #{$border-width-val}px; } 692 | .#{$pixelperfectcss-breakpoint-key}-bwt#{$border-width-val} { border-top-width: #{$border-width-val}px; } 693 | .#{$pixelperfectcss-breakpoint-key}-bwb#{$border-width-val} { border-bottom-width: #{$border-width-val}px; } 694 | .#{$pixelperfectcss-breakpoint-key}-bwx#{$border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 695 | .#{$pixelperfectcss-breakpoint-key}-bwy#{$border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 696 | } 697 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-width-val == "not-breakpoint-class" { 698 | .#{$pixelperfectcss-breakpoint-key}-bw#{$border-width-val} { border-width: #{$border-width-val}px; } 699 | .#{$pixelperfectcss-breakpoint-key}-bwl#{$border-width-val} { border-left-width: #{$border-width-val}px; } 700 | .#{$pixelperfectcss-breakpoint-key}-bwr#{$border-width-val} { border-right-width: #{$border-width-val}px; } 701 | .#{$pixelperfectcss-breakpoint-key}-bwt#{$border-width-val} { border-top-width: #{$border-width-val}px; } 702 | .#{$pixelperfectcss-breakpoint-key}-bwb#{$border-width-val} { border-bottom-width: #{$border-width-val}px; } 703 | .#{$pixelperfectcss-breakpoint-key}-bwx#{$border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 704 | .#{$pixelperfectcss-breakpoint-key}-bwy#{$border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 705 | } 706 | @else if $pixelperfectcss-breakpoint-val == "" { 707 | .#{$selector-border-width-key}-bw#{$border-width-val}:#{$selector-border-width-val} { border-width: #{$border-width-val}px; } 708 | .#{$selector-border-width-key}-bwl#{$border-width-val}:#{$selector-border-width-val} { border-left-width: #{$border-width-val}px; } 709 | .#{$selector-border-width-key}-bwr#{$border-width-val}:#{$selector-border-width-val} { border-right-width: #{$border-width-val}px; } 710 | .#{$selector-border-width-key}-bwt#{$border-width-val}:#{$selector-border-width-val} { border-top-width: #{$border-width-val}px; } 711 | .#{$selector-border-width-key}-bwb#{$border-width-val}:#{$selector-border-width-val} { border-bottom-width: #{$border-width-val}px; } 712 | .#{$selector-border-width-key}-bwx#{$border-width-val}:#{$selector-border-width-val} { border-left-width: #{$border-width-val}px; border-right-width: #{$border-width-val}px; } 713 | .#{$selector-border-width-key}-bwy#{$border-width-val}:#{$selector-border-width-val} { border-top-width: #{$border-width-val}px; border-bottom-width: #{$border-width-val}px; } 714 | } 715 | } 716 | } 717 | @each $selector-border-style-key, $selector-border-style-val in $selector-border-style { 718 | @each $border-style-key, $border-style-val in $property-border-style { 719 | @if $selector-border-style-val == "breakpoint-class" { 720 | .#{$pixelperfectcss-breakpoint-key}-#{$border-style-key} { border-style: #{$border-style-val}; } 721 | } 722 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-style-val == "not-breakpoint-class" { 723 | .#{$pixelperfectcss-breakpoint-key}-#{$border-style-key} { border-style: #{$border-style-val}; } 724 | } 725 | @else if $pixelperfectcss-breakpoint-val == "" { 726 | .#{$selector-border-style-key}-#{$border-style-key}:#{$selector-border-style-val} { border-style: #{$border-style-val}; } 727 | } 728 | } 729 | } 730 | @each $selector-border-radius-key, $selector-border-radius-val in $selector-border-radius { 731 | @each $border-radius-val in $property-border-radius { 732 | @if $selector-border-radius-val == "breakpoint-class" { 733 | @if $border-radius-val == "50%" { 734 | .#{$pixelperfectcss-breakpoint-key}-br50p { border-radius: #{$border-radius-val}; } 735 | } 736 | @else { 737 | .#{$pixelperfectcss-breakpoint-key}-br#{$border-radius-val} { border-radius: #{$border-radius-val}px; } 738 | .#{$pixelperfectcss-breakpoint-key}-brtl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 739 | .#{$pixelperfectcss-breakpoint-key}-brtr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 740 | .#{$pixelperfectcss-breakpoint-key}-brbl#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 741 | .#{$pixelperfectcss-breakpoint-key}-brbr#{$border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 742 | .#{$pixelperfectcss-breakpoint-key}-brl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 743 | .#{$pixelperfectcss-breakpoint-key}-brr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 744 | .#{$pixelperfectcss-breakpoint-key}-brt#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 745 | .#{$pixelperfectcss-breakpoint-key}-brb#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 746 | } 747 | } 748 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-border-radius-val == "not-breakpoint-class" { 749 | @if $border-radius-val == "50%" { 750 | .#{$pixelperfectcss-breakpoint-key}-br50p { border-radius: #{$border-radius-val}; } 751 | } 752 | @else { 753 | .#{$pixelperfectcss-breakpoint-key}-br#{$border-radius-val} { border-radius: #{$border-radius-val}px; } 754 | .#{$pixelperfectcss-breakpoint-key}-brtl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 755 | .#{$pixelperfectcss-breakpoint-key}-brtr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 756 | .#{$pixelperfectcss-breakpoint-key}-brbl#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 757 | .#{$pixelperfectcss-breakpoint-key}-brbr#{$border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 758 | .#{$pixelperfectcss-breakpoint-key}-brl#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 759 | .#{$pixelperfectcss-breakpoint-key}-brr#{$border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 760 | .#{$pixelperfectcss-breakpoint-key}-brt#{$border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 761 | .#{$pixelperfectcss-breakpoint-key}-brb#{$border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 762 | } 763 | } 764 | @else if $pixelperfectcss-breakpoint-val == "" { 765 | @if $border-radius-val == "50%" { 766 | .#{$selector-border-radius-key}-br50p:#{$selector-border-radius-val} { border-radius: #{$border-radius-val}; } 767 | } 768 | @else { 769 | .#{$selector-border-radius-key}-br#{$border-radius-val}:#{$selector-border-radius-val} { border-radius: #{$border-radius-val}px; } 770 | .#{$selector-border-radius-key}-brtl#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; } 771 | .#{$selector-border-radius-key}-brtr#{$border-radius-val}:#{$selector-border-radius-val} { border-top-right-radius: #{$border-radius-val}px; } 772 | .#{$selector-border-radius-key}-brbl#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; } 773 | .#{$selector-border-radius-key}-brbr#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-right-radius: #{$border-radius-val}px; } 774 | .#{$selector-border-radius-key}-brl#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-bottom-left-radius: #{$border-radius-val}px; } 775 | .#{$selector-border-radius-key}-brr#{$border-radius-val}:#{$selector-border-radius-val} { border-top-right-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 776 | .#{$selector-border-radius-key}-brt#{$border-radius-val}:#{$selector-border-radius-val} { border-top-left-radius: #{$border-radius-val}px; border-top-right-radius: #{$border-radius-val}px; } 777 | .#{$selector-border-radius-key}-brb#{$border-radius-val}:#{$selector-border-radius-val} { border-bottom-left-radius: #{$border-radius-val}px; border-bottom-right-radius: #{$border-radius-val}px; } 778 | } 779 | } 780 | } 781 | } 782 | @each $selector-position-key, $selector-position-val in $selector-position { 783 | @each $position-key, $position-val in $property-position { 784 | @if $selector-position-val == "breakpoint-class" { 785 | .#{$pixelperfectcss-breakpoint-key}-#{$position-key} { position: #{$position-val}; } 786 | } 787 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-position-val == "not-breakpoint-class" { 788 | .#{$pixelperfectcss-breakpoint-key}-#{$position-key} { position: #{$position-val}; } 789 | } 790 | @else if $pixelperfectcss-breakpoint-val == "" { 791 | .#{$selector-position-key}-#{$position-key}:#{$selector-position-val} { position: #{$position-val}; } 792 | } 793 | } 794 | } 795 | @each $selector-position-value-key, $selector-position-value-val in $selector-position-value { 796 | @each $position-value-val in $property-position-value { 797 | @if $selector-position-value-val == "breakpoint-class" { 798 | @if $position-value-val == "100%" { 799 | .#{$pixelperfectcss-breakpoint-key}-l100p { left: #{$position-value-val}; } 800 | .#{$pixelperfectcss-breakpoint-key}-r100p { right: #{$position-value-val}; } 801 | .#{$pixelperfectcss-breakpoint-key}-t100p { top: #{$position-value-val}; } 802 | .#{$pixelperfectcss-breakpoint-key}-b100p { bottom: #{$position-value-val}; } 803 | } 804 | @else if $position-value-val == "50%" { 805 | .#{$pixelperfectcss-breakpoint-key}-l50p { left: #{$position-value-val}; } 806 | .#{$pixelperfectcss-breakpoint-key}-r50p { right: #{$position-value-val}; } 807 | .#{$pixelperfectcss-breakpoint-key}-t50p { top: #{$position-value-val}; } 808 | .#{$pixelperfectcss-breakpoint-key}-b50p { bottom: #{$position-value-val}; } 809 | } 810 | @else { 811 | .#{$pixelperfectcss-breakpoint-key}-l#{$position-value-val} { left: #{$position-value-val}px; } 812 | .#{$pixelperfectcss-breakpoint-key}-r#{$position-value-val} { right: #{$position-value-val}px; } 813 | .#{$pixelperfectcss-breakpoint-key}-t#{$position-value-val} { top: #{$position-value-val}px; } 814 | .#{$pixelperfectcss-breakpoint-key}-b#{$position-value-val} { bottom: #{$position-value-val}px; } 815 | } 816 | } 817 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-position-value-val == "not-breakpoint-class" { 818 | @if $position-value-val == "100%" { 819 | .#{$pixelperfectcss-breakpoint-key}-l100p { left: #{$position-value-val}; } 820 | .#{$pixelperfectcss-breakpoint-key}-r100p { right: #{$position-value-val}; } 821 | .#{$pixelperfectcss-breakpoint-key}-t100p { top: #{$position-value-val}; } 822 | .#{$pixelperfectcss-breakpoint-key}-b100p { bottom: #{$position-value-val}; } 823 | } 824 | @else if $position-value-val == "50%" { 825 | .#{$pixelperfectcss-breakpoint-key}-l50p { left: #{$position-value-val}; } 826 | .#{$pixelperfectcss-breakpoint-key}-r50p { right: #{$position-value-val}; } 827 | .#{$pixelperfectcss-breakpoint-key}-t50p { top: #{$position-value-val}; } 828 | .#{$pixelperfectcss-breakpoint-key}-b50p { bottom: #{$position-value-val}; } 829 | } 830 | @else { 831 | .#{$pixelperfectcss-breakpoint-key}-l#{$position-value-val} { left: #{$position-value-val}px; } 832 | .#{$pixelperfectcss-breakpoint-key}-r#{$position-value-val} { right: #{$position-value-val}px; } 833 | .#{$pixelperfectcss-breakpoint-key}-t#{$position-value-val} { top: #{$position-value-val}px; } 834 | .#{$pixelperfectcss-breakpoint-key}-b#{$position-value-val} { bottom: #{$position-value-val}px; } 835 | } 836 | } 837 | @else if $pixelperfectcss-breakpoint-val == "" { 838 | @if $position-value-val == "100%" { 839 | .#{$selector-position-value-key}-l100p:#{$selector-position-value-val} { left: #{$position-value-val}; } 840 | .#{$selector-position-value-key}-r100p:#{$selector-position-value-val} { right: #{$position-value-val}; } 841 | .#{$selector-position-value-key}-t100p:#{$selector-position-value-val} { top: #{$position-value-val}; } 842 | .#{$selector-position-value-key}-b100p:#{$selector-position-value-val} { bottom: #{$position-value-val}; } 843 | } 844 | @else if $position-value-val == "50%" { 845 | .#{$selector-position-value-key}-l50p:#{$selector-position-value-val} { left: #{$position-value-val}; } 846 | .#{$selector-position-value-key}-r50p:#{$selector-position-value-val} { right: #{$position-value-val}; } 847 | .#{$selector-position-value-key}-t50p:#{$selector-position-value-val} { top: #{$position-value-val}; } 848 | .#{$selector-position-value-key}-b50p:#{$selector-position-value-val} { bottom: #{$position-value-val}; } 849 | } 850 | @else { 851 | .#{$selector-position-value-key}-l#{$position-value-val}:#{$selector-position-value-val} { left: #{$position-value-val}px; } 852 | .#{$selector-position-value-key}-r#{$position-value-val}:#{$selector-position-value-val} { right: #{$position-value-val}px; } 853 | .#{$selector-position-value-key}-t#{$position-value-val}:#{$selector-position-value-val} { top: #{$position-value-val}px; } 854 | .#{$selector-position-value-key}-b#{$position-value-val}:#{$selector-position-value-val} { bottom: #{$position-value-val}px; } 855 | } 856 | } 857 | } 858 | } 859 | @each $selector-z-index-key, $selector-z-index-val in $selector-z-index { 860 | @each $z-index-val in $property-z-index { 861 | @if $selector-z-index-val == "breakpoint-class" { 862 | .#{$pixelperfectcss-breakpoint-key}-zi#{$z-index-val} { z-index: #{$z-index-val}; } 863 | } 864 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-z-index-val == "not-breakpoint-class" { 865 | .#{$pixelperfectcss-breakpoint-key}-zi#{$z-index-val} { z-index: #{$z-index-val}; } 866 | } 867 | @else if $pixelperfectcss-breakpoint-val == "" { 868 | .#{$selector-z-index-key}-zi#{$z-index-val}:#{$selector-z-index-val} { z-index: #{$z-index-val}; } 869 | } 870 | } 871 | } 872 | @each $selector-transform-key, $selector-transform-val in $selector-transform { 873 | @each $transform-key, $transform-val in $property-transform { 874 | @if $selector-transform-val == "breakpoint-class" { 875 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 876 | } 877 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-transform-val == "not-breakpoint-class" { 878 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 879 | } 880 | @else if $pixelperfectcss-breakpoint-val == "" { 881 | .#{$pixelperfectcss-breakpoint-key}-#{$transform-key}:#{$selector-transform-val} { -webkit-transform: #{$transform-val}; -moz-transform: #{$transform-val}; -ms-transform: #{$transform-val}; -o-transform: #{$transform-val}; transform: #{$transform-val}; } 882 | .#{$selector-transform-key}-#{$transform-key} { transform: #{$transform-val}; } 883 | } 884 | } 885 | } 886 | @each $selector-transform-translate-key, $selector-transform-translate-val in $selector-transform-translate { 887 | @each $transform-translate-key, $transform-translate-val in $property-transform-translate { 888 | @if $selector-transform-translate-val == "breakpoint-class" { 889 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 890 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 891 | } 892 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-transform-translate-val == "not-breakpoint-class" { 893 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 894 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 895 | } 896 | @else if $pixelperfectcss-breakpoint-val == "" { 897 | .#{$pixelperfectcss-breakpoint-key}-ttx#{$transform-translate-key}p:#{$selector-transform-translate-val} { -webkit-transform: translateX(#{$transform-translate-val}); -moz-transform: translateX(#{$transform-translate-val}); -ms-transform: translateX(#{$transform-translate-val}); -o-transform: translateX(#{$transform-translate-val}); transform: translateX(#{$transform-translate-val}); } 898 | .#{$pixelperfectcss-breakpoint-key}-tty#{$transform-translate-key}p:#{$selector-transform-translate-val} { -webkit-transform: translateY(#{$transform-translate-val}); -moz-transform: translateY(#{$transform-translate-val}); -ms-transform: translateY(#{$transform-translate-val}); -o-transform: translateY(#{$transform-translate-val}); transform: translateY(#{$transform-translate-val}); } 899 | } 900 | } 901 | } 902 | @each $selector-display-key, $selector-display-val in $selector-display { 903 | @each $display-key, $display-val in $property-display { 904 | @if $selector-display-val == "breakpoint-class" { 905 | .#{$pixelperfectcss-breakpoint-key}-#{$display-key} { display: #{$display-val}; } 906 | } 907 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-display-val == "not-breakpoint-class" { 908 | .#{$pixelperfectcss-breakpoint-key}-#{$display-key} { display: #{$display-val}; } 909 | } 910 | @else if $pixelperfectcss-breakpoint-val == "" { 911 | .#{$selector-display-key}-#{$display-key}:#{$selector-display-val} { display: #{$display-val}; } 912 | } 913 | } 914 | } 915 | @each $selector-width-key, $selector-width-val in $selector-width { 916 | @each $width-val in $property-width { 917 | @if $selector-width-val == "breakpoint-class" { 918 | .#{$pixelperfectcss-breakpoint-key}-w#{$width-val} { width: #{$width-val}px; } 919 | } 920 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-width-val == "not-breakpoint-class" { 921 | .#{$pixelperfectcss-breakpoint-key}-w#{$width-val} { width: #{$width-val}px; } 922 | } 923 | @else if $pixelperfectcss-breakpoint-val == "" { 924 | .#{$selector-width-key}-w#{$width-val}:#{$selector-width-val} { width: #{$width-val}px; } 925 | } 926 | } 927 | } 928 | @each $selector-max-width-key, $selector-max-width-val in $selector-max-width { 929 | @each $max-width-val in $property-max-width { 930 | @if $selector-max-width-val == "breakpoint-class" { 931 | .#{$pixelperfectcss-breakpoint-key}-maw#{$max-width-val} { max-width: #{$max-width-val}px; } 932 | } 933 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-max-width-val == "not-breakpoint-class" { 934 | .#{$pixelperfectcss-breakpoint-key}-maw#{$max-width-val} { max-width: #{$max-width-val}px; } 935 | } 936 | @else if $pixelperfectcss-breakpoint-val == "" { 937 | .#{$selector-max-width-key}-maw#{$max-width-val}:#{$selector-max-width-val} { max-width: #{$max-width-val}px; } 938 | } 939 | } 940 | } 941 | @each $selector-min-width-key, $selector-min-width-val in $selector-min-width { 942 | @each $min-width-val in $property-min-width { 943 | @if $selector-min-width-val == "breakpoint-class" { 944 | .#{$pixelperfectcss-breakpoint-key}-miw#{$min-width-val} { min-width: #{$min-width-val}px; } 945 | } 946 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-min-width-val == "not-breakpoint-class" { 947 | .#{$pixelperfectcss-breakpoint-key}-miw#{$min-width-val} { min-width: #{$min-width-val}px; } 948 | } 949 | @else if $pixelperfectcss-breakpoint-val == "" { 950 | .#{$selector-min-width-key}-miw#{$min-width-val}:#{$selector-min-width-val} { min-width: #{$min-width-val}px; } 951 | } 952 | } 953 | } 954 | @each $selector-line-height-key, $selector-line-height-val in $selector-line-height { 955 | @each $line-height-val in $property-line-height { 956 | @if $selector-line-height-val == "breakpoint-class" { 957 | .#{$pixelperfectcss-breakpoint-key}-lh#{$line-height-val} { line-height: #{$line-height-val}px; } 958 | } 959 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-line-height-val == "not-breakpoint-class" { 960 | .#{$pixelperfectcss-breakpoint-key}-lh#{$line-height-val} { line-height: #{$line-height-val}px; } 961 | } 962 | @else if $pixelperfectcss-breakpoint-val == "" { 963 | .#{$selector-line-height-key}-lh#{$line-height-val}:#{$selector-line-height-val} { line-height: #{$line-height-val}px; } 964 | } 965 | } 966 | } 967 | @each $selector-height-key, $selector-height-val in $selector-height { 968 | @each $height-val in $property-height { 969 | @if $selector-height-val == "breakpoint-class" { 970 | .#{$pixelperfectcss-breakpoint-key}-h#{$height-val} { height: #{$height-val}px; } 971 | } 972 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-height-val == "not-breakpoint-class" { 973 | .#{$pixelperfectcss-breakpoint-key}-h#{$height-val} { height: #{$height-val}px; } 974 | } 975 | @else if $pixelperfectcss-breakpoint-val == "" { 976 | .#{$selector-height-key}-h#{$height-val}:#{$selector-height-val} { height: #{$height-val}px; } 977 | } 978 | } 979 | } 980 | @each $selector-max-height-key, $selector-max-height-val in $selector-max-height { 981 | @each $max-height-val in $property-max-height { 982 | @if $selector-max-height-val == "breakpoint-class" { 983 | .#{$pixelperfectcss-breakpoint-key}-mah#{$max-height-val} { max-height: #{$max-height-val}px; } 984 | } 985 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-max-height-val == "not-breakpoint-class" { 986 | .#{$pixelperfectcss-breakpoint-key}-mah#{$max-height-val} { max-height: #{$max-height-val}px; } 987 | } 988 | @else if $pixelperfectcss-breakpoint-val == "" { 989 | .#{$selector-max-height-key}-mah#{$max-height-val}:#{$selector-max-height-val} { max-height: #{$max-height-val}px; } 990 | } 991 | } 992 | } 993 | @each $selector-min-height-key, $selector-min-height-val in $selector-min-height { 994 | @each $min-height-val in $property-min-height { 995 | @if $selector-min-height-val == "breakpoint-class" { 996 | .#{$pixelperfectcss-breakpoint-key}-mih#{$min-height-val} { min-height: #{$min-height-val}px; } 997 | } 998 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-min-height-val == "not-breakpoint-class" { 999 | .#{$pixelperfectcss-breakpoint-key}-mih#{$min-height-val} { min-height: #{$min-height-val}px; } 1000 | } 1001 | @else if $pixelperfectcss-breakpoint-val == "" { 1002 | .#{$selector-min-height-key}-mih#{$min-height-val}:#{$selector-min-height-val} { min-height: #{$min-height-val}px; } 1003 | } 1004 | } 1005 | } 1006 | @each $selector-margin-key, $selector-margin-val in $selector-margin { 1007 | @each $margin-val in $property-margin { 1008 | @if $selector-margin-val == "breakpoint-class" { 1009 | @if $margin-val == "auto" { 1010 | .#{$pixelperfectcss-breakpoint-key}-ma { margin-left: #{$margin-val}; margin-right: #{$margin-val}; } 1011 | } 1012 | @else { 1013 | .#{$pixelperfectcss-breakpoint-key}-m#{$margin-val} { margin: #{$margin-val}px; } 1014 | .#{$pixelperfectcss-breakpoint-key}-ml#{$margin-val} { margin-left: #{$margin-val}px; } 1015 | .#{$pixelperfectcss-breakpoint-key}-mr#{$margin-val} { margin-right: #{$margin-val}px; } 1016 | .#{$pixelperfectcss-breakpoint-key}-mt#{$margin-val} { margin-top: #{$margin-val}px; } 1017 | .#{$pixelperfectcss-breakpoint-key}-mb#{$margin-val} { margin-bottom: #{$margin-val}px; } 1018 | .#{$pixelperfectcss-breakpoint-key}-mx#{$margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 1019 | .#{$pixelperfectcss-breakpoint-key}-my#{$margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 1020 | } 1021 | } 1022 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-margin-val == "not-breakpoint-class" { 1023 | @if $margin-val == "auto" { 1024 | .#{$pixelperfectcss-breakpoint-key}-ma { margin-left: #{$margin-val}; margin-right: #{$margin-val}; } 1025 | } 1026 | @else { 1027 | .#{$pixelperfectcss-breakpoint-key}-m#{$margin-val} { margin: #{$margin-val}px; } 1028 | .#{$pixelperfectcss-breakpoint-key}-ml#{$margin-val} { margin-left: #{$margin-val}px; } 1029 | .#{$pixelperfectcss-breakpoint-key}-mr#{$margin-val} { margin-right: #{$margin-val}px; } 1030 | .#{$pixelperfectcss-breakpoint-key}-mt#{$margin-val} { margin-top: #{$margin-val}px; } 1031 | .#{$pixelperfectcss-breakpoint-key}-mb#{$margin-val} { margin-bottom: #{$margin-val}px; } 1032 | .#{$pixelperfectcss-breakpoint-key}-mx#{$margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 1033 | .#{$pixelperfectcss-breakpoint-key}-my#{$margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 1034 | } 1035 | } 1036 | @else if $pixelperfectcss-breakpoint-val == "" { 1037 | .#{$selector-margin-key}-m#{$margin-val}:#{$selector-margin-val} { margin: #{$margin-val}px; } 1038 | .#{$selector-margin-key}-ml#{$margin-val}:#{$selector-margin-val} { margin-left: #{$margin-val}px; } 1039 | .#{$selector-margin-key}-mr#{$margin-val}:#{$selector-margin-val} { margin-right: #{$margin-val}px; } 1040 | .#{$selector-margin-key}-mt#{$margin-val}:#{$selector-margin-val} { margin-top: #{$margin-val}px; } 1041 | .#{$selector-margin-key}-mb#{$margin-val}:#{$selector-margin-val} { margin-bottom: #{$margin-val}px; } 1042 | .#{$selector-margin-key}-mx#{$margin-val}:#{$selector-margin-val} { margin-left: #{$margin-val}px; margin-right: #{$margin-val}px; } 1043 | .#{$selector-margin-key}-my#{$margin-val}:#{$selector-margin-val} { margin-top: #{$margin-val}px; margin-bottom: #{$margin-val}px; } 1044 | } 1045 | } 1046 | } 1047 | @each $selector-padding-key, $selector-padding-val in $selector-padding { 1048 | @each $padding-val in $property-padding { 1049 | @if $selector-padding-val == "breakpoint-class" { 1050 | .#{$pixelperfectcss-breakpoint-key}-p#{$padding-val} { padding: #{$padding-val}px; } 1051 | .#{$pixelperfectcss-breakpoint-key}-pl#{$padding-val} { padding-left: #{$padding-val}px; } 1052 | .#{$pixelperfectcss-breakpoint-key}-pr#{$padding-val} { padding-right: #{$padding-val}px; } 1053 | .#{$pixelperfectcss-breakpoint-key}-pt#{$padding-val} { padding-top: #{$padding-val}px; } 1054 | .#{$pixelperfectcss-breakpoint-key}-pb#{$padding-val} { padding-bottom: #{$padding-val}px; } 1055 | .#{$pixelperfectcss-breakpoint-key}-px#{$padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 1056 | .#{$pixelperfectcss-breakpoint-key}-py#{$padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 1057 | } 1058 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-padding-val == "not-breakpoint-class" { 1059 | .#{$pixelperfectcss-breakpoint-key}-p#{$padding-val} { padding: #{$padding-val}px; } 1060 | .#{$pixelperfectcss-breakpoint-key}-pl#{$padding-val} { padding-left: #{$padding-val}px; } 1061 | .#{$pixelperfectcss-breakpoint-key}-pr#{$padding-val} { padding-right: #{$padding-val}px; } 1062 | .#{$pixelperfectcss-breakpoint-key}-pt#{$padding-val} { padding-top: #{$padding-val}px; } 1063 | .#{$pixelperfectcss-breakpoint-key}-pb#{$padding-val} { padding-bottom: #{$padding-val}px; } 1064 | .#{$pixelperfectcss-breakpoint-key}-px#{$padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 1065 | .#{$pixelperfectcss-breakpoint-key}-py#{$padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 1066 | } 1067 | @else if $pixelperfectcss-breakpoint-val == "" { 1068 | .#{$selector-padding-key}-p#{$padding-val}:#{$selector-padding-val} { padding: #{$padding-val}px; } 1069 | .#{$selector-padding-key}-pl#{$padding-val}:#{$selector-padding-val} { padding-left: #{$padding-val}px; } 1070 | .#{$selector-padding-key}-pr#{$padding-val}:#{$selector-padding-val} { padding-right: #{$padding-val}px; } 1071 | .#{$selector-padding-key}-pt#{$padding-val}:#{$selector-padding-val} { padding-top: #{$padding-val}px; } 1072 | .#{$selector-padding-key}-pb#{$padding-val}:#{$selector-padding-val} { padding-bottom: #{$padding-val}px; } 1073 | .#{$selector-padding-key}-px#{$padding-val}:#{$selector-padding-val} { padding-left: #{$padding-val}px; padding-right: #{$padding-val}px; } 1074 | .#{$selector-padding-key}-py#{$padding-val}:#{$selector-padding-val} { padding-top: #{$padding-val}px; padding-bottom: #{$padding-val}px; } 1075 | } 1076 | } 1077 | } 1078 | @each $selector-overflow-key, $selector-overflow-val in $selector-overflow { 1079 | @each $overflow-key, $overflow-val in $property-overflow { 1080 | @if $selector-overflow-val == "breakpoint-class" { 1081 | .#{$pixelperfectcss-breakpoint-key}-#{$overflow-key} { overflow: #{$overflow-val}; } 1082 | } 1083 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-overflow-val == "not-breakpoint-class" { 1084 | .#{$pixelperfectcss-breakpoint-key}-#{$overflow-key} { overflow: #{$overflow-val}; } 1085 | } 1086 | @else if $pixelperfectcss-breakpoint-val == "" { 1087 | .#{$selector-overflow-key}-#{$overflow-key}:#{$selector-overflow-val} { overflow: #{$overflow-val}; } 1088 | } 1089 | } 1090 | } 1091 | @each $selector-opacity-key, $selector-opacity-val in $selector-opacity { 1092 | @each $opacity-key, $opacity-val in $property-opacity { 1093 | @if $selector-opacity-val == "breakpoint-class" { 1094 | .#{$pixelperfectcss-breakpoint-key}-o#{$opacity-key} { opacity: #{$opacity-val}; } 1095 | } 1096 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-opacity-val == "not-breakpoint-class" { 1097 | .#{$pixelperfectcss-breakpoint-key}-o#{$opacity-key} { opacity: #{$opacity-val}; } 1098 | } 1099 | @else if $pixelperfectcss-breakpoint-val == "" { 1100 | .#{$selector-opacity-key}-o#{$opacity-key}:#{$selector-opacity-val} { opacity: #{$opacity-val}; } 1101 | } 1102 | } 1103 | } 1104 | @each $selector-font-size-key, $selector-font-size-val in $selector-font-size { 1105 | @each $font-size-val in $property-font-size { 1106 | @if $selector-font-size-val == "breakpoint-class" { 1107 | .#{$pixelperfectcss-breakpoint-key}-fs#{$font-size-val} { font-size: #{$font-size-val}px; } 1108 | } 1109 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-size-val == "not-breakpoint-class" { 1110 | .#{$pixelperfectcss-breakpoint-key}-fs#{$font-size-val} { font-size: #{$font-size-val}px; } 1111 | } 1112 | @else if $pixelperfectcss-breakpoint-val == "" { 1113 | .#{$selector-font-size-key}-fs#{$font-size-val}:#{$selector-font-size-val} { font-size: #{$font-size-val}px; } 1114 | } 1115 | } 1116 | } 1117 | @each $selector-text-align-key, $selector-text-align-val in $selector-text-align { 1118 | @each $text-align-key, $text-align-val in $property-text-align { 1119 | @if $selector-text-align-val == "breakpoint-class" { 1120 | .#{$pixelperfectcss-breakpoint-key}-#{$text-align-key} { text-align: #{$text-align-val}; } 1121 | } 1122 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-align-val == "not-breakpoint-class" { 1123 | .#{$pixelperfectcss-breakpoint-key}-#{$text-align-key} { text-align: #{$text-align-val}; } 1124 | } 1125 | @else if $pixelperfectcss-breakpoint-val == "" { 1126 | .#{$selector-text-align-key}-#{$text-align-key}:#{$selector-text-align-val} { text-align: #{$text-align-val}; } 1127 | } 1128 | } 1129 | } 1130 | @each $selector-letter-spacing-key, $selector-letter-spacing-val in $selector-letter-spacing { 1131 | @each $letter-spacing-val in $property-letter-spacing { 1132 | @if $selector-letter-spacing-val == "breakpoint-class" { 1133 | .#{$pixelperfectcss-breakpoint-key}-ls#{$letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 1134 | } 1135 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-letter-spacing-val == "not-breakpoint-class" { 1136 | .#{$pixelperfectcss-breakpoint-key}-ls#{$letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 1137 | } 1138 | @else if $pixelperfectcss-breakpoint-val == "" { 1139 | .#{$selector-letter-spacing-key}-ls#{$letter-spacing-val}:#{$selector-letter-spacing-val} { letter-spacing: #{$letter-spacing-val}px; } 1140 | } 1141 | } 1142 | } 1143 | @each $selector-font-weight-key, $selector-font-weight-val in $selector-font-weight { 1144 | @each $font-weight-val in $property-font-weight { 1145 | @if $selector-font-weight-val == "breakpoint-class" { 1146 | .#{$pixelperfectcss-breakpoint-key}-fw#{$font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 1147 | } 1148 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-weight-val == "not-breakpoint-class" { 1149 | .#{$pixelperfectcss-breakpoint-key}-fw#{$font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 1150 | } 1151 | @else if $pixelperfectcss-breakpoint-val == "" { 1152 | .#{$selector-font-weight-key}-fw#{$font-weight-val}:#{$selector-font-weight-val} { font-style: normal; font-weight: #{$font-weight-val}; } 1153 | } 1154 | } 1155 | } 1156 | @each $selector-font-style-key, $selector-font-style-val in $selector-font-style { 1157 | @each $font-style-key, $font-style-val in $property-font-style { 1158 | @if $selector-font-style-val == "breakpoint-class" { 1159 | .#{$pixelperfectcss-breakpoint-key}-#{$font-style-key} { font-style: #{$font-style-val}; } 1160 | } 1161 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-font-style-val == "not-breakpoint-class" { 1162 | .#{$pixelperfectcss-breakpoint-key}-#{$font-style-key} { font-style: #{$font-style-val}; } 1163 | } 1164 | @else if $pixelperfectcss-breakpoint-val == "" { 1165 | .#{$selector-font-style-key}-#{$font-style-key}:#{$selector-font-style-val} { font-style: #{$font-style-val}; } 1166 | } 1167 | } 1168 | } 1169 | @each $selector-vertical-align-key, $selector-vertical-align-val in $selector-vertical-align { 1170 | @each $vertical-align-key, $vertical-align-val in $property-vertical-align { 1171 | @if $selector-vertical-align-val == "breakpoint-class" { 1172 | .#{$pixelperfectcss-breakpoint-key}-#{$vertical-align-key} { vertical-align: #{$vertical-align-val}; } 1173 | } 1174 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-vertical-align-val == "not-breakpoint-class" { 1175 | .#{$pixelperfectcss-breakpoint-key}-#{$vertical-align-key} { vertical-align: #{$vertical-align-val}; } 1176 | } 1177 | @else if $pixelperfectcss-breakpoint-val == "" { 1178 | .#{$selector-vertical-align-key}-#{$vertical-align-key}:#{$selector-vertical-align-val} { vertical-align: #{$vertical-align-val}; } 1179 | } 1180 | } 1181 | } 1182 | @each $selector-text-transform-key, $selector-text-transform-val in $selector-text-transform { 1183 | @each $text-transform-key, $text-transform-val in $property-text-transform { 1184 | @if $selector-text-transform-val == "breakpoint-class" { 1185 | .#{$pixelperfectcss-breakpoint-key}-#{$text-transform-key} { text-transform: #{$text-transform-val}; } 1186 | } 1187 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-transform-val == "not-breakpoint-class" { 1188 | .#{$pixelperfectcss-breakpoint-key}-#{$text-transform-key} { text-transform: #{$text-transform-val}; } 1189 | } 1190 | @else if $pixelperfectcss-breakpoint-val == "" { 1191 | .#{$selector-text-transform-key}-#{$text-transform-key}:#{$selector-text-transform-val} { text-transform: #{$text-transform-val}; } 1192 | } 1193 | } 1194 | } 1195 | @each $selector-text-decoration-key, $selector-text-decoration-val in $selector-text-decoration { 1196 | @each $text-decoration-key, $text-decoration-val in $property-text-decoration { 1197 | @if $selector-text-decoration-val == "breakpoint-class" { 1198 | .#{$pixelperfectcss-breakpoint-key}-#{$text-decoration-key} { text-decoration: #{$text-decoration-val}; } 1199 | } 1200 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-decoration-val == "not-breakpoint-class" { 1201 | .#{$pixelperfectcss-breakpoint-key}-#{$text-decoration-key} { text-decoration: #{$text-decoration-val}; } 1202 | } 1203 | @else if $pixelperfectcss-breakpoint-val == "" { 1204 | .#{$selector-text-decoration-key}-#{$text-decoration-key}:#{$selector-text-decoration-val} { text-decoration: #{$text-decoration-val}; } 1205 | } 1206 | } 1207 | } 1208 | @each $selector-text-overflow-key, $selector-text-overflow-val in $selector-text-overflow { 1209 | @each $text-overflow-key, $text-overflow-val in $property-text-overflow { 1210 | @if $selector-text-overflow-val == "breakpoint-class" { 1211 | .#{$pixelperfectcss-breakpoint-key}-#{$text-overflow-key} { text-overflow: #{$text-overflow-val}; } 1212 | } 1213 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-text-overflow-val == "not-breakpoint-class" { 1214 | .#{$pixelperfectcss-breakpoint-key}-#{$text-overflow-key} { text-overflow: #{$text-overflow-val}; } 1215 | } 1216 | @else if $pixelperfectcss-breakpoint-val == "" { 1217 | .#{$selector-text-overflow-key}-#{$text-overflow-key}:#{$selector-text-overflow-val} { text-overflow: #{$text-overflow-val}; } 1218 | } 1219 | } 1220 | } 1221 | @each $selector-white-space-key, $selector-white-space-val in $selector-white-space { 1222 | @each $white-space-key, $white-space-val in $property-white-space { 1223 | @if $selector-white-space-val == "breakpoint-class" { 1224 | .#{$pixelperfectcss-breakpoint-key}-#{$white-space-key} { white-space: #{$white-space-val}; } 1225 | } 1226 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-white-space-val == "not-breakpoint-class" { 1227 | .#{$pixelperfectcss-breakpoint-key}-#{$white-space-key} { white-space: #{$white-space-val}; } 1228 | } 1229 | @else if $pixelperfectcss-breakpoint-val == "" { 1230 | .#{$selector-white-space-key}-#{$white-space-key}:#{$selector-white-space-val} { white-space: #{$white-space-val}; } 1231 | } 1232 | } 1233 | } 1234 | @each $selector-word-break-key, $selector-word-break-val in $selector-word-break { 1235 | @each $word-break-key, $word-break-val in $property-word-break { 1236 | @if $selector-word-break-val == "breakpoint-class" { 1237 | .#{$pixelperfectcss-breakpoint-key}-#{$word-break-key} { word-break: #{$word-break-val}; } 1238 | } 1239 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-word-break-val == "not-breakpoint-class" { 1240 | .#{$pixelperfectcss-breakpoint-key}-#{$word-break-key} { word-break: #{$word-break-val}; } 1241 | } 1242 | @else if $pixelperfectcss-breakpoint-val == "" { 1243 | .#{$selector-word-break-key}-#{$word-break-key}:#{$selector-word-break-val} { word-break: #{$word-break-val}; } 1244 | } 1245 | } 1246 | } 1247 | @each $selector-cursor-key, $selector-cursor-val in $selector-cursor { 1248 | @each $cursor-key, $cursor-val in $property-cursor { 1249 | @if $selector-cursor-val == "breakpoint-class" { 1250 | .#{$pixelperfectcss-breakpoint-key}-#{$cursor-key} { cursor: #{$cursor-val}; } 1251 | } 1252 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-cursor-val == "not-breakpoint-class" { 1253 | .#{$pixelperfectcss-breakpoint-key}-#{$cursor-key} { cursor: #{$cursor-val}; } 1254 | } 1255 | @else if $pixelperfectcss-breakpoint-val == "" { 1256 | .#{$selector-cursor-key}-#{$cursor-key}:#{$selector-cursor-val} { cursor: #{$cursor-val}; } 1257 | } 1258 | } 1259 | } 1260 | @each $selector-user-select-key, $selector-user-select-val in $selector-user-select { 1261 | @each $user-select-key, $user-select-val in $property-user-select { 1262 | @if $selector-user-select-val == "breakpoint-class" { 1263 | .#{$pixelperfectcss-breakpoint-key}-#{$user-select-key} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 1264 | } 1265 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-user-select-val == "not-breakpoint-class" { 1266 | .#{$pixelperfectcss-breakpoint-key}-#{$user-select-key} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 1267 | } 1268 | @else if $pixelperfectcss-breakpoint-val == "" { 1269 | .#{$selector-user-select-key}-#{$user-select-key}:#{$selector-user-select-val} { -webkit-user-select: #{$user-select-val}; -moz-user-select: #{$user-select-val}; -ms-user-select: #{$user-select-val}; user-select: #{$user-select-val}; } 1270 | } 1271 | } 1272 | } 1273 | @each $selector-pointer-events-key, $selector-pointer-events-val in $selector-pointer-events { 1274 | @each $pointer-events-key, $pointer-events-val in $property-pointer-events { 1275 | @if $selector-pointer-events-val == "breakpoint-class" { 1276 | .#{$pixelperfectcss-breakpoint-key}-#{$pointer-events-key} { pointer-events: #{$pointer-events-val}; } 1277 | } 1278 | @else if $pixelperfectcss-breakpoint-val == "" and $selector-pointer-events-val == "not-breakpoint-class" { 1279 | .#{$pixelperfectcss-breakpoint-key}-#{$pointer-events-key} { pointer-events: #{$pointer-events-val}; } 1280 | } 1281 | @else if $pixelperfectcss-breakpoint-val == "" { 1282 | .#{$selector-pointer-events-key}-#{$pointer-events-key}:#{$selector-pointer-events-val} { pointer-events: #{$pointer-events-val}; } 1283 | } 1284 | } 1285 | } 1286 | } 1287 | } 1288 | } 1289 | --------------------------------------------------------------------------------