├── css ├── print.css ├── ie.css ├── dialog.css └── animate.css ├── sass ├── print.scss ├── ie.scss ├── component │ └── _global.scss └── dialog.scss ├── img ├── 1497856033.png └── avuOu1keKL.gif ├── .gitattributes ├── .gitignore ├── .sass-cache ├── 104928d9b8e00c4917c00ba455671ad6bb378af7 │ └── _global.scssc ├── 3746710bfe7e0b2975954c3a0118ba047eb1860b │ ├── _filter.scssc │ ├── _images.scssc │ ├── _columns.scssc │ ├── _flexbox.scssc │ ├── _opacity.scssc │ ├── _regions.scssc │ ├── _animation.scssc │ ├── _box-shadow.scssc │ ├── _box-sizing.scssc │ ├── _font-face.scssc │ ├── _hyphenation.scssc │ ├── _text-shadow.scssc │ ├── _transform.scssc │ ├── _transition.scssc │ ├── _border-radius.scssc │ ├── _inline-block.scssc │ ├── _background-clip.scssc │ ├── _background-size.scssc │ ├── _user-interface.scssc │ ├── _background-origin.scssc │ ├── _deprecated-support.scssc │ └── _appearance.scssc ├── 3ff85c9de04cc17f3d557dc986d1bf087806870f │ ├── dailog.scssc │ ├── dialog.scssc │ ├── print.scssc │ ├── ie.scssc │ └── screen.scssc ├── 4b0b3a2d70a7421dbafe329a5bb925b46182dcb6 │ └── _global.scssc ├── 595fac6b687c9031debfb4ea4c8b3511cc17aba3 │ └── _hacks.scssc ├── 87613033b6977be69c6bdceecd4a518fc7303b74 │ ├── dailog.scssc │ ├── dialog.scssc │ ├── print.scssc │ └── ie.scssc ├── 8f94eb898a9783786c406a84806e4fc94c68aa1c │ └── _ellipsis.scssc ├── b4dc5ef3282a087fe58bacd7d9b56433752b3ac9 │ ├── _support.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ └── _css3.scssc ├── 3aa8e0230493eb6fd1c3680539c42b9bb329e1c6 │ ├── _stretching.scssc │ ├── _sticky-footer.scssc │ └── _grid-background.scssc ├── 79db1df0af0471c2664c612e8a6fdc3832f23fae │ └── _link-colors.scssc ├── f20dab5b7fb1216f35d8484ebb92bc8dca57139a │ └── _utilities.scssc └── 75fcaf1b4852ceb732871195e41567cc2a7d8997 │ ├── E%058 │ └── myProject │ │ ├── dailog │ │ └── sass │ │ │ └── component │ │ │ └── _global.scssc │ │ └── dialog │ │ └── sass │ │ └── component │ │ └── _global.scssc │ └── C%058 │ └── Ruby22-x64 │ └── lib │ └── ruby │ └── gems │ └── 2.2.0 │ └── gems │ └── compass-core-1.0.3 │ └── stylesheets │ └── compass │ ├── _css3.scssc │ ├── _reset.scssc │ ├── _layout.scssc │ ├── _support.scssc │ ├── css3 │ ├── _images.scssc │ └── _background-size.scssc │ └── typography │ ├── text │ └── _ellipsis.scssc │ └── links │ └── _link-colors.scssc ├── config.rb ├── README.md ├── index.html └── js └── dialog.js /css/print.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sass/print.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/1497856033.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/img/1497856033.png -------------------------------------------------------------------------------- /img/avuOu1keKL.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/img/avuOu1keKL.gif -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=javascript 2 | *.css linguist-language=javascript 3 | *.html linguist-language=javascript 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.js linguist-language= javascript 2 | *.css linguist-language= javascript 3 | *.html linguist-language= javascript 4 | -------------------------------------------------------------------------------- /.sass-cache/104928d9b8e00c4917c00ba455671ad6bb378af7/_global.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/104928d9b8e00c4917c00ba455671ad6bb378af7/_global.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_filter.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/dailog.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/dailog.scssc -------------------------------------------------------------------------------- /.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/dialog.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/dialog.scssc -------------------------------------------------------------------------------- /.sass-cache/4b0b3a2d70a7421dbafe329a5bb925b46182dcb6/_global.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/4b0b3a2d70a7421dbafe329a5bb925b46182dcb6/_global.scssc -------------------------------------------------------------------------------- /.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/595fac6b687c9031debfb4ea4c8b3511cc17aba3/_hacks.scssc -------------------------------------------------------------------------------- /.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/dailog.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/dailog.scssc -------------------------------------------------------------------------------- /.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/dialog.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/dialog.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_columns.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_flexbox.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_opacity.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_regions.scssc -------------------------------------------------------------------------------- /.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/8f94eb898a9783786c406a84806e4fc94c68aa1c/_ellipsis.scssc -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_support.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_animation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_box-sizing.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_font-face.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_hyphenation.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_text-shadow.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transform.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_transition.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_stretching.scssc -------------------------------------------------------------------------------- /.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/79db1df0af0471c2664c612e8a6fdc3832f23fae/_link-colors.scssc -------------------------------------------------------------------------------- /.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/f20dab5b7fb1216f35d8484ebb92bc8dca57139a/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_border-radius.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_inline-block.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_sticky-footer.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-clip.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-size.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_user-interface.scssc -------------------------------------------------------------------------------- /.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3aa8e0230493eb6fd1c3680539c42b9bb329e1c6/_grid-background.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_background-origin.scssc -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/dialog/master/.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_deprecated-support.scssc -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /sass/ie.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. Use this file to write IE specific override styles. 2 | * Import this file using the following HTML or equivalent: 3 | * */ 6 | -------------------------------------------------------------------------------- /.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/print.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"(E:/myProject/dialog/sass/print.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"E:/myProject/dialog; 7 | T:@real_rootI"E:/myProject/dialog; 8 | T:@same_name_warningso:Set: 9 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/print.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"(E:/myProject/dailog/sass/print.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"E:/myProject/dailog; 8 | T:@real_rootI"E:/myProject/dailog; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/E%058/myProject/dailog/sass/component/_global.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"C(NOT IMPORTED) E:/myProject/dailog/sass/component/_global.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"E:/myProject/dailog; 8 | T:@real_rootI"E:/myProject/dailog; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/E%058/myProject/dialog/sass/component/_global.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"C(NOT IMPORTED) E:/myProject/dialog/sass/component/_global.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"E:/myProject/dialog; 8 | T:@real_rootI"E:/myProject/dialog; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"l(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"m(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"n(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"o(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_support.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"s(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_images.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"|(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_background-size.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/text/_ellipsis.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"{(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/text/_ellipsis.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"(NOT IMPORTED) C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss; 6 | T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 8 | T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; 9 | T:@same_name_warningso:Set: 10 | @hash{ -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = "css" 7 | sass_dir = "sass" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | # line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_reset.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | df78759f0fe6b88a633d20d26581ca4cdb829111 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"reset/utilities:ET;[:@filename0: @options{:@template0:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position: 4 | @linei: @offseti: @end_poso;;i;i: 5 | @fileI"^C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_reset.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{;i:@imported_file0o:Sass::Tree::MixinNode: 8 | @nameI"global-reset; T: 9 | @args[:@keywords{: @splat0:@kwarg_splat0;[; 10 | 0; @ 11 | ;i; o; ;o;;i;i;o;;i;i;@;@; 12 | 0; @ 13 | ; I"8@import "reset/utilities"; 14 | 15 | @include global-reset; 16 | ; T:@has_childrenT;i; o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_layout.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | bbe8b1b9b6592e6ce6a7294fd0249c75049d3024 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"layout/grid-background:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i&: 5 | @fileI"_C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_layout.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"layout/sticky-footer; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"layout/stretching; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 12 | 0; @ 13 | ; I"d@import "layout/grid-background"; 14 | @import "layout/sticky-footer"; 15 | @import "layout/stretching"; 16 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/version-1.2-blue.svg) ![](https://img.shields.io/badge/IE-9%2B-orange.svg)
2 | 3 | 预览地址 4 | http://daiwei.org/components/dialog/ 5 | 6 | 手机扫码预览
7 | 8 | ![](https://github.com/IFmiss/dialog/blob/master/img/1497856033.png) 9 | 10 | # dialog 11 | 12 | ![](https://github.com/IFmiss/dialog/blob/master/img/avuOu1keKL.gif) 13 | 14 | 一个小巧简约的弹窗插件 15 | * width:   弹窗的宽度   number 16 | * padding: 弹窗元素的 padding   字符串类型 17 | * title:   弹窗的title名称   字符串类型 18 | * discription:   弹窗的描述    字符串类型 19 | * borderRadius:    弹窗的圆角    字符串类型 20 | * buttons:   弹窗的按钮    数组类型  ['确定','取消'] 21 | * maskBg:    浮层的背景色    字符串类型 22 | * dialogBg:   弹窗的背景色   字符串类型 23 | * type:   弹窗的样式   字符串类型   defalut   primary   success   danger   warning 24 | * zIndex:   弹窗的层级     number 25 | * hideScroll:    是否在弹窗的时候  关闭右侧的滚动条    bool 26 | * isBtnHasBgColor: bottons 是否有背景色   bool 27 | * showBoxShadow:   弹窗是否显示box-shadow    bool 28 | * animateStyle:    弹窗进入的动画   fadeInNoTransform   字符串类型 29 | * isInput:     是否显示文本输入框   bool 30 | * inputPlaceholder:   文本输入框的Placeholder的设置   字符串类型 31 | 32 | #回调 33 | * callBack:function(ret){} 34 | * 返回值ret  ret.index 点击的索引, ret.input.status (如果有输入框为1，否则为0), ret.input.value  输入框的值 35 | 36 | -------------------------------------------------------------------------------- /.sass-cache/87613033b6977be69c6bdceecd4a518fc7303b74/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI"%E:/myProject/dailog/sass/ie.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/myProject/dailog; T:@real_rootI"E:/myProject/dailog; T:@same_name_warningso:Set: 13 | @hash{; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T;i;o; ;o;;i;i;o;;i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/ie.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 55d03cbe8dc4482082815585822d80503557fdcb 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Welcome to Compass. Use this file to write IE specific override styles. 4 | * Import this file using the following HTML or equivalent: 5 | * */:ET: 8 | @type: normal;[:@filename0: @options{: 9 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i 10 | ;i: 11 | @fileI"%E:/myProject/dialog/sass/ie.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 12 | @rootI"E:/myProject/dialog; T:@real_rootI"E:/myProject/dialog; T:@same_name_warningso:Set: 13 | @hash{; 0; @ :@templateI"/* Welcome to Compass. Use this file to write IE specific override styles. 14 | * Import this file using the following HTML or equivalent: 15 | * */ 18 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /.sass-cache/3ff85c9de04cc17f3d557dc986d1bf087806870f/screen.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | e24c39d4800ce9f9b6b50e6a9d2d8c3fce9d548f 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I" /* Welcome to Compass. 4 | * In this file you should write your main styles. (or centralize your imports) 5 | * Import this file using the following HTML or equivalent: 6 | * */:ET: 7 | @type: normal;[:@filename0: @options{: 8 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i ;io: 9 | @fileI")E:/myProject/dialog/sass/screen.scss: encoding"GBK:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 10 | @rootI"E:/myProject/dialog; T:@real_rootI"E:/myProject/dialog; T:@same_name_warningso:Set: 11 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/reset; T;[; 0; @ :@template0;o; ;o;;i ;i;o;;i ;i;@;@;i :@imported_file0; 0; @ ;!I"'/* Welcome to Compass. 12 | * In this file you should write your main styles. (or centralize your imports) 13 | * Import this file using the following HTML or equivalent: 14 | * */ 15 | 16 | @import "compass/reset"; 17 | ; T:@has_childrenT;i;o; ;o;;i;i;o;;i;i;@;@ -------------------------------------------------------------------------------- /sass/component/_global.scss: -------------------------------------------------------------------------------- 1 | // 这里将是所有的颜色列表信息 2 | $dw-color-default:#ffffff; 3 | $dw-color-default-hover:#e6e6e6; 4 | 5 | $dw-color-success:#21B384; 6 | $dw-color-success-hover:#28A47C; 7 | 8 | $dw-color-primary:#4D96DF; 9 | $dw-color-primary-hover:#4684C3; 10 | 11 | $dw-color-warning:#FFBD7A; 12 | $dw-color-warning-hover:#F0AF6D; 13 | 14 | $dw-color-danger:#D9534F; 15 | $dw-color-danger-hover:#C74743; 16 | 17 | $dw-color-skyblue:#99CCFF; 18 | $dw-color-skyblue-hover:#8EB5DB; 19 | 20 | $dw-color-powderblue:#99CCCC; 21 | $dw-color-powderblue-hover:#85BDBD; 22 | 23 | $dw-color-springgreen:#66CC99; 24 | $dw-color-springgreen-hover:#5AB588; 25 | 26 | $dw-color-lightpurple:#CCCCFF; 27 | $dw-color-lightpurple-hover:#B8B8E9; 28 | 29 | $dw-color-lightgrey:#CCCCCC; 30 | $dw-color-lightgrey-hover:#C5C5C5; 31 | 32 | $dw-color-deepred:#AA314D; 33 | $dw-color-deepred-hover:#923248; 34 | 35 | 36 | 37 | //关闭谷歌浏览器输入框黑色 38 | input:-webkit-autofill, 39 | textarea:-webkit-autofill, 40 | select:-webkit-autofill { 41 | -webkit-box-shadow: 0 0 0 1000px white inset!important; 42 | } 43 | 44 | // input:-webkit-autofill { 45 | // -webkit-box-shadow: 0 0 0px 1000px white inset !important; 46 | // } 47 | 48 | input[type=text]:focus, input[type=password]:focus, textarea:focus { 49 | -webkit-box-shadow: 0 0 0 1000px white inset; 50 | } 51 | 52 | body{ 53 | -webkit-font-smoothing:none; 54 | } 55 | 56 | 57 | .txt-color-666{ 58 | color:#666 !important; 59 | } 60 | 61 | .txt-textOneRow{ 62 | text-overflow: ellipsis; 63 | overflow:hidden; 64 | white-space:nowrap; 65 | } 66 | 67 | .txt-textTwoRow{ 68 | // height: 40 69 | // line-height: 20 几行就是几的倍数 70 | overflow: hidden; 71 | text-overflow: ellipsis; 72 | display: -webkit-box; 73 | -webkit-line-clamp: 2; 74 | -webkit-box-orient: vertical; 75 | } -------------------------------------------------------------------------------- /.sass-cache/b4dc5ef3282a087fe58bacd7d9b56433752b3ac9/_css3.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | ff2e5c1b784cd29f2321d28a68782dc7c9611f46 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"css3/border-radius:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i": 5 | @fileI"]C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/_css3.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 6 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 7 | @hash{:@imported_file0o; ;I"css3/inline-block; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0o; ;I"css3/opacity; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/box-shadow; T;[; 12 | 0; @ 13 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/text-shadow; T;[; 14 | 0; @ 15 | ; 0; i 16 | ;o; ;o;; i 17 | ;i;o;; i 18 | ;i ;@;@;0o; ;I"css3/columns; T;[; 19 | 0; @ 20 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/box-sizing; T;[; 21 | 0; @ 22 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/flexbox; T;[; 23 | 0; @ 24 | ; 0; i ;o; ;o;; i ;i;o;; i ;i;@;@;0o; ;I"css3/images; T;[; 25 | 0; @ 26 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/background-clip; T;[; 27 | 0; @ 28 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/background-origin; T;[; 29 | 0; @ 30 | ; 0; i;o; ;o;; i;i;o;; i;i&;@;@;0o; ;I"css3/background-size; T;[; 31 | 0; @ 32 | ; 0; i;o; ;o;; i;i;o;; i;i$;@;@;0o; ;I"css3/font-face; T;[; 33 | 0; @ 34 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transform; T;[; 35 | 0; @ 36 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/transition; T;[; 37 | 0; @ 38 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/appearance; T;[; 39 | 0; @ 40 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/animation; T;[; 41 | 0; @ 42 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/regions; T;[; 43 | 0; @ 44 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/hyphenation; T;[; 45 | 0; @ 46 | ; 0; i;o; ;o;; i;i;o;; i;i ;@;@;0o; ;I"css3/filter; T;[; 47 | 0; @ 48 | ; 0; i;o; ;o;; i;i;o;; i;i;@;@;0o; ;I"css3/user-interface; T;[; 49 | 0; @ 50 | ; 0; i;o; ;o;; i;i;o;; i;i#;@;@;0; 51 | 0; @ 52 | ; I"<@import "css3/border-radius"; 53 | @import "css3/inline-block"; 54 | @import "css3/opacity"; 55 | @import "css3/box-shadow"; 56 | @import "css3/text-shadow"; 57 | @import "css3/columns"; 58 | @import "css3/box-sizing"; 59 | @import "css3/flexbox"; 60 | @import "css3/images"; 61 | @import "css3/background-clip"; 62 | @import "css3/background-origin"; 63 | @import "css3/background-size"; 64 | @import "css3/font-face"; 65 | @import "css3/transform"; 66 | @import "css3/transition"; 67 | @import "css3/appearance"; 68 | @import "css3/animation"; 69 | @import "css3/regions"; 70 | @import "css3/hyphenation"; 71 | @import "css3/filter"; 72 | @import "css3/user-interface"; 73 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/3746710bfe7e0b2975954c3a0118ba047eb1860b/_appearance.scssc: -------------------------------------------------------------------------------- 1 | 3.4.22 (Selective Steve) 2 | 8c228e867e069d1b52ae586e30be356946cddfdf 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode : @value[I"/* Appearance */:ET: 4 | @type: silent;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"hC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_appearance.scss; T:@importere:"Compass::ImportOnce::Importero: Sass::Importers::Filesystem: 7 | @rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@real_rootI"JC:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets; T:@same_name_warningso:Set: 8 | @hash{o:Sass::Tree::ImportNode :@imported_filenameI"compass/support; T;[; 0; @ :@template0;i;o; ;o;;i;i;o;;i;i;@;@:@imported_file0o; ;[I"6/* Change the appearance for Mozilla, Webkit and possibly the future. 9 | * The appearance property is currently not present in any newer CSS specification. 10 | * 11 | * There is no official list of accepted values, but you might check these source: 12 | * 13 | * * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 14 | * * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 15 | * (search for 'appearance' within the page) */; T; 16 | ; ;[; 0; @ ;i ;o; ;o;;i ;i;o;;i;i6;@;@o:Sass::Tree::MixinDefNode: 17 | @nameI"appearance; T: 18 | @args[[o:!Sass::Script::Tree::Variable ;#I"appearance; T:@underscored_nameI"appearance; T:@css_variable_warning0;i;o; ;o;;i;i;o;;i;i#;@;@; @; @ 0: @splat0;[ o; ;[I"7/* There is no caniuse tracking for appearance. */; T; 19 | ; ;[; 0; @ ;i;o; ;o;;i;i;o;;i;i7;@;@o:Sass::Tree::VariableNode;#I"appearance; T: 20 | @expro: Sass::Script::Tree::Funcall;#I" unquote; T;$[o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i;o;;i;i(;@;@; @; @ :@keywordso:Sass::Util::NormalizedMap:@key_strings{: @map{;(0:@kwarg_splat0;'0;i;o; ;o;;i;i;o;;i;i);@;@; @; @ : @guarded0: @global0;[; 0; @ ;i;o; ;o;;i;i ;o;;i;i);@;@o:Sass::Tree::MixinNode;#I"with-prefix; T;$[o: Sass::Script::Tree::Literal 21 | ;o: Sass::Script::Value::String ;I" -moz; T; @ ; 22 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i!;@;@;'0; @;,o;-;.{;/{;(0;00;[o:Sass::Tree::PropNode;#[I"-moz-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ : 23 | @tabsi:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i+;o;;i;iG;@;@:@name_source_rangeo; ;@a;o;;i;i:;@;@:@value_source_rangeo; ;o;;i;i<;@b;@;@; 0; @ ;i;o; ;o;;i;i;o;;i;i&;@;@:@has_childrenTo;3;#I"with-prefix; T;$[o;4 24 | ;o;5 ;I" -webkit; T; @ ; 25 | ;6;70;i;o; ;o;;i;i;o;;i;i$;@;@;'0; @;,o;-;.{;/{;(0;00;[o;8;#[I"-webkit-appearance; T;o;% ;#I"appearance; T;&I"appearance; T;'0;i;o; ;o;;i;i<;o;;i;iG;@;@; @; @ ;9i;:;;;[; 0; @ ;i;o; ;o;;i;i(;o;;i;iG;@;@;T; 0; @ ;i;o; ;o;;i;i;o;;i;i%;@;@;>T; 0; @ ; I"b// Appearance 26 | @import "compass/support"; 27 | 28 | // Change the appearance for Mozilla, Webkit and possibly the future. 29 | // The appearance property is currently not present in any newer CSS specification. 30 | // 31 | // There is no official list of accepted values, but you might check these source: 32 | // 33 | // * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance) 34 | // * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365) 35 | // (search for 'appearance' within the page) 36 | @mixin appearance($appearance) { 37 | // There is no caniuse tracking for appearance. 38 | $appearance: unquote($appearance); 39 | @include with-prefix(-moz) { -moz-appearance: $appearance; } 40 | @include with-prefix(-webkit) { -webkit-appearance: $appearance; } 41 | } 42 | ; T;i;o; ;o;;i;i;o;;i;i;@;@;>T -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹窗UI测试 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /sass/dialog.scss: -------------------------------------------------------------------------------- 1 | /* Welcome to Compass. 2 | * In this file you should write your main styles. (or centralize your imports) 3 | * Import this file using the following HTML or equivalent: 4 | * */ 5 | 6 | @charset "utf-8"; 7 | @import "compass/reset"; 8 | @import "compass/css3"; 9 | @import "compass/layout"; 10 | @import "compass/typography/text/ellipsis"; 11 | @import "compass/typography/links/link-colors"; 12 | @import 'component/_global.scss'; 13 | 14 | .cpt-dw-dialog-mask{ 15 | position: fixed; 16 | width:100%; 17 | height:100%; 18 | top:0; 19 | left:0; 20 | bottom:0; 21 | right:0; 22 | @include translate3d(0,0,0); 23 | } 24 | 25 | .cpt_mask_dialog{ 26 | -webkit-overflow-scrolling: touch; 27 | -webkit-tap-highlight-color: transparent; 28 | position: fixed; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | font-family: '微软雅黑','Microsoft Yahei'; 34 | z-index: 1000002; 35 | animation-duration: 0.6s; 36 | } 37 | 38 | .div_dialog{ 39 | position: fixed; 40 | left: 50%; 41 | top: 50%; 42 | min-width: 240px; 43 | min-height: 130px; 44 | @include translate(-50%,-50%); 45 | // @include translate3d(-50%,-50%,0); 46 | // @include display-flex; 47 | // @include flex-direction(column); 48 | @include box-shadow(0 3px 10px #aaa); 49 | 50 | .close_dialog{ 51 | position:absolute; 52 | height: 40px; 53 | width: 40px; 54 | right: -50px; 55 | top:-50px; 56 | // @include border-radius(50%); 57 | // border:2px solid #fff; 58 | cursor: pointer; 59 | .line1{ 60 | position:absolute; 61 | top: 50%; 62 | left:50%; 63 | width: 30px; 64 | height: 2px; 65 | background: #fff; 66 | margin:0 auto; 67 | -webkit-transform: translate(-50%,-50%) rotate(-45deg); 68 | transform: translate(-50%,-50%) rotate(-45deg); 69 | } 70 | .line2{ 71 | position:absolute; 72 | top: 50%; 73 | left:50%; 74 | width: 30px; 75 | height: 2px; 76 | background: #fff; 77 | margin:0 auto; 78 | -webkit-transform: translate(-50%,-50%) rotate(-45deg); 79 | transform: translate(-50%,-50%) rotate(45deg); 80 | } 81 | } 82 | 83 | &.no_boxShadow{ 84 | @include box-shadow(none); 85 | } 86 | 87 | .title_dialog{ 88 | font-size: 20px; 89 | // @include display-flex; 90 | text-overflow: ellipsis; 91 | overflow:hidden; 92 | white-space: nowrap; 93 | padding: 10px 0; 94 | height: 40px; 95 | position: relative; 96 | @include box-sizing(border-box); 97 | } 98 | 99 | .discription_dialog{ 100 | // @include flex-grow(1); 101 | // @include flex(1); 102 | padding: 16px 0 14px 0; 103 | font-size: 14px; 104 | text-indent: 16px; 105 | line-height: 1.5; 106 | // @include display-flex; 107 | // @include align-items(center); 108 | 109 | .dialog_input{ 110 | height: 28px; 111 | width: 98%; 112 | margin: 0 auto; 113 | outline: none; 114 | border:none; 115 | @include box-shadow(none); 116 | border-bottom:1px solid #aaa; 117 | } 118 | 119 | .dialog_input::-webkit-input-placeholder { /* WebKit browsers */ 120 | color: #a1a1a1; 121 | } 122 | .dialog_input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 123 | color: #a1a1a1; 124 | } 125 | .dialog_input::-moz-placeholder { /* Mozilla Firefox 19+ */ 126 | color: #a1a1a1; 127 | } 128 | .dialog_input:-ms-input-placeholder { /* Internet Explorer 10+ */ 129 | color: #a1a1a1; 130 | } 131 | } 132 | 133 | .dialog_divOperation{ 134 | @include display-flex; 135 | text-overflow: ellipsis; 136 | overflow:hidden; 137 | white-space: nowrap; 138 | justify-content: flex-end; 139 | float: right; 140 | min-height: 32px; 141 | line-height: 32px; 142 | // height: 32px; 143 | 144 | &.samewidth{ 145 | width: 100%; 146 | .btn_span{ 147 | display: block; 148 | text-align: center; 149 | width: calc(50% - 10px); 150 | @include box-sizing(border-box); 151 | height: 100%; 152 | line-height: 1.5; 153 | @include flex(1); 154 | &.one_btn_span{ 155 | margin:0!important; 156 | width: 100%; 157 | float: none!important; 158 | } 159 | &:first-child{ 160 | margin-right: 10px; 161 | float: left; 162 | } 163 | &:last-child{ 164 | margin-left: 10px; 165 | float: right; 166 | } 167 | } 168 | } 169 | 170 | .btn_span{ 171 | @include display-flex; 172 | @justify-content(center); 173 | @include align-items(center); 174 | -webkit-border-radius: 2px; 175 | -moz-border-radius: 2px; 176 | border-radius: 2px; 177 | height: 20px; 178 | @include box-sizing(content-box); 179 | cursor: pointer; 180 | font-size: 14px; 181 | line-height: 18px; 182 | @include user-select(none); 183 | 184 | &:first-child{ 185 | margin-right:10px; 186 | } 187 | } 188 | } 189 | 190 | &.primary{ 191 | .div_dialog{ 192 | @include box-shadow(0px 0px 3px 0px $dw-color-primary); 193 | 194 | &.no_boxShadow{ 195 | @include box-shadow(0px 0px 0px 0px #fff); 196 | } 197 | } 198 | 199 | .title_dialog{ 200 | color: $dw-color-primary; 201 | border-bottom:1px dashed $dw-color-primary; 202 | } 203 | 204 | .discription_dialog{ 205 | color: #313234; 206 | } 207 | 208 | .dialog_divOperation{ 209 | .btn_span{ 210 | // @include box-shadow(0 0 1px 1px #588CD2); 211 | // color: #313234; 212 | color: #fff; 213 | background: $dw-color-primary; 214 | 215 | &:hover{ 216 | background: $dw-color-primary-hover; 217 | } 218 | 219 | &.no_bg{ 220 | background: #fff; 221 | color: #333; 222 | } 223 | 224 | &.defalut{ 225 | color: #fff; 226 | background: $dw-color-primary; 227 | } 228 | 229 | &.reverse{ 230 | color: $dw-color-primary; 231 | background: #fff; 232 | border: 1px solid $dw-color-primary; 233 | 234 | &:hover{ 235 | color: $dw-color-primary-hover; 236 | border: 1px solid $dw-color-primary-hover; 237 | } 238 | } 239 | } 240 | } 241 | } 242 | 243 | &.success{ 244 | .div_dialog{ 245 | @include box-shadow(0px 0px 3px 0px $dw-color-success); 246 | 247 | &.no_boxShadow{ 248 | @include box-shadow(0px 0px 0px 0px #fff); 249 | } 250 | } 251 | 252 | .title_dialog{ 253 | color: $dw-color-success; 254 | border-bottom:1px dashed $dw-color-success; 255 | } 256 | 257 | .discription_dialog{ 258 | color: #283528; 259 | } 260 | 261 | .dialog_divOperation{ 262 | .btn_span{ 263 | // @include box-shadow(0 0 1px 1px #6EB279); 264 | // color: #283528; 265 | color: #fff; 266 | background: $dw-color-success; 267 | 268 | &:hover{ 269 | background: $dw-color-success-hover; 270 | } 271 | 272 | &.no_bg{ 273 | background: #fff; 274 | color: #333; 275 | } 276 | 277 | &.defalut{ 278 | color: #fff; 279 | background: $dw-color-success; 280 | } 281 | 282 | &.reverse{ 283 | color: $dw-color-success; 284 | background: #fff; 285 | border: 1px solid $dw-color-success; 286 | 287 | &:hover{ 288 | color: $dw-color-success-hover; 289 | border: 1px solid $dw-color-success-hover; 290 | } 291 | } 292 | } 293 | } 294 | } 295 | 296 | &.danger{ 297 | .div_dialog{ 298 | @include box-shadow(0px 0px 3px 0px $dw-color-danger); 299 | 300 | &.no_boxShadow{ 301 | @include box-shadow(0px 0px 0px 0px #fff); 302 | } 303 | } 304 | 305 | .title_dialog{ 306 | color: $dw-color-danger; 307 | border-bottom:1px dashed $dw-color-danger; 308 | } 309 | 310 | .discription_dialog{ 311 | color: #4F3536; 312 | } 313 | 314 | .dialog_divOperation{ 315 | .btn_span{ 316 | // @include box-shadow(0 0 1px 1px #C54D54); 317 | // color: #4F3536; 318 | color: #fff; 319 | background: $dw-color-danger; 320 | 321 | &:hover{ 322 | background: $dw-color-danger-hover; 323 | } 324 | 325 | &.no_bg{ 326 | background: #fff; 327 | color: #333; 328 | } 329 | 330 | &.defalut{ 331 | color: #fff; 332 | background: $dw-color-danger; 333 | } 334 | 335 | &.reverse{ 336 | color: $dw-color-danger; 337 | background: #fff; 338 | border: 1px solid $dw-color-danger; 339 | 340 | &:hover{ 341 | color: $dw-color-danger-hover; 342 | border: 1px solid $dw-color-danger-hover; 343 | } 344 | } 345 | } 346 | } 347 | } 348 | 349 | &.warning{ 350 | .div_dialog{ 351 | @include box-shadow(0px 0px 3px 0px $dw-color-warning); 352 | 353 | &.no_boxShadow{ 354 | @include box-shadow(0px 0px 0px 0px #fff); 355 | } 356 | } 357 | 358 | .title_dialog{ 359 | color:$dw-color-warning; 360 | border-bottom:1px dashed $dw-color-warning; 361 | } 362 | 363 | .discription_dialog{ 364 | color: #4F3536; 365 | } 366 | 367 | .dialog_divOperation{ 368 | .btn_span{ 369 | // @include box-shadow(0 0 1px 1px #C54D54); 370 | // color: #4F3536; 371 | color: #fff; 372 | background: $dw-color-warning; 373 | 374 | &:hover{ 375 | background: $dw-color-warning-hover; 376 | } 377 | 378 | &.no_bg{ 379 | background: #fff; 380 | color: #333; 381 | } 382 | 383 | &.defalut{ 384 | color: #fff; 385 | background: $dw-color-warning; 386 | } 387 | 388 | &.reverse{ 389 | color: $dw-color-warning; 390 | background: #fff; 391 | border: 1px solid $dw-color-warning; 392 | 393 | &:hover{ 394 | color: $dw-color-warning-hover; 395 | border: 1px solid $dw-color-warning-hover; 396 | } 397 | } 398 | } 399 | } 400 | } 401 | } 402 | 403 | -------------------------------------------------------------------------------- /css/dialog.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* Welcome to Compass. 3 | * In this file you should write your main styles. (or centralize your imports) 4 | * Import this file using the following HTML or equivalent: 5 | * */ 6 | /* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 7 | html, body, div, span, applet, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | a, abbr, acronym, address, big, cite, code, 10 | del, dfn, em, img, ins, kbd, q, s, samp, 11 | small, strike, strong, sub, sup, tt, var, 12 | b, u, i, center, 13 | dl, dt, dd, ol, ul, li, 14 | fieldset, form, label, legend, 15 | table, caption, tbody, tfoot, thead, tr, th, td, 16 | article, aside, canvas, details, embed, 17 | figure, figcaption, footer, header, hgroup, 18 | menu, nav, output, ruby, section, summary, 19 | time, mark, audio, video { 20 | margin: 0; 21 | padding: 0; 22 | border: 0; 23 | font: inherit; 24 | font-size: 100%; 25 | vertical-align: baseline; 26 | } 27 | 28 | /* line 22, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 29 | html { 30 | line-height: 1; 31 | } 32 | 33 | /* line 24, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 34 | ol, ul { 35 | list-style: none; 36 | } 37 | 38 | /* line 26, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 39 | table { 40 | border-collapse: collapse; 41 | border-spacing: 0; 42 | } 43 | 44 | /* line 28, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 45 | caption, th, td { 46 | text-align: left; 47 | font-weight: normal; 48 | vertical-align: middle; 49 | } 50 | 51 | /* line 30, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 52 | q, blockquote { 53 | quotes: none; 54 | } 55 | /* line 103, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 56 | q:before, q:after, blockquote:before, blockquote:after { 57 | content: ""; 58 | content: none; 59 | } 60 | 61 | /* line 32, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 62 | a img { 63 | border: none; 64 | } 65 | 66 | /* line 116, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ 67 | article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { 68 | display: block; 69 | } 70 | 71 | /* line 38, ../sass/component/_global.scss */ 72 | input:-webkit-autofill, 73 | textarea:-webkit-autofill, 74 | select:-webkit-autofill { 75 | -webkit-box-shadow: 0 0 0 1000px white inset !important; 76 | } 77 | 78 | /* line 48, ../sass/component/_global.scss */ 79 | input[type=text]:focus, input[type=password]:focus, textarea:focus { 80 | -webkit-box-shadow: 0 0 0 1000px white inset; 81 | } 82 | 83 | /* line 52, ../sass/component/_global.scss */ 84 | body { 85 | -webkit-font-smoothing: none; 86 | } 87 | 88 | /* line 57, ../sass/component/_global.scss */ 89 | .txt-color-666 { 90 | color: #666 !important; 91 | } 92 | 93 | /* line 61, ../sass/component/_global.scss */ 94 | .txt-textOneRow { 95 | text-overflow: ellipsis; 96 | overflow: hidden; 97 | white-space: nowrap; 98 | } 99 | 100 | /* line 67, ../sass/component/_global.scss */ 101 | .txt-textTwoRow { 102 | overflow: hidden; 103 | text-overflow: ellipsis; 104 | display: -webkit-box; 105 | -webkit-line-clamp: 2; 106 | -webkit-box-orient: vertical; 107 | } 108 | 109 | /* line 14, ../sass/dialog.scss */ 110 | .cpt-dw-dialog-mask { 111 | position: fixed; 112 | width: 100%; 113 | height: 100%; 114 | top: 0; 115 | left: 0; 116 | bottom: 0; 117 | right: 0; 118 | -moz-transform: translate3d(0, 0, 0); 119 | -webkit-transform: translate3d(0, 0, 0); 120 | transform: translate3d(0, 0, 0); 121 | } 122 | 123 | /* line 25, ../sass/dialog.scss */ 124 | .cpt_mask_dialog { 125 | -webkit-overflow-scrolling: touch; 126 | -webkit-tap-highlight-color: transparent; 127 | position: fixed; 128 | top: 0; 129 | left: 0; 130 | width: 100%; 131 | height: 100%; 132 | font-family: '微软雅黑','Microsoft Yahei'; 133 | z-index: 1000002; 134 | animation-duration: 0.6s; 135 | } 136 | 137 | /* line 38, ../sass/dialog.scss */ 138 | .div_dialog { 139 | position: fixed; 140 | left: 50%; 141 | top: 50%; 142 | min-width: 240px; 143 | min-height: 130px; 144 | -moz-transform: translate(-50%, -50%); 145 | -ms-transform: translate(-50%, -50%); 146 | -webkit-transform: translate(-50%, -50%); 147 | transform: translate(-50%, -50%); 148 | -moz-box-shadow: 0 3px 10px #aaa; 149 | -webkit-box-shadow: 0 3px 10px #aaa; 150 | box-shadow: 0 3px 10px #aaa; 151 | } 152 | /* line 50, ../sass/dialog.scss */ 153 | .div_dialog .close_dialog { 154 | position: absolute; 155 | height: 40px; 156 | width: 40px; 157 | right: -50px; 158 | top: -50px; 159 | cursor: pointer; 160 | } 161 | /* line 59, ../sass/dialog.scss */ 162 | .div_dialog .close_dialog .line1 { 163 | position: absolute; 164 | top: 50%; 165 | left: 50%; 166 | width: 30px; 167 | height: 2px; 168 | background: #fff; 169 | margin: 0 auto; 170 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 171 | transform: translate(-50%, -50%) rotate(-45deg); 172 | } 173 | /* line 70, ../sass/dialog.scss */ 174 | .div_dialog .close_dialog .line2 { 175 | position: absolute; 176 | top: 50%; 177 | left: 50%; 178 | width: 30px; 179 | height: 2px; 180 | background: #fff; 181 | margin: 0 auto; 182 | -webkit-transform: translate(-50%, -50%) rotate(-45deg); 183 | transform: translate(-50%, -50%) rotate(45deg); 184 | } 185 | /* line 83, ../sass/dialog.scss */ 186 | .div_dialog.no_boxShadow { 187 | -moz-box-shadow: none; 188 | -webkit-box-shadow: none; 189 | box-shadow: none; 190 | } 191 | /* line 87, ../sass/dialog.scss */ 192 | .div_dialog .title_dialog { 193 | font-size: 20px; 194 | text-overflow: ellipsis; 195 | overflow: hidden; 196 | white-space: nowrap; 197 | padding: 10px 0; 198 | height: 40px; 199 | position: relative; 200 | -moz-box-sizing: border-box; 201 | -webkit-box-sizing: border-box; 202 | box-sizing: border-box; 203 | } 204 | /* line 99, ../sass/dialog.scss */ 205 | .div_dialog .discription_dialog { 206 | padding: 16px 0 14px 0; 207 | font-size: 14px; 208 | text-indent: 16px; 209 | line-height: 1.5; 210 | } 211 | /* line 109, ../sass/dialog.scss */ 212 | .div_dialog .discription_dialog .dialog_input { 213 | height: 28px; 214 | width: 98%; 215 | margin: 0 auto; 216 | outline: none; 217 | border: none; 218 | -moz-box-shadow: none; 219 | -webkit-box-shadow: none; 220 | box-shadow: none; 221 | border-bottom: 1px solid #aaa; 222 | } 223 | /* line 119, ../sass/dialog.scss */ 224 | .div_dialog .discription_dialog .dialog_input::-webkit-input-placeholder { 225 | /* WebKit browsers */ 226 | color: #a1a1a1; 227 | } 228 | /* line 122, ../sass/dialog.scss */ 229 | .div_dialog .discription_dialog .dialog_input:-moz-placeholder { 230 | /* Mozilla Firefox 4 to 18 */ 231 | color: #a1a1a1; 232 | } 233 | /* line 125, ../sass/dialog.scss */ 234 | .div_dialog .discription_dialog .dialog_input::-moz-placeholder { 235 | /* Mozilla Firefox 19+ */ 236 | color: #a1a1a1; 237 | } 238 | /* line 128, ../sass/dialog.scss */ 239 | .div_dialog .discription_dialog .dialog_input:-ms-input-placeholder { 240 | /* Internet Explorer 10+ */ 241 | color: #a1a1a1; 242 | } 243 | /* line 133, ../sass/dialog.scss */ 244 | .div_dialog .dialog_divOperation { 245 | display: -webkit-flex; 246 | display: flex; 247 | text-overflow: ellipsis; 248 | overflow: hidden; 249 | white-space: nowrap; 250 | justify-content: flex-end; 251 | float: right; 252 | min-height: 32px; 253 | line-height: 32px; 254 | } 255 | /* line 144, ../sass/dialog.scss */ 256 | .div_dialog .dialog_divOperation.samewidth { 257 | width: 100%; 258 | } 259 | /* line 146, ../sass/dialog.scss */ 260 | .div_dialog .dialog_divOperation.samewidth .btn_span { 261 | display: block; 262 | text-align: center; 263 | width: calc(50% - 10px); 264 | -moz-box-sizing: border-box; 265 | -webkit-box-sizing: border-box; 266 | box-sizing: border-box; 267 | height: 100%; 268 | line-height: 1.5; 269 | -webkit-flex: 1; 270 | flex: 1; 271 | } 272 | /* line 154, ../sass/dialog.scss */ 273 | .div_dialog .dialog_divOperation.samewidth .btn_span.one_btn_span { 274 | margin: 0 !important; 275 | width: 100%; 276 | float: none !important; 277 | } 278 | /* line 159, ../sass/dialog.scss */ 279 | .div_dialog .dialog_divOperation.samewidth .btn_span:first-child { 280 | margin-right: 10px; 281 | float: left; 282 | } 283 | /* line 163, ../sass/dialog.scss */ 284 | .div_dialog .dialog_divOperation.samewidth .btn_span:last-child { 285 | margin-left: 10px; 286 | float: right; 287 | } 288 | /* line 170, ../sass/dialog.scss */ 289 | .div_dialog .dialog_divOperation .btn_span { 290 | display: -webkit-flex; 291 | display: flex; 292 | @justify-content (center); 293 | -webkit-align-items: center; 294 | align-items: center; 295 | -webkit-border-radius: 2px; 296 | -moz-border-radius: 2px; 297 | border-radius: 2px; 298 | height: 20px; 299 | -moz-box-sizing: content-box; 300 | -webkit-box-sizing: content-box; 301 | box-sizing: content-box; 302 | cursor: pointer; 303 | font-size: 14px; 304 | line-height: 18px; 305 | -moz-user-select: -moz-none; 306 | -ms-user-select: none; 307 | -webkit-user-select: none; 308 | user-select: none; 309 | } 310 | /* line 184, ../sass/dialog.scss */ 311 | .div_dialog .dialog_divOperation .btn_span:first-child { 312 | margin-right: 10px; 313 | } 314 | /* line 191, ../sass/dialog.scss */ 315 | .div_dialog.primary .div_dialog { 316 | -moz-box-shadow: 0px 0px 3px 0px #4D96DF; 317 | -webkit-box-shadow: 0px 0px 3px 0px #4D96DF; 318 | box-shadow: 0px 0px 3px 0px #4D96DF; 319 | } 320 | /* line 194, ../sass/dialog.scss */ 321 | .div_dialog.primary .div_dialog.no_boxShadow { 322 | -moz-box-shadow: 0px 0px 0px 0px #fff; 323 | -webkit-box-shadow: 0px 0px 0px 0px #fff; 324 | box-shadow: 0px 0px 0px 0px #fff; 325 | } 326 | /* line 199, ../sass/dialog.scss */ 327 | .div_dialog.primary .title_dialog { 328 | color: #4D96DF; 329 | border-bottom: 1px dashed #4D96DF; 330 | } 331 | /* line 204, ../sass/dialog.scss */ 332 | .div_dialog.primary .discription_dialog { 333 | color: #313234; 334 | } 335 | /* line 209, ../sass/dialog.scss */ 336 | .div_dialog.primary .dialog_divOperation .btn_span { 337 | color: #fff; 338 | background: #4D96DF; 339 | } 340 | /* line 215, ../sass/dialog.scss */ 341 | .div_dialog.primary .dialog_divOperation .btn_span:hover { 342 | background: #4684C3; 343 | } 344 | /* line 219, ../sass/dialog.scss */ 345 | .div_dialog.primary .dialog_divOperation .btn_span.no_bg { 346 | background: #fff; 347 | color: #333; 348 | } 349 | /* line 224, ../sass/dialog.scss */ 350 | .div_dialog.primary .dialog_divOperation .btn_span.defalut { 351 | color: #fff; 352 | background: #4D96DF; 353 | } 354 | /* line 229, ../sass/dialog.scss */ 355 | .div_dialog.primary .dialog_divOperation .btn_span.reverse { 356 | color: #4D96DF; 357 | background: #fff; 358 | border: 1px solid #4D96DF; 359 | } 360 | /* line 234, ../sass/dialog.scss */ 361 | .div_dialog.primary .dialog_divOperation .btn_span.reverse:hover { 362 | color: #4684C3; 363 | border: 1px solid #4684C3; 364 | } 365 | /* line 244, ../sass/dialog.scss */ 366 | .div_dialog.success .div_dialog { 367 | -moz-box-shadow: 0px 0px 3px 0px #21B384; 368 | -webkit-box-shadow: 0px 0px 3px 0px #21B384; 369 | box-shadow: 0px 0px 3px 0px #21B384; 370 | } 371 | /* line 247, ../sass/dialog.scss */ 372 | .div_dialog.success .div_dialog.no_boxShadow { 373 | -moz-box-shadow: 0px 0px 0px 0px #fff; 374 | -webkit-box-shadow: 0px 0px 0px 0px #fff; 375 | box-shadow: 0px 0px 0px 0px #fff; 376 | } 377 | /* line 252, ../sass/dialog.scss */ 378 | .div_dialog.success .title_dialog { 379 | color: #21B384; 380 | border-bottom: 1px dashed #21B384; 381 | } 382 | /* line 257, ../sass/dialog.scss */ 383 | .div_dialog.success .discription_dialog { 384 | color: #283528; 385 | } 386 | /* line 262, ../sass/dialog.scss */ 387 | .div_dialog.success .dialog_divOperation .btn_span { 388 | color: #fff; 389 | background: #21B384; 390 | } 391 | /* line 268, ../sass/dialog.scss */ 392 | .div_dialog.success .dialog_divOperation .btn_span:hover { 393 | background: #28A47C; 394 | } 395 | /* line 272, ../sass/dialog.scss */ 396 | .div_dialog.success .dialog_divOperation .btn_span.no_bg { 397 | background: #fff; 398 | color: #333; 399 | } 400 | /* line 277, ../sass/dialog.scss */ 401 | .div_dialog.success .dialog_divOperation .btn_span.defalut { 402 | color: #fff; 403 | background: #21B384; 404 | } 405 | /* line 282, ../sass/dialog.scss */ 406 | .div_dialog.success .dialog_divOperation .btn_span.reverse { 407 | color: #21B384; 408 | background: #fff; 409 | border: 1px solid #21B384; 410 | } 411 | /* line 287, ../sass/dialog.scss */ 412 | .div_dialog.success .dialog_divOperation .btn_span.reverse:hover { 413 | color: #28A47C; 414 | border: 1px solid #28A47C; 415 | } 416 | /* line 297, ../sass/dialog.scss */ 417 | .div_dialog.danger .div_dialog { 418 | -moz-box-shadow: 0px 0px 3px 0px #D9534F; 419 | -webkit-box-shadow: 0px 0px 3px 0px #D9534F; 420 | box-shadow: 0px 0px 3px 0px #D9534F; 421 | } 422 | /* line 300, ../sass/dialog.scss */ 423 | .div_dialog.danger .div_dialog.no_boxShadow { 424 | -moz-box-shadow: 0px 0px 0px 0px #fff; 425 | -webkit-box-shadow: 0px 0px 0px 0px #fff; 426 | box-shadow: 0px 0px 0px 0px #fff; 427 | } 428 | /* line 305, ../sass/dialog.scss */ 429 | .div_dialog.danger .title_dialog { 430 | color: #D9534F; 431 | border-bottom: 1px dashed #D9534F; 432 | } 433 | /* line 310, ../sass/dialog.scss */ 434 | .div_dialog.danger .discription_dialog { 435 | color: #4F3536; 436 | } 437 | /* line 315, ../sass/dialog.scss */ 438 | .div_dialog.danger .dialog_divOperation .btn_span { 439 | color: #fff; 440 | background: #D9534F; 441 | } 442 | /* line 321, ../sass/dialog.scss */ 443 | .div_dialog.danger .dialog_divOperation .btn_span:hover { 444 | background: #C74743; 445 | } 446 | /* line 325, ../sass/dialog.scss */ 447 | .div_dialog.danger .dialog_divOperation .btn_span.no_bg { 448 | background: #fff; 449 | color: #333; 450 | } 451 | /* line 330, ../sass/dialog.scss */ 452 | .div_dialog.danger .dialog_divOperation .btn_span.defalut { 453 | color: #fff; 454 | background: #D9534F; 455 | } 456 | /* line 335, ../sass/dialog.scss */ 457 | .div_dialog.danger .dialog_divOperation .btn_span.reverse { 458 | color: #D9534F; 459 | background: #fff; 460 | border: 1px solid #D9534F; 461 | } 462 | /* line 340, ../sass/dialog.scss */ 463 | .div_dialog.danger .dialog_divOperation .btn_span.reverse:hover { 464 | color: #C74743; 465 | border: 1px solid #C74743; 466 | } 467 | /* line 350, ../sass/dialog.scss */ 468 | .div_dialog.warning .div_dialog { 469 | -moz-box-shadow: 0px 0px 3px 0px #FFBD7A; 470 | -webkit-box-shadow: 0px 0px 3px 0px #FFBD7A; 471 | box-shadow: 0px 0px 3px 0px #FFBD7A; 472 | } 473 | /* line 353, ../sass/dialog.scss */ 474 | .div_dialog.warning .div_dialog.no_boxShadow { 475 | -moz-box-shadow: 0px 0px 0px 0px #fff; 476 | -webkit-box-shadow: 0px 0px 0px 0px #fff; 477 | box-shadow: 0px 0px 0px 0px #fff; 478 | } 479 | /* line 358, ../sass/dialog.scss */ 480 | .div_dialog.warning .title_dialog { 481 | color: #FFBD7A; 482 | border-bottom: 1px dashed #FFBD7A; 483 | } 484 | /* line 363, ../sass/dialog.scss */ 485 | .div_dialog.warning .discription_dialog { 486 | color: #4F3536; 487 | } 488 | /* line 368, ../sass/dialog.scss */ 489 | .div_dialog.warning .dialog_divOperation .btn_span { 490 | color: #fff; 491 | background: #FFBD7A; 492 | } 493 | /* line 374, ../sass/dialog.scss */ 494 | .div_dialog.warning .dialog_divOperation .btn_span:hover { 495 | background: #F0AF6D; 496 | } 497 | /* line 378, ../sass/dialog.scss */ 498 | .div_dialog.warning .dialog_divOperation .btn_span.no_bg { 499 | background: #fff; 500 | color: #333; 501 | } 502 | /* line 383, ../sass/dialog.scss */ 503 | .div_dialog.warning .dialog_divOperation .btn_span.defalut { 504 | color: #fff; 505 | background: #FFBD7A; 506 | } 507 | /* line 388, ../sass/dialog.scss */ 508 | .div_dialog.warning .dialog_divOperation .btn_span.reverse { 509 | color: #FFBD7A; 510 | background: #fff; 511 | border: 1px solid #FFBD7A; 512 | } 513 | /* line 393, ../sass/dialog.scss */ 514 | .div_dialog.warning .dialog_divOperation .btn_span.reverse:hover { 515 | color: #F0AF6D; 516 | border: 1px solid #F0AF6D; 517 | } 518 | -------------------------------------------------------------------------------- /js/dialog.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | //动态加载animate 3 | var loadStyles = function(url) { 4 | var hasSameStyle = false; 5 | var links = $('link'); 6 | for(var i = 0;i').css({ 49 | background:opt.background, 50 | 'z-index':opt.zIndex, 51 | 'webkit-transition':'all '+opt.duration/1000+'s', 52 | '-moz-transition':'all '+opt.duration/1000+'s', 53 | transition:'all '+opt.duration/1000+'s', 54 | '-webkit-animation-duration':opt.duration/1000+'s', 55 | '-moz-animation-duration':opt.duration/1000+'s', 56 | 'animation-duration':opt.duration/1000+'s', 57 | }).appendTo(opt.ele); 58 | defaultvalue._showScroll(false); 59 | defaultvalue._event(); 60 | }; 61 | 62 | defaultvalue._showScroll = function(isShow){ 63 | var eleHeight = window.screen.availHeight ; //浏览器可以工作的区域高度 64 | var bodyHeight = document.body.clientHeight || document.documentElement.clientHeight; //网页的实际高度 65 | if(bodyHeight > eleHeight) { 66 | var isshow = isshow || 'false'; 67 | if(isShow){ 68 | $('body,html').css({"min-height":0,overflow:'auto'}); 69 | 70 | $(document.body).css({ 71 | 'border-right':'none', 72 | }) 73 | }else{ 74 | var scrollWidth = defaultvalue._getScrollWidth(); 75 | $('body,html').css({"min-height":"100%",overflow:'hidden'}); 76 | $('body').css({ 77 | 'border-right':scrollWidth+'px solid transparent', 78 | }) 79 | } 80 | }else{ 81 | return 82 | } 83 | }; 84 | 85 | defaultvalue._getScrollWidth = function(){ 86 | var noScroll, scroll, oDiv = document.createElement('div'); 87 | oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'; 88 | noScroll = document.body.appendChild(oDiv).clientWidth; 89 | oDiv.style.overflowY = 'scroll'; 90 | scroll = oDiv.clientWidth; 91 | document.body.removeChild(oDiv); 92 | return noScroll-scroll; 93 | } 94 | 95 | defaultvalue._removeMask = function(){ 96 | if(!isLowerIe9()){ 97 | showMaskEle.addClass("fadeOut").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 98 | showMaskEle.remove(); 99 | }); 100 | }else{ 101 | showMaskEle.remove(); 102 | } 103 | 104 | opt.closeAnimate(); 105 | }; 106 | 107 | defaultvalue._event = function(){ 108 | showMaskEle.on('click',function(){ 109 | //判断是否存在关闭mask的点击事件 110 | if(opt.clickClose && !(opt.preventDefault.indexOf('click') > -1)){ 111 | defaultvalue._showScroll(true); 112 | defaultvalue._removeMask(); 113 | } 114 | }); 115 | 116 | showMaskEle.on(opt.stopPropagation,function(event){ 117 | event.stopPropagation(); 118 | }); 119 | 120 | showMaskEle.on(opt.preventDefault,function(event){ 121 | event.preventDefault(); 122 | }); 123 | }; 124 | 125 | defaultvalue._init(); 126 | }; 127 | 128 | var isIE = function(callBack) { 129 | var isIE = false; 130 | if (!!window.ActiveXObject || "ActiveXObject" in window) { 131 | isIE = true; 132 | } 133 | else{ 134 | isIE = false; 135 | } 136 | 137 | if(typeof(callBack) === 'function'){ 138 | callBack(isIE); 139 | }else{ 140 | return isIE; 141 | } 142 | }; 143 | 144 | var isLowerIe9 = function(){ 145 | return (!window.FormData); 146 | }; 147 | 148 | $.fn.dialog = function(options,callBack){ 149 | var _this = this; 150 | var $this = $(this); 151 | var defaultDialog = { 152 | width: 280, //宽度 153 | height: 'auto', //高度 154 | padding: '10px 16px', //padding 155 | title: '提示!', //提醒信息 156 | titleFontSize: '20px', //title的字体大小 157 | discription: '这是弹窗的描述!', //描述 158 | discriptionFontSize:'16px', //描述的字体大小 159 | borderRadius: '4px', //圆角 160 | buttons: [ //按钮信息 (最多两个) 161 | { 162 | name: '确定', 163 | className: 'defalut' 164 | },{ 165 | name: '取消', 166 | className: 'defalut' 167 | } 168 | ], 169 | showCloseIcon: false, //是否显示关闭弹窗的按钮 (右上方) 170 | buttonsHeight: 32, // 在设置底部固定相等的时候需要设置button的高 因为js会让他的padding都为0 171 | buttonsSameWidth: false, // 设置底部按钮是否固定相等占满底部 172 | buttonsFontSize: '14px', // 按钮的字体大小 173 | buttonsPadding: '4px 10px', // 按钮的padding 174 | maskBg: 'rgba(0,0,0,0.6)', //遮罩层背景色 175 | dialogBg: '#fff', //弹出框的背景色 176 | type: 'defalut', //类型 defalut primary success danger warning 177 | zIndex: 10000011, //层级 178 | hideScroll: false, //是否关闭滚动条 179 | isBtnHasBgColor: true, //确定 取消按钮是否有背景色 180 | showBoxShadow: false, //弹窗是否显示boxshadow 181 | animateStyle: 'fadeInNoTransform', //进入的效果 182 | animateIn: 'fadeIn', //进入的效果 183 | animateOut: 'fadeOut', //离开的效果 184 | isInput: false, //是否显示输入框 185 | inputPlaceholder: '填写相关内容', //文本输入提示框 186 | duration: 300, //动画持续的时间 187 | }; 188 | 189 | var opt = $.extend(defaultDialog,options||{}); 190 | 191 | // 设置btn是否有颜色 192 | var btn_className = opt.isBtnHasBgColor?'':'no_bg'; 193 | 194 | // 点击的索引 195 | var btnIndex = ''; 196 | 197 | if($('.cpt-dw-dialog-mask').length){ 198 | return; 199 | }; 200 | 201 | var _isScroll = function(){ 202 | if(opt.hideScroll){ 203 | $('body,html').css({ 204 | overflow:'hidden', 205 | }); 206 | } 207 | } 208 | 209 | var _overflowBtn = function(){ 210 | // buttons超过两个提示 211 | if(opt.buttons.length>2){ 212 | alert('按钮的最多显示上限不超过2个'); 213 | return; 214 | } 215 | } 216 | 217 | var _isBoxShadow = function(){ 218 | // 是否显示boxshadow 219 | if(!opt.showBoxShadow){ 220 | _this.dialog_div.addClass('no_boxShadow'); 221 | }; 222 | } 223 | 224 | var _btnIndex = function(name){ 225 | //获取点击的索引 226 | var btnName = name || ''; 227 | for(var i = 0;i").css({ 256 | // 'visibility':'hidden', 257 | 'width':opt.width, 258 | 'height':opt.height, 259 | 'background':opt.dialogBg, 260 | '-moz-border-radius':opt.borderRadius, 261 | '-webkit-border-radius':opt.borderRadius, 262 | 'border-radius':opt.borderRadius, 263 | 'padding':opt.padding, 264 | 'z-index':opt.zIndex, 265 | '-webkit-animation-duration':opt.duration/1000+'s', 266 | '-moz-animation-duration':opt.duration/1000+'s', 267 | 'animation-duration':opt.duration/1000+'s', 268 | '-webkit-transform':'translate(-50%,-50%)', 269 | '-moz-transform':'translate(-50%,-50%)', 270 | 'transform':'translate(-50%,-50%)', 271 | }).appendTo($this); 272 | _this.title_dialog = $("
").html(opt.title).css('font-size',opt.titleFontSize).appendTo(_this.dialog_div); 273 | if (opt.showCloseIcon) { 274 | _this.title_close = $("
").appendTo(_this.dialog_div); 275 | } 276 | 277 | if(!opt.isInput){ 278 | _this.discription_dialog = $("
").html(opt.discription).css('font-size',opt.discriptionFontSize).appendTo(_this.dialog_div); 279 | }else{ 280 | _this.discription_dialog = $("
").css({ 281 | 'text-indent':0, 282 | }).appendTo(_this.dialog_div); 283 | _this.input_dialog = $("").appendTo(_this.discription_dialog); 284 | } 285 | var buttonsHeight = opt.buttonsSameWidth ? opt.buttonsHeight : 'auto'; 286 | var buttonsPadding = opt.buttonsSameWidth ? '0' : opt.buttonsPadding; 287 | var buttonsSameWidthClass = opt.buttonsSameWidth ? 'samewidth' : ''; 288 | _this.dialog_divOperation = $("
").appendTo(_this.dialog_div); 289 | if(!(opt.buttons.length === 2)){ 290 | _this.firstBtn = $("").html(opt.buttons[0].name).attr({'data-name':opt.buttons[0].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 291 | }else{ 292 | _this.firstBtn = $("").html(opt.buttons[0].name).attr({'data-name':opt.buttons[0].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 293 | _this.secondBtn = $("").html(opt.buttons[1].name).attr({'data-name':opt.buttons[1].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 294 | } 295 | 296 | // setTimeout(function(){ 297 | // _this.dialog_div.css({ 298 | // 'visibility':'visible' 299 | // }).addClass("animated "+opt.animateIn+""); 300 | // },100); 301 | 302 | //是否显示boxshadow 303 | _isBoxShadow(); 304 | } 305 | 306 | //ie浏览器的初始化 307 | var _initIE = function(){ 308 | 309 | showMask({ 310 | ele:$this, 311 | stopPropagation:'aaa', 312 | preventDefault:'click', 313 | background:opt.maskBg, 314 | zIndex:opt.zIndex - 1, 315 | }); 316 | 317 | _isScroll(); 318 | // 判断按钮是否超出两个 319 | _overflowBtn(); 320 | 321 | _this.dialog_div = $("
").css({ 322 | 'visibility':'hidden', 323 | 'width':opt.width, 324 | 'height':opt.height, 325 | 'background':opt.dialogBg, 326 | '-moz-border-radius':opt.borderRadius, 327 | '-webkit-border-radius':opt.borderRadius, 328 | 'border-radius':opt.borderRadius, 329 | 'padding':opt.padding, 330 | 'z-index':opt.zIndex, 331 | '-webkit-animation-duration':opt.duration/1000+'s', 332 | '-moz-animation-duration':opt.duration/1000+'s', 333 | 'animation-duration':opt.duration/1000+'s', 334 | '-webkit-transform':'translate(-50%,-50%)', 335 | '-moz-transform':'translate(-50%,-50%)', 336 | 'transform':'translate(-50%,-50%)', 337 | }).appendTo($this); 338 | 339 | _this.title_dialog = $("
").html(opt.title).css('font-size',opt.titleFontSize).appendTo(_this.dialog_div); 340 | 341 | if (opt.showCloseIcon) { 342 | _this.title_close = $("
").appendTo(_this.dialog_div); 343 | } 344 | 345 | if(!opt.isInput){ 346 | _this.discription_dialog = $("
").html(opt.discription).css('font-size',opt.discriptionFontSize).appendTo(_this.dialog_div); 347 | }else{ 348 | _this.discription_dialog = $("
").css({ 349 | 'text-indent':0, 350 | }).appendTo(_this.dialog_div); 351 | _this.input_dialog = $("").appendTo(_this.discription_dialog); 352 | } 353 | 354 | var buttonsHeight = opt.buttonsSameWidth ? opt.buttonsHeight : 'auto'; 355 | var buttonsPadding = opt.buttonsSameWidth ? '0' : opt.buttonsPadding; 356 | var buttonsSameWidthClass = opt.buttonsSameWidth ? 'samewidth' : ''; 357 | 358 | _this.dialog_divOperation = $("
").appendTo(_this.dialog_div); 359 | 360 | if(!(opt.buttons.length === 2)){ 361 | _this.firstBtn = $("").html(opt.buttons[0].name).attr({'data-name':opt.buttons[0].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 362 | }else{ 363 | _this.firstBtn = $("").html(opt.buttons[0].name).attr({'data-name':opt.buttons[0].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 364 | _this.secondBtn = $("").html(opt.buttons[1].name).attr({'data-name':opt.buttons[1].name}).css({'padding':buttonsPadding,'font-size':opt.buttonsFontSize,'height':buttonsHeight,'line-height':buttonsHeight+'px'}).appendTo(_this.dialog_divOperation); 365 | } 366 | 367 | setTimeout(function(){ 368 | _this.dialog_div.css({ 369 | 'visibility':'visible' 370 | }).addClass("animated "+opt.animateIn+""); 371 | },100); 372 | 373 | //是否显示boxshadow 374 | _isBoxShadow(); 375 | } 376 | 377 | if(isIE()){ 378 | _initIE(); 379 | }else{ 380 | _init(); 381 | } 382 | 383 | if(opt.showCloseIcon){ 384 | _this.title_close.on('click',function(){ 385 | if(!isLowerIe9()){ 386 | _this.dialog_div.addClass(opt.animateOut).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 387 | _this.dialog_div.remove(); 388 | }); 389 | 390 | $('.cpt-dw-dialog-mask').addClass("fadeOut").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 391 | $('.cpt-dw-dialog-mask').remove(); 392 | 393 | //可滚动 394 | $('body,html').css({"min-height":0,overflow:'auto'}); 395 | $(document.body).css({ 396 | 'border-right':'none', 397 | }) 398 | }); 399 | }else{ 400 | _this.dialog_div.remove(); 401 | $('.cpt-dw-dialog-mask').remove(); 402 | //可滚动 403 | $('body,html').css({"min-height":0,overflow:'auto'}); 404 | $(document.body).css({ 405 | 'border-right':'none', 406 | }); 407 | } 408 | }); 409 | } 410 | 411 | // 点击的回调 412 | _this.dialog_divOperation.children().on('click',function(e){ 413 | var name = $(this).attr('data-name'); 414 | //获取点击的索引 415 | // _this.bottonIndex(name); 416 | _btnIndex(name); 417 | 418 | var inputstatus = _this.input_dialog? 1:0; 419 | var inputvalue = inputstatus? _this.input_dialog.val():''; 420 | 421 | // 设置返回值 422 | var ret = { 423 | index:btnIndex, 424 | input:{ 425 | status:inputstatus, 426 | value:inputvalue, 427 | } 428 | }; 429 | 430 | //未写回调函数则不会有效果 431 | if(typeof(callBack) === 'function'){ 432 | //执行回调函数 433 | callBack(ret); 434 | } 435 | 436 | 437 | if(!isLowerIe9()){ 438 | _this.dialog_div.addClass(opt.animateOut).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 439 | _this.dialog_div.remove(); 440 | }); 441 | 442 | $('.cpt-dw-dialog-mask').addClass("fadeOut").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){ 443 | $('.cpt-dw-dialog-mask').remove(); 444 | 445 | //可滚动 446 | $('body,html').css({"min-height":0,overflow:'auto'}); 447 | $(document.body).css({ 448 | 'border-right':'none', 449 | }) 450 | }); 451 | }else{ 452 | _this.dialog_div.remove(); 453 | $('.cpt-dw-dialog-mask').remove(); 454 | //可滚动 455 | $('body,html').css({"min-height":0,overflow:'auto'}); 456 | $(document.body).css({ 457 | 'border-right':'none', 458 | }); 459 | } 460 | }); 461 | 462 | return _this; 463 | }; 464 | 465 | })(jQuery); -------------------------------------------------------------------------------- /css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -http://daneden.me/animate 5 | * Version - 3.5.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2017 Daniel Eden 9 | */ 10 | 11 | /*这是关于position absolute或者fixed改版的animate */ 12 | /*是由于水平居中translate无法使用*/ 13 | 14 | .animated { 15 | animation-duration: 0.5s; 16 | animation-fill-mode: both; 17 | } 18 | 19 | .animated.infinite { 20 | animation-iteration-count: infinite; 21 | } 22 | 23 | .animated.hinge-hastrans { 24 | animation-duration: 2s; 25 | } 26 | 27 | .animated.flipOutX-hastrans, 28 | .animated.flipOutY-hastrans, 29 | .animated.bounceIn-hastrans, 30 | .animated.bounceOut-hastrans { 31 | animation-duration: .75s; 32 | } 33 | 34 | @keyframes bounce-hastrans { 35 | from, 20%, 53%, 80%, to { 36 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 37 | transform: translate(-50%,0); 38 | transform: translate3d(-50%,0,0); 39 | } 40 | 41 | 40%, 43% { 42 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 43 | transform: translate(-50%, -67%); 44 | transform: translate3d(-50%, -67%, 0); 45 | } 46 | 47 | 70% { 48 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 49 | transform: translate(-50%, -58%); 50 | transform: translate3d(-50%, -58%, 0); 51 | } 52 | 53 | 90% { 54 | transform: translate(-50%,-52%); 55 | transform: translate3d(-50%,-52%,0); 56 | } 57 | 58 | 100%{ 59 | transform: translate(-50%,-50%); 60 | transform: translate3d(-50%,-50%,0); 61 | } 62 | } 63 | 64 | .bounce-hastrans { 65 | animation-name: bounce-hastrans; 66 | transform-origin: center bottom; 67 | } 68 | 69 | @keyframes flash-hastrans { 70 | from, 50%, to { 71 | opacity: 1; 72 | } 73 | 74 | 25%, 75% { 75 | opacity: 0; 76 | } 77 | } 78 | 79 | .flash-hastrans { 80 | animation-name: flash-hastrans; 81 | } 82 | 83 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 84 | 85 | @keyframes pulse-hastrans { 86 | from { 87 | transform: scale3d(1, 1, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 88 | } 89 | 90 | 50% { 91 | transform: scale3d(1.05, 1.05, 1.05) translate(-50%, -50%) translate3d(-50%, -50%, 0); 92 | } 93 | 94 | to { 95 | transform: scale3d(1, 1, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 96 | } 97 | } 98 | 99 | .pulse-hastrans { 100 | animation-name: pulse-hastrans; 101 | transform-origin: 0 0; 102 | } 103 | 104 | @keyframes rubberBand-hastrans { 105 | from { 106 | transform: scale3d(1, 1, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 107 | } 108 | 109 | 30% { 110 | transform: scale3d(1.25, 0.75, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 111 | } 112 | 113 | 40% { 114 | transform: scale3d(0.75, 1.25, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 115 | } 116 | 117 | 50% { 118 | transform: scale3d(1.15, 0.85, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 119 | } 120 | 121 | 65% { 122 | transform: scale3d(.95, 1.05, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 123 | } 124 | 125 | 75% { 126 | transform: scale3d(1.05, .95, 1) translate(-50%, -50%) translate3d(-50%, -50%, 0); 127 | } 128 | 129 | to { 130 | transform: scale3d(1, 1, 1 ) translate(-50%, -50%) translate3d(-50%, -50%, 0); 131 | } 132 | } 133 | 134 | .rubberBand-hastrans { 135 | animation-name: rubberBand-hastrans; 136 | transform-origin: 0 0; 137 | } 138 | 139 | @keyframes shake-hastrans { 140 | from, to { 141 | transform: translate3d(-50%, -50%, 0); 142 | } 143 | 144 | 10%, 30%, 50%, 70%, 90% { 145 | transform: translate3d(-54px, -50%, 0); 146 | } 147 | 148 | 20%, 40%, 60%, 80% { 149 | transform: translate3d(-46%, -50%, 0); 150 | } 151 | 152 | 100%{ 153 | transform: translate3d(-50%, -50%, 0); 154 | } 155 | } 156 | 157 | .shake-hastrans { 158 | animation-name: shake-hastrans; 159 | } 160 | 161 | @keyframes headShake-hastrans { 162 | 0% { 163 | transform: translate3d(-50%,-50%,0); 164 | } 165 | 166 | 6.5% { 167 | transform: rotateY(-9deg) translate3d(-53%,-50%,0); 168 | } 169 | 170 | 18.5% { 171 | transform: rotateY(7deg) translate3d(-47.5%,-50%,0); 172 | } 173 | 174 | 31.5% { 175 | transform: rotateY(-5deg) translate3d(-51.5%,-50%,0); 176 | } 177 | 178 | 43.5% { 179 | transform: rotateY(3deg) translate3d(-49%,-50%,0); 180 | } 181 | 182 | 50% { 183 | transform: translate3d(-50%,-50%,0); 184 | } 185 | } 186 | 187 | .headShake-hastrans { 188 | animation-timing-function: ease-in-out; 189 | animation-name: headShake-hastrans; 190 | } 191 | 192 | @keyframes swing-hastrans { 193 | 20% { 194 | transform: rotate3d(0, 0, 1, 15deg) translate3d(-50%,-50%,0); 195 | } 196 | 197 | 40% { 198 | transform: rotate3d(0, 0, 1, -10deg) translate3d(-50%,-50%,0); 199 | } 200 | 201 | 60% { 202 | transform: rotate3d(0, 0, 1, 5deg) translate3d(-50%,-50%,0); 203 | } 204 | 205 | 80% { 206 | transform: rotate3d(0, 0, 1, -5deg) translate3d(-50%,-50%,0); 207 | } 208 | 209 | to { 210 | transform: rotate3d(0, 0, 1, 0deg) translate3d(-50%,-50%,0); 211 | } 212 | } 213 | 214 | .swing-hastrans { 215 | transform-origin: top center; 216 | animation-name: swing-hastrans; 217 | transform-origin: 0 0 ; 218 | } 219 | 220 | @keyframes tada-hastrans { 221 | from { 222 | transform: scale3d(1, 1, 1) translate3d(-50%,-50%,0); 223 | } 224 | 225 | 10%, 20% { 226 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) translate3d(-50%,-50%,0); 227 | } 228 | 229 | 30%, 50%, 70%, 90% { 230 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) translate3d(-50%,-50%,0); 231 | } 232 | 233 | 40%, 60%, 80% { 234 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) translate3d(-50%,-50%,0); 235 | } 236 | 237 | to { 238 | transform: scale3d(1, 1, 1) translate3d(-50%,-50%,0); 239 | } 240 | } 241 | 242 | .tada-hastrans { 243 | animation-name: tada-hastrans; 244 | transform-origin: 0 0 ; 245 | } 246 | 247 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 248 | 249 | @keyframes wobble-hastrans { 250 | from { 251 | transform: none; 252 | } 253 | 254 | 15% { 255 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) translate3d(-50%,-50%,0); 256 | } 257 | 258 | 30% { 259 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) translate3d(-50%,-50%,0); 260 | } 261 | 262 | 45% { 263 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) translate3d(-50%,-50%,0); 264 | } 265 | 266 | 60% { 267 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) translate3d(-50%,-50%,0); 268 | } 269 | 270 | 75% { 271 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) translate3d(-50%,-50%,0); 272 | } 273 | 274 | to { 275 | transform: none; 276 | transform:translate3d(-50%,-50%,0); 277 | } 278 | } 279 | 280 | .wobble-hastrans { 281 | animation-name: wobble-hastrans; 282 | } 283 | 284 | @keyframes jello-hastrans { 285 | from, 11.1%, to { 286 | transform: none; 287 | transform:translate3d(-50%,-50%,0); 288 | } 289 | 290 | 22.2% { 291 | transform: skewX(-12.5deg) skewY(-12.5deg) translate3d(-50%,-50%,0); 292 | } 293 | 294 | 33.3% { 295 | transform: skewX(6.25deg) skewY(6.25deg) translate3d(-50%,-50%,0); 296 | } 297 | 298 | 44.4% { 299 | transform: skewX(-3.125deg) skewY(-3.125deg) translate3d(-50%,-50%,0); 300 | } 301 | 302 | 55.5% { 303 | transform: skewX(1.5625deg) skewY(1.5625deg) translate3d(-50%,-50%,0); 304 | } 305 | 306 | 66.6% { 307 | transform: skewX(-0.78125deg) skewY(-0.78125deg) translate3d(-50%,-50%,0); 308 | } 309 | 310 | 77.7% { 311 | transform: skewX(0.390625deg) skewY(0.390625deg) translate3d(-50%,-50%,0); 312 | } 313 | 314 | 88.8% { 315 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg) translate3d(-50%,-50%,0); 316 | } 317 | } 318 | 319 | .jello-hastrans { 320 | animation-name: jello-hastrans; 321 | transform-origin: center; 322 | } 323 | 324 | @keyframes bounceIn-hastrans { 325 | from, 20%, 40%, 60%, 80%, to { 326 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 327 | } 328 | 329 | 0% { 330 | opacity: 0; 331 | transform: scale3d(.3, .3, .3) translate3d(-50%,-50%,0); 332 | } 333 | 334 | 20% { 335 | transform: scale3d(1.1, 1.1, 1.1) translate3d(-50%,-50%,0); 336 | } 337 | 338 | 40% { 339 | transform: scale3d(.9, .9, .9) translate3d(-50%,-50%,0); 340 | } 341 | 342 | 60% { 343 | opacity: 1; 344 | transform: scale3d(1.03, 1.03, 1.03) translate3d(-50%,-50%,0); 345 | } 346 | 347 | 80% { 348 | transform: scale3d(.97, .97, .97) translate3d(-50%,-50%,0); 349 | } 350 | 351 | to { 352 | opacity: 1; 353 | transform: scale3d(1, 1, 1) translate3d(-50%,-50%,0); 354 | } 355 | } 356 | 357 | .bounceIn-hastrans { 358 | animation-name: bounceIn-hastrans; 359 | transform-origin:0 0; 360 | } 361 | 362 | @keyframes bounceInDown-hastrans { 363 | from, 60%, 75%, 90%, to { 364 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 365 | } 366 | 367 | 0% { 368 | opacity: 0; 369 | transform: translate3d(-50%, -3000px, 0); 370 | } 371 | 372 | 60% { 373 | opacity: 1; 374 | transform: translate3d(-50%, -30%, 0); 375 | } 376 | 377 | 75% { 378 | transform: translate3d(-50%, -70%, 0); 379 | } 380 | 381 | 90% { 382 | transform: translate3d(-50%, -54%, 0); 383 | } 384 | 385 | to { 386 | transform: none; 387 | transform: translate3d(-50%, -50%, 0); 388 | } 389 | } 390 | 391 | .bounceInDown-hastrans { 392 | animation-name: bounceInDown-hastrans; 393 | } 394 | 395 | @keyframes bounceInLeft-hastrans { 396 | from, 60%, 75%, 90%, to { 397 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 398 | } 399 | 400 | 0% { 401 | opacity: 0; 402 | transform: translate3d(-3000px, -50%, 0); 403 | } 404 | 405 | 60% { 406 | opacity: 1; 407 | transform: translate3d(-30%, -50%, 0); 408 | } 409 | 410 | 75% { 411 | transform: translate3d(-70%, -50%, 0); 412 | } 413 | 414 | 90% { 415 | transform: translate3d(-54%, -50%, 0); 416 | } 417 | 418 | to { 419 | transform: none; 420 | transform: translate3d(-50%, -50%, 0); 421 | } 422 | } 423 | 424 | .bounceInLeft-hastrans { 425 | animation-name: bounceInLeft-hastrans; 426 | } 427 | 428 | @keyframes bounceInRight-hastrans { 429 | from, 60%, 75%, 90%, to { 430 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 431 | } 432 | 433 | from { 434 | opacity: 0; 435 | transform: translate3d(3000px, -50%, 0); 436 | } 437 | 438 | 60% { 439 | opacity: 1; 440 | transform: translate3d(-70%, -50%, 0); 441 | } 442 | 443 | 75% { 444 | transform: translate3d(-30%, -50%, 0); 445 | } 446 | 447 | 90% { 448 | transform: translate3d(-46%, -50%, 0); 449 | } 450 | 451 | to { 452 | transform: none; 453 | transform: translate3d(-50%, -50%, 0); 454 | } 455 | } 456 | 457 | .bounceInRight-hastrans { 458 | animation-name: bounceInRight-hastrans; 459 | } 460 | 461 | @keyframes bounceInUp-hastrans { 462 | from, 60%, 75%, 90%, to { 463 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 464 | } 465 | 466 | from { 467 | opacity: 0; 468 | transform: translate3d(-50%, 3000px, 0); 469 | } 470 | 471 | 60% { 472 | opacity: 1; 473 | transform: translate3d(-50%, -70px, 0); 474 | } 475 | 476 | 75% { 477 | transform: translate3d(-50%, -30px, 0); 478 | } 479 | 480 | 90% { 481 | transform: translate3d(-50%, -46px, 0); 482 | } 483 | 484 | to { 485 | transform: translate3d(-50%, -50%, 0); 486 | } 487 | } 488 | 489 | .bounceInUp-hastrans { 490 | animation-name: bounceInUp-hastrans; 491 | } 492 | 493 | @keyframes bounceOut-hastrans { 494 | 20% { 495 | transform: scale3d(.9, .9, .9) translate3d(-50%,-50%,0); 496 | } 497 | 498 | 50%, 55% { 499 | opacity: 1; 500 | transform: scale3d(1.1, 1.1, 1.1) translate3d(-50%,-50%,0); 501 | } 502 | 503 | to { 504 | opacity: 0; 505 | transform: scale3d(.3, .3, .3) translate3d(-50%,-50%,0); 506 | } 507 | } 508 | 509 | .bounceOut-hastrans { 510 | animation-name: bounceOut-hastrans; 511 | transform-origin:0 0; 512 | } 513 | 514 | @keyframes bounceOutDown-hastrans { 515 | 20% { 516 | transform: translate3d(-50%, -40%, 0); 517 | } 518 | 519 | 40%, 45% { 520 | opacity: 1; 521 | transform: translate3d(-50%, -60%, 0); 522 | } 523 | 524 | to { 525 | opacity: 0; 526 | transform: translate3d(-50%, 3000px, 0); 527 | } 528 | } 529 | 530 | .bounceOutDown-hastrans { 531 | animation-name: bounceOutDown-hastrans; 532 | } 533 | 534 | @keyframes bounceOutLeft-hastrans { 535 | 20% { 536 | opacity: 1; 537 | transform: translate3d(-40%, -50%, 0); 538 | } 539 | 540 | to { 541 | opacity: 0; 542 | transform: translate3d(-2000px, -50%, 0); 543 | } 544 | } 545 | 546 | .bounceOutLeft-hastrans { 547 | animation-name: bounceOutLeft-hastrans; 548 | } 549 | 550 | @keyframes bounceOutRight-hastrans { 551 | 20% { 552 | opacity: 1; 553 | transform: translate3d(-60%, -50%, 0); 554 | } 555 | 556 | to { 557 | opacity: 0; 558 | transform: translate3d(2000px, -50%, 0); 559 | } 560 | } 561 | 562 | .bounceOutRight-hastrans { 563 | animation-name: bounceOutRight-hastrans; 564 | } 565 | 566 | @keyframes bounceOutUp-hastrans { 567 | 20% { 568 | transform: translate3d(-50%, -60%, 0); 569 | } 570 | 571 | 40%, 45% { 572 | opacity: 1; 573 | transform: translate3d(-50%, -40%, 0); 574 | } 575 | 576 | to { 577 | opacity: 0; 578 | transform: translate3d(-50%, -2000px, 0); 579 | } 580 | } 581 | 582 | .bounceOutUp-hastrans { 583 | animation-name: bounceOutUp-hastrans; 584 | } 585 | 586 | @keyframes fadeIn-hastrans { 587 | from { 588 | opacity: 0; 589 | transform: translate(-50%, -50%); 590 | transform: translate3d(-50%, -50%, 0); 591 | } 592 | 593 | to { 594 | opacity: 1; 595 | transform: translate(-50%, -50%); 596 | transform: translate3d(-50%, -50%, 0); 597 | } 598 | } 599 | 600 | .fadeIn-hastrans { 601 | animation-name: fadeIn-hastrans; 602 | } 603 | 604 | @keyframes fadeInDown-hastrans { 605 | from { 606 | opacity: 0; 607 | transform: translate3d(-50%, 100%, 0); 608 | } 609 | 610 | to { 611 | opacity: 1; 612 | transform: none; 613 | transform: translate3d(-50%, -50%, 0); 614 | } 615 | } 616 | 617 | .fadeInDown-hastrans { 618 | animation-name: fadeInDown-hastrans; 619 | } 620 | 621 | @keyframes fadeInDownBig-hastrans { 622 | from { 623 | opacity: 0; 624 | transform: translate3d(-50%, -2000px, 0); 625 | } 626 | 627 | to { 628 | opacity: 1; 629 | transform: none; 630 | transform: translate3d(-50%, -50%, 0); 631 | } 632 | } 633 | 634 | .fadeInDownBig-hastrans { 635 | animation-name: fadeInDownBig-hastrans; 636 | } 637 | 638 | @keyframes fadeInLeft-hastrans { 639 | from { 640 | opacity: 0; 641 | transform: translate3d(-100%, -50%, 0); 642 | } 643 | 644 | to { 645 | opacity: 1; 646 | transform: none; 647 | transform: translate3d(-50%, -50%, 0); 648 | } 649 | } 650 | 651 | .fadeInLeft-hastrans { 652 | animation-name: fadeInLeft-hastrans; 653 | } 654 | 655 | @keyframes fadeInLeftBig-hastrans { 656 | from { 657 | opacity: 0; 658 | transform: translate3d(-2000px, -50%, 0); 659 | } 660 | 661 | to { 662 | opacity: 1; 663 | transform: none; 664 | transform: translate3d(-50%, -50%, 0); 665 | } 666 | } 667 | 668 | .fadeInLeftBig-hastrans { 669 | animation-name: fadeInLeftBig-hastrans; 670 | } 671 | 672 | @keyframes fadeInRight-hastrans { 673 | from { 674 | opacity: 0; 675 | transform: translate3d(100%, -50%, 0); 676 | } 677 | 678 | to { 679 | opacity: 1; 680 | transform: none; 681 | transform: translate3d(-50%, -50%, 0); 682 | } 683 | } 684 | 685 | .fadeInRight-hastrans { 686 | animation-name: fadeInRight-hastrans; 687 | } 688 | 689 | @keyframes fadeInRightBig-hastrans { 690 | from { 691 | opacity: 0; 692 | transform: translate3d(2000px, -50%, 0); 693 | } 694 | 695 | to { 696 | opacity: 1; 697 | transform: none; 698 | transform: translate3d(-50%, -50%, 0); 699 | } 700 | } 701 | 702 | .fadeInRightBig-hastrans { 703 | animation-name: fadeInRightBig-hastrans; 704 | } 705 | 706 | @keyframes fadeInUp-hastrans { 707 | from { 708 | opacity: 0; 709 | transform: translate3d(-50%, 100%, 0); 710 | } 711 | 712 | to { 713 | opacity: 1; 714 | transform: none; 715 | transform: translate3d(-50%, -50%, 0); 716 | } 717 | } 718 | 719 | .fadeInUp-hastrans { 720 | animation-name: fadeInUp-hastrans; 721 | } 722 | 723 | @keyframes fadeInUpBig-hastrans { 724 | from { 725 | opacity: 0; 726 | transform: translate3d(-50%, 2000px, 0); 727 | } 728 | 729 | to { 730 | opacity: 1; 731 | transform: none; 732 | transform: translate3d(-50%, -50%, 0); 733 | } 734 | } 735 | 736 | .fadeInUpBig-hastrans { 737 | animation-name: fadeInUpBig-hastrans; 738 | } 739 | 740 | @keyframes fadeOut-hastrans { 741 | from { 742 | opacity: 1; 743 | transform: translate(-50%, -50%); 744 | transform: translate3d(-50%, -50%, 0); 745 | } 746 | 747 | to { 748 | opacity: 0; 749 | transform: translate(-50%, -50%); 750 | transform: translate3d(-50%, -50%, 0); 751 | } 752 | } 753 | 754 | .fadeOut-hastrans { 755 | animation-name: fadeOut-hastrans; 756 | } 757 | 758 | @keyframes fadeOutDown-hastrans { 759 | from { 760 | opacity: 1; 761 | transform: translate3d(-50%, -50%, 0); 762 | } 763 | 764 | to { 765 | opacity: 0; 766 | transform: translate3d(-50%, 100%, 0); 767 | } 768 | } 769 | 770 | .fadeOutDown-hastrans { 771 | animation-name: fadeOutDown-hastrans; 772 | } 773 | 774 | @keyframes fadeOutDownBig-hastrans { 775 | from { 776 | opacity: 1; 777 | transform: translate3d(-50%, -50%, 0); 778 | } 779 | 780 | to { 781 | opacity: 0; 782 | transform: translate3d(-50%, 2000px, 0); 783 | } 784 | } 785 | 786 | .fadeOutDownBig-hastrans { 787 | animation-name: fadeOutDownBig-hastrans; 788 | } 789 | 790 | @keyframes fadeOutLeft-hastrans { 791 | from { 792 | opacity: 1; 793 | } 794 | 795 | to { 796 | opacity: 0; 797 | transform: translate3d(-100%, -50%, 0); 798 | } 799 | } 800 | 801 | .fadeOutLeft-hastrans { 802 | animation-name: fadeOutLeft-hastrans; 803 | } 804 | 805 | @keyframes fadeOutLeftBig-hastrans { 806 | from { 807 | opacity: 1; 808 | } 809 | 810 | to { 811 | opacity: 0; 812 | transform: translate3d(-2000px, -50%, 0); 813 | } 814 | } 815 | 816 | .fadeOutLeftBig-hastrans { 817 | animation-name: fadeOutLeftBig-hastrans; 818 | } 819 | 820 | @keyframes fadeOutRight-hastrans { 821 | from { 822 | opacity: 1; 823 | } 824 | 825 | to { 826 | opacity: 0; 827 | transform: translate3d(100%, -50%, 0); 828 | } 829 | } 830 | 831 | .fadeOutRight-hastrans { 832 | animation-name: fadeOutRight-hastrans; 833 | } 834 | 835 | @keyframes fadeOutRightBig-hastrans { 836 | from { 837 | opacity: 1; 838 | } 839 | 840 | to { 841 | opacity: 0; 842 | transform: translate3d(2000px, -50%, 0); 843 | } 844 | } 845 | 846 | .fadeOutRightBig-hastrans { 847 | animation-name: fadeOutRightBig-hastrans; 848 | } 849 | 850 | @keyframes fadeOutUp-hastrans { 851 | from { 852 | opacity: 1; 853 | } 854 | 855 | to { 856 | opacity: 0; 857 | transform: translate3d(-50%, -100%, 0); 858 | } 859 | } 860 | 861 | .fadeOutUp-hastrans { 862 | animation-name: fadeOutUp-hastrans; 863 | } 864 | 865 | @keyframes fadeOutUpBig-hastrans { 866 | from { 867 | opacity: 1; 868 | } 869 | 870 | to { 871 | opacity: 0; 872 | transform: translate3d(-50%, -2000px, 0); 873 | } 874 | } 875 | 876 | .fadeOutUpBig-hastrans { 877 | animation-name: fadeOutUpBig-hastrans; 878 | } 879 | 880 | @keyframes flip-hastrans { 881 | from { 882 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg) translate3d(-50%, -50%, 0); 883 | animation-timing-function: ease-out; 884 | } 885 | 886 | 40% { 887 | transform: perspective(400px) translate3d(-50%, -50%, 150px) rotate3d(0, 1, 0, -190deg); 888 | animation-timing-function: ease-out; 889 | } 890 | 891 | 50% { 892 | transform: perspective(400px) translate3d(-50%, -50%, 150px) rotate3d(0, 1, 0, -170deg); 893 | animation-timing-function: ease-in; 894 | } 895 | 896 | 80% { 897 | transform: perspective(400px) scale3d(.95, .95, .95) translate3d(-50%, -50%, 0); 898 | animation-timing-function: ease-in; 899 | } 900 | 901 | to { 902 | transform: perspective(400px) translate3d(-50%, -50%, 0); 903 | animation-timing-function: ease-in; 904 | } 905 | } 906 | 907 | .animated.flip-hastrans { 908 | -webkit-backface-visibility: visible; 909 | backface-visibility: visible; 910 | animation-name: flip-hastrans; 911 | } 912 | 913 | @keyframes flipInX-hastrans { 914 | from { 915 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg) translate(-50%, -50%) translate3d(-50%, -50%, 0); 916 | animation-timing-function: ease-in; 917 | opacity: 0; 918 | } 919 | 920 | 40% { 921 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg) translate(-50%, -50%) translate3d(-50%, -50%, 0); 922 | animation-timing-function: ease-in; 923 | } 924 | 925 | 60% { 926 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg) translate(-50%, -50%) translate3d(-50%, -50%, 0); 927 | opacity: 1; 928 | } 929 | 930 | 80% { 931 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg) translate(-50%, -50%) translate3d(-50%, -50%, 0); 932 | } 933 | 934 | to { 935 | transform: perspective(400px) translate(-50%, -50%) translate3d(-50%, -50%, 0); 936 | } 937 | } 938 | 939 | .flipInX-hastrans { 940 | -webkit-backface-visibility: visible !important; 941 | backface-visibility: visible !important; 942 | animation-name: flipInX-hastrans; 943 | } 944 | 945 | @keyframes flipInY-hastrans { 946 | from { 947 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translate3d(-50%, -50%, 0); 948 | animation-timing-function: ease-in; 949 | opacity: 0; 950 | } 951 | 952 | 40% { 953 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg) translate3d(-50%, -50%, 0); 954 | animation-timing-function: ease-in; 955 | } 956 | 957 | 60% { 958 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg) translate3d(-50%, -50%, 0); 959 | opacity: 1; 960 | } 961 | 962 | 80% { 963 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg) translate3d(-50%, -50%, 0); 964 | } 965 | 966 | to { 967 | transform: perspective(400px) translate3d(-50%, -50%, 0); 968 | } 969 | } 970 | 971 | .flipInY-hastrans { 972 | -webkit-backface-visibility: visible !important; 973 | backface-visibility: visible !important; 974 | animation-name: flipInY-hastrans; 975 | } 976 | 977 | @keyframes flipOutX-hastrans { 978 | from { 979 | transform: perspective(400px) translate3d(-50%, -50%, 0); 980 | } 981 | 982 | 30% { 983 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg) translate3d(-50%, -50%, 0); 984 | opacity: 1; 985 | } 986 | 987 | to { 988 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg) translate3d(-50%, -50%, 0); 989 | opacity: 0; 990 | } 991 | } 992 | 993 | .flipOutX-hastrans { 994 | animation-name: flipOutX-hastrans; 995 | -webkit-backface-visibility: visible !important; 996 | backface-visibility: visible !important; 997 | } 998 | 999 | @keyframes flipOutY-hastrans { 1000 | from { 1001 | transform: perspective(400px) translate3d(-50%, -50%, 0); 1002 | } 1003 | 1004 | 30% { 1005 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg) translate3d(-50%, -50%, 0); 1006 | opacity: 1; 1007 | } 1008 | 1009 | to { 1010 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translate3d(-50%, -50%, 0); 1011 | opacity: 0; 1012 | } 1013 | } 1014 | 1015 | .flipOutY-hastrans { 1016 | -webkit-backface-visibility: visible !important; 1017 | backface-visibility: visible !important; 1018 | animation-name: flipOutY-hastrans; 1019 | } 1020 | 1021 | @keyframes lightSpeedIn-hastrans { 1022 | from { 1023 | transform: translate3d(100%, -50%, 0) skewX(-30deg); 1024 | opacity: 0; 1025 | } 1026 | 1027 | 60% { 1028 | transform: skewX(20deg) translate3d(10%, -50%, 0); 1029 | opacity: 1; 1030 | } 1031 | 1032 | 80% { 1033 | transform: skewX(-5deg) translate3d(-30%, -50%, 0); 1034 | opacity: 1; 1035 | } 1036 | 1037 | to { 1038 | transform: none; 1039 | transform:translate3d(-50%, -50%, 0); 1040 | opacity: 1; 1041 | } 1042 | } 1043 | 1044 | .lightSpeedIn-hastrans { 1045 | animation-name: lightSpeedIn-hastrans; 1046 | animation-timing-function: ease-out; 1047 | } 1048 | 1049 | @keyframes lightSpeedOut-hastrans { 1050 | from { 1051 | transform:translate3d(-50%, -50%, 0); 1052 | opacity: 1; 1053 | } 1054 | 1055 | to { 1056 | transform: translate3d(100%, -50%, 0) skewX(30deg); 1057 | opacity: 0; 1058 | } 1059 | } 1060 | 1061 | .lightSpeedOut-hastrans { 1062 | animation-name: lightSpeedOut-hastrans; 1063 | animation-timing-function: ease-in; 1064 | } 1065 | 1066 | @keyframes rotateIn-hastrans { 1067 | from { 1068 | transform-origin: 50% 0; 1069 | transform: rotate3d(0, 0, 1, -200deg) translate3d(-50%, -50%, 0); 1070 | opacity: 0; 1071 | } 1072 | 1073 | to { 1074 | transform-origin: 50% 0; 1075 | transform: none; 1076 | transform:translate3d(-50%, -50%, 0); 1077 | opacity: 1; 1078 | } 1079 | } 1080 | 1081 | .rotateIn-hastrans { 1082 | animation-name: rotateIn-hastrans; 1083 | } 1084 | 1085 | @keyframes rotateInDownLeft-hastrans { 1086 | from { 1087 | transform-origin: left bottom; 1088 | transform: rotate3d(0, 0, 1, -45deg) translate3d(-50%, -50%, 0); 1089 | opacity: 0; 1090 | } 1091 | 1092 | to { 1093 | transform-origin: left bottom; 1094 | transform: none; 1095 | transform:translate3d(-50%, -50%, 0); 1096 | opacity: 1; 1097 | } 1098 | } 1099 | 1100 | .rotateInDownLeft-hastrans { 1101 | animation-name: rotateInDownLeft-hastrans; 1102 | } 1103 | 1104 | @keyframes rotateInDownRight-hastrans { 1105 | from { 1106 | transform-origin: right bottom; 1107 | transform: rotate3d(0, 0, 1, 45deg) translate3d(-50%, -50%, 0); 1108 | opacity: 0; 1109 | } 1110 | 1111 | to { 1112 | transform-origin: right bottom; 1113 | transform: none; 1114 | transform:translate3d(-50%, -50%, 0); 1115 | opacity: 1; 1116 | } 1117 | } 1118 | 1119 | .rotateInDownRight-hastrans { 1120 | animation-name: rotateInDownRight-hastrans; 1121 | } 1122 | 1123 | @keyframes rotateInUpLeft-hastrans { 1124 | from { 1125 | transform-origin: left bottom; 1126 | transform: rotate3d(0, 0, 1, 45deg) translate3d(-50%, -50%, 0); 1127 | opacity: 0; 1128 | } 1129 | 1130 | to { 1131 | transform-origin: left bottom; 1132 | transform: none; 1133 | transform:translate3d(-50%, -50%, 0); 1134 | opacity: 1; 1135 | } 1136 | } 1137 | 1138 | .rotateInUpLeft-hastrans { 1139 | animation-name: rotateInUpLeft-hastrans; 1140 | } 1141 | 1142 | @keyframes rotateInUpRight-hastrans { 1143 | from { 1144 | transform-origin: right bottom; 1145 | transform: rotate3d(0, 0, 1, -90deg) translate3d(-50%, -50%, 0); 1146 | opacity: 0; 1147 | } 1148 | 1149 | to { 1150 | transform-origin: right bottom; 1151 | transform: none; 1152 | transform:translate3d(-50%, -50%, 0); 1153 | opacity: 1; 1154 | } 1155 | } 1156 | 1157 | .rotateInUpRight-hastrans { 1158 | animation-name: rotateInUpRight-hastrans; 1159 | } 1160 | 1161 | @keyframes rotateOut-hastrans { 1162 | from { 1163 | transform-origin: center; 1164 | opacity: 1; 1165 | } 1166 | 1167 | to { 1168 | transform-origin: center; 1169 | transform: rotate3d(0, 0, 1, 200deg); 1170 | opacity: 0; 1171 | } 1172 | } 1173 | 1174 | .rotateOut-hastrans { 1175 | animation-name: rotateOut-hastrans; 1176 | } 1177 | 1178 | @keyframes rotateOutDownLeft-hastrans { 1179 | from { 1180 | transform-origin: left bottom; 1181 | opacity: 1; 1182 | } 1183 | 1184 | to { 1185 | transform-origin: left bottom; 1186 | transform: rotate3d(0, 0, 1, 45deg); 1187 | opacity: 0; 1188 | } 1189 | } 1190 | 1191 | .rotateOutDownLeft-hastrans { 1192 | animation-name: rotateOutDownLeft-hastrans; 1193 | } 1194 | 1195 | @keyframes rotateOutDownRight-hastrans { 1196 | from { 1197 | transform-origin: right bottom; 1198 | opacity: 1; 1199 | } 1200 | 1201 | to { 1202 | transform-origin: right bottom; 1203 | transform: rotate3d(0, 0, 1, -45deg); 1204 | opacity: 0; 1205 | } 1206 | } 1207 | 1208 | .rotateOutDownRight-hastrans { 1209 | animation-name: rotateOutDownRight-hastrans; 1210 | } 1211 | 1212 | @keyframes rotateOutUpLeft-hastrans { 1213 | from { 1214 | transform-origin: left bottom; 1215 | opacity: 1; 1216 | } 1217 | 1218 | to { 1219 | transform-origin: left bottom; 1220 | transform: rotate3d(0, 0, 1, -45deg); 1221 | opacity: 0; 1222 | } 1223 | } 1224 | 1225 | .rotateOutUpLeft-hastrans { 1226 | animation-name: rotateOutUpLeft-hastrans; 1227 | } 1228 | 1229 | @keyframes rotateOutUpRight-hastrans { 1230 | from { 1231 | transform-origin: right bottom; 1232 | opacity: 1; 1233 | } 1234 | 1235 | to { 1236 | transform-origin: right bottom; 1237 | transform: rotate3d(0, 0, 1, 90deg); 1238 | opacity: 0; 1239 | } 1240 | } 1241 | 1242 | .rotateOutUpRight-hastrans { 1243 | animation-name: rotateOutUpRight-hastrans; 1244 | } 1245 | 1246 | @keyframes hinge-hastrans { 1247 | 0% { 1248 | transform-origin: top left; 1249 | animation-timing-function: ease-in-out; 1250 | } 1251 | 1252 | 20%, 60% { 1253 | transform: rotate3d(0, 0, 1, 80deg); 1254 | transform-origin: top left; 1255 | animation-timing-function: ease-in-out; 1256 | } 1257 | 1258 | 40%, 80% { 1259 | transform: rotate3d(0, 0, 1, 60deg); 1260 | transform-origin: top left; 1261 | animation-timing-function: ease-in-out; 1262 | opacity: 1; 1263 | } 1264 | 1265 | to { 1266 | transform: translate3d(0, 700px, 0); 1267 | opacity: 0; 1268 | } 1269 | } 1270 | 1271 | .hinge-hastrans { 1272 | animation-name: hinge-hastrans; 1273 | } 1274 | 1275 | @keyframes jackInTheBox-hastrans { 1276 | from { 1277 | opacity: 0; 1278 | transform: scale(0.1) rotate(30deg) translate3d(-50%, -50%, 0); 1279 | transform-origin: center bottom; 1280 | } 1281 | 1282 | 50% { 1283 | transform: rotate(-10deg) translate3d(-50%, -50%, 0); 1284 | } 1285 | 1286 | 70% { 1287 | transform: rotate(3deg) translate3d(-50%, -50%, 0); 1288 | } 1289 | 1290 | to { 1291 | opacity: 1; 1292 | transform: scale(1) translate3d(-50%, -50%, 0); 1293 | } 1294 | } 1295 | 1296 | .jackInTheBox-hastrans { 1297 | animation-name: jackInTheBox-hastrans; 1298 | transform-origin: 0 0; 1299 | } 1300 | 1301 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1302 | 1303 | @keyframes rollIn-hastrans { 1304 | from { 1305 | opacity: 0; 1306 | transform: translate3d(-150%, -50%, 0) rotate3d(0, 0, 1, -120deg); 1307 | } 1308 | 1309 | to { 1310 | opacity: 1; 1311 | transform: none translate3d(-50%, -50%, 0); 1312 | } 1313 | } 1314 | 1315 | .rollIn-hastrans { 1316 | animation-name: rollIn-hastrans; 1317 | } 1318 | 1319 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1320 | 1321 | @keyframes rollOut-hastrans { 1322 | from { 1323 | opacity: 1; 1324 | } 1325 | 1326 | to { 1327 | opacity: 0; 1328 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 1329 | } 1330 | } 1331 | 1332 | .rollOut-hastrans { 1333 | animation-name: rollOut-hastrans; 1334 | } 1335 | 1336 | @keyframes zoomIn-hastrans { 1337 | from { 1338 | opacity: 0; 1339 | /*transform: translate(-50%, -50%);*/ 1340 | } 1341 | 1342 | 50% { 1343 | opacity: 1; 1344 | transform: scale3d(.3, .3, .3); 1345 | } 1346 | 1347 | to { 1348 | opacity: 1; 1349 | /*transform: translate(-50%, -50%);*/ 1350 | } 1351 | } 1352 | 1353 | .zoomIn-hastrans { 1354 | animation-name: zoomIn-hastrans; 1355 | transform-origin: -25% -25%; 1356 | } 1357 | 1358 | @keyframes zoomInDown-hastrans { 1359 | from { 1360 | opacity: 0; 1361 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 1362 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1363 | } 1364 | 1365 | 60% { 1366 | opacity: 1; 1367 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 1368 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1369 | } 1370 | } 1371 | 1372 | .zoomInDown-hastrans { 1373 | animation-name: zoomInDown-hastrans; 1374 | transform: translate3d(-50%, -50%, 0); 1375 | } 1376 | 1377 | @keyframes zoomInLeft-hastrans { 1378 | from { 1379 | opacity: 0; 1380 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 1381 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1382 | } 1383 | 1384 | 60% { 1385 | opacity: 1; 1386 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 1387 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1388 | } 1389 | } 1390 | 1391 | .zoomInLeft-hastrans { 1392 | animation-name: zoomInLeft-hastrans; 1393 | } 1394 | 1395 | @keyframes zoomInRight-hastrans { 1396 | from { 1397 | opacity: 0; 1398 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 1399 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1400 | } 1401 | 1402 | 60% { 1403 | opacity: 1; 1404 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 1405 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1406 | } 1407 | } 1408 | 1409 | .zoomInRight-hastrans { 1410 | animation-name: zoomInRight-hastrans; 1411 | } 1412 | 1413 | @keyframes zoomInUp-hastrans { 1414 | from { 1415 | opacity: 0; 1416 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 1417 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1418 | } 1419 | 1420 | 60% { 1421 | opacity: 1; 1422 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 1423 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1424 | } 1425 | } 1426 | 1427 | .zoomInUp-hastrans { 1428 | animation-name: zoomInUp-hastrans; 1429 | } 1430 | 1431 | @keyframes zoomOut-hastrans { 1432 | from { 1433 | opacity: 1 ; 1434 | transform:translate3d(-50%, -50%, 0); 1435 | } 1436 | 1437 | 50% { 1438 | opacity: 0; 1439 | transform: scale3d(.3, .3, .3) translate3d(-50%, -50%, 0); 1440 | } 1441 | 1442 | to { 1443 | opacity: 0; 1444 | transform: translate3d(-50%, -50%, 0); 1445 | } 1446 | } 1447 | 1448 | .zoomOut-hastrans { 1449 | animation-name: zoomOut-hastrans; 1450 | transform-origin: 0 0; 1451 | } 1452 | 1453 | @keyframes zoomOutDown-hastrans { 1454 | 40% { 1455 | opacity: 1; 1456 | transform: scale3d(.475, .475, .475) translate3d(-50%, -60px, 0); 1457 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1458 | } 1459 | 1460 | to { 1461 | opacity: 0; 1462 | transform: scale3d(.1, .1, .1) translate3d(-50%, 2000px, 0); 1463 | transform-origin: center bottom; 1464 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1465 | } 1466 | } 1467 | 1468 | .zoomOutDown-hastrans { 1469 | animation-name: zoomOutDown-hastrans; 1470 | transform-origin: 0 0; 1471 | } 1472 | 1473 | @keyframes zoomOutLeft-hastrans { 1474 | 40% { 1475 | opacity: 1; 1476 | transform: scale3d(.475, .475, .475) translate3d(-50%, -50%, 0); 1477 | } 1478 | 1479 | to { 1480 | opacity: 0; 1481 | transform: scale(.1) translate3d(-2000px, -50%, 0); 1482 | transform-origin: left center; 1483 | } 1484 | } 1485 | 1486 | .zoomOutLeft-hastrans { 1487 | animation-name: zoomOutLeft-hastrans; 1488 | } 1489 | 1490 | @keyframes zoomOutRight-hastrans { 1491 | 40% { 1492 | opacity: 1; 1493 | transform: scale3d(.475, .475, .475) translate3d(-50%, -50%, 0); 1494 | } 1495 | 1496 | to { 1497 | opacity: 0; 1498 | transform: scale(.1) translate3d(2000px, -50%, 0); 1499 | transform-origin: right center; 1500 | } 1501 | } 1502 | 1503 | .zoomOutRight-hastrans { 1504 | animation-name: zoomOutRight-hastrans; 1505 | } 1506 | 1507 | @keyframes zoomOutUp-hastrans { 1508 | 40% { 1509 | opacity: 1; 1510 | transform: scale3d(.475, .475, .475) translate3d(-50%, -50%, 0); 1511 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 1512 | } 1513 | 1514 | to { 1515 | opacity: 0; 1516 | transform: scale3d(.1, .1, .1) translate3d(-50%, -2000px, 0); 1517 | transform-origin: center bottom; 1518 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 1519 | } 1520 | } 1521 | 1522 | .zoomOutUp-hastrans { 1523 | animation-name: zoomOutUp-hastrans; 1524 | } 1525 | 1526 | @keyframes slideInDown-hastrans { 1527 | from { 1528 | transform: translate3d(-50%, -100%, 0); 1529 | visibility: visible; 1530 | } 1531 | 1532 | to { 1533 | transform: translate3d(-50%, -50%, 0); 1534 | } 1535 | } 1536 | 1537 | .slideInDown-hastrans { 1538 | animation-name: slideInDown-hastrans; 1539 | } 1540 | 1541 | @keyframes slideInLeft-hastrans { 1542 | from { 1543 | transform: translate3d(-100%, -50%, 0); 1544 | visibility: visible; 1545 | } 1546 | 1547 | to { 1548 | transform: translate3d(-50%, -50%, 0); 1549 | } 1550 | } 1551 | 1552 | .slideInLeft-hastrans { 1553 | animation-name: slideInLeft-hastrans; 1554 | } 1555 | 1556 | @keyframes slideInRight-hastrans { 1557 | from { 1558 | transform: translate3d(100%, -50%, 0); 1559 | visibility: visible; 1560 | } 1561 | 1562 | to { 1563 | transform: translate3d(-50%, -50%, 0); 1564 | } 1565 | } 1566 | 1567 | .slideInRight-hastrans { 1568 | animation-name: slideInRight-hastrans; 1569 | } 1570 | 1571 | @keyframes slideInUp-hastrans { 1572 | from { 1573 | transform: translate3d(-50%, 100%, 0); 1574 | visibility: visible; 1575 | } 1576 | 1577 | to { 1578 | transform: translate3d(-50%, -50%, 0); 1579 | } 1580 | } 1581 | 1582 | .slideInUp-hastrans { 1583 | animation-name: slideInUp-hastrans; 1584 | } 1585 | 1586 | @keyframes slideOutDown-hastrans { 1587 | from { 1588 | transform: translate3d(-50%, -50%, 0); 1589 | } 1590 | 1591 | to { 1592 | visibility: hidden; 1593 | transform: translate3d(-50%, 100%, 0); 1594 | } 1595 | } 1596 | 1597 | .slideOutDown-hastrans { 1598 | animation-name: slideOutDown-hastrans; 1599 | } 1600 | 1601 | @keyframes slideOutLeft-hastrans { 1602 | from { 1603 | transform: translate3d(-50%, -50%, 0); 1604 | } 1605 | 1606 | to { 1607 | visibility: hidden; 1608 | transform: translate3d(-100%, -50%, 0); 1609 | } 1610 | } 1611 | 1612 | .slideOutLeft-hastrans { 1613 | animation-name: slideOutLeft-hastrans; 1614 | } 1615 | 1616 | @keyframes slideOutRight-hastrans { 1617 | from { 1618 | transform: translate3d(-50%, -50%, 0); 1619 | } 1620 | 1621 | to { 1622 | visibility: hidden; 1623 | transform: translate3d(100%, -50%, 0); 1624 | } 1625 | } 1626 | 1627 | .slideOutRight-hastrans { 1628 | animation-name: slideOutRight-hastrans; 1629 | } 1630 | 1631 | @keyframes slideOutUp-hastrans { 1632 | from { 1633 | transform: translate3d(-50%, -50%, 0); 1634 | } 1635 | 1636 | to { 1637 | visibility: hidden; 1638 | transform: translate3d(-50%, -100%, 0); 1639 | } 1640 | } 1641 | 1642 | .slideOutUp-hastrans { 1643 | animation-name: slideOutUp-hastrans; 1644 | } 1645 | 1646 | /***************************这是原版本***************************/ 1647 | @charset "UTF-8"; 1648 | 1649 | /*! 1650 | * animate.css -http://daneden.me/animate 1651 | * Version - 3.5.2 1652 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 1653 | * 1654 | * Copyright (c) 2017 Daniel Eden 1655 | */ 1656 | 1657 | .animated { 1658 | animation-duration: 1s; 1659 | animation-fill-mode: both; 1660 | } 1661 | 1662 | .animated.infinite { 1663 | animation-iteration-count: infinite; 1664 | } 1665 | 1666 | .animated.hinge { 1667 | animation-duration: 2s; 1668 | } 1669 | 1670 | .animated.flipOutX, 1671 | .animated.flipOutY, 1672 | .animated.bounceIn, 1673 | .animated.bounceOut { 1674 | animation-duration: .75s; 1675 | } 1676 | 1677 | @keyframes bounce { 1678 | from, 20%, 53%, 80%, to { 1679 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 1680 | transform: translate3d(0,0,0); 1681 | } 1682 | 1683 | 40%, 43% { 1684 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 1685 | transform: translate3d(0, -30px, 0); 1686 | } 1687 | 1688 | 70% { 1689 | animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 1690 | transform: translate3d(0, -15px, 0); 1691 | } 1692 | 1693 | 90% { 1694 | transform: translate3d(0,-4px,0); 1695 | } 1696 | } 1697 | 1698 | .bounce { 1699 | animation-name: bounce; 1700 | transform-origin: center bottom; 1701 | } 1702 | 1703 | @keyframes flash { 1704 | from, 50%, to { 1705 | opacity: 1; 1706 | } 1707 | 1708 | 25%, 75% { 1709 | opacity: 0; 1710 | } 1711 | } 1712 | 1713 | .flash { 1714 | animation-name: flash; 1715 | } 1716 | 1717 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1718 | 1719 | @keyframes pulse { 1720 | from { 1721 | transform: scale3d(1, 1, 1); 1722 | } 1723 | 1724 | 50% { 1725 | transform: scale3d(1.05, 1.05, 1.05); 1726 | } 1727 | 1728 | to { 1729 | transform: scale3d(1, 1, 1); 1730 | } 1731 | } 1732 | 1733 | .pulse { 1734 | animation-name: pulse; 1735 | } 1736 | 1737 | @keyframes rubberBand { 1738 | from { 1739 | transform: scale3d(1, 1, 1); 1740 | } 1741 | 1742 | 30% { 1743 | transform: scale3d(1.25, 0.75, 1); 1744 | } 1745 | 1746 | 40% { 1747 | transform: scale3d(0.75, 1.25, 1); 1748 | } 1749 | 1750 | 50% { 1751 | transform: scale3d(1.15, 0.85, 1); 1752 | } 1753 | 1754 | 65% { 1755 | transform: scale3d(.95, 1.05, 1); 1756 | } 1757 | 1758 | 75% { 1759 | transform: scale3d(1.05, .95, 1); 1760 | } 1761 | 1762 | to { 1763 | transform: scale3d(1, 1, 1); 1764 | } 1765 | } 1766 | 1767 | .rubberBand { 1768 | animation-name: rubberBand; 1769 | } 1770 | 1771 | @keyframes shake { 1772 | from, to { 1773 | transform: translate3d(0, 0, 0); 1774 | } 1775 | 1776 | 10%, 30%, 50%, 70%, 90% { 1777 | transform: translate3d(-10px, 0, 0); 1778 | } 1779 | 1780 | 20%, 40%, 60%, 80% { 1781 | transform: translate3d(10px, 0, 0); 1782 | } 1783 | } 1784 | 1785 | .shake { 1786 | animation-name: shake; 1787 | } 1788 | 1789 | @keyframes headShake { 1790 | 0% { 1791 | transform: translateX(0); 1792 | } 1793 | 1794 | 6.5% { 1795 | transform: translateX(-6px) rotateY(-9deg); 1796 | } 1797 | 1798 | 18.5% { 1799 | transform: translateX(5px) rotateY(7deg); 1800 | } 1801 | 1802 | 31.5% { 1803 | transform: translateX(-3px) rotateY(-5deg); 1804 | } 1805 | 1806 | 43.5% { 1807 | transform: translateX(2px) rotateY(3deg); 1808 | } 1809 | 1810 | 50% { 1811 | transform: translateX(0); 1812 | } 1813 | } 1814 | 1815 | .headShake { 1816 | animation-timing-function: ease-in-out; 1817 | animation-name: headShake; 1818 | } 1819 | 1820 | @keyframes swing { 1821 | 20% { 1822 | transform: rotate3d(0, 0, 1, 15deg); 1823 | } 1824 | 1825 | 40% { 1826 | transform: rotate3d(0, 0, 1, -10deg); 1827 | } 1828 | 1829 | 60% { 1830 | transform: rotate3d(0, 0, 1, 5deg); 1831 | } 1832 | 1833 | 80% { 1834 | transform: rotate3d(0, 0, 1, -5deg); 1835 | } 1836 | 1837 | to { 1838 | transform: rotate3d(0, 0, 1, 0deg); 1839 | } 1840 | } 1841 | 1842 | .swing { 1843 | transform-origin: top center; 1844 | animation-name: swing; 1845 | } 1846 | 1847 | @keyframes tada { 1848 | from { 1849 | transform: scale3d(1, 1, 1); 1850 | } 1851 | 1852 | 10%, 20% { 1853 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 1854 | } 1855 | 1856 | 30%, 50%, 70%, 90% { 1857 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 1858 | } 1859 | 1860 | 40%, 60%, 80% { 1861 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 1862 | } 1863 | 1864 | to { 1865 | transform: scale3d(1, 1, 1); 1866 | } 1867 | } 1868 | 1869 | .tada { 1870 | animation-name: tada; 1871 | } 1872 | 1873 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 1874 | 1875 | @keyframes wobble { 1876 | from { 1877 | transform: none; 1878 | } 1879 | 1880 | 15% { 1881 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 1882 | } 1883 | 1884 | 30% { 1885 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 1886 | } 1887 | 1888 | 45% { 1889 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 1890 | } 1891 | 1892 | 60% { 1893 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 1894 | } 1895 | 1896 | 75% { 1897 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 1898 | } 1899 | 1900 | to { 1901 | transform: none; 1902 | } 1903 | } 1904 | 1905 | .wobble { 1906 | animation-name: wobble; 1907 | } 1908 | 1909 | @keyframes jello { 1910 | from, 11.1%, to { 1911 | transform: none; 1912 | } 1913 | 1914 | 22.2% { 1915 | transform: skewX(-12.5deg) skewY(-12.5deg); 1916 | } 1917 | 1918 | 33.3% { 1919 | transform: skewX(6.25deg) skewY(6.25deg); 1920 | } 1921 | 1922 | 44.4% { 1923 | transform: skewX(-3.125deg) skewY(-3.125deg); 1924 | } 1925 | 1926 | 55.5% { 1927 | transform: skewX(1.5625deg) skewY(1.5625deg); 1928 | } 1929 | 1930 | 66.6% { 1931 | transform: skewX(-0.78125deg) skewY(-0.78125deg); 1932 | } 1933 | 1934 | 77.7% { 1935 | transform: skewX(0.390625deg) skewY(0.390625deg); 1936 | } 1937 | 1938 | 88.8% { 1939 | transform: skewX(-0.1953125deg) skewY(-0.1953125deg); 1940 | } 1941 | } 1942 | 1943 | .jello { 1944 | animation-name: jello; 1945 | transform-origin: center; 1946 | } 1947 | 1948 | @keyframes bounceIn { 1949 | from, 20%, 40%, 60%, 80%, to { 1950 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 1951 | } 1952 | 1953 | 0% { 1954 | opacity: 0; 1955 | transform: scale3d(.3, .3, .3); 1956 | } 1957 | 1958 | 20% { 1959 | transform: scale3d(1.1, 1.1, 1.1); 1960 | } 1961 | 1962 | 40% { 1963 | transform: scale3d(.9, .9, .9); 1964 | } 1965 | 1966 | 60% { 1967 | opacity: 1; 1968 | transform: scale3d(1.03, 1.03, 1.03); 1969 | } 1970 | 1971 | 80% { 1972 | transform: scale3d(.97, .97, .97); 1973 | } 1974 | 1975 | to { 1976 | opacity: 1; 1977 | transform: scale3d(1, 1, 1); 1978 | } 1979 | } 1980 | 1981 | .bounceIn { 1982 | animation-name: bounceIn; 1983 | } 1984 | 1985 | @keyframes bounceInDown { 1986 | from, 60%, 75%, 90%, to { 1987 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 1988 | } 1989 | 1990 | 0% { 1991 | opacity: 0; 1992 | transform: translate3d(0, -3000px, 0); 1993 | } 1994 | 1995 | 60% { 1996 | opacity: 1; 1997 | transform: translate3d(0, 25px, 0); 1998 | } 1999 | 2000 | 75% { 2001 | transform: translate3d(0, -10px, 0); 2002 | } 2003 | 2004 | 90% { 2005 | transform: translate3d(0, 5px, 0); 2006 | } 2007 | 2008 | to { 2009 | transform: none; 2010 | } 2011 | } 2012 | 2013 | .bounceInDown { 2014 | animation-name: bounceInDown; 2015 | } 2016 | 2017 | @keyframes bounceInLeft { 2018 | from, 60%, 75%, 90%, to { 2019 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 2020 | } 2021 | 2022 | 0% { 2023 | opacity: 0; 2024 | transform: translate3d(-3000px, 0, 0); 2025 | } 2026 | 2027 | 60% { 2028 | opacity: 1; 2029 | transform: translate3d(25px, 0, 0); 2030 | } 2031 | 2032 | 75% { 2033 | transform: translate3d(-10px, 0, 0); 2034 | } 2035 | 2036 | 90% { 2037 | transform: translate3d(5px, 0, 0); 2038 | } 2039 | 2040 | to { 2041 | transform: none; 2042 | } 2043 | } 2044 | 2045 | .bounceInLeft { 2046 | animation-name: bounceInLeft; 2047 | } 2048 | 2049 | @keyframes bounceInRight { 2050 | from, 60%, 75%, 90%, to { 2051 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 2052 | } 2053 | 2054 | from { 2055 | opacity: 0; 2056 | transform: translate3d(3000px, 0, 0); 2057 | } 2058 | 2059 | 60% { 2060 | opacity: 1; 2061 | transform: translate3d(-25px, 0, 0); 2062 | } 2063 | 2064 | 75% { 2065 | transform: translate3d(10px, 0, 0); 2066 | } 2067 | 2068 | 90% { 2069 | transform: translate3d(-5px, 0, 0); 2070 | } 2071 | 2072 | to { 2073 | transform: none; 2074 | } 2075 | } 2076 | 2077 | .bounceInRight { 2078 | animation-name: bounceInRight; 2079 | } 2080 | 2081 | @keyframes bounceInUp { 2082 | from, 60%, 75%, 90%, to { 2083 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 2084 | } 2085 | 2086 | from { 2087 | opacity: 0; 2088 | transform: translate3d(0, 3000px, 0); 2089 | } 2090 | 2091 | 60% { 2092 | opacity: 1; 2093 | transform: translate3d(0, -20px, 0); 2094 | } 2095 | 2096 | 75% { 2097 | transform: translate3d(0, 10px, 0); 2098 | } 2099 | 2100 | 90% { 2101 | transform: translate3d(0, -5px, 0); 2102 | } 2103 | 2104 | to { 2105 | transform: translate3d(0, 0, 0); 2106 | } 2107 | } 2108 | 2109 | .bounceInUp { 2110 | animation-name: bounceInUp; 2111 | } 2112 | 2113 | @keyframes bounceOut { 2114 | 20% { 2115 | transform: scale3d(.9, .9, .9); 2116 | } 2117 | 2118 | 50%, 55% { 2119 | opacity: 1; 2120 | transform: scale3d(1.1, 1.1, 1.1); 2121 | } 2122 | 2123 | to { 2124 | opacity: 0; 2125 | transform: scale3d(.3, .3, .3); 2126 | } 2127 | } 2128 | 2129 | .bounceOut { 2130 | animation-name: bounceOut; 2131 | } 2132 | 2133 | @keyframes bounceOutDown { 2134 | 20% { 2135 | transform: translate3d(0, 10px, 0); 2136 | } 2137 | 2138 | 40%, 45% { 2139 | opacity: 1; 2140 | transform: translate3d(0, -20px, 0); 2141 | } 2142 | 2143 | to { 2144 | opacity: 0; 2145 | transform: translate3d(0, 2000px, 0); 2146 | } 2147 | } 2148 | 2149 | .bounceOutDown { 2150 | animation-name: bounceOutDown; 2151 | } 2152 | 2153 | @keyframes bounceOutLeft { 2154 | 20% { 2155 | opacity: 1; 2156 | transform: translate3d(20px, 0, 0); 2157 | } 2158 | 2159 | to { 2160 | opacity: 0; 2161 | transform: translate3d(-2000px, 0, 0); 2162 | } 2163 | } 2164 | 2165 | .bounceOutLeft { 2166 | animation-name: bounceOutLeft; 2167 | } 2168 | 2169 | @keyframes bounceOutRight { 2170 | 20% { 2171 | opacity: 1; 2172 | transform: translate3d(-20px, 0, 0); 2173 | } 2174 | 2175 | to { 2176 | opacity: 0; 2177 | transform: translate3d(2000px, 0, 0); 2178 | } 2179 | } 2180 | 2181 | .bounceOutRight { 2182 | animation-name: bounceOutRight; 2183 | } 2184 | 2185 | @keyframes bounceOutUp { 2186 | 20% { 2187 | transform: translate3d(0, -10px, 0); 2188 | } 2189 | 2190 | 40%, 45% { 2191 | opacity: 1; 2192 | transform: translate3d(0, 20px, 0); 2193 | } 2194 | 2195 | to { 2196 | opacity: 0; 2197 | transform: translate3d(0, -2000px, 0); 2198 | } 2199 | } 2200 | 2201 | .bounceOutUp { 2202 | animation-name: bounceOutUp; 2203 | } 2204 | 2205 | @keyframes fadeIn { 2206 | from { 2207 | opacity: 0; 2208 | } 2209 | 2210 | to { 2211 | opacity: 1; 2212 | } 2213 | } 2214 | 2215 | .fadeIn { 2216 | animation-name: fadeIn; 2217 | } 2218 | 2219 | @keyframes fadeInDown { 2220 | from { 2221 | opacity: 0; 2222 | transform: translate3d(0, -100%, 0); 2223 | } 2224 | 2225 | to { 2226 | opacity: 1; 2227 | transform: none; 2228 | } 2229 | } 2230 | 2231 | .fadeInDown { 2232 | animation-name: fadeInDown; 2233 | } 2234 | 2235 | @keyframes fadeInDownBig { 2236 | from { 2237 | opacity: 0; 2238 | transform: translate3d(0, -2000px, 0); 2239 | } 2240 | 2241 | to { 2242 | opacity: 1; 2243 | transform: none; 2244 | } 2245 | } 2246 | 2247 | .fadeInDownBig { 2248 | animation-name: fadeInDownBig; 2249 | } 2250 | 2251 | @keyframes fadeInLeft { 2252 | from { 2253 | opacity: 0; 2254 | transform: translate3d(-100%, 0, 0); 2255 | } 2256 | 2257 | to { 2258 | opacity: 1; 2259 | transform: none; 2260 | } 2261 | } 2262 | 2263 | .fadeInLeft { 2264 | animation-name: fadeInLeft; 2265 | } 2266 | 2267 | @keyframes fadeInLeftBig { 2268 | from { 2269 | opacity: 0; 2270 | transform: translate3d(-2000px, 0, 0); 2271 | } 2272 | 2273 | to { 2274 | opacity: 1; 2275 | transform: none; 2276 | } 2277 | } 2278 | 2279 | .fadeInLeftBig { 2280 | animation-name: fadeInLeftBig; 2281 | } 2282 | 2283 | @keyframes fadeInRight { 2284 | from { 2285 | opacity: 0; 2286 | transform: translate3d(100%, 0, 0); 2287 | } 2288 | 2289 | to { 2290 | opacity: 1; 2291 | transform: none; 2292 | } 2293 | } 2294 | 2295 | .fadeInRight { 2296 | animation-name: fadeInRight; 2297 | } 2298 | 2299 | @keyframes fadeInRightBig { 2300 | from { 2301 | opacity: 0; 2302 | transform: translate3d(2000px, 0, 0); 2303 | } 2304 | 2305 | to { 2306 | opacity: 1; 2307 | transform: none; 2308 | } 2309 | } 2310 | 2311 | .fadeInRightBig { 2312 | animation-name: fadeInRightBig; 2313 | } 2314 | 2315 | @keyframes fadeInUp { 2316 | from { 2317 | opacity: 0; 2318 | transform: translate3d(0, 100%, 0); 2319 | } 2320 | 2321 | to { 2322 | opacity: 1; 2323 | transform: none; 2324 | } 2325 | } 2326 | 2327 | .fadeInUp { 2328 | animation-name: fadeInUp; 2329 | } 2330 | 2331 | @keyframes fadeInUpBig { 2332 | from { 2333 | opacity: 0; 2334 | transform: translate3d(0, 2000px, 0); 2335 | } 2336 | 2337 | to { 2338 | opacity: 1; 2339 | transform: none; 2340 | } 2341 | } 2342 | 2343 | .fadeInUpBig { 2344 | animation-name: fadeInUpBig; 2345 | } 2346 | 2347 | @keyframes fadeOut { 2348 | from { 2349 | opacity: 1; 2350 | } 2351 | 2352 | to { 2353 | opacity: 0; 2354 | } 2355 | } 2356 | 2357 | .fadeOut { 2358 | animation-name: fadeOut; 2359 | } 2360 | 2361 | @keyframes fadeOutDown { 2362 | from { 2363 | opacity: 1; 2364 | } 2365 | 2366 | to { 2367 | opacity: 0; 2368 | transform: translate3d(0, 100%, 0); 2369 | } 2370 | } 2371 | 2372 | .fadeOutDown { 2373 | animation-name: fadeOutDown; 2374 | } 2375 | 2376 | @keyframes fadeOutDownBig { 2377 | from { 2378 | opacity: 1; 2379 | } 2380 | 2381 | to { 2382 | opacity: 0; 2383 | transform: translate3d(0, 2000px, 0); 2384 | } 2385 | } 2386 | 2387 | .fadeOutDownBig { 2388 | animation-name: fadeOutDownBig; 2389 | } 2390 | 2391 | @keyframes fadeOutLeft { 2392 | from { 2393 | opacity: 1; 2394 | } 2395 | 2396 | to { 2397 | opacity: 0; 2398 | transform: translate3d(-100%, 0, 0); 2399 | } 2400 | } 2401 | 2402 | .fadeOutLeft { 2403 | animation-name: fadeOutLeft; 2404 | } 2405 | 2406 | @keyframes fadeOutLeftBig { 2407 | from { 2408 | opacity: 1; 2409 | } 2410 | 2411 | to { 2412 | opacity: 0; 2413 | transform: translate3d(-2000px, 0, 0); 2414 | } 2415 | } 2416 | 2417 | .fadeOutLeftBig { 2418 | animation-name: fadeOutLeftBig; 2419 | } 2420 | 2421 | @keyframes fadeOutRight { 2422 | from { 2423 | opacity: 1; 2424 | } 2425 | 2426 | to { 2427 | opacity: 0; 2428 | transform: translate3d(100%, 0, 0); 2429 | } 2430 | } 2431 | 2432 | .fadeOutRight { 2433 | animation-name: fadeOutRight; 2434 | } 2435 | 2436 | @keyframes fadeOutRightBig { 2437 | from { 2438 | opacity: 1; 2439 | } 2440 | 2441 | to { 2442 | opacity: 0; 2443 | transform: translate3d(2000px, 0, 0); 2444 | } 2445 | } 2446 | 2447 | .fadeOutRightBig { 2448 | animation-name: fadeOutRightBig; 2449 | } 2450 | 2451 | @keyframes fadeOutUp { 2452 | from { 2453 | opacity: 1; 2454 | } 2455 | 2456 | to { 2457 | opacity: 0; 2458 | transform: translate3d(0, -100%, 0); 2459 | } 2460 | } 2461 | 2462 | .fadeOutUp { 2463 | animation-name: fadeOutUp; 2464 | } 2465 | 2466 | @keyframes fadeOutUpBig { 2467 | from { 2468 | opacity: 1; 2469 | } 2470 | 2471 | to { 2472 | opacity: 0; 2473 | transform: translate3d(0, -2000px, 0); 2474 | } 2475 | } 2476 | 2477 | .fadeOutUpBig { 2478 | animation-name: fadeOutUpBig; 2479 | } 2480 | 2481 | @keyframes flip { 2482 | from { 2483 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 2484 | animation-timing-function: ease-out; 2485 | } 2486 | 2487 | 40% { 2488 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 2489 | animation-timing-function: ease-out; 2490 | } 2491 | 2492 | 50% { 2493 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 2494 | animation-timing-function: ease-in; 2495 | } 2496 | 2497 | 80% { 2498 | transform: perspective(400px) scale3d(.95, .95, .95); 2499 | animation-timing-function: ease-in; 2500 | } 2501 | 2502 | to { 2503 | transform: perspective(400px); 2504 | animation-timing-function: ease-in; 2505 | } 2506 | } 2507 | 2508 | .animated.flip { 2509 | -webkit-backface-visibility: visible; 2510 | backface-visibility: visible; 2511 | animation-name: flip; 2512 | } 2513 | 2514 | @keyframes flipInX { 2515 | from { 2516 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2517 | animation-timing-function: ease-in; 2518 | opacity: 0; 2519 | } 2520 | 2521 | 40% { 2522 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2523 | animation-timing-function: ease-in; 2524 | } 2525 | 2526 | 60% { 2527 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 2528 | opacity: 1; 2529 | } 2530 | 2531 | 80% { 2532 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 2533 | } 2534 | 2535 | to { 2536 | transform: perspective(400px); 2537 | } 2538 | } 2539 | 2540 | .flipInX { 2541 | -webkit-backface-visibility: visible !important; 2542 | backface-visibility: visible !important; 2543 | animation-name: flipInX; 2544 | } 2545 | 2546 | @keyframes flipInY { 2547 | from { 2548 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2549 | animation-timing-function: ease-in; 2550 | opacity: 0; 2551 | } 2552 | 2553 | 40% { 2554 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 2555 | animation-timing-function: ease-in; 2556 | } 2557 | 2558 | 60% { 2559 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 2560 | opacity: 1; 2561 | } 2562 | 2563 | 80% { 2564 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 2565 | } 2566 | 2567 | to { 2568 | transform: perspective(400px); 2569 | } 2570 | } 2571 | 2572 | .flipInY { 2573 | -webkit-backface-visibility: visible !important; 2574 | backface-visibility: visible !important; 2575 | animation-name: flipInY; 2576 | } 2577 | 2578 | @keyframes flipOutX { 2579 | from { 2580 | transform: perspective(400px); 2581 | } 2582 | 2583 | 30% { 2584 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 2585 | opacity: 1; 2586 | } 2587 | 2588 | to { 2589 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 2590 | opacity: 0; 2591 | } 2592 | } 2593 | 2594 | .flipOutX { 2595 | animation-name: flipOutX; 2596 | -webkit-backface-visibility: visible !important; 2597 | backface-visibility: visible !important; 2598 | } 2599 | 2600 | @keyframes flipOutY { 2601 | from { 2602 | transform: perspective(400px); 2603 | } 2604 | 2605 | 30% { 2606 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 2607 | opacity: 1; 2608 | } 2609 | 2610 | to { 2611 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 2612 | opacity: 0; 2613 | } 2614 | } 2615 | 2616 | .flipOutY { 2617 | -webkit-backface-visibility: visible !important; 2618 | backface-visibility: visible !important; 2619 | animation-name: flipOutY; 2620 | } 2621 | 2622 | @keyframes lightSpeedIn { 2623 | from { 2624 | transform: translate3d(100%, 0, 0) skewX(-30deg); 2625 | opacity: 0; 2626 | } 2627 | 2628 | 60% { 2629 | transform: skewX(20deg); 2630 | opacity: 1; 2631 | } 2632 | 2633 | 80% { 2634 | transform: skewX(-5deg); 2635 | opacity: 1; 2636 | } 2637 | 2638 | to { 2639 | transform: none; 2640 | opacity: 1; 2641 | } 2642 | } 2643 | 2644 | .lightSpeedIn { 2645 | animation-name: lightSpeedIn; 2646 | animation-timing-function: ease-out; 2647 | } 2648 | 2649 | @keyframes lightSpeedOut { 2650 | from { 2651 | opacity: 1; 2652 | } 2653 | 2654 | to { 2655 | transform: translate3d(100%, 0, 0) skewX(30deg); 2656 | opacity: 0; 2657 | } 2658 | } 2659 | 2660 | .lightSpeedOut { 2661 | animation-name: lightSpeedOut; 2662 | animation-timing-function: ease-in; 2663 | } 2664 | 2665 | @keyframes rotateIn { 2666 | from { 2667 | transform-origin: center; 2668 | transform: rotate3d(0, 0, 1, -200deg); 2669 | opacity: 0; 2670 | } 2671 | 2672 | to { 2673 | transform-origin: center; 2674 | transform: none; 2675 | opacity: 1; 2676 | } 2677 | } 2678 | 2679 | .rotateIn { 2680 | animation-name: rotateIn; 2681 | } 2682 | 2683 | @keyframes rotateInDownLeft { 2684 | from { 2685 | transform-origin: left bottom; 2686 | transform: rotate3d(0, 0, 1, -45deg); 2687 | opacity: 0; 2688 | } 2689 | 2690 | to { 2691 | transform-origin: left bottom; 2692 | transform: none; 2693 | opacity: 1; 2694 | } 2695 | } 2696 | 2697 | .rotateInDownLeft { 2698 | animation-name: rotateInDownLeft; 2699 | } 2700 | 2701 | @keyframes rotateInDownRight { 2702 | from { 2703 | transform-origin: right bottom; 2704 | transform: rotate3d(0, 0, 1, 45deg); 2705 | opacity: 0; 2706 | } 2707 | 2708 | to { 2709 | transform-origin: right bottom; 2710 | transform: none; 2711 | opacity: 1; 2712 | } 2713 | } 2714 | 2715 | .rotateInDownRight { 2716 | animation-name: rotateInDownRight; 2717 | } 2718 | 2719 | @keyframes rotateInUpLeft { 2720 | from { 2721 | transform-origin: left bottom; 2722 | transform: rotate3d(0, 0, 1, 45deg); 2723 | opacity: 0; 2724 | } 2725 | 2726 | to { 2727 | transform-origin: left bottom; 2728 | transform: none; 2729 | opacity: 1; 2730 | } 2731 | } 2732 | 2733 | .rotateInUpLeft { 2734 | animation-name: rotateInUpLeft; 2735 | } 2736 | 2737 | @keyframes rotateInUpRight { 2738 | from { 2739 | transform-origin: right bottom; 2740 | transform: rotate3d(0, 0, 1, -90deg); 2741 | opacity: 0; 2742 | } 2743 | 2744 | to { 2745 | transform-origin: right bottom; 2746 | transform: none; 2747 | opacity: 1; 2748 | } 2749 | } 2750 | 2751 | .rotateInUpRight { 2752 | animation-name: rotateInUpRight; 2753 | } 2754 | 2755 | @keyframes rotateOut { 2756 | from { 2757 | transform-origin: center; 2758 | opacity: 1; 2759 | } 2760 | 2761 | to { 2762 | transform-origin: center; 2763 | transform: rotate3d(0, 0, 1, 200deg); 2764 | opacity: 0; 2765 | } 2766 | } 2767 | 2768 | .rotateOut { 2769 | animation-name: rotateOut; 2770 | } 2771 | 2772 | @keyframes rotateOutDownLeft { 2773 | from { 2774 | transform-origin: left bottom; 2775 | opacity: 1; 2776 | } 2777 | 2778 | to { 2779 | transform-origin: left bottom; 2780 | transform: rotate3d(0, 0, 1, 45deg); 2781 | opacity: 0; 2782 | } 2783 | } 2784 | 2785 | .rotateOutDownLeft { 2786 | animation-name: rotateOutDownLeft; 2787 | } 2788 | 2789 | @keyframes rotateOutDownRight { 2790 | from { 2791 | transform-origin: right bottom; 2792 | opacity: 1; 2793 | } 2794 | 2795 | to { 2796 | transform-origin: right bottom; 2797 | transform: rotate3d(0, 0, 1, -45deg); 2798 | opacity: 0; 2799 | } 2800 | } 2801 | 2802 | .rotateOutDownRight { 2803 | animation-name: rotateOutDownRight; 2804 | } 2805 | 2806 | @keyframes rotateOutUpLeft { 2807 | from { 2808 | transform-origin: left bottom; 2809 | opacity: 1; 2810 | } 2811 | 2812 | to { 2813 | transform-origin: left bottom; 2814 | transform: rotate3d(0, 0, 1, -45deg); 2815 | opacity: 0; 2816 | } 2817 | } 2818 | 2819 | .rotateOutUpLeft { 2820 | animation-name: rotateOutUpLeft; 2821 | } 2822 | 2823 | @keyframes rotateOutUpRight { 2824 | from { 2825 | transform-origin: right bottom; 2826 | opacity: 1; 2827 | } 2828 | 2829 | to { 2830 | transform-origin: right bottom; 2831 | transform: rotate3d(0, 0, 1, 90deg); 2832 | opacity: 0; 2833 | } 2834 | } 2835 | 2836 | .rotateOutUpRight { 2837 | animation-name: rotateOutUpRight; 2838 | } 2839 | 2840 | @keyframes hinge { 2841 | 0% { 2842 | transform-origin: top left; 2843 | animation-timing-function: ease-in-out; 2844 | } 2845 | 2846 | 20%, 60% { 2847 | transform: rotate3d(0, 0, 1, 80deg); 2848 | transform-origin: top left; 2849 | animation-timing-function: ease-in-out; 2850 | } 2851 | 2852 | 40%, 80% { 2853 | transform: rotate3d(0, 0, 1, 60deg); 2854 | transform-origin: top left; 2855 | animation-timing-function: ease-in-out; 2856 | opacity: 1; 2857 | } 2858 | 2859 | to { 2860 | transform: translate3d(0, 700px, 0); 2861 | opacity: 0; 2862 | } 2863 | } 2864 | 2865 | .hinge { 2866 | animation-name: hinge; 2867 | } 2868 | 2869 | @keyframes jackInTheBox { 2870 | from { 2871 | opacity: 0; 2872 | transform: scale(0.1) rotate(30deg); 2873 | transform-origin: center bottom; 2874 | } 2875 | 2876 | 50% { 2877 | transform: rotate(-10deg); 2878 | } 2879 | 2880 | 70% { 2881 | transform: rotate(3deg); 2882 | } 2883 | 2884 | to { 2885 | opacity: 1; 2886 | transform: scale(1); 2887 | } 2888 | } 2889 | 2890 | .jackInTheBox { 2891 | animation-name: jackInTheBox; 2892 | } 2893 | 2894 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2895 | 2896 | @keyframes rollIn { 2897 | from { 2898 | opacity: 0; 2899 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2900 | } 2901 | 2902 | to { 2903 | opacity: 1; 2904 | transform: none; 2905 | } 2906 | } 2907 | 2908 | .rollIn { 2909 | animation-name: rollIn; 2910 | } 2911 | 2912 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2913 | 2914 | @keyframes rollOut { 2915 | from { 2916 | opacity: 1; 2917 | } 2918 | 2919 | to { 2920 | opacity: 0; 2921 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2922 | } 2923 | } 2924 | 2925 | .rollOut { 2926 | animation-name: rollOut; 2927 | } 2928 | 2929 | @keyframes zoomIn { 2930 | from { 2931 | opacity: 0; 2932 | transform: scale3d(.3, .3, .3); 2933 | } 2934 | 2935 | 50% { 2936 | opacity: 1; 2937 | } 2938 | } 2939 | 2940 | .zoomIn { 2941 | animation-name: zoomIn; 2942 | } 2943 | 2944 | @keyframes zoomInDown { 2945 | from { 2946 | opacity: 0; 2947 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2948 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2949 | } 2950 | 2951 | 60% { 2952 | opacity: 1; 2953 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2954 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2955 | } 2956 | } 2957 | 2958 | .zoomInDown { 2959 | animation-name: zoomInDown; 2960 | } 2961 | 2962 | @keyframes zoomInLeft { 2963 | from { 2964 | opacity: 0; 2965 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2966 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2967 | } 2968 | 2969 | 60% { 2970 | opacity: 1; 2971 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2972 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2973 | } 2974 | } 2975 | 2976 | .zoomInLeft { 2977 | animation-name: zoomInLeft; 2978 | } 2979 | 2980 | @keyframes zoomInRight { 2981 | from { 2982 | opacity: 0; 2983 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2984 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2985 | } 2986 | 2987 | 60% { 2988 | opacity: 1; 2989 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2990 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2991 | } 2992 | } 2993 | 2994 | .zoomInRight { 2995 | animation-name: zoomInRight; 2996 | } 2997 | 2998 | @keyframes zoomInUp { 2999 | from { 3000 | opacity: 0; 3001 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 3002 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3003 | } 3004 | 3005 | 60% { 3006 | opacity: 1; 3007 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 3008 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3009 | } 3010 | } 3011 | 3012 | .zoomInUp { 3013 | animation-name: zoomInUp; 3014 | } 3015 | 3016 | @keyframes zoomOut { 3017 | from { 3018 | opacity: 1; 3019 | } 3020 | 3021 | 50% { 3022 | opacity: 0; 3023 | transform: scale3d(.3, .3, .3); 3024 | } 3025 | 3026 | to { 3027 | opacity: 0; 3028 | } 3029 | } 3030 | 3031 | .zoomOut { 3032 | animation-name: zoomOut; 3033 | } 3034 | 3035 | @keyframes zoomOutDown { 3036 | 40% { 3037 | opacity: 1; 3038 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 3039 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3040 | } 3041 | 3042 | to { 3043 | opacity: 0; 3044 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 3045 | transform-origin: center bottom; 3046 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3047 | } 3048 | } 3049 | 3050 | .zoomOutDown { 3051 | animation-name: zoomOutDown; 3052 | } 3053 | 3054 | @keyframes zoomOutLeft { 3055 | 40% { 3056 | opacity: 1; 3057 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 3058 | } 3059 | 3060 | to { 3061 | opacity: 0; 3062 | transform: scale(.1) translate3d(-2000px, 0, 0); 3063 | transform-origin: left center; 3064 | } 3065 | } 3066 | 3067 | .zoomOutLeft { 3068 | animation-name: zoomOutLeft; 3069 | } 3070 | 3071 | @keyframes zoomOutRight { 3072 | 40% { 3073 | opacity: 1; 3074 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 3075 | } 3076 | 3077 | to { 3078 | opacity: 0; 3079 | transform: scale(.1) translate3d(2000px, 0, 0); 3080 | transform-origin: right center; 3081 | } 3082 | } 3083 | 3084 | .zoomOutRight { 3085 | animation-name: zoomOutRight; 3086 | } 3087 | 3088 | @keyframes zoomOutUp { 3089 | 40% { 3090 | opacity: 1; 3091 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 3092 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 3093 | } 3094 | 3095 | to { 3096 | opacity: 0; 3097 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 3098 | transform-origin: center bottom; 3099 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 3100 | } 3101 | } 3102 | 3103 | .zoomOutUp { 3104 | animation-name: zoomOutUp; 3105 | } 3106 | 3107 | @keyframes slideInDown { 3108 | from { 3109 | transform: translate3d(0, -100%, 0); 3110 | visibility: visible; 3111 | } 3112 | 3113 | to { 3114 | transform: translate3d(0, 0, 0); 3115 | } 3116 | } 3117 | 3118 | .slideInDown { 3119 | animation-name: slideInDown; 3120 | } 3121 | 3122 | @keyframes slideInLeft { 3123 | from { 3124 | transform: translate3d(-100%, 0, 0); 3125 | visibility: visible; 3126 | } 3127 | 3128 | to { 3129 | transform: translate3d(0, 0, 0); 3130 | } 3131 | } 3132 | 3133 | .slideInLeft { 3134 | animation-name: slideInLeft; 3135 | } 3136 | 3137 | @keyframes slideInRight { 3138 | from { 3139 | transform: translate3d(100%, 0, 0); 3140 | visibility: visible; 3141 | } 3142 | 3143 | to { 3144 | transform: translate3d(0, 0, 0); 3145 | } 3146 | } 3147 | 3148 | .slideInRight { 3149 | animation-name: slideInRight; 3150 | } 3151 | 3152 | @keyframes slideInUp { 3153 | from { 3154 | transform: translate3d(0, 100%, 0); 3155 | visibility: visible; 3156 | } 3157 | 3158 | to { 3159 | transform: translate3d(0, 0, 0); 3160 | } 3161 | } 3162 | 3163 | .slideInUp { 3164 | animation-name: slideInUp; 3165 | } 3166 | 3167 | @keyframes slideOutDown { 3168 | from { 3169 | transform: translate3d(0, 0, 0); 3170 | } 3171 | 3172 | to { 3173 | visibility: hidden; 3174 | transform: translate3d(0, 100%, 0); 3175 | } 3176 | } 3177 | 3178 | .slideOutDown { 3179 | animation-name: slideOutDown; 3180 | } 3181 | 3182 | @keyframes slideOutLeft { 3183 | from { 3184 | transform: translate3d(0, 0, 0); 3185 | } 3186 | 3187 | to { 3188 | visibility: hidden; 3189 | transform: translate3d(-100%, 0, 0); 3190 | } 3191 | } 3192 | 3193 | .slideOutLeft { 3194 | animation-name: slideOutLeft; 3195 | } 3196 | 3197 | @keyframes slideOutRight { 3198 | from { 3199 | transform: translate3d(0, 0, 0); 3200 | } 3201 | 3202 | to { 3203 | visibility: hidden; 3204 | transform: translate3d(100%, 0, 0); 3205 | } 3206 | } 3207 | 3208 | .slideOutRight { 3209 | animation-name: slideOutRight; 3210 | } 3211 | 3212 | @keyframes slideOutUp { 3213 | from { 3214 | transform: translate3d(0, 0, 0); 3215 | } 3216 | 3217 | to { 3218 | visibility: hidden; 3219 | transform: translate3d(0, -100%, 0); 3220 | } 3221 | } 3222 | 3223 | .slideOutUp { 3224 | animation-name: slideOutUp; 3225 | } --------------------------------------------------------------------------------