compass-sourcemaps 0.12.3.sourcemaps.a4836f1 → 0.12.4.sourcemaps.a4836f1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/LICENSE.markdown +29 -29
- data/README.markdown +39 -39
- data/Rakefile +157 -157
- data/VERSION.yml +5 -5
- data/bin/compass +45 -45
- data/examples/README.markdown +3 -3
- data/examples/blueprint_default/config.rb +7 -7
- data/examples/blueprint_default/index.html.haml +85 -85
- data/examples/blueprint_default/parts/elements.html.haml +282 -282
- data/examples/blueprint_default/parts/forms.html.haml +200 -200
- data/examples/blueprint_default/parts/grid.html.haml +274 -274
- data/examples/blueprint_default/src/ie.scss +3 -3
- data/examples/blueprint_default/src/print.scss +3 -3
- data/examples/blueprint_default/src/screen.scss +9 -9
- data/examples/blueprint_plugins/config.rb +8 -8
- data/examples/blueprint_plugins/index.html.haml +96 -96
- data/examples/blueprint_plugins/plugins/buttons.html.haml +67 -67
- data/examples/blueprint_plugins/plugins/fancy_type.html.haml +100 -100
- data/examples/blueprint_plugins/plugins/link_icons.html.haml +61 -61
- data/examples/blueprint_plugins/plugins/rtl.html.haml +100 -100
- data/examples/blueprint_plugins/src/buttons.scss +47 -47
- data/examples/blueprint_plugins/src/ie.scss +3 -3
- data/examples/blueprint_plugins/src/link_icons.scss +13 -13
- data/examples/blueprint_plugins/src/print.scss +3 -3
- data/examples/blueprint_plugins/src/rtl_screen.scss +15 -15
- data/examples/blueprint_plugins/src/screen.scss +12 -12
- data/examples/blueprint_scoped/src/ie.scss +4 -4
- data/examples/blueprint_scoped/src/print.scss +4 -4
- data/examples/blueprint_scoped/src/screen.scss +5 -5
- data/examples/blueprint_scoped_form/src/ie.scss +3 -3
- data/examples/blueprint_scoped_form/src/print.scss +3 -3
- data/examples/blueprint_scoped_form/src/screen.scss +15 -15
- data/examples/blueprint_semantic/config.rb +7 -7
- data/examples/blueprint_semantic/index.html.haml +86 -86
- data/examples/blueprint_semantic/parts/fancy_type.html.haml +100 -100
- data/examples/blueprint_semantic/parts/liquid.html.haml +100 -100
- data/examples/blueprint_semantic/src/ie.scss +3 -3
- data/examples/blueprint_semantic/src/liquid.scss +69 -69
- data/examples/blueprint_semantic/src/print.scss +3 -3
- data/examples/blueprint_semantic/src/screen.scss +69 -69
- data/examples/compass/bootstrap.rb +3 -3
- data/examples/compass/clean.rb +1 -1
- data/examples/compass/compass.html.haml +39 -39
- data/examples/compass/config.rb +8 -8
- data/examples/compass/pie.html.haml +73 -73
- data/examples/compass/sprites.html.haml +37 -37
- data/examples/compass/src/bp_layout.scss +18 -18
- data/examples/compass/src/compass.scss +46 -46
- data/examples/compass/src/pie.scss +110 -110
- data/examples/compass/src/sprites.scss +24 -24
- data/examples/compass/src/sticky_footer.scss +11 -11
- data/examples/compass/src/utilities.scss +108 -108
- data/examples/compass/sticky_footer.html.haml +13 -13
- data/examples/compass/utilities.html.haml +189 -189
- data/examples/css3/bootstrap.rb +3 -3
- data/examples/css3/clean.rb +2 -2
- data/examples/css3/config.rb +6 -6
- data/examples/css3/extensions/fancy-fonts/templates/project/fancy-fonts.sass +10 -10
- data/examples/css3/extensions/fancy-fonts/templates/project/manifest.rb +6 -6
- data/examples/css3/gradients.html.haml +68 -68
- data/examples/css3/index.html.haml +57 -57
- data/examples/css3/src/_base.scss +13 -13
- data/examples/css3/src/fancy-fonts.scss +13 -13
- data/examples/css3/src/gradients.scss +85 -85
- data/examples/css3/src/main.scss +108 -108
- data/examples/downloader.rb +58 -58
- data/examples/ninesixty/bootstrap.rb +4 -4
- data/examples/ninesixty/clean.rb +1 -1
- data/examples/ninesixty/config.rb +9 -9
- data/examples/ninesixty/src/grid.scss +15 -15
- data/examples/ninesixty/src/text.scss +8 -8
- data/examples/susy/bootstrap.rb +3 -3
- data/examples/susy/clean.rb +1 -1
- data/examples/susy/config.rb +9 -9
- data/examples/susy/src/_base.scss +61 -61
- data/examples/susy/src/_defaults.scss +140 -140
- data/examples/susy/src/screen.scss +100 -100
- data/examples/yui/bootstrap.rb +2 -2
- data/examples/yui/clean.rb +1 -1
- data/examples/yui/divisions.html.haml +179 -179
- data/examples/yui/index.html.haml +19 -19
- data/examples/yui/src/screen.scss +13 -13
- data/examples/yui/sub_divisions.html.haml +169 -169
- data/examples/yui/templates.html.haml +54 -54
- data/examples/yui/typography.html.haml +132 -132
- data/features/command_line.feature +292 -292
- data/features/extensions.feature +27 -27
- data/features/step_definitions/command_line_steps.rb +268 -268
- data/features/step_definitions/extension_steps.rb +24 -24
- data/frameworks/blueprint/stylesheets/_blueprint.scss +37 -37
- data/frameworks/blueprint/stylesheets/blueprint/_buttons.scss +100 -100
- data/frameworks/blueprint/stylesheets/blueprint/_colors.scss +36 -36
- data/frameworks/blueprint/stylesheets/blueprint/_debug.scss +28 -28
- data/frameworks/blueprint/stylesheets/blueprint/_fancy-type.scss +88 -88
- data/frameworks/blueprint/stylesheets/blueprint/_form.scss +66 -66
- data/frameworks/blueprint/stylesheets/blueprint/_grid.scss +258 -258
- data/frameworks/blueprint/stylesheets/blueprint/_ie.scss +111 -111
- data/frameworks/blueprint/stylesheets/blueprint/_interaction.scss +66 -66
- data/frameworks/blueprint/stylesheets/blueprint/_link-icons.scss +37 -37
- data/frameworks/blueprint/stylesheets/blueprint/_liquid.scss +152 -152
- data/frameworks/blueprint/stylesheets/blueprint/_print.scss +86 -86
- data/frameworks/blueprint/stylesheets/blueprint/_reset.scss +2 -2
- data/frameworks/blueprint/stylesheets/blueprint/_rtl.scss +121 -121
- data/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss +52 -52
- data/frameworks/blueprint/stylesheets/blueprint/_typography.scss +90 -90
- data/frameworks/blueprint/stylesheets/blueprint/_utilities.scss +37 -37
- data/frameworks/blueprint/stylesheets/blueprint/reset/_utilities.scss +83 -83
- data/frameworks/blueprint/templates/basic/ie.sass +4 -4
- data/frameworks/blueprint/templates/basic/manifest.rb +30 -30
- data/frameworks/blueprint/templates/basic/partials/_base.sass +10 -10
- data/frameworks/blueprint/templates/basic/print.sass +4 -4
- data/frameworks/blueprint/templates/basic/screen.sass +12 -12
- data/frameworks/blueprint/templates/buttons/buttons.sass +49 -49
- data/frameworks/blueprint/templates/buttons/buttons/cross.png +0 -0
- data/frameworks/blueprint/templates/buttons/buttons/key.png +0 -0
- data/frameworks/blueprint/templates/buttons/buttons/tick.png +0 -0
- data/frameworks/blueprint/templates/buttons/manifest.rb +17 -17
- data/frameworks/blueprint/templates/link_icons/link_icons.sass +13 -13
- data/frameworks/blueprint/templates/link_icons/manifest.rb +23 -23
- data/frameworks/blueprint/templates/project/ie.sass +16 -16
- data/frameworks/blueprint/templates/project/manifest.rb +30 -30
- data/frameworks/blueprint/templates/project/partials/_base.sass +11 -11
- data/frameworks/blueprint/templates/project/print.sass +7 -7
- data/frameworks/blueprint/templates/project/screen.sass +46 -46
- data/frameworks/blueprint/templates/semantic/ie.sass +16 -16
- data/frameworks/blueprint/templates/semantic/manifest.rb +33 -33
- data/frameworks/blueprint/templates/semantic/partials/_base.sass +10 -10
- data/frameworks/blueprint/templates/semantic/partials/_form.sass +5 -5
- data/frameworks/blueprint/templates/semantic/partials/_page.sass +17 -17
- data/frameworks/blueprint/templates/semantic/partials/_two_col.sass +38 -38
- data/frameworks/blueprint/templates/semantic/print.sass +4 -4
- data/frameworks/blueprint/templates/semantic/screen.sass +14 -14
- data/frameworks/compass/stylesheets/_compass.scss +3 -3
- data/frameworks/compass/stylesheets/_lemonade.scss +37 -37
- data/frameworks/compass/stylesheets/compass/_css3.scss +20 -20
- data/frameworks/compass/stylesheets/compass/_layout.scss +3 -3
- data/frameworks/compass/stylesheets/compass/_reset-legacy.scss +3 -3
- data/frameworks/compass/stylesheets/compass/_reset.scss +3 -3
- data/frameworks/compass/stylesheets/compass/_support.scss +40 -40
- data/frameworks/compass/stylesheets/compass/_typography.scss +4 -4
- data/frameworks/compass/stylesheets/compass/_utilities.scss +9 -9
- data/frameworks/compass/stylesheets/compass/css3/_appearance.scss +17 -17
- data/frameworks/compass/stylesheets/compass/css3/_background-clip.scss +43 -43
- data/frameworks/compass/stylesheets/compass/css3/_background-origin.scss +42 -42
- data/frameworks/compass/stylesheets/compass/css3/_background-size.scss +26 -26
- data/frameworks/compass/stylesheets/compass/css3/_border-radius.scss +130 -130
- data/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss +76 -76
- data/frameworks/compass/stylesheets/compass/css3/_box-sizing.scss +13 -13
- data/frameworks/compass/stylesheets/compass/css3/_box.scss +111 -111
- data/frameworks/compass/stylesheets/compass/css3/_columns.scss +156 -156
- data/frameworks/compass/stylesheets/compass/css3/_filter.scss +23 -23
- data/frameworks/compass/stylesheets/compass/css3/_font-face.scss +48 -48
- data/frameworks/compass/stylesheets/compass/css3/_hyphenation.scss +77 -77
- data/frameworks/compass/stylesheets/compass/css3/_images.scss +132 -132
- data/frameworks/compass/stylesheets/compass/css3/_inline-block.scss +22 -22
- data/frameworks/compass/stylesheets/compass/css3/_opacity.scss +19 -19
- data/frameworks/compass/stylesheets/compass/css3/_pie.scss +72 -72
- data/frameworks/compass/stylesheets/compass/css3/_regions.scss +21 -21
- data/frameworks/compass/stylesheets/compass/css3/_shared.scss +38 -38
- data/frameworks/compass/stylesheets/compass/css3/_text-shadow.scss +87 -87
- data/frameworks/compass/stylesheets/compass/css3/_transform-legacy.scss +87 -87
- data/frameworks/compass/stylesheets/compass/css3/_transform.scss +598 -598
- data/frameworks/compass/stylesheets/compass/css3/_transition.scss +221 -221
- data/frameworks/compass/stylesheets/compass/css3/_user-interface.scss +17 -17
- data/frameworks/compass/stylesheets/compass/layout/_grid-background.scss +178 -178
- data/frameworks/compass/stylesheets/compass/layout/_sticky-footer.scss +23 -23
- data/frameworks/compass/stylesheets/compass/layout/_stretching.scss +23 -23
- data/frameworks/compass/stylesheets/compass/reset/_utilities-legacy.scss +135 -135
- data/frameworks/compass/stylesheets/compass/reset/_utilities.scss +142 -142
- data/frameworks/compass/stylesheets/compass/typography/_links.scss +3 -3
- data/frameworks/compass/stylesheets/compass/typography/_lists.scss +4 -4
- data/frameworks/compass/stylesheets/compass/typography/_text.scss +4 -4
- data/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss +221 -221
- data/frameworks/compass/stylesheets/compass/typography/links/_hover-link.scss +5 -5
- data/frameworks/compass/stylesheets/compass/typography/links/_link-colors.scss +28 -28
- data/frameworks/compass/stylesheets/compass/typography/links/_unstyled-link.scss +7 -7
- data/frameworks/compass/stylesheets/compass/typography/lists/_bullets.scss +34 -34
- data/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss +61 -61
- data/frameworks/compass/stylesheets/compass/typography/lists/_inline-block-list.scss +50 -50
- data/frameworks/compass/stylesheets/compass/typography/lists/_inline-list.scss +44 -44
- data/frameworks/compass/stylesheets/compass/typography/text/_ellipsis.scss +25 -25
- data/frameworks/compass/stylesheets/compass/typography/text/_force-wrap.scss +12 -12
- data/frameworks/compass/stylesheets/compass/typography/text/_nowrap.scss +2 -2
- data/frameworks/compass/stylesheets/compass/typography/text/_replacement.scss +68 -68
- data/frameworks/compass/stylesheets/compass/utilities/_general.scss +6 -6
- data/frameworks/compass/stylesheets/compass/utilities/_links.scss +5 -5
- data/frameworks/compass/stylesheets/compass/utilities/_lists.scss +6 -6
- data/frameworks/compass/stylesheets/compass/utilities/_print.scss +17 -17
- data/frameworks/compass/stylesheets/compass/utilities/_sprites.scss +2 -2
- data/frameworks/compass/stylesheets/compass/utilities/_tables.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/_text.scss +5 -5
- data/frameworks/compass/stylesheets/compass/utilities/color/_contrast.scss +27 -27
- data/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss +44 -44
- data/frameworks/compass/stylesheets/compass/utilities/general/_float.scss +29 -29
- data/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss +46 -46
- data/frameworks/compass/stylesheets/compass/utilities/general/_min.scss +16 -16
- data/frameworks/compass/stylesheets/compass/utilities/general/_reset.scss +1 -1
- data/frameworks/compass/stylesheets/compass/utilities/general/_tabs.scss +1 -1
- data/frameworks/compass/stylesheets/compass/utilities/general/_tag-cloud.scss +18 -18
- data/frameworks/compass/stylesheets/compass/utilities/links/_hover-link.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/links/_link-colors.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/links/_unstyled-link.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/lists/_horizontal-list.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss +65 -65
- data/frameworks/compass/stylesheets/compass/utilities/sprites/_sprite-img.scss +78 -78
- data/frameworks/compass/stylesheets/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -22
- data/frameworks/compass/stylesheets/compass/utilities/tables/_borders.scss +33 -33
- data/frameworks/compass/stylesheets/compass/utilities/tables/_scaffolding.scss +9 -9
- data/frameworks/compass/stylesheets/compass/utilities/text/_ellipsis.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/text/_nowrap.scss +3 -3
- data/frameworks/compass/stylesheets/compass/utilities/text/_replacement.scss +3 -3
- data/frameworks/compass/templates/ellipsis/ellipsis.sass +8 -8
- data/frameworks/compass/templates/ellipsis/manifest.rb +26 -26
- data/frameworks/compass/templates/ellipsis/xml/ellipsis.xml +13 -13
- data/frameworks/compass/templates/extension/manifest.rb +26 -26
- data/frameworks/compass/templates/extension/stylesheets/main.sass +1 -1
- data/frameworks/compass/templates/extension/templates/project/manifest.rb +2 -2
- data/frameworks/compass/templates/extension/templates/project/screen.sass +1 -1
- data/frameworks/compass/templates/pie/LICENSE +12 -12
- data/frameworks/compass/templates/pie/LICENSE-APACHE2.txt +13 -13
- data/frameworks/compass/templates/pie/LICENSE-GPL2.txt +277 -277
- data/frameworks/compass/templates/pie/PIE.htc +96 -96
- data/frameworks/compass/templates/pie/manifest.rb +39 -39
- data/frameworks/compass/templates/pie/pie.scss +73 -73
- data/frameworks/compass/templates/project/USAGE.markdown +32 -32
- data/frameworks/compass/templates/project/ie.sass +6 -6
- data/frameworks/compass/templates/project/manifest.rb +3 -3
- data/frameworks/compass/templates/project/print.sass +6 -6
- data/frameworks/compass/templates/project/screen.sass +7 -7
- data/lib/compass.rb +37 -37
- data/lib/compass/actions.rb +115 -115
- data/lib/compass/app_integration.rb +39 -39
- data/lib/compass/app_integration/rails.rb +18 -18
- data/lib/compass/app_integration/stand_alone.rb +22 -22
- data/lib/compass/app_integration/stand_alone/configuration_defaults.rb +32 -32
- data/lib/compass/app_integration/stand_alone/installer.rb +83 -83
- data/lib/compass/browser_support.rb +62 -62
- data/lib/compass/commands.rb +12 -12
- data/lib/compass/commands/base.rb +44 -44
- data/lib/compass/commands/clean_project.rb +79 -79
- data/lib/compass/commands/create_project.rb +131 -131
- data/lib/compass/commands/default.rb +50 -50
- data/lib/compass/commands/extension_command.rb +60 -60
- data/lib/compass/commands/generate_grid_background.rb +96 -96
- data/lib/compass/commands/help.rb +85 -85
- data/lib/compass/commands/imports.rb +35 -35
- data/lib/compass/commands/installer_command.rb +32 -32
- data/lib/compass/commands/interactive.rb +61 -61
- data/lib/compass/commands/list_frameworks.rb +38 -38
- data/lib/compass/commands/print_version.rb +99 -99
- data/lib/compass/commands/project_base.rb +103 -103
- data/lib/compass/commands/project_stats.rb +178 -178
- data/lib/compass/commands/project_structure.rb +93 -93
- data/lib/compass/commands/registry.rb +40 -40
- data/lib/compass/commands/sprite.rb +89 -89
- data/lib/compass/commands/stamp_pattern.rb +90 -90
- data/lib/compass/commands/unpack_extension.rb +120 -120
- data/lib/compass/commands/update_project.rb +139 -139
- data/lib/compass/commands/validate_project.rb +77 -77
- data/lib/compass/commands/watch_project.rb +170 -170
- data/lib/compass/commands/write_configuration.rb +125 -125
- data/lib/compass/compiler.rb +200 -200
- data/lib/compass/configuration.rb +91 -91
- data/lib/compass/configuration/adapters.rb +77 -77
- data/lib/compass/configuration/comments.rb +59 -59
- data/lib/compass/configuration/data.rb +193 -193
- data/lib/compass/configuration/defaults.rb +187 -187
- data/lib/compass/configuration/file_data.rb +21 -21
- data/lib/compass/configuration/helpers.rb +160 -160
- data/lib/compass/configuration/inheritance.rb +304 -304
- data/lib/compass/configuration/paths.rb +19 -19
- data/lib/compass/configuration/serialization.rb +88 -88
- data/lib/compass/dependencies.rb +12 -12
- data/lib/compass/errors.rb +11 -11
- data/lib/compass/exec.rb +23 -23
- data/lib/compass/exec/command_option_parser.rb +23 -23
- data/lib/compass/exec/global_options_parser.rb +63 -63
- data/lib/compass/exec/helpers.rb +21 -21
- data/lib/compass/exec/project_options_parser.rb +66 -66
- data/lib/compass/exec/sub_command_ui.rb +51 -51
- data/lib/compass/exec/switch_ui.rb +179 -179
- data/lib/compass/frameworks.rb +133 -133
- data/lib/compass/grid_builder.rb +102 -102
- data/lib/compass/installers.rb +3 -3
- data/lib/compass/installers/bare_installer.rb +58 -58
- data/lib/compass/installers/base.rb +187 -187
- data/lib/compass/installers/manifest.rb +161 -161
- data/lib/compass/installers/manifest_installer.rb +61 -61
- data/lib/compass/installers/template_context.rb +43 -43
- data/lib/compass/logger.rb +103 -103
- data/lib/compass/quick_cache.rb +15 -15
- data/lib/compass/rails.rb +2 -2
- data/lib/compass/sass_extensions.rb +10 -10
- data/lib/compass/sass_extensions/functions.rb +34 -34
- data/lib/compass/sass_extensions/functions/colors.rb +67 -67
- data/lib/compass/sass_extensions/functions/constants.rb +74 -74
- data/lib/compass/sass_extensions/functions/cross_browser_support.rb +70 -70
- data/lib/compass/sass_extensions/functions/display.rb +27 -27
- data/lib/compass/sass_extensions/functions/enumerate.rb +6 -6
- data/lib/compass/sass_extensions/functions/env.rb +5 -5
- data/lib/compass/sass_extensions/functions/font_files.rb +41 -41
- data/lib/compass/sass_extensions/functions/gradient_support.rb +540 -540
- data/lib/compass/sass_extensions/functions/image_size.rb +113 -113
- data/lib/compass/sass_extensions/functions/inline_image.rb +64 -64
- data/lib/compass/sass_extensions/functions/lists.rb +101 -101
- data/lib/compass/sass_extensions/functions/math.rb +63 -63
- data/lib/compass/sass_extensions/functions/selectors.rb +63 -63
- data/lib/compass/sass_extensions/functions/sprites.rb +218 -218
- data/lib/compass/sass_extensions/functions/urls.rb +266 -266
- data/lib/compass/sass_extensions/monkey_patches.rb +3 -3
- data/lib/compass/sass_extensions/monkey_patches/browser_support.rb +95 -95
- data/lib/compass/sass_extensions/monkey_patches/traversal.rb +23 -23
- data/lib/compass/sass_extensions/sprites.rb +19 -19
- data/lib/compass/sass_extensions/sprites/engines.rb +25 -25
- data/lib/compass/sass_extensions/sprites/engines/chunky_png_engine.rb +30 -30
- data/lib/compass/sass_extensions/sprites/image.rb +151 -151
- data/lib/compass/sass_extensions/sprites/image_methods.rb +31 -31
- data/lib/compass/sass_extensions/sprites/image_row.rb +46 -46
- data/lib/compass/sass_extensions/sprites/layout_methods.rb +158 -158
- data/lib/compass/sass_extensions/sprites/row_fitter.rb +91 -91
- data/lib/compass/sass_extensions/sprites/sprite_map.rb +86 -86
- data/lib/compass/sass_extensions/sprites/sprite_methods.rb +141 -141
- data/lib/compass/sprite_importer.rb +116 -116
- data/lib/compass/sprite_importer/binding.rb +10 -10
- data/lib/compass/sprite_importer/content.erb +80 -80
- data/lib/compass/stats.rb +99 -99
- data/lib/compass/test_case.rb +38 -38
- data/lib/compass/util.rb +29 -29
- data/lib/compass/validator.rb +16 -16
- data/lib/compass/version.rb +60 -60
- data/test/fixtures/extensions/only_stylesheets/compass_init.rb +1 -1
- data/test/fixtures/extensions/only_stylesheets/scss/only_stylesheets/foo.scss +3 -3
- data/test/fixtures/fonts/bgrove.base64.txt +1 -1
- data/test/fixtures/fonts/bgrove.ttf +0 -0
- data/test/fixtures/sprites/public/images/ko/starbg26x27.png +0 -0
- data/test/fixtures/stylesheets/blueprint/config.rb +14 -14
- data/test/fixtures/stylesheets/blueprint/css/ie.css +76 -76
- data/test/fixtures/stylesheets/blueprint/css/print.css +56 -56
- data/test/fixtures/stylesheets/blueprint/css/screen.css +815 -815
- data/test/fixtures/stylesheets/blueprint/css/single-imports/buttons.css +56 -56
- data/test/fixtures/stylesheets/blueprint/css/single-imports/colors.css +80 -80
- data/test/fixtures/stylesheets/blueprint/css/single-imports/debug.css +11 -11
- data/test/fixtures/stylesheets/blueprint/css/single-imports/fancy-type.css +30 -30
- data/test/fixtures/stylesheets/blueprint/css/single-imports/form.css +42 -42
- data/test/fixtures/stylesheets/blueprint/css/single-imports/grid.css +435 -435
- data/test/fixtures/stylesheets/blueprint/css/single-imports/ie.css +76 -76
- data/test/fixtures/stylesheets/blueprint/css/single-imports/interaction.css +46 -46
- data/test/fixtures/stylesheets/blueprint/css/single-imports/link-icons.css +40 -40
- data/test/fixtures/stylesheets/blueprint/css/single-imports/liquid.css +651 -651
- data/test/fixtures/stylesheets/blueprint/css/single-imports/print.css +60 -60
- data/test/fixtures/stylesheets/blueprint/css/single-imports/reset-utilities.css +75 -75
- data/test/fixtures/stylesheets/blueprint/css/single-imports/reset.css +42 -42
- data/test/fixtures/stylesheets/blueprint/css/single-imports/rtl.css +437 -437
- data/test/fixtures/stylesheets/blueprint/css/single-imports/scaffolding.css +45 -45
- data/test/fixtures/stylesheets/blueprint/css/single-imports/typography.css +146 -146
- data/test/fixtures/stylesheets/blueprint/css/single-imports/utilities.css +35 -35
- data/test/fixtures/stylesheets/blueprint/sass/ie.sass +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/print.sass +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/screen.sass +18 -18
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/buttons.scss +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/colors.scss +34 -34
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/debug.scss +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/fancy-type.scss +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/form.scss +4 -4
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/grid.scss +2 -2
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/ie.scss +2 -2
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/interaction.scss +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/link-icons.scss +12 -12
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/liquid.scss +2 -2
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/print.scss +4 -4
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/reset-utilities.scss +4 -4
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/reset.scss +1 -1
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/rtl.scss +2 -2
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/scaffolding.scss +5 -5
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/typography.scss +3 -3
- data/test/fixtures/stylesheets/blueprint/sass/single-imports/utilities.scss +3 -3
- data/test/fixtures/stylesheets/busted_image_urls/config.rb +29 -29
- data/test/fixtures/stylesheets/busted_image_urls/css/screen.css +9 -9
- data/test/fixtures/stylesheets/busted_image_urls/sass/screen.sass +13 -13
- data/test/fixtures/stylesheets/compass/config.rb +16 -16
- data/test/fixtures/stylesheets/compass/css/background-clip.css +10 -10
- data/test/fixtures/stylesheets/compass/css/border_radius.css +14 -14
- data/test/fixtures/stylesheets/compass/css/box-sizeing.css +9 -9
- data/test/fixtures/stylesheets/compass/css/box.css +103 -103
- data/test/fixtures/stylesheets/compass/css/box_shadow.css +14 -14
- data/test/fixtures/stylesheets/compass/css/columns.css +161 -161
- data/test/fixtures/stylesheets/compass/css/filters.css +29 -29
- data/test/fixtures/stylesheets/compass/css/fonts.css +4 -4
- data/test/fixtures/stylesheets/compass/css/force-wrap.css +9 -9
- data/test/fixtures/stylesheets/compass/css/gradients.css +202 -202
- data/test/fixtures/stylesheets/compass/css/grid_background.css +71 -71
- data/test/fixtures/stylesheets/compass/css/hyphenation.css +16 -16
- data/test/fixtures/stylesheets/compass/css/image_size.css +15 -15
- data/test/fixtures/stylesheets/compass/css/images.css +8 -8
- data/test/fixtures/stylesheets/compass/css/layout.css +16 -16
- data/test/fixtures/stylesheets/compass/css/legacy_clearfix.css +26 -26
- data/test/fixtures/stylesheets/compass/css/lists.css +151 -151
- data/test/fixtures/stylesheets/compass/css/opacity.css +3 -3
- data/test/fixtures/stylesheets/compass/css/pie.css +26 -26
- data/test/fixtures/stylesheets/compass/css/print.css +11 -11
- data/test/fixtures/stylesheets/compass/css/regions.css +7 -7
- data/test/fixtures/stylesheets/compass/css/replacement.css +59 -59
- data/test/fixtures/stylesheets/compass/css/reset.css +59 -59
- data/test/fixtures/stylesheets/compass/css/sprites.css +1262 -1262
- data/test/fixtures/stylesheets/compass/css/stretching.css +66 -66
- data/test/fixtures/stylesheets/compass/css/text_shadow.css +29 -29
- data/test/fixtures/stylesheets/compass/css/transform.css +441 -441
- data/test/fixtures/stylesheets/compass/css/transition.css +128 -128
- data/test/fixtures/stylesheets/compass/css/user-interface.css +4 -4
- data/test/fixtures/stylesheets/compass/css/utilities.css +56 -56
- data/test/fixtures/stylesheets/compass/css/vertical_rhythm.css +45 -45
- data/test/fixtures/stylesheets/compass/sass/background-clip.scss +7 -7
- data/test/fixtures/stylesheets/compass/sass/border_radius.scss +5 -5
- data/test/fixtures/stylesheets/compass/sass/box-sizeing.scss +7 -7
- data/test/fixtures/stylesheets/compass/sass/box.sass +49 -49
- data/test/fixtures/stylesheets/compass/sass/box_shadow.scss +5 -5
- data/test/fixtures/stylesheets/compass/sass/columns.scss +28 -28
- data/test/fixtures/stylesheets/compass/sass/filters.scss +24 -24
- data/test/fixtures/stylesheets/compass/sass/fonts.sass +2 -2
- data/test/fixtures/stylesheets/compass/sass/force-wrap.scss +3 -3
- data/test/fixtures/stylesheets/compass/sass/gradients.sass +96 -96
- data/test/fixtures/stylesheets/compass/sass/grid_background.scss +33 -33
- data/test/fixtures/stylesheets/compass/sass/hyphenation.scss +10 -10
- data/test/fixtures/stylesheets/compass/sass/image_size.sass +15 -15
- data/test/fixtures/stylesheets/compass/sass/images.scss +8 -8
- data/test/fixtures/stylesheets/compass/sass/layout.sass +3 -3
- data/test/fixtures/stylesheets/compass/sass/legacy_clearfix.scss +14 -14
- data/test/fixtures/stylesheets/compass/sass/lists.scss +11 -11
- data/test/fixtures/stylesheets/compass/sass/opacity.scss +5 -5
- data/test/fixtures/stylesheets/compass/sass/pie.scss +47 -47
- data/test/fixtures/stylesheets/compass/sass/print.sass +5 -5
- data/test/fixtures/stylesheets/compass/sass/regions.scss +3 -3
- data/test/fixtures/stylesheets/compass/sass/replacement.scss +22 -22
- data/test/fixtures/stylesheets/compass/sass/reset.sass +12 -12
- data/test/fixtures/stylesheets/compass/sass/sprites.scss +13 -13
- data/test/fixtures/stylesheets/compass/sass/stretching.sass +33 -33
- data/test/fixtures/stylesheets/compass/sass/text_shadow.scss +11 -11
- data/test/fixtures/stylesheets/compass/sass/transform.scss +87 -87
- data/test/fixtures/stylesheets/compass/sass/transition.scss +24 -24
- data/test/fixtures/stylesheets/compass/sass/user-interface.scss +4 -4
- data/test/fixtures/stylesheets/compass/sass/utilities.scss +20 -20
- data/test/fixtures/stylesheets/compass/sass/vertical_rhythm.scss +15 -15
- data/test/fixtures/stylesheets/envtest/config.rb +9 -9
- data/test/fixtures/stylesheets/envtest/css/env.css +2 -2
- data/test/fixtures/stylesheets/envtest/sass/env.scss +3 -3
- data/test/fixtures/stylesheets/error/config.rb +10 -10
- data/test/fixtures/stylesheets/error/sass/screen.sass +2 -2
- data/test/fixtures/stylesheets/image_urls/config.rb +19 -19
- data/test/fixtures/stylesheets/image_urls/css/screen.css +5 -5
- data/test/fixtures/stylesheets/image_urls/sass/screen.sass +8 -8
- data/test/fixtures/stylesheets/relative/config.rb +10 -10
- data/test/fixtures/stylesheets/relative/css/ie.css +1 -1
- data/test/fixtures/stylesheets/relative/css/print.css +1 -1
- data/test/fixtures/stylesheets/relative/css/screen.css +1 -1
- data/test/fixtures/stylesheets/relative/sass/ie.sass +5 -5
- data/test/fixtures/stylesheets/relative/sass/print.sass +3 -3
- data/test/fixtures/stylesheets/relative/sass/screen.sass +2 -2
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/config.rb +25 -25
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/sass/ie.scss +5 -5
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/sass/print.scss +3 -3
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/sass/screen.scss +6 -6
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/stylesheets/ie.css +5 -5
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/stylesheets/print.css +3 -3
- data/test/fixtures/stylesheets/uses_only_stylesheets_ext/stylesheets/screen.css +68 -68
- data/test/fixtures/stylesheets/valid/config.rb +9 -9
- data/test/fixtures/stylesheets/valid/sass/simple.sass +1 -1
- data/test/helpers/command_line.rb +114 -114
- data/test/helpers/diff.rb +48 -48
- data/test/helpers/io.rb +36 -36
- data/test/helpers/rails.rb +55 -55
- data/test/helpers/test_case.rb +62 -62
- data/test/integrations/compass_test.rb +224 -224
- data/test/integrations/sprites_test.rb +843 -843
- data/test/test_helper.rb +73 -73
- data/test/units/actions_test.rb +23 -23
- data/test/units/command_line_test.rb +60 -60
- data/test/units/compass_module_test.rb +36 -36
- data/test/units/compass_png_test.rb +45 -45
- data/test/units/compiler_test.rb +10 -10
- data/test/units/configuration_test.rb +440 -440
- data/test/units/regressions_test.rb +35 -35
- data/test/units/sass_extensions_test.rb +198 -198
- data/test/units/sprites/engine_test.rb +47 -47
- data/test/units/sprites/image_row_test.rb +57 -57
- data/test/units/sprites/image_test.rb +99 -99
- data/test/units/sprites/importer_test.rb +90 -90
- data/test/units/sprites/layout_test.rb +154 -154
- data/test/units/sprites/row_fitter_test.rb +65 -65
- data/test/units/sprites/sprite_command_test.rb +54 -54
- data/test/units/sprites/sprite_map_test.rb +130 -130
- metadata +1304 -1310
@@ -1,87 +1,87 @@
|
|
1
|
-
@import "shared";
|
2
|
-
|
3
|
-
@warn "This version of the transform module has been deprecated and will be removed.";
|
4
|
-
|
5
|
-
// CSS Transform and Transform-Origin
|
6
|
-
|
7
|
-
// Apply a transform sent as a complete string.
|
8
|
-
|
9
|
-
@mixin apply-transform($transform) {
|
10
|
-
@include experimental(transform, $transform,
|
11
|
-
-moz, -webkit, -o, not -ms, not -khtml, official
|
12
|
-
);
|
13
|
-
}
|
14
|
-
|
15
|
-
// Apply a transform-origin sent as a complete string.
|
16
|
-
|
17
|
-
@mixin apply-origin($origin) {
|
18
|
-
@include experimental(transform-origin, $origin,
|
19
|
-
-moz, -webkit, -o, not -ms, not -khtml, official
|
20
|
-
);
|
21
|
-
}
|
22
|
-
|
23
|
-
// transform-origin requires x and y coordinates
|
24
|
-
//
|
25
|
-
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
26
|
-
|
27
|
-
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
28
|
-
@if $originx or $originy {
|
29
|
-
@if $originy {
|
30
|
-
@include apply-origin($originx or 50% $originy);
|
31
|
-
} @else {
|
32
|
-
@include apply-origin($originx);
|
33
|
-
}
|
34
|
-
}
|
35
|
-
}
|
36
|
-
|
37
|
-
// A full transform mixin with everything you could want
|
38
|
-
//
|
39
|
-
// * including origin adjustments if you want them
|
40
|
-
// * scale, rotate and skew require units of degrees(deg)
|
41
|
-
// * scale takes a multiplier, rotate and skew take degrees
|
42
|
-
|
43
|
-
@mixin transform(
|
44
|
-
$scale: 1,
|
45
|
-
$rotate: 0deg,
|
46
|
-
$transx: 0,
|
47
|
-
$transy: 0,
|
48
|
-
$skewx: 0deg,
|
49
|
-
$skewy: 0deg,
|
50
|
-
$originx: false,
|
51
|
-
$originy: false
|
52
|
-
) {
|
53
|
-
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
54
|
-
@include apply-transform($transform);
|
55
|
-
@include transform-origin($originx, $originy);
|
56
|
-
}
|
57
|
-
|
58
|
-
// Transform Partials
|
59
|
-
//
|
60
|
-
// These work well on their own, but they don't add to each other, they override.
|
61
|
-
// Use them with extra origin args, or along side +transform-origin
|
62
|
-
|
63
|
-
// Adjust only the scale, with optional origin coordinates
|
64
|
-
|
65
|
-
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
66
|
-
@include apply-transform(scale($scale));
|
67
|
-
@include transform-origin($originx, $originy);
|
68
|
-
}
|
69
|
-
|
70
|
-
// Adjust only the rotation, with optional origin coordinates
|
71
|
-
|
72
|
-
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
73
|
-
@include apply-transform(rotate($rotate));
|
74
|
-
@include transform-origin($originx, $originy);
|
75
|
-
}
|
76
|
-
|
77
|
-
// Adjust only the translation
|
78
|
-
|
79
|
-
@mixin translate($transx: 0, $transy: 0) {
|
80
|
-
@include apply-transform(translate($transx, $transy));
|
81
|
-
}
|
82
|
-
|
83
|
-
// Adjust only the skew, with optional origin coordinates
|
84
|
-
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
85
|
-
@include apply-transform(skew($skewx, $skewy));
|
86
|
-
@include transform-origin($originx, $originy);
|
87
|
-
}
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
@warn "This version of the transform module has been deprecated and will be removed.";
|
4
|
+
|
5
|
+
// CSS Transform and Transform-Origin
|
6
|
+
|
7
|
+
// Apply a transform sent as a complete string.
|
8
|
+
|
9
|
+
@mixin apply-transform($transform) {
|
10
|
+
@include experimental(transform, $transform,
|
11
|
+
-moz, -webkit, -o, not -ms, not -khtml, official
|
12
|
+
);
|
13
|
+
}
|
14
|
+
|
15
|
+
// Apply a transform-origin sent as a complete string.
|
16
|
+
|
17
|
+
@mixin apply-origin($origin) {
|
18
|
+
@include experimental(transform-origin, $origin,
|
19
|
+
-moz, -webkit, -o, not -ms, not -khtml, official
|
20
|
+
);
|
21
|
+
}
|
22
|
+
|
23
|
+
// transform-origin requires x and y coordinates
|
24
|
+
//
|
25
|
+
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
26
|
+
|
27
|
+
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
28
|
+
@if $originx or $originy {
|
29
|
+
@if $originy {
|
30
|
+
@include apply-origin($originx or 50% $originy);
|
31
|
+
} @else {
|
32
|
+
@include apply-origin($originx);
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
// A full transform mixin with everything you could want
|
38
|
+
//
|
39
|
+
// * including origin adjustments if you want them
|
40
|
+
// * scale, rotate and skew require units of degrees(deg)
|
41
|
+
// * scale takes a multiplier, rotate and skew take degrees
|
42
|
+
|
43
|
+
@mixin transform(
|
44
|
+
$scale: 1,
|
45
|
+
$rotate: 0deg,
|
46
|
+
$transx: 0,
|
47
|
+
$transy: 0,
|
48
|
+
$skewx: 0deg,
|
49
|
+
$skewy: 0deg,
|
50
|
+
$originx: false,
|
51
|
+
$originy: false
|
52
|
+
) {
|
53
|
+
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
54
|
+
@include apply-transform($transform);
|
55
|
+
@include transform-origin($originx, $originy);
|
56
|
+
}
|
57
|
+
|
58
|
+
// Transform Partials
|
59
|
+
//
|
60
|
+
// These work well on their own, but they don't add to each other, they override.
|
61
|
+
// Use them with extra origin args, or along side +transform-origin
|
62
|
+
|
63
|
+
// Adjust only the scale, with optional origin coordinates
|
64
|
+
|
65
|
+
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
66
|
+
@include apply-transform(scale($scale));
|
67
|
+
@include transform-origin($originx, $originy);
|
68
|
+
}
|
69
|
+
|
70
|
+
// Adjust only the rotation, with optional origin coordinates
|
71
|
+
|
72
|
+
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
73
|
+
@include apply-transform(rotate($rotate));
|
74
|
+
@include transform-origin($originx, $originy);
|
75
|
+
}
|
76
|
+
|
77
|
+
// Adjust only the translation
|
78
|
+
|
79
|
+
@mixin translate($transx: 0, $transy: 0) {
|
80
|
+
@include apply-transform(translate($transx, $transy));
|
81
|
+
}
|
82
|
+
|
83
|
+
// Adjust only the skew, with optional origin coordinates
|
84
|
+
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
85
|
+
@include apply-transform(skew($skewx, $skewy));
|
86
|
+
@include transform-origin($originx, $originy);
|
87
|
+
}
|
@@ -1,598 +1,598 @@
|
|
1
|
-
@import "shared";
|
2
|
-
|
3
|
-
// @doc off
|
4
|
-
// Note ----------------------------------------------------------------------
|
5
|
-
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
6
|
-
// only in the most recent builds. You should also provide fallback 2d support for
|
7
|
-
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
8
|
-
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
9
|
-
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
10
|
-
// and also accepts 'true' (3D). Currently the lists are as follows:
|
11
|
-
// 2D: Mozilla, Webkit, Opera, Official
|
12
|
-
// 3D: Webkit, Firefox.
|
13
|
-
|
14
|
-
// Available Transforms ------------------------------------------------------
|
15
|
-
// - Scale (2d and 3d)
|
16
|
-
// - Rotate (2d and 3d)
|
17
|
-
// - Translate (2d and 3d)
|
18
|
-
// - Skew (2d only)
|
19
|
-
|
20
|
-
// Transform Parameters ------------------------------------------------------
|
21
|
-
// - Transform Origin (2d and 3d)
|
22
|
-
// - Perspective (3d)
|
23
|
-
// - Perspective Origin (3d)
|
24
|
-
// - Transform Style (3d)
|
25
|
-
// - Backface Visibility (3d)
|
26
|
-
|
27
|
-
// Mixins --------------------------------------------------------------------
|
28
|
-
// transform-origin
|
29
|
-
// - shortcuts: transform-origin2d, transform-origin3d
|
30
|
-
// - helpers: apply-origin
|
31
|
-
// transform
|
32
|
-
// - shortcuts: transform2d, transform3d
|
33
|
-
// - helpers: simple-transform, create-transform
|
34
|
-
// perspective
|
35
|
-
// - helpers: perspective-origin
|
36
|
-
// transform-style
|
37
|
-
// backface-visibility
|
38
|
-
// scale
|
39
|
-
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
40
|
-
// rotate
|
41
|
-
// - shortcuts: rotateX, rotateY, rotate3d
|
42
|
-
// translate
|
43
|
-
// - shortcuts: translateX, translateY, translateZ, translate3d
|
44
|
-
// skew
|
45
|
-
// - shortcuts: skewX, skewY
|
46
|
-
|
47
|
-
// Defaults ------------------------------------------------------------------
|
48
|
-
// @doc on
|
49
|
-
|
50
|
-
// The default x-origin for transforms
|
51
|
-
$default-origin-x : 50% !default;
|
52
|
-
// The default y-origin for transforms
|
53
|
-
$default-origin-y : 50% !default;
|
54
|
-
// The default z-origin for transforms
|
55
|
-
$default-origin-z : 50% !default;
|
56
|
-
|
57
|
-
|
58
|
-
// The default x-multiplier for scaling
|
59
|
-
$default-scale-x : 1.25 !default;
|
60
|
-
// The default y-multiplier for scaling
|
61
|
-
$default-scale-y : $default-scale-x !default;
|
62
|
-
// The default z-multiplier for scaling
|
63
|
-
$default-scale-z : $default-scale-x !default;
|
64
|
-
|
65
|
-
|
66
|
-
// The default angle for rotations
|
67
|
-
$default-rotate : 45deg !default;
|
68
|
-
|
69
|
-
|
70
|
-
// The default x-vector for the axis of 3d rotations
|
71
|
-
$default-vector-x : 1 !default;
|
72
|
-
// The default y-vector for the axis of 3d rotations
|
73
|
-
$default-vector-y : 1 !default;
|
74
|
-
// The default z-vector for the axis of 3d rotations
|
75
|
-
$default-vector-z : 1 !default;
|
76
|
-
|
77
|
-
|
78
|
-
// The default x-length for translations
|
79
|
-
$default-translate-x : 1em !default;
|
80
|
-
// The default y-length for translations
|
81
|
-
$default-translate-y : $default-translate-x !default;
|
82
|
-
// The default z-length for translations
|
83
|
-
$default-translate-z : $default-translate-x !default;
|
84
|
-
|
85
|
-
|
86
|
-
// The default x-angle for skewing
|
87
|
-
$default-skew-x : 5deg !default;
|
88
|
-
// The default y-angle for skewing
|
89
|
-
$default-skew-y : 5deg !default;
|
90
|
-
|
91
|
-
|
92
|
-
// **Transform-origin**
|
93
|
-
// Transform-origin sent as a complete string
|
94
|
-
//
|
95
|
-
// @include apply-origin( origin [, 3D-only ] )
|
96
|
-
//
|
97
|
-
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
98
|
-
// in percentages, absolute (px, cm, in, em etc..) or relative
|
99
|
-
// (left, top, right, bottom, center) units
|
100
|
-
//
|
101
|
-
// @param only3d Set this to true to only apply this
|
102
|
-
// mixin where browsers have 3D support.
|
103
|
-
@mixin apply-origin($origin, $only3d) {
|
104
|
-
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
105
|
-
@if $only3d {
|
106
|
-
@include experimental(transform-origin, $origin,
|
107
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
108
|
-
);
|
109
|
-
} @else {
|
110
|
-
@include experimental(transform-origin, $origin,
|
111
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
112
|
-
);
|
113
|
-
}
|
114
|
-
}
|
115
|
-
|
116
|
-
// Transform-origin sent as individual arguments:
|
117
|
-
//
|
118
|
-
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
119
|
-
//
|
120
|
-
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
121
|
-
//
|
122
|
-
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
123
|
-
@mixin transform-origin(
|
124
|
-
$origin-x: $default-origin-x,
|
125
|
-
$origin-y: $default-origin-y,
|
126
|
-
$origin-z: false,
|
127
|
-
$only3d: if($origin-z, true, false)
|
128
|
-
) {
|
129
|
-
$origin: unquote('');
|
130
|
-
@if $origin-x or $origin-y or $origin-z {
|
131
|
-
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
132
|
-
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
133
|
-
@if $origin-z { $origin: $origin $origin-z; }
|
134
|
-
@include apply-origin($origin, $only3d);
|
135
|
-
}
|
136
|
-
}
|
137
|
-
|
138
|
-
|
139
|
-
// Transform sent as a complete string:
|
140
|
-
//
|
141
|
-
// @include transform( transforms [, 3D-only ] )
|
142
|
-
//
|
143
|
-
// where 'transforms' is a space separated list of all the transforms to be applied.
|
144
|
-
@mixin transform(
|
145
|
-
$transform,
|
146
|
-
$only3d: false
|
147
|
-
) {
|
148
|
-
@if $only3d {
|
149
|
-
@include experimental(transform, $transform,
|
150
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
151
|
-
);
|
152
|
-
} @else {
|
153
|
-
@include experimental(transform, $transform,
|
154
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
155
|
-
);
|
156
|
-
}
|
157
|
-
}
|
158
|
-
|
159
|
-
// Shortcut to target all browsers with 2D transform support
|
160
|
-
@mixin transform2d($trans) {
|
161
|
-
@include transform($trans, false);
|
162
|
-
}
|
163
|
-
|
164
|
-
// Shortcut to target only browsers with 3D transform support
|
165
|
-
@mixin transform3d($trans) {
|
166
|
-
@include transform($trans, true);
|
167
|
-
}
|
168
|
-
|
169
|
-
// @doc off
|
170
|
-
// 3D Parameters -------------------------------------------------------------
|
171
|
-
// @doc on
|
172
|
-
|
173
|
-
// Set the perspective of 3D transforms on the children of an element:
|
174
|
-
//
|
175
|
-
// @include perspective( perspective )
|
176
|
-
//
|
177
|
-
// where 'perspective' is a unitless number representing the depth of the
|
178
|
-
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
|
179
|
-
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
180
|
-
@mixin perspective($p) {
|
181
|
-
@include experimental(perspective, $p,
|
182
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
183
|
-
);
|
184
|
-
}
|
185
|
-
|
186
|
-
// Set the origin position for the perspective
|
187
|
-
//
|
188
|
-
// @include perspective-origin(origin-x [origin-y])
|
189
|
-
//
|
190
|
-
// where the two arguments represent x/y coordinates
|
191
|
-
@mixin perspective-origin($origin: 50%) {
|
192
|
-
@include experimental(perspective-origin, $origin,
|
193
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
194
|
-
);
|
195
|
-
}
|
196
|
-
|
197
|
-
// Determine whether a 3D objects children also live in the given 3D space
|
198
|
-
//
|
199
|
-
// @include transform-style( [ style ] )
|
200
|
-
//
|
201
|
-
// where `style` can be either `flat` or `preserve-3d`.
|
202
|
-
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
|
203
|
-
@mixin transform-style($style: preserve-3d) {
|
204
|
-
@include experimental(transform-style, $style,
|
205
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
206
|
-
);
|
207
|
-
}
|
208
|
-
|
209
|
-
// Determine the visibility of an element when it's back is turned
|
210
|
-
//
|
211
|
-
// @include backface-visibility( [ visibility ] )
|
212
|
-
//
|
213
|
-
// where `visibility` can be either `visible` or `hidden`.
|
214
|
-
// Browsers default to visible, mixin defaults to hidden
|
215
|
-
@mixin backface-visibility($visibility: hidden) {
|
216
|
-
@include experimental(backface-visibility, $visibility,
|
217
|
-
-moz, -webkit, -o, -ms, not -khtml, official
|
218
|
-
);
|
219
|
-
}
|
220
|
-
|
221
|
-
// @doc off
|
222
|
-
// Transform Partials --------------------------------------------------------
|
223
|
-
// These work well on their own, but they don't add to each other, they override.
|
224
|
-
// Use along with transform parameter mixins to adjust origin, perspective and style
|
225
|
-
// ---------------------------------------------------------------------------
|
226
|
-
|
227
|
-
|
228
|
-
// Scale ---------------------------------------------------------------------
|
229
|
-
// @doc on
|
230
|
-
|
231
|
-
// Scale an object along the x and y axis:
|
232
|
-
//
|
233
|
-
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
234
|
-
//
|
235
|
-
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
236
|
-
// and perspective, which works the same as the stand-alone perspective property/mixin
|
237
|
-
// but applies to the individual element (multiplied with any parent perspective)
|
238
|
-
//
|
239
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
240
|
-
@mixin scale(
|
241
|
-
$scale-x: $default-scale-x,
|
242
|
-
$scale-y: $scale-x,
|
243
|
-
$perspective: false,
|
244
|
-
$only3d: false
|
245
|
-
) {
|
246
|
-
$trans: scale($scale-x, $scale-y);
|
247
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
248
|
-
@include transform($trans, $only3d);
|
249
|
-
}
|
250
|
-
|
251
|
-
// Scale an object along the x axis
|
252
|
-
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
253
|
-
//
|
254
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
255
|
-
@mixin scaleX(
|
256
|
-
$scale: $default-scale-x,
|
257
|
-
$perspective: false,
|
258
|
-
$only3d: false
|
259
|
-
) {
|
260
|
-
$trans: scaleX($scale);
|
261
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
262
|
-
@include transform($trans, $only3d);
|
263
|
-
}
|
264
|
-
|
265
|
-
// Scale an object along the y axis
|
266
|
-
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
267
|
-
//
|
268
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
269
|
-
@mixin scaleY(
|
270
|
-
$scale: $default-scale-y,
|
271
|
-
$perspective: false,
|
272
|
-
$only3d: false
|
273
|
-
) {
|
274
|
-
$trans: scaleY($scale);
|
275
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
276
|
-
@include transform($trans, $only3d);
|
277
|
-
}
|
278
|
-
|
279
|
-
// Scale an object along the z axis
|
280
|
-
// @include scaleZ( [ scale-z, perspective ] )
|
281
|
-
//
|
282
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
283
|
-
@mixin scaleZ(
|
284
|
-
$scale: $default-scale-z,
|
285
|
-
$perspective: false
|
286
|
-
) {
|
287
|
-
$trans: scaleZ($scale);
|
288
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
289
|
-
@include transform3d($trans);
|
290
|
-
}
|
291
|
-
|
292
|
-
// Scale and object along all three axis
|
293
|
-
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
294
|
-
//
|
295
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
296
|
-
@mixin scale3d(
|
297
|
-
$scale-x: $default-scale-x,
|
298
|
-
$scale-y: $default-scale-y,
|
299
|
-
$scale-z: $default-scale-z,
|
300
|
-
$perspective: false
|
301
|
-
) {
|
302
|
-
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
303
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
304
|
-
@include transform3d($trans);
|
305
|
-
}
|
306
|
-
|
307
|
-
// @doc off
|
308
|
-
// Rotate --------------------------------------------------------------------
|
309
|
-
// @doc on
|
310
|
-
|
311
|
-
// Rotate an object around the z axis (2D)
|
312
|
-
// @include rotate( [ rotation, perspective, 3D-only ] )
|
313
|
-
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
314
|
-
//
|
315
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
316
|
-
@mixin rotate(
|
317
|
-
$rotate: $default-rotate,
|
318
|
-
$perspective: false,
|
319
|
-
$only3d: false
|
320
|
-
) {
|
321
|
-
$trans: rotate($rotate);
|
322
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
323
|
-
@include transform($trans, $only3d);
|
324
|
-
}
|
325
|
-
|
326
|
-
// A longcut for 'rotate' in case you forget that 'z' is implied
|
327
|
-
//
|
328
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
329
|
-
@mixin rotateZ(
|
330
|
-
$rotate: $default-rotate,
|
331
|
-
$perspective: false,
|
332
|
-
$only3d: false
|
333
|
-
) {
|
334
|
-
@include rotate($rotate, $perspective, $only3d);
|
335
|
-
}
|
336
|
-
|
337
|
-
// Rotate an object around the x axis (3D)
|
338
|
-
// @include rotateX( [ rotation, perspective ] )
|
339
|
-
//
|
340
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
341
|
-
@mixin rotateX(
|
342
|
-
$rotate: $default-rotate,
|
343
|
-
$perspective: false
|
344
|
-
) {
|
345
|
-
$trans: rotateX($rotate);
|
346
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
347
|
-
@include transform3d($trans);
|
348
|
-
}
|
349
|
-
|
350
|
-
// Rotate an object around the y axis (3D)
|
351
|
-
// @include rotate( [ rotation, perspective ] )
|
352
|
-
//
|
353
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
354
|
-
@mixin rotateY(
|
355
|
-
$rotate: $default-rotate,
|
356
|
-
$perspective: false
|
357
|
-
) {
|
358
|
-
$trans: rotateY($rotate);
|
359
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
360
|
-
@include transform3d($trans);
|
361
|
-
}
|
362
|
-
|
363
|
-
// Rotate an object around an arbitrary axis (3D)
|
364
|
-
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
365
|
-
// where the 'vector-' arguments accept unitless numbers.
|
366
|
-
// These numbers are not important on their own, but in relation to one another
|
367
|
-
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
|
368
|
-
//
|
369
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
370
|
-
@mixin rotate3d(
|
371
|
-
$vector-x: $default-vector-x,
|
372
|
-
$vector-y: $default-vector-y,
|
373
|
-
$vector-z: $default-vector-z,
|
374
|
-
$rotate: $default-rotate,
|
375
|
-
$perspective: false
|
376
|
-
) {
|
377
|
-
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
378
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
379
|
-
@include transform3d($trans);
|
380
|
-
}
|
381
|
-
|
382
|
-
// @doc off
|
383
|
-
// Translate -----------------------------------------------------------------
|
384
|
-
// @doc on
|
385
|
-
|
386
|
-
// Move an object along the x or y axis (2D)
|
387
|
-
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
388
|
-
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
|
389
|
-
//
|
390
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
391
|
-
@mixin translate(
|
392
|
-
$translate-x: $default-translate-x,
|
393
|
-
$translate-y: $default-translate-y,
|
394
|
-
$perspective: false,
|
395
|
-
$only3d: false
|
396
|
-
) {
|
397
|
-
$trans: translate($translate-x, $translate-y);
|
398
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
399
|
-
@include transform($trans, $only3d);
|
400
|
-
}
|
401
|
-
|
402
|
-
// Move an object along the x axis (2D)
|
403
|
-
// @include translate( [ translate-x, perspective, 3D-only ] )
|
404
|
-
//
|
405
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
406
|
-
@mixin translateX(
|
407
|
-
$trans-x: $default-translate-x,
|
408
|
-
$perspective: false,
|
409
|
-
$only3d: false
|
410
|
-
) {
|
411
|
-
$trans: translateX($trans-x);
|
412
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
413
|
-
@include transform($trans, $only3d);
|
414
|
-
}
|
415
|
-
|
416
|
-
// Move an object along the y axis (2D)
|
417
|
-
// @include translate( [ translate-y, perspective, 3D-only ] )
|
418
|
-
//
|
419
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
420
|
-
@mixin translateY(
|
421
|
-
$trans-y: $default-translate-y,
|
422
|
-
$perspective: false,
|
423
|
-
$only3d: false
|
424
|
-
) {
|
425
|
-
$trans: translateY($trans-y);
|
426
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
427
|
-
@include transform($trans, $only3d);
|
428
|
-
}
|
429
|
-
|
430
|
-
// Move an object along the z axis (3D)
|
431
|
-
// @include translate( [ translate-z, perspective ] )
|
432
|
-
//
|
433
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
434
|
-
@mixin translateZ(
|
435
|
-
$trans-z: $default-translate-z,
|
436
|
-
$perspective: false
|
437
|
-
) {
|
438
|
-
$trans: translateZ($trans-z);
|
439
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
440
|
-
@include transform3d($trans);
|
441
|
-
}
|
442
|
-
|
443
|
-
// Move an object along the x, y and z axis (3D)
|
444
|
-
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
445
|
-
//
|
446
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
447
|
-
@mixin translate3d(
|
448
|
-
$translate-x: $default-translate-x,
|
449
|
-
$translate-y: $default-translate-y,
|
450
|
-
$translate-z: $default-translate-z,
|
451
|
-
$perspective: false
|
452
|
-
) {
|
453
|
-
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
454
|
-
@if $perspective { $trans: perspective($perspective) $trans; }
|
455
|
-
@include transform3d($trans);
|
456
|
-
}
|
457
|
-
|
458
|
-
// @doc off
|
459
|
-
// Skew ----------------------------------------------------------------------
|
460
|
-
// @doc on
|
461
|
-
|
462
|
-
// Skew an element:
|
463
|
-
//
|
464
|
-
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
465
|
-
//
|
466
|
-
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
|
467
|
-
//
|
468
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
469
|
-
@mixin skew(
|
470
|
-
$skew-x: $default-skew-x,
|
471
|
-
$skew-y: $default-skew-y,
|
472
|
-
$only3d: false
|
473
|
-
) {
|
474
|
-
$trans: skew($skew-x, $skew-y);
|
475
|
-
@include transform($trans, $only3d);
|
476
|
-
}
|
477
|
-
|
478
|
-
// Skew an element along the x axiz
|
479
|
-
//
|
480
|
-
// @include skew( [ skew-x, 3D-only ] )
|
481
|
-
//
|
482
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
483
|
-
@mixin skewX(
|
484
|
-
$skew-x: $default-skew-x,
|
485
|
-
$only3d: false
|
486
|
-
) {
|
487
|
-
$trans: skewX($skew-x);
|
488
|
-
@include transform($trans, $only3d);
|
489
|
-
}
|
490
|
-
|
491
|
-
// Skew an element along the y axis
|
492
|
-
//
|
493
|
-
// @include skew( [ skew-y, 3D-only ] )
|
494
|
-
//
|
495
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
496
|
-
@mixin skewY(
|
497
|
-
$skew-y: $default-skew-y,
|
498
|
-
$only3d: false
|
499
|
-
) {
|
500
|
-
$trans: skewY($skew-y);
|
501
|
-
@include transform($trans, $only3d);
|
502
|
-
}
|
503
|
-
|
504
|
-
|
505
|
-
// Full transform mixins
|
506
|
-
// For settings any combination of transforms as arguments
|
507
|
-
// These are complex and not highly recommended for daily use. They are mainly
|
508
|
-
// here for backward-compatibility purposes.
|
509
|
-
//
|
510
|
-
// * they include origin adjustments
|
511
|
-
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
512
|
-
//
|
513
|
-
// **Note** This mixin cannot be combined with other transform mixins.
|
514
|
-
@mixin create-transform(
|
515
|
-
$perspective: false,
|
516
|
-
$scale-x: false,
|
517
|
-
$scale-y: false,
|
518
|
-
$scale-z: false,
|
519
|
-
$rotate-x: false,
|
520
|
-
$rotate-y: false,
|
521
|
-
$rotate-z: false,
|
522
|
-
$rotate3d: false,
|
523
|
-
$trans-x: false,
|
524
|
-
$trans-y: false,
|
525
|
-
$trans-z: false,
|
526
|
-
$skew-x: false,
|
527
|
-
$skew-y: false,
|
528
|
-
$origin-x: false,
|
529
|
-
$origin-y: false,
|
530
|
-
$origin-z: false,
|
531
|
-
$only3d: false
|
532
|
-
) {
|
533
|
-
$trans: unquote("");
|
534
|
-
|
535
|
-
// perspective
|
536
|
-
@if $perspective { $trans: perspective($perspective) ; }
|
537
|
-
|
538
|
-
// scale
|
539
|
-
@if $scale-x and $scale-y {
|
540
|
-
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
541
|
-
@else { $trans: $trans scale($scale-x, $scale-y); }
|
542
|
-
} @else {
|
543
|
-
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
544
|
-
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
545
|
-
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
546
|
-
}
|
547
|
-
|
548
|
-
// rotate
|
549
|
-
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
550
|
-
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
551
|
-
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
552
|
-
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
553
|
-
|
554
|
-
// translate
|
555
|
-
@if $trans-x and $trans-y {
|
556
|
-
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
557
|
-
@else { $trans: $trans translate($trans-x, $trans-y); }
|
558
|
-
} @else {
|
559
|
-
@if $trans-x { $trans: $trans translateX($trans-x); }
|
560
|
-
@if $trans-y { $trans: $trans translateY($trans-y); }
|
561
|
-
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
562
|
-
}
|
563
|
-
|
564
|
-
// skew
|
565
|
-
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
566
|
-
@else {
|
567
|
-
@if $skew-x { $trans: $trans skewX($skew-x); }
|
568
|
-
@if $skew-y { $trans: $trans skewY($skew-y); }
|
569
|
-
}
|
570
|
-
|
571
|
-
// apply it!
|
572
|
-
@include transform($trans, $only3d);
|
573
|
-
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
574
|
-
}
|
575
|
-
|
576
|
-
|
577
|
-
// A simplified set of options
|
578
|
-
// backwards-compatible with the previous version of the 'transform' mixin
|
579
|
-
@mixin simple-transform(
|
580
|
-
$scale: false,
|
581
|
-
$rotate: false,
|
582
|
-
$trans-x: false,
|
583
|
-
$trans-y: false,
|
584
|
-
$skew-x: false,
|
585
|
-
$skew-y: false,
|
586
|
-
$origin-x: false,
|
587
|
-
$origin-y: false
|
588
|
-
) {
|
589
|
-
@include create-transform(
|
590
|
-
false,
|
591
|
-
$scale, $scale, false,
|
592
|
-
false, false, $rotate, false,
|
593
|
-
$trans-x, $trans-y, false,
|
594
|
-
$skew-x, $skew-y,
|
595
|
-
$origin-x, $origin-y, false,
|
596
|
-
false
|
597
|
-
);
|
598
|
-
}
|
1
|
+
@import "shared";
|
2
|
+
|
3
|
+
// @doc off
|
4
|
+
// Note ----------------------------------------------------------------------
|
5
|
+
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
6
|
+
// only in the most recent builds. You should also provide fallback 2d support for
|
7
|
+
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
8
|
+
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
9
|
+
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
10
|
+
// and also accepts 'true' (3D). Currently the lists are as follows:
|
11
|
+
// 2D: Mozilla, Webkit, Opera, Official
|
12
|
+
// 3D: Webkit, Firefox.
|
13
|
+
|
14
|
+
// Available Transforms ------------------------------------------------------
|
15
|
+
// - Scale (2d and 3d)
|
16
|
+
// - Rotate (2d and 3d)
|
17
|
+
// - Translate (2d and 3d)
|
18
|
+
// - Skew (2d only)
|
19
|
+
|
20
|
+
// Transform Parameters ------------------------------------------------------
|
21
|
+
// - Transform Origin (2d and 3d)
|
22
|
+
// - Perspective (3d)
|
23
|
+
// - Perspective Origin (3d)
|
24
|
+
// - Transform Style (3d)
|
25
|
+
// - Backface Visibility (3d)
|
26
|
+
|
27
|
+
// Mixins --------------------------------------------------------------------
|
28
|
+
// transform-origin
|
29
|
+
// - shortcuts: transform-origin2d, transform-origin3d
|
30
|
+
// - helpers: apply-origin
|
31
|
+
// transform
|
32
|
+
// - shortcuts: transform2d, transform3d
|
33
|
+
// - helpers: simple-transform, create-transform
|
34
|
+
// perspective
|
35
|
+
// - helpers: perspective-origin
|
36
|
+
// transform-style
|
37
|
+
// backface-visibility
|
38
|
+
// scale
|
39
|
+
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
40
|
+
// rotate
|
41
|
+
// - shortcuts: rotateX, rotateY, rotate3d
|
42
|
+
// translate
|
43
|
+
// - shortcuts: translateX, translateY, translateZ, translate3d
|
44
|
+
// skew
|
45
|
+
// - shortcuts: skewX, skewY
|
46
|
+
|
47
|
+
// Defaults ------------------------------------------------------------------
|
48
|
+
// @doc on
|
49
|
+
|
50
|
+
// The default x-origin for transforms
|
51
|
+
$default-origin-x : 50% !default;
|
52
|
+
// The default y-origin for transforms
|
53
|
+
$default-origin-y : 50% !default;
|
54
|
+
// The default z-origin for transforms
|
55
|
+
$default-origin-z : 50% !default;
|
56
|
+
|
57
|
+
|
58
|
+
// The default x-multiplier for scaling
|
59
|
+
$default-scale-x : 1.25 !default;
|
60
|
+
// The default y-multiplier for scaling
|
61
|
+
$default-scale-y : $default-scale-x !default;
|
62
|
+
// The default z-multiplier for scaling
|
63
|
+
$default-scale-z : $default-scale-x !default;
|
64
|
+
|
65
|
+
|
66
|
+
// The default angle for rotations
|
67
|
+
$default-rotate : 45deg !default;
|
68
|
+
|
69
|
+
|
70
|
+
// The default x-vector for the axis of 3d rotations
|
71
|
+
$default-vector-x : 1 !default;
|
72
|
+
// The default y-vector for the axis of 3d rotations
|
73
|
+
$default-vector-y : 1 !default;
|
74
|
+
// The default z-vector for the axis of 3d rotations
|
75
|
+
$default-vector-z : 1 !default;
|
76
|
+
|
77
|
+
|
78
|
+
// The default x-length for translations
|
79
|
+
$default-translate-x : 1em !default;
|
80
|
+
// The default y-length for translations
|
81
|
+
$default-translate-y : $default-translate-x !default;
|
82
|
+
// The default z-length for translations
|
83
|
+
$default-translate-z : $default-translate-x !default;
|
84
|
+
|
85
|
+
|
86
|
+
// The default x-angle for skewing
|
87
|
+
$default-skew-x : 5deg !default;
|
88
|
+
// The default y-angle for skewing
|
89
|
+
$default-skew-y : 5deg !default;
|
90
|
+
|
91
|
+
|
92
|
+
// **Transform-origin**
|
93
|
+
// Transform-origin sent as a complete string
|
94
|
+
//
|
95
|
+
// @include apply-origin( origin [, 3D-only ] )
|
96
|
+
//
|
97
|
+
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
98
|
+
// in percentages, absolute (px, cm, in, em etc..) or relative
|
99
|
+
// (left, top, right, bottom, center) units
|
100
|
+
//
|
101
|
+
// @param only3d Set this to true to only apply this
|
102
|
+
// mixin where browsers have 3D support.
|
103
|
+
@mixin apply-origin($origin, $only3d) {
|
104
|
+
$only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
|
105
|
+
@if $only3d {
|
106
|
+
@include experimental(transform-origin, $origin,
|
107
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
108
|
+
);
|
109
|
+
} @else {
|
110
|
+
@include experimental(transform-origin, $origin,
|
111
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
112
|
+
);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
// Transform-origin sent as individual arguments:
|
117
|
+
//
|
118
|
+
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
119
|
+
//
|
120
|
+
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
121
|
+
//
|
122
|
+
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
123
|
+
@mixin transform-origin(
|
124
|
+
$origin-x: $default-origin-x,
|
125
|
+
$origin-y: $default-origin-y,
|
126
|
+
$origin-z: false,
|
127
|
+
$only3d: if($origin-z, true, false)
|
128
|
+
) {
|
129
|
+
$origin: unquote('');
|
130
|
+
@if $origin-x or $origin-y or $origin-z {
|
131
|
+
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
132
|
+
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
133
|
+
@if $origin-z { $origin: $origin $origin-z; }
|
134
|
+
@include apply-origin($origin, $only3d);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// Transform sent as a complete string:
|
140
|
+
//
|
141
|
+
// @include transform( transforms [, 3D-only ] )
|
142
|
+
//
|
143
|
+
// where 'transforms' is a space separated list of all the transforms to be applied.
|
144
|
+
@mixin transform(
|
145
|
+
$transform,
|
146
|
+
$only3d: false
|
147
|
+
) {
|
148
|
+
@if $only3d {
|
149
|
+
@include experimental(transform, $transform,
|
150
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
151
|
+
);
|
152
|
+
} @else {
|
153
|
+
@include experimental(transform, $transform,
|
154
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
155
|
+
);
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
// Shortcut to target all browsers with 2D transform support
|
160
|
+
@mixin transform2d($trans) {
|
161
|
+
@include transform($trans, false);
|
162
|
+
}
|
163
|
+
|
164
|
+
// Shortcut to target only browsers with 3D transform support
|
165
|
+
@mixin transform3d($trans) {
|
166
|
+
@include transform($trans, true);
|
167
|
+
}
|
168
|
+
|
169
|
+
// @doc off
|
170
|
+
// 3D Parameters -------------------------------------------------------------
|
171
|
+
// @doc on
|
172
|
+
|
173
|
+
// Set the perspective of 3D transforms on the children of an element:
|
174
|
+
//
|
175
|
+
// @include perspective( perspective )
|
176
|
+
//
|
177
|
+
// where 'perspective' is a unitless number representing the depth of the
|
178
|
+
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
|
179
|
+
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
180
|
+
@mixin perspective($p) {
|
181
|
+
@include experimental(perspective, $p,
|
182
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
183
|
+
);
|
184
|
+
}
|
185
|
+
|
186
|
+
// Set the origin position for the perspective
|
187
|
+
//
|
188
|
+
// @include perspective-origin(origin-x [origin-y])
|
189
|
+
//
|
190
|
+
// where the two arguments represent x/y coordinates
|
191
|
+
@mixin perspective-origin($origin: 50%) {
|
192
|
+
@include experimental(perspective-origin, $origin,
|
193
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
194
|
+
);
|
195
|
+
}
|
196
|
+
|
197
|
+
// Determine whether a 3D objects children also live in the given 3D space
|
198
|
+
//
|
199
|
+
// @include transform-style( [ style ] )
|
200
|
+
//
|
201
|
+
// where `style` can be either `flat` or `preserve-3d`.
|
202
|
+
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
|
203
|
+
@mixin transform-style($style: preserve-3d) {
|
204
|
+
@include experimental(transform-style, $style,
|
205
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
206
|
+
);
|
207
|
+
}
|
208
|
+
|
209
|
+
// Determine the visibility of an element when it's back is turned
|
210
|
+
//
|
211
|
+
// @include backface-visibility( [ visibility ] )
|
212
|
+
//
|
213
|
+
// where `visibility` can be either `visible` or `hidden`.
|
214
|
+
// Browsers default to visible, mixin defaults to hidden
|
215
|
+
@mixin backface-visibility($visibility: hidden) {
|
216
|
+
@include experimental(backface-visibility, $visibility,
|
217
|
+
-moz, -webkit, -o, -ms, not -khtml, official
|
218
|
+
);
|
219
|
+
}
|
220
|
+
|
221
|
+
// @doc off
|
222
|
+
// Transform Partials --------------------------------------------------------
|
223
|
+
// These work well on their own, but they don't add to each other, they override.
|
224
|
+
// Use along with transform parameter mixins to adjust origin, perspective and style
|
225
|
+
// ---------------------------------------------------------------------------
|
226
|
+
|
227
|
+
|
228
|
+
// Scale ---------------------------------------------------------------------
|
229
|
+
// @doc on
|
230
|
+
|
231
|
+
// Scale an object along the x and y axis:
|
232
|
+
//
|
233
|
+
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
234
|
+
//
|
235
|
+
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
236
|
+
// and perspective, which works the same as the stand-alone perspective property/mixin
|
237
|
+
// but applies to the individual element (multiplied with any parent perspective)
|
238
|
+
//
|
239
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
240
|
+
@mixin scale(
|
241
|
+
$scale-x: $default-scale-x,
|
242
|
+
$scale-y: $scale-x,
|
243
|
+
$perspective: false,
|
244
|
+
$only3d: false
|
245
|
+
) {
|
246
|
+
$trans: scale($scale-x, $scale-y);
|
247
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
248
|
+
@include transform($trans, $only3d);
|
249
|
+
}
|
250
|
+
|
251
|
+
// Scale an object along the x axis
|
252
|
+
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
253
|
+
//
|
254
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
255
|
+
@mixin scaleX(
|
256
|
+
$scale: $default-scale-x,
|
257
|
+
$perspective: false,
|
258
|
+
$only3d: false
|
259
|
+
) {
|
260
|
+
$trans: scaleX($scale);
|
261
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
262
|
+
@include transform($trans, $only3d);
|
263
|
+
}
|
264
|
+
|
265
|
+
// Scale an object along the y axis
|
266
|
+
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
267
|
+
//
|
268
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
269
|
+
@mixin scaleY(
|
270
|
+
$scale: $default-scale-y,
|
271
|
+
$perspective: false,
|
272
|
+
$only3d: false
|
273
|
+
) {
|
274
|
+
$trans: scaleY($scale);
|
275
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
276
|
+
@include transform($trans, $only3d);
|
277
|
+
}
|
278
|
+
|
279
|
+
// Scale an object along the z axis
|
280
|
+
// @include scaleZ( [ scale-z, perspective ] )
|
281
|
+
//
|
282
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
283
|
+
@mixin scaleZ(
|
284
|
+
$scale: $default-scale-z,
|
285
|
+
$perspective: false
|
286
|
+
) {
|
287
|
+
$trans: scaleZ($scale);
|
288
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
289
|
+
@include transform3d($trans);
|
290
|
+
}
|
291
|
+
|
292
|
+
// Scale and object along all three axis
|
293
|
+
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
294
|
+
//
|
295
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
296
|
+
@mixin scale3d(
|
297
|
+
$scale-x: $default-scale-x,
|
298
|
+
$scale-y: $default-scale-y,
|
299
|
+
$scale-z: $default-scale-z,
|
300
|
+
$perspective: false
|
301
|
+
) {
|
302
|
+
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
303
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
304
|
+
@include transform3d($trans);
|
305
|
+
}
|
306
|
+
|
307
|
+
// @doc off
|
308
|
+
// Rotate --------------------------------------------------------------------
|
309
|
+
// @doc on
|
310
|
+
|
311
|
+
// Rotate an object around the z axis (2D)
|
312
|
+
// @include rotate( [ rotation, perspective, 3D-only ] )
|
313
|
+
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
314
|
+
//
|
315
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
316
|
+
@mixin rotate(
|
317
|
+
$rotate: $default-rotate,
|
318
|
+
$perspective: false,
|
319
|
+
$only3d: false
|
320
|
+
) {
|
321
|
+
$trans: rotate($rotate);
|
322
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
323
|
+
@include transform($trans, $only3d);
|
324
|
+
}
|
325
|
+
|
326
|
+
// A longcut for 'rotate' in case you forget that 'z' is implied
|
327
|
+
//
|
328
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
329
|
+
@mixin rotateZ(
|
330
|
+
$rotate: $default-rotate,
|
331
|
+
$perspective: false,
|
332
|
+
$only3d: false
|
333
|
+
) {
|
334
|
+
@include rotate($rotate, $perspective, $only3d);
|
335
|
+
}
|
336
|
+
|
337
|
+
// Rotate an object around the x axis (3D)
|
338
|
+
// @include rotateX( [ rotation, perspective ] )
|
339
|
+
//
|
340
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
341
|
+
@mixin rotateX(
|
342
|
+
$rotate: $default-rotate,
|
343
|
+
$perspective: false
|
344
|
+
) {
|
345
|
+
$trans: rotateX($rotate);
|
346
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
347
|
+
@include transform3d($trans);
|
348
|
+
}
|
349
|
+
|
350
|
+
// Rotate an object around the y axis (3D)
|
351
|
+
// @include rotate( [ rotation, perspective ] )
|
352
|
+
//
|
353
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
354
|
+
@mixin rotateY(
|
355
|
+
$rotate: $default-rotate,
|
356
|
+
$perspective: false
|
357
|
+
) {
|
358
|
+
$trans: rotateY($rotate);
|
359
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
360
|
+
@include transform3d($trans);
|
361
|
+
}
|
362
|
+
|
363
|
+
// Rotate an object around an arbitrary axis (3D)
|
364
|
+
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
365
|
+
// where the 'vector-' arguments accept unitless numbers.
|
366
|
+
// These numbers are not important on their own, but in relation to one another
|
367
|
+
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
|
368
|
+
//
|
369
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
370
|
+
@mixin rotate3d(
|
371
|
+
$vector-x: $default-vector-x,
|
372
|
+
$vector-y: $default-vector-y,
|
373
|
+
$vector-z: $default-vector-z,
|
374
|
+
$rotate: $default-rotate,
|
375
|
+
$perspective: false
|
376
|
+
) {
|
377
|
+
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
378
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
379
|
+
@include transform3d($trans);
|
380
|
+
}
|
381
|
+
|
382
|
+
// @doc off
|
383
|
+
// Translate -----------------------------------------------------------------
|
384
|
+
// @doc on
|
385
|
+
|
386
|
+
// Move an object along the x or y axis (2D)
|
387
|
+
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
388
|
+
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
|
389
|
+
//
|
390
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
391
|
+
@mixin translate(
|
392
|
+
$translate-x: $default-translate-x,
|
393
|
+
$translate-y: $default-translate-y,
|
394
|
+
$perspective: false,
|
395
|
+
$only3d: false
|
396
|
+
) {
|
397
|
+
$trans: translate($translate-x, $translate-y);
|
398
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
399
|
+
@include transform($trans, $only3d);
|
400
|
+
}
|
401
|
+
|
402
|
+
// Move an object along the x axis (2D)
|
403
|
+
// @include translate( [ translate-x, perspective, 3D-only ] )
|
404
|
+
//
|
405
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
406
|
+
@mixin translateX(
|
407
|
+
$trans-x: $default-translate-x,
|
408
|
+
$perspective: false,
|
409
|
+
$only3d: false
|
410
|
+
) {
|
411
|
+
$trans: translateX($trans-x);
|
412
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
413
|
+
@include transform($trans, $only3d);
|
414
|
+
}
|
415
|
+
|
416
|
+
// Move an object along the y axis (2D)
|
417
|
+
// @include translate( [ translate-y, perspective, 3D-only ] )
|
418
|
+
//
|
419
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
420
|
+
@mixin translateY(
|
421
|
+
$trans-y: $default-translate-y,
|
422
|
+
$perspective: false,
|
423
|
+
$only3d: false
|
424
|
+
) {
|
425
|
+
$trans: translateY($trans-y);
|
426
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
427
|
+
@include transform($trans, $only3d);
|
428
|
+
}
|
429
|
+
|
430
|
+
// Move an object along the z axis (3D)
|
431
|
+
// @include translate( [ translate-z, perspective ] )
|
432
|
+
//
|
433
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
434
|
+
@mixin translateZ(
|
435
|
+
$trans-z: $default-translate-z,
|
436
|
+
$perspective: false
|
437
|
+
) {
|
438
|
+
$trans: translateZ($trans-z);
|
439
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
440
|
+
@include transform3d($trans);
|
441
|
+
}
|
442
|
+
|
443
|
+
// Move an object along the x, y and z axis (3D)
|
444
|
+
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
445
|
+
//
|
446
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
447
|
+
@mixin translate3d(
|
448
|
+
$translate-x: $default-translate-x,
|
449
|
+
$translate-y: $default-translate-y,
|
450
|
+
$translate-z: $default-translate-z,
|
451
|
+
$perspective: false
|
452
|
+
) {
|
453
|
+
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
454
|
+
@if $perspective { $trans: perspective($perspective) $trans; }
|
455
|
+
@include transform3d($trans);
|
456
|
+
}
|
457
|
+
|
458
|
+
// @doc off
|
459
|
+
// Skew ----------------------------------------------------------------------
|
460
|
+
// @doc on
|
461
|
+
|
462
|
+
// Skew an element:
|
463
|
+
//
|
464
|
+
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
465
|
+
//
|
466
|
+
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
|
467
|
+
//
|
468
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
469
|
+
@mixin skew(
|
470
|
+
$skew-x: $default-skew-x,
|
471
|
+
$skew-y: $default-skew-y,
|
472
|
+
$only3d: false
|
473
|
+
) {
|
474
|
+
$trans: skew($skew-x, $skew-y);
|
475
|
+
@include transform($trans, $only3d);
|
476
|
+
}
|
477
|
+
|
478
|
+
// Skew an element along the x axiz
|
479
|
+
//
|
480
|
+
// @include skew( [ skew-x, 3D-only ] )
|
481
|
+
//
|
482
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
483
|
+
@mixin skewX(
|
484
|
+
$skew-x: $default-skew-x,
|
485
|
+
$only3d: false
|
486
|
+
) {
|
487
|
+
$trans: skewX($skew-x);
|
488
|
+
@include transform($trans, $only3d);
|
489
|
+
}
|
490
|
+
|
491
|
+
// Skew an element along the y axis
|
492
|
+
//
|
493
|
+
// @include skew( [ skew-y, 3D-only ] )
|
494
|
+
//
|
495
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
496
|
+
@mixin skewY(
|
497
|
+
$skew-y: $default-skew-y,
|
498
|
+
$only3d: false
|
499
|
+
) {
|
500
|
+
$trans: skewY($skew-y);
|
501
|
+
@include transform($trans, $only3d);
|
502
|
+
}
|
503
|
+
|
504
|
+
|
505
|
+
// Full transform mixins
|
506
|
+
// For settings any combination of transforms as arguments
|
507
|
+
// These are complex and not highly recommended for daily use. They are mainly
|
508
|
+
// here for backward-compatibility purposes.
|
509
|
+
//
|
510
|
+
// * they include origin adjustments
|
511
|
+
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
512
|
+
//
|
513
|
+
// **Note** This mixin cannot be combined with other transform mixins.
|
514
|
+
@mixin create-transform(
|
515
|
+
$perspective: false,
|
516
|
+
$scale-x: false,
|
517
|
+
$scale-y: false,
|
518
|
+
$scale-z: false,
|
519
|
+
$rotate-x: false,
|
520
|
+
$rotate-y: false,
|
521
|
+
$rotate-z: false,
|
522
|
+
$rotate3d: false,
|
523
|
+
$trans-x: false,
|
524
|
+
$trans-y: false,
|
525
|
+
$trans-z: false,
|
526
|
+
$skew-x: false,
|
527
|
+
$skew-y: false,
|
528
|
+
$origin-x: false,
|
529
|
+
$origin-y: false,
|
530
|
+
$origin-z: false,
|
531
|
+
$only3d: false
|
532
|
+
) {
|
533
|
+
$trans: unquote("");
|
534
|
+
|
535
|
+
// perspective
|
536
|
+
@if $perspective { $trans: perspective($perspective) ; }
|
537
|
+
|
538
|
+
// scale
|
539
|
+
@if $scale-x and $scale-y {
|
540
|
+
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
541
|
+
@else { $trans: $trans scale($scale-x, $scale-y); }
|
542
|
+
} @else {
|
543
|
+
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
544
|
+
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
545
|
+
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
546
|
+
}
|
547
|
+
|
548
|
+
// rotate
|
549
|
+
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
550
|
+
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
551
|
+
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
552
|
+
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
553
|
+
|
554
|
+
// translate
|
555
|
+
@if $trans-x and $trans-y {
|
556
|
+
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
557
|
+
@else { $trans: $trans translate($trans-x, $trans-y); }
|
558
|
+
} @else {
|
559
|
+
@if $trans-x { $trans: $trans translateX($trans-x); }
|
560
|
+
@if $trans-y { $trans: $trans translateY($trans-y); }
|
561
|
+
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
562
|
+
}
|
563
|
+
|
564
|
+
// skew
|
565
|
+
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
566
|
+
@else {
|
567
|
+
@if $skew-x { $trans: $trans skewX($skew-x); }
|
568
|
+
@if $skew-y { $trans: $trans skewY($skew-y); }
|
569
|
+
}
|
570
|
+
|
571
|
+
// apply it!
|
572
|
+
@include transform($trans, $only3d);
|
573
|
+
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
574
|
+
}
|
575
|
+
|
576
|
+
|
577
|
+
// A simplified set of options
|
578
|
+
// backwards-compatible with the previous version of the 'transform' mixin
|
579
|
+
@mixin simple-transform(
|
580
|
+
$scale: false,
|
581
|
+
$rotate: false,
|
582
|
+
$trans-x: false,
|
583
|
+
$trans-y: false,
|
584
|
+
$skew-x: false,
|
585
|
+
$skew-y: false,
|
586
|
+
$origin-x: false,
|
587
|
+
$origin-y: false
|
588
|
+
) {
|
589
|
+
@include create-transform(
|
590
|
+
false,
|
591
|
+
$scale, $scale, false,
|
592
|
+
false, false, $rotate, false,
|
593
|
+
$trans-x, $trans-y, false,
|
594
|
+
$skew-x, $skew-y,
|
595
|
+
$origin-x, $origin-y, false,
|
596
|
+
false
|
597
|
+
);
|
598
|
+
}
|