1<===> input.scss 2@import "lib/_bourbon.scss"; 3 4box:hover { 5 @include animation-name(scale, slide); 6 @include animation-duration(2s); 7 @include animation-timing-function(ease); 8 @include animation-iteration-count(infinite); 9 10 // Animation shorthand works the same as the CSS3 animation shorthand 11 @include animation(scale 1s ease-in, slide 2s ease); 12} 13 14div { 15 @include appearance(none); 16 17 /* boo boo boo */ 18 // Multiple image assets 19 @include background-image(url("/images/a.png"), url("images/b.png")); 20 21 // Image asset with a linear-gradient 22 @include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%)); 23 24 // Multiple linear-gradients - Demo 25 @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 26 linear-gradient(#4e7ba3, darken(#4e7ba4, 10%))); 27 28 // NOT SUPPORTED - Multiple image assets with shorthand notation 29 @include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat); 30} 31 32<===> lib/_bourbon-deprecated-upcoming.scss 33//************************************************************************// 34// These mixins/functions are deprecated 35// They will be removed in the next MAJOR version release 36//************************************************************************// 37@mixin box-shadow ($shadows...) { 38 @include prefixer(box-shadow, $shadows, spec); 39 @warn "box-shadow is deprecated and will be removed in the next major version release"; 40} 41 42@mixin background-size ($lengths...) { 43 @include prefixer(background-size, $lengths, spec); 44 @warn "background-size is deprecated and will be removed in the next major version release"; 45} 46 47<===> lib/_bourbon.scss 48// Custom Helpers 49@import "helpers/deprecated-webkit-gradient"; 50@import "helpers/gradient-positions-parser"; 51@import "helpers/linear-positions-parser"; 52@import "helpers/radial-arg-parser"; 53@import "helpers/radial-positions-parser"; 54@import "helpers/render-gradients"; 55@import "helpers/shape-size-stripper"; 56 57// Custom Functions 58@import "functions/compact"; 59@import "functions/flex-grid"; 60@import "functions/grid-width"; 61@import "functions/linear-gradient"; 62@import "functions/modular-scale"; 63@import "functions/px-to-em"; 64@import "functions/radial-gradient"; 65@import "functions/tint-shade"; 66@import "functions/transition-property-name"; 67 68// CSS3 Mixins 69@import "css3/animation"; 70@import "css3/appearance"; 71@import "css3/backface-visibility"; 72@import "css3/background"; 73@import "css3/background-image"; 74@import "css3/border-image"; 75@import "css3/border-radius"; 76@import "css3/box-sizing"; 77@import "css3/columns"; 78@import "css3/flex-box"; 79@import "css3/font-face"; 80@import "css3/hidpi-media-query"; 81@import "css3/image-rendering"; 82@import "css3/inline-block"; 83@import "css3/keyframes"; 84@import "css3/linear-gradient"; 85@import "css3/perspective"; 86@import "css3/radial-gradient"; 87@import "css3/transform"; 88@import "css3/transition"; 89@import "css3/user-select"; 90@import "css3/placeholder"; 91 92// Addons & other mixins 93@import "addons/button"; 94@import "addons/clearfix"; 95@import "addons/font-family"; 96@import "addons/hide-text"; 97@import "addons/html5-input-types"; 98@import "addons/position"; 99@import "addons/prefixer"; 100@import "addons/retina-image"; 101@import "addons/size"; 102@import "addons/timing-functions"; 103@import "addons/triangle"; 104 105// Soon to be deprecated Mixins 106@import "bourbon-deprecated-upcoming"; 107 108<===> lib/addons/_button.scss 109@mixin button ($style: simple, $base-color: #4294f0) { 110 111 @if type-of($style) == color { 112 $base-color: $style; 113 $style: simple; 114 } 115 116 // Grayscale button 117 @if $base-color == grayscale($base-color) { 118 @if $style == simple { 119 @include simple($base-color, $grayscale: true); 120 } 121 122 @else if $style == shiny { 123 @include shiny($base-color, $grayscale: true); 124 } 125 126 @else if $style == pill { 127 @include pill($base-color, $grayscale: true); 128 } 129 } 130 131 // Colored button 132 @else { 133 @if $style == simple { 134 @include simple($base-color); 135 } 136 137 @else if $style == shiny { 138 @include shiny($base-color); 139 } 140 141 @else if $style == pill { 142 @include pill($base-color); 143 } 144 } 145 146 &:disabled { 147 opacity: 0.5; 148 cursor: not-allowed; 149 } 150} 151 152 153// Simple Button 154//************************************************************************// 155@mixin simple($base-color, $grayscale: false) { 156 $color: hsl(0, 0, 100%); 157 $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 158 $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 159 $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 160 $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 161 162 @if lightness($base-color) > 70% { 163 $color: hsl(0, 0, 20%); 164 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 165 } 166 167 @if $grayscale == true { 168 $border: grayscale($border); 169 $inset-shadow: grayscale($inset-shadow); 170 $stop-gradient: grayscale($stop-gradient); 171 $text-shadow: grayscale($text-shadow); 172 } 173 174 border: 1px solid $border; 175 border-radius: 3px; 176 box-shadow: inset 0 1px 0 0 $inset-shadow; 177 color: $color; 178 display: inline-block; 179 font-size: 11px; 180 font-weight: bold; 181 @include linear-gradient ($base-color, $stop-gradient); 182 padding: 7px 18px; 183 text-decoration: none; 184 text-shadow: 0 1px 0 $text-shadow; 185 background-clip: padding-box; 186 187 &:hover:not(:disabled) { 188 $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 189 $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 190 $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 191 192 @if $grayscale == true { 193 $base-color-hover: grayscale($base-color-hover); 194 $inset-shadow-hover: grayscale($inset-shadow-hover); 195 $stop-gradient-hover: grayscale($stop-gradient-hover); 196 } 197 198 box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 199 cursor: pointer; 200 @include linear-gradient ($base-color-hover, $stop-gradient-hover); 201 } 202 203 &:active:not(:disabled) { 204 $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 205 $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 206 207 @if $grayscale == true { 208 $border-active: grayscale($border-active); 209 $inset-shadow-active: grayscale($inset-shadow-active); 210 } 211 212 border: 1px solid $border-active; 213 box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; 214 } 215} 216 217 218// Shiny Button 219//************************************************************************// 220@mixin shiny($base-color, $grayscale: false) { 221 $color: hsl(0, 0, 100%); 222 $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 223 $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 224 $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 225 $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 226 $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 227 $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 228 $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 229 230 @if lightness($base-color) > 70% { 231 $color: hsl(0, 0, 20%); 232 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 233 } 234 235 @if $grayscale == true { 236 $border: grayscale($border); 237 $border-bottom: grayscale($border-bottom); 238 $fourth-stop: grayscale($fourth-stop); 239 $inset-shadow: grayscale($inset-shadow); 240 $second-stop: grayscale($second-stop); 241 $text-shadow: grayscale($text-shadow); 242 $third-stop: grayscale($third-stop); 243 } 244 245 border: 1px solid $border; 246 border-bottom: 1px solid $border-bottom; 247 border-radius: 5px; 248 box-shadow: inset 0 1px 0 0 $inset-shadow; 249 color: $color; 250 display: inline-block; 251 font-size: 14px; 252 font-weight: bold; 253 @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 254 padding: 8px 20px; 255 text-align: center; 256 text-decoration: none; 257 text-shadow: 0 -1px 1px $text-shadow; 258 259 &:hover:not(:disabled) { 260 $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 261 $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 262 $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 263 $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 264 265 @if $grayscale == true { 266 $first-stop-hover: grayscale($first-stop-hover); 267 $second-stop-hover: grayscale($second-stop-hover); 268 $third-stop-hover: grayscale($third-stop-hover); 269 $fourth-stop-hover: grayscale($fourth-stop-hover); 270 } 271 272 cursor: pointer; 273 @include linear-gradient(top, $first-stop-hover 0%, 274 $second-stop-hover 50%, 275 $third-stop-hover 50%, 276 $fourth-stop-hover 100%); 277 } 278 279 &:active:not(:disabled) { 280 $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 281 282 @if $grayscale == true { 283 $inset-shadow-active: grayscale($inset-shadow-active); 284 } 285 286 box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; 287 } 288} 289 290 291// Pill Button 292//************************************************************************// 293@mixin pill($base-color, $grayscale: false) { 294 $color: hsl(0, 0, 100%); 295 $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 296 $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 297 $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 298 $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 299 $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 300 $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 301 302 @if lightness($base-color) > 70% { 303 $color: hsl(0, 0, 20%); 304 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 305 } 306 307 @if $grayscale == true { 308 $border-bottom: grayscale($border-bottom); 309 $border-sides: grayscale($border-sides); 310 $border-top: grayscale($border-top); 311 $inset-shadow: grayscale($inset-shadow); 312 $stop-gradient: grayscale($stop-gradient); 313 $text-shadow: grayscale($text-shadow); 314 } 315 316 border: 1px solid $border-top; 317 border-color: $border-top $border-sides $border-bottom; 318 border-radius: 16px; 319 box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; 320 color: $color; 321 display: inline-block; 322 font-size: 11px; 323 font-weight: normal; 324 line-height: 1; 325 @include linear-gradient ($base-color, $stop-gradient); 326 padding: 5px 16px; 327 text-align: center; 328 text-decoration: none; 329 text-shadow: 0 -1px 1px $text-shadow; 330 background-clip: padding-box; 331 332 &:hover:not(:disabled) { 333 $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 334 $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 335 $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 336 $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 337 $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 338 $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 339 $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 340 341 @if $grayscale == true { 342 $base-color-hover: grayscale($base-color-hover); 343 $border-bottom: grayscale($border-bottom); 344 $border-sides: grayscale($border-sides); 345 $border-top: grayscale($border-top); 346 $inset-shadow-hover: grayscale($inset-shadow-hover); 347 $stop-gradient-hover: grayscale($stop-gradient-hover); 348 $text-shadow-hover: grayscale($text-shadow-hover); 349 } 350 351 border: 1px solid $border-top; 352 border-color: $border-top $border-sides $border-bottom; 353 box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 354 cursor: pointer; 355 @include linear-gradient ($base-color-hover, $stop-gradient-hover); 356 text-shadow: 0 -1px 1px $text-shadow-hover; 357 background-clip: padding-box; 358 } 359 360 &:active:not(:disabled) { 361 $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 362 $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 363 $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 364 $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 365 $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 366 367 @if $grayscale == true { 368 $active-color: grayscale($active-color); 369 $border-active: grayscale($border-active); 370 $border-bottom-active: grayscale($border-bottom-active); 371 $inset-shadow-active: grayscale($inset-shadow-active); 372 $text-shadow-active: grayscale($text-shadow-active); 373 } 374 375 background: $active-color; 376 border: 1px solid $border-active; 377 border-bottom: 1px solid $border-bottom-active; 378 box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; 379 text-shadow: 0 -1px 1px $text-shadow-active; 380 } 381} 382 383<===> lib/addons/_clearfix.scss 384// Micro clearfix provides an easy way to contain floats without adding additional markup 385// 386// Example usage: 387// 388// // Contain all floats within .wrapper 389// .wrapper { 390// @include clearfix; 391// .content, 392// .sidebar { 393// float : left; 394// } 395// } 396 397@mixin clearfix { 398 *zoom: 1; 399 400 &:before, 401 &:after { 402 content: " "; 403 display: table; 404 } 405 406 &:after { 407 clear: both; 408 } 409} 410 411// Acknowledgements 412// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) 413 414<===> lib/addons/_font-family.scss 415$georgia: Georgia, Cambria, "Times New Roman", Times, serif; 416$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; 417$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 418$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 419$verdana: Verdana, Geneva, sans-serif; 420 421<===> lib/addons/_hide-text.scss 422@mixin hide-text { 423 color: transparent; 424 font: 0/0 a; 425 text-shadow: none; 426} 427 428<===> lib/addons/_html5-input-types.scss 429//************************************************************************// 430// Generate a variable ($all-text-inputs) with a list of all html5 431// input types that have a text-based input, excluding textarea. 432// http://diveintohtml5.org/forms.html 433//************************************************************************// 434$inputs-list: 'input[type="email"]', 435 'input[type="number"]', 436 'input[type="password"]', 437 'input[type="search"]', 438 'input[type="tel"]', 439 'input[type="text"]', 440 'input[type="url"]', 441 442 // Webkit & Gecko may change the display of these in the future 443 'input[type="color"]', 444 'input[type="date"]', 445 'input[type="datetime"]', 446 'input[type="datetime-local"]', 447 'input[type="month"]', 448 'input[type="time"]', 449 'input[type="week"]'; 450 451$unquoted-inputs-list: (); 452@each $input-type in $inputs-list { 453 $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); 454} 455 456$all-text-inputs: $unquoted-inputs-list; 457 458 459// Hover Pseudo-class 460//************************************************************************// 461$all-text-inputs-hover: (); 462@each $input-type in $unquoted-inputs-list { 463 $input-type-hover: $input-type + ":hover"; 464 $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); 465} 466 467// Focus Pseudo-class 468//************************************************************************// 469$all-text-inputs-focus: (); 470@each $input-type in $unquoted-inputs-list { 471 $input-type-focus: $input-type + ":focus"; 472 $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); 473} 474 475// You must use interpolation on the variable: 476// #{$all-text-inputs} 477// #{$all-text-inputs-hover} 478// #{$all-text-inputs-focus} 479 480// Example 481//************************************************************************// 482// #{$all-text-inputs}, textarea { 483// border: 1px solid red; 484// } 485 486<===> lib/addons/_position.scss 487@mixin position ($position: relative, $coordinates: 0 0 0 0) { 488 489 @if type-of($position) == list { 490 $coordinates: $position; 491 $position: relative; 492 } 493 494 $top: nth($coordinates, 1); 495 $right: nth($coordinates, 2); 496 $bottom: nth($coordinates, 3); 497 $left: nth($coordinates, 4); 498 499 position: $position; 500 501 @if $top == auto { 502 top: $top; 503 } 504 @else if not(unitless($top)) { 505 top: $top; 506 } 507 508 @if $right == auto { 509 right: $right; 510 } 511 @else if not(unitless($right)) { 512 right: $right; 513 } 514 515 @if $bottom == auto { 516 bottom: $bottom; 517 } 518 @else if not(unitless($bottom)) { 519 bottom: $bottom; 520 } 521 522 @if $left == auto { 523 left: $left; 524 } 525 @else if not(unitless($left)) { 526 left: $left; 527 } 528} 529 530<===> lib/addons/_prefixer.scss 531//************************************************************************// 532// Example: @include prefixer(border-radius, $radii, webkit ms spec); 533//************************************************************************// 534$prefix-for-webkit: true !default; 535$prefix-for-mozilla: true !default; 536$prefix-for-microsoft: true !default; 537$prefix-for-opera: true !default; 538$prefix-for-spec: true !default; // required for keyframe mixin 539 540@mixin prefixer ($property, $value, $prefixes) { 541 @each $prefix in $prefixes { 542 @if $prefix == webkit { 543 @if $prefix-for-webkit { 544 -webkit-#{$property}: $value; 545 } 546 } 547 @else if $prefix == moz { 548 @if $prefix-for-mozilla { 549 -moz-#{$property}: $value; 550 } 551 } 552 @else if $prefix == ms { 553 @if $prefix-for-microsoft { 554 -ms-#{$property}: $value; 555 } 556 } 557 @else if $prefix == o { 558 @if $prefix-for-opera { 559 -o-#{$property}: $value; 560 } 561 } 562 @else if $prefix == spec { 563 @if $prefix-for-spec { 564 #{$property}: $value; 565 } 566 } 567 @else { 568 @warn "Unrecognized prefix: #{$prefix}"; 569 } 570 } 571} 572 573@mixin disable-prefix-for-all() { 574 $prefix-for-webkit: false; 575 $prefix-for-mozilla: false; 576 $prefix-for-microsoft: false; 577 $prefix-for-opera: false; 578 $prefix-for-spec: false; 579} 580 581<===> lib/addons/_retina-image.scss 582@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { 583 @if $asset-pipeline { 584 background-image: image_url("#{$filename}.#{$extension}"); 585 } 586 @else { 587 background-image: url("#{$filename}.#{$extension}"); 588 } 589 590 @include hidpi { 591 592 @if $asset-pipeline { 593 @if $retina-filename { 594 background-image: image_url("#{$retina-filename}.#{$extension}"); 595 } 596 @else { 597 background-image: image_url("#{$filename}@2x.#{$extension}"); 598 } 599 } 600 601 @else { 602 @if $retina-filename { 603 background-image: url("#{$retina-filename}.#{$extension}"); 604 } 605 @else { 606 background-image: url("#{$filename}@2x.#{$extension}"); 607 } 608 } 609 610 background-size: $background-size; 611 612 } 613} 614 615<===> lib/addons/_size.scss 616@mixin size($size) { 617 @if length($size) == 1 { 618 @if $size == auto { 619 width: $size; 620 height: $size; 621 } 622 623 @else if unitless($size) { 624 width: $size + px; 625 height: $size + px; 626 } 627 628 @else if not(unitless($size)) { 629 width: $size; 630 height: $size; 631 } 632 } 633 634 // Width x Height 635 @if length($size) == 2 { 636 $width: nth($size, 1); 637 $height: nth($size, 2); 638 639 @if $width == auto { 640 width: $width; 641 } 642 @else if not(unitless($width)) { 643 width: $width; 644 } 645 @else if unitless($width) { 646 width: $width + px; 647 } 648 649 @if $height == auto { 650 height: $height; 651 } 652 @else if not(unitless($height)) { 653 height: $height; 654 } 655 @else if unitless($height) { 656 height: $height + px; 657 } 658 } 659} 660 661<===> lib/addons/_timing-functions.scss 662// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 663// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html 664 665// EASE IN 666$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 667$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 668$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 669$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 670$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 671$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 672$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 673$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 674 675// EASE OUT 676$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 677$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 678$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 679$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 680$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 681$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 682$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 683$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 684 685// EASE IN OUT 686$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 687$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 688$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 689$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 690$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 691$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 692$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 693$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 694 695<===> lib/addons/_triangle.scss 696@mixin triangle ($size, $color, $direction) { 697 height: 0; 698 width: 0; 699 700 @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 701 border-color: transparent; 702 border-style: solid; 703 border-width: $size / 2; 704 705 @if $direction == up { 706 border-bottom-color: $color; 707 708 } @else if $direction == right { 709 border-left-color: $color; 710 711 } @else if $direction == down { 712 border-top-color: $color; 713 714 } @else if $direction == left { 715 border-right-color: $color; 716 } 717 } 718 719 @else if ($direction == up-right) or ($direction == up-left) { 720 border-top: $size solid $color; 721 722 @if $direction == up-right { 723 border-left: $size solid transparent; 724 725 } @else if $direction == up-left { 726 border-right: $size solid transparent; 727 } 728 } 729 730 @else if ($direction == down-right) or ($direction == down-left) { 731 border-bottom: $size solid $color; 732 733 @if $direction == down-right { 734 border-left: $size solid transparent; 735 736 } @else if $direction == down-left { 737 border-right: $size solid transparent; 738 } 739 } 740} 741 742<===> lib/css3/_animation.scss 743// http://www.w3.org/TR/css3-animations/#the-animation-name-property- 744// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 745 746// Official animation shorthand property. 747@mixin animation ($animations...) { 748 @include prefixer(animation, $animations, webkit moz spec); 749} 750 751// Individual Animation Properties 752@mixin animation-name ($names...) { 753 @include prefixer(animation-name, $names, webkit moz spec); 754} 755 756 757@mixin animation-duration ($times...) { 758 @include prefixer(animation-duration, $times, webkit moz spec); 759} 760 761 762@mixin animation-timing-function ($motions...) { 763// ease | linear | ease-in | ease-out | ease-in-out 764 @include prefixer(animation-timing-function, $motions, webkit moz spec); 765} 766 767 768@mixin animation-iteration-count ($values...) { 769// infinite | <number> 770 @include prefixer(animation-iteration-count, $values, webkit moz spec); 771} 772 773 774@mixin animation-direction ($directions...) { 775// normal | alternate 776 @include prefixer(animation-direction, $directions, webkit moz spec); 777} 778 779 780@mixin animation-play-state ($states...) { 781// running | paused 782 @include prefixer(animation-play-state, $states, webkit moz spec); 783} 784 785 786@mixin animation-delay ($times...) { 787 @include prefixer(animation-delay, $times, webkit moz spec); 788} 789 790 791@mixin animation-fill-mode ($modes...) { 792// none | forwards | backwards | both 793 @include prefixer(animation-fill-mode, $modes, webkit moz spec); 794} 795 796<===> lib/css3/_appearance.scss 797@mixin appearance ($value) { 798 @include prefixer(appearance, $value, webkit moz ms o spec); 799} 800 801<===> lib/css3/_backface-visibility.scss 802//************************************************************************// 803// Backface-visibility mixin 804//************************************************************************// 805@mixin backface-visibility($visibility) { 806 @include prefixer(backface-visibility, $visibility, webkit spec); 807} 808 809<===> lib/css3/_background-image.scss 810//************************************************************************// 811// Background-image property for adding multiple background images with 812// gradients, or for stringing multiple gradients together. 813//************************************************************************// 814 815@mixin background-image($images...) { 816 background-image: _add-prefix($images, webkit); 817 background-image: _add-prefix($images); 818} 819 820@function _add-prefix($images, $vendor: false) { 821 $images-prefixed: (); 822 $gradient-positions: false; 823 @for $i from 1 through length($images) { 824 $type: type-of(nth($images, $i)); // Get type of variable - List or String 825 826 // If variable is a list - Gradient 827 @if $type == list { 828 $gradient-type: nth(nth($images, $i), 1); // linear or radial 829 $gradient-pos: null; 830 $gradient-args: null; 831 832 @if ($gradient-type == linear) or ($gradient-type == radial) { 833 $gradient-pos: nth(nth($images, $i), 2); // Get gradient position 834 $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) 835 } 836 @else { 837 $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) 838 } 839 840 $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 841 $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 842 $images-prefixed: append($images-prefixed, $gradient, comma); 843 } 844 // If variable is a string - Image 845 @else if $type == string { 846 $images-prefixed: join($images-prefixed, nth($images, $i), comma); 847 } 848 } 849 @return $images-prefixed; 850} 851 852//Examples: 853 //@include background-image(linear-gradient(top, orange, red)); 854 //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); 855 //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); 856 //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); 857 //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); 858 859<===> lib/css3/_background.scss 860//************************************************************************// 861// Background property for adding multiple backgrounds using shorthand 862// notation. 863//************************************************************************// 864 865@mixin background( 866 $background-1 , $background-2: false, 867 $background-3: false, $background-4: false, 868 $background-5: false, $background-6: false, 869 $background-7: false, $background-8: false, 870 $background-9: false, $background-10: false, 871 $fallback: false 872) { 873 $backgrounds: compact($background-1, $background-2, 874 $background-3, $background-4, 875 $background-5, $background-6, 876 $background-7, $background-8, 877 $background-9, $background-10); 878 879 $fallback-color: false; 880 @if (type-of($fallback) == color) or ($fallback == "transparent") { 881 $fallback-color: $fallback; 882 } 883 @else { 884 $fallback-color: _extract-background-color($backgrounds); 885 } 886 887 @if $fallback-color { 888 background-color: $fallback-color; 889 } 890 background: _background-add-prefix($backgrounds, webkit); 891 background: _background-add-prefix($backgrounds); 892} 893 894@function _extract-background-color($backgrounds) { 895 $final-bg-layer: nth($backgrounds, length($backgrounds)); 896 @if type-of($final-bg-layer) == list { 897 @for $i from 1 through length($final-bg-layer) { 898 $value: nth($final-bg-layer, $i); 899 @if type-of($value) == color { 900 @return $value; 901 } 902 } 903 } 904 @return false; 905} 906 907@function _background-add-prefix($backgrounds, $vendor: false) { 908 $backgrounds-prefixed: (); 909 910 @for $i from 1 through length($backgrounds) { 911 $shorthand: nth($backgrounds, $i); // Get member for current index 912 $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) 913 914 // If shorthand is a list (gradient) 915 @if $type == list { 916 $first-member: nth($shorthand, 1); // Get first member of shorthand 917 918 // Linear Gradient 919 @if index(linear radial, nth($first-member, 1)) { 920 $gradient-type: nth($first-member, 1); // linear || radial 921 $gradient-args: false; 922 $gradient-positions: false; 923 $shorthand-start: false; 924 @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... 925 $gradient-positions: nth($first-member, 2); 926 $gradient-args: nth($first-member, 3); 927 $shorthand-start: 2; 928 } 929 @else { // Linear gradient only - lg(red,orange),... 930 $gradient-positions: nth($shorthand, 2); 931 $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) 932 } 933 934 $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); 935 $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 936 937 // Append any additional shorthand args to gradient 938 @if $shorthand-start { 939 @for $j from $shorthand-start through length($shorthand) { 940 $gradient: join($gradient, nth($shorthand, $j), space); 941 } 942 } 943 $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); 944 } 945 // Image with additional properties 946 @else { 947 $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); 948 } 949 } 950 // If shorthand is a simple string (color or image) 951 @else if $type == string { 952 $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); 953 } 954 } 955 @return $backgrounds-prefixed; 956} 957 958//Examples: 959 //@include background(linear-gradient(top, orange, red)); 960 //@include background(radial-gradient(circle at 40% 40%, orange, red)); 961 //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); 962 //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); 963 964<===> lib/css3/_border-image.scss 965@mixin border-image($images) { 966 -webkit-border-image: _border-add-prefix($images, webkit); 967 -moz-border-image: _border-add-prefix($images, moz); 968 -o-border-image: _border-add-prefix($images, o); 969 border-image: _border-add-prefix($images); 970} 971 972@function _border-add-prefix($images, $vendor: false) { 973 $border-image: null; 974 $images-type: type-of(nth($images, 1)); 975 $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) 976 977 // If input is a gradient 978 @if $images-type == string { 979 @if ($first-var == "linear") or ($first-var == "radial") { 980 $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) 981 $gradient-pos: nth($images, 2); // Get gradient position 982 $gradient-args: nth($images, 3); // Get actual gradient (red, blue) 983 $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 984 $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 985 } 986 // If input is a URL 987 @else { 988 $border-image: $images; 989 } 990 } 991 // If input is gradient or url + additional args 992 @else if $images-type == list { 993 $type: type-of(nth($images, 1)); // Get type of variable - List or String 994 995 // If variable is a list - Gradient 996 @if $type == list { 997 $gradient: nth($images, 1); 998 $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) 999 $gradient-pos: nth($gradient, 2); // Get gradient position 1000 $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) 1001 $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 1002 $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 1003 1004 @for $i from 2 through length($images) { 1005 $border-image: append($border-image, nth($images, $i)); 1006 } 1007 } 1008 } 1009 @return $border-image; 1010} 1011 1012//Examples: 1013// @include border-image(url("image.png")); 1014// @include border-image(url("image.png") 20 stretch); 1015// @include border-image(linear-gradient(45deg, orange, yellow)); 1016// @include border-image(linear-gradient(45deg, orange, yellow) stretch); 1017// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 1018// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 1019 1020 1021<===> lib/css3/_border-radius.scss 1022//************************************************************************// 1023// Shorthand Border-radius mixins 1024//************************************************************************// 1025@mixin border-top-radius($radii) { 1026 @include prefixer(border-top-left-radius, $radii, spec); 1027 @include prefixer(border-top-right-radius, $radii, spec); 1028} 1029 1030@mixin border-bottom-radius($radii) { 1031 @include prefixer(border-bottom-left-radius, $radii, spec); 1032 @include prefixer(border-bottom-right-radius, $radii, spec); 1033} 1034 1035@mixin border-left-radius($radii) { 1036 @include prefixer(border-top-left-radius, $radii, spec); 1037 @include prefixer(border-bottom-left-radius, $radii, spec); 1038} 1039 1040@mixin border-right-radius($radii) { 1041 @include prefixer(border-top-right-radius, $radii, spec); 1042 @include prefixer(border-bottom-right-radius, $radii, spec); 1043} 1044 1045<===> lib/css3/_box-sizing.scss 1046@mixin box-sizing ($box) { 1047// content-box | border-box | inherit 1048 @include prefixer(box-sizing, $box, webkit moz spec); 1049} 1050 1051<===> lib/css3/_columns.scss 1052@mixin columns($arg: auto) { 1053// <column-count> || <column-width> 1054 @include prefixer(columns, $arg, webkit moz spec); 1055} 1056 1057@mixin column-count($int: auto) { 1058// auto || integer 1059 @include prefixer(column-count, $int, webkit moz spec); 1060} 1061 1062@mixin column-gap($length: normal) { 1063// normal || length 1064 @include prefixer(column-gap, $length, webkit moz spec); 1065} 1066 1067@mixin column-fill($arg: auto) { 1068// auto || length 1069 @include prefixer(columns-fill, $arg, webkit moz spec); 1070} 1071 1072@mixin column-rule($arg) { 1073// <border-width> || <border-style> || <color> 1074 @include prefixer(column-rule, $arg, webkit moz spec); 1075} 1076 1077@mixin column-rule-color($color) { 1078 @include prefixer(column-rule-color, $color, webkit moz spec); 1079} 1080 1081@mixin column-rule-style($style: none) { 1082// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 1083 @include prefixer(column-rule-style, $style, webkit moz spec); 1084} 1085 1086@mixin column-rule-width ($width: none) { 1087 @include prefixer(column-rule-width, $width, webkit moz spec); 1088} 1089 1090@mixin column-span($arg: none) { 1091// none || all 1092 @include prefixer(column-span, $arg, webkit moz spec); 1093} 1094 1095@mixin column-width($length: auto) { 1096// auto || length 1097 @include prefixer(column-width, $length, webkit moz spec); 1098} 1099 1100<===> lib/css3/_flex-box.scss 1101// CSS3 Flexible Box Model and property defaults 1102 1103// Custom shorthand notation for flexbox 1104@mixin box($orient: inline-axis, $pack: start, $align: stretch) { 1105 @include display-box; 1106 @include box-orient($orient); 1107 @include box-pack($pack); 1108 @include box-align($align); 1109} 1110 1111@mixin display-box { 1112 display: -webkit-box; 1113 display: -moz-box; 1114 display: box; 1115} 1116 1117@mixin box-orient($orient: inline-axis) { 1118// horizontal|vertical|inline-axis|block-axis|inherit 1119 @include prefixer(box-orient, $orient, webkit moz spec); 1120} 1121 1122@mixin box-pack($pack: start) { 1123// start|end|center|justify 1124 @include prefixer(box-pack, $pack, webkit moz spec); 1125} 1126 1127@mixin box-align($align: stretch) { 1128// start|end|center|baseline|stretch 1129 @include prefixer(box-align, $align, webkit moz spec); 1130} 1131 1132@mixin box-direction($direction: normal) { 1133// normal|reverse|inherit 1134 @include prefixer(box-direction, $direction, webkit moz spec); 1135} 1136 1137@mixin box-lines($lines: single) { 1138// single|multiple 1139 @include prefixer(box-lines, $lines, webkit moz spec); 1140} 1141 1142@mixin box-ordinal-group($int: 1) { 1143 @include prefixer(box-ordinal-group, $int, webkit moz spec); 1144} 1145 1146@mixin box-flex($value: 0.0) { 1147 @include prefixer(box-flex, $value, webkit moz spec); 1148} 1149 1150@mixin box-flex-group($int: 1) { 1151 @include prefixer(box-flex-group, $int, webkit moz spec); 1152} 1153 1154<===> lib/css3/_font-face.scss 1155// Order of the includes matters, and it is: normal, bold, italic, bold+italic. 1156 1157@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { 1158 @font-face { 1159 font-family: $font-family; 1160 font-weight: $weight; 1161 font-style: $style; 1162 1163 @if $asset-pipeline == true { 1164 src: font-url('#{$file-path}.eot'); 1165 src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 1166 font-url('#{$file-path}.woff') format('woff'), 1167 font-url('#{$file-path}.ttf') format('truetype'), 1168 font-url('#{$file-path}.svg##{$font-family}') format('svg'); 1169 } @else { 1170 src: url('#{$file-path}.eot'); 1171 src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 1172 url('#{$file-path}.woff') format('woff'), 1173 url('#{$file-path}.ttf') format('truetype'), 1174 url('#{$file-path}.svg##{$font-family}') format('svg'); 1175 } 1176 } 1177} 1178 1179<===> lib/css3/_hidpi-media-query.scss 1180// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 1181@mixin hidpi($ratio: 1.3) { 1182 @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 1183 only screen and (min--moz-device-pixel-ratio: $ratio), 1184 only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 1185 only screen and (min-resolution: #{round($ratio*96)}dpi), 1186 only screen and (min-resolution: #{$ratio}dppx) { 1187 @content; 1188 } 1189} 1190 1191<===> lib/css3/_image-rendering.scss 1192@mixin image-rendering ($mode:optimizeQuality) { 1193 1194 @if ($mode == optimize-contrast) { 1195 image-rendering: -moz-crisp-edges; 1196 image-rendering: -o-crisp-edges; 1197 image-rendering: -webkit-optimize-contrast; 1198 image-rendering: optimize-contrast; 1199 } 1200 1201 @else { 1202 image-rendering: $mode; 1203 } 1204} 1205 1206<===> lib/css3/_inline-block.scss 1207// Legacy support for inline-block in IE7 (maybe IE6) 1208@mixin inline-block { 1209 display: inline-block; 1210 vertical-align: baseline; 1211 zoom: 1; 1212 *display: inline; 1213 *vertical-align: auto; 1214} 1215 1216<===> lib/css3/_keyframes.scss 1217// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content 1218@mixin keyframes($name) { 1219 $original-prefix-for-webkit: $prefix-for-webkit; 1220 $original-prefix-for-mozilla: $prefix-for-mozilla; 1221 $original-prefix-for-microsoft: $prefix-for-microsoft; 1222 $original-prefix-for-opera: $prefix-for-opera; 1223 $original-prefix-for-spec: $prefix-for-spec; 1224 1225 @if $original-prefix-for-webkit { 1226 @include disable-prefix-for-all(); 1227 $prefix-for-webkit: true; 1228 #{"@-webkit-keyframes"} #{$name} { 1229 @content; 1230 } 1231 } 1232 @if $original-prefix-for-mozilla { 1233 @include disable-prefix-for-all(); 1234 $prefix-for-mozilla: true; 1235 #{"@-moz-keyframes"} #{$name} { 1236 @content; 1237 } 1238 } 1239 @if $original-prefix-for-opera { 1240 @include disable-prefix-for-all(); 1241 $prefix-for-opera: true; 1242 #{"@-o-keyframes"} #{$name} { 1243 @content; 1244 } 1245 } 1246 @if $original-prefix-for-spec { 1247 @include disable-prefix-for-all(); 1248 $prefix-for-spec: true; 1249 #{"@keyframes"} #{$name} { 1250 @content; 1251 } 1252 } 1253 1254 $prefix-for-webkit: $original-prefix-for-webkit; 1255 $prefix-for-mozilla: $original-prefix-for-mozilla; 1256 $prefix-for-microsoft: $original-prefix-for-microsoft; 1257 $prefix-for-opera: $original-prefix-for-opera; 1258 $prefix-for-spec: $original-prefix-for-spec; 1259} 1260 1261<===> lib/css3/_linear-gradient.scss 1262@mixin linear-gradient($pos, $G1, $G2: false, 1263 $G3: false, $G4: false, 1264 $G5: false, $G6: false, 1265 $G7: false, $G8: false, 1266 $G9: false, $G10: false, 1267 $deprecated-pos1: left top, 1268 $deprecated-pos2: left bottom, 1269 $fallback: false) { 1270 // Detect what type of value exists in $pos 1271 $pos-type: type-of(nth($pos, 1)); 1272 $pos-spec: null; 1273 $pos-degree: null; 1274 1275 // If $pos is missing from mixin, reassign vars and add default position 1276 @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 1277 $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; 1278 $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; 1279 $pos: null; 1280 } 1281 1282 @if $pos { 1283 $positions: _linear-positions-parser($pos); 1284 $pos-degree: nth($positions, 1); 1285 $pos-spec: nth($positions, 2); 1286 } 1287 1288 $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 1289 1290 // Set $G1 as the default fallback color 1291 $fallback-color: nth($G1, 1); 1292 1293 // If $fallback is a color use that color as the fallback color 1294 @if (type-of($fallback) == color) or ($fallback == "transparent") { 1295 $fallback-color: $fallback; 1296 } 1297 1298 background-color: $fallback-color; 1299 background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 1300 background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 1301 background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 1302} 1303 1304<===> lib/css3/_perspective.scss 1305@mixin perspective($depth: none) { 1306 // none | <length> 1307 @include prefixer(perspective, $depth, webkit moz spec); 1308} 1309 1310@mixin perspective-origin($value: 50% 50%) { 1311 @include prefixer(perspective-origin, $value, webkit moz spec); 1312} 1313 1314<===> lib/css3/_placeholder.scss 1315$placeholders: '-webkit-input-placeholder', 1316 '-moz-placeholder', 1317 '-ms-input-placeholder'; 1318 1319@mixin placeholder { 1320 @each $placeholder in $placeholders { 1321 @if $placeholder == "-webkit-input-placeholder" { 1322 &::#{$placeholder} { 1323 @content; 1324 } 1325 } 1326 @else if $placeholder == "-moz-placeholder" { 1327 // FF 18- 1328 &:#{$placeholder} { 1329 @content; 1330 } 1331 1332 // FF 19+ 1333 &::#{$placeholder} { 1334 @content; 1335 } 1336 } 1337 @else { 1338 &:#{$placeholder} { 1339 @content; 1340 } 1341 } 1342 } 1343} 1344 1345<===> lib/css3/_radial-gradient.scss 1346// Requires Sass 3.1+ 1347@mixin radial-gradient($G1, $G2, 1348 $G3: false, $G4: false, 1349 $G5: false, $G6: false, 1350 $G7: false, $G8: false, 1351 $G9: false, $G10: false, 1352 $pos: null, 1353 $shape-size: null, 1354 $deprecated-pos1: center center, 1355 $deprecated-pos2: center center, 1356 $deprecated-radius1: 0, 1357 $deprecated-radius2: 460, 1358 $fallback: false) { 1359 1360 $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 1361 $G1: nth($data, 1); 1362 $G2: nth($data, 2); 1363 $pos: nth($data, 3); 1364 $shape-size: nth($data, 4); 1365 1366 $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 1367 1368 // Strip deprecated cover/contain for spec 1369 $shape-size-spec: _shape-size-stripper($shape-size); 1370 1371 // Set $G1 as the default fallback color 1372 $first-color: nth($full, 1); 1373 $fallback-color: nth($first-color, 1); 1374 1375 @if (type-of($fallback) == color) or ($fallback == "transparent") { 1376 $fallback-color: $fallback; 1377 } 1378 1379 // Add Commas and spaces 1380 $shape-size: if($shape-size, '#{$shape-size}, ', null); 1381 $pos: if($pos, '#{$pos}, ', null); 1382 $pos-spec: if($pos, 'at #{$pos}', null); 1383 $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 1384 1385 background-color: $fallback-color; 1386 background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 1387 background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 1388 background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 1389} 1390 1391<===> lib/css3/_transform.scss 1392@mixin transform($property: none) { 1393// none | <transform-function> 1394 @include prefixer(transform, $property, webkit moz ms o spec); 1395} 1396 1397@mixin transform-origin($axes: 50%) { 1398// x-axis - left | center | right | length | % 1399// y-axis - top | center | bottom | length | % 1400// z-axis - length 1401 @include prefixer(transform-origin, $axes, webkit moz ms o spec); 1402} 1403 1404@mixin transform-style ($style: flat) { 1405 @include prefixer(transform-style, $style, webkit moz ms o spec); 1406} 1407 1408<===> lib/css3/_transition.scss 1409// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 1410// Example: @include transition (all, 2.0s, ease-in-out); 1411// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); 1412// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); 1413 1414@mixin transition ($properties...) { 1415 @if length($properties) >= 1 { 1416 @include prefixer(transition, $properties, webkit moz spec); 1417 } 1418 1419 @else { 1420 $properties: all 0.15s ease-out 0; 1421 @include prefixer(transition, $properties, webkit moz spec); 1422 } 1423} 1424 1425@mixin transition-property ($properties...) { 1426 -webkit-transition-property: transition-property-names($properties, 'webkit'); 1427 -moz-transition-property: transition-property-names($properties, 'moz'); 1428 transition-property: transition-property-names($properties, false); 1429} 1430 1431@mixin transition-duration ($times...) { 1432 @include prefixer(transition-duration, $times, webkit moz spec); 1433} 1434 1435@mixin transition-timing-function ($motions...) { 1436// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 1437 @include prefixer(transition-timing-function, $motions, webkit moz spec); 1438} 1439 1440@mixin transition-delay ($times...) { 1441 @include prefixer(transition-delay, $times, webkit moz spec); 1442} 1443 1444<===> lib/css3/_user-select.scss 1445@mixin user-select($arg: none) { 1446 @include prefixer(user-select, $arg, webkit moz ms spec); 1447} 1448 1449<===> lib/functions/_compact.scss 1450// Remove `false` values from a list 1451 1452@function compact($vars...) { 1453 $list: (); 1454 @each $var in $vars { 1455 @if $var { 1456 $list: append($list, $var, comma); 1457 } 1458 } 1459 @return $list; 1460} 1461 1462<===> lib/functions/_flex-grid.scss 1463// Flexible grid 1464@function flex-grid($columns, $container-columns: $fg-max-columns) { 1465 $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 1466 $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 1467 @return percentage($width / $container-width); 1468} 1469 1470// Flexible gutter 1471@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 1472 $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 1473 @return percentage($gutter / $container-width); 1474} 1475 1476// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 1477// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 1478// 1479// The calculation presumes that your column structure will be missing the last gutter: 1480// 1481// -- column -- gutter -- column -- gutter -- column 1482// 1483// $fg-column: 60px; // Column Width 1484// $fg-gutter: 25px; // Gutter Width 1485// $fg-max-columns: 12; // Total Columns For Main Container 1486// 1487// div { 1488// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 1489// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 1490// 1491// p { 1492// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 1493// float: left; 1494// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 1495// } 1496// 1497// blockquote { 1498// float: left; 1499// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 1500// } 1501// } 1502<===> lib/functions/_grid-width.scss 1503@function grid-width($n) { 1504 @return $n * $gw-column + ($n - 1) * $gw-gutter; 1505} 1506 1507// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 1508// 1509// $gw-column: 100px; // Column Width 1510// $gw-gutter: 40px; // Gutter Width 1511// 1512// div { 1513// width: grid-width(4); // returns 520px; 1514// margin-left: $gw-gutter; // returns 40px; 1515// } 1516 1517<===> lib/functions/_linear-gradient.scss 1518@function linear-gradient($pos, $gradients...) { 1519 $type: linear; 1520 $pos-type: type-of(nth($pos, 1)); 1521 1522 // if $pos doesn't exist, fix $gradient 1523 @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 1524 $gradients: zip($pos $gradients); 1525 $pos: false; 1526 } 1527 1528 $type-gradient: $type, $pos, $gradients; 1529 @return $type-gradient; 1530} 1531 1532<===> lib/functions/_modular-scale.scss 1533@function modular-scale($value, $increment, $ratio) { 1534 @if $increment > 0 { 1535 @for $i from 1 through $increment { 1536 $value: ($value * $ratio); 1537 } 1538 } 1539 1540 @if $increment < 0 { 1541 $increment: abs($increment); 1542 @for $i from 1 through $increment { 1543 $value: ($value / $ratio); 1544 } 1545 } 1546 1547 @return $value; 1548} 1549 1550// div { 1551// Increment Up GR with positive value 1552// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px 1553// 1554// Increment Down GR with negative value 1555// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px 1556// 1557// Can be used with ceil(round up) or floor(round down) 1558// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px 1559// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px 1560// } 1561// 1562// modularscale.com 1563 1564@function golden-ratio($value, $increment) { 1565 @return modular-scale($value, $increment, 1.618) 1566} 1567 1568// div { 1569// font-size: golden-ratio(14px, 1); // returns: 22.652px 1570// } 1571// 1572// goldenratiocalculator.com 1573 1574<===> lib/functions/_px-to-em.scss 1575// Convert pixels to ems 1576// eg. for a relational value of 12px write em(12) when the parent is 16px 1577// if the parent is another value say 24px write em(12, 24) 1578 1579@function em($pxval, $base: 16) { 1580 @return ($pxval / $base) * 1em; 1581} 1582 1583 1584<===> lib/functions/_radial-gradient.scss 1585// This function is required and used by the background-image mixin. 1586@function radial-gradient($G1, $G2, 1587 $G3: false, $G4: false, 1588 $G5: false, $G6: false, 1589 $G7: false, $G8: false, 1590 $G9: false, $G10: false, 1591 $pos: null, 1592 $shape-size: null) { 1593 1594 $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 1595 $G1: nth($data, 1); 1596 $G2: nth($data, 2); 1597 $pos: nth($data, 3); 1598 $shape-size: nth($data, 4); 1599 1600 $type: radial; 1601 $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 1602 1603 $type-gradient: $type, $shape-size $pos, $gradient; 1604 @return $type-gradient; 1605} 1606 1607 1608 1609<===> lib/functions/_tint-shade.scss 1610// Add percentage of white to a color 1611@function tint($color, $percent){ 1612 @return mix(white, $color, $percent); 1613} 1614 1615// Add percentage of black to a color 1616@function shade($color, $percent){ 1617 @return mix(black, $color, $percent); 1618} 1619 1620<===> lib/functions/_transition-property-name.scss 1621// Return vendor-prefixed property names if appropriate 1622// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 1623//************************************************************************// 1624@function transition-property-names($props, $vendor: false) { 1625 $new-props: (); 1626 1627 @each $prop in $props { 1628 $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 1629 } 1630 1631 @return $new-props; 1632} 1633 1634@function transition-property-name($prop, $vendor: false) { 1635 // put other properties that need to be prefixed here aswell 1636 @if $vendor and $prop == transform { 1637 @return unquote('-'+$vendor+'-'+$prop); 1638 } 1639 @else { 1640 @return $prop; 1641 } 1642} 1643<===> lib/helpers/_deprecated-webkit-gradient.scss 1644// Render Deprecated Webkit Gradient - Linear || Radial 1645//************************************************************************// 1646@function _deprecated-webkit-gradient($type, 1647 $deprecated-pos1, $deprecated-pos2, 1648 $full, 1649 $deprecated-radius1: false, $deprecated-radius2: false) { 1650 $gradient-list: (); 1651 $gradient: false; 1652 $full-length: length($full); 1653 $percentage: false; 1654 $gradient-type: $type; 1655 1656 @for $i from 1 through $full-length { 1657 $gradient: nth($full, $i); 1658 1659 @if length($gradient) == 2 { 1660 $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); 1661 $gradient-list: join($gradient-list, $color-stop, comma); 1662 } 1663 @else if $gradient != null { 1664 @if $i == $full-length { 1665 $percentage: 100%; 1666 } 1667 @else { 1668 $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; 1669 } 1670 $color-stop: color-stop(unquote($percentage), $gradient); 1671 $gradient-list: join($gradient-list, $color-stop, comma); 1672 } 1673 } 1674 1675 @if $type == radial { 1676 $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); 1677 } 1678 @else if $type == linear { 1679 $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); 1680 } 1681 @return $gradient; 1682} 1683 1684<===> lib/helpers/_gradient-positions-parser.scss 1685@function _gradient-positions-parser($gradient-type, $gradient-positions) { 1686 @if $gradient-positions 1687 and ($gradient-type == linear) 1688 and (type-of($gradient-positions) != color) { 1689 $gradient-positions: _linear-positions-parser($gradient-positions); 1690 } 1691 @else if $gradient-positions 1692 and ($gradient-type == radial) 1693 and (type-of($gradient-positions) != color) { 1694 $gradient-positions: _radial-positions-parser($gradient-positions); 1695 } 1696 @return $gradient-positions; 1697} 1698 1699<===> lib/helpers/_linear-positions-parser.scss 1700@function _linear-positions-parser($pos) { 1701 $type: type-of(nth($pos, 1)); 1702 $spec: null; 1703 $degree: null; 1704 $side: null; 1705 $corner: null; 1706 $length: length($pos); 1707 // Parse Side and corner positions 1708 @if ($length > 1) { 1709 @if nth($pos, 1) == "to" { // Newer syntax 1710 $side: nth($pos, 2); 1711 1712 @if $length == 2 { // eg. to top 1713 // Swap for backwards compatability 1714 $degree: _position-flipper(nth($pos, 2)); 1715 } 1716 @else if $length == 3 { // eg. to top left 1717 $corner: nth($pos, 3); 1718 } 1719 } 1720 @else if $length == 2 { // Older syntax ("top left") 1721 $side: _position-flipper(nth($pos, 1)); 1722 $corner: _position-flipper(nth($pos, 2)); 1723 } 1724 1725 @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 1726 $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 1727 } 1728 @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 1729 $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 1730 } 1731 @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 1732 $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 1733 } 1734 @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 1735 $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 1736 } 1737 $spec: to $side $corner; 1738 } 1739 @else if $length == 1 { 1740 // Swap for backwards compatability 1741 @if $type == string { 1742 $degree: $pos; 1743 $spec: to _position-flipper($pos); 1744 } 1745 @else { 1746 $degree: -270 - $pos; //rotate the gradient opposite from spec 1747 $spec: $pos; 1748 } 1749 } 1750 $degree: unquote($degree + ","); 1751 $spec: unquote($spec + ","); 1752 @return $degree $spec; 1753} 1754 1755@function _position-flipper($pos) { 1756 @return if($pos == left, right, null) 1757 if($pos == right, left, null) 1758 if($pos == top, bottom, null) 1759 if($pos == bottom, top, null); 1760} 1761 1762<===> lib/helpers/_radial-arg-parser.scss 1763@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 1764 @each $value in $G1, $G2 { 1765 $first-val: nth($value, 1); 1766 $pos-type: type-of($first-val); 1767 $spec-at-index: null; 1768 1769 // Determine if spec was passed to mixin 1770 @if type-of($value) == list { 1771 $spec-at-index: if(index($value, at), index($value, at), false); 1772 } 1773 @if $spec-at-index { 1774 @if $spec-at-index > 1 { 1775 @for $i from 1 through ($spec-at-index - 1) { 1776 $shape-size: $shape-size nth($value, $i); 1777 } 1778 @for $i from ($spec-at-index + 1) through length($value) { 1779 $pos: $pos nth($value, $i); 1780 } 1781 } 1782 @else if $spec-at-index == 1 { 1783 @for $i from ($spec-at-index + 1) through length($value) { 1784 $pos: $pos nth($value, $i); 1785 } 1786 } 1787 $G1: false; 1788 } 1789 1790 // If not spec calculate correct values 1791 @else { 1792 @if ($pos-type != color) or ($first-val != "transparent") { 1793 @if ($pos-type == number) 1794 or ($first-val == "center") 1795 or ($first-val == "top") 1796 or ($first-val == "right") 1797 or ($first-val == "bottom") 1798 or ($first-val == "left") { 1799 1800 $pos: $value; 1801 1802 @if $pos == $G1 { 1803 $G1: false; 1804 } 1805 } 1806 1807 @else if 1808 ($first-val == "ellipse") 1809 or ($first-val == "circle") 1810 or ($first-val == "closest-side") 1811 or ($first-val == "closest-corner") 1812 or ($first-val == "farthest-side") 1813 or ($first-val == "farthest-corner") 1814 or ($first-val == "contain") 1815 or ($first-val == "cover") { 1816 1817 $shape-size: $value; 1818 1819 @if $value == $G1 { 1820 $G1: false; 1821 } 1822 1823 @else if $value == $G2 { 1824 $G2: false; 1825 } 1826 } 1827 } 1828 } 1829 } 1830 @return $G1, $G2, $pos, $shape-size; 1831} 1832 1833<===> lib/helpers/_radial-positions-parser.scss 1834@function _radial-positions-parser($gradient-pos) { 1835 $shape-size: nth($gradient-pos, 1); 1836 $pos: nth($gradient-pos, 2); 1837 $shape-size-spec: _shape-size-stripper($shape-size); 1838 1839 $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 1840 unquote(if($shape-size, "#{$shape-size},", null)); 1841 $pos-spec: if($pos, "at #{$pos}", null); 1842 1843 $spec: "#{$shape-size-spec} #{$pos-spec}"; 1844 1845 // Add comma 1846 @if ($spec != ' ') { 1847 $spec: "#{$spec}," 1848 } 1849 1850 @return $pre-spec $spec; 1851} 1852 1853<===> lib/helpers/_render-gradients.scss 1854// User for linear and radial gradients within background-image or border-image properties 1855 1856@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 1857 $pre-spec: null; 1858 $spec: null; 1859 $vendor-gradients: null; 1860 @if $gradient-type == linear { 1861 @if $gradient-positions { 1862 $pre-spec: nth($gradient-positions, 1); 1863 $spec: nth($gradient-positions, 2); 1864 } 1865 } 1866 @else if $gradient-type == radial { 1867 $pre-spec: nth($gradient-positions, 1); 1868 $spec: nth($gradient-positions, 2); 1869 } 1870 1871 @if $vendor { 1872 $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 1873 } 1874 @else if $vendor == false { 1875 $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 1876 $vendor-gradients: unquote($vendor-gradients); 1877 } 1878 @return $vendor-gradients; 1879} 1880 1881<===> lib/helpers/_shape-size-stripper.scss 1882@function _shape-size-stripper($shape-size) { 1883 $shape-size-spec: null; 1884 @each $value in $shape-size { 1885 @if ($value == "cover") or ($value == "contain") { 1886 $value: null; 1887 } 1888 $shape-size-spec: "#{$shape-size-spec} #{$value}"; 1889 } 1890 @return $shape-size-spec; 1891} 1892 1893<===> output.css 1894box:hover { 1895 -webkit-animation-name: scale, slide; 1896 -moz-animation-name: scale, slide; 1897 animation-name: scale, slide; 1898 -webkit-animation-duration: 2s; 1899 -moz-animation-duration: 2s; 1900 animation-duration: 2s; 1901 -webkit-animation-timing-function: ease; 1902 -moz-animation-timing-function: ease; 1903 animation-timing-function: ease; 1904 -webkit-animation-iteration-count: infinite; 1905 -moz-animation-iteration-count: infinite; 1906 animation-iteration-count: infinite; 1907 -webkit-animation: scale 1s ease-in, slide 2s ease; 1908 -moz-animation: scale 1s ease-in, slide 2s ease; 1909 animation: scale 1s ease-in, slide 2s ease; 1910} 1911 1912div { 1913 -webkit-appearance: none; 1914 -moz-appearance: none; 1915 -ms-appearance: none; 1916 -o-appearance: none; 1917 appearance: none; 1918 /* boo boo boo */ 1919 background-image: url("/images/a.png"), url("images/b.png"); 1920 background-image: url("/images/a.png"), url("images/b.png"); 1921 background-image: url("/images/a.png"), -webkit-linear-gradient( white 0, yellow 50%, transparent 50%); 1922 background-image: url("/images/a.png"), linear-gradient( white 0, yellow 50%, transparent 50%); 1923 background-image: -webkit-linear-gradient( rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -webkit-linear-gradient( #4e7ba3, #3e6181); 1924 background-image: linear-gradient( rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), linear-gradient( #4e7ba3, #3e6181); 1925 background-image: -webkit-url("/images/a.png")-gradient( center), -webkit-url("images/b.png")-gradient( left); 1926 background-image: url("/images/a.png")-gradient( center), url("images/b.png")-gradient( left); 1927} 1928 1929<===> output-dart-sass.css 1930box:hover { 1931 -webkit-animation-name: scale, slide; 1932 -moz-animation-name: scale, slide; 1933 animation-name: scale, slide; 1934 -webkit-animation-duration: 2s; 1935 -moz-animation-duration: 2s; 1936 animation-duration: 2s; 1937 -webkit-animation-timing-function: ease; 1938 -moz-animation-timing-function: ease; 1939 animation-timing-function: ease; 1940 -webkit-animation-iteration-count: infinite; 1941 -moz-animation-iteration-count: infinite; 1942 animation-iteration-count: infinite; 1943 -webkit-animation: scale 1s ease-in, slide 2s ease; 1944 -moz-animation: scale 1s ease-in, slide 2s ease; 1945 animation: scale 1s ease-in, slide 2s ease; 1946} 1947 1948div { 1949 -webkit-appearance: none; 1950 -moz-appearance: none; 1951 -ms-appearance: none; 1952 -o-appearance: none; 1953 appearance: none; 1954 /* boo boo boo */ 1955 background-image: url("/images/a.png"), url("images/b.png"); 1956 background-image: url("/images/a.png"), url("images/b.png"); 1957 background-image: url("/images/a.png"), -webkit-linear-gradient(white 0, yellow 50%, transparent 50%); 1958 background-image: url("/images/a.png"), linear-gradient( white 0, yellow 50%, transparent 50%); 1959 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), -webkit-linear-gradient(#4e7ba3, #3e6181); 1960 background-image: linear-gradient( rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, transparent 50%), linear-gradient( #4e7ba3, #3e6181); 1961 background-image: -webkit-url("/images/a.png")-gradient(center), -webkit-url("images/b.png")-gradient(left); 1962 background-image: url("/images/a.png")-gradient( center), url("images/b.png")-gradient( left); 1963} 1964