para 0.11.4 → 0.12.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (228) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/para/admin/main.scss +31 -0
  3. data/app/assets/stylesheets/para/admin/src/_affix.scss +7 -0
  4. data/app/assets/stylesheets/para/admin/src/_alert.scss +35 -0
  5. data/app/assets/stylesheets/para/admin/src/_base.scss +63 -0
  6. data/app/assets/stylesheets/para/admin/src/_bootstrap-variables.scss +766 -379
  7. data/app/assets/stylesheets/para/admin/src/_breadcrumb.scss +37 -0
  8. data/app/assets/stylesheets/para/admin/src/_buttons.scss +128 -0
  9. data/app/assets/stylesheets/para/admin/src/_checkable.scss +106 -0
  10. data/app/assets/stylesheets/para/admin/src/_common.scss +250 -0
  11. data/app/assets/stylesheets/para/admin/src/_dropdown.scss +52 -0
  12. data/app/assets/stylesheets/para/admin/src/_form.scss +359 -0
  13. data/app/assets/stylesheets/para/admin/src/_list.scss +96 -0
  14. data/app/assets/stylesheets/para/admin/src/_mixins.scss +109 -0
  15. data/app/assets/stylesheets/para/admin/src/_multi-select.scss +110 -0
  16. data/app/assets/stylesheets/para/admin/src/_navigation.scss +210 -0
  17. data/app/assets/stylesheets/para/admin/src/_navtabs.scss +68 -0
  18. data/app/assets/stylesheets/para/admin/src/_nested-many.scss +87 -0
  19. data/app/assets/stylesheets/para/admin/src/_nested_one.scss +26 -0
  20. data/app/assets/stylesheets/para/admin/src/_orderable.scss +48 -0
  21. data/app/assets/stylesheets/para/admin/src/_page-loading.scss +40 -0
  22. data/app/assets/stylesheets/para/admin/src/_pagination.scss +39 -0
  23. data/app/assets/stylesheets/para/admin/src/_panel.scss +61 -0
  24. data/app/assets/stylesheets/para/admin/src/_responsive.scss +133 -0
  25. data/app/assets/stylesheets/para/admin/src/_sorting.scss +43 -0
  26. data/app/assets/stylesheets/para/admin/src/_statcard.scss +46 -0
  27. data/app/assets/stylesheets/para/admin/src/_table.scss +36 -0
  28. data/app/assets/stylesheets/para/admin/src/_tree.scss +60 -0
  29. data/app/assets/stylesheets/para/admin/src/{_variables.sass → _variables.scss} +7 -7
  30. data/app/assets/stylesheets/para/admin/src/{_well.sass → _well.scss} +5 -4
  31. data/app/assets/stylesheets/para/admin.scss +15 -0
  32. data/app/assets/stylesheets/para/index.scss +1 -0
  33. data/app/assets/stylesheets/para/lib/datetimepicker.scss +15 -0
  34. data/app/assets/stylesheets/para/lib/fuelux.scss +46 -0
  35. data/app/assets/stylesheets/para/lib/jasny-bootstrap.scss +100 -0
  36. data/app/assets/stylesheets/para/lib/selectize.scss +129 -0
  37. data/app/assets/stylesheets/para/lib/slider.scss +14 -0
  38. data/app/controllers/para/admin/crud_resources_controller.rb +16 -9
  39. data/app/controllers/para/admin/imports_controller.rb +9 -9
  40. data/app/controllers/para/admin/jobs_controller.rb +7 -1
  41. data/app/controllers/para/admin/resources_controller.rb +17 -18
  42. data/app/controllers/para/admin/settings_component_controller.rb +2 -2
  43. data/app/helpers/para/admin/base_helper.rb +36 -25
  44. data/app/helpers/para/admin/page_helper.rb +8 -9
  45. data/app/helpers/para/flash_helper.rb +7 -28
  46. data/app/helpers/para/model_helper.rb +5 -8
  47. data/app/helpers/para/tree_helper.rb +4 -4
  48. data/app/javascripts/para/admin/async-progress.js +58 -0
  49. data/app/javascripts/para/admin/filters-form.js +12 -0
  50. data/app/javascripts/para/admin/job-tracker.js +33 -0
  51. data/app/javascripts/para/admin/table.js +58 -0
  52. data/app/javascripts/para/admin/tabs.js +110 -0
  53. data/app/javascripts/para/admin/theme_actions.js +39 -0
  54. data/app/javascripts/para/admin/tree.js +124 -0
  55. data/app/javascripts/para/application.js +2 -0
  56. data/app/javascripts/para/controllers/application.js +17 -0
  57. data/app/javascripts/para/controllers/index.js +10 -0
  58. data/app/javascripts/para/controllers/para_admin_flash_message_controller.js +48 -0
  59. data/app/javascripts/para/controllers/para_admin_modal_controller.js +43 -0
  60. data/app/javascripts/para/controllers/selectize_field_controller.js +142 -0
  61. data/app/javascripts/para/index.js +31 -0
  62. data/app/javascripts/para/inputs/material-input.js +7 -0
  63. data/app/javascripts/para/inputs/multi-select-input.js +343 -0
  64. data/app/javascripts/para/inputs/nested_many.js +151 -0
  65. data/app/javascripts/para/lib/fetch.js +41 -0
  66. data/app/javascripts/para/lib/page-loading.js +42 -0
  67. data/app/javascripts/para/simple_form_extension/colorpicker.js +30 -0
  68. data/app/javascripts/para/simple_form_extension/datetimepicker.js +115 -0
  69. data/app/javascripts/para/simple_form_extension/fileinput.js +57 -0
  70. data/app/javascripts/para/simple_form_extension/index.js +12 -0
  71. data/app/javascripts/para/simple_form_extension/selectize.js +160 -0
  72. data/app/javascripts/para/simple_form_extension/simple_form_extension_initialization.js +62 -0
  73. data/app/javascripts/para/simple_form_extension/slider.js +43 -0
  74. data/app/javascripts/para/simple_form_extension/spinbox.js +35 -0
  75. data/app/javascripts/para/vendor/bootstrap-colorpicker.js +1025 -0
  76. data/app/javascripts/para/vendor/bootstrap-slider.js +1610 -0
  77. data/app/javascripts/para/vendor/cocoon.js +150 -0
  78. data/app/javascripts/para/vendor/jquery.datetimepicker.js +2156 -0
  79. data/app/javascripts/para/vendor/jquery.js +3 -0
  80. data/app/javascripts/para/vendor/spinbox.js +438 -0
  81. data/app/javascripts/para/vendor/vertebra.js +224 -0
  82. data/app/views/admin/para/exporter/bases/_completed.html.haml +1 -1
  83. data/app/views/layouts/para/admin.html.haml +4 -2
  84. data/app/views/para/admin/imports/new.html.haml +12 -11
  85. data/app/views/para/admin/jobs/_completed.html.haml +1 -1
  86. data/app/views/para/admin/jobs/_failed.html.haml +1 -1
  87. data/app/views/para/admin/jobs/_job.html.haml +11 -0
  88. data/app/views/para/admin/jobs/show.html.haml +1 -10
  89. data/app/views/para/admin/resources/_add_button.html.haml +1 -1
  90. data/app/views/para/admin/resources/_exports_menu.html.haml +2 -2
  91. data/app/views/para/admin/resources/_filters.html.haml +1 -1
  92. data/app/views/para/admin/resources/_imports_menu.html.haml +2 -2
  93. data/app/views/para/admin/resources/_list.html.haml +27 -26
  94. data/app/views/para/admin/resources/_navigation.html.haml +10 -11
  95. data/app/views/para/admin/resources/_subclassable_add_button.html.haml +1 -1
  96. data/app/views/para/admin/shared/_flash.html.haml +18 -0
  97. data/app/views/para/admin/shared/_header.html.haml +1 -1
  98. data/app/views/para/form/_tabs.html.haml +1 -1
  99. data/app/views/para/inputs/_nested_many.html.haml +3 -3
  100. data/app/views/para/inputs/nested_many/_add.html.haml +1 -1
  101. data/app/views/para/inputs/nested_many/_add_with_subclasses.html.haml +2 -2
  102. data/app/views/para/inputs/nested_many/_container.html.haml +1 -1
  103. data/config/locales/fr.yml +1 -0
  104. data/lib/generators/para/install/install_generator.rb +10 -14
  105. data/lib/para/attribute_field/base.rb +3 -0
  106. data/lib/para/attribute_field/wysiwyg_editor.rb +15 -0
  107. data/lib/para/attribute_field.rb +1 -1
  108. data/lib/para/components_configuration.rb +1 -1
  109. data/lib/para/engine.rb +20 -22
  110. data/lib/para/ext/turbo_stream.rb +13 -0
  111. data/lib/para/ext.rb +1 -1
  112. data/lib/para/form_builder/containers.rb +33 -22
  113. data/lib/para/form_builder/nested_form.rb +6 -5
  114. data/lib/para/inputs/nested_many_input.rb +5 -0
  115. data/lib/para/markup/modal.rb +30 -15
  116. data/lib/para/markup/resources_buttons.rb +15 -11
  117. data/lib/para/model_field_parsers/wysiwyg_editor.rb +19 -0
  118. data/lib/para/model_field_parsers.rb +1 -1
  119. data/lib/para/version.rb +1 -1
  120. data/lib/para.rb +2 -8
  121. data/lib/simple_form_extension/components/icons.rb +13 -0
  122. data/lib/simple_form_extension/components/popovers.rb +46 -0
  123. data/lib/simple_form_extension/components.rb +8 -0
  124. data/lib/simple_form_extension/ext/form_builder.rb +20 -0
  125. data/lib/simple_form_extension/file_concern.rb +74 -0
  126. data/lib/simple_form_extension/inputs/boolean_input.rb +16 -0
  127. data/lib/simple_form_extension/inputs/collection_check_boxes_input.rb +15 -0
  128. data/lib/simple_form_extension/inputs/collection_radio_buttons_input.rb +15 -0
  129. data/lib/simple_form_extension/inputs/color_input.rb +37 -0
  130. data/lib/simple_form_extension/inputs/date_time_input.rb +48 -0
  131. data/lib/simple_form_extension/inputs/file_input.rb +41 -0
  132. data/lib/simple_form_extension/inputs/image_input.rb +110 -0
  133. data/lib/simple_form_extension/inputs/numeric_input.rb +27 -0
  134. data/lib/simple_form_extension/inputs/selectize_input.rb +210 -0
  135. data/lib/simple_form_extension/inputs/slider_input.rb +30 -0
  136. data/lib/simple_form_extension/inputs.rb +16 -0
  137. data/lib/simple_form_extension/railtie.rb +21 -0
  138. data/lib/simple_form_extension/resource_name_helper.rb +9 -0
  139. data/lib/simple_form_extension/translations.rb +7 -0
  140. data/lib/simple_form_extension/version.rb +3 -0
  141. data/lib/simple_form_extension.rb +30 -0
  142. data/vendor/assets/images/simple_form_extension/bootstrap-colorpicker/alpha-horizontal.png +0 -0
  143. data/vendor/assets/images/simple_form_extension/bootstrap-colorpicker/alpha.png +0 -0
  144. data/vendor/assets/images/simple_form_extension/bootstrap-colorpicker/hue-horizontal.png +0 -0
  145. data/vendor/assets/images/simple_form_extension/bootstrap-colorpicker/hue.png +0 -0
  146. data/vendor/assets/images/simple_form_extension/bootstrap-colorpicker/saturation.png +0 -0
  147. data/vendor/assets/stylesheets/bootstrap-colorpicker.scss +227 -0
  148. data/vendor/assets/stylesheets/bootstrap-slider.scss +246 -0
  149. data/vendor/assets/stylesheets/bootstrap.scss +6032 -0
  150. data/vendor/assets/stylesheets/jquery.datetimepicker.scss +568 -0
  151. metadata +120 -188
  152. data/app/assets/javascripts/admin/app.coffee +0 -1
  153. data/app/assets/javascripts/para/admin/async-progress.coffee +0 -29
  154. data/app/assets/javascripts/para/admin/filters-form.coffee +0 -11
  155. data/app/assets/javascripts/para/admin/job-tracker.coffee +0 -39
  156. data/app/assets/javascripts/para/admin/table.coffee +0 -44
  157. data/app/assets/javascripts/para/admin/tabs.coffee +0 -63
  158. data/app/assets/javascripts/para/admin/theme_actions.coffee +0 -25
  159. data/app/assets/javascripts/para/admin/tree.coffee +0 -105
  160. data/app/assets/javascripts/para/admin.coffee +0 -22
  161. data/app/assets/javascripts/para/application.js +0 -13
  162. data/app/assets/javascripts/para/inputs/material-input.coffee +0 -4
  163. data/app/assets/javascripts/para/inputs/multi-select-input.coffee +0 -174
  164. data/app/assets/javascripts/para/inputs/nested_many.coffee +0 -108
  165. data/app/assets/javascripts/para/lib/ajax.coffee +0 -11
  166. data/app/assets/javascripts/para/lib/remote-file-forms.coffee +0 -59
  167. data/app/assets/javascripts/para/lib/turbolinks-forms.coffee +0 -23
  168. data/app/assets/javascripts/para/lib/turbolinks-loading.coffee +0 -25
  169. data/app/assets/javascripts/para/lib/turbolinks-reloader.coffee +0 -19
  170. data/app/assets/stylesheets/para/admin/main.sass +0 -33
  171. data/app/assets/stylesheets/para/admin/src/_affix.sass +0 -4
  172. data/app/assets/stylesheets/para/admin/src/_alert.sass +0 -17
  173. data/app/assets/stylesheets/para/admin/src/_base.sass +0 -54
  174. data/app/assets/stylesheets/para/admin/src/_breadcrumb.sass +0 -32
  175. data/app/assets/stylesheets/para/admin/src/_buttons.sass +0 -107
  176. data/app/assets/stylesheets/para/admin/src/_checkable.sass +0 -94
  177. data/app/assets/stylesheets/para/admin/src/_common.sass +0 -202
  178. data/app/assets/stylesheets/para/admin/src/_dropdown.sass +0 -40
  179. data/app/assets/stylesheets/para/admin/src/_form.sass +0 -299
  180. data/app/assets/stylesheets/para/admin/src/_list.sass +0 -89
  181. data/app/assets/stylesheets/para/admin/src/_mixins.sass +0 -113
  182. data/app/assets/stylesheets/para/admin/src/_multi-select.sass +0 -91
  183. data/app/assets/stylesheets/para/admin/src/_navigation.sass +0 -171
  184. data/app/assets/stylesheets/para/admin/src/_navtabs.sass +0 -58
  185. data/app/assets/stylesheets/para/admin/src/_nested-many.sass +0 -75
  186. data/app/assets/stylesheets/para/admin/src/_nested_one.sass +0 -22
  187. data/app/assets/stylesheets/para/admin/src/_orderable.sass +0 -44
  188. data/app/assets/stylesheets/para/admin/src/_page-loading.sass +0 -39
  189. data/app/assets/stylesheets/para/admin/src/_pagination.sass +0 -34
  190. data/app/assets/stylesheets/para/admin/src/_panel.sass +0 -55
  191. data/app/assets/stylesheets/para/admin/src/_responsive.sass +0 -117
  192. data/app/assets/stylesheets/para/admin/src/_sorting.sass +0 -36
  193. data/app/assets/stylesheets/para/admin/src/_statcard.sass +0 -41
  194. data/app/assets/stylesheets/para/admin/src/_table.sass +0 -33
  195. data/app/assets/stylesheets/para/admin/src/_tree.sass +0 -52
  196. data/app/assets/stylesheets/para/admin.sass +0 -12
  197. data/app/assets/stylesheets/para/lib/compass/_support.scss +0 -447
  198. data/app/assets/stylesheets/para/lib/compass/css3/_box-shadow.scss +0 -88
  199. data/app/assets/stylesheets/para/lib/compass/css3/_images.scss +0 -152
  200. data/app/assets/stylesheets/para/lib/compass/css3/_inline-block.scss +0 -31
  201. data/app/assets/stylesheets/para/lib/compass/css3/_text-shadow.scss +0 -82
  202. data/app/assets/stylesheets/para/lib/compass/css3/_transform.scss +0 -590
  203. data/app/assets/stylesheets/para/lib/compass/css3/_transition.scss +0 -190
  204. data/app/assets/stylesheets/para/lib/compass/css3/_user-interface.scss +0 -71
  205. data/app/assets/stylesheets/para/lib/compass/utilities/general/_hacks.scss +0 -65
  206. data/app/assets/stylesheets/para/lib/datetimepicker.sass +0 -15
  207. data/app/assets/stylesheets/para/lib/fuelux.sass +0 -40
  208. data/app/assets/stylesheets/para/lib/jasny-bootstrap.sass +0 -97
  209. data/app/assets/stylesheets/para/lib/redactor.sass +0 -86
  210. data/app/assets/stylesheets/para/lib/selectize.sass +0 -111
  211. data/app/assets/stylesheets/para/lib/slider.sass +0 -12
  212. data/app/assets/stylesheets/para/plugins-includes.sass.erb +0 -1
  213. data/lib/para/attribute_field/redactor.rb +0 -22
  214. data/lib/para/ext/request_iframe_xhr.rb +0 -17
  215. data/lib/para/iframe_transport/middleware.rb +0 -58
  216. data/lib/para/iframe_transport.rb +0 -7
  217. data/lib/para/model_field_parsers/redactor.rb +0 -19
  218. data/vendor/assets/javascripts/jquery.iframe-transport.js +0 -260
  219. data/vendor/assets/javascripts/jquery.remote-modal-form.coffee +0 -145
  220. /data/app/assets/stylesheets/admin/{app.sass → app.scss} +0 -0
  221. /data/app/{assets/javascripts → javascripts}/para/plugins-includes.js.erb +0 -0
  222. /data/{vendor/assets/javascripts → app/javascripts/para/vendor}/Sortable.js +0 -0
  223. /data/{vendor/assets/javascripts → app/javascripts/para/vendor}/jasny-bootstrap.js +0 -0
  224. /data/{vendor/assets/javascripts → app/javascripts/para/vendor}/jquery.scrollto.js +0 -0
  225. /data/{vendor/assets/javascripts → app/javascripts/para/vendor}/jquery.sortable.js +0 -0
  226. /data/vendor/assets/stylesheets/{animate.css → animate.scss} +0 -0
  227. /data/vendor/assets/stylesheets/{hint.css → hint.scss} +0 -0
  228. /data/vendor/assets/stylesheets/{jasny-bootstrap.css → jasny-bootstrap.scss} +0 -0
@@ -1,590 +0,0 @@
1
- @import "para/lib/compass/support";
2
-
3
- // The the user threshold for transform support. Defaults to `$graceful-usage-threshold`
4
- $transform-support-threshold: $graceful-usage-threshold !default;
5
-
6
- // @doc off
7
- // Note ----------------------------------------------------------------------
8
- // Safari, Chrome, and Firefox all support 3D transforms. However,
9
- // only in the most recent builds. You should also provide fallback 2d support for
10
- // Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
11
- // To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
12
- // to switch between the two support lists. The toggle defaults to 'false' (2D),
13
- // and also accepts 'true' (3D). Currently the lists are as follows:
14
- // 2D: Mozilla, Webkit, Opera, Official
15
- // 3D: Webkit, Firefox.
16
-
17
- // Available Transforms ------------------------------------------------------
18
- // - Scale (2d and 3d)
19
- // - Rotate (2d and 3d)
20
- // - Translate (2d and 3d)
21
- // - Skew (2d only)
22
-
23
- // Transform Parameters ------------------------------------------------------
24
- // - Transform Origin (2d and 3d)
25
- // - Perspective (3d)
26
- // - Perspective Origin (3d)
27
- // - Transform Style (3d)
28
- // - Backface Visibility (3d)
29
-
30
- // Mixins --------------------------------------------------------------------
31
- // transform-origin
32
- // - shortcuts: transform-origin2d, transform-origin3d
33
- // - helpers: apply-origin
34
- // transform
35
- // - shortcuts: transform2d, transform3d
36
- // - helpers: simple-transform, create-transform
37
- // perspective
38
- // - helpers: perspective-origin
39
- // transform-style
40
- // backface-visibility
41
- // scale
42
- // - shortcuts: scaleX, scaleY, scaleZ, scale3d
43
- // rotate
44
- // - shortcuts: rotateX, rotateY, rotate3d
45
- // translate
46
- // - shortcuts: translateX, translateY, translateZ, translate3d
47
- // skew
48
- // - shortcuts: skewX, skewY
49
-
50
- // Defaults ------------------------------------------------------------------
51
- // @doc on
52
-
53
- // The default x-origin for transforms
54
- $default-origin-x : 50% !default;
55
- // The default y-origin for transforms
56
- $default-origin-y : 50% !default;
57
- // The default z-origin for transforms
58
- $default-origin-z : 50% !default;
59
-
60
-
61
- // The default x-multiplier for scaling
62
- $default-scale-x : 1.25 !default;
63
- // The default y-multiplier for scaling
64
- $default-scale-y : $default-scale-x !default;
65
- // The default z-multiplier for scaling
66
- $default-scale-z : $default-scale-x !default;
67
-
68
-
69
- // The default angle for rotations
70
- $default-rotate : 45deg !default;
71
-
72
-
73
- // The default x-vector for the axis of 3d rotations
74
- $default-vector-x : 1 !default;
75
- // The default y-vector for the axis of 3d rotations
76
- $default-vector-y : 1 !default;
77
- // The default z-vector for the axis of 3d rotations
78
- $default-vector-z : 1 !default;
79
-
80
-
81
- // The default x-length for translations
82
- $default-translate-x : 1em !default;
83
- // The default y-length for translations
84
- $default-translate-y : $default-translate-x !default;
85
- // The default z-length for translations
86
- $default-translate-z : $default-translate-x !default;
87
-
88
-
89
- // The default x-angle for skewing
90
- $default-skew-x : 5deg !default;
91
- // The default y-angle for skewing
92
- $default-skew-y : 5deg !default;
93
-
94
-
95
- // **Transform-origin**
96
- // Transform-origin sent as a complete string
97
- //
98
- // @include apply-origin( origin [, 3D-only ] )
99
- //
100
- // where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
101
- // in percentages, absolute (px, cm, in, em etc..) or relative
102
- // (left, top, right, bottom, center) units
103
- //
104
- // @param only3d Set this to true to only apply this
105
- // mixin where browsers have 3D support.
106
- @mixin apply-origin($origin, $only3d) {
107
- $capability: if($only3d or length($origin) > 2, transforms3d, transforms2d);
108
- @include prefixed-properties($capability, $transform-support-threshold, (
109
- transform-origin: $origin
110
- ));
111
- }
112
-
113
- // Transform-origin sent as individual arguments:
114
- //
115
- // @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
116
- //
117
- // where the 3 'origin-' arguments represent x/y/z coordinates.
118
- //
119
- // **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
120
- @mixin transform-origin(
121
- $origin-x: $default-origin-x,
122
- $origin-y: $default-origin-y,
123
- $origin-z: false,
124
- $only3d: if($origin-z, true, false)
125
- ) {
126
- $origin: unquote('');
127
- @if $origin-x or $origin-y or $origin-z {
128
- @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
129
- @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
130
- @if $origin-z { $origin: $origin $origin-z; }
131
- @include apply-origin($origin, $only3d);
132
- }
133
- }
134
-
135
-
136
- // Transform sent as a complete string:
137
- //
138
- // @include transform( transforms [, 3D-only ] )
139
- //
140
- // where 'transforms' is a space separated list of all the transforms to be applied.
141
- @mixin transform(
142
- $transform,
143
- $only3d: false
144
- ) {
145
- $capability: if($only3d, transforms3d, transforms2d);
146
- @include prefixed-properties($capability, $transform-support-threshold, (
147
- transform: $transform
148
- ));
149
- }
150
-
151
- // Shortcut to target all browsers with 2D transform support
152
- @mixin transform2d($trans) {
153
- @include transform($trans, false);
154
- }
155
-
156
- // Shortcut to target only browsers with 3D transform support
157
- @mixin transform3d($trans) {
158
- @include transform($trans, true);
159
- }
160
-
161
- // @doc off
162
- // 3D Parameters -------------------------------------------------------------
163
- // @doc on
164
-
165
- // Set the perspective of 3D transforms on the children of an element:
166
- //
167
- // @include perspective( perspective )
168
- //
169
- // where 'perspective' is a unitless number representing the depth of the
170
- // z-axis. The higher the perspective, the more exaggerated the foreshortening.
171
- // values from 500 to 1000 are more-or-less "normal" - a good starting-point.
172
- @mixin perspective($p) {
173
- @include prefixed-properties(transforms3d, $transform-support-threshold, (
174
- perspective: $p
175
- ));
176
- }
177
-
178
- // Set the origin position for the perspective
179
- //
180
- // @include perspective-origin(origin-x [origin-y])
181
- //
182
- // where the two arguments represent x/y coordinates
183
- @mixin perspective-origin($origin: 50%) {
184
- @include prefixed-properties(transforms3d, $transform-support-threshold, (
185
- perspective-origin: $origin
186
- ));
187
- }
188
-
189
- // Determine whether a 3D objects children also live in the given 3D space
190
- //
191
- // @include transform-style( [ style ] )
192
- //
193
- // where `style` can be either `flat` or `preserve-3d`.
194
- // Browsers default to `flat`, mixin defaults to `preserve-3d`.
195
- @mixin transform-style($style: preserve-3d) {
196
- @include prefixed-properties(transforms3d, $transform-support-threshold, (
197
- transform-style: $style
198
- ));
199
- }
200
-
201
- // Determine the visibility of an element when it's back is turned
202
- //
203
- // @include backface-visibility( [ visibility ] )
204
- //
205
- // where `visibility` can be either `visible` or `hidden`.
206
- // Browsers default to visible, mixin defaults to hidden
207
- @mixin backface-visibility($visibility: hidden) {
208
- @include prefixed-properties(transforms3d, $transform-support-threshold, (
209
- backface-visibility: $visibility
210
- ));
211
- }
212
-
213
- // @doc off
214
- // Transform Partials --------------------------------------------------------
215
- // These work well on their own, but they don't add to each other, they override.
216
- // Use along with transform parameter mixins to adjust origin, perspective and style
217
- // ---------------------------------------------------------------------------
218
-
219
-
220
- // Scale ---------------------------------------------------------------------
221
- // @doc on
222
-
223
- // Scale an object along the x and y axis:
224
- //
225
- // @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
226
- //
227
- // where the 'scale-' arguments are unitless multipliers of the x and y dimensions
228
- // and perspective, which works the same as the stand-alone perspective property/mixin
229
- // but applies to the individual element (multiplied with any parent perspective)
230
- //
231
- // **Note** This mixin cannot be combined with other transform mixins.
232
- @mixin scale(
233
- $scale-x: $default-scale-x,
234
- $scale-y: $scale-x,
235
- $perspective: false,
236
- $only3d: false
237
- ) {
238
- $trans: scale($scale-x, $scale-y);
239
- @if $perspective { $trans: perspective($perspective) $trans; }
240
- @include transform($trans, $only3d);
241
- }
242
-
243
- // Scale an object along the x axis
244
- // @include scaleX( [ scale-x, perspective, 3D-only ] )
245
- //
246
- // **Note** This mixin cannot be combined with other transform mixins.
247
- @mixin scaleX(
248
- $scale: $default-scale-x,
249
- $perspective: false,
250
- $only3d: false
251
- ) {
252
- $trans: scaleX($scale);
253
- @if $perspective { $trans: perspective($perspective) $trans; }
254
- @include transform($trans, $only3d);
255
- }
256
-
257
- // Scale an object along the y axis
258
- // @include scaleY( [ scale-y, perspective, 3D-only ] )
259
- //
260
- // **Note** This mixin cannot be combined with other transform mixins.
261
- @mixin scaleY(
262
- $scale: $default-scale-y,
263
- $perspective: false,
264
- $only3d: false
265
- ) {
266
- $trans: scaleY($scale);
267
- @if $perspective { $trans: perspective($perspective) $trans; }
268
- @include transform($trans, $only3d);
269
- }
270
-
271
- // Scale an object along the z axis
272
- // @include scaleZ( [ scale-z, perspective ] )
273
- //
274
- // **Note** This mixin cannot be combined with other transform mixins.
275
- @mixin scaleZ(
276
- $scale: $default-scale-z,
277
- $perspective: false
278
- ) {
279
- $trans: scaleZ($scale);
280
- @if $perspective { $trans: perspective($perspective) $trans; }
281
- @include transform3d($trans);
282
- }
283
-
284
- // Scale and object along all three axis
285
- // @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
286
- //
287
- // **Note** This mixin cannot be combined with other transform mixins.
288
- @mixin scale3d(
289
- $scale-x: $default-scale-x,
290
- $scale-y: $default-scale-y,
291
- $scale-z: $default-scale-z,
292
- $perspective: false
293
- ) {
294
- $trans: scale3d($scale-x, $scale-y, $scale-z);
295
- @if $perspective { $trans: perspective($perspective) $trans; }
296
- @include transform3d($trans);
297
- }
298
-
299
- // @doc off
300
- // Rotate --------------------------------------------------------------------
301
- // @doc on
302
-
303
- // Rotate an object around the z axis (2D)
304
- // @include rotate( [ rotation, perspective, 3D-only ] )
305
- // where 'rotation' is an angle set in degrees (deg) or radian (rad) units
306
- //
307
- // **Note** This mixin cannot be combined with other transform mixins.
308
- @mixin rotate(
309
- $rotate: $default-rotate,
310
- $perspective: false,
311
- $only3d: false
312
- ) {
313
- $trans: rotate($rotate);
314
- @if $perspective { $trans: perspective($perspective) $trans; }
315
- @include transform($trans, $only3d);
316
- }
317
-
318
- // A longcut for 'rotate' in case you forget that 'z' is implied
319
- //
320
- // **Note** This mixin cannot be combined with other transform mixins.
321
- @mixin rotateZ(
322
- $rotate: $default-rotate,
323
- $perspective: false,
324
- $only3d: false
325
- ) {
326
- @include rotate($rotate, $perspective, $only3d);
327
- }
328
-
329
- // Rotate an object around the x axis (3D)
330
- // @include rotateX( [ rotation, perspective ] )
331
- //
332
- // **Note** This mixin cannot be combined with other transform mixins.
333
- @mixin rotateX(
334
- $rotate: $default-rotate,
335
- $perspective: false
336
- ) {
337
- $trans: rotateX($rotate);
338
- @if $perspective { $trans: perspective($perspective) $trans; }
339
- @include transform3d($trans);
340
- }
341
-
342
- // Rotate an object around the y axis (3D)
343
- // @include rotate( [ rotation, perspective ] )
344
- //
345
- // **Note** This mixin cannot be combined with other transform mixins.
346
- @mixin rotateY(
347
- $rotate: $default-rotate,
348
- $perspective: false
349
- ) {
350
- $trans: rotateY($rotate);
351
- @if $perspective { $trans: perspective($perspective) $trans; }
352
- @include transform3d($trans);
353
- }
354
-
355
- // Rotate an object around an arbitrary axis (3D)
356
- // @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
357
- // where the 'vector-' arguments accept unitless numbers.
358
- // These numbers are not important on their own, but in relation to one another
359
- // creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
360
- //
361
- // **Note** This mixin cannot be combined with other transform mixins.
362
- @mixin rotate3d(
363
- $vector-x: $default-vector-x,
364
- $vector-y: $default-vector-y,
365
- $vector-z: $default-vector-z,
366
- $rotate: $default-rotate,
367
- $perspective: false
368
- ) {
369
- $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
370
- @if $perspective { $trans: perspective($perspective) $trans; }
371
- @include transform3d($trans);
372
- }
373
-
374
- // @doc off
375
- // Translate -----------------------------------------------------------------
376
- // @doc on
377
-
378
- // Move an object along the x or y axis (2D)
379
- // @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
380
- // where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
381
- //
382
- // **Note** This mixin cannot be combined with other transform mixins.
383
- @mixin translate(
384
- $translate-x: $default-translate-x,
385
- $translate-y: $default-translate-y,
386
- $perspective: false,
387
- $only3d: false
388
- ) {
389
- $trans: translate($translate-x, $translate-y);
390
- @if $perspective { $trans: perspective($perspective) $trans; }
391
- @include transform($trans, $only3d);
392
- }
393
-
394
- // Move an object along the x axis (2D)
395
- // @include translate( [ translate-x, perspective, 3D-only ] )
396
- //
397
- // **Note** This mixin cannot be combined with other transform mixins.
398
- @mixin translateX(
399
- $trans-x: $default-translate-x,
400
- $perspective: false,
401
- $only3d: false
402
- ) {
403
- $trans: translateX($trans-x);
404
- @if $perspective { $trans: perspective($perspective) $trans; }
405
- @include transform($trans, $only3d);
406
- }
407
-
408
- // Move an object along the y axis (2D)
409
- // @include translate( [ translate-y, perspective, 3D-only ] )
410
- //
411
- // **Note** This mixin cannot be combined with other transform mixins.
412
- @mixin translateY(
413
- $trans-y: $default-translate-y,
414
- $perspective: false,
415
- $only3d: false
416
- ) {
417
- $trans: translateY($trans-y);
418
- @if $perspective { $trans: perspective($perspective) $trans; }
419
- @include transform($trans, $only3d);
420
- }
421
-
422
- // Move an object along the z axis (3D)
423
- // @include translate( [ translate-z, perspective ] )
424
- //
425
- // **Note** This mixin cannot be combined with other transform mixins.
426
- @mixin translateZ(
427
- $trans-z: $default-translate-z,
428
- $perspective: false
429
- ) {
430
- $trans: translateZ($trans-z);
431
- @if $perspective { $trans: perspective($perspective) $trans; }
432
- @include transform3d($trans);
433
- }
434
-
435
- // Move an object along the x, y and z axis (3D)
436
- // @include translate( [ translate-x, translate-y, translate-z, perspective ] )
437
- //
438
- // **Note** This mixin cannot be combined with other transform mixins.
439
- @mixin translate3d(
440
- $translate-x: $default-translate-x,
441
- $translate-y: $default-translate-y,
442
- $translate-z: $default-translate-z,
443
- $perspective: false
444
- ) {
445
- $trans: translate3d($translate-x, $translate-y, $translate-z);
446
- @if $perspective { $trans: perspective($perspective) $trans; }
447
- @include transform3d($trans);
448
- }
449
-
450
- // @doc off
451
- // Skew ----------------------------------------------------------------------
452
- // @doc on
453
-
454
- // Skew an element:
455
- //
456
- // @include skew( [ skew-x, skew-y, 3D-only ] )
457
- //
458
- // where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
459
- //
460
- // **Note** This mixin cannot be combined with other transform mixins.
461
- @mixin skew(
462
- $skew-x: $default-skew-x,
463
- $skew-y: $default-skew-y,
464
- $only3d: false
465
- ) {
466
- $trans: skew($skew-x, $skew-y);
467
- @include transform($trans, $only3d);
468
- }
469
-
470
- // Skew an element along the x axiz
471
- //
472
- // @include skew( [ skew-x, 3D-only ] )
473
- //
474
- // **Note** This mixin cannot be combined with other transform mixins.
475
- @mixin skewX(
476
- $skew-x: $default-skew-x,
477
- $only3d: false
478
- ) {
479
- $trans: skewX($skew-x);
480
- @include transform($trans, $only3d);
481
- }
482
-
483
- // Skew an element along the y axis
484
- //
485
- // @include skew( [ skew-y, 3D-only ] )
486
- //
487
- // **Note** This mixin cannot be combined with other transform mixins.
488
- @mixin skewY(
489
- $skew-y: $default-skew-y,
490
- $only3d: false
491
- ) {
492
- $trans: skewY($skew-y);
493
- @include transform($trans, $only3d);
494
- }
495
-
496
-
497
- // Full transform mixins
498
- // For settings any combination of transforms as arguments
499
- // These are complex and not highly recommended for daily use. They are mainly
500
- // here for backward-compatibility purposes.
501
- //
502
- // * they include origin adjustments
503
- // * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
504
- //
505
- // **Note** This mixin cannot be combined with other transform mixins.
506
- @mixin create-transform(
507
- $perspective: false,
508
- $scale-x: false,
509
- $scale-y: false,
510
- $scale-z: false,
511
- $rotate-x: false,
512
- $rotate-y: false,
513
- $rotate-z: false,
514
- $rotate3d: false,
515
- $trans-x: false,
516
- $trans-y: false,
517
- $trans-z: false,
518
- $skew-x: false,
519
- $skew-y: false,
520
- $origin-x: false,
521
- $origin-y: false,
522
- $origin-z: false,
523
- $only3d: false
524
- ) {
525
- $trans: unquote("");
526
-
527
- // perspective
528
- @if $perspective { $trans: perspective($perspective) ; }
529
-
530
- // scale
531
- @if $scale-x and $scale-y {
532
- @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
533
- @else { $trans: $trans scale($scale-x, $scale-y); }
534
- } @else {
535
- @if $scale-x { $trans: $trans scaleX($scale-x); }
536
- @if $scale-y { $trans: $trans scaleY($scale-y); }
537
- @if $scale-z { $trans: $trans scaleZ($scale-z); }
538
- }
539
-
540
- // rotate
541
- @if $rotate-x { $trans: $trans rotateX($rotate-x); }
542
- @if $rotate-y { $trans: $trans rotateY($rotate-y); }
543
- @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
544
- @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
545
-
546
- // translate
547
- @if $trans-x and $trans-y {
548
- @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
549
- @else { $trans: $trans translate($trans-x, $trans-y); }
550
- } @else {
551
- @if $trans-x { $trans: $trans translateX($trans-x); }
552
- @if $trans-y { $trans: $trans translateY($trans-y); }
553
- @if $trans-z { $trans: $trans translateZ($trans-z); }
554
- }
555
-
556
- // skew
557
- @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
558
- @else {
559
- @if $skew-x { $trans: $trans skewX($skew-x); }
560
- @if $skew-y { $trans: $trans skewY($skew-y); }
561
- }
562
-
563
- // apply it!
564
- @include transform($trans, $only3d);
565
- @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
566
- }
567
-
568
-
569
- // A simplified set of options
570
- // backwards-compatible with the previous version of the 'transform' mixin
571
- @mixin simple-transform(
572
- $scale: false,
573
- $rotate: false,
574
- $trans-x: false,
575
- $trans-y: false,
576
- $skew-x: false,
577
- $skew-y: false,
578
- $origin-x: false,
579
- $origin-y: false
580
- ) {
581
- @include create-transform(
582
- false,
583
- $scale, $scale, false,
584
- false, false, $rotate, false,
585
- $trans-x, $trans-y, false,
586
- $skew-x, $skew-y,
587
- $origin-x, $origin-y, false,
588
- false
589
- );
590
- }