sempli-website-lib 7.1.0-beta.2 → 7.1.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -25
- package/assets/fonts/Lato/Lato-Black.ttf +0 -0
- package/assets/fonts/Lato/Lato-BlackItalic.ttf +0 -0
- package/assets/fonts/Lato/Lato-Bold.ttf +0 -0
- package/assets/fonts/Lato/Lato-BoldItalic.ttf +0 -0
- package/assets/fonts/Lato/Lato-Hairline.ttf +0 -0
- package/assets/fonts/Lato/Lato-HairlineItalic.ttf +0 -0
- package/assets/fonts/Lato/Lato-Italic.ttf +0 -0
- package/assets/fonts/Lato/Lato-Light.ttf +0 -0
- package/assets/fonts/Lato/Lato-LightItalic.ttf +0 -0
- package/assets/fonts/Lato/Lato-Regular.ttf +0 -0
- package/assets/fonts/Lato/OFL.txt +0 -0
- package/assets/interface/documents.svg +136 -136
- package/assets/interface/icons/alert-success.svg +17 -17
- package/assets/interface/icons/arrow-left.svg +8 -8
- package/assets/interface/icons/arrow-right-02.svg +10 -10
- package/assets/interface/icons/arrow-right.svg +8 -8
- package/assets/interface/icons/basic-check-magenta.svg +1 -1
- package/assets/interface/icons/bulb-example.svg +20 -20
- package/assets/interface/icons/bulb-tip.svg +32 -32
- package/assets/interface/icons/check-green-circle-large.svg +23 -23
- package/assets/interface/icons/check-green.svg +16 -16
- package/assets/interface/icons/check-purple.svg +20 -20
- package/assets/interface/icons/cloud-download.svg +20 -20
- package/assets/interface/icons/document-pdf.svg +13 -13
- package/assets/interface/icons/document-review.svg +20 -20
- package/assets/interface/icons/document-status-approved.svg +21 -21
- package/assets/interface/icons/document-status-empty.svg +18 -18
- package/assets/interface/icons/document-status-error.svg +23 -23
- package/assets/interface/icons/document-status-success.svg +19 -19
- package/assets/interface/icons/eye-action.svg +1 -1
- package/assets/interface/icons/hand-stop.svg +19 -19
- package/assets/interface/icons/happy-01.svg +0 -0
- package/assets/interface/icons/happy-02.svg +0 -0
- package/assets/interface/icons/happy-03.svg +0 -0
- package/assets/interface/icons/happy-04.svg +0 -0
- package/assets/interface/icons/happy-05.svg +0 -0
- package/assets/interface/icons/heart.svg +13 -13
- package/assets/interface/icons/intercom-messenger-icon.svg +1 -1
- package/assets/interface/icons/lock-icon.svg +1 -1
- package/assets/interface/icons/mail-circle.svg +32 -32
- package/assets/interface/icons/mail-edit.svg +20 -20
- package/assets/interface/icons/pen-edit.svg +22 -22
- package/assets/interface/icons/plus-circle.svg +22 -22
- package/assets/interface/icons/question-sign.svg +10 -10
- package/assets/interface/icons/shield.svg +31 -31
- package/assets/interface/icons/signature-modal-approved.svg +17 -17
- package/assets/interface/icons/signature-modal-waiting.svg +23 -23
- package/assets/interface/icons/signature-pending.svg +25 -25
- package/assets/interface/icons/signature-step-active.svg +19 -19
- package/assets/interface/icons/signature-step-completed.svg +19 -19
- package/assets/interface/icons/signature-step-default.svg +19 -19
- package/assets/interface/icons/skull.svg +23 -23
- package/assets/interface/icons/step-incomplete.svg +18 -18
- package/assets/interface/icons/trash-delete.svg +20 -20
- package/assets/interface/icons/warning-sign.svg +22 -22
- package/assets/interface/icons/x-circle.svg +14 -14
- package/assets/interface/sempli_2.0/17-dale_superpoderes.jpeg +0 -0
- package/assets/interface/sempli_2.0/17-dale_superpoderes.webp +0 -0
- package/assets/interface/sempli_2.0/5-seguridad-y-control-min.png +0 -0
- package/assets/interface/sempli_2.0/5-seguridad-y-control-min.webp +0 -0
- package/assets/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.webp +0 -0
- package/assets/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2.webp +0 -0
- package/assets/interface/sempli_2.0/credito-a-termino.jpg +0 -0
- package/assets/interface/sempli_2.0/credito-a-termino.webp +0 -0
- package/assets/interface/sempli_2.0/credito-flexi-sub-img.jpg +0 -0
- package/assets/interface/sempli_2.0/credito-flexi-sub-img.webp +0 -0
- package/assets/interface/sempli_2.0/dale_superpoderes.jpg +0 -0
- package/assets/interface/sempli_2.0/dale_superpoderes.webp +0 -0
- package/assets/interface/sempli_2.0/flexi-01.webp +0 -0
- package/assets/interface/sempli_2.0/video-hero-main.mp4 +0 -0
- package/assets/interface/sempli_2.0/video-main.mp4 +0 -0
- package/assets/interface/sempli_2.0/video-main.webm +0 -0
- package/esm2022/lib/sempli-website-lib.module.mjs +5 -5
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/sempli-website-lib.mjs +4 -4
- package/fesm2022/sempli-website-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_main.scss +2 -2
- package/styles/master-app.scss +17839 -18114
- package/styles/master-landing.scss +20644 -20834
- package/styles/modules/_functions.scss +37 -37
- package/styles/modules/_mixins.scss +68 -68
- package/styles/modules/_variables.scss +54 -54
- package/styles/partials/_base.scss +277 -277
- package/styles/partials/_buttons.scss +446 -453
- package/styles/partials/_fonts.scss +83 -83
- package/styles/partials/_forms.scss +839 -1107
- package/styles/partials/_icons.scss +12 -12
- package/styles/partials/_layout.scss +149 -149
- package/styles/partials/_modals.scss +254 -254
- package/styles/partials/_panels.scss +51 -51
- package/styles/partials/_progress-bars.scss +60 -60
- package/styles/partials/_tooltips.scss +128 -128
- package/styles/partials/_videos.scss +32 -32
- package/styles/partials/animations.scss +155 -155
- package/styles/partials/app/_blocks.scss +101 -101
- package/styles/partials/app/_cards.scss +155 -155
- package/styles/partials/app/_general.scss +1193 -1193
- package/styles/partials/app/_header.scss +713 -713
- package/styles/partials/app/_layout.scss +219 -219
- package/styles/partials/app/_my-account.scss +203 -203
- package/styles/partials/app/_my-loan-applications.scss +165 -165
- package/styles/partials/app/_my-products.scss +1019 -1019
- package/styles/partials/app/_signatures.scss +16 -16
- package/styles/partials/landing/_footer.scss +234 -234
- package/styles/partials/landing/_general.scss +2612 -2527
- package/styles/partials/landing/_header.scss +968 -968
- package/styles/partials/landing/_hero-wrappers.scss +650 -650
- package/styles/vendor/_animate.scss +3 -3
- package/styles/vendor/_compass.scss +4 -4
- package/styles/vendor/_lemonade.scss +37 -37
- package/styles/vendor/_modules_export.scss +11212 -11212
- package/styles/vendor/_normalize.scss +341 -341
- package/styles/vendor/animation/_animate.scss +31 -31
- package/styles/vendor/animation/_core.scss +127 -127
- package/styles/vendor/animation/_shared.scss +21 -21
- package/styles/vendor/animation/animate/_attention-seekers.scss +151 -151
- package/styles/vendor/animation/animate/_bouncing.scss +2 -2
- package/styles/vendor/animation/animate/_classes.scss +21 -21
- package/styles/vendor/animation/animate/_fading.scss +2 -2
- package/styles/vendor/animation/animate/_flippers.scss +87 -87
- package/styles/vendor/animation/animate/_lightspeed.scss +23 -23
- package/styles/vendor/animation/animate/_rotating.scss +3 -3
- package/styles/vendor/animation/animate/_specials.scss +42 -42
- package/styles/vendor/animation/animate/bouncing/_bouncing-entrances.scss +68 -68
- package/styles/vendor/animation/animate/bouncing/_bouncing-exits.scss +60 -60
- package/styles/vendor/animation/animate/fading/_fading-entrances.scss +86 -86
- package/styles/vendor/animation/animate/fading/_fading-exits.scss +86 -86
- package/styles/vendor/animation/animate/rotating/_rotating-entrances.scss +58 -58
- package/styles/vendor/animation/animate/rotating/_rotating-exits.scss +58 -58
- package/styles/vendor/compass/_css3.scss +21 -21
- package/styles/vendor/compass/_functions.scss +7 -7
- package/styles/vendor/compass/_layout.scss +3 -3
- package/styles/vendor/compass/_reset-legacy.scss +3 -3
- package/styles/vendor/compass/_reset.scss +3 -3
- package/styles/vendor/compass/_support.scss +40 -40
- package/styles/vendor/compass/_typography.scss +4 -4
- package/styles/vendor/compass/_utilities.scss +9 -9
- package/styles/vendor/compass/css3/_animation.scss +2 -2
- package/styles/vendor/compass/css3/_appearance.scss +16 -16
- package/styles/vendor/compass/css3/_background-clip.scss +43 -43
- package/styles/vendor/compass/css3/_background-origin.scss +42 -42
- package/styles/vendor/compass/css3/_background-size.scss +26 -26
- package/styles/vendor/compass/css3/_border-radius.scss +130 -130
- package/styles/vendor/compass/css3/_box-shadow.scss +76 -76
- package/styles/vendor/compass/css3/_box-sizing.scss +18 -18
- package/styles/vendor/compass/css3/_box.scss +110 -110
- package/styles/vendor/compass/css3/_columns.scss +157 -157
- package/styles/vendor/compass/css3/_filter.scss +24 -24
- package/styles/vendor/compass/css3/_flexbox.scss +86 -86
- package/styles/vendor/compass/css3/_font-face.scss +48 -48
- package/styles/vendor/compass/css3/_hyphenation.scss +77 -77
- package/styles/vendor/compass/css3/_images.scss +133 -133
- package/styles/vendor/compass/css3/_inline-block.scss +22 -22
- package/styles/vendor/compass/css3/_opacity.scss +19 -19
- package/styles/vendor/compass/css3/_pie.scss +73 -73
- package/styles/vendor/compass/css3/_regions.scss +21 -21
- package/styles/vendor/compass/css3/_shared.scss +38 -38
- package/styles/vendor/compass/css3/_text-shadow.scss +88 -88
- package/styles/vendor/compass/css3/_transform-legacy.scss +87 -87
- package/styles/vendor/compass/css3/_transform.scss +598 -598
- package/styles/vendor/compass/css3/_transition.scss +222 -222
- package/styles/vendor/compass/css3/_user-interface.scss +47 -47
- package/styles/vendor/compass/functions/_colors.scss +37 -37
- package/styles/vendor/compass/functions/_constants.scss +18 -18
- package/styles/vendor/compass/functions/_cross_browser_support.scss +72 -72
- package/styles/vendor/compass/functions/_display.scss +36 -36
- package/styles/vendor/compass/functions/_font_files.scss +95 -95
- package/styles/vendor/compass/functions/_gradient_support.scss +14 -14
- package/styles/vendor/compass/functions/_lists.scss +90 -90
- package/styles/vendor/compass/layout/_grid-background.scss +178 -178
- package/styles/vendor/compass/layout/_sticky-footer.scss +23 -23
- package/styles/vendor/compass/layout/_stretching.scss +23 -23
- package/styles/vendor/compass/reset/_utilities-legacy.scss +135 -135
- package/styles/vendor/compass/reset/_utilities.scss +142 -142
- package/styles/vendor/compass/typography/_links.scss +3 -3
- package/styles/vendor/compass/typography/_lists.scss +4 -4
- package/styles/vendor/compass/typography/_text.scss +4 -4
- package/styles/vendor/compass/typography/_vertical_rhythm.scss +229 -229
- package/styles/vendor/compass/typography/links/_hover-link.scss +5 -5
- package/styles/vendor/compass/typography/links/_link-colors.scss +28 -28
- package/styles/vendor/compass/typography/links/_unstyled-link.scss +7 -7
- package/styles/vendor/compass/typography/lists/_bullets.scss +34 -34
- package/styles/vendor/compass/typography/lists/_horizontal-list.scss +61 -61
- package/styles/vendor/compass/typography/lists/_inline-block-list.scss +50 -50
- package/styles/vendor/compass/typography/lists/_inline-list.scss +44 -44
- package/styles/vendor/compass/typography/text/_ellipsis.scss +25 -25
- package/styles/vendor/compass/typography/text/_force-wrap.scss +12 -12
- package/styles/vendor/compass/typography/text/_nowrap.scss +2 -2
- package/styles/vendor/compass/typography/text/_replacement.scss +68 -68
- package/styles/vendor/compass/utilities/_general.scss +6 -6
- package/styles/vendor/compass/utilities/_links.scss +5 -5
- package/styles/vendor/compass/utilities/_lists.scss +6 -6
- package/styles/vendor/compass/utilities/_print.scss +17 -17
- package/styles/vendor/compass/utilities/_sprites.scss +2 -2
- package/styles/vendor/compass/utilities/_tables.scss +3 -3
- package/styles/vendor/compass/utilities/_text.scss +5 -5
- package/styles/vendor/compass/utilities/color/_contrast.scss +27 -27
- package/styles/vendor/compass/utilities/general/_clearfix.scss +44 -44
- package/styles/vendor/compass/utilities/general/_float.scss +29 -29
- package/styles/vendor/compass/utilities/general/_hacks.scss +47 -47
- package/styles/vendor/compass/utilities/general/_min.scss +16 -16
- package/styles/vendor/compass/utilities/general/_reset.scss +2 -2
- package/styles/vendor/compass/utilities/general/_tabs.scss +1 -1
- package/styles/vendor/compass/utilities/general/_tag-cloud.scss +18 -18
- package/styles/vendor/compass/utilities/links/_hover-link.scss +3 -3
- package/styles/vendor/compass/utilities/links/_link-colors.scss +3 -3
- package/styles/vendor/compass/utilities/links/_unstyled-link.scss +3 -3
- package/styles/vendor/compass/utilities/lists/_bullets.scss +3 -3
- package/styles/vendor/compass/utilities/lists/_horizontal-list.scss +3 -3
- package/styles/vendor/compass/utilities/lists/_inline-block-list.scss +3 -3
- package/styles/vendor/compass/utilities/lists/_inline-list.scss +3 -3
- package/styles/vendor/compass/utilities/sprites/_base.scss +65 -65
- package/styles/vendor/compass/utilities/sprites/_sprite-img.scss +78 -78
- package/styles/vendor/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -22
- package/styles/vendor/compass/utilities/tables/_borders.scss +33 -33
- package/styles/vendor/compass/utilities/tables/_scaffolding.scss +9 -9
- package/styles/vendor/compass/utilities/text/_ellipsis.scss +3 -3
- package/styles/vendor/compass/utilities/text/_nowrap.scss +3 -3
- package/styles/vendor/compass/utilities/text/_replacement.scss +3 -3
- package/assets/interface/icons/check-circle.svg +0 -1
- package/assets/interface/icons/x-circle-alert.svg +0 -1
- package/core/intelli-styles.js +0 -55
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
// ---------------------------------------------------------------------------
|
|
2
|
-
// Animations from Animate.css
|
|
3
|
-
// Author : Dan Eden
|
|
4
|
-
// URL : http://daneden.me/animate/
|
|
5
|
-
//
|
|
6
|
-
// Attention seekers
|
|
7
|
-
// - flash bounce shake tada swing wobble pulse
|
|
8
|
-
// Fading entrances
|
|
9
|
-
// - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
|
|
10
|
-
// Fading exits
|
|
11
|
-
// - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
|
|
12
|
-
// Bouncing entrances
|
|
13
|
-
// - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
|
|
14
|
-
// Bouncing exits
|
|
15
|
-
// - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
|
|
16
|
-
// Rotating entrances
|
|
17
|
-
// - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
|
|
18
|
-
// Rotating exits
|
|
19
|
-
// - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
|
|
20
|
-
// Lightspeed
|
|
21
|
-
// - lightSpeedIn lightSpeedOut
|
|
22
|
-
// Specials
|
|
23
|
-
// - hinge rollIn rollOut
|
|
24
|
-
// ---------------------------------------------------------------------------
|
|
25
|
-
@import "animate/attention-seekers";
|
|
26
|
-
@import "animate/bouncing";
|
|
27
|
-
@import "animate/fading";
|
|
28
|
-
@import "animate/flippers";
|
|
29
|
-
@import "animate/lightspeed";
|
|
30
|
-
@import "animate/rotating";
|
|
31
|
-
@import "animate/specials";
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Animations from Animate.css
|
|
3
|
+
// Author : Dan Eden
|
|
4
|
+
// URL : http://daneden.me/animate/
|
|
5
|
+
//
|
|
6
|
+
// Attention seekers
|
|
7
|
+
// - flash bounce shake tada swing wobble pulse
|
|
8
|
+
// Fading entrances
|
|
9
|
+
// - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
|
|
10
|
+
// Fading exits
|
|
11
|
+
// - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
|
|
12
|
+
// Bouncing entrances
|
|
13
|
+
// - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
|
|
14
|
+
// Bouncing exits
|
|
15
|
+
// - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
|
|
16
|
+
// Rotating entrances
|
|
17
|
+
// - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
|
|
18
|
+
// Rotating exits
|
|
19
|
+
// - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
|
|
20
|
+
// Lightspeed
|
|
21
|
+
// - lightSpeedIn lightSpeedOut
|
|
22
|
+
// Specials
|
|
23
|
+
// - hinge rollIn rollOut
|
|
24
|
+
// ---------------------------------------------------------------------------
|
|
25
|
+
@import "animate/attention-seekers";
|
|
26
|
+
@import "animate/bouncing";
|
|
27
|
+
@import "animate/fading";
|
|
28
|
+
@import "animate/flippers";
|
|
29
|
+
@import "animate/lightspeed";
|
|
30
|
+
@import "animate/rotating";
|
|
31
|
+
@import "animate/specials";
|
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
@import "shared";
|
|
2
|
-
|
|
3
|
-
// CSS Animations.
|
|
4
|
-
|
|
5
|
-
// Apply an animation property and value with the correct browser support
|
|
6
|
-
@mixin animation-support($property, $value) {
|
|
7
|
-
@include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
|
|
8
|
-
|
|
9
|
-
// Name of any animation as a string.
|
|
10
|
-
$default-animation-name : false !default;
|
|
11
|
-
|
|
12
|
-
// Duration of the entire animation in seconds.
|
|
13
|
-
$default-animation-duration : false !default;
|
|
14
|
-
|
|
15
|
-
// Delay for start of animation in seconds.
|
|
16
|
-
$default-animation-delay : false !default;
|
|
17
|
-
|
|
18
|
-
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
|
|
19
|
-
$default-animation-timing-function : false !default;
|
|
20
|
-
|
|
21
|
-
// The number of times an animation cycle is played. [infinite | $number]
|
|
22
|
-
$default-animation-iteration-count : false !default;
|
|
23
|
-
|
|
24
|
-
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
|
25
|
-
$default-animation-direction : false !default;
|
|
26
|
-
|
|
27
|
-
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
|
28
|
-
$default-animation-fill-mode : false !default;
|
|
29
|
-
|
|
30
|
-
// Whether the animation is running or paused. [running | paused]
|
|
31
|
-
$default-animation-play-state : false !default;
|
|
32
|
-
|
|
33
|
-
// Create a named animation sequence that can be applied to elements later.
|
|
34
|
-
//
|
|
35
|
-
// $name - The name of your animation.
|
|
36
|
-
// @content - The keyframes of the animation.
|
|
37
|
-
@mixin keyframes(
|
|
38
|
-
$name,
|
|
39
|
-
$moz: $experimental-support-for-mozilla,
|
|
40
|
-
$webkit: $experimental-support-for-webkit,
|
|
41
|
-
$o: $experimental-support-for-opera,
|
|
42
|
-
$ms: $experimental-support-for-microsoft,
|
|
43
|
-
$khtml: $experimental-support-for-khtml,
|
|
44
|
-
$official: true
|
|
45
|
-
) {
|
|
46
|
-
@if $moz {
|
|
47
|
-
@include with-only-support-for($moz: true) {
|
|
48
|
-
@-moz-keyframes #{$name} { @content; }
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
@if $webkit {
|
|
52
|
-
@include with-only-support-for($webkit: true) {
|
|
53
|
-
@-webkit-keyframes #{$name} { @content; }
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
@if $o {
|
|
57
|
-
@include with-only-support-for($o: true) {
|
|
58
|
-
@-o-keyframes #{$name} { @content; }
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
@if $ms {
|
|
62
|
-
@include with-only-support-for($ms: true) {
|
|
63
|
-
@-ms-keyframes #{$name} { @content; }
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
@if $khtml {
|
|
67
|
-
@include with-only-support-for($khtml: true) {
|
|
68
|
-
@-khtml-keyframes #{$name} { @content; }
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
@if $official {
|
|
72
|
-
@include with-only-support-for {
|
|
73
|
-
@keyframes #{$name} { @content; }
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Apply 1-10 animation names.
|
|
79
|
-
@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
|
|
80
|
-
$name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
|
|
81
|
-
@include animation-support(animation-name, $name); }
|
|
82
|
-
|
|
83
|
-
// Apply 1-10 animation durations.
|
|
84
|
-
@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
|
|
85
|
-
$duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
|
|
86
|
-
@include animation-support(animation-duration, $duration); }
|
|
87
|
-
|
|
88
|
-
// Apply 1-10 animation delays.
|
|
89
|
-
@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
|
|
90
|
-
$delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
|
|
91
|
-
@include animation-support(animation-delay, $delay); }
|
|
92
|
-
|
|
93
|
-
// Apply 1-10 animation timing functions.
|
|
94
|
-
@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
|
|
95
|
-
$function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
|
|
96
|
-
@include animation-support(animation-timing-function, $function); }
|
|
97
|
-
|
|
98
|
-
// Apply 1-10 animation iteration counts.
|
|
99
|
-
@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
|
|
100
|
-
$count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
|
|
101
|
-
@include animation-support(animation-iteration-count, $count); }
|
|
102
|
-
|
|
103
|
-
// Apply 1-10 animation directions.
|
|
104
|
-
@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
|
|
105
|
-
$direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
|
|
106
|
-
@include animation-support(animation-direction, $direction); }
|
|
107
|
-
|
|
108
|
-
// Apply 1-10 animation fill modes.
|
|
109
|
-
@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
|
|
110
|
-
$mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
|
|
111
|
-
@include animation-support(animation-fill-mode, $mode); }
|
|
112
|
-
|
|
113
|
-
// Apply 1-10 animation play states.
|
|
114
|
-
@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
|
|
115
|
-
$state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
|
|
116
|
-
@include animation-support(animation-play-state, $state); }
|
|
117
|
-
|
|
118
|
-
// Shortcut to apply a named animation to an element, with all the settings.
|
|
119
|
-
//
|
|
120
|
-
// $animation-1 : Name and settings for the first animation. [<values> | default]
|
|
121
|
-
// ...
|
|
122
|
-
// $animation-10 : Name and settings for the tenth animation. <values>
|
|
123
|
-
@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
|
|
124
|
-
@if $animation-1 == default {
|
|
125
|
-
$animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
|
|
126
|
-
$animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
|
|
127
|
-
@include animation-support(animation, $animation); }
|
|
1
|
+
@import "shared";
|
|
2
|
+
|
|
3
|
+
// CSS Animations.
|
|
4
|
+
|
|
5
|
+
// Apply an animation property and value with the correct browser support
|
|
6
|
+
@mixin animation-support($property, $value) {
|
|
7
|
+
@include experimental($property, $value, -moz, -webkit, -o, -ms, not -khtml, official); }
|
|
8
|
+
|
|
9
|
+
// Name of any animation as a string.
|
|
10
|
+
$default-animation-name : false !default;
|
|
11
|
+
|
|
12
|
+
// Duration of the entire animation in seconds.
|
|
13
|
+
$default-animation-duration : false !default;
|
|
14
|
+
|
|
15
|
+
// Delay for start of animation in seconds.
|
|
16
|
+
$default-animation-delay : false !default;
|
|
17
|
+
|
|
18
|
+
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
|
|
19
|
+
$default-animation-timing-function : false !default;
|
|
20
|
+
|
|
21
|
+
// The number of times an animation cycle is played. [infinite | $number]
|
|
22
|
+
$default-animation-iteration-count : false !default;
|
|
23
|
+
|
|
24
|
+
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
|
25
|
+
$default-animation-direction : false !default;
|
|
26
|
+
|
|
27
|
+
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
|
28
|
+
$default-animation-fill-mode : false !default;
|
|
29
|
+
|
|
30
|
+
// Whether the animation is running or paused. [running | paused]
|
|
31
|
+
$default-animation-play-state : false !default;
|
|
32
|
+
|
|
33
|
+
// Create a named animation sequence that can be applied to elements later.
|
|
34
|
+
//
|
|
35
|
+
// $name - The name of your animation.
|
|
36
|
+
// @content - The keyframes of the animation.
|
|
37
|
+
@mixin keyframes(
|
|
38
|
+
$name,
|
|
39
|
+
$moz: $experimental-support-for-mozilla,
|
|
40
|
+
$webkit: $experimental-support-for-webkit,
|
|
41
|
+
$o: $experimental-support-for-opera,
|
|
42
|
+
$ms: $experimental-support-for-microsoft,
|
|
43
|
+
$khtml: $experimental-support-for-khtml,
|
|
44
|
+
$official: true
|
|
45
|
+
) {
|
|
46
|
+
@if $moz {
|
|
47
|
+
@include with-only-support-for($moz: true) {
|
|
48
|
+
@-moz-keyframes #{$name} { @content; }
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
@if $webkit {
|
|
52
|
+
@include with-only-support-for($webkit: true) {
|
|
53
|
+
@-webkit-keyframes #{$name} { @content; }
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
@if $o {
|
|
57
|
+
@include with-only-support-for($o: true) {
|
|
58
|
+
@-o-keyframes #{$name} { @content; }
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@if $ms {
|
|
62
|
+
@include with-only-support-for($ms: true) {
|
|
63
|
+
@-ms-keyframes #{$name} { @content; }
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
@if $khtml {
|
|
67
|
+
@include with-only-support-for($khtml: true) {
|
|
68
|
+
@-khtml-keyframes #{$name} { @content; }
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
@if $official {
|
|
72
|
+
@include with-only-support-for {
|
|
73
|
+
@keyframes #{$name} { @content; }
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Apply 1-10 animation names.
|
|
79
|
+
@mixin animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false) {
|
|
80
|
+
$name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10);
|
|
81
|
+
@include animation-support(animation-name, $name); }
|
|
82
|
+
|
|
83
|
+
// Apply 1-10 animation durations.
|
|
84
|
+
@mixin animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false) {
|
|
85
|
+
$duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
|
|
86
|
+
@include animation-support(animation-duration, $duration); }
|
|
87
|
+
|
|
88
|
+
// Apply 1-10 animation delays.
|
|
89
|
+
@mixin animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false) {
|
|
90
|
+
$delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
|
|
91
|
+
@include animation-support(animation-delay, $delay); }
|
|
92
|
+
|
|
93
|
+
// Apply 1-10 animation timing functions.
|
|
94
|
+
@mixin animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false) {
|
|
95
|
+
$function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
|
|
96
|
+
@include animation-support(animation-timing-function, $function); }
|
|
97
|
+
|
|
98
|
+
// Apply 1-10 animation iteration counts.
|
|
99
|
+
@mixin animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false) {
|
|
100
|
+
$count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10);
|
|
101
|
+
@include animation-support(animation-iteration-count, $count); }
|
|
102
|
+
|
|
103
|
+
// Apply 1-10 animation directions.
|
|
104
|
+
@mixin animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false) {
|
|
105
|
+
$direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10);
|
|
106
|
+
@include animation-support(animation-direction, $direction); }
|
|
107
|
+
|
|
108
|
+
// Apply 1-10 animation fill modes.
|
|
109
|
+
@mixin animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false) {
|
|
110
|
+
$mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10);
|
|
111
|
+
@include animation-support(animation-fill-mode, $mode); }
|
|
112
|
+
|
|
113
|
+
// Apply 1-10 animation play states.
|
|
114
|
+
@mixin animation-play-state($state-1: $default-animation-play-state, $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false, $state-10: false) {
|
|
115
|
+
$state: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9, $state-10);
|
|
116
|
+
@include animation-support(animation-play-state, $state); }
|
|
117
|
+
|
|
118
|
+
// Shortcut to apply a named animation to an element, with all the settings.
|
|
119
|
+
//
|
|
120
|
+
// $animation-1 : Name and settings for the first animation. [<values> | default]
|
|
121
|
+
// ...
|
|
122
|
+
// $animation-10 : Name and settings for the tenth animation. <values>
|
|
123
|
+
@mixin animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false) {
|
|
124
|
+
@if $animation-1 == default {
|
|
125
|
+
$animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode, $default-animation-play-state)); }
|
|
126
|
+
$animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10);
|
|
127
|
+
@include animation-support(animation, $animation); }
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
2
|
-
$experimental-support-for-mozilla: $moz;
|
|
3
|
-
$experimental-support-for-webkit: $webkit;
|
|
4
|
-
$experimental-support-for-microsoft: $ms;
|
|
5
|
-
$experimental-support-for-opera: $o;
|
|
6
|
-
$experimental-support-for-khtml: $khtml;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
10
|
-
// Capture the current state
|
|
11
|
-
$original-moz: $experimental-support-for-mozilla;
|
|
12
|
-
$original-webkit: $experimental-support-for-webkit;
|
|
13
|
-
$original-o: $experimental-support-for-opera;
|
|
14
|
-
$original-ms: $experimental-support-for-microsoft;
|
|
15
|
-
$original-khtml: $experimental-support-for-khtml;
|
|
16
|
-
|
|
17
|
-
@include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
|
|
18
|
-
|
|
19
|
-
@content;
|
|
20
|
-
|
|
21
|
-
@include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
|
|
1
|
+
@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
2
|
+
$experimental-support-for-mozilla: $moz;
|
|
3
|
+
$experimental-support-for-webkit: $webkit;
|
|
4
|
+
$experimental-support-for-microsoft: $ms;
|
|
5
|
+
$experimental-support-for-opera: $o;
|
|
6
|
+
$experimental-support-for-khtml: $khtml;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
|
|
10
|
+
// Capture the current state
|
|
11
|
+
$original-moz: $experimental-support-for-mozilla;
|
|
12
|
+
$original-webkit: $experimental-support-for-webkit;
|
|
13
|
+
$original-o: $experimental-support-for-opera;
|
|
14
|
+
$original-ms: $experimental-support-for-microsoft;
|
|
15
|
+
$original-khtml: $experimental-support-for-khtml;
|
|
16
|
+
|
|
17
|
+
@include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
|
|
18
|
+
|
|
19
|
+
@content;
|
|
20
|
+
|
|
21
|
+
@include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
|
|
22
22
|
}
|