Commit 583ea05f5aebb6a1ef754a5a17d12ce58c866a89
1 parent
48269590
+ widget-select2
+ Страницы (update, delete)
Showing
35 changed files
with
5163 additions
and
18 deletions
Show diff stats
backend/controllers/PageController.php
... | ... | @@ -101,15 +101,19 @@ class PageController extends Controller |
101 | 101 | { |
102 | 102 | // сохраняем в таблицу page_lang |
103 | 103 | $model2 = new PageLang(); |
104 | - | |
105 | - // сохраняем | |
106 | - $model2->save(); | |
107 | - | |
104 | + | |
105 | + // передаем переменные | |
106 | + if ($array = $model->findPageLangField($_POST['Page'])) | |
107 | + { | |
108 | + // сохраняем | |
109 | + $model2->updateAll($array, ['page_id' => $id, 'lang_id' => Yii::$app->lang_id]); | |
110 | + } | |
111 | + | |
108 | 112 | return $this->redirect(['view', 'id' => $model->page_id]); |
109 | 113 | } |
110 | 114 | else |
111 | 115 | { |
112 | - return $this->render('create', [ | |
116 | + return $this->render('update', [ | |
113 | 117 | 'model' => $model, |
114 | 118 | ]); |
115 | 119 | } |
... | ... | @@ -123,7 +127,12 @@ class PageController extends Controller |
123 | 127 | */ |
124 | 128 | public function actionDelete($id) |
125 | 129 | { |
130 | + // удаляем page | |
126 | 131 | $this->findModel($id)->delete(); |
132 | + | |
133 | + // удаляем page_lang | |
134 | + $model2 = new PageLang(); | |
135 | + $model2->deleteAll('page_id = '.(int)$id); | |
127 | 136 | |
128 | 137 | return $this->redirect(['index']); |
129 | 138 | } | ... | ... |
backend/views/page/_form.php
... | ... | @@ -14,13 +14,16 @@ use yii\widgets\ActiveForm; |
14 | 14 | |
15 | 15 | <h2><?= Yii::t('field', 'common'); ?></h2> |
16 | 16 | |
17 | - <?= $form->field($model, 'date_add')->textInput() ?> | |
17 | + <?= $form->field($model, 'date_add')->widget(\yii\jui\DatePicker::classname(), [ | |
18 | + 'language' => yii::$app->language, | |
19 | + 'dateFormat' => 'yyyy-MM-dd', | |
20 | + ]) ?> | |
18 | 21 | |
19 | 22 | <?= $form->field($model, 'template_id')->textInput() ?> |
20 | 23 | |
21 | 24 | <?= $form->field($model, 'image_id')->textInput() ?> |
22 | - | |
23 | - <?= $form->field($model, 'show')->textInput() ?> | |
25 | + | |
26 | + <?= $form->field($model, 'show')->dropDownList(['1' => Yii::t('action', 'show'), '0' => Yii::t('action', 'hide')]) ?> | |
24 | 27 | |
25 | 28 | <h2><?= Yii::t('field', 'lang'); ?></h2> |
26 | 29 | ... | ... |
backend/views/page/index.php
... | ... | @@ -16,7 +16,7 @@ $this->params['breadcrumbs'][] = $this->title; |
16 | 16 | <?php // echo $this->render('_search', ['model' => $searchModel]); ?> |
17 | 17 | |
18 | 18 | <p> |
19 | - <?= Html::a(Yii::t('field', 'date_add'), ['create'], ['class' => 'btn btn-success']) ?> | |
19 | + <?= Html::a(Yii::t('action', 'add'), ['create'], ['class' => 'btn btn-success']) ?> | |
20 | 20 | </p> |
21 | 21 | |
22 | 22 | <?= GridView::widget([ | ... | ... |
common/config/main.php
... | ... | @@ -21,7 +21,7 @@ return [ |
21 | 21 | 'translations' => [ |
22 | 22 | '*' => [ |
23 | 23 | 'class' => 'yii\i18n\PhpMessageSource', |
24 | - 'basePath' => $_SERVER['DOCUMENT_ROOT'].'/common/messages', | |
24 | + 'basePath' => $_SERVER['DOCUMENT_ROOT'].'/common/translation', | |
25 | 25 | 'fileMap' => [ |
26 | 26 | 'app' => 'app.php', |
27 | 27 | 'app/error' => 'error.php', | ... | ... |
common/models/Page.php
... | ... | @@ -41,7 +41,7 @@ class Page extends \yii\db\ActiveRecord |
41 | 41 | $this->getData(); |
42 | 42 | } |
43 | 43 | |
44 | - return isset ($this->data[$key]) ? $this->data[$key] : 'NO FIELD'; | |
44 | + return isset ($this->data[$key]) ? $this->data[$key] : ''; | |
45 | 45 | } |
46 | 46 | |
47 | 47 | // ==== DATA PAGE LANG FIELD ==== |
... | ... | @@ -76,6 +76,36 @@ class Page extends \yii\db\ActiveRecord |
76 | 76 | return $this->getDataByKey('page_alias'); |
77 | 77 | } |
78 | 78 | |
79 | + // ==== PAGE LANG FILTER FIELD ==== | |
80 | + | |
81 | + public function findPageLangField($post) | |
82 | + { | |
83 | + if (! $this->data) | |
84 | + { | |
85 | + $this->getData(); | |
86 | + } | |
87 | + | |
88 | + if (empty ($this->data) || empty ($post)) | |
89 | + { | |
90 | + return false; | |
91 | + } | |
92 | + | |
93 | + $result = array (); | |
94 | + | |
95 | + foreach ($post as $key1 => $row1) | |
96 | + { | |
97 | + foreach ($this->data as $key2 => $row2) | |
98 | + { | |
99 | + if ($key1 == $key2) | |
100 | + { | |
101 | + $result[$key1] = $row1; | |
102 | + } | |
103 | + } | |
104 | + } | |
105 | + | |
106 | + return $result; | |
107 | + } | |
108 | + | |
79 | 109 | /** |
80 | 110 | * @inheritdoc |
81 | 111 | */ | ... | ... |
common/messages/uk/action.php renamed to common/translation/uk/action.php
common/messages/uk/field.php renamed to common/translation/uk/field.php
... | ... | @@ -4,8 +4,7 @@ return [ |
4 | 4 | 'page' => 'Сторінка', |
5 | 5 | 'date_add' => 'Дата додання', |
6 | 6 | 'template' => 'Шаблон', |
7 | - 'image' => 'Картинка', | |
8 | - 'show' => 'Відображати', | |
7 | + 'image' => 'Картинка', | |
9 | 8 | 'title' => 'Заголовок', |
10 | 9 | 'meta_title' => 'Meta Title', |
11 | 10 | 'meta_description' => 'Meta Description', | ... | ... |
composer.json
... | ... | @@ -19,7 +19,8 @@ |
19 | 19 | "yiisoft/yii2-bootstrap": "*", |
20 | 20 | "yiisoft/yii2-swiftmailer": "*", |
21 | 21 | "dmstr/yii2-adminlte-asset": "2.*", |
22 | - "yiisoft/yii2-jui": "^2.0" | |
22 | + "yiisoft/yii2-jui": "^2.0", | |
23 | + "kartik-v/yii2-widget-select2": "@dev" | |
23 | 24 | }, |
24 | 25 | "require-dev": { |
25 | 26 | "yiisoft/yii2-codeception": "*", | ... | ... |
composer.lock
... | ... | @@ -4,8 +4,7 @@ |
4 | 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", |
5 | 5 | "This file is @generated automatically" |
6 | 6 | ], |
7 | - "hash": "0f2d0a0ff4b58f84a25dea57101bd038", | |
8 | - "content-hash": "1a1e6702ca167dafda92107693145bef", | |
7 | + "hash": "803ae07d828ea1c4465a309a8f2e280e", | |
9 | 8 | "packages": [ |
10 | 9 | { |
11 | 10 | "name": "almasaeed2010/adminlte", |
... | ... | @@ -517,6 +516,100 @@ |
517 | 516 | "time": "2013-11-30 08:25:19" |
518 | 517 | }, |
519 | 518 | { |
519 | + "name": "kartik-v/yii2-krajee-base", | |
520 | + "version": "v1.7.7", | |
521 | + "source": { | |
522 | + "type": "git", | |
523 | + "url": "https://github.com/kartik-v/yii2-krajee-base.git", | |
524 | + "reference": "c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19" | |
525 | + }, | |
526 | + "dist": { | |
527 | + "type": "zip", | |
528 | + "url": "https://api.github.com/repos/kartik-v/yii2-krajee-base/zipball/c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19", | |
529 | + "reference": "c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19", | |
530 | + "shasum": "" | |
531 | + }, | |
532 | + "require": { | |
533 | + "yiisoft/yii2-bootstrap": "@dev" | |
534 | + }, | |
535 | + "type": "yii2-extension", | |
536 | + "autoload": { | |
537 | + "psr-4": { | |
538 | + "kartik\\base\\": "" | |
539 | + } | |
540 | + }, | |
541 | + "notification-url": "https://packagist.org/downloads/", | |
542 | + "license": [ | |
543 | + "BSD-3-Clause" | |
544 | + ], | |
545 | + "authors": [ | |
546 | + { | |
547 | + "name": "Kartik Visweswaran", | |
548 | + "email": "kartikv2@gmail.com", | |
549 | + "homepage": "http://www.krajee.com/" | |
550 | + } | |
551 | + ], | |
552 | + "description": "Base library and foundation components for all Yii2 Krajee extensions.", | |
553 | + "homepage": "https://github.com/kartik-v/yii2-krajee-base", | |
554 | + "keywords": [ | |
555 | + "base", | |
556 | + "extension", | |
557 | + "foundation", | |
558 | + "krajee", | |
559 | + "widget", | |
560 | + "yii2" | |
561 | + ], | |
562 | + "time": "2015-06-16 05:19:57" | |
563 | + }, | |
564 | + { | |
565 | + "name": "kartik-v/yii2-widget-select2", | |
566 | + "version": "dev-master", | |
567 | + "source": { | |
568 | + "type": "git", | |
569 | + "url": "https://github.com/kartik-v/yii2-widget-select2.git", | |
570 | + "reference": "fa0175d936012eac3f7a382792cbb13948015c4e" | |
571 | + }, | |
572 | + "dist": { | |
573 | + "type": "zip", | |
574 | + "url": "https://api.github.com/repos/kartik-v/yii2-widget-select2/zipball/fa0175d936012eac3f7a382792cbb13948015c4e", | |
575 | + "reference": "fa0175d936012eac3f7a382792cbb13948015c4e", | |
576 | + "shasum": "" | |
577 | + }, | |
578 | + "require": { | |
579 | + "kartik-v/yii2-krajee-base": "~1.7" | |
580 | + }, | |
581 | + "type": "yii2-extension", | |
582 | + "autoload": { | |
583 | + "psr-4": { | |
584 | + "kartik\\select2\\": "" | |
585 | + } | |
586 | + }, | |
587 | + "notification-url": "https://packagist.org/downloads/", | |
588 | + "license": [ | |
589 | + "BSD-3-Clause" | |
590 | + ], | |
591 | + "authors": [ | |
592 | + { | |
593 | + "name": "Kartik Visweswaran", | |
594 | + "email": "kartikv2@gmail.com", | |
595 | + "homepage": "http://www.krajee.com/" | |
596 | + } | |
597 | + ], | |
598 | + "description": "Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets).", | |
599 | + "homepage": "https://github.com/kartik-v/yii2-widget-select2", | |
600 | + "keywords": [ | |
601 | + "dropdown", | |
602 | + "extension", | |
603 | + "form", | |
604 | + "jquery", | |
605 | + "plugin", | |
606 | + "select2", | |
607 | + "widget", | |
608 | + "yii2" | |
609 | + ], | |
610 | + "time": "2015-09-22 03:10:57" | |
611 | + }, | |
612 | + { | |
520 | 613 | "name": "rmrevin/yii2-fontawesome", |
521 | 614 | "version": "2.12.0", |
522 | 615 | "source": { |
... | ... | @@ -1216,7 +1309,9 @@ |
1216 | 1309 | ], |
1217 | 1310 | "aliases": [], |
1218 | 1311 | "minimum-stability": "stable", |
1219 | - "stability-flags": [], | |
1312 | + "stability-flags": { | |
1313 | + "kartik-v/yii2-widget-select2": 20 | |
1314 | + }, | |
1220 | 1315 | "prefer-stable": false, |
1221 | 1316 | "prefer-lowest": false, |
1222 | 1317 | "platform": { | ... | ... |
vendor/composer/autoload_psr4.php
... | ... | @@ -16,6 +16,8 @@ return array( |
16 | 16 | 'yii\\bootstrap\\' => array($vendorDir . '/yiisoft/yii2-bootstrap'), |
17 | 17 | 'yii\\' => array($vendorDir . '/yiisoft/yii2'), |
18 | 18 | 'rmrevin\\yii\\fontawesome\\' => array($vendorDir . '/rmrevin/yii2-fontawesome'), |
19 | + 'kartik\\select2\\' => array($vendorDir . '/kartik-v/yii2-widget-select2'), | |
20 | + 'kartik\\base\\' => array($vendorDir . '/kartik-v/yii2-krajee-base'), | |
19 | 21 | 'dmstr\\' => array($vendorDir . '/dmstr/yii2-adminlte-asset'), |
20 | 22 | 'cebe\\markdown\\' => array($vendorDir . '/cebe/markdown'), |
21 | 23 | 'Faker\\' => array($vendorDir . '/fzaninotto/faker/src/Faker'), | ... | ... |
vendor/composer/installed.json
... | ... | @@ -1254,5 +1254,103 @@ |
1254 | 1254 | "jQuery UI", |
1255 | 1255 | "yii2" |
1256 | 1256 | ] |
1257 | + }, | |
1258 | + { | |
1259 | + "name": "kartik-v/yii2-krajee-base", | |
1260 | + "version": "v1.7.7", | |
1261 | + "version_normalized": "1.7.7.0", | |
1262 | + "source": { | |
1263 | + "type": "git", | |
1264 | + "url": "https://github.com/kartik-v/yii2-krajee-base.git", | |
1265 | + "reference": "c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19" | |
1266 | + }, | |
1267 | + "dist": { | |
1268 | + "type": "zip", | |
1269 | + "url": "https://api.github.com/repos/kartik-v/yii2-krajee-base/zipball/c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19", | |
1270 | + "reference": "c0adff9d9762f4fd3bf0e7cd0000fcab0bf00f19", | |
1271 | + "shasum": "" | |
1272 | + }, | |
1273 | + "require": { | |
1274 | + "yiisoft/yii2-bootstrap": "@dev" | |
1275 | + }, | |
1276 | + "time": "2015-06-16 05:19:57", | |
1277 | + "type": "yii2-extension", | |
1278 | + "installation-source": "dist", | |
1279 | + "autoload": { | |
1280 | + "psr-4": { | |
1281 | + "kartik\\base\\": "" | |
1282 | + } | |
1283 | + }, | |
1284 | + "notification-url": "https://packagist.org/downloads/", | |
1285 | + "license": [ | |
1286 | + "BSD-3-Clause" | |
1287 | + ], | |
1288 | + "authors": [ | |
1289 | + { | |
1290 | + "name": "Kartik Visweswaran", | |
1291 | + "email": "kartikv2@gmail.com", | |
1292 | + "homepage": "http://www.krajee.com/" | |
1293 | + } | |
1294 | + ], | |
1295 | + "description": "Base library and foundation components for all Yii2 Krajee extensions.", | |
1296 | + "homepage": "https://github.com/kartik-v/yii2-krajee-base", | |
1297 | + "keywords": [ | |
1298 | + "base", | |
1299 | + "extension", | |
1300 | + "foundation", | |
1301 | + "krajee", | |
1302 | + "widget", | |
1303 | + "yii2" | |
1304 | + ] | |
1305 | + }, | |
1306 | + { | |
1307 | + "name": "kartik-v/yii2-widget-select2", | |
1308 | + "version": "dev-master", | |
1309 | + "version_normalized": "9999999-dev", | |
1310 | + "source": { | |
1311 | + "type": "git", | |
1312 | + "url": "https://github.com/kartik-v/yii2-widget-select2.git", | |
1313 | + "reference": "fa0175d936012eac3f7a382792cbb13948015c4e" | |
1314 | + }, | |
1315 | + "dist": { | |
1316 | + "type": "zip", | |
1317 | + "url": "https://api.github.com/repos/kartik-v/yii2-widget-select2/zipball/fa0175d936012eac3f7a382792cbb13948015c4e", | |
1318 | + "reference": "fa0175d936012eac3f7a382792cbb13948015c4e", | |
1319 | + "shasum": "" | |
1320 | + }, | |
1321 | + "require": { | |
1322 | + "kartik-v/yii2-krajee-base": "~1.7" | |
1323 | + }, | |
1324 | + "time": "2015-09-22 03:10:57", | |
1325 | + "type": "yii2-extension", | |
1326 | + "installation-source": "source", | |
1327 | + "autoload": { | |
1328 | + "psr-4": { | |
1329 | + "kartik\\select2\\": "" | |
1330 | + } | |
1331 | + }, | |
1332 | + "notification-url": "https://packagist.org/downloads/", | |
1333 | + "license": [ | |
1334 | + "BSD-3-Clause" | |
1335 | + ], | |
1336 | + "authors": [ | |
1337 | + { | |
1338 | + "name": "Kartik Visweswaran", | |
1339 | + "email": "kartikv2@gmail.com", | |
1340 | + "homepage": "http://www.krajee.com/" | |
1341 | + } | |
1342 | + ], | |
1343 | + "description": "Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets).", | |
1344 | + "homepage": "https://github.com/kartik-v/yii2-widget-select2", | |
1345 | + "keywords": [ | |
1346 | + "dropdown", | |
1347 | + "extension", | |
1348 | + "form", | |
1349 | + "jquery", | |
1350 | + "plugin", | |
1351 | + "select2", | |
1352 | + "widget", | |
1353 | + "yii2" | |
1354 | + ] | |
1257 | 1355 | } |
1258 | 1356 | ] | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +/** | |
13 | + * Asset bundle for loading animations | |
14 | + * | |
15 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
16 | + * @since 1.0 | |
17 | + */ | |
18 | +class AnimateAsset extends AssetBundle | |
19 | +{ | |
20 | + /** | |
21 | + * @inheritdoc | |
22 | + */ | |
23 | + public function init() | |
24 | + { | |
25 | + $this->setSourcePath(__DIR__ . '/assets'); | |
26 | + $this->setupAssets('css', ['css/animate']); | |
27 | + parent::init(); | |
28 | + } | |
29 | +} | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +/** | |
13 | + * Base asset bundle for all widgets | |
14 | + * | |
15 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
16 | + * @since 1.0 | |
17 | + */ | |
18 | +class AssetBundle extends \yii\web\AssetBundle | |
19 | +{ | |
20 | + const EMPTY_ASSET = 'N0/@$$3T$'; | |
21 | + const EMPTY_PATH = 'N0/P@T#'; | |
22 | + const KRAJEE_ASSET = 'K3/@$$3T$'; | |
23 | + const KRAJEE_PATH = 'K3/P@T#'; | |
24 | + | |
25 | + public $js = self::KRAJEE_ASSET; | |
26 | + public $css = self::KRAJEE_ASSET; | |
27 | + public $sourcePath = self::KRAJEE_PATH; | |
28 | + public $depends = [ | |
29 | + 'yii\web\JqueryAsset', | |
30 | + 'yii\web\YiiAsset', | |
31 | + 'yii\bootstrap\BootstrapAsset', | |
32 | + ]; | |
33 | + | |
34 | + /** | |
35 | + * @inheritdoc | |
36 | + */ | |
37 | + public function init() { | |
38 | + parent::init(); | |
39 | + if ($this->js === self::KRAJEE_ASSET) { | |
40 | + $this->js = []; | |
41 | + } | |
42 | + if ($this->css === self::KRAJEE_ASSET) { | |
43 | + $this->css = []; | |
44 | + } | |
45 | + if ($this->sourcePath === self::KRAJEE_PATH) { | |
46 | + $this->sourcePath = null; | |
47 | + } | |
48 | + } | |
49 | + | |
50 | + /** | |
51 | + * Adds a language JS locale file | |
52 | + * | |
53 | + * @param string $lang the ISO language code | |
54 | + * @param string $prefix the language locale file name prefix | |
55 | + * @param string $dir the language file directory relative to source path | |
56 | + * @param bool $min whether to auto use minified version | |
57 | + * | |
58 | + * @return AssetBundle instance | |
59 | + */ | |
60 | + public function addLanguage($lang = '', $prefix = '', $dir = null, $min = false) | |
61 | + { | |
62 | + if (empty($lang) || substr($lang, 0, 2) == 'en') { | |
63 | + return $this; | |
64 | + } | |
65 | + $ext = $min ? (YII_DEBUG ? ".min.js" : ".js") : ".js"; | |
66 | + $file = "{$prefix}{$lang}{$ext}"; | |
67 | + if ($dir === null) { | |
68 | + $dir = 'js'; | |
69 | + } elseif ($dir === "/") { | |
70 | + $dir = ''; | |
71 | + } | |
72 | + $path = $this->sourcePath . '/' . $dir; | |
73 | + if (!Config::fileExists("{$path}/{$file}")) { | |
74 | + $lang = Config::getLang($lang); | |
75 | + $file = "{$prefix}{$lang}{$ext}"; | |
76 | + } | |
77 | + if (Config::fileExists("{$path}/{$file}")) { | |
78 | + $this->js[] = empty($dir) ? $file : "{$dir}/{$file}"; | |
79 | + } | |
80 | + return $this; | |
81 | + } | |
82 | + | |
83 | + /** | |
84 | + * Set up CSS and JS asset arrays based on the base-file names | |
85 | + * | |
86 | + * @param string $type whether 'css' or 'js' | |
87 | + * @param array $files the list of 'css' or 'js' basefile names | |
88 | + */ | |
89 | + protected function setupAssets($type, $files = []) | |
90 | + { | |
91 | + if ($this->$type === self::KRAJEE_ASSET) { | |
92 | + $srcFiles = []; | |
93 | + $minFiles = []; | |
94 | + foreach ($files as $file) { | |
95 | + $srcFiles[] = "{$file}.{$type}"; | |
96 | + $minFiles[] = "{$file}.min.{$type}"; | |
97 | + } | |
98 | + $this->$type = YII_DEBUG ? $srcFiles : $minFiles; | |
99 | + } elseif ($this->$type === self::EMPTY_ASSET) { | |
100 | + $this->$type = []; | |
101 | + } | |
102 | + } | |
103 | + | |
104 | + /** | |
105 | + * Sets the source path if empty | |
106 | + * | |
107 | + * @param string $path the path to be set | |
108 | + */ | |
109 | + protected function setSourcePath($path) | |
110 | + { | |
111 | + if ($this->sourcePath === self::KRAJEE_PATH) { | |
112 | + $this->sourcePath = $path; | |
113 | + } elseif ($this->sourcePath === self::EMPTY_PATH) { | |
114 | + $this->sourcePath = null; | |
115 | + } | |
116 | + } | |
117 | +} | ... | ... |
1 | +version 1.7.7 | |
2 | +============= | |
3 | +**Date:** 16-Jun-2015 | |
4 | + | |
5 | +- (enh #37): Set range input caption to change during slide. | |
6 | +- (enh #38): Update to use `Json::htmlEncode` as per yii release v2.0.4. | |
7 | + | |
8 | +version 1.7.6 | |
9 | +============= | |
10 | +**Date:** 09-May-2015 | |
11 | + | |
12 | +- (enh #36): Add kv-input-group-hide class. | |
13 | + | |
14 | +version 1.7.5 | |
15 | +============= | |
16 | +**Date:** 03-May-2015 | |
17 | + | |
18 | +- (enh #30): Improve translation trait for determining messages folder. | |
19 | +- (enh #33): Better styling of html5 inputs. | |
20 | +- (enh #34): New `addLanguage` method in `AssetBundle`. | |
21 | +- (enh #35): Allow extending translation messages. | |
22 | + | |
23 | +version 1.7.4 | |
24 | +============= | |
25 | +**Date:** 13-Feb-2015 | |
26 | + | |
27 | +- (enh #28): Create WidgetTrait for better code reuse. | |
28 | +- Code cleanup and reformatting. | |
29 | +- (enh #29): New `getModule` and `initModule` methods in `Config`. | |
30 | +- Set copyright year to current. | |
31 | + | |
32 | +version 1.7.3 | |
33 | +============= | |
34 | +**Date:** 25-Jan-2015 | |
35 | + | |
36 | +- (enh #26): Enhance `Widget` options to store multiple plugin config. | |
37 | +- (enh #27): Set directory and URL separator rightly for the setLanguage validation. | |
38 | + | |
39 | +version 1.7.2 | |
40 | +============= | |
41 | +**Date:** 20-Jan-2015 | |
42 | + | |
43 | +- (enh #24): Revert use of DIRECTORY_SEPARATOR and use forward slash instead. | |
44 | + | |
45 | +version 1.7.1 | |
46 | +============= | |
47 | +**Date:** 15-Jan-2015 | |
48 | + | |
49 | +- (enh #23): Enhance AssetBundle for over riding empty assets from AssetManager. | |
50 | + | |
51 | +version 1.7.0 | |
52 | +============= | |
53 | +**Date:** 12-Jan-2015 | |
54 | + | |
55 | +- Fix kartik-v/yii2-widget-datepicker#10 - Language definition in pluginOptions | |
56 | +- (enh #21): Implement TranslationTrait and i18N configuration. | |
57 | +- (enh #22): Implement base Module class. | |
58 | +- Code formatting updates as per Yii2 coding style. | |
59 | + | |
60 | +version 1.6.0 | |
61 | +============= | |
62 | +**Date:** 16-Dec-2014 | |
63 | + | |
64 | +- (bug #16): variable `$short` in `InputWidget` in method `setLanguage` set without `$prefix`. | |
65 | +- (bug #17): Enhance `parseDateFormat` to convert formats rightly to PHP DateTime format. | |
66 | +- (bug #18): Better `noSupport` message translation in `Html5Input`. | |
67 | +- (enh #19): Avoid inspect errors in IDE for `Html5Input`. | |
68 | +- (enh #20): Add new PluginAssetBundle for bootstrap JS dependent plugins. | |
69 | + | |
70 | +version 1.5.0 | |
71 | +============= | |
72 | +**Date:** 06-Dec-2014 | |
73 | + | |
74 | +- (enh #11): Added new properties `disabled` and `readonly` to `InputWidget` and `Html5Input`. | |
75 | + - a new method `initDisability` is been created for disability validation across Input Widgets | |
76 | + - this will automatically set the input's `disabled` or `readonly` option | |
77 | + - it will also automatically be used to validate disability and style complex widgets like `DatePicker` or `DateTimePicker` | |
78 | +- (enh #12): Enhance `InputWidget` to include `getPluginScript` method. | |
79 | +- (enh #13): Enhancements to Config helper and change `self` methods to `static`. | |
80 | +- (bug #14): Fix line terminators and new lines in `getPluginScript`. | |
81 | + | |
82 | +version 1.4.0 | |
83 | +============= | |
84 | +**Date:** 29-Nov-2014 | |
85 | + | |
86 | +- (enh #9): Enhanced language validation for combined ISO-639 and ISO-3166 codes | |
87 | + - Auto detect and generate the plugin language and its related locale file using a new `setLanguage` method in `InputWidget` | |
88 | + - Enhance `initLanguage` method to include a parameter `full` which defaults to `false` to use the ISO-639 language code. | |
89 | +- (enh #10): Enhanced language and directory methods in Config | |
90 | + | |
91 | + Two new methods is added to Config helper class: | |
92 | + | |
93 | + - `getCurrentDir` - gets the current directory of the extended class object | |
94 | + - `fileExists` - modified file_exists method after replacing the slashes with right directory separator | |
95 | + | |
96 | +version 1.3.0 | |
97 | +============= | |
98 | +**Date:** 25-Nov-2014 | |
99 | + | |
100 | +- (enh #6): Enhance `InputWidget` for attaching multiple jQuery plugins. | |
101 | + | |
102 | +### BC Breaking Changes | |
103 | + | |
104 | +#### Removed: | |
105 | +The following HTML5 data attributes are removed and not registered anymore with the input: | |
106 | + | |
107 | +- `data-plugin-name` the name of the plugin | |
108 | +- `data-plugin-options` the client options of the plugin | |
109 | + | |
110 | +#### Added: | |
111 | + | |
112 | +Following functionality included in `InputWidget` and `Widget` classes: | |
113 | + | |
114 | +- New protected property `_pluginName` for easy configuration in individual widgets. | |
115 | +- The following HTML5 data attribute will be added for each input: | |
116 | + - `data-krajee-{name}` the client options of the plugin. The tag `{name}` will be replaced with the | |
117 | + registered jQuery plugin name (e.g. `select2`, `typeahead` etc.). | |
118 | +- New protected property `_dataVar` included for generating the above data attribute. | |
119 | + | |
120 | + | |
121 | +version 1.2.0 | |
122 | +============= | |
123 | +**Date:** 25-Nov-2014 | |
124 | + | |
125 | +- (bug #2): AssetBundle::EMPTY_PATH is not setting sourcePath to null. | |
126 | +- (enh #3): Modify and validate language setting according to yii i18n. | |
127 | +- (enh #4): Add validations for html inputs, dropdowns, and widgets in `Config`. | |
128 | +- (enh #5): Correctly validate checkbox and radio checked states for `InputWidget`. | |
129 | + | |
130 | +version 1.1.0 | |
131 | +============= | |
132 | +**Date:** 10-Nov-2014 | |
133 | + | |
134 | +- Validation for sub repositories containing input widgets. | |
135 | +- (bug #1): Include namespaced FormatConverter class in InputWidget. | |
136 | +- Include `Html5Input` class and `Html5InputAsset` bundle. | |
137 | +- Include `AnimateAsset` bundle. | |
138 | +- Code formatting as per standards. | |
139 | + | |
140 | +version 1.0.0 | |
141 | +============= | |
142 | +**Date:** 06-Nov-2014 | |
143 | + | |
144 | +Initial release | |
0 | 145 | \ No newline at end of file | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | +use yii\base\InvalidConfigException; | |
14 | + | |
15 | +/** | |
16 | + * Global configuration helper class for Krajee extensions | |
17 | + * | |
18 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
19 | + * @since 1.0 | |
20 | + */ | |
21 | +class Config | |
22 | +{ | |
23 | + const VENDOR_NAME = "kartik-v/"; | |
24 | + const NAMESPACE_PREFIX = "\\kartik\\"; | |
25 | + const DEFAULT_REASON = "for your selected functionality"; | |
26 | + | |
27 | + protected static $_validHtmlInputs = [ | |
28 | + 'hiddenInput', | |
29 | + 'textInput', | |
30 | + 'passwordInput', | |
31 | + 'textArea', | |
32 | + 'checkbox', | |
33 | + 'radio', | |
34 | + 'listBox', | |
35 | + 'dropDownList', | |
36 | + 'checkboxList', | |
37 | + 'radioList', | |
38 | + 'input', | |
39 | + 'fileInput' | |
40 | + ]; | |
41 | + | |
42 | + protected static $_validDropdownInputs = [ | |
43 | + 'listBox', | |
44 | + 'dropDownList', | |
45 | + 'checkboxList', | |
46 | + 'radioList' | |
47 | + ]; | |
48 | + | |
49 | + protected static $_validInputWidgets = [ | |
50 | + '\kartik\typeahead\Typeahead' => ['yii2-widgets', 'yii2-widget-typeahead'], | |
51 | + '\kartik\select2\Select2' => ['yii2-widgets', 'yii2-widget-select2'], | |
52 | + '\kartik\depdrop\DepDrop' => ['yii2-widgets', 'yii2-widget-depdrop'], | |
53 | + '\kartik\touchspin\TouchSpin' => ['yii2-widgets', 'yii2-widget-touchspin'], | |
54 | + '\kartik\switchinput\SwitchInput' => ['yii2-widgets', 'yii2-widget-switchinput'], | |
55 | + '\kartik\rating\StarRating' => ['yii2-widgets', 'yii2-widget-rating'], | |
56 | + '\kartik\file\FileInput' => ['yii2-widgets', 'yii2-widget-fileinput'], | |
57 | + '\kartik\range\RangeInput' => ['yii2-widgets', 'yii2-widget-rangeinput'], | |
58 | + '\kartik\color\ColorInput' => ['yii2-widgets', 'yii2-widget-colorinput'], | |
59 | + '\kartik\date\DatePicker' => ['yii2-widgets', 'yii2-widget-datepicker'], | |
60 | + '\kartik\time\TimePicker' => ['yii2-widgets', 'yii2-widget-timepicker'], | |
61 | + '\kartik\datetime\DateTimePicker' => ['yii2-widgets', 'yii2-widget-datetimepicker'], | |
62 | + '\kartik\daterange\DateRangePicker' => 'yii2-daterange', | |
63 | + '\kartik\sortinput\SortableInput' => 'yii2-sortinput', | |
64 | + '\kartik\money\MaskMoney' => 'yii2-money', | |
65 | + '\kartik\checkbox\CheckboxX' => 'yii2-checkbox', | |
66 | + '\kartik\slider\Slider' => 'yii2-slider', | |
67 | + ]; | |
68 | + | |
69 | + /** | |
70 | + * Validate multiple extension dependencies | |
71 | + * | |
72 | + * @param array $extensions the configuration of extensions with each array | |
73 | + * item setup as required in `checkDependency` method. The following keys | |
74 | + * can be setup: | |
75 | + * - name: string, the extension class name (without vendor namespace prefix) | |
76 | + * - repo: string, the extension package repository name (without vendor name prefix) | |
77 | + * - reason: string, a user friendly message for dependency validation failure | |
78 | + * | |
79 | + * @throws InvalidConfigException if extension fails dependency validation | |
80 | + */ | |
81 | + public static function checkDependencies($extensions = []) | |
82 | + { | |
83 | + foreach ($extensions as $extension) { | |
84 | + $name = empty($extension[0]) ? '' : $extension[0]; | |
85 | + $repo = empty($extension[1]) ? '' : $extension[1]; | |
86 | + $reason = empty($extension[2]) ? '' : self::DEFAULT_REASON; | |
87 | + static::checkDependency($name, $repo, $reason); | |
88 | + } | |
89 | + } | |
90 | + | |
91 | + /** | |
92 | + * Validate a single extension dependency | |
93 | + * | |
94 | + * @param string $name the extension class name (without vendor namespace prefix) | |
95 | + * @param mixed $repo the extension package repository names (without vendor name prefix) | |
96 | + * @param string $reason a user friendly message for dependency validation failure | |
97 | + * | |
98 | + * @throws InvalidConfigException if extension fails dependency validation | |
99 | + */ | |
100 | + public static function checkDependency($name = '', $repo = '', $reason = self::DEFAULT_REASON) | |
101 | + { | |
102 | + if (empty($name)) { | |
103 | + return; | |
104 | + } | |
105 | + $command = "php composer.phar require " . self::VENDOR_NAME; | |
106 | + $version = ": \"@dev\""; | |
107 | + $class = (substr($name, 0, 8) == self::NAMESPACE_PREFIX) ? $name : self::NAMESPACE_PREFIX . $name; | |
108 | + | |
109 | + if (is_array($repo)) { | |
110 | + $repos = "one of '" . implode("' OR '", $repo) . "' extensions. "; | |
111 | + $installs = $command . implode("{$version}\n\n--- OR ---\n\n{$command}", $repo) . $version; | |
112 | + } else { | |
113 | + $repos = "the '" . $repo . "' extension. "; | |
114 | + $installs = $command . $repo . $version; | |
115 | + } | |
116 | + | |
117 | + if (!class_exists($class)) { | |
118 | + throw new InvalidConfigException( | |
119 | + "The class '{$class}' was not found and is required {$reason}.\n\n" . | |
120 | + "Please ensure you have installed {$repos}" . | |
121 | + "To install, you can run this console command from your application root:\n\n{$installs}" | |
122 | + ); | |
123 | + } | |
124 | + } | |
125 | + | |
126 | + /** | |
127 | + * Gets list of namespaced Krajee input widget classes as an associative | |
128 | + * array, where the array keys are the namespaced classes, and the array | |
129 | + * values are the names of the github repository to which these classes | |
130 | + * belong to. | |
131 | + * | |
132 | + * @returns array | |
133 | + */ | |
134 | + public static function getInputWidgets() | |
135 | + { | |
136 | + return static::$_validInputWidgets; | |
137 | + } | |
138 | + | |
139 | + /** | |
140 | + * Check if a type of input is any possible valid input (html or widget) | |
141 | + * | |
142 | + * @param string $type the type of input | |
143 | + * | |
144 | + * @returns bool | |
145 | + */ | |
146 | + public static function isValidInput($type) | |
147 | + { | |
148 | + return static::isHtmlInput($type) || static::isInputWidget($type) || $type === 'widget'; | |
149 | + } | |
150 | + | |
151 | + /** | |
152 | + * Check if a input type is a valid Html Input | |
153 | + * | |
154 | + * @param string $type the type of input | |
155 | + * | |
156 | + * @returns bool | |
157 | + */ | |
158 | + public static function isHtmlInput($type) | |
159 | + { | |
160 | + return in_array($type, static::$_validHtmlInputs); | |
161 | + } | |
162 | + | |
163 | + /** | |
164 | + * Check if a type of input is a valid input widget | |
165 | + * | |
166 | + * @param string $type the type of input | |
167 | + * | |
168 | + * @returns bool | |
169 | + */ | |
170 | + public static function isInputWidget($type) | |
171 | + { | |
172 | + return isset(static::$_validInputWidgets[$type]); | |
173 | + } | |
174 | + | |
175 | + /** | |
176 | + * Check if a input type is a valid dropdown input | |
177 | + * | |
178 | + * @param string $type the type of input | |
179 | + * | |
180 | + * @returns bool | |
181 | + */ | |
182 | + public static function isDropdownInput($type) | |
183 | + { | |
184 | + return in_array($type, static::$_validDropdownInputs); | |
185 | + } | |
186 | + | |
187 | + /** | |
188 | + * Check if a namespaced widget is valid or installed. | |
189 | + * | |
190 | + * @throws InvalidConfigException | |
191 | + */ | |
192 | + public static function validateInputWidget($type, $reason = self::DEFAULT_REASON) | |
193 | + { | |
194 | + if (static::isInputWidget($type)) { | |
195 | + static::checkDependency($type, static::$_validInputWidgets[$type], $reason); | |
196 | + } | |
197 | + } | |
198 | + | |
199 | + /** | |
200 | + * Convert a language string in yii\i18n format to | |
201 | + * a ISO-639 format (2 or 3 letter code). | |
202 | + * | |
203 | + * @param string $language the input language string | |
204 | + * | |
205 | + * @return string | |
206 | + */ | |
207 | + public static function getLang($language) | |
208 | + { | |
209 | + $pos = strpos($language, "-"); | |
210 | + return $pos > 0 ? substr($language, 0, $pos) : $language; | |
211 | + } | |
212 | + | |
213 | + /** | |
214 | + * Get the current directory of the extended class object | |
215 | + * | |
216 | + * @param mixed $object the called object instance | |
217 | + * | |
218 | + * @return string | |
219 | + */ | |
220 | + public static function getCurrentDir($object) | |
221 | + { | |
222 | + if (empty($object)) { | |
223 | + return ''; | |
224 | + } | |
225 | + $child = new \ReflectionClass($object); | |
226 | + return dirname($child->getFileName()); | |
227 | + } | |
228 | + | |
229 | + /** | |
230 | + * Check if a file exists | |
231 | + * | |
232 | + * @param string $file the file with path in URL format | |
233 | + * | |
234 | + * @return bool | |
235 | + */ | |
236 | + public static function fileExists($file) | |
237 | + { | |
238 | + $file = str_replace('/', DIRECTORY_SEPARATOR, $file); | |
239 | + return file_exists($file); | |
240 | + } | |
241 | + | |
242 | + /** | |
243 | + * Gets the module | |
244 | + * | |
245 | + * @param string $m the module name | |
246 | + * | |
247 | + * @return Module | |
248 | + */ | |
249 | + public static function getModule($m) | |
250 | + { | |
251 | + $mod = Yii::$app->controller->module; | |
252 | + return $mod && $mod->getModule($m) ? $mod->getModule($m) : Yii::$app->getModule($m); | |
253 | + } | |
254 | + | |
255 | + /** | |
256 | + * Initializes and validates the module | |
257 | + * | |
258 | + * @param string $class the Module class name | |
259 | + * | |
260 | + * @return \yii\base\Module | |
261 | + * | |
262 | + * @throws InvalidConfigException | |
263 | + */ | |
264 | + public static function initModule($class) | |
265 | + { | |
266 | + $m = $class::MODULE; | |
267 | + $module = $m ? static::getModule($m) : null; | |
268 | + if ($module === null || !$module instanceof $class) { | |
269 | + throw new InvalidConfigException("The '{$m}' module MUST be setup in your Yii configuration file and must be an instance of '{$class}'."); | |
270 | + } | |
271 | + return $module; | |
272 | + } | |
273 | +} | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | +use yii\helpers\Html; | |
14 | +use yii\helpers\ArrayHelper; | |
15 | + | |
16 | +/** | |
17 | + * Html5Input widget is a widget encapsulating the HTML 5 inputs. | |
18 | + * | |
19 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
20 | + * @since 1.0 | |
21 | + * @see http://twitter.github.com/typeahead.js/examples | |
22 | + */ | |
23 | +class Html5Input extends InputWidget | |
24 | +{ | |
25 | + /** | |
26 | + * @var array the special inputs which need captions | |
27 | + */ | |
28 | + private static $_specialInputs = [ | |
29 | + 'color', | |
30 | + 'range' | |
31 | + ]; | |
32 | + /** | |
33 | + * @var string the HTML 5 input type | |
34 | + */ | |
35 | + public $type; | |
36 | + /** | |
37 | + * @var string the width in 'px' or '%' of the HTML5 input container | |
38 | + */ | |
39 | + public $width; | |
40 | + /** | |
41 | + * @var array the HTML attributes for the widget container | |
42 | + */ | |
43 | + public $containerOptions = []; | |
44 | + /** | |
45 | + * @var array the HTML attributes for the HTML-5 input. | |
46 | + */ | |
47 | + public $html5Options = []; | |
48 | + /** | |
49 | + * @var array the HTML attributes for the HTML-5 input container | |
50 | + */ | |
51 | + public $html5Container = []; | |
52 | + /** | |
53 | + * @var string|boolean the message shown for unsupported browser. If set to false | |
54 | + * will not be displayed | |
55 | + */ | |
56 | + public $noSupport; | |
57 | + /** | |
58 | + * @var string array the HTML attributes for container displaying unsupported browser message | |
59 | + */ | |
60 | + public $noSupportOptions = []; | |
61 | + /** | |
62 | + * @var string one of the SIZE modifiers 'lg', 'md', 'sm', 'xs' | |
63 | + */ | |
64 | + public $size; | |
65 | + /** | |
66 | + * @var array the addon content | |
67 | + * - prepend: array/string the prepend addon content. If set as an array, the | |
68 | + * following options can be set: | |
69 | + * - content: string the prepend addon content | |
70 | + * - asButton: boolean whether the addon is a button | |
71 | + * - options: array the HTML attributes for the prepend addon | |
72 | + * - append: array/string the append addon content. If set as an array, the | |
73 | + * following options can be set: | |
74 | + * - content: string the append addon content | |
75 | + * - asButton: boolean whether the addon is a button | |
76 | + * - options: array the HTML attributes for the append addon | |
77 | + * - preCaption: array/string the addon content placed before the caption. If | |
78 | + * set as an array, the following options can be set: | |
79 | + * - content: string the append addon content | |
80 | + * - asButton: boolean whether the addon is a button | |
81 | + * - options: array the HTML attributes for the append addon */ | |
82 | + public $addon = []; | |
83 | + | |
84 | + /** | |
85 | + * Runs the widget | |
86 | + */ | |
87 | + public function init() | |
88 | + { | |
89 | + parent::init(); | |
90 | + $this->initInput(); | |
91 | + } | |
92 | + | |
93 | + protected function initInput() | |
94 | + { | |
95 | + $this->initDisability($this->html5Options); | |
96 | + if (in_array($this->type, self::$_specialInputs)) { | |
97 | + $this->html5Options['id'] = $this->options['id'] . '-source'; | |
98 | + $this->registerAssets(); | |
99 | + echo $this->renderInput(); | |
100 | + } else { | |
101 | + ArrayHelper::merge($this->options, $this->html5Options); | |
102 | + if (isset($this->size)) { | |
103 | + Html::addCssClass($this->options, ['class' => 'input-' . $this->size]); | |
104 | + } | |
105 | + echo $this->getHtml5Input(); | |
106 | + } | |
107 | + } | |
108 | + | |
109 | + /** | |
110 | + * Registers the needed assets | |
111 | + */ | |
112 | + public function registerAssets() | |
113 | + { | |
114 | + $view = $this->getView(); | |
115 | + Html5InputAsset::register($view); | |
116 | + $caption = 'jQuery("#' . $this->options['id'] . '")'; | |
117 | + $input = 'jQuery("#' . $this->html5Options['id'] . '")'; | |
118 | + $js = "{$caption}.on('change',function(){{$input}.val(this.value)});\n" . | |
119 | + "{$input}.on('input change',function(e){{$caption}.val(this.value);if(e.type=='change'){{$caption}.trigger('change');}});"; | |
120 | + $view->registerJs($js); | |
121 | + } | |
122 | + | |
123 | + /** | |
124 | + * Renders the special HTML5 input | |
125 | + * Mainly useful for the color and range inputs | |
126 | + */ | |
127 | + protected function renderInput() | |
128 | + { | |
129 | + Html::addCssClass($this->options, 'form-control'); | |
130 | + $size = isset($this->size) ? ' input-group-' . $this->size : ''; | |
131 | + Html::addCssClass($this->containerOptions, 'input-group input-group-html5' . $size); | |
132 | + if (isset($this->width) && ($this->width > 0)) { | |
133 | + Html::addCssStyle($this->html5Container, 'width:' . $this->width); | |
134 | + } | |
135 | + Html::addCssClass($this->html5Container, 'input-group-addon addon-' . $this->type); | |
136 | + $caption = $this->getInput('textInput'); | |
137 | + $value = $this->hasModel() ? Html::getAttributeValue($this->model, $this->attribute) : $this->value; | |
138 | + $input = Html::input($this->type, $this->html5Options['id'], $value, $this->html5Options); | |
139 | + $prepend = static::getAddonContent(ArrayHelper::getValue($this->addon, 'prepend', '')); | |
140 | + $append = static::getAddonContent(ArrayHelper::getValue($this->addon, 'append', '')); | |
141 | + $preCaption = static::getAddonContent(ArrayHelper::getValue($this->addon, 'preCaption', '')); | |
142 | + $prepend .= Html::tag('span', $input, $this->html5Container); | |
143 | + $content = Html::tag('div', $prepend . $preCaption . $caption . $append, $this->containerOptions); | |
144 | + Html::addCssClass($this->noSupportOptions, 'alert alert-warning'); | |
145 | + if ($this->noSupport === false) { | |
146 | + $message = ''; | |
147 | + } else { | |
148 | + $noSupport = !empty($this->noSupport) ? $this->noSupport : | |
149 | + Yii::t('app', 'It is recommended you use an upgraded browser to display the {type} control properly.', | |
150 | + ['type' => $this->type]); | |
151 | + $message = "\n<br>" . Html::tag('div', $noSupport, $this->noSupportOptions); | |
152 | + } | |
153 | + return "<!--[if lt IE 10]>\n{$caption}{$message}\n<![endif]--><![if gt IE 9]>\n{$content}\n<![endif]>"; | |
154 | + } | |
155 | + | |
156 | + /** | |
157 | + * Parses and returns addon content | |
158 | + * | |
159 | + * @param string /array $addon the addon parameter | |
160 | + * | |
161 | + * @return string | |
162 | + */ | |
163 | + protected static function getAddonContent($addon) | |
164 | + { | |
165 | + if (is_array($addon)) { | |
166 | + $content = ArrayHelper::getValue($addon, 'content', ''); | |
167 | + $options = ArrayHelper::getValue($addon, 'options', []); | |
168 | + if (ArrayHelper::getValue($addon, 'asButton', false) == true) { | |
169 | + Html::addCssClass($options, 'input-group-btn'); | |
170 | + return Html::tag('div', $content, $options); | |
171 | + } else { | |
172 | + Html::addCssClass($options, 'input-group-addon'); | |
173 | + return Html::tag('span', $content, $options); | |
174 | + } | |
175 | + } | |
176 | + return $addon; | |
177 | + } | |
178 | + | |
179 | + /** | |
180 | + * Gets the HTML5 input | |
181 | + * return string | |
182 | + */ | |
183 | + protected function getHtml5Input() | |
184 | + { | |
185 | + if ($this->hasModel()) { | |
186 | + return Html::activeInput($this->type, $this->model, $this->attribute, $this->options); | |
187 | + } | |
188 | + return Html::input($this->type, $this->name, $this->value, $this->options); | |
189 | + } | |
190 | +} | ... | ... |
vendor/kartik-v/yii2-krajee-base/Html5InputAsset.php
0 → 100644
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
5 | + * @package yii2-krajee-base | |
6 | + * @version 1.7.7 | |
7 | + */ | |
8 | + | |
9 | +namespace kartik\base; | |
10 | + | |
11 | +/** | |
12 | + * Asset bundle for Html5Input Widget | |
13 | + * | |
14 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
15 | + * @since 1.0 | |
16 | + */ | |
17 | +class Html5InputAsset extends \kartik\base\AssetBundle | |
18 | +{ | |
19 | + /** | |
20 | + * @inheritdoc | |
21 | + */ | |
22 | + public function init() | |
23 | + { | |
24 | + $this->setSourcePath(__DIR__ . '/assets'); | |
25 | + $this->setupAssets('css', ['css/html5input']); | |
26 | + parent::init(); | |
27 | + } | |
28 | +} | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | +use yii\helpers\FormatConverter; | |
14 | +use yii\helpers\Html; | |
15 | +use yii\helpers\ArrayHelper; | |
16 | + | |
17 | +/** | |
18 | + * Base input widget class for Krajee extensions | |
19 | + * | |
20 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
21 | + * @since 1.0 | |
22 | + */ | |
23 | +class InputWidget extends \yii\widgets\InputWidget | |
24 | +{ | |
25 | + use TranslationTrait; | |
26 | + use WidgetTrait; | |
27 | + | |
28 | + const LOAD_PROGRESS = '<div class="kv-plugin-loading"> </div>'; | |
29 | + | |
30 | + /** | |
31 | + * @var string the language configuration (e.g. 'fr-FR', 'zh-CN'). The format for the language/locale is | |
32 | + * ll-CC where ll is a two or three letter lowercase code for a language according to ISO-639 and | |
33 | + * CC is the country code according to ISO-3166. | |
34 | + * If this property not set, then the current application language will be used. | |
35 | + */ | |
36 | + public $language; | |
37 | + | |
38 | + /** | |
39 | + * @var boolean whether input is to be disabled | |
40 | + */ | |
41 | + public $disabled = false; | |
42 | + | |
43 | + /** | |
44 | + * @var boolean whether input is to be readonly | |
45 | + */ | |
46 | + public $readonly = false; | |
47 | + | |
48 | + /** | |
49 | + * @var mixed show loading indicator while plugin loads | |
50 | + */ | |
51 | + public $pluginLoading = true; | |
52 | + | |
53 | + /** | |
54 | + * @var array the data (for list inputs) | |
55 | + */ | |
56 | + public $data = []; | |
57 | + | |
58 | + /** | |
59 | + * @var string the name of the jQuery plugin | |
60 | + */ | |
61 | + public $pluginName = ''; | |
62 | + | |
63 | + /** | |
64 | + * @var array widget plugin options | |
65 | + */ | |
66 | + public $pluginOptions = []; | |
67 | + | |
68 | + /** | |
69 | + * @var array widget JQuery events. You must define events in | |
70 | + * event-name => event-function format | |
71 | + * for example: | |
72 | + * ~~~ | |
73 | + * pluginEvents = [ | |
74 | + * "change" => "function() { log("change"); }", | |
75 | + * "open" => "function() { log("open"); }", | |
76 | + * ]; | |
77 | + * ~~~ | |
78 | + */ | |
79 | + public $pluginEvents = []; | |
80 | + | |
81 | + /** | |
82 | + * @var boolean whether the widget should automatically format the date from | |
83 | + * the PHP DateTime format to the javascript/jquery plugin format | |
84 | + * @see http://php.net/manual/en/function.date.php | |
85 | + */ | |
86 | + public $convertFormat = false; | |
87 | + | |
88 | + /** | |
89 | + * @var array the the internalization configuration for this widget | |
90 | + */ | |
91 | + public $i18n = []; | |
92 | + | |
93 | + /** | |
94 | + * @var string the hashed variable to store the pluginOptions | |
95 | + */ | |
96 | + protected $_dataVar; | |
97 | + | |
98 | + /** | |
99 | + * @var string the hashed variable to store the pluginOptions | |
100 | + */ | |
101 | + protected $_hashVar; | |
102 | + | |
103 | + /** | |
104 | + * @var string the Json encoded options | |
105 | + */ | |
106 | + protected $_encOptions = ''; | |
107 | + | |
108 | + /** | |
109 | + * @var string the indicator for loading | |
110 | + */ | |
111 | + protected $_loadIndicator = ''; | |
112 | + | |
113 | + /** | |
114 | + * @var string the two or three letter lowercase code | |
115 | + * for the language according to ISO-639 | |
116 | + */ | |
117 | + protected $_lang = ''; | |
118 | + | |
119 | + /** | |
120 | + * @var string the language js file | |
121 | + */ | |
122 | + protected $_langFile = ''; | |
123 | + | |
124 | + /** | |
125 | + * @var string translation message file category name for i18n | |
126 | + */ | |
127 | + protected $_msgCat = ''; | |
128 | + | |
129 | + /** | |
130 | + * @inheritdoc | |
131 | + */ | |
132 | + public function init() | |
133 | + { | |
134 | + parent::init(); | |
135 | + if (!isset($this->language)) { | |
136 | + $this->language = Yii::$app->language; | |
137 | + } | |
138 | + $this->_lang = Config::getLang($this->language); | |
139 | + if ($this->pluginLoading) { | |
140 | + $this->_loadIndicator = self::LOAD_PROGRESS; | |
141 | + } | |
142 | + if ($this->hasModel()) { | |
143 | + $this->name = empty($this->options['name']) ? Html::getInputName($this->model, $this->attribute) : | |
144 | + $this->options['name']; | |
145 | + $this->value = Html::getAttributeValue($this->model, $this->attribute); | |
146 | + } | |
147 | + $this->initDisability($this->options); | |
148 | + $view = $this->getView(); | |
149 | + WidgetAsset::register($view); | |
150 | + } | |
151 | + | |
152 | + /** | |
153 | + * Validates and sets disabled or readonly inputs | |
154 | + * | |
155 | + * @param array $options the HTML attributes for the input | |
156 | + */ | |
157 | + protected function initDisability(&$options) | |
158 | + { | |
159 | + if ($this->disabled && !isset($options['disabled'])) { | |
160 | + $options['disabled'] = true; | |
161 | + } | |
162 | + if ($this->readonly && !isset($options['readonly'])) { | |
163 | + $options['readonly'] = true; | |
164 | + } | |
165 | + } | |
166 | + | |
167 | + /** | |
168 | + * Initialize the plugin language | |
169 | + * | |
170 | + * @param string $property the name of language property in [[pluginOptions]]. | |
171 | + * @param boolean $full whether to use the full language string. Defaults to `false` | |
172 | + * which is the 2 (or 3) digit ISO-639 format. | |
173 | + * Defaults to 'language'. | |
174 | + */ | |
175 | + protected function initLanguage($property = 'language', $full = false) | |
176 | + { | |
177 | + if (empty($this->pluginOptions[$property])) { | |
178 | + $this->pluginOptions[$property] = $full ? $this->language : $this->_lang; | |
179 | + } | |
180 | + } | |
181 | + | |
182 | + /** | |
183 | + * Sets the language JS file if it exists | |
184 | + * | |
185 | + * @param string $assetPath the path to the assets | |
186 | + * @param string $filePath the path to the JS file with the file name prefix | |
187 | + * @param string $suffix the file name suffix - defaults to '.js' | |
188 | + */ | |
189 | + protected function setLanguage($prefix, $assetPath = null, $filePath = null, $suffix = '.js') | |
190 | + { | |
191 | + $pwd = Config::getCurrentDir($this); | |
192 | + $s = DIRECTORY_SEPARATOR; | |
193 | + if ($assetPath === null) { | |
194 | + $assetPath = "{$pwd}{$s}assets{$s}"; | |
195 | + } elseif (substr($assetPath, -1) != $s) { | |
196 | + $assetPath .= $s; | |
197 | + } | |
198 | + if ($filePath === null) { | |
199 | + $filePath = "js{$s}locales{$s}"; | |
200 | + } elseif (substr($filePath, -1) != $s) { | |
201 | + $filePath .= $s; | |
202 | + } | |
203 | + $full = $filePath . $prefix . $this->language . $suffix; | |
204 | + $fullLower = $filePath . $prefix . strtolower($this->language) . $suffix; | |
205 | + $short = $filePath . $prefix . $this->_lang . $suffix; | |
206 | + if (Config::fileExists($assetPath . $full)) { | |
207 | + $this->_langFile = $full; | |
208 | + $this->pluginOptions['language'] = $this->language; | |
209 | + } elseif (Config::fileExists($assetPath . $fullLower)) { | |
210 | + $this->_langFile = $fullLower; | |
211 | + $this->pluginOptions['language'] = strtolower($this->language); | |
212 | + } elseif (Config::fileExists($assetPath . $short)) { | |
213 | + $this->_langFile = $short; | |
214 | + $this->pluginOptions['language'] = $this->_lang; | |
215 | + } else { | |
216 | + $this->_langFile = ''; | |
217 | + } | |
218 | + $this->_langFile = str_replace($s, '/', $this->_langFile); | |
219 | + } | |
220 | + | |
221 | + /** | |
222 | + * Generates an input | |
223 | + */ | |
224 | + protected function getInput($type, $list = false) | |
225 | + { | |
226 | + if ($this->hasModel()) { | |
227 | + $input = 'active' . ucfirst($type); | |
228 | + return $list ? | |
229 | + Html::$input($this->model, $this->attribute, $this->data, $this->options) : | |
230 | + Html::$input($this->model, $this->attribute, $this->options); | |
231 | + } | |
232 | + $input = $type; | |
233 | + $checked = false; | |
234 | + if ($type == 'radio' || $type == 'checkbox') { | |
235 | + $this->options['value'] = $this->value; | |
236 | + $checked = ArrayHelper::remove($this->options, 'checked', ''); | |
237 | + if (empty($checked) && !empty($this->value)) { | |
238 | + $checked = ($this->value == 0) ? false : true; | |
239 | + } elseif (empty($checked)) { | |
240 | + $checked = false; | |
241 | + } | |
242 | + } | |
243 | + return $list ? | |
244 | + Html::$input($this->name, $this->value, $this->data, $this->options) : | |
245 | + (($type == 'checkbox' || $type == 'radio') ? | |
246 | + Html::$input($this->name, $checked, $this->options) : | |
247 | + Html::$input($this->name, $this->value, $this->options)); | |
248 | + } | |
249 | + | |
250 | + /** | |
251 | + * Automatically convert the date format from PHP DateTime to Javascript DateTime format | |
252 | + * | |
253 | + * @see http://php.net/manual/en/function.date.php | |
254 | + * @see http://bootstrap-datetimepicker.readthedocs.org/en/release/options.html#format | |
255 | + * | |
256 | + * @param string $format the PHP date format string | |
257 | + * | |
258 | + * @return string | |
259 | + */ | |
260 | + protected static function convertDateFormat($format) | |
261 | + { | |
262 | + return strtr($format, [ | |
263 | + // meridian lowercase | |
264 | + 'a' => 'p', | |
265 | + // meridian uppercase | |
266 | + 'A' => 'P', | |
267 | + // second (with leading zeros) | |
268 | + 's' => 'ss', | |
269 | + // minute (with leading zeros) | |
270 | + 'i' => 'ii', | |
271 | + // hour in 12-hour format (no leading zeros) | |
272 | + 'g' => 'H', | |
273 | + // hour in 24-hour format (no leading zeros) | |
274 | + 'G' => 'h', | |
275 | + // hour in 12-hour format (with leading zeros) | |
276 | + 'h' => 'HH', | |
277 | + // hour in 24-hour format (with leading zeros) | |
278 | + 'H' => 'hh', | |
279 | + // day of month (no leading zero) | |
280 | + 'j' => 'd', | |
281 | + // day of month (two digit) | |
282 | + 'd' => 'dd', | |
283 | + // day name short is always 'D' | |
284 | + // day name long | |
285 | + 'l' => 'DD', | |
286 | + // month of year (no leading zero) | |
287 | + 'n' => 'm', | |
288 | + // month of year (two digit) | |
289 | + 'm' => 'mm', | |
290 | + // month name short is always 'M' | |
291 | + // month name long | |
292 | + 'F' => 'MM', | |
293 | + // year (two digit) | |
294 | + 'y' => 'yy', | |
295 | + // year (four digit) | |
296 | + 'Y' => 'yyyy', | |
297 | + ]); | |
298 | + } | |
299 | + | |
300 | + /** | |
301 | + * Parses date format based on attribute type using yii\helpers\FormatConverter | |
302 | + * Used only within DatePicker and DateTimePicker. | |
303 | + * | |
304 | + * @param string $type the attribute type whether date, datetime, or time | |
305 | + * | |
306 | + * @return mixed|string | |
307 | + * @throws InvalidConfigException | |
308 | + */ | |
309 | + protected function parseDateFormat($type) | |
310 | + { | |
311 | + if (!$this->convertFormat) { | |
312 | + return; | |
313 | + } | |
314 | + if (isset($this->pluginOptions['format'])) { | |
315 | + $format = $this->pluginOptions['format']; | |
316 | + $format = strncmp($format, 'php:', 4) === 0 ? substr($format, | |
317 | + 4) : FormatConverter::convertDateIcuToPhp($format, $type); | |
318 | + $this->pluginOptions['format'] = static::convertDateFormat($format); | |
319 | + return; | |
320 | + } | |
321 | + $attrib = $type . 'Format'; | |
322 | + $format = isset(Yii::$app->formatter->$attrib) ? Yii::$app->formatter->$attrib : ''; | |
323 | + if (isset($this->dateFormat) && strncmp($this->dateFormat, 'php:', 4) === 0) { | |
324 | + $this->pluginOptions['format'] = static::convertDateFormat(substr($format, 4)); | |
325 | + } elseif ($format != '') { | |
326 | + $format = FormatConverter::convertDateIcuToPhp($format, $type); | |
327 | + $this->pluginOptions['format'] = static::convertDateFormat($format); | |
328 | + } else { | |
329 | + throw InvalidConfigException("Error parsing '{$type}' format."); | |
330 | + } | |
331 | + } | |
332 | +} | |
0 | 333 | \ No newline at end of file | ... | ... |
1 | +Copyright (c) 2014 - 2015, Kartik Visweswaran | |
2 | +Krajee.com | |
3 | +All rights reserved. | |
4 | + | |
5 | +Redistribution and use in source and binary forms, with or without modification, | |
6 | +are permitted provided that the following conditions are met: | |
7 | + | |
8 | +* Redistributions of source code must retain the above copyright notice, this | |
9 | + list of conditions and the following disclaimer. | |
10 | + | |
11 | +* Redistributions in binary form must reproduce the above copyright notice, this | |
12 | + list of conditions and the following disclaimer in the documentation and/or | |
13 | + other materials provided with the distribution. | |
14 | + | |
15 | +* Neither the names of Kartik Visweswaran or Krajee nor the names of its | |
16 | + contributors may be used to endorse or promote products derived from | |
17 | + this software without specific prior written permission. | |
18 | + | |
19 | +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND | |
20 | +ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED | |
21 | +WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE | |
22 | +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR | |
23 | +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES | |
24 | +(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | |
25 | +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON | |
26 | +ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
27 | +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS | |
28 | +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +/** | |
13 | + * Base module class for Krajee extensions | |
14 | + * | |
15 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
16 | + * @since 1.7.7 | |
17 | + */ | |
18 | +class Module extends \yii\base\Module | |
19 | +{ | |
20 | + use TranslationTrait; | |
21 | + | |
22 | + /** | |
23 | + * @var array the the internalization configuration for this widget | |
24 | + */ | |
25 | + public $i18n = []; | |
26 | + | |
27 | + /** | |
28 | + * @var string translation message file category name for i18n | |
29 | + */ | |
30 | + protected $_msgCat = ''; | |
31 | + | |
32 | + /** | |
33 | + * @inheritdoc | |
34 | + */ | |
35 | + public function init() | |
36 | + { | |
37 | + parent::init(); | |
38 | + $this->initI18N(); | |
39 | + } | |
40 | +} | ... | ... |
vendor/kartik-v/yii2-krajee-base/PluginAssetBundle.php
0 → 100644
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +/** | |
13 | + * Base asset bundle for Krajee extensions (including bootstrap plugins) | |
14 | + * | |
15 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
16 | + * @since 1.6.0 | |
17 | + */ | |
18 | +class PluginAssetBundle extends AssetBundle | |
19 | +{ | |
20 | + /** | |
21 | + * @inheritdoc | |
22 | + */ | |
23 | + public $depends = [ | |
24 | + 'yii\web\YiiAsset', | |
25 | + 'yii\bootstrap\BootstrapAsset', | |
26 | + 'yii\bootstrap\BootstrapPluginAsset' | |
27 | + ]; | |
28 | +} | |
29 | + | |
0 | 30 | \ No newline at end of file | ... | ... |
1 | +yii2-krajee-base | |
2 | +================ | |
3 | + | |
4 | +[](https://packagist.org/packages/kartik-v/yii2-krajee-base) | |
5 | +[](https://packagist.org/packages/kartik-v/yii2-krajee-base) | |
6 | +[](https://packagist.org/packages/kartik-v/yii2-krajee-base) | |
7 | +[](https://packagist.org/packages/kartik-v/yii2-krajee-base) | |
8 | +[](https://packagist.org/packages/kartik-v/yii2-krajee-base) | |
9 | + | |
10 | +This is a base library with set of foundation classes and components used by all [Yii2 extensions by Krajee](http://demos.krajee.com). One can use this base library during creation of one's own extensions if needed. | |
11 | + | |
12 | +> NOTE: This extension depends on the [yiisoft/yii2-bootstrap](https://github.com/yiisoft/yii2/tree/master/extensions/bootstrap) extension. Check the [composer.json](https://github.com/kartik-v/yii2-krajee-base/blob/master/composer.json) for this extension's requirements and dependencies. | |
13 | + | |
14 | +## Why this extension? | |
15 | +To ensure a leaner code base / foundation component for use in all Krajee extensions (e.g. yii2-widgets, yii2-datecontrol, yii2-grid, yii2-dynagrid etc.). This should allow most developers to plug and play components only they need, without needing the complete suite of widgets. For example, this mitigates [this issue](https://github.com/kartik-v/yii2-grid/issues/123). | |
16 | + | |
17 | +## Latest Release | |
18 | +The latest version of the extension is v1.7.7. Refer the [CHANGE LOG](https://github.com/kartik-v/yii2-krajee-base/blob/master/CHANGE.md) for details. | |
19 | + | |
20 | +## Extension Classes | |
21 | + | |
22 | +### [Module](https://github.com/kartik-v/yii2-krajee-base/blob/master/Module.php) | |
23 | +Extends [Yii Module](https://github.com/yiisoft/yii2/blob/master/framework/base/Module.php) class for Krajee's Yii2 widgets and usage with translation properties enabled. | |
24 | + | |
25 | +### [Widget](https://github.com/kartik-v/yii2-krajee-base/blob/master/Widget.php) | |
26 | +Extends [Yii Widget](https://github.com/yiisoft/yii2/blob/master/framework/base/Widget.php) class for Krajee's Yii2 widgets and usage with bootstrap CSS framework. | |
27 | + | |
28 | +### [InputWidget](https://github.com/kartik-v/yii2-krajee-base/blob/master/InputWidget.php) | |
29 | +Extends [Yii InputWidget](https://github.com/yiisoft/yii2/blob/master/framework/widgets/InputWidget.php) class for Krajee's Yii2 widgets and usage with bootstrap CSS framework. With release v1.3.0, the Input widget automatically now attaches the following HTML5 data attribute for each input that registers jQuery plugins via `registerPlugin` method: | |
30 | + | |
31 | +- `data-krajee-{name}` the client options of the plugin. The tag `{name}` will be replaced with the registered jQuery plugin name (e.g. `select2`, `typeahead` etc.). | |
32 | + | |
33 | +### [TranslationTrait](https://github.com/kartik-v/yii2-krajee-base/blob/master/TranslationTrait.php) | |
34 | +A trait for handling translation functionality using Yii's i18n components. | |
35 | + | |
36 | +### [WidgetTrait](https://github.com/kartik-v/yii2-krajee-base/blob/master/WidgetTrait.php) | |
37 | +A trait for Krajee widgets including prebuilt methods for plugin registration. | |
38 | + | |
39 | +### [AssetBundle](https://github.com/kartik-v/yii2-krajee-base/blob/master/AssetBundle.php) | |
40 | +Extends [Yii AssetBundle](https://github.com/yiisoft/yii2/blob/master/framework/web/AssetBundle.php) class for Krajee's Yii2 widgets with enhancements for using minimized CSS and JS based on debug mode. | |
41 | + | |
42 | +### [PluginAssetBundle](https://github.com/kartik-v/yii2-krajee-base/blob/master/PluginAssetBundle.php) | |
43 | +Extension of the above [AssetBundle](https://github.com/kartik-v/yii2-krajee-base/blob/master/AssetBundle.php) to include dependency on Bootstrap javascript plugins. | |
44 | + | |
45 | +### [AnimateAsset](https://github.com/kartik-v/yii2-krajee-base/blob/master/AnimateAsset.php) | |
46 | +An asset bundle for loading various CSS3 animations and effects. | |
47 | + | |
48 | +### [Html5Input](https://github.com/kartik-v/yii2-krajee-base/blob/master/Html5Input.php) | |
49 | +A modified input widget for rendering HTML5 inputs with bootstrap styling and input group addons for Krajee's Yii 2 extensions. | |
50 | + | |
51 | +### [Config](https://github.com/kartik-v/yii2-krajee-base/blob/master/Config.php) | |
52 | +A global configuration and validation helper class for usage across Krajee's Yii 2 extensions. | |
53 | + | |
54 | +## Installation | |
55 | + | |
56 | +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). | |
57 | + | |
58 | +> Note: Read this [web tip /wiki](http://webtips.krajee.com/setting-composer-minimum-stability-application/) on setting the `minimum-stability` settings for your application's composer.json. | |
59 | + | |
60 | +Either run | |
61 | + | |
62 | +``` | |
63 | +$ php composer.phar require kartik-v/yii2-krajee-base "dev-master" | |
64 | +``` | |
65 | + | |
66 | +or add | |
67 | + | |
68 | +``` | |
69 | +"kartik-v/yii2-krajee-base": "dev-master" | |
70 | +``` | |
71 | + | |
72 | +to the ```require``` section of your `composer.json` file. | |
73 | + | |
74 | +## License | |
75 | + | |
76 | +**yii2-krajee-base** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details. | |
0 | 77 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/TranslationTrait.php
0 → 100644
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | + | |
14 | +/** | |
15 | + * Trait for all translations used in Krajee extensions | |
16 | + * | |
17 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
18 | + * @since 1.7.7 | |
19 | + */ | |
20 | +trait TranslationTrait | |
21 | +{ | |
22 | + /** | |
23 | + * Yii i18n messages configuration for generating translations | |
24 | + * | |
25 | + * @return void | |
26 | + */ | |
27 | + public function initI18N($dir = '') | |
28 | + { | |
29 | + if (empty($this->_msgCat)) { | |
30 | + return; | |
31 | + } | |
32 | + if (empty($dir)) { | |
33 | + $reflector = new \ReflectionClass(get_class($this)); | |
34 | + $dir = dirname($reflector->getFileName()); | |
35 | + } | |
36 | + Yii::setAlias("@{$this->_msgCat}", $dir); | |
37 | + if (empty($this->i18n)) { | |
38 | + $this->i18n = [ | |
39 | + 'class' => 'yii\i18n\PhpMessageSource', | |
40 | + 'basePath' => "@{$this->_msgCat}/messages", | |
41 | + 'forceTranslation' => true | |
42 | + ]; | |
43 | + } | |
44 | + Yii::$app->i18n->translations[$this->_msgCat . '*'] = $this->i18n; | |
45 | + } | |
46 | +} | |
0 | 47 | \ No newline at end of file | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | + | |
14 | +/** | |
15 | + * Base widget class for Krajee extensions | |
16 | + * | |
17 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
18 | + * @since 1.0 | |
19 | + */ | |
20 | +class Widget extends \yii\base\Widget | |
21 | +{ | |
22 | + use TranslationTrait; | |
23 | + use WidgetTrait; | |
24 | + | |
25 | + /** | |
26 | + * @var array HTML attributes or other settings for widgets | |
27 | + */ | |
28 | + public $options = []; | |
29 | + | |
30 | + /** | |
31 | + * @var array widget plugin options | |
32 | + */ | |
33 | + public $pluginOptions = []; | |
34 | + | |
35 | + /** | |
36 | + * @var array widget JQuery events. You must define events in | |
37 | + * event-name => event-function format | |
38 | + * for example: | |
39 | + * ~~~ | |
40 | + * pluginEvents = [ | |
41 | + * "change" => "function() { log("change"); }", | |
42 | + * "open" => "function() { log("open"); }", | |
43 | + * ]; | |
44 | + * ~~~ | |
45 | + */ | |
46 | + public $pluginEvents = []; | |
47 | + | |
48 | + /** | |
49 | + * @var array the the internalization configuration for this widget | |
50 | + */ | |
51 | + public $i18n = []; | |
52 | + | |
53 | + /** | |
54 | + * @var string translation message file category name for i18n | |
55 | + */ | |
56 | + protected $_msgCat = ''; | |
57 | + | |
58 | + /** | |
59 | + * @var string the name of the jQuery plugin | |
60 | + */ | |
61 | + protected $_pluginName; | |
62 | + | |
63 | + /** | |
64 | + * @var string the hashed global variable name storing the pluginOptions | |
65 | + */ | |
66 | + protected $_hashVar; | |
67 | + | |
68 | + /** | |
69 | + * @var string the element's HTML5 data variable name storing the pluginOptions | |
70 | + */ | |
71 | + protected $_dataVar; | |
72 | + | |
73 | + /** | |
74 | + * @var string the Json encoded options | |
75 | + */ | |
76 | + protected $_encOptions = ''; | |
77 | + | |
78 | + /** | |
79 | + * @inheritdoc | |
80 | + */ | |
81 | + public function init() | |
82 | + { | |
83 | + parent::init(); | |
84 | + if (empty($this->options['id'])) { | |
85 | + $this->options['id'] = $this->getId(); | |
86 | + } | |
87 | + } | |
88 | +} | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use Yii; | |
13 | + | |
14 | +/** | |
15 | + * Common base widget asset bundle for all Krajee widgets | |
16 | + * | |
17 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
18 | + * @since 1.0 | |
19 | + */ | |
20 | +class WidgetAsset extends AssetBundle | |
21 | +{ | |
22 | + /** | |
23 | + * @inheritdoc | |
24 | + */ | |
25 | + public function init() | |
26 | + { | |
27 | + $this->setSourcePath(__DIR__ . '/assets'); | |
28 | + $this->setupAssets('css', ['css/kv-widgets']); | |
29 | + parent::init(); | |
30 | + } | |
31 | +} | ... | ... |
1 | +<?php | |
2 | + | |
3 | +/** | |
4 | + * @package yii2-krajee-base | |
5 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
6 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
7 | + * @version 1.7.7 | |
8 | + */ | |
9 | + | |
10 | +namespace kartik\base; | |
11 | + | |
12 | +use yii\helpers\Json; | |
13 | +use yii\web\JsExpression; | |
14 | +use yii\web\View; | |
15 | + | |
16 | +/** | |
17 | + * Trait used for Krajee widgets. | |
18 | + * | |
19 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
20 | + * @since 1.6.0 | |
21 | + */ | |
22 | +trait WidgetTrait | |
23 | +{ | |
24 | + /** | |
25 | + * Sets HTML5 data variable | |
26 | + * | |
27 | + * @param string $name the plugin name | |
28 | + * | |
29 | + * @return void | |
30 | + */ | |
31 | + protected function setDataVar($name) | |
32 | + { | |
33 | + $this->_dataVar = "data-krajee-{$name}"; | |
34 | + } | |
35 | + | |
36 | + /** | |
37 | + * Adds an asset to the view | |
38 | + * | |
39 | + * @param View $view The View object | |
40 | + * @param string $file The asset file name | |
41 | + * @param string $type The asset file type (css or js) | |
42 | + * @param string $class The class name of the AssetBundle | |
43 | + * | |
44 | + * @return void | |
45 | + */ | |
46 | + protected function addAsset($view, $file, $type, $class) | |
47 | + { | |
48 | + if ($type == 'css' || $type == 'js') { | |
49 | + $asset = $view->getAssetManager(); | |
50 | + $bundle = $asset->bundles[$class]; | |
51 | + if ($type == 'css') { | |
52 | + $bundle->css[] = $file; | |
53 | + } else { | |
54 | + $bundle->js[] = $file; | |
55 | + } | |
56 | + $asset->bundles[$class] = $bundle; | |
57 | + $view->setAssetManager($asset); | |
58 | + } | |
59 | + } | |
60 | + | |
61 | + /** | |
62 | + * Generates a hashed variable to store the pluginOptions. The following special data attributes | |
63 | + * will also be setup for the input widget, that can be accessed through javascript : | |
64 | + * - 'data-krajee-{name}' will store the hashed variable storing the plugin options. The {name} | |
65 | + * tag will represent the plugin name (e.g. select2, typeahead etc.) - Fixes issue #6. | |
66 | + * | |
67 | + * @param string $name the name of the plugin | |
68 | + */ | |
69 | + protected function hashPluginOptions($name) | |
70 | + { | |
71 | + $this->_encOptions = empty($this->pluginOptions) ? '' : Json::htmlEncode($this->pluginOptions); | |
72 | + $this->_hashVar = $name . '_' . hash('crc32', $this->_encOptions); | |
73 | + $this->options['data-krajee-' . $name] = $this->_hashVar; | |
74 | + } | |
75 | + | |
76 | + /** | |
77 | + * Registers plugin options by storing it in a hashed javascript variable | |
78 | + * | |
79 | + * @return void | |
80 | + */ | |
81 | + protected function registerPluginOptions($name) | |
82 | + { | |
83 | + $view = $this->getView(); | |
84 | + $this->hashPluginOptions($name); | |
85 | + $encOptions = empty($this->_encOptions) ? '{}' : $this->_encOptions; | |
86 | + $view->registerJs("var {$this->_hashVar} = {$encOptions};\n", View::POS_HEAD); | |
87 | + } | |
88 | + | |
89 | + /** | |
90 | + * Returns the plugin registration script | |
91 | + * | |
92 | + * @param string $name the name of the plugin | |
93 | + * @param string $element the plugin target element | |
94 | + * @param string $callback the javascript callback function to be called after plugin loads | |
95 | + * @param string $callbackCon the javascript callback function to be passed to the plugin constructor | |
96 | + * | |
97 | + * @return the generated plugin script | |
98 | + */ | |
99 | + protected function getPluginScript($name, $element = null, $callback = null, $callbackCon = null) | |
100 | + { | |
101 | + $id = $element == null ? "jQuery('#" . $this->options['id'] . "')" : $element; | |
102 | + $script = ''; | |
103 | + if ($this->pluginOptions !== false) { | |
104 | + $this->registerPluginOptions($name); | |
105 | + $script = "{$id}.{$name}({$this->_hashVar})"; | |
106 | + if ($callbackCon != null) { | |
107 | + $script = "{$id}.{$name}({$this->_hashVar}, {$callbackCon})"; | |
108 | + } | |
109 | + if ($callback != null) { | |
110 | + $script = "jQuery.when({$script}).done({$callback})"; | |
111 | + } | |
112 | + $script .= ";\n"; | |
113 | + } | |
114 | + if (!empty($this->pluginEvents)) { | |
115 | + foreach ($this->pluginEvents as $event => $handler) { | |
116 | + $function = new JsExpression($handler); | |
117 | + $script .= "{$id}.on('{$event}', {$function});\n"; | |
118 | + } | |
119 | + } | |
120 | + return $script; | |
121 | + } | |
122 | + | |
123 | + /** | |
124 | + * Registers a specific plugin and the related events | |
125 | + * | |
126 | + * @param string $name the name of the plugin | |
127 | + * @param string $element the plugin target element | |
128 | + * @param string $callback the javascript callback function to be called after plugin loads | |
129 | + * @param string $callbackCon the javascript callback function to be passed to the plugin constructor | |
130 | + */ | |
131 | + protected function registerPlugin($name, $element = null, $callback = null, $callbackCon = null) | |
132 | + { | |
133 | + $script = $this->getPluginScript($name, $element, $callback, $callbackCon); | |
134 | + if (!empty($script)) { | |
135 | + $view = $this->getView(); | |
136 | + $view->registerJs($script); | |
137 | + } | |
138 | + } | |
139 | +} | |
0 | 140 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/animate.css
0 → 100644
1 | +@charset "UTF-8"; | |
2 | + | |
3 | +/*! | |
4 | +Animate.css - http://daneden.me/animate | |
5 | +Licensed under the MIT license - http://opensource.org/licenses/MIT | |
6 | + | |
7 | +Copyright (c) 2015 Daniel Eden | |
8 | +*/ | |
9 | + | |
10 | +.animated { | |
11 | + -webkit-animation-duration: 1s; | |
12 | + animation-duration: 1s; | |
13 | + -webkit-animation-fill-mode: both; | |
14 | + animation-fill-mode: both; | |
15 | +} | |
16 | + | |
17 | +.animated.infinite { | |
18 | + -webkit-animation-iteration-count: infinite; | |
19 | + animation-iteration-count: infinite; | |
20 | +} | |
21 | + | |
22 | +.animated.hinge { | |
23 | + -webkit-animation-duration: 2s; | |
24 | + animation-duration: 2s; | |
25 | +} | |
26 | + | |
27 | +@-webkit-keyframes bounce { | |
28 | + 0%, 20%, 53%, 80%, 100% { | |
29 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
30 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
31 | + -webkit-transform: translate3d(0, 0, 0); | |
32 | + transform: translate3d(0, 0, 0); | |
33 | + } | |
34 | + | |
35 | + 40%, 43% { | |
36 | + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
37 | + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
38 | + -webkit-transform: translate3d(0, -30px, 0); | |
39 | + transform: translate3d(0, -30px, 0); | |
40 | + } | |
41 | + | |
42 | + 70% { | |
43 | + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
44 | + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
45 | + -webkit-transform: translate3d(0, -15px, 0); | |
46 | + transform: translate3d(0, -15px, 0); | |
47 | + } | |
48 | + | |
49 | + 90% { | |
50 | + -webkit-transform: translate3d(0, -4px, 0); | |
51 | + transform: translate3d(0, -4px, 0); | |
52 | + } | |
53 | +} | |
54 | + | |
55 | +@keyframes bounce { | |
56 | + 0%, 20%, 53%, 80%, 100% { | |
57 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
58 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
59 | + -webkit-transform: translate3d(0, 0, 0); | |
60 | + -ms-transform: translate3d(0, 0, 0); | |
61 | + transform: translate3d(0, 0, 0); | |
62 | + } | |
63 | + | |
64 | + 40%, 43% { | |
65 | + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
66 | + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
67 | + -webkit-transform: translate3d(0, -30px, 0); | |
68 | + -ms-transform: translate3d(0, -30px, 0); | |
69 | + transform: translate3d(0, -30px, 0); | |
70 | + } | |
71 | + | |
72 | + 70% { | |
73 | + -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
74 | + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); | |
75 | + -webkit-transform: translate3d(0, -15px, 0); | |
76 | + -ms-transform: translate3d(0, -15px, 0); | |
77 | + transform: translate3d(0, -15px, 0); | |
78 | + } | |
79 | + | |
80 | + 90% { | |
81 | + -webkit-transform: translate3d(0, -4px, 0); | |
82 | + -ms-transform: translate3d(0, -4px, 0); | |
83 | + transform: translate3d(0, -4px, 0); | |
84 | + } | |
85 | +} | |
86 | + | |
87 | +.bounce { | |
88 | + -webkit-animation-name: bounce; | |
89 | + animation-name: bounce; | |
90 | + -webkit-transform-origin: center bottom; | |
91 | + -ms-transform-origin: center bottom; | |
92 | + transform-origin: center bottom; | |
93 | +} | |
94 | + | |
95 | +@-webkit-keyframes flash { | |
96 | + 0%, 50%, 100% { | |
97 | + opacity: 1; | |
98 | + } | |
99 | + | |
100 | + 25%, 75% { | |
101 | + opacity: 0; | |
102 | + } | |
103 | +} | |
104 | + | |
105 | +@keyframes flash { | |
106 | + 0%, 50%, 100% { | |
107 | + opacity: 1; | |
108 | + } | |
109 | + | |
110 | + 25%, 75% { | |
111 | + opacity: 0; | |
112 | + } | |
113 | +} | |
114 | + | |
115 | +.flash { | |
116 | + -webkit-animation-name: flash; | |
117 | + animation-name: flash; | |
118 | +} | |
119 | + | |
120 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
121 | + | |
122 | +@-webkit-keyframes pulse { | |
123 | + 0% { | |
124 | + -webkit-transform: scale3d(1, 1, 1); | |
125 | + transform: scale3d(1, 1, 1); | |
126 | + } | |
127 | + | |
128 | + 50% { | |
129 | + -webkit-transform: scale3d(1.05, 1.05, 1.05); | |
130 | + transform: scale3d(1.05, 1.05, 1.05); | |
131 | + } | |
132 | + | |
133 | + 100% { | |
134 | + -webkit-transform: scale3d(1, 1, 1); | |
135 | + transform: scale3d(1, 1, 1); | |
136 | + } | |
137 | +} | |
138 | + | |
139 | +@keyframes pulse { | |
140 | + 0% { | |
141 | + -webkit-transform: scale3d(1, 1, 1); | |
142 | + -ms-transform: scale3d(1, 1, 1); | |
143 | + transform: scale3d(1, 1, 1); | |
144 | + } | |
145 | + | |
146 | + 50% { | |
147 | + -webkit-transform: scale3d(1.05, 1.05, 1.05); | |
148 | + -ms-transform: scale3d(1.05, 1.05, 1.05); | |
149 | + transform: scale3d(1.05, 1.05, 1.05); | |
150 | + } | |
151 | + | |
152 | + 100% { | |
153 | + -webkit-transform: scale3d(1, 1, 1); | |
154 | + -ms-transform: scale3d(1, 1, 1); | |
155 | + transform: scale3d(1, 1, 1); | |
156 | + } | |
157 | +} | |
158 | + | |
159 | +.pulse { | |
160 | + -webkit-animation-name: pulse; | |
161 | + animation-name: pulse; | |
162 | +} | |
163 | + | |
164 | +@-webkit-keyframes rubberBand { | |
165 | + 0% { | |
166 | + -webkit-transform: scale3d(1, 1, 1); | |
167 | + transform: scale3d(1, 1, 1); | |
168 | + } | |
169 | + | |
170 | + 30% { | |
171 | + -webkit-transform: scale3d(1.25, 0.75, 1); | |
172 | + transform: scale3d(1.25, 0.75, 1); | |
173 | + } | |
174 | + | |
175 | + 40% { | |
176 | + -webkit-transform: scale3d(0.75, 1.25, 1); | |
177 | + transform: scale3d(0.75, 1.25, 1); | |
178 | + } | |
179 | + | |
180 | + 50% { | |
181 | + -webkit-transform: scale3d(1.15, 0.85, 1); | |
182 | + transform: scale3d(1.15, 0.85, 1); | |
183 | + } | |
184 | + | |
185 | + 65% { | |
186 | + -webkit-transform: scale3d(.95, 1.05, 1); | |
187 | + transform: scale3d(.95, 1.05, 1); | |
188 | + } | |
189 | + | |
190 | + 75% { | |
191 | + -webkit-transform: scale3d(1.05, .95, 1); | |
192 | + transform: scale3d(1.05, .95, 1); | |
193 | + } | |
194 | + | |
195 | + 100% { | |
196 | + -webkit-transform: scale3d(1, 1, 1); | |
197 | + transform: scale3d(1, 1, 1); | |
198 | + } | |
199 | +} | |
200 | + | |
201 | +@keyframes rubberBand { | |
202 | + 0% { | |
203 | + -webkit-transform: scale3d(1, 1, 1); | |
204 | + -ms-transform: scale3d(1, 1, 1); | |
205 | + transform: scale3d(1, 1, 1); | |
206 | + } | |
207 | + | |
208 | + 30% { | |
209 | + -webkit-transform: scale3d(1.25, 0.75, 1); | |
210 | + -ms-transform: scale3d(1.25, 0.75, 1); | |
211 | + transform: scale3d(1.25, 0.75, 1); | |
212 | + } | |
213 | + | |
214 | + 40% { | |
215 | + -webkit-transform: scale3d(0.75, 1.25, 1); | |
216 | + -ms-transform: scale3d(0.75, 1.25, 1); | |
217 | + transform: scale3d(0.75, 1.25, 1); | |
218 | + } | |
219 | + | |
220 | + 50% { | |
221 | + -webkit-transform: scale3d(1.15, 0.85, 1); | |
222 | + -ms-transform: scale3d(1.15, 0.85, 1); | |
223 | + transform: scale3d(1.15, 0.85, 1); | |
224 | + } | |
225 | + | |
226 | + 65% { | |
227 | + -webkit-transform: scale3d(.95, 1.05, 1); | |
228 | + -ms-transform: scale3d(.95, 1.05, 1); | |
229 | + transform: scale3d(.95, 1.05, 1); | |
230 | + } | |
231 | + | |
232 | + 75% { | |
233 | + -webkit-transform: scale3d(1.05, .95, 1); | |
234 | + -ms-transform: scale3d(1.05, .95, 1); | |
235 | + transform: scale3d(1.05, .95, 1); | |
236 | + } | |
237 | + | |
238 | + 100% { | |
239 | + -webkit-transform: scale3d(1, 1, 1); | |
240 | + -ms-transform: scale3d(1, 1, 1); | |
241 | + transform: scale3d(1, 1, 1); | |
242 | + } | |
243 | +} | |
244 | + | |
245 | +.rubberBand { | |
246 | + -webkit-animation-name: rubberBand; | |
247 | + animation-name: rubberBand; | |
248 | +} | |
249 | + | |
250 | +@-webkit-keyframes shake { | |
251 | + 0%, 100% { | |
252 | + -webkit-transform: translate3d(0, 0, 0); | |
253 | + transform: translate3d(0, 0, 0); | |
254 | + } | |
255 | + | |
256 | + 10%, 30%, 50%, 70%, 90% { | |
257 | + -webkit-transform: translate3d(-10px, 0, 0); | |
258 | + transform: translate3d(-10px, 0, 0); | |
259 | + } | |
260 | + | |
261 | + 20%, 40%, 60%, 80% { | |
262 | + -webkit-transform: translate3d(10px, 0, 0); | |
263 | + transform: translate3d(10px, 0, 0); | |
264 | + } | |
265 | +} | |
266 | + | |
267 | +@keyframes shake { | |
268 | + 0%, 100% { | |
269 | + -webkit-transform: translate3d(0, 0, 0); | |
270 | + -ms-transform: translate3d(0, 0, 0); | |
271 | + transform: translate3d(0, 0, 0); | |
272 | + } | |
273 | + | |
274 | + 10%, 30%, 50%, 70%, 90% { | |
275 | + -webkit-transform: translate3d(-10px, 0, 0); | |
276 | + -ms-transform: translate3d(-10px, 0, 0); | |
277 | + transform: translate3d(-10px, 0, 0); | |
278 | + } | |
279 | + | |
280 | + 20%, 40%, 60%, 80% { | |
281 | + -webkit-transform: translate3d(10px, 0, 0); | |
282 | + -ms-transform: translate3d(10px, 0, 0); | |
283 | + transform: translate3d(10px, 0, 0); | |
284 | + } | |
285 | +} | |
286 | + | |
287 | +.shake { | |
288 | + -webkit-animation-name: shake; | |
289 | + animation-name: shake; | |
290 | +} | |
291 | + | |
292 | +@-webkit-keyframes swing { | |
293 | + 20% { | |
294 | + -webkit-transform: rotate3d(0, 0, 1, 15deg); | |
295 | + transform: rotate3d(0, 0, 1, 15deg); | |
296 | + } | |
297 | + | |
298 | + 40% { | |
299 | + -webkit-transform: rotate3d(0, 0, 1, -10deg); | |
300 | + transform: rotate3d(0, 0, 1, -10deg); | |
301 | + } | |
302 | + | |
303 | + 60% { | |
304 | + -webkit-transform: rotate3d(0, 0, 1, 5deg); | |
305 | + transform: rotate3d(0, 0, 1, 5deg); | |
306 | + } | |
307 | + | |
308 | + 80% { | |
309 | + -webkit-transform: rotate3d(0, 0, 1, -5deg); | |
310 | + transform: rotate3d(0, 0, 1, -5deg); | |
311 | + } | |
312 | + | |
313 | + 100% { | |
314 | + -webkit-transform: rotate3d(0, 0, 1, 0deg); | |
315 | + transform: rotate3d(0, 0, 1, 0deg); | |
316 | + } | |
317 | +} | |
318 | + | |
319 | +@keyframes swing { | |
320 | + 20% { | |
321 | + -webkit-transform: rotate3d(0, 0, 1, 15deg); | |
322 | + -ms-transform: rotate3d(0, 0, 1, 15deg); | |
323 | + transform: rotate3d(0, 0, 1, 15deg); | |
324 | + } | |
325 | + | |
326 | + 40% { | |
327 | + -webkit-transform: rotate3d(0, 0, 1, -10deg); | |
328 | + -ms-transform: rotate3d(0, 0, 1, -10deg); | |
329 | + transform: rotate3d(0, 0, 1, -10deg); | |
330 | + } | |
331 | + | |
332 | + 60% { | |
333 | + -webkit-transform: rotate3d(0, 0, 1, 5deg); | |
334 | + -ms-transform: rotate3d(0, 0, 1, 5deg); | |
335 | + transform: rotate3d(0, 0, 1, 5deg); | |
336 | + } | |
337 | + | |
338 | + 80% { | |
339 | + -webkit-transform: rotate3d(0, 0, 1, -5deg); | |
340 | + -ms-transform: rotate3d(0, 0, 1, -5deg); | |
341 | + transform: rotate3d(0, 0, 1, -5deg); | |
342 | + } | |
343 | + | |
344 | + 100% { | |
345 | + -webkit-transform: rotate3d(0, 0, 1, 0deg); | |
346 | + -ms-transform: rotate3d(0, 0, 1, 0deg); | |
347 | + transform: rotate3d(0, 0, 1, 0deg); | |
348 | + } | |
349 | +} | |
350 | + | |
351 | +.swing { | |
352 | + -webkit-transform-origin: top center; | |
353 | + -ms-transform-origin: top center; | |
354 | + transform-origin: top center; | |
355 | + -webkit-animation-name: swing; | |
356 | + animation-name: swing; | |
357 | +} | |
358 | + | |
359 | +@-webkit-keyframes tada { | |
360 | + 0% { | |
361 | + -webkit-transform: scale3d(1, 1, 1); | |
362 | + transform: scale3d(1, 1, 1); | |
363 | + } | |
364 | + | |
365 | + 10%, 20% { | |
366 | + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
367 | + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
368 | + } | |
369 | + | |
370 | + 30%, 50%, 70%, 90% { | |
371 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
372 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
373 | + } | |
374 | + | |
375 | + 40%, 60%, 80% { | |
376 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
377 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
378 | + } | |
379 | + | |
380 | + 100% { | |
381 | + -webkit-transform: scale3d(1, 1, 1); | |
382 | + transform: scale3d(1, 1, 1); | |
383 | + } | |
384 | +} | |
385 | + | |
386 | +@keyframes tada { | |
387 | + 0% { | |
388 | + -webkit-transform: scale3d(1, 1, 1); | |
389 | + -ms-transform: scale3d(1, 1, 1); | |
390 | + transform: scale3d(1, 1, 1); | |
391 | + } | |
392 | + | |
393 | + 10%, 20% { | |
394 | + -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
395 | + -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
396 | + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); | |
397 | + } | |
398 | + | |
399 | + 30%, 50%, 70%, 90% { | |
400 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
401 | + -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
402 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
403 | + } | |
404 | + | |
405 | + 40%, 60%, 80% { | |
406 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
407 | + -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
408 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
409 | + } | |
410 | + | |
411 | + 100% { | |
412 | + -webkit-transform: scale3d(1, 1, 1); | |
413 | + -ms-transform: scale3d(1, 1, 1); | |
414 | + transform: scale3d(1, 1, 1); | |
415 | + } | |
416 | +} | |
417 | + | |
418 | +.tada { | |
419 | + -webkit-animation-name: tada; | |
420 | + animation-name: tada; | |
421 | +} | |
422 | + | |
423 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
424 | + | |
425 | +@-webkit-keyframes wobble { | |
426 | + 0% { | |
427 | + -webkit-transform: none; | |
428 | + transform: none; | |
429 | + } | |
430 | + | |
431 | + 15% { | |
432 | + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
433 | + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
434 | + } | |
435 | + | |
436 | + 30% { | |
437 | + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
438 | + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
439 | + } | |
440 | + | |
441 | + 45% { | |
442 | + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
443 | + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
444 | + } | |
445 | + | |
446 | + 60% { | |
447 | + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
448 | + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
449 | + } | |
450 | + | |
451 | + 75% { | |
452 | + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
453 | + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
454 | + } | |
455 | + | |
456 | + 100% { | |
457 | + -webkit-transform: none; | |
458 | + transform: none; | |
459 | + } | |
460 | +} | |
461 | + | |
462 | +@keyframes wobble { | |
463 | + 0% { | |
464 | + -webkit-transform: none; | |
465 | + -ms-transform: none; | |
466 | + transform: none; | |
467 | + } | |
468 | + | |
469 | + 15% { | |
470 | + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
471 | + -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
472 | + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
473 | + } | |
474 | + | |
475 | + 30% { | |
476 | + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
477 | + -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
478 | + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
479 | + } | |
480 | + | |
481 | + 45% { | |
482 | + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
483 | + -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
484 | + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
485 | + } | |
486 | + | |
487 | + 60% { | |
488 | + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
489 | + -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
490 | + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
491 | + } | |
492 | + | |
493 | + 75% { | |
494 | + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
495 | + -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
496 | + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
497 | + } | |
498 | + | |
499 | + 100% { | |
500 | + -webkit-transform: none; | |
501 | + -ms-transform: none; | |
502 | + transform: none; | |
503 | + } | |
504 | +} | |
505 | + | |
506 | +.wobble { | |
507 | + -webkit-animation-name: wobble; | |
508 | + animation-name: wobble; | |
509 | +} | |
510 | + | |
511 | +@-webkit-keyframes bounceIn { | |
512 | + 0%, 20%, 40%, 60%, 80%, 100% { | |
513 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
514 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
515 | + } | |
516 | + | |
517 | + 0% { | |
518 | + opacity: 0; | |
519 | + -webkit-transform: scale3d(.3, .3, .3); | |
520 | + transform: scale3d(.3, .3, .3); | |
521 | + } | |
522 | + | |
523 | + 20% { | |
524 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
525 | + transform: scale3d(1.1, 1.1, 1.1); | |
526 | + } | |
527 | + | |
528 | + 40% { | |
529 | + -webkit-transform: scale3d(.9, .9, .9); | |
530 | + transform: scale3d(.9, .9, .9); | |
531 | + } | |
532 | + | |
533 | + 60% { | |
534 | + opacity: 1; | |
535 | + -webkit-transform: scale3d(1.03, 1.03, 1.03); | |
536 | + transform: scale3d(1.03, 1.03, 1.03); | |
537 | + } | |
538 | + | |
539 | + 80% { | |
540 | + -webkit-transform: scale3d(.97, .97, .97); | |
541 | + transform: scale3d(.97, .97, .97); | |
542 | + } | |
543 | + | |
544 | + 100% { | |
545 | + opacity: 1; | |
546 | + -webkit-transform: scale3d(1, 1, 1); | |
547 | + transform: scale3d(1, 1, 1); | |
548 | + } | |
549 | +} | |
550 | + | |
551 | +@keyframes bounceIn { | |
552 | + 0%, 20%, 40%, 60%, 80%, 100% { | |
553 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
554 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
555 | + } | |
556 | + | |
557 | + 0% { | |
558 | + opacity: 0; | |
559 | + -webkit-transform: scale3d(.3, .3, .3); | |
560 | + -ms-transform: scale3d(.3, .3, .3); | |
561 | + transform: scale3d(.3, .3, .3); | |
562 | + } | |
563 | + | |
564 | + 20% { | |
565 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
566 | + -ms-transform: scale3d(1.1, 1.1, 1.1); | |
567 | + transform: scale3d(1.1, 1.1, 1.1); | |
568 | + } | |
569 | + | |
570 | + 40% { | |
571 | + -webkit-transform: scale3d(.9, .9, .9); | |
572 | + -ms-transform: scale3d(.9, .9, .9); | |
573 | + transform: scale3d(.9, .9, .9); | |
574 | + } | |
575 | + | |
576 | + 60% { | |
577 | + opacity: 1; | |
578 | + -webkit-transform: scale3d(1.03, 1.03, 1.03); | |
579 | + -ms-transform: scale3d(1.03, 1.03, 1.03); | |
580 | + transform: scale3d(1.03, 1.03, 1.03); | |
581 | + } | |
582 | + | |
583 | + 80% { | |
584 | + -webkit-transform: scale3d(.97, .97, .97); | |
585 | + -ms-transform: scale3d(.97, .97, .97); | |
586 | + transform: scale3d(.97, .97, .97); | |
587 | + } | |
588 | + | |
589 | + 100% { | |
590 | + opacity: 1; | |
591 | + -webkit-transform: scale3d(1, 1, 1); | |
592 | + -ms-transform: scale3d(1, 1, 1); | |
593 | + transform: scale3d(1, 1, 1); | |
594 | + } | |
595 | +} | |
596 | + | |
597 | +.bounceIn { | |
598 | + -webkit-animation-name: bounceIn; | |
599 | + animation-name: bounceIn; | |
600 | + -webkit-animation-duration: .75s; | |
601 | + animation-duration: .75s; | |
602 | +} | |
603 | + | |
604 | +@-webkit-keyframes bounceInDown { | |
605 | + 0%, 60%, 75%, 90%, 100% { | |
606 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
607 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
608 | + } | |
609 | + | |
610 | + 0% { | |
611 | + opacity: 0; | |
612 | + -webkit-transform: translate3d(0, -3000px, 0); | |
613 | + transform: translate3d(0, -3000px, 0); | |
614 | + } | |
615 | + | |
616 | + 60% { | |
617 | + opacity: 1; | |
618 | + -webkit-transform: translate3d(0, 25px, 0); | |
619 | + transform: translate3d(0, 25px, 0); | |
620 | + } | |
621 | + | |
622 | + 75% { | |
623 | + -webkit-transform: translate3d(0, -10px, 0); | |
624 | + transform: translate3d(0, -10px, 0); | |
625 | + } | |
626 | + | |
627 | + 90% { | |
628 | + -webkit-transform: translate3d(0, 5px, 0); | |
629 | + transform: translate3d(0, 5px, 0); | |
630 | + } | |
631 | + | |
632 | + 100% { | |
633 | + -webkit-transform: none; | |
634 | + transform: none; | |
635 | + } | |
636 | +} | |
637 | + | |
638 | +@keyframes bounceInDown { | |
639 | + 0%, 60%, 75%, 90%, 100% { | |
640 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
641 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
642 | + } | |
643 | + | |
644 | + 0% { | |
645 | + opacity: 0; | |
646 | + -webkit-transform: translate3d(0, -3000px, 0); | |
647 | + -ms-transform: translate3d(0, -3000px, 0); | |
648 | + transform: translate3d(0, -3000px, 0); | |
649 | + } | |
650 | + | |
651 | + 60% { | |
652 | + opacity: 1; | |
653 | + -webkit-transform: translate3d(0, 25px, 0); | |
654 | + -ms-transform: translate3d(0, 25px, 0); | |
655 | + transform: translate3d(0, 25px, 0); | |
656 | + } | |
657 | + | |
658 | + 75% { | |
659 | + -webkit-transform: translate3d(0, -10px, 0); | |
660 | + -ms-transform: translate3d(0, -10px, 0); | |
661 | + transform: translate3d(0, -10px, 0); | |
662 | + } | |
663 | + | |
664 | + 90% { | |
665 | + -webkit-transform: translate3d(0, 5px, 0); | |
666 | + -ms-transform: translate3d(0, 5px, 0); | |
667 | + transform: translate3d(0, 5px, 0); | |
668 | + } | |
669 | + | |
670 | + 100% { | |
671 | + -webkit-transform: none; | |
672 | + -ms-transform: none; | |
673 | + transform: none; | |
674 | + } | |
675 | +} | |
676 | + | |
677 | +.bounceInDown { | |
678 | + -webkit-animation-name: bounceInDown; | |
679 | + animation-name: bounceInDown; | |
680 | +} | |
681 | + | |
682 | +@-webkit-keyframes bounceInLeft { | |
683 | + 0%, 60%, 75%, 90%, 100% { | |
684 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
685 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
686 | + } | |
687 | + | |
688 | + 0% { | |
689 | + opacity: 0; | |
690 | + -webkit-transform: translate3d(-3000px, 0, 0); | |
691 | + transform: translate3d(-3000px, 0, 0); | |
692 | + } | |
693 | + | |
694 | + 60% { | |
695 | + opacity: 1; | |
696 | + -webkit-transform: translate3d(25px, 0, 0); | |
697 | + transform: translate3d(25px, 0, 0); | |
698 | + } | |
699 | + | |
700 | + 75% { | |
701 | + -webkit-transform: translate3d(-10px, 0, 0); | |
702 | + transform: translate3d(-10px, 0, 0); | |
703 | + } | |
704 | + | |
705 | + 90% { | |
706 | + -webkit-transform: translate3d(5px, 0, 0); | |
707 | + transform: translate3d(5px, 0, 0); | |
708 | + } | |
709 | + | |
710 | + 100% { | |
711 | + -webkit-transform: none; | |
712 | + transform: none; | |
713 | + } | |
714 | +} | |
715 | + | |
716 | +@keyframes bounceInLeft { | |
717 | + 0%, 60%, 75%, 90%, 100% { | |
718 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
719 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
720 | + } | |
721 | + | |
722 | + 0% { | |
723 | + opacity: 0; | |
724 | + -webkit-transform: translate3d(-3000px, 0, 0); | |
725 | + -ms-transform: translate3d(-3000px, 0, 0); | |
726 | + transform: translate3d(-3000px, 0, 0); | |
727 | + } | |
728 | + | |
729 | + 60% { | |
730 | + opacity: 1; | |
731 | + -webkit-transform: translate3d(25px, 0, 0); | |
732 | + -ms-transform: translate3d(25px, 0, 0); | |
733 | + transform: translate3d(25px, 0, 0); | |
734 | + } | |
735 | + | |
736 | + 75% { | |
737 | + -webkit-transform: translate3d(-10px, 0, 0); | |
738 | + -ms-transform: translate3d(-10px, 0, 0); | |
739 | + transform: translate3d(-10px, 0, 0); | |
740 | + } | |
741 | + | |
742 | + 90% { | |
743 | + -webkit-transform: translate3d(5px, 0, 0); | |
744 | + -ms-transform: translate3d(5px, 0, 0); | |
745 | + transform: translate3d(5px, 0, 0); | |
746 | + } | |
747 | + | |
748 | + 100% { | |
749 | + -webkit-transform: none; | |
750 | + -ms-transform: none; | |
751 | + transform: none; | |
752 | + } | |
753 | +} | |
754 | + | |
755 | +.bounceInLeft { | |
756 | + -webkit-animation-name: bounceInLeft; | |
757 | + animation-name: bounceInLeft; | |
758 | +} | |
759 | + | |
760 | +@-webkit-keyframes bounceInRight { | |
761 | + 0%, 60%, 75%, 90%, 100% { | |
762 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
763 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
764 | + } | |
765 | + | |
766 | + 0% { | |
767 | + opacity: 0; | |
768 | + -webkit-transform: translate3d(3000px, 0, 0); | |
769 | + transform: translate3d(3000px, 0, 0); | |
770 | + } | |
771 | + | |
772 | + 60% { | |
773 | + opacity: 1; | |
774 | + -webkit-transform: translate3d(-25px, 0, 0); | |
775 | + transform: translate3d(-25px, 0, 0); | |
776 | + } | |
777 | + | |
778 | + 75% { | |
779 | + -webkit-transform: translate3d(10px, 0, 0); | |
780 | + transform: translate3d(10px, 0, 0); | |
781 | + } | |
782 | + | |
783 | + 90% { | |
784 | + -webkit-transform: translate3d(-5px, 0, 0); | |
785 | + transform: translate3d(-5px, 0, 0); | |
786 | + } | |
787 | + | |
788 | + 100% { | |
789 | + -webkit-transform: none; | |
790 | + transform: none; | |
791 | + } | |
792 | +} | |
793 | + | |
794 | +@keyframes bounceInRight { | |
795 | + 0%, 60%, 75%, 90%, 100% { | |
796 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
797 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
798 | + } | |
799 | + | |
800 | + 0% { | |
801 | + opacity: 0; | |
802 | + -webkit-transform: translate3d(3000px, 0, 0); | |
803 | + -ms-transform: translate3d(3000px, 0, 0); | |
804 | + transform: translate3d(3000px, 0, 0); | |
805 | + } | |
806 | + | |
807 | + 60% { | |
808 | + opacity: 1; | |
809 | + -webkit-transform: translate3d(-25px, 0, 0); | |
810 | + -ms-transform: translate3d(-25px, 0, 0); | |
811 | + transform: translate3d(-25px, 0, 0); | |
812 | + } | |
813 | + | |
814 | + 75% { | |
815 | + -webkit-transform: translate3d(10px, 0, 0); | |
816 | + -ms-transform: translate3d(10px, 0, 0); | |
817 | + transform: translate3d(10px, 0, 0); | |
818 | + } | |
819 | + | |
820 | + 90% { | |
821 | + -webkit-transform: translate3d(-5px, 0, 0); | |
822 | + -ms-transform: translate3d(-5px, 0, 0); | |
823 | + transform: translate3d(-5px, 0, 0); | |
824 | + } | |
825 | + | |
826 | + 100% { | |
827 | + -webkit-transform: none; | |
828 | + -ms-transform: none; | |
829 | + transform: none; | |
830 | + } | |
831 | +} | |
832 | + | |
833 | +.bounceInRight { | |
834 | + -webkit-animation-name: bounceInRight; | |
835 | + animation-name: bounceInRight; | |
836 | +} | |
837 | + | |
838 | +@-webkit-keyframes bounceInUp { | |
839 | + 0%, 60%, 75%, 90%, 100% { | |
840 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
841 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
842 | + } | |
843 | + | |
844 | + 0% { | |
845 | + opacity: 0; | |
846 | + -webkit-transform: translate3d(0, 3000px, 0); | |
847 | + transform: translate3d(0, 3000px, 0); | |
848 | + } | |
849 | + | |
850 | + 60% { | |
851 | + opacity: 1; | |
852 | + -webkit-transform: translate3d(0, -20px, 0); | |
853 | + transform: translate3d(0, -20px, 0); | |
854 | + } | |
855 | + | |
856 | + 75% { | |
857 | + -webkit-transform: translate3d(0, 10px, 0); | |
858 | + transform: translate3d(0, 10px, 0); | |
859 | + } | |
860 | + | |
861 | + 90% { | |
862 | + -webkit-transform: translate3d(0, -5px, 0); | |
863 | + transform: translate3d(0, -5px, 0); | |
864 | + } | |
865 | + | |
866 | + 100% { | |
867 | + -webkit-transform: translate3d(0, 0, 0); | |
868 | + transform: translate3d(0, 0, 0); | |
869 | + } | |
870 | +} | |
871 | + | |
872 | +@keyframes bounceInUp { | |
873 | + 0%, 60%, 75%, 90%, 100% { | |
874 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
875 | + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); | |
876 | + } | |
877 | + | |
878 | + 0% { | |
879 | + opacity: 0; | |
880 | + -webkit-transform: translate3d(0, 3000px, 0); | |
881 | + -ms-transform: translate3d(0, 3000px, 0); | |
882 | + transform: translate3d(0, 3000px, 0); | |
883 | + } | |
884 | + | |
885 | + 60% { | |
886 | + opacity: 1; | |
887 | + -webkit-transform: translate3d(0, -20px, 0); | |
888 | + -ms-transform: translate3d(0, -20px, 0); | |
889 | + transform: translate3d(0, -20px, 0); | |
890 | + } | |
891 | + | |
892 | + 75% { | |
893 | + -webkit-transform: translate3d(0, 10px, 0); | |
894 | + -ms-transform: translate3d(0, 10px, 0); | |
895 | + transform: translate3d(0, 10px, 0); | |
896 | + } | |
897 | + | |
898 | + 90% { | |
899 | + -webkit-transform: translate3d(0, -5px, 0); | |
900 | + -ms-transform: translate3d(0, -5px, 0); | |
901 | + transform: translate3d(0, -5px, 0); | |
902 | + } | |
903 | + | |
904 | + 100% { | |
905 | + -webkit-transform: translate3d(0, 0, 0); | |
906 | + -ms-transform: translate3d(0, 0, 0); | |
907 | + transform: translate3d(0, 0, 0); | |
908 | + } | |
909 | +} | |
910 | + | |
911 | +.bounceInUp { | |
912 | + -webkit-animation-name: bounceInUp; | |
913 | + animation-name: bounceInUp; | |
914 | +} | |
915 | + | |
916 | +@-webkit-keyframes bounceOut { | |
917 | + 20% { | |
918 | + -webkit-transform: scale3d(.9, .9, .9); | |
919 | + transform: scale3d(.9, .9, .9); | |
920 | + } | |
921 | + | |
922 | + 50%, 55% { | |
923 | + opacity: 1; | |
924 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
925 | + transform: scale3d(1.1, 1.1, 1.1); | |
926 | + } | |
927 | + | |
928 | + 100% { | |
929 | + opacity: 0; | |
930 | + -webkit-transform: scale3d(.3, .3, .3); | |
931 | + transform: scale3d(.3, .3, .3); | |
932 | + } | |
933 | +} | |
934 | + | |
935 | +@keyframes bounceOut { | |
936 | + 20% { | |
937 | + -webkit-transform: scale3d(.9, .9, .9); | |
938 | + -ms-transform: scale3d(.9, .9, .9); | |
939 | + transform: scale3d(.9, .9, .9); | |
940 | + } | |
941 | + | |
942 | + 50%, 55% { | |
943 | + opacity: 1; | |
944 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
945 | + -ms-transform: scale3d(1.1, 1.1, 1.1); | |
946 | + transform: scale3d(1.1, 1.1, 1.1); | |
947 | + } | |
948 | + | |
949 | + 100% { | |
950 | + opacity: 0; | |
951 | + -webkit-transform: scale3d(.3, .3, .3); | |
952 | + -ms-transform: scale3d(.3, .3, .3); | |
953 | + transform: scale3d(.3, .3, .3); | |
954 | + } | |
955 | +} | |
956 | + | |
957 | +.bounceOut { | |
958 | + -webkit-animation-name: bounceOut; | |
959 | + animation-name: bounceOut; | |
960 | + -webkit-animation-duration: .75s; | |
961 | + animation-duration: .75s; | |
962 | +} | |
963 | + | |
964 | +@-webkit-keyframes bounceOutDown { | |
965 | + 20% { | |
966 | + -webkit-transform: translate3d(0, 10px, 0); | |
967 | + transform: translate3d(0, 10px, 0); | |
968 | + } | |
969 | + | |
970 | + 40%, 45% { | |
971 | + opacity: 1; | |
972 | + -webkit-transform: translate3d(0, -20px, 0); | |
973 | + transform: translate3d(0, -20px, 0); | |
974 | + } | |
975 | + | |
976 | + 100% { | |
977 | + opacity: 0; | |
978 | + -webkit-transform: translate3d(0, 2000px, 0); | |
979 | + transform: translate3d(0, 2000px, 0); | |
980 | + } | |
981 | +} | |
982 | + | |
983 | +@keyframes bounceOutDown { | |
984 | + 20% { | |
985 | + -webkit-transform: translate3d(0, 10px, 0); | |
986 | + -ms-transform: translate3d(0, 10px, 0); | |
987 | + transform: translate3d(0, 10px, 0); | |
988 | + } | |
989 | + | |
990 | + 40%, 45% { | |
991 | + opacity: 1; | |
992 | + -webkit-transform: translate3d(0, -20px, 0); | |
993 | + -ms-transform: translate3d(0, -20px, 0); | |
994 | + transform: translate3d(0, -20px, 0); | |
995 | + } | |
996 | + | |
997 | + 100% { | |
998 | + opacity: 0; | |
999 | + -webkit-transform: translate3d(0, 2000px, 0); | |
1000 | + -ms-transform: translate3d(0, 2000px, 0); | |
1001 | + transform: translate3d(0, 2000px, 0); | |
1002 | + } | |
1003 | +} | |
1004 | + | |
1005 | +.bounceOutDown { | |
1006 | + -webkit-animation-name: bounceOutDown; | |
1007 | + animation-name: bounceOutDown; | |
1008 | +} | |
1009 | + | |
1010 | +@-webkit-keyframes bounceOutLeft { | |
1011 | + 20% { | |
1012 | + opacity: 1; | |
1013 | + -webkit-transform: translate3d(20px, 0, 0); | |
1014 | + transform: translate3d(20px, 0, 0); | |
1015 | + } | |
1016 | + | |
1017 | + 100% { | |
1018 | + opacity: 0; | |
1019 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1020 | + transform: translate3d(-2000px, 0, 0); | |
1021 | + } | |
1022 | +} | |
1023 | + | |
1024 | +@keyframes bounceOutLeft { | |
1025 | + 20% { | |
1026 | + opacity: 1; | |
1027 | + -webkit-transform: translate3d(20px, 0, 0); | |
1028 | + -ms-transform: translate3d(20px, 0, 0); | |
1029 | + transform: translate3d(20px, 0, 0); | |
1030 | + } | |
1031 | + | |
1032 | + 100% { | |
1033 | + opacity: 0; | |
1034 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1035 | + -ms-transform: translate3d(-2000px, 0, 0); | |
1036 | + transform: translate3d(-2000px, 0, 0); | |
1037 | + } | |
1038 | +} | |
1039 | + | |
1040 | +.bounceOutLeft { | |
1041 | + -webkit-animation-name: bounceOutLeft; | |
1042 | + animation-name: bounceOutLeft; | |
1043 | +} | |
1044 | + | |
1045 | +@-webkit-keyframes bounceOutRight { | |
1046 | + 20% { | |
1047 | + opacity: 1; | |
1048 | + -webkit-transform: translate3d(-20px, 0, 0); | |
1049 | + transform: translate3d(-20px, 0, 0); | |
1050 | + } | |
1051 | + | |
1052 | + 100% { | |
1053 | + opacity: 0; | |
1054 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1055 | + transform: translate3d(2000px, 0, 0); | |
1056 | + } | |
1057 | +} | |
1058 | + | |
1059 | +@keyframes bounceOutRight { | |
1060 | + 20% { | |
1061 | + opacity: 1; | |
1062 | + -webkit-transform: translate3d(-20px, 0, 0); | |
1063 | + -ms-transform: translate3d(-20px, 0, 0); | |
1064 | + transform: translate3d(-20px, 0, 0); | |
1065 | + } | |
1066 | + | |
1067 | + 100% { | |
1068 | + opacity: 0; | |
1069 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1070 | + -ms-transform: translate3d(2000px, 0, 0); | |
1071 | + transform: translate3d(2000px, 0, 0); | |
1072 | + } | |
1073 | +} | |
1074 | + | |
1075 | +.bounceOutRight { | |
1076 | + -webkit-animation-name: bounceOutRight; | |
1077 | + animation-name: bounceOutRight; | |
1078 | +} | |
1079 | + | |
1080 | +@-webkit-keyframes bounceOutUp { | |
1081 | + 20% { | |
1082 | + -webkit-transform: translate3d(0, -10px, 0); | |
1083 | + transform: translate3d(0, -10px, 0); | |
1084 | + } | |
1085 | + | |
1086 | + 40%, 45% { | |
1087 | + opacity: 1; | |
1088 | + -webkit-transform: translate3d(0, 20px, 0); | |
1089 | + transform: translate3d(0, 20px, 0); | |
1090 | + } | |
1091 | + | |
1092 | + 100% { | |
1093 | + opacity: 0; | |
1094 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1095 | + transform: translate3d(0, -2000px, 0); | |
1096 | + } | |
1097 | +} | |
1098 | + | |
1099 | +@keyframes bounceOutUp { | |
1100 | + 20% { | |
1101 | + -webkit-transform: translate3d(0, -10px, 0); | |
1102 | + -ms-transform: translate3d(0, -10px, 0); | |
1103 | + transform: translate3d(0, -10px, 0); | |
1104 | + } | |
1105 | + | |
1106 | + 40%, 45% { | |
1107 | + opacity: 1; | |
1108 | + -webkit-transform: translate3d(0, 20px, 0); | |
1109 | + -ms-transform: translate3d(0, 20px, 0); | |
1110 | + transform: translate3d(0, 20px, 0); | |
1111 | + } | |
1112 | + | |
1113 | + 100% { | |
1114 | + opacity: 0; | |
1115 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1116 | + -ms-transform: translate3d(0, -2000px, 0); | |
1117 | + transform: translate3d(0, -2000px, 0); | |
1118 | + } | |
1119 | +} | |
1120 | + | |
1121 | +.bounceOutUp { | |
1122 | + -webkit-animation-name: bounceOutUp; | |
1123 | + animation-name: bounceOutUp; | |
1124 | +} | |
1125 | + | |
1126 | +@-webkit-keyframes fadeIn { | |
1127 | + 0% { | |
1128 | + opacity: 0; | |
1129 | + } | |
1130 | + | |
1131 | + 100% { | |
1132 | + opacity: 1; | |
1133 | + } | |
1134 | +} | |
1135 | + | |
1136 | +@keyframes fadeIn { | |
1137 | + 0% { | |
1138 | + opacity: 0; | |
1139 | + } | |
1140 | + | |
1141 | + 100% { | |
1142 | + opacity: 1; | |
1143 | + } | |
1144 | +} | |
1145 | + | |
1146 | +.fadeIn { | |
1147 | + -webkit-animation-name: fadeIn; | |
1148 | + animation-name: fadeIn; | |
1149 | +} | |
1150 | + | |
1151 | +@-webkit-keyframes fadeInDown { | |
1152 | + 0% { | |
1153 | + opacity: 0; | |
1154 | + -webkit-transform: translate3d(0, -100%, 0); | |
1155 | + transform: translate3d(0, -100%, 0); | |
1156 | + } | |
1157 | + | |
1158 | + 100% { | |
1159 | + opacity: 1; | |
1160 | + -webkit-transform: none; | |
1161 | + transform: none; | |
1162 | + } | |
1163 | +} | |
1164 | + | |
1165 | +@keyframes fadeInDown { | |
1166 | + 0% { | |
1167 | + opacity: 0; | |
1168 | + -webkit-transform: translate3d(0, -100%, 0); | |
1169 | + -ms-transform: translate3d(0, -100%, 0); | |
1170 | + transform: translate3d(0, -100%, 0); | |
1171 | + } | |
1172 | + | |
1173 | + 100% { | |
1174 | + opacity: 1; | |
1175 | + -webkit-transform: none; | |
1176 | + -ms-transform: none; | |
1177 | + transform: none; | |
1178 | + } | |
1179 | +} | |
1180 | + | |
1181 | +.fadeInDown { | |
1182 | + -webkit-animation-name: fadeInDown; | |
1183 | + animation-name: fadeInDown; | |
1184 | +} | |
1185 | + | |
1186 | +@-webkit-keyframes fadeInDownBig { | |
1187 | + 0% { | |
1188 | + opacity: 0; | |
1189 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1190 | + transform: translate3d(0, -2000px, 0); | |
1191 | + } | |
1192 | + | |
1193 | + 100% { | |
1194 | + opacity: 1; | |
1195 | + -webkit-transform: none; | |
1196 | + transform: none; | |
1197 | + } | |
1198 | +} | |
1199 | + | |
1200 | +@keyframes fadeInDownBig { | |
1201 | + 0% { | |
1202 | + opacity: 0; | |
1203 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1204 | + -ms-transform: translate3d(0, -2000px, 0); | |
1205 | + transform: translate3d(0, -2000px, 0); | |
1206 | + } | |
1207 | + | |
1208 | + 100% { | |
1209 | + opacity: 1; | |
1210 | + -webkit-transform: none; | |
1211 | + -ms-transform: none; | |
1212 | + transform: none; | |
1213 | + } | |
1214 | +} | |
1215 | + | |
1216 | +.fadeInDownBig { | |
1217 | + -webkit-animation-name: fadeInDownBig; | |
1218 | + animation-name: fadeInDownBig; | |
1219 | +} | |
1220 | + | |
1221 | +@-webkit-keyframes fadeInLeft { | |
1222 | + 0% { | |
1223 | + opacity: 0; | |
1224 | + -webkit-transform: translate3d(-100%, 0, 0); | |
1225 | + transform: translate3d(-100%, 0, 0); | |
1226 | + } | |
1227 | + | |
1228 | + 100% { | |
1229 | + opacity: 1; | |
1230 | + -webkit-transform: none; | |
1231 | + transform: none; | |
1232 | + } | |
1233 | +} | |
1234 | + | |
1235 | +@keyframes fadeInLeft { | |
1236 | + 0% { | |
1237 | + opacity: 0; | |
1238 | + -webkit-transform: translate3d(-100%, 0, 0); | |
1239 | + -ms-transform: translate3d(-100%, 0, 0); | |
1240 | + transform: translate3d(-100%, 0, 0); | |
1241 | + } | |
1242 | + | |
1243 | + 100% { | |
1244 | + opacity: 1; | |
1245 | + -webkit-transform: none; | |
1246 | + -ms-transform: none; | |
1247 | + transform: none; | |
1248 | + } | |
1249 | +} | |
1250 | + | |
1251 | +.fadeInLeft { | |
1252 | + -webkit-animation-name: fadeInLeft; | |
1253 | + animation-name: fadeInLeft; | |
1254 | +} | |
1255 | + | |
1256 | +@-webkit-keyframes fadeInLeftBig { | |
1257 | + 0% { | |
1258 | + opacity: 0; | |
1259 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1260 | + transform: translate3d(-2000px, 0, 0); | |
1261 | + } | |
1262 | + | |
1263 | + 100% { | |
1264 | + opacity: 1; | |
1265 | + -webkit-transform: none; | |
1266 | + transform: none; | |
1267 | + } | |
1268 | +} | |
1269 | + | |
1270 | +@keyframes fadeInLeftBig { | |
1271 | + 0% { | |
1272 | + opacity: 0; | |
1273 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1274 | + -ms-transform: translate3d(-2000px, 0, 0); | |
1275 | + transform: translate3d(-2000px, 0, 0); | |
1276 | + } | |
1277 | + | |
1278 | + 100% { | |
1279 | + opacity: 1; | |
1280 | + -webkit-transform: none; | |
1281 | + -ms-transform: none; | |
1282 | + transform: none; | |
1283 | + } | |
1284 | +} | |
1285 | + | |
1286 | +.fadeInLeftBig { | |
1287 | + -webkit-animation-name: fadeInLeftBig; | |
1288 | + animation-name: fadeInLeftBig; | |
1289 | +} | |
1290 | + | |
1291 | +@-webkit-keyframes fadeInRight { | |
1292 | + 0% { | |
1293 | + opacity: 0; | |
1294 | + -webkit-transform: translate3d(100%, 0, 0); | |
1295 | + transform: translate3d(100%, 0, 0); | |
1296 | + } | |
1297 | + | |
1298 | + 100% { | |
1299 | + opacity: 1; | |
1300 | + -webkit-transform: none; | |
1301 | + transform: none; | |
1302 | + } | |
1303 | +} | |
1304 | + | |
1305 | +@keyframes fadeInRight { | |
1306 | + 0% { | |
1307 | + opacity: 0; | |
1308 | + -webkit-transform: translate3d(100%, 0, 0); | |
1309 | + -ms-transform: translate3d(100%, 0, 0); | |
1310 | + transform: translate3d(100%, 0, 0); | |
1311 | + } | |
1312 | + | |
1313 | + 100% { | |
1314 | + opacity: 1; | |
1315 | + -webkit-transform: none; | |
1316 | + -ms-transform: none; | |
1317 | + transform: none; | |
1318 | + } | |
1319 | +} | |
1320 | + | |
1321 | +.fadeInRight { | |
1322 | + -webkit-animation-name: fadeInRight; | |
1323 | + animation-name: fadeInRight; | |
1324 | +} | |
1325 | + | |
1326 | +@-webkit-keyframes fadeInRightBig { | |
1327 | + 0% { | |
1328 | + opacity: 0; | |
1329 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1330 | + transform: translate3d(2000px, 0, 0); | |
1331 | + } | |
1332 | + | |
1333 | + 100% { | |
1334 | + opacity: 1; | |
1335 | + -webkit-transform: none; | |
1336 | + transform: none; | |
1337 | + } | |
1338 | +} | |
1339 | + | |
1340 | +@keyframes fadeInRightBig { | |
1341 | + 0% { | |
1342 | + opacity: 0; | |
1343 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1344 | + -ms-transform: translate3d(2000px, 0, 0); | |
1345 | + transform: translate3d(2000px, 0, 0); | |
1346 | + } | |
1347 | + | |
1348 | + 100% { | |
1349 | + opacity: 1; | |
1350 | + -webkit-transform: none; | |
1351 | + -ms-transform: none; | |
1352 | + transform: none; | |
1353 | + } | |
1354 | +} | |
1355 | + | |
1356 | +.fadeInRightBig { | |
1357 | + -webkit-animation-name: fadeInRightBig; | |
1358 | + animation-name: fadeInRightBig; | |
1359 | +} | |
1360 | + | |
1361 | +@-webkit-keyframes fadeInUp { | |
1362 | + 0% { | |
1363 | + opacity: 0; | |
1364 | + -webkit-transform: translate3d(0, 100%, 0); | |
1365 | + transform: translate3d(0, 100%, 0); | |
1366 | + } | |
1367 | + | |
1368 | + 100% { | |
1369 | + opacity: 1; | |
1370 | + -webkit-transform: none; | |
1371 | + transform: none; | |
1372 | + } | |
1373 | +} | |
1374 | + | |
1375 | +@keyframes fadeInUp { | |
1376 | + 0% { | |
1377 | + opacity: 0; | |
1378 | + -webkit-transform: translate3d(0, 100%, 0); | |
1379 | + -ms-transform: translate3d(0, 100%, 0); | |
1380 | + transform: translate3d(0, 100%, 0); | |
1381 | + } | |
1382 | + | |
1383 | + 100% { | |
1384 | + opacity: 1; | |
1385 | + -webkit-transform: none; | |
1386 | + -ms-transform: none; | |
1387 | + transform: none; | |
1388 | + } | |
1389 | +} | |
1390 | + | |
1391 | +.fadeInUp { | |
1392 | + -webkit-animation-name: fadeInUp; | |
1393 | + animation-name: fadeInUp; | |
1394 | +} | |
1395 | + | |
1396 | +@-webkit-keyframes fadeInUpBig { | |
1397 | + 0% { | |
1398 | + opacity: 0; | |
1399 | + -webkit-transform: translate3d(0, 2000px, 0); | |
1400 | + transform: translate3d(0, 2000px, 0); | |
1401 | + } | |
1402 | + | |
1403 | + 100% { | |
1404 | + opacity: 1; | |
1405 | + -webkit-transform: none; | |
1406 | + transform: none; | |
1407 | + } | |
1408 | +} | |
1409 | + | |
1410 | +@keyframes fadeInUpBig { | |
1411 | + 0% { | |
1412 | + opacity: 0; | |
1413 | + -webkit-transform: translate3d(0, 2000px, 0); | |
1414 | + -ms-transform: translate3d(0, 2000px, 0); | |
1415 | + transform: translate3d(0, 2000px, 0); | |
1416 | + } | |
1417 | + | |
1418 | + 100% { | |
1419 | + opacity: 1; | |
1420 | + -webkit-transform: none; | |
1421 | + -ms-transform: none; | |
1422 | + transform: none; | |
1423 | + } | |
1424 | +} | |
1425 | + | |
1426 | +.fadeInUpBig { | |
1427 | + -webkit-animation-name: fadeInUpBig; | |
1428 | + animation-name: fadeInUpBig; | |
1429 | +} | |
1430 | + | |
1431 | +@-webkit-keyframes fadeOut { | |
1432 | + 0% { | |
1433 | + opacity: 1; | |
1434 | + } | |
1435 | + | |
1436 | + 100% { | |
1437 | + opacity: 0; | |
1438 | + } | |
1439 | +} | |
1440 | + | |
1441 | +@keyframes fadeOut { | |
1442 | + 0% { | |
1443 | + opacity: 1; | |
1444 | + } | |
1445 | + | |
1446 | + 100% { | |
1447 | + opacity: 0; | |
1448 | + } | |
1449 | +} | |
1450 | + | |
1451 | +.fadeOut { | |
1452 | + -webkit-animation-name: fadeOut; | |
1453 | + animation-name: fadeOut; | |
1454 | +} | |
1455 | + | |
1456 | +@-webkit-keyframes fadeOutDown { | |
1457 | + 0% { | |
1458 | + opacity: 1; | |
1459 | + } | |
1460 | + | |
1461 | + 100% { | |
1462 | + opacity: 0; | |
1463 | + -webkit-transform: translate3d(0, 100%, 0); | |
1464 | + transform: translate3d(0, 100%, 0); | |
1465 | + } | |
1466 | +} | |
1467 | + | |
1468 | +@keyframes fadeOutDown { | |
1469 | + 0% { | |
1470 | + opacity: 1; | |
1471 | + } | |
1472 | + | |
1473 | + 100% { | |
1474 | + opacity: 0; | |
1475 | + -webkit-transform: translate3d(0, 100%, 0); | |
1476 | + -ms-transform: translate3d(0, 100%, 0); | |
1477 | + transform: translate3d(0, 100%, 0); | |
1478 | + } | |
1479 | +} | |
1480 | + | |
1481 | +.fadeOutDown { | |
1482 | + -webkit-animation-name: fadeOutDown; | |
1483 | + animation-name: fadeOutDown; | |
1484 | +} | |
1485 | + | |
1486 | +@-webkit-keyframes fadeOutDownBig { | |
1487 | + 0% { | |
1488 | + opacity: 1; | |
1489 | + } | |
1490 | + | |
1491 | + 100% { | |
1492 | + opacity: 0; | |
1493 | + -webkit-transform: translate3d(0, 2000px, 0); | |
1494 | + transform: translate3d(0, 2000px, 0); | |
1495 | + } | |
1496 | +} | |
1497 | + | |
1498 | +@keyframes fadeOutDownBig { | |
1499 | + 0% { | |
1500 | + opacity: 1; | |
1501 | + } | |
1502 | + | |
1503 | + 100% { | |
1504 | + opacity: 0; | |
1505 | + -webkit-transform: translate3d(0, 2000px, 0); | |
1506 | + -ms-transform: translate3d(0, 2000px, 0); | |
1507 | + transform: translate3d(0, 2000px, 0); | |
1508 | + } | |
1509 | +} | |
1510 | + | |
1511 | +.fadeOutDownBig { | |
1512 | + -webkit-animation-name: fadeOutDownBig; | |
1513 | + animation-name: fadeOutDownBig; | |
1514 | +} | |
1515 | + | |
1516 | +@-webkit-keyframes fadeOutLeft { | |
1517 | + 0% { | |
1518 | + opacity: 1; | |
1519 | + } | |
1520 | + | |
1521 | + 100% { | |
1522 | + opacity: 0; | |
1523 | + -webkit-transform: translate3d(-100%, 0, 0); | |
1524 | + transform: translate3d(-100%, 0, 0); | |
1525 | + } | |
1526 | +} | |
1527 | + | |
1528 | +@keyframes fadeOutLeft { | |
1529 | + 0% { | |
1530 | + opacity: 1; | |
1531 | + } | |
1532 | + | |
1533 | + 100% { | |
1534 | + opacity: 0; | |
1535 | + -webkit-transform: translate3d(-100%, 0, 0); | |
1536 | + -ms-transform: translate3d(-100%, 0, 0); | |
1537 | + transform: translate3d(-100%, 0, 0); | |
1538 | + } | |
1539 | +} | |
1540 | + | |
1541 | +.fadeOutLeft { | |
1542 | + -webkit-animation-name: fadeOutLeft; | |
1543 | + animation-name: fadeOutLeft; | |
1544 | +} | |
1545 | + | |
1546 | +@-webkit-keyframes fadeOutLeftBig { | |
1547 | + 0% { | |
1548 | + opacity: 1; | |
1549 | + } | |
1550 | + | |
1551 | + 100% { | |
1552 | + opacity: 0; | |
1553 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1554 | + transform: translate3d(-2000px, 0, 0); | |
1555 | + } | |
1556 | +} | |
1557 | + | |
1558 | +@keyframes fadeOutLeftBig { | |
1559 | + 0% { | |
1560 | + opacity: 1; | |
1561 | + } | |
1562 | + | |
1563 | + 100% { | |
1564 | + opacity: 0; | |
1565 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
1566 | + -ms-transform: translate3d(-2000px, 0, 0); | |
1567 | + transform: translate3d(-2000px, 0, 0); | |
1568 | + } | |
1569 | +} | |
1570 | + | |
1571 | +.fadeOutLeftBig { | |
1572 | + -webkit-animation-name: fadeOutLeftBig; | |
1573 | + animation-name: fadeOutLeftBig; | |
1574 | +} | |
1575 | + | |
1576 | +@-webkit-keyframes fadeOutRight { | |
1577 | + 0% { | |
1578 | + opacity: 1; | |
1579 | + } | |
1580 | + | |
1581 | + 100% { | |
1582 | + opacity: 0; | |
1583 | + -webkit-transform: translate3d(100%, 0, 0); | |
1584 | + transform: translate3d(100%, 0, 0); | |
1585 | + } | |
1586 | +} | |
1587 | + | |
1588 | +@keyframes fadeOutRight { | |
1589 | + 0% { | |
1590 | + opacity: 1; | |
1591 | + } | |
1592 | + | |
1593 | + 100% { | |
1594 | + opacity: 0; | |
1595 | + -webkit-transform: translate3d(100%, 0, 0); | |
1596 | + -ms-transform: translate3d(100%, 0, 0); | |
1597 | + transform: translate3d(100%, 0, 0); | |
1598 | + } | |
1599 | +} | |
1600 | + | |
1601 | +.fadeOutRight { | |
1602 | + -webkit-animation-name: fadeOutRight; | |
1603 | + animation-name: fadeOutRight; | |
1604 | +} | |
1605 | + | |
1606 | +@-webkit-keyframes fadeOutRightBig { | |
1607 | + 0% { | |
1608 | + opacity: 1; | |
1609 | + } | |
1610 | + | |
1611 | + 100% { | |
1612 | + opacity: 0; | |
1613 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1614 | + transform: translate3d(2000px, 0, 0); | |
1615 | + } | |
1616 | +} | |
1617 | + | |
1618 | +@keyframes fadeOutRightBig { | |
1619 | + 0% { | |
1620 | + opacity: 1; | |
1621 | + } | |
1622 | + | |
1623 | + 100% { | |
1624 | + opacity: 0; | |
1625 | + -webkit-transform: translate3d(2000px, 0, 0); | |
1626 | + -ms-transform: translate3d(2000px, 0, 0); | |
1627 | + transform: translate3d(2000px, 0, 0); | |
1628 | + } | |
1629 | +} | |
1630 | + | |
1631 | +.fadeOutRightBig { | |
1632 | + -webkit-animation-name: fadeOutRightBig; | |
1633 | + animation-name: fadeOutRightBig; | |
1634 | +} | |
1635 | + | |
1636 | +@-webkit-keyframes fadeOutUp { | |
1637 | + 0% { | |
1638 | + opacity: 1; | |
1639 | + } | |
1640 | + | |
1641 | + 100% { | |
1642 | + opacity: 0; | |
1643 | + -webkit-transform: translate3d(0, -100%, 0); | |
1644 | + transform: translate3d(0, -100%, 0); | |
1645 | + } | |
1646 | +} | |
1647 | + | |
1648 | +@keyframes fadeOutUp { | |
1649 | + 0% { | |
1650 | + opacity: 1; | |
1651 | + } | |
1652 | + | |
1653 | + 100% { | |
1654 | + opacity: 0; | |
1655 | + -webkit-transform: translate3d(0, -100%, 0); | |
1656 | + -ms-transform: translate3d(0, -100%, 0); | |
1657 | + transform: translate3d(0, -100%, 0); | |
1658 | + } | |
1659 | +} | |
1660 | + | |
1661 | +.fadeOutUp { | |
1662 | + -webkit-animation-name: fadeOutUp; | |
1663 | + animation-name: fadeOutUp; | |
1664 | +} | |
1665 | + | |
1666 | +@-webkit-keyframes fadeOutUpBig { | |
1667 | + 0% { | |
1668 | + opacity: 1; | |
1669 | + } | |
1670 | + | |
1671 | + 100% { | |
1672 | + opacity: 0; | |
1673 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1674 | + transform: translate3d(0, -2000px, 0); | |
1675 | + } | |
1676 | +} | |
1677 | + | |
1678 | +@keyframes fadeOutUpBig { | |
1679 | + 0% { | |
1680 | + opacity: 1; | |
1681 | + } | |
1682 | + | |
1683 | + 100% { | |
1684 | + opacity: 0; | |
1685 | + -webkit-transform: translate3d(0, -2000px, 0); | |
1686 | + -ms-transform: translate3d(0, -2000px, 0); | |
1687 | + transform: translate3d(0, -2000px, 0); | |
1688 | + } | |
1689 | +} | |
1690 | + | |
1691 | +.fadeOutUpBig { | |
1692 | + -webkit-animation-name: fadeOutUpBig; | |
1693 | + animation-name: fadeOutUpBig; | |
1694 | +} | |
1695 | + | |
1696 | +@-webkit-keyframes flip { | |
1697 | + 0% { | |
1698 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
1699 | + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
1700 | + -webkit-animation-timing-function: ease-out; | |
1701 | + animation-timing-function: ease-out; | |
1702 | + } | |
1703 | + | |
1704 | + 40% { | |
1705 | + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
1706 | + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
1707 | + -webkit-animation-timing-function: ease-out; | |
1708 | + animation-timing-function: ease-out; | |
1709 | + } | |
1710 | + | |
1711 | + 50% { | |
1712 | + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
1713 | + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
1714 | + -webkit-animation-timing-function: ease-in; | |
1715 | + animation-timing-function: ease-in; | |
1716 | + } | |
1717 | + | |
1718 | + 80% { | |
1719 | + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
1720 | + transform: perspective(400px) scale3d(.95, .95, .95); | |
1721 | + -webkit-animation-timing-function: ease-in; | |
1722 | + animation-timing-function: ease-in; | |
1723 | + } | |
1724 | + | |
1725 | + 100% { | |
1726 | + -webkit-transform: perspective(400px); | |
1727 | + transform: perspective(400px); | |
1728 | + -webkit-animation-timing-function: ease-in; | |
1729 | + animation-timing-function: ease-in; | |
1730 | + } | |
1731 | +} | |
1732 | + | |
1733 | +@keyframes flip { | |
1734 | + 0% { | |
1735 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
1736 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
1737 | + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); | |
1738 | + -webkit-animation-timing-function: ease-out; | |
1739 | + animation-timing-function: ease-out; | |
1740 | + } | |
1741 | + | |
1742 | + 40% { | |
1743 | + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
1744 | + -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
1745 | + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); | |
1746 | + -webkit-animation-timing-function: ease-out; | |
1747 | + animation-timing-function: ease-out; | |
1748 | + } | |
1749 | + | |
1750 | + 50% { | |
1751 | + -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
1752 | + -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
1753 | + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); | |
1754 | + -webkit-animation-timing-function: ease-in; | |
1755 | + animation-timing-function: ease-in; | |
1756 | + } | |
1757 | + | |
1758 | + 80% { | |
1759 | + -webkit-transform: perspective(400px) scale3d(.95, .95, .95); | |
1760 | + -ms-transform: perspective(400px) scale3d(.95, .95, .95); | |
1761 | + transform: perspective(400px) scale3d(.95, .95, .95); | |
1762 | + -webkit-animation-timing-function: ease-in; | |
1763 | + animation-timing-function: ease-in; | |
1764 | + } | |
1765 | + | |
1766 | + 100% { | |
1767 | + -webkit-transform: perspective(400px); | |
1768 | + -ms-transform: perspective(400px); | |
1769 | + transform: perspective(400px); | |
1770 | + -webkit-animation-timing-function: ease-in; | |
1771 | + animation-timing-function: ease-in; | |
1772 | + } | |
1773 | +} | |
1774 | + | |
1775 | +.animated.flip { | |
1776 | + -webkit-backface-visibility: visible; | |
1777 | + -ms-backface-visibility: visible; | |
1778 | + backface-visibility: visible; | |
1779 | + -webkit-animation-name: flip; | |
1780 | + animation-name: flip; | |
1781 | +} | |
1782 | + | |
1783 | +@-webkit-keyframes flipInX { | |
1784 | + 0% { | |
1785 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1786 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1787 | + -webkit-transition-timing-function: ease-in; | |
1788 | + transition-timing-function: ease-in; | |
1789 | + opacity: 0; | |
1790 | + } | |
1791 | + | |
1792 | + 40% { | |
1793 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1794 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1795 | + -webkit-transition-timing-function: ease-in; | |
1796 | + transition-timing-function: ease-in; | |
1797 | + } | |
1798 | + | |
1799 | + 60% { | |
1800 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
1801 | + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
1802 | + opacity: 1; | |
1803 | + } | |
1804 | + | |
1805 | + 80% { | |
1806 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
1807 | + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
1808 | + } | |
1809 | + | |
1810 | + 100% { | |
1811 | + -webkit-transform: perspective(400px); | |
1812 | + transform: perspective(400px); | |
1813 | + } | |
1814 | +} | |
1815 | + | |
1816 | +@keyframes flipInX { | |
1817 | + 0% { | |
1818 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1819 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1820 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1821 | + -webkit-transition-timing-function: ease-in; | |
1822 | + transition-timing-function: ease-in; | |
1823 | + opacity: 0; | |
1824 | + } | |
1825 | + | |
1826 | + 40% { | |
1827 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1828 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1829 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1830 | + -webkit-transition-timing-function: ease-in; | |
1831 | + transition-timing-function: ease-in; | |
1832 | + } | |
1833 | + | |
1834 | + 60% { | |
1835 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
1836 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
1837 | + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
1838 | + opacity: 1; | |
1839 | + } | |
1840 | + | |
1841 | + 80% { | |
1842 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
1843 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
1844 | + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
1845 | + } | |
1846 | + | |
1847 | + 100% { | |
1848 | + -webkit-transform: perspective(400px); | |
1849 | + -ms-transform: perspective(400px); | |
1850 | + transform: perspective(400px); | |
1851 | + } | |
1852 | +} | |
1853 | + | |
1854 | +.flipInX { | |
1855 | + -webkit-backface-visibility: visible !important; | |
1856 | + -ms-backface-visibility: visible !important; | |
1857 | + backface-visibility: visible !important; | |
1858 | + -webkit-animation-name: flipInX; | |
1859 | + animation-name: flipInX; | |
1860 | +} | |
1861 | + | |
1862 | +@-webkit-keyframes flipInY { | |
1863 | + 0% { | |
1864 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
1865 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
1866 | + -webkit-transition-timing-function: ease-in; | |
1867 | + transition-timing-function: ease-in; | |
1868 | + opacity: 0; | |
1869 | + } | |
1870 | + | |
1871 | + 40% { | |
1872 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
1873 | + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
1874 | + -webkit-transition-timing-function: ease-in; | |
1875 | + transition-timing-function: ease-in; | |
1876 | + } | |
1877 | + | |
1878 | + 60% { | |
1879 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
1880 | + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
1881 | + opacity: 1; | |
1882 | + } | |
1883 | + | |
1884 | + 80% { | |
1885 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
1886 | + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
1887 | + } | |
1888 | + | |
1889 | + 100% { | |
1890 | + -webkit-transform: perspective(400px); | |
1891 | + transform: perspective(400px); | |
1892 | + } | |
1893 | +} | |
1894 | + | |
1895 | +@keyframes flipInY { | |
1896 | + 0% { | |
1897 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
1898 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
1899 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
1900 | + -webkit-transition-timing-function: ease-in; | |
1901 | + transition-timing-function: ease-in; | |
1902 | + opacity: 0; | |
1903 | + } | |
1904 | + | |
1905 | + 40% { | |
1906 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
1907 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
1908 | + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
1909 | + -webkit-transition-timing-function: ease-in; | |
1910 | + transition-timing-function: ease-in; | |
1911 | + } | |
1912 | + | |
1913 | + 60% { | |
1914 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
1915 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
1916 | + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
1917 | + opacity: 1; | |
1918 | + } | |
1919 | + | |
1920 | + 80% { | |
1921 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
1922 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
1923 | + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
1924 | + } | |
1925 | + | |
1926 | + 100% { | |
1927 | + -webkit-transform: perspective(400px); | |
1928 | + -ms-transform: perspective(400px); | |
1929 | + transform: perspective(400px); | |
1930 | + } | |
1931 | +} | |
1932 | + | |
1933 | +.flipInY { | |
1934 | + -webkit-backface-visibility: visible !important; | |
1935 | + -ms-backface-visibility: visible !important; | |
1936 | + backface-visibility: visible !important; | |
1937 | + -webkit-animation-name: flipInY; | |
1938 | + animation-name: flipInY; | |
1939 | +} | |
1940 | + | |
1941 | +@-webkit-keyframes flipOutX { | |
1942 | + 0% { | |
1943 | + -webkit-transform: perspective(400px); | |
1944 | + transform: perspective(400px); | |
1945 | + } | |
1946 | + | |
1947 | + 30% { | |
1948 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1949 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1950 | + opacity: 1; | |
1951 | + } | |
1952 | + | |
1953 | + 100% { | |
1954 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1955 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1956 | + opacity: 0; | |
1957 | + } | |
1958 | +} | |
1959 | + | |
1960 | +@keyframes flipOutX { | |
1961 | + 0% { | |
1962 | + -webkit-transform: perspective(400px); | |
1963 | + -ms-transform: perspective(400px); | |
1964 | + transform: perspective(400px); | |
1965 | + } | |
1966 | + | |
1967 | + 30% { | |
1968 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1969 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1970 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
1971 | + opacity: 1; | |
1972 | + } | |
1973 | + | |
1974 | + 100% { | |
1975 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1976 | + -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1977 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
1978 | + opacity: 0; | |
1979 | + } | |
1980 | +} | |
1981 | + | |
1982 | +.flipOutX { | |
1983 | + -webkit-animation-name: flipOutX; | |
1984 | + animation-name: flipOutX; | |
1985 | + -webkit-animation-duration: .75s; | |
1986 | + animation-duration: .75s; | |
1987 | + -webkit-backface-visibility: visible !important; | |
1988 | + -ms-backface-visibility: visible !important; | |
1989 | + backface-visibility: visible !important; | |
1990 | +} | |
1991 | + | |
1992 | +@-webkit-keyframes flipOutY { | |
1993 | + 0% { | |
1994 | + -webkit-transform: perspective(400px); | |
1995 | + transform: perspective(400px); | |
1996 | + } | |
1997 | + | |
1998 | + 30% { | |
1999 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
2000 | + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
2001 | + opacity: 1; | |
2002 | + } | |
2003 | + | |
2004 | + 100% { | |
2005 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
2006 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
2007 | + opacity: 0; | |
2008 | + } | |
2009 | +} | |
2010 | + | |
2011 | +@keyframes flipOutY { | |
2012 | + 0% { | |
2013 | + -webkit-transform: perspective(400px); | |
2014 | + -ms-transform: perspective(400px); | |
2015 | + transform: perspective(400px); | |
2016 | + } | |
2017 | + | |
2018 | + 30% { | |
2019 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
2020 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
2021 | + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
2022 | + opacity: 1; | |
2023 | + } | |
2024 | + | |
2025 | + 100% { | |
2026 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
2027 | + -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
2028 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
2029 | + opacity: 0; | |
2030 | + } | |
2031 | +} | |
2032 | + | |
2033 | +.flipOutY { | |
2034 | + -webkit-backface-visibility: visible !important; | |
2035 | + -ms-backface-visibility: visible !important; | |
2036 | + backface-visibility: visible !important; | |
2037 | + -webkit-animation-name: flipOutY; | |
2038 | + animation-name: flipOutY; | |
2039 | + -webkit-animation-duration: .75s; | |
2040 | + animation-duration: .75s; | |
2041 | +} | |
2042 | + | |
2043 | +@-webkit-keyframes lightSpeedIn { | |
2044 | + 0% { | |
2045 | + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
2046 | + transform: translate3d(100%, 0, 0) skewX(-30deg); | |
2047 | + opacity: 0; | |
2048 | + } | |
2049 | + | |
2050 | + 60% { | |
2051 | + -webkit-transform: skewX(20deg); | |
2052 | + transform: skewX(20deg); | |
2053 | + opacity: 1; | |
2054 | + } | |
2055 | + | |
2056 | + 80% { | |
2057 | + -webkit-transform: skewX(-5deg); | |
2058 | + transform: skewX(-5deg); | |
2059 | + opacity: 1; | |
2060 | + } | |
2061 | + | |
2062 | + 100% { | |
2063 | + -webkit-transform: none; | |
2064 | + transform: none; | |
2065 | + opacity: 1; | |
2066 | + } | |
2067 | +} | |
2068 | + | |
2069 | +@keyframes lightSpeedIn { | |
2070 | + 0% { | |
2071 | + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
2072 | + -ms-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
2073 | + transform: translate3d(100%, 0, 0) skewX(-30deg); | |
2074 | + opacity: 0; | |
2075 | + } | |
2076 | + | |
2077 | + 60% { | |
2078 | + -webkit-transform: skewX(20deg); | |
2079 | + -ms-transform: skewX(20deg); | |
2080 | + transform: skewX(20deg); | |
2081 | + opacity: 1; | |
2082 | + } | |
2083 | + | |
2084 | + 80% { | |
2085 | + -webkit-transform: skewX(-5deg); | |
2086 | + -ms-transform: skewX(-5deg); | |
2087 | + transform: skewX(-5deg); | |
2088 | + opacity: 1; | |
2089 | + } | |
2090 | + | |
2091 | + 100% { | |
2092 | + -webkit-transform: none; | |
2093 | + -ms-transform: none; | |
2094 | + transform: none; | |
2095 | + opacity: 1; | |
2096 | + } | |
2097 | +} | |
2098 | + | |
2099 | +.lightSpeedIn { | |
2100 | + -webkit-animation-name: lightSpeedIn; | |
2101 | + animation-name: lightSpeedIn; | |
2102 | + -webkit-animation-timing-function: ease-out; | |
2103 | + animation-timing-function: ease-out; | |
2104 | +} | |
2105 | + | |
2106 | +@-webkit-keyframes lightSpeedOut { | |
2107 | + 0% { | |
2108 | + opacity: 1; | |
2109 | + } | |
2110 | + | |
2111 | + 100% { | |
2112 | + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
2113 | + transform: translate3d(100%, 0, 0) skewX(30deg); | |
2114 | + opacity: 0; | |
2115 | + } | |
2116 | +} | |
2117 | + | |
2118 | +@keyframes lightSpeedOut { | |
2119 | + 0% { | |
2120 | + opacity: 1; | |
2121 | + } | |
2122 | + | |
2123 | + 100% { | |
2124 | + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
2125 | + -ms-transform: translate3d(100%, 0, 0) skewX(30deg); | |
2126 | + transform: translate3d(100%, 0, 0) skewX(30deg); | |
2127 | + opacity: 0; | |
2128 | + } | |
2129 | +} | |
2130 | + | |
2131 | +.lightSpeedOut { | |
2132 | + -webkit-animation-name: lightSpeedOut; | |
2133 | + animation-name: lightSpeedOut; | |
2134 | + -webkit-animation-timing-function: ease-in; | |
2135 | + animation-timing-function: ease-in; | |
2136 | +} | |
2137 | + | |
2138 | +@-webkit-keyframes rotateIn { | |
2139 | + 0% { | |
2140 | + -webkit-transform-origin: center; | |
2141 | + transform-origin: center; | |
2142 | + -webkit-transform: rotate3d(0, 0, 1, -200deg); | |
2143 | + transform: rotate3d(0, 0, 1, -200deg); | |
2144 | + opacity: 0; | |
2145 | + } | |
2146 | + | |
2147 | + 100% { | |
2148 | + -webkit-transform-origin: center; | |
2149 | + transform-origin: center; | |
2150 | + -webkit-transform: none; | |
2151 | + transform: none; | |
2152 | + opacity: 1; | |
2153 | + } | |
2154 | +} | |
2155 | + | |
2156 | +@keyframes rotateIn { | |
2157 | + 0% { | |
2158 | + -webkit-transform-origin: center; | |
2159 | + -ms-transform-origin: center; | |
2160 | + transform-origin: center; | |
2161 | + -webkit-transform: rotate3d(0, 0, 1, -200deg); | |
2162 | + -ms-transform: rotate3d(0, 0, 1, -200deg); | |
2163 | + transform: rotate3d(0, 0, 1, -200deg); | |
2164 | + opacity: 0; | |
2165 | + } | |
2166 | + | |
2167 | + 100% { | |
2168 | + -webkit-transform-origin: center; | |
2169 | + -ms-transform-origin: center; | |
2170 | + transform-origin: center; | |
2171 | + -webkit-transform: none; | |
2172 | + -ms-transform: none; | |
2173 | + transform: none; | |
2174 | + opacity: 1; | |
2175 | + } | |
2176 | +} | |
2177 | + | |
2178 | +.rotateIn { | |
2179 | + -webkit-animation-name: rotateIn; | |
2180 | + animation-name: rotateIn; | |
2181 | +} | |
2182 | + | |
2183 | +@-webkit-keyframes rotateInDownLeft { | |
2184 | + 0% { | |
2185 | + -webkit-transform-origin: left bottom; | |
2186 | + transform-origin: left bottom; | |
2187 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2188 | + transform: rotate3d(0, 0, 1, -45deg); | |
2189 | + opacity: 0; | |
2190 | + } | |
2191 | + | |
2192 | + 100% { | |
2193 | + -webkit-transform-origin: left bottom; | |
2194 | + transform-origin: left bottom; | |
2195 | + -webkit-transform: none; | |
2196 | + transform: none; | |
2197 | + opacity: 1; | |
2198 | + } | |
2199 | +} | |
2200 | + | |
2201 | +@keyframes rotateInDownLeft { | |
2202 | + 0% { | |
2203 | + -webkit-transform-origin: left bottom; | |
2204 | + -ms-transform-origin: left bottom; | |
2205 | + transform-origin: left bottom; | |
2206 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2207 | + -ms-transform: rotate3d(0, 0, 1, -45deg); | |
2208 | + transform: rotate3d(0, 0, 1, -45deg); | |
2209 | + opacity: 0; | |
2210 | + } | |
2211 | + | |
2212 | + 100% { | |
2213 | + -webkit-transform-origin: left bottom; | |
2214 | + -ms-transform-origin: left bottom; | |
2215 | + transform-origin: left bottom; | |
2216 | + -webkit-transform: none; | |
2217 | + -ms-transform: none; | |
2218 | + transform: none; | |
2219 | + opacity: 1; | |
2220 | + } | |
2221 | +} | |
2222 | + | |
2223 | +.rotateInDownLeft { | |
2224 | + -webkit-animation-name: rotateInDownLeft; | |
2225 | + animation-name: rotateInDownLeft; | |
2226 | +} | |
2227 | + | |
2228 | +@-webkit-keyframes rotateInDownRight { | |
2229 | + 0% { | |
2230 | + -webkit-transform-origin: right bottom; | |
2231 | + transform-origin: right bottom; | |
2232 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2233 | + transform: rotate3d(0, 0, 1, 45deg); | |
2234 | + opacity: 0; | |
2235 | + } | |
2236 | + | |
2237 | + 100% { | |
2238 | + -webkit-transform-origin: right bottom; | |
2239 | + transform-origin: right bottom; | |
2240 | + -webkit-transform: none; | |
2241 | + transform: none; | |
2242 | + opacity: 1; | |
2243 | + } | |
2244 | +} | |
2245 | + | |
2246 | +@keyframes rotateInDownRight { | |
2247 | + 0% { | |
2248 | + -webkit-transform-origin: right bottom; | |
2249 | + -ms-transform-origin: right bottom; | |
2250 | + transform-origin: right bottom; | |
2251 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2252 | + -ms-transform: rotate3d(0, 0, 1, 45deg); | |
2253 | + transform: rotate3d(0, 0, 1, 45deg); | |
2254 | + opacity: 0; | |
2255 | + } | |
2256 | + | |
2257 | + 100% { | |
2258 | + -webkit-transform-origin: right bottom; | |
2259 | + -ms-transform-origin: right bottom; | |
2260 | + transform-origin: right bottom; | |
2261 | + -webkit-transform: none; | |
2262 | + -ms-transform: none; | |
2263 | + transform: none; | |
2264 | + opacity: 1; | |
2265 | + } | |
2266 | +} | |
2267 | + | |
2268 | +.rotateInDownRight { | |
2269 | + -webkit-animation-name: rotateInDownRight; | |
2270 | + animation-name: rotateInDownRight; | |
2271 | +} | |
2272 | + | |
2273 | +@-webkit-keyframes rotateInUpLeft { | |
2274 | + 0% { | |
2275 | + -webkit-transform-origin: left bottom; | |
2276 | + transform-origin: left bottom; | |
2277 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2278 | + transform: rotate3d(0, 0, 1, 45deg); | |
2279 | + opacity: 0; | |
2280 | + } | |
2281 | + | |
2282 | + 100% { | |
2283 | + -webkit-transform-origin: left bottom; | |
2284 | + transform-origin: left bottom; | |
2285 | + -webkit-transform: none; | |
2286 | + transform: none; | |
2287 | + opacity: 1; | |
2288 | + } | |
2289 | +} | |
2290 | + | |
2291 | +@keyframes rotateInUpLeft { | |
2292 | + 0% { | |
2293 | + -webkit-transform-origin: left bottom; | |
2294 | + -ms-transform-origin: left bottom; | |
2295 | + transform-origin: left bottom; | |
2296 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2297 | + -ms-transform: rotate3d(0, 0, 1, 45deg); | |
2298 | + transform: rotate3d(0, 0, 1, 45deg); | |
2299 | + opacity: 0; | |
2300 | + } | |
2301 | + | |
2302 | + 100% { | |
2303 | + -webkit-transform-origin: left bottom; | |
2304 | + -ms-transform-origin: left bottom; | |
2305 | + transform-origin: left bottom; | |
2306 | + -webkit-transform: none; | |
2307 | + -ms-transform: none; | |
2308 | + transform: none; | |
2309 | + opacity: 1; | |
2310 | + } | |
2311 | +} | |
2312 | + | |
2313 | +.rotateInUpLeft { | |
2314 | + -webkit-animation-name: rotateInUpLeft; | |
2315 | + animation-name: rotateInUpLeft; | |
2316 | +} | |
2317 | + | |
2318 | +@-webkit-keyframes rotateInUpRight { | |
2319 | + 0% { | |
2320 | + -webkit-transform-origin: right bottom; | |
2321 | + transform-origin: right bottom; | |
2322 | + -webkit-transform: rotate3d(0, 0, 1, -90deg); | |
2323 | + transform: rotate3d(0, 0, 1, -90deg); | |
2324 | + opacity: 0; | |
2325 | + } | |
2326 | + | |
2327 | + 100% { | |
2328 | + -webkit-transform-origin: right bottom; | |
2329 | + transform-origin: right bottom; | |
2330 | + -webkit-transform: none; | |
2331 | + transform: none; | |
2332 | + opacity: 1; | |
2333 | + } | |
2334 | +} | |
2335 | + | |
2336 | +@keyframes rotateInUpRight { | |
2337 | + 0% { | |
2338 | + -webkit-transform-origin: right bottom; | |
2339 | + -ms-transform-origin: right bottom; | |
2340 | + transform-origin: right bottom; | |
2341 | + -webkit-transform: rotate3d(0, 0, 1, -90deg); | |
2342 | + -ms-transform: rotate3d(0, 0, 1, -90deg); | |
2343 | + transform: rotate3d(0, 0, 1, -90deg); | |
2344 | + opacity: 0; | |
2345 | + } | |
2346 | + | |
2347 | + 100% { | |
2348 | + -webkit-transform-origin: right bottom; | |
2349 | + -ms-transform-origin: right bottom; | |
2350 | + transform-origin: right bottom; | |
2351 | + -webkit-transform: none; | |
2352 | + -ms-transform: none; | |
2353 | + transform: none; | |
2354 | + opacity: 1; | |
2355 | + } | |
2356 | +} | |
2357 | + | |
2358 | +.rotateInUpRight { | |
2359 | + -webkit-animation-name: rotateInUpRight; | |
2360 | + animation-name: rotateInUpRight; | |
2361 | +} | |
2362 | + | |
2363 | +@-webkit-keyframes rotateOut { | |
2364 | + 0% { | |
2365 | + -webkit-transform-origin: center; | |
2366 | + transform-origin: center; | |
2367 | + opacity: 1; | |
2368 | + } | |
2369 | + | |
2370 | + 100% { | |
2371 | + -webkit-transform-origin: center; | |
2372 | + transform-origin: center; | |
2373 | + -webkit-transform: rotate3d(0, 0, 1, 200deg); | |
2374 | + transform: rotate3d(0, 0, 1, 200deg); | |
2375 | + opacity: 0; | |
2376 | + } | |
2377 | +} | |
2378 | + | |
2379 | +@keyframes rotateOut { | |
2380 | + 0% { | |
2381 | + -webkit-transform-origin: center; | |
2382 | + -ms-transform-origin: center; | |
2383 | + transform-origin: center; | |
2384 | + opacity: 1; | |
2385 | + } | |
2386 | + | |
2387 | + 100% { | |
2388 | + -webkit-transform-origin: center; | |
2389 | + -ms-transform-origin: center; | |
2390 | + transform-origin: center; | |
2391 | + -webkit-transform: rotate3d(0, 0, 1, 200deg); | |
2392 | + -ms-transform: rotate3d(0, 0, 1, 200deg); | |
2393 | + transform: rotate3d(0, 0, 1, 200deg); | |
2394 | + opacity: 0; | |
2395 | + } | |
2396 | +} | |
2397 | + | |
2398 | +.rotateOut { | |
2399 | + -webkit-animation-name: rotateOut; | |
2400 | + animation-name: rotateOut; | |
2401 | +} | |
2402 | + | |
2403 | +@-webkit-keyframes rotateOutDownLeft { | |
2404 | + 0% { | |
2405 | + -webkit-transform-origin: left bottom; | |
2406 | + transform-origin: left bottom; | |
2407 | + opacity: 1; | |
2408 | + } | |
2409 | + | |
2410 | + 100% { | |
2411 | + -webkit-transform-origin: left bottom; | |
2412 | + transform-origin: left bottom; | |
2413 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2414 | + transform: rotate3d(0, 0, 1, 45deg); | |
2415 | + opacity: 0; | |
2416 | + } | |
2417 | +} | |
2418 | + | |
2419 | +@keyframes rotateOutDownLeft { | |
2420 | + 0% { | |
2421 | + -webkit-transform-origin: left bottom; | |
2422 | + -ms-transform-origin: left bottom; | |
2423 | + transform-origin: left bottom; | |
2424 | + opacity: 1; | |
2425 | + } | |
2426 | + | |
2427 | + 100% { | |
2428 | + -webkit-transform-origin: left bottom; | |
2429 | + -ms-transform-origin: left bottom; | |
2430 | + transform-origin: left bottom; | |
2431 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
2432 | + -ms-transform: rotate3d(0, 0, 1, 45deg); | |
2433 | + transform: rotate3d(0, 0, 1, 45deg); | |
2434 | + opacity: 0; | |
2435 | + } | |
2436 | +} | |
2437 | + | |
2438 | +.rotateOutDownLeft { | |
2439 | + -webkit-animation-name: rotateOutDownLeft; | |
2440 | + animation-name: rotateOutDownLeft; | |
2441 | +} | |
2442 | + | |
2443 | +@-webkit-keyframes rotateOutDownRight { | |
2444 | + 0% { | |
2445 | + -webkit-transform-origin: right bottom; | |
2446 | + transform-origin: right bottom; | |
2447 | + opacity: 1; | |
2448 | + } | |
2449 | + | |
2450 | + 100% { | |
2451 | + -webkit-transform-origin: right bottom; | |
2452 | + transform-origin: right bottom; | |
2453 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2454 | + transform: rotate3d(0, 0, 1, -45deg); | |
2455 | + opacity: 0; | |
2456 | + } | |
2457 | +} | |
2458 | + | |
2459 | +@keyframes rotateOutDownRight { | |
2460 | + 0% { | |
2461 | + -webkit-transform-origin: right bottom; | |
2462 | + -ms-transform-origin: right bottom; | |
2463 | + transform-origin: right bottom; | |
2464 | + opacity: 1; | |
2465 | + } | |
2466 | + | |
2467 | + 100% { | |
2468 | + -webkit-transform-origin: right bottom; | |
2469 | + -ms-transform-origin: right bottom; | |
2470 | + transform-origin: right bottom; | |
2471 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2472 | + -ms-transform: rotate3d(0, 0, 1, -45deg); | |
2473 | + transform: rotate3d(0, 0, 1, -45deg); | |
2474 | + opacity: 0; | |
2475 | + } | |
2476 | +} | |
2477 | + | |
2478 | +.rotateOutDownRight { | |
2479 | + -webkit-animation-name: rotateOutDownRight; | |
2480 | + animation-name: rotateOutDownRight; | |
2481 | +} | |
2482 | + | |
2483 | +@-webkit-keyframes rotateOutUpLeft { | |
2484 | + 0% { | |
2485 | + -webkit-transform-origin: left bottom; | |
2486 | + transform-origin: left bottom; | |
2487 | + opacity: 1; | |
2488 | + } | |
2489 | + | |
2490 | + 100% { | |
2491 | + -webkit-transform-origin: left bottom; | |
2492 | + transform-origin: left bottom; | |
2493 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2494 | + transform: rotate3d(0, 0, 1, -45deg); | |
2495 | + opacity: 0; | |
2496 | + } | |
2497 | +} | |
2498 | + | |
2499 | +@keyframes rotateOutUpLeft { | |
2500 | + 0% { | |
2501 | + -webkit-transform-origin: left bottom; | |
2502 | + -ms-transform-origin: left bottom; | |
2503 | + transform-origin: left bottom; | |
2504 | + opacity: 1; | |
2505 | + } | |
2506 | + | |
2507 | + 100% { | |
2508 | + -webkit-transform-origin: left bottom; | |
2509 | + -ms-transform-origin: left bottom; | |
2510 | + transform-origin: left bottom; | |
2511 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
2512 | + -ms-transform: rotate3d(0, 0, 1, -45deg); | |
2513 | + transform: rotate3d(0, 0, 1, -45deg); | |
2514 | + opacity: 0; | |
2515 | + } | |
2516 | +} | |
2517 | + | |
2518 | +.rotateOutUpLeft { | |
2519 | + -webkit-animation-name: rotateOutUpLeft; | |
2520 | + animation-name: rotateOutUpLeft; | |
2521 | +} | |
2522 | + | |
2523 | +@-webkit-keyframes rotateOutUpRight { | |
2524 | + 0% { | |
2525 | + -webkit-transform-origin: right bottom; | |
2526 | + transform-origin: right bottom; | |
2527 | + opacity: 1; | |
2528 | + } | |
2529 | + | |
2530 | + 100% { | |
2531 | + -webkit-transform-origin: right bottom; | |
2532 | + transform-origin: right bottom; | |
2533 | + -webkit-transform: rotate3d(0, 0, 1, 90deg); | |
2534 | + transform: rotate3d(0, 0, 1, 90deg); | |
2535 | + opacity: 0; | |
2536 | + } | |
2537 | +} | |
2538 | + | |
2539 | +@keyframes rotateOutUpRight { | |
2540 | + 0% { | |
2541 | + -webkit-transform-origin: right bottom; | |
2542 | + -ms-transform-origin: right bottom; | |
2543 | + transform-origin: right bottom; | |
2544 | + opacity: 1; | |
2545 | + } | |
2546 | + | |
2547 | + 100% { | |
2548 | + -webkit-transform-origin: right bottom; | |
2549 | + -ms-transform-origin: right bottom; | |
2550 | + transform-origin: right bottom; | |
2551 | + -webkit-transform: rotate3d(0, 0, 1, 90deg); | |
2552 | + -ms-transform: rotate3d(0, 0, 1, 90deg); | |
2553 | + transform: rotate3d(0, 0, 1, 90deg); | |
2554 | + opacity: 0; | |
2555 | + } | |
2556 | +} | |
2557 | + | |
2558 | +.rotateOutUpRight { | |
2559 | + -webkit-animation-name: rotateOutUpRight; | |
2560 | + animation-name: rotateOutUpRight; | |
2561 | +} | |
2562 | + | |
2563 | +@-webkit-keyframes hinge { | |
2564 | + 0% { | |
2565 | + -webkit-transform-origin: top left; | |
2566 | + transform-origin: top left; | |
2567 | + -webkit-animation-timing-function: ease-in-out; | |
2568 | + animation-timing-function: ease-in-out; | |
2569 | + } | |
2570 | + | |
2571 | + 20%, 60% { | |
2572 | + -webkit-transform: rotate3d(0, 0, 1, 80deg); | |
2573 | + transform: rotate3d(0, 0, 1, 80deg); | |
2574 | + -webkit-transform-origin: top left; | |
2575 | + transform-origin: top left; | |
2576 | + -webkit-animation-timing-function: ease-in-out; | |
2577 | + animation-timing-function: ease-in-out; | |
2578 | + } | |
2579 | + | |
2580 | + 40%, 80% { | |
2581 | + -webkit-transform: rotate3d(0, 0, 1, 60deg); | |
2582 | + transform: rotate3d(0, 0, 1, 60deg); | |
2583 | + -webkit-transform-origin: top left; | |
2584 | + transform-origin: top left; | |
2585 | + -webkit-animation-timing-function: ease-in-out; | |
2586 | + animation-timing-function: ease-in-out; | |
2587 | + opacity: 1; | |
2588 | + } | |
2589 | + | |
2590 | + 100% { | |
2591 | + -webkit-transform: translate3d(0, 700px, 0); | |
2592 | + transform: translate3d(0, 700px, 0); | |
2593 | + opacity: 0; | |
2594 | + } | |
2595 | +} | |
2596 | + | |
2597 | +@keyframes hinge { | |
2598 | + 0% { | |
2599 | + -webkit-transform-origin: top left; | |
2600 | + -ms-transform-origin: top left; | |
2601 | + transform-origin: top left; | |
2602 | + -webkit-animation-timing-function: ease-in-out; | |
2603 | + animation-timing-function: ease-in-out; | |
2604 | + } | |
2605 | + | |
2606 | + 20%, 60% { | |
2607 | + -webkit-transform: rotate3d(0, 0, 1, 80deg); | |
2608 | + -ms-transform: rotate3d(0, 0, 1, 80deg); | |
2609 | + transform: rotate3d(0, 0, 1, 80deg); | |
2610 | + -webkit-transform-origin: top left; | |
2611 | + -ms-transform-origin: top left; | |
2612 | + transform-origin: top left; | |
2613 | + -webkit-animation-timing-function: ease-in-out; | |
2614 | + animation-timing-function: ease-in-out; | |
2615 | + } | |
2616 | + | |
2617 | + 40%, 80% { | |
2618 | + -webkit-transform: rotate3d(0, 0, 1, 60deg); | |
2619 | + -ms-transform: rotate3d(0, 0, 1, 60deg); | |
2620 | + transform: rotate3d(0, 0, 1, 60deg); | |
2621 | + -webkit-transform-origin: top left; | |
2622 | + -ms-transform-origin: top left; | |
2623 | + transform-origin: top left; | |
2624 | + -webkit-animation-timing-function: ease-in-out; | |
2625 | + animation-timing-function: ease-in-out; | |
2626 | + opacity: 1; | |
2627 | + } | |
2628 | + | |
2629 | + 100% { | |
2630 | + -webkit-transform: translate3d(0, 700px, 0); | |
2631 | + -ms-transform: translate3d(0, 700px, 0); | |
2632 | + transform: translate3d(0, 700px, 0); | |
2633 | + opacity: 0; | |
2634 | + } | |
2635 | +} | |
2636 | + | |
2637 | +.hinge { | |
2638 | + -webkit-animation-name: hinge; | |
2639 | + animation-name: hinge; | |
2640 | +} | |
2641 | + | |
2642 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
2643 | + | |
2644 | +@-webkit-keyframes rollIn { | |
2645 | + 0% { | |
2646 | + opacity: 0; | |
2647 | + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
2648 | + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
2649 | + } | |
2650 | + | |
2651 | + 100% { | |
2652 | + opacity: 1; | |
2653 | + -webkit-transform: none; | |
2654 | + transform: none; | |
2655 | + } | |
2656 | +} | |
2657 | + | |
2658 | +@keyframes rollIn { | |
2659 | + 0% { | |
2660 | + opacity: 0; | |
2661 | + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
2662 | + -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
2663 | + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
2664 | + } | |
2665 | + | |
2666 | + 100% { | |
2667 | + opacity: 1; | |
2668 | + -webkit-transform: none; | |
2669 | + -ms-transform: none; | |
2670 | + transform: none; | |
2671 | + } | |
2672 | +} | |
2673 | + | |
2674 | +.rollIn { | |
2675 | + -webkit-animation-name: rollIn; | |
2676 | + animation-name: rollIn; | |
2677 | +} | |
2678 | + | |
2679 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
2680 | + | |
2681 | +@-webkit-keyframes rollOut { | |
2682 | + 0% { | |
2683 | + opacity: 1; | |
2684 | + } | |
2685 | + | |
2686 | + 100% { | |
2687 | + opacity: 0; | |
2688 | + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
2689 | + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
2690 | + } | |
2691 | +} | |
2692 | + | |
2693 | +@keyframes rollOut { | |
2694 | + 0% { | |
2695 | + opacity: 1; | |
2696 | + } | |
2697 | + | |
2698 | + 100% { | |
2699 | + opacity: 0; | |
2700 | + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
2701 | + -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
2702 | + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
2703 | + } | |
2704 | +} | |
2705 | + | |
2706 | +.rollOut { | |
2707 | + -webkit-animation-name: rollOut; | |
2708 | + animation-name: rollOut; | |
2709 | +} | |
2710 | + | |
2711 | +@-webkit-keyframes zoomIn { | |
2712 | + 0% { | |
2713 | + opacity: 0; | |
2714 | + -webkit-transform: scale3d(.3, .3, .3); | |
2715 | + transform: scale3d(.3, .3, .3); | |
2716 | + } | |
2717 | + | |
2718 | + 50% { | |
2719 | + opacity: 1; | |
2720 | + } | |
2721 | +} | |
2722 | + | |
2723 | +@keyframes zoomIn { | |
2724 | + 0% { | |
2725 | + opacity: 0; | |
2726 | + -webkit-transform: scale3d(.3, .3, .3); | |
2727 | + -ms-transform: scale3d(.3, .3, .3); | |
2728 | + transform: scale3d(.3, .3, .3); | |
2729 | + } | |
2730 | + | |
2731 | + 50% { | |
2732 | + opacity: 1; | |
2733 | + } | |
2734 | +} | |
2735 | + | |
2736 | +.zoomIn { | |
2737 | + -webkit-animation-name: zoomIn; | |
2738 | + animation-name: zoomIn; | |
2739 | +} | |
2740 | + | |
2741 | +@-webkit-keyframes zoomInDown { | |
2742 | + 0% { | |
2743 | + opacity: 0; | |
2744 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
2745 | + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
2746 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2747 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2748 | + } | |
2749 | + | |
2750 | + 60% { | |
2751 | + opacity: 1; | |
2752 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
2753 | + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
2754 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2755 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2756 | + } | |
2757 | +} | |
2758 | + | |
2759 | +@keyframes zoomInDown { | |
2760 | + 0% { | |
2761 | + opacity: 0; | |
2762 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
2763 | + -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
2764 | + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); | |
2765 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2766 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2767 | + } | |
2768 | + | |
2769 | + 60% { | |
2770 | + opacity: 1; | |
2771 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
2772 | + -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
2773 | + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
2774 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2775 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2776 | + } | |
2777 | +} | |
2778 | + | |
2779 | +.zoomInDown { | |
2780 | + -webkit-animation-name: zoomInDown; | |
2781 | + animation-name: zoomInDown; | |
2782 | +} | |
2783 | + | |
2784 | +@-webkit-keyframes zoomInLeft { | |
2785 | + 0% { | |
2786 | + opacity: 0; | |
2787 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
2788 | + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
2789 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2790 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2791 | + } | |
2792 | + | |
2793 | + 60% { | |
2794 | + opacity: 1; | |
2795 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
2796 | + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
2797 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2798 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2799 | + } | |
2800 | +} | |
2801 | + | |
2802 | +@keyframes zoomInLeft { | |
2803 | + 0% { | |
2804 | + opacity: 0; | |
2805 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
2806 | + -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
2807 | + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); | |
2808 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2809 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2810 | + } | |
2811 | + | |
2812 | + 60% { | |
2813 | + opacity: 1; | |
2814 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
2815 | + -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
2816 | + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); | |
2817 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2818 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2819 | + } | |
2820 | +} | |
2821 | + | |
2822 | +.zoomInLeft { | |
2823 | + -webkit-animation-name: zoomInLeft; | |
2824 | + animation-name: zoomInLeft; | |
2825 | +} | |
2826 | + | |
2827 | +@-webkit-keyframes zoomInRight { | |
2828 | + 0% { | |
2829 | + opacity: 0; | |
2830 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
2831 | + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
2832 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2833 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2834 | + } | |
2835 | + | |
2836 | + 60% { | |
2837 | + opacity: 1; | |
2838 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
2839 | + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
2840 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2841 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2842 | + } | |
2843 | +} | |
2844 | + | |
2845 | +@keyframes zoomInRight { | |
2846 | + 0% { | |
2847 | + opacity: 0; | |
2848 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
2849 | + -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
2850 | + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); | |
2851 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2852 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2853 | + } | |
2854 | + | |
2855 | + 60% { | |
2856 | + opacity: 1; | |
2857 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
2858 | + -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
2859 | + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); | |
2860 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2861 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2862 | + } | |
2863 | +} | |
2864 | + | |
2865 | +.zoomInRight { | |
2866 | + -webkit-animation-name: zoomInRight; | |
2867 | + animation-name: zoomInRight; | |
2868 | +} | |
2869 | + | |
2870 | +@-webkit-keyframes zoomInUp { | |
2871 | + 0% { | |
2872 | + opacity: 0; | |
2873 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
2874 | + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
2875 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2876 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2877 | + } | |
2878 | + | |
2879 | + 60% { | |
2880 | + opacity: 1; | |
2881 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2882 | + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2883 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2884 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2885 | + } | |
2886 | +} | |
2887 | + | |
2888 | +@keyframes zoomInUp { | |
2889 | + 0% { | |
2890 | + opacity: 0; | |
2891 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
2892 | + -ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
2893 | + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); | |
2894 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2895 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2896 | + } | |
2897 | + | |
2898 | + 60% { | |
2899 | + opacity: 1; | |
2900 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2901 | + -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2902 | + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2903 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2904 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2905 | + } | |
2906 | +} | |
2907 | + | |
2908 | +.zoomInUp { | |
2909 | + -webkit-animation-name: zoomInUp; | |
2910 | + animation-name: zoomInUp; | |
2911 | +} | |
2912 | + | |
2913 | +@-webkit-keyframes zoomOut { | |
2914 | + 0% { | |
2915 | + opacity: 1; | |
2916 | + } | |
2917 | + | |
2918 | + 50% { | |
2919 | + opacity: 0; | |
2920 | + -webkit-transform: scale3d(.3, .3, .3); | |
2921 | + transform: scale3d(.3, .3, .3); | |
2922 | + } | |
2923 | + | |
2924 | + 100% { | |
2925 | + opacity: 0; | |
2926 | + } | |
2927 | +} | |
2928 | + | |
2929 | +@keyframes zoomOut { | |
2930 | + 0% { | |
2931 | + opacity: 1; | |
2932 | + } | |
2933 | + | |
2934 | + 50% { | |
2935 | + opacity: 0; | |
2936 | + -webkit-transform: scale3d(.3, .3, .3); | |
2937 | + -ms-transform: scale3d(.3, .3, .3); | |
2938 | + transform: scale3d(.3, .3, .3); | |
2939 | + } | |
2940 | + | |
2941 | + 100% { | |
2942 | + opacity: 0; | |
2943 | + } | |
2944 | +} | |
2945 | + | |
2946 | +.zoomOut { | |
2947 | + -webkit-animation-name: zoomOut; | |
2948 | + animation-name: zoomOut; | |
2949 | +} | |
2950 | + | |
2951 | +@-webkit-keyframes zoomOutDown { | |
2952 | + 40% { | |
2953 | + opacity: 1; | |
2954 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2955 | + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2956 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2957 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2958 | + } | |
2959 | + | |
2960 | + 100% { | |
2961 | + opacity: 0; | |
2962 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
2963 | + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
2964 | + -webkit-transform-origin: center bottom; | |
2965 | + transform-origin: center bottom; | |
2966 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2967 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2968 | + } | |
2969 | +} | |
2970 | + | |
2971 | +@keyframes zoomOutDown { | |
2972 | + 40% { | |
2973 | + opacity: 1; | |
2974 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2975 | + -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2976 | + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); | |
2977 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2978 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
2979 | + } | |
2980 | + | |
2981 | + 100% { | |
2982 | + opacity: 0; | |
2983 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
2984 | + -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
2985 | + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); | |
2986 | + -webkit-transform-origin: center bottom; | |
2987 | + -ms-transform-origin: center bottom; | |
2988 | + transform-origin: center bottom; | |
2989 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2990 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
2991 | + } | |
2992 | +} | |
2993 | + | |
2994 | +.zoomOutDown { | |
2995 | + -webkit-animation-name: zoomOutDown; | |
2996 | + animation-name: zoomOutDown; | |
2997 | +} | |
2998 | + | |
2999 | +@-webkit-keyframes zoomOutLeft { | |
3000 | + 40% { | |
3001 | + opacity: 1; | |
3002 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
3003 | + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
3004 | + } | |
3005 | + | |
3006 | + 100% { | |
3007 | + opacity: 0; | |
3008 | + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
3009 | + transform: scale(.1) translate3d(-2000px, 0, 0); | |
3010 | + -webkit-transform-origin: left center; | |
3011 | + transform-origin: left center; | |
3012 | + } | |
3013 | +} | |
3014 | + | |
3015 | +@keyframes zoomOutLeft { | |
3016 | + 40% { | |
3017 | + opacity: 1; | |
3018 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
3019 | + -ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
3020 | + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); | |
3021 | + } | |
3022 | + | |
3023 | + 100% { | |
3024 | + opacity: 0; | |
3025 | + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); | |
3026 | + -ms-transform: scale(.1) translate3d(-2000px, 0, 0); | |
3027 | + transform: scale(.1) translate3d(-2000px, 0, 0); | |
3028 | + -webkit-transform-origin: left center; | |
3029 | + -ms-transform-origin: left center; | |
3030 | + transform-origin: left center; | |
3031 | + } | |
3032 | +} | |
3033 | + | |
3034 | +.zoomOutLeft { | |
3035 | + -webkit-animation-name: zoomOutLeft; | |
3036 | + animation-name: zoomOutLeft; | |
3037 | +} | |
3038 | + | |
3039 | +@-webkit-keyframes zoomOutRight { | |
3040 | + 40% { | |
3041 | + opacity: 1; | |
3042 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
3043 | + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
3044 | + } | |
3045 | + | |
3046 | + 100% { | |
3047 | + opacity: 0; | |
3048 | + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
3049 | + transform: scale(.1) translate3d(2000px, 0, 0); | |
3050 | + -webkit-transform-origin: right center; | |
3051 | + transform-origin: right center; | |
3052 | + } | |
3053 | +} | |
3054 | + | |
3055 | +@keyframes zoomOutRight { | |
3056 | + 40% { | |
3057 | + opacity: 1; | |
3058 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
3059 | + -ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
3060 | + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); | |
3061 | + } | |
3062 | + | |
3063 | + 100% { | |
3064 | + opacity: 0; | |
3065 | + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); | |
3066 | + -ms-transform: scale(.1) translate3d(2000px, 0, 0); | |
3067 | + transform: scale(.1) translate3d(2000px, 0, 0); | |
3068 | + -webkit-transform-origin: right center; | |
3069 | + -ms-transform-origin: right center; | |
3070 | + transform-origin: right center; | |
3071 | + } | |
3072 | +} | |
3073 | + | |
3074 | +.zoomOutRight { | |
3075 | + -webkit-animation-name: zoomOutRight; | |
3076 | + animation-name: zoomOutRight; | |
3077 | +} | |
3078 | + | |
3079 | +@-webkit-keyframes zoomOutUp { | |
3080 | + 40% { | |
3081 | + opacity: 1; | |
3082 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
3083 | + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
3084 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
3085 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
3086 | + } | |
3087 | + | |
3088 | + 100% { | |
3089 | + opacity: 0; | |
3090 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
3091 | + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
3092 | + -webkit-transform-origin: center bottom; | |
3093 | + transform-origin: center bottom; | |
3094 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
3095 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
3096 | + } | |
3097 | +} | |
3098 | + | |
3099 | +@keyframes zoomOutUp { | |
3100 | + 40% { | |
3101 | + opacity: 1; | |
3102 | + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
3103 | + -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
3104 | + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); | |
3105 | + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
3106 | + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); | |
3107 | + } | |
3108 | + | |
3109 | + 100% { | |
3110 | + opacity: 0; | |
3111 | + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
3112 | + -ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
3113 | + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); | |
3114 | + -webkit-transform-origin: center bottom; | |
3115 | + -ms-transform-origin: center bottom; | |
3116 | + transform-origin: center bottom; | |
3117 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
3118 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); | |
3119 | + } | |
3120 | +} | |
3121 | + | |
3122 | +.zoomOutUp { | |
3123 | + -webkit-animation-name: zoomOutUp; | |
3124 | + animation-name: zoomOutUp; | |
3125 | +} | |
0 | 3126 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/animate.min.css
0 → 100644
1 | +@charset "UTF-8";/*! | |
2 | +Animate.css - http://daneden.me/animate | |
3 | +Licensed under the MIT license - http://opensource.org/licenses/MIT | |
4 | + | |
5 | +Copyright (c) 2015 Daniel Eden | |
6 | +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} | |
0 | 7 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/html5input.css
0 → 100644
1 | +/*! | |
2 | + * @package yii2-krajee-base | |
3 | + * @subpackage yii2-widget-activeform | |
4 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
5 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
6 | + * @version 1.7.7 | |
7 | + * | |
8 | + * HTML 5 input styling for Twitter Bootstrap 3.0 | |
9 | + * Covers color and range inputs | |
10 | + * Built for Yii Framework 2.0 | |
11 | + * Author: Kartik Visweswaran | |
12 | + * Year: 2015 | |
13 | + * For more Yii related demos visit http://demos.krajee.com | |
14 | + */ | |
15 | +.input-group-html5 { | |
16 | + width: 100% !important; | |
17 | +} | |
18 | + | |
19 | +.input-group-html5 .input-group-addon { | |
20 | + width: auto; | |
21 | + padding: 5px 6px; | |
22 | +} | |
23 | + | |
24 | +.input-group-html5 input[type="color"], .input-group-html5 input[type="range"] { | |
25 | + display: block; | |
26 | + padding: 0; | |
27 | + margin: 0; | |
28 | + border: none; | |
29 | + box-shadow: none; | |
30 | + background: none; | |
31 | + width: 100%;; | |
32 | +} | |
33 | + | |
34 | +.input-group .addon-color { | |
35 | + padding: 2px; | |
36 | +} | |
37 | + | |
38 | +.input-group-lg input[type="color"] { | |
39 | + height: 24px !important; | |
40 | +} | |
41 | + | |
42 | +.input-group-sm input[type="color"] { | |
43 | + height: 14px !important; | |
44 | +} | |
45 | + | |
46 | +.input-group-html5 .addon-range { | |
47 | + min-width: 50%; | |
48 | +} | |
49 | + | |
50 | +.input-group-html5 .input-group-addon + .input-group-addon { | |
51 | + border-left: 0 !important; | |
52 | +} | |
53 | + | |
54 | +.input-group-html5 .input-group-addon + .form-control { | |
55 | + border-left: 0 !important; | |
56 | +} | |
57 | + | |
58 | +.input-group-html5 .input-group-addon:first-child { | |
59 | + border-right: 1px solid #ccc !important; | |
60 | +} | |
61 | + | |
62 | +.input-group-html5 input[disabled] { | |
63 | + opacity: .65; | |
64 | + cursor: not-allowed; | |
65 | +} | |
66 | + | |
67 | +.input-group-html5.kv-range-vertical { | |
68 | + float: left; | |
69 | + height: 200px; | |
70 | + width: 50px !important; | |
71 | + margin-right: 5px; | |
72 | +} | |
73 | + | |
74 | +.input-group-html5.kv-range-vertical input.form-control { | |
75 | + height: 214px; | |
76 | + width: 40px; | |
77 | + padding: 0 3px; | |
78 | + line-height: 0; | |
79 | + text-align: center; | |
80 | +} | |
81 | + | |
82 | +.input-group-html5.kv-range-vertical input[type=range] { | |
83 | + writing-mode: bt-lr; /* IE */ | |
84 | + -webkit-appearance: slider-vertical; /* WebKit */ | |
85 | + width: 8px !important; | |
86 | + height: 200px; | |
87 | +} | |
88 | + | |
89 | +.input-group-html5.kv-range-vertical .input-group-addon, | |
90 | +.input-group-html5.input-group-sm .input-group-addon { | |
91 | + padding: 2px 10px; | |
92 | +} | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/html5input.min.css
0 → 100644
1 | +/*! | |
2 | + * @package yii2-krajee-base | |
3 | + * @subpackage yii2-widget-activeform | |
4 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
5 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
6 | + * @version 1.7.7 | |
7 | + * | |
8 | + * HTML 5 input styling for Twitter Bootstrap 3.0 | |
9 | + * Covers color and range inputs | |
10 | + * Built for Yii Framework 2.0 | |
11 | + * Author: Kartik Visweswaran | |
12 | + * Year: 2015 | |
13 | + * For more Yii related demos visit http://demos.krajee.com | |
14 | + */.input-group-html5{width:100%!important}.input-group-html5 .input-group-addon{width:auto;padding:5px 6px}.input-group-html5 input[type=color],.input-group-html5 input[type=range]{display:block;padding:0;margin:0;border:none;box-shadow:none;background:0 0;width:100%}.input-group .addon-color{padding:2px}.input-group-lg input[type=color]{height:24px!important}.input-group-sm input[type=color]{height:14px!important}.input-group-html5 .addon-range{min-width:50%}.input-group-html5 .input-group-addon+.form-control,.input-group-html5 .input-group-addon+.input-group-addon{border-left:0!important}.input-group-html5 .input-group-addon:first-child{border-right:1px solid #ccc!important}.input-group-html5 input[disabled]{opacity:.65;cursor:not-allowed}.input-group-html5.kv-range-vertical{float:left;height:200px;width:50px!important;margin-right:5px}.input-group-html5.kv-range-vertical input.form-control{height:214px;width:40px;padding:0 3px;line-height:0;text-align:center}.input-group-html5.kv-range-vertical input[type=range]{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:8px!important;height:200px}.input-group-html5.input-group-sm .input-group-addon,.input-group-html5.kv-range-vertical .input-group-addon{padding:2px 10px} | |
0 | 15 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/kv-widgets.css
0 → 100644
1 | +/*! | |
2 | + * @package yii2-krajee-base | |
3 | + * @subpackage yii2-widget-activeform | |
4 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
5 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
6 | + * @version 1.7.7 | |
7 | + * | |
8 | + * Common CSS file for all kartik\widgets. | |
9 | + * | |
10 | + * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com | |
11 | + * For more Yii related demos visit http://demos.krajee.com | |
12 | + */ | |
13 | +.kv-plugin-loading { | |
14 | + width: 25px; | |
15 | + height: 25px; | |
16 | + background: transparent url('../img/loading-plugin.gif') center left no-repeat; | |
17 | +} | |
18 | + | |
19 | +.kv-hide { | |
20 | + display: none; | |
21 | +} | |
22 | + | |
23 | +.kv-input-group-hide .input-group-addon, | |
24 | +.kv-input-group-hide .input-group-btn { | |
25 | + visibility: hidden; | |
26 | +} | |
0 | 27 | \ No newline at end of file | ... | ... |
vendor/kartik-v/yii2-krajee-base/assets/css/kv-widgets.min.css
0 → 100644
1 | +/*! | |
2 | + * @package yii2-krajee-base | |
3 | + * @subpackage yii2-widget-activeform | |
4 | + * @author Kartik Visweswaran <kartikv2@gmail.com> | |
5 | + * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015 | |
6 | + * @version 1.7.7 | |
7 | + * | |
8 | + * Common CSS file for all kartik\widgets. | |
9 | + * | |
10 | + * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com | |
11 | + * For more Yii related demos visit http://demos.krajee.com | |
12 | + */.kv-plugin-loading{width:25px;height:25px;background:url(../img/loading-plugin.gif) center left no-repeat}.kv-hide{display:none}.kv-input-group-hide .input-group-addon,.kv-input-group-hide .input-group-btn{visibility:hidden} | |
0 | 13 | \ No newline at end of file | ... | ... |
847 Bytes
1 | +{ | |
2 | + "name": "kartik-v/yii2-krajee-base", | |
3 | + "description": "Base library and foundation components for all Yii2 Krajee extensions.", | |
4 | + "keywords": ["yii2", "extension", "widget", "krajee", "base", "foundation"], | |
5 | + "homepage": "https://github.com/kartik-v/yii2-krajee-base", | |
6 | + "type": "yii2-extension", | |
7 | + "license": "BSD-3-Clause", | |
8 | + "authors": [ | |
9 | + { | |
10 | + "name": "Kartik Visweswaran", | |
11 | + "email": "kartikv2@gmail.com", | |
12 | + "homepage": "http://www.krajee.com/" | |
13 | + } | |
14 | + ], | |
15 | + "minimum-stability": "stable", | |
16 | + "require": { | |
17 | + "yiisoft/yii2-bootstrap": "@dev" | |
18 | + }, | |
19 | + "autoload": { | |
20 | + "psr-4": { | |
21 | + "kartik\\base\\": "" | |
22 | + } | |
23 | + } | |
24 | +} | ... | ... |
vendor/yiisoft/extensions.php
... | ... | @@ -93,4 +93,22 @@ return array ( |
93 | 93 | '@yii/jui' => $vendorDir . '/yiisoft/yii2-jui', |
94 | 94 | ), |
95 | 95 | ), |
96 | + 'kartik-v/yii2-krajee-base' => | |
97 | + array ( | |
98 | + 'name' => 'kartik-v/yii2-krajee-base', | |
99 | + 'version' => '1.7.7.0', | |
100 | + 'alias' => | |
101 | + array ( | |
102 | + '@kartik/base' => $vendorDir . '/kartik-v/yii2-krajee-base', | |
103 | + ), | |
104 | + ), | |
105 | + 'kartik-v/yii2-widget-select2' => | |
106 | + array ( | |
107 | + 'name' => 'kartik-v/yii2-widget-select2', | |
108 | + 'version' => '9999999-dev', | |
109 | + 'alias' => | |
110 | + array ( | |
111 | + '@kartik/select2' => $vendorDir . '/kartik-v/yii2-widget-select2', | |
112 | + ), | |
113 | + ), | |
96 | 114 | ); | ... | ... |