archetype 0.0.1.pre.13 → 1.0.0.alpha.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (253) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +97 -24
  3. data/README.md +11 -5
  4. data/VERSION +1 -0
  5. data/lib/archetype.rb +30 -18
  6. data/lib/archetype/actions/migrate.rb +152 -0
  7. data/lib/archetype/actions/theme.rb +6 -7
  8. data/lib/archetype/executor.rb +21 -7
  9. data/lib/archetype/extensions.rb +57 -0
  10. data/lib/archetype/functions.rb +2 -3
  11. data/lib/archetype/functions/css.rb +70 -0
  12. data/lib/archetype/functions/css/constants.rb +247 -0
  13. data/lib/archetype/functions/css/helpers.rb +265 -0
  14. data/lib/archetype/functions/css/routers.rb +28 -0
  15. data/lib/archetype/functions/css/routers/animation.rb +55 -0
  16. data/lib/archetype/functions/css/routers/background.rb +38 -0
  17. data/lib/archetype/functions/css/routers/border.rb +151 -0
  18. data/lib/archetype/functions/css/routers/list.rb +63 -0
  19. data/lib/archetype/functions/css/routers/margin_padding.rb +40 -0
  20. data/lib/archetype/functions/css/routers/outline.rb +56 -0
  21. data/lib/archetype/functions/css/routers/overflow.rb +11 -0
  22. data/lib/archetype/functions/css/routers/target.rb +38 -0
  23. data/lib/archetype/functions/css/routers/transition.rb +48 -0
  24. data/lib/archetype/functions/css/shorthands.rb +43 -0
  25. data/lib/archetype/functions/css/shorthands/animation.rb +18 -0
  26. data/lib/archetype/functions/css/shorthands/background.rb +68 -0
  27. data/lib/archetype/functions/css/shorthands/border.rb +102 -0
  28. data/lib/archetype/functions/hash.rb +3 -149
  29. data/lib/archetype/functions/hash/extend.rb +74 -0
  30. data/lib/archetype/functions/hash/shim.rb +48 -0
  31. data/lib/archetype/functions/helpers.rb +231 -22
  32. data/lib/archetype/functions/styleguide_memoizer.rb +18 -1
  33. data/lib/archetype/sass_extensions.rb +1 -3
  34. data/lib/archetype/sass_extensions/functions.rb +15 -1
  35. data/lib/archetype/sass_extensions/functions/environment.rb +152 -1
  36. data/lib/archetype/sass_extensions/functions/lists.rb +95 -45
  37. data/lib/archetype/sass_extensions/functions/locale.rb +107 -28
  38. data/lib/archetype/sass_extensions/functions/numbers.rb +118 -4
  39. data/lib/archetype/sass_extensions/functions/strings.rb +53 -0
  40. data/lib/archetype/sass_extensions/functions/styleguide.rb +43 -375
  41. data/lib/archetype/sass_extensions/functions/styleguide/components.rb +25 -0
  42. data/lib/archetype/sass_extensions/functions/styleguide/constants.rb +27 -0
  43. data/lib/archetype/sass_extensions/functions/styleguide/grammar.rb +80 -0
  44. data/lib/archetype/sass_extensions/functions/styleguide/helpers.rb +36 -0
  45. data/lib/archetype/sass_extensions/functions/styleguide/resolve.rb +159 -0
  46. data/lib/archetype/sass_extensions/functions/styleguide/styles.rb +146 -0
  47. data/lib/archetype/sass_extensions/functions/styleguide/themes.rb +40 -0
  48. data/lib/archetype/sass_extensions/functions/ui.rb +7 -57
  49. data/lib/archetype/sass_extensions/functions/ui/glyphs.rb +118 -0
  50. data/lib/archetype/sass_extensions/functions/ui/scopes.rb +96 -0
  51. data/lib/archetype/sass_extensions/functions/util.rb +14 -0
  52. data/lib/archetype/sass_extensions/functions/util/debug.rb +22 -0
  53. data/lib/archetype/sass_extensions/functions/util/hacks.rb +44 -0
  54. data/lib/archetype/sass_extensions/functions/util/images.rb +132 -0
  55. data/lib/archetype/sass_extensions/functions/util/misc.rb +220 -0
  56. data/lib/archetype/sass_extensions/functions/util/spacing.rb +83 -0
  57. data/lib/archetype/sass_extensions/functions/version.rb +12 -17
  58. data/lib/archetype/version.rb +1 -1
  59. data/stylesheets/archetype/_config.scss +1 -389
  60. data/stylesheets/archetype/_core.scss +15 -0
  61. data/stylesheets/archetype/_hacks.scss +4 -120
  62. data/stylesheets/archetype/_init.scss +4 -22
  63. data/stylesheets/archetype/_required.scss +3 -0
  64. data/stylesheets/archetype/_reset.scss +3 -0
  65. data/stylesheets/archetype/_styleguide.scss +2 -6
  66. data/stylesheets/archetype/_ui.scss +2 -358
  67. data/stylesheets/archetype/_util.scss +3 -10
  68. data/stylesheets/archetype/config/_core.scss +14 -0
  69. data/stylesheets/archetype/config/_environment.scss +19 -0
  70. data/stylesheets/archetype/config/_formatting.scss +63 -0
  71. data/stylesheets/archetype/config/_glyphs.scss +252 -0
  72. data/stylesheets/archetype/config/_resets.scss +7 -0
  73. data/stylesheets/archetype/config/_resolution.scss +3 -0
  74. data/stylesheets/archetype/config/_spacing.scss +5 -0
  75. data/stylesheets/archetype/config/_targeting.scss +18 -0
  76. data/stylesheets/archetype/config/_theme.scss +3 -0
  77. data/stylesheets/archetype/config/_typography.scss +56 -0
  78. data/stylesheets/archetype/config/_units.scss +2 -0
  79. data/stylesheets/archetype/config/_vars.scss +10 -0
  80. data/stylesheets/archetype/hacks/_core.scss +4 -0
  81. data/stylesheets/archetype/hacks/_hacks.scss +160 -0
  82. data/stylesheets/archetype/hacks/_init.scss +2 -0
  83. data/stylesheets/archetype/styleguide/_core.scss +4 -0
  84. data/stylesheets/archetype/styleguide/_init.scss +1 -0
  85. data/stylesheets/archetype/styleguide/_styleguide.scss +41 -18
  86. data/stylesheets/archetype/ui/_accessibility.scss +41 -0
  87. data/stylesheets/archetype/ui/_breakpoints.scss +19 -0
  88. data/stylesheets/archetype/ui/_core.scss +10 -0
  89. data/stylesheets/archetype/ui/_elements.scss +98 -0
  90. data/stylesheets/archetype/ui/_glyphs.scss +244 -0
  91. data/stylesheets/archetype/ui/_init.scss +5 -0
  92. data/stylesheets/archetype/ui/_layout.scss +37 -0
  93. data/stylesheets/archetype/ui/_locale.scss +12 -0
  94. data/stylesheets/archetype/ui/_scopes.scss +42 -0
  95. data/stylesheets/archetype/util/_core.scss +8 -0
  96. data/stylesheets/archetype/util/_debug.scss +9 -21
  97. data/stylesheets/archetype/util/_init.scss +1 -0
  98. data/stylesheets/archetype/util/_misc.scss +21 -86
  99. data/stylesheets/archetype/util/_spacing.scss +9 -40
  100. data/stylesheets/archetype/util/_styles.scss +189 -178
  101. data/stylesheets/archetype/util/_targeting.scss +51 -68
  102. data/templates/example/manifest.rb +2 -2
  103. data/templates/example/screen.scss +0 -1
  104. data/templates/project/manifest.rb +3 -8
  105. metadata +93 -263
  106. data/bin/archetype +0 -3
  107. data/lib/archetype/sass_extensions/monkey_patches.rb +0 -3
  108. data/lib/archetype/sass_extensions/monkey_patches/handle_include_loop.rb +0 -13
  109. data/stylesheets/archetype/_base.scss +0 -54
  110. data/stylesheets/archetype/_grid.scss +0 -3
  111. data/stylesheets/archetype/base/_h5bp.scss +0 -307
  112. data/stylesheets/archetype/base/_hybrid.scss +0 -25
  113. data/stylesheets/archetype/base/_normalize.scss +0 -634
  114. data/stylesheets/archetype/base/_reset.scss +0 -72
  115. data/stylesheets/archetype/grid/_config.scss +0 -14
  116. data/stylesheets/archetype/grid/_grid.scss +0 -391
  117. data/stylesheets/archetype/styleguide/_components.scss +0 -25
  118. data/stylesheets/archetype/styleguide/_helpers.scss +0 -215
  119. data/stylesheets/archetype/styleguide/_primitives.scss +0 -10
  120. data/stylesheets/archetype/styleguide/components/_alerts.scss +0 -59
  121. data/stylesheets/archetype/styleguide/components/_annotations.scss +0 -27
  122. data/stylesheets/archetype/styleguide/components/_bristol.scss +0 -15
  123. data/stylesheets/archetype/styleguide/components/_button_groups.scss +0 -47
  124. data/stylesheets/archetype/styleguide/components/_button_toolbars.scss +0 -17
  125. data/stylesheets/archetype/styleguide/components/_buttons.scss +0 -339
  126. data/stylesheets/archetype/styleguide/components/_canvas.scss +0 -15
  127. data/stylesheets/archetype/styleguide/components/_carets.scss +0 -336
  128. data/stylesheets/archetype/styleguide/components/_closes.scss +0 -63
  129. data/stylesheets/archetype/styleguide/components/_container.scss +0 -27
  130. data/stylesheets/archetype/styleguide/components/_copy.scss +0 -85
  131. data/stylesheets/archetype/styleguide/components/_flyouts.scss +0 -52
  132. data/stylesheets/archetype/styleguide/components/_headings.scss +0 -33
  133. data/stylesheets/archetype/styleguide/components/_headlines.scss +0 -64
  134. data/stylesheets/archetype/styleguide/components/_hovercards.scss +0 -27
  135. data/stylesheets/archetype/styleguide/components/_icons.scss +0 -17
  136. data/stylesheets/archetype/styleguide/components/_identities.scss +0 -34
  137. data/stylesheets/archetype/styleguide/components/_links.scss +0 -68
  138. data/stylesheets/archetype/styleguide/components/_loaders.scss +0 -154
  139. data/stylesheets/archetype/styleguide/components/_menu_items.scss +0 -31
  140. data/stylesheets/archetype/styleguide/components/_module.scss +0 -15
  141. data/stylesheets/archetype/styleguide/components/_pullquotes.scss +0 -29
  142. data/stylesheets/archetype/styleguide/components/_punchcut.scss +0 -18
  143. data/stylesheets/archetype/styleguide/components/_tooltips.scss +0 -28
  144. data/stylesheets/archetype/styleguide/primitives/_animations.scss +0 -17
  145. data/stylesheets/archetype/styleguide/primitives/_dimensions.scss +0 -50
  146. data/stylesheets/archetype/styleguide/primitives/_glyphs.scss +0 -11
  147. data/stylesheets/archetype/styleguide/primitives/_misc.scss +0 -8
  148. data/stylesheets/archetype/styleguide/primitives/_palettes.scss +0 -94
  149. data/stylesheets/archetype/styleguide/primitives/_shadows.scss +0 -23
  150. data/stylesheets/archetype/styleguide/primitives/_sprites.scss +0 -46
  151. data/stylesheets/archetype/styleguide/primitives/_textures.scss +0 -10
  152. data/stylesheets/archetype/styleguide/primitives/_typography.scss +0 -56
  153. data/stylesheets/archetype/util/_lists.scss +0 -57
  154. data/stylesheets/archetype/util/_rtl.scss +0 -279
  155. data/stylesheets/archetype/util/_units.scss +0 -18
  156. data/templates/project/screen.scss +0 -1
  157. data/templates/project/vendor/archetype/animations/loaders/large/large.png +0 -0
  158. data/templates/project/vendor/archetype/animations/loaders/large/large_dark.png +0 -0
  159. data/templates/project/vendor/archetype/animations/loaders/large/large_dark_static.png +0 -0
  160. data/templates/project/vendor/archetype/animations/loaders/large/large_static.png +0 -0
  161. data/templates/project/vendor/archetype/animations/loaders/medium/medium.png +0 -0
  162. data/templates/project/vendor/archetype/animations/loaders/medium/medium_dark.png +0 -0
  163. data/templates/project/vendor/archetype/animations/loaders/medium/medium_dark_static.png +0 -0
  164. data/templates/project/vendor/archetype/animations/loaders/medium/medium_static.png +0 -0
  165. data/templates/project/vendor/archetype/animations/loaders/small/small.png +0 -0
  166. data/templates/project/vendor/archetype/animations/loaders/small/small_dark.png +0 -0
  167. data/templates/project/vendor/archetype/animations/loaders/small/small_dark_static.png +0 -0
  168. data/templates/project/vendor/archetype/animations/loaders/small/small_static.png +0 -0
  169. data/templates/project/vendor/archetype/fontawesome-webfont.eot +0 -0
  170. data/templates/project/vendor/archetype/fontawesome-webfont.svg +0 -255
  171. data/templates/project/vendor/archetype/fontawesome-webfont.ttf +0 -0
  172. data/templates/project/vendor/archetype/fontawesome-webfont.woff +0 -0
  173. data/test/fixtures/stylesheets/archetype/assets/fonts/fontawesome-webfont.eot +0 -0
  174. data/test/fixtures/stylesheets/archetype/assets/fonts/fontawesome-webfont.svg +0 -255
  175. data/test/fixtures/stylesheets/archetype/assets/fonts/fontawesome-webfont.ttf +0 -0
  176. data/test/fixtures/stylesheets/archetype/assets/fonts/fontawesome-webfont.woff +0 -0
  177. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders-s7889ccc8c1.png +0 -0
  178. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/large/large.png +0 -0
  179. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/large/large_dark.png +0 -0
  180. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/large/large_dark_static.png +0 -0
  181. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/large/large_static.png +0 -0
  182. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/medium/medium.png +0 -0
  183. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/medium/medium_dark.png +0 -0
  184. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/medium/medium_dark_static.png +0 -0
  185. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/medium/medium_static.png +0 -0
  186. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/small/small.png +0 -0
  187. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/small/small_dark.png +0 -0
  188. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/small/small_dark_static.png +0 -0
  189. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/animations/loaders/small/small_static.png +0 -0
  190. data/test/fixtures/stylesheets/archetype/assets/images/vendor/archetype/sprites/hovercard_tip.png +0 -0
  191. data/test/fixtures/stylesheets/archetype/config.rb +0 -21
  192. data/test/fixtures/stylesheets/archetype/source/b.scss +0 -9
  193. data/test/fixtures/stylesheets/archetype/source/base.scss +0 -3
  194. data/test/fixtures/stylesheets/archetype/source/hacks/ie_pseudo.scss +0 -13
  195. data/test/fixtures/stylesheets/archetype/source/hacks/transparent_focusable.scss +0 -5
  196. data/test/fixtures/stylesheets/archetype/source/locale.scss +0 -43
  197. data/test/fixtures/stylesheets/archetype/source/styleguide/alerts.scss +0 -21
  198. data/test/fixtures/stylesheets/archetype/source/styleguide/buttons.scss +0 -18
  199. data/test/fixtures/stylesheets/archetype/source/styleguide/drop.scss +0 -101
  200. data/test/fixtures/stylesheets/archetype/source/styleguide/extend.scss +0 -24
  201. data/test/fixtures/stylesheets/archetype/source/styleguide/fallback_styles.scss +0 -23
  202. data/test/fixtures/stylesheets/archetype/source/styleguide/invalid_structures.scss +0 -85
  203. data/test/fixtures/stylesheets/archetype/source/styleguide/multi_value.scss +0 -18
  204. data/test/fixtures/stylesheets/archetype/source/styleguide/nested_styleguides.scss +0 -40
  205. data/test/fixtures/stylesheets/archetype/source/styleguide/selective_state.scss +0 -22
  206. data/test/fixtures/stylesheets/archetype/source/ui/glyph_icon.scss +0 -35
  207. data/test/fixtures/stylesheets/archetype/source/ui/hide_element.scss +0 -5
  208. data/test/fixtures/stylesheets/archetype/source/ui/stroke.scss +0 -13
  209. data/test/fixtures/stylesheets/archetype/source/ui/triangle.scss +0 -13
  210. data/test/fixtures/stylesheets/archetype/source/utilities/associative.scss +0 -24
  211. data/test/fixtures/stylesheets/archetype/source/utilities/custom_output_styler.scss +0 -22
  212. data/test/fixtures/stylesheets/archetype/source/utilities/if-set.scss +0 -16
  213. data/test/fixtures/stylesheets/archetype/source/utilities/spacing/horizontal-spacing.scss +0 -27
  214. data/test/fixtures/stylesheets/archetype/source/utilities/spacing/vertical-spacing.scss +0 -27
  215. data/test/fixtures/stylesheets/archetype/source/utilities/styles/filter.scss +0 -9
  216. data/test/fixtures/stylesheets/archetype/source/utilities/styles/font-family.scss +0 -9
  217. data/test/fixtures/stylesheets/archetype/source/utilities/styles/z-index.scss +0 -18
  218. data/test/fixtures/stylesheets/archetype/source/utilities/targeting/target-browser.scss +0 -77
  219. data/test/fixtures/stylesheets/archetype/source/utilities/targeting/target-os.scss +0 -42
  220. data/test/fixtures/stylesheets/archetype/tmp/b.css +0 -14
  221. data/test/fixtures/stylesheets/archetype/tmp/base.css +0 -349
  222. data/test/fixtures/stylesheets/archetype/tmp/hacks/ie_pseudo.css +0 -11
  223. data/test/fixtures/stylesheets/archetype/tmp/hacks/transparent_focusable.css +0 -4
  224. data/test/fixtures/stylesheets/archetype/tmp/locale.css +0 -23
  225. data/test/fixtures/stylesheets/archetype/tmp/styleguide/alerts.css +0 -711
  226. data/test/fixtures/stylesheets/archetype/tmp/styleguide/buttons.css +0 -2119
  227. data/test/fixtures/stylesheets/archetype/tmp/styleguide/drop.css +0 -63
  228. data/test/fixtures/stylesheets/archetype/tmp/styleguide/extend.css +0 -11
  229. data/test/fixtures/stylesheets/archetype/tmp/styleguide/fallback_styles.css +0 -10
  230. data/test/fixtures/stylesheets/archetype/tmp/styleguide/invalid_structures.css +0 -21
  231. data/test/fixtures/stylesheets/archetype/tmp/styleguide/multi_value.css +0 -13
  232. data/test/fixtures/stylesheets/archetype/tmp/styleguide/nested_styleguides.css +0 -28
  233. data/test/fixtures/stylesheets/archetype/tmp/styleguide/selective_state.css +0 -177
  234. data/test/fixtures/stylesheets/archetype/tmp/ui/glyph_icon.css +0 -127
  235. data/test/fixtures/stylesheets/archetype/tmp/ui/hide_element.css +0 -8
  236. data/test/fixtures/stylesheets/archetype/tmp/ui/stroke.css +0 -17
  237. data/test/fixtures/stylesheets/archetype/tmp/ui/triangle.css +0 -35
  238. data/test/fixtures/stylesheets/archetype/tmp/utilities/associative.css +0 -9
  239. data/test/fixtures/stylesheets/archetype/tmp/utilities/custom_output_styler.css +0 -8
  240. data/test/fixtures/stylesheets/archetype/tmp/utilities/if-set.css +0 -9
  241. data/test/fixtures/stylesheets/archetype/tmp/utilities/spacing/horizontal-spacing.css +0 -29
  242. data/test/fixtures/stylesheets/archetype/tmp/utilities/spacing/vertical-spacing.css +0 -29
  243. data/test/fixtures/stylesheets/archetype/tmp/utilities/styles/filter.css +0 -11
  244. data/test/fixtures/stylesheets/archetype/tmp/utilities/styles/font-family.css +0 -16
  245. data/test/fixtures/stylesheets/archetype/tmp/utilities/styles/z-index.css +0 -15
  246. data/test/fixtures/stylesheets/archetype/tmp/utilities/targeting/target-browser.css +0 -105
  247. data/test/fixtures/stylesheets/archetype/tmp/utilities/targeting/target-os.css +0 -55
  248. data/test/helpers/diff.rb +0 -49
  249. data/test/helpers/io.rb +0 -36
  250. data/test/helpers/test_case.rb +0 -62
  251. data/test/integrations/archetype_test.rb +0 -126
  252. data/test/test_helper.rb +0 -26
  253. data/test/units/sass_extensions_test.rb +0 -200
@@ -0,0 +1,15 @@
1
+ // this is the harness file for Archetype's core functionality
2
+
3
+ // register pre-maturely so the dependencies know the context has been set
4
+ $a-blackhole: register-archetype-module(archetype/core);
5
+
6
+ @import "required"; // any required dependencies
7
+ @import "util/core"; // utility mixins and helper functions
8
+ @import "hacks/core"; // browser hacks
9
+ @import "ui/core"; // UI mixins
10
+ @import "styleguide/core"; // styleguide framework
11
+
12
+ // decide whether or not we are going to auto-reset
13
+ @if not $CONFIG_RESET_AUTO {
14
+ $a-blackhole: skip-archetype-init() !global;
15
+ }
@@ -1,121 +1,5 @@
1
+ // TODO - verify this works standalone via `@import 'archetype/hacks'`
1
2
  // @category hacks
2
- @import "util";
3
-
4
- // hack to support negative margins in legacy IE
5
- // @mixin hack-negative-margin
6
- @mixin hack-negative-margin() {
7
- @if($legacy-support-for-ie6 or $legacy-support-for-ie7) {
8
- @include has-layout();
9
- position: relative;
10
- }
11
- }
12
-
13
- // max-height hack
14
- // @mixin max-height
15
- // @param $value {String} the height
16
- @mixin max-height($value) {
17
- @include hacked-maximum(height, $value);
18
- }
19
-
20
- // max-width hack
21
- // @mixin max-width
22
- // @param $value {String} the width
23
- @mixin max-width($value) {
24
- @include hacked-maximum(width, $value);
25
- }
26
-
27
- // generic max-* hack wrapper
28
- // @mixin hacked-maximum
29
- // @param $property {String} property [height|width]
30
- // @param $value {String} the value
31
- @mixin hacked-maximum($property, $value) {
32
- max-#{$property}: $value;
33
- @include bang-hack($property, auto, $value);
34
- }
35
-
36
- // proxy for ie-pseudo
37
- // @mixin ie-pseudo-before
38
- // @param $styles {String} the styles to apply to the pseudo-element
39
- // @param $content {String} the content to insert into the element (similar to css `content` attribute)
40
- // @param $name {String} the name of the element
41
- // @content
42
- @mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
43
- @include ie-pseudo($styles, $content, before, $name) {
44
- @content;
45
- }
46
- }
47
-
48
- // proxy for ie-pseudo
49
- // @mixin ie-pseudo-after
50
- // @param $styles {String} the styles to apply to the pseudo-element
51
- // @param $content {String} the content to insert into the element (similar to css `content` attribute)
52
- // @param $name {String} the name of the element
53
- // @content
54
- @mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
55
- @include ie-pseudo($styles, $content, after, $name) {
56
- @content;
57
- }
58
- }
59
-
60
- // this creates a one-type executing expression that inserts an element relative to `this` element.
61
- // this allows some level of support for :before/:after in IE6/7
62
- // inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
63
- // @mixin ie-pseudo
64
- // @param $styles {String} the styles to apply to the pseudo-element
65
- // @param $content {String} the content to insert into the element (similar to css `content` attribute)
66
- // @param $placement {String} [before|after] simulate :before or :after behavior
67
- // @param $name {String} the name of the element
68
- // @param $uid {String} a custom, unique identifier for the generate element
69
- // @content
70
- @mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
71
- $archetype-pseudo-selector: false;
72
- @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
73
- $uid: if($uid, $uid, unique('ie-pseudo-'));
74
- $archetype-pseudo-selector: '& ##{$uid}';
75
- $this: 't';
76
- $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")'));
77
- $method: if($placement == before, insertBefore, appendChild);
78
- @if $content and $content != nil {
79
- $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma);
80
- }
81
- @if $CONFIG_GENERATED_TAG_CSS {
82
- $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
83
- }
84
- @if $styles and $styles != nil and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
85
- // sets the icon styles on the node
86
- $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma);
87
- }
88
- // if we're using the insertBefore method, we need to specify the node reference to the first childNode
89
- $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
90
- $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma);
91
- $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once
92
-
93
- // we execute in a setTimeout to decouple from the current UI thread
94
- // this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
95
- // http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
96
- *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
97
-
98
- // if we're NOT using inline styles...
99
- @if not $CONFIG_GENERATED_TAG_INLINE {
100
- // output it on the generated selector
101
- #{$archetype-pseudo-selector} {
102
- @include to-styles(-style-string-to-list(unquote($styles)));
103
- @if archetype-version('Sass >= 3.2') {
104
- @content;
105
- }
106
- }
107
- }
108
- }
109
- }
110
-
111
- // a hack that allows elements with transparent backgrounds to be focusable in IE
112
- // @mixin transparent-focusable
113
- // @param $url {String} an optional URL to point to an image (not required)
114
- // @param $data {String} an optional data URI for a transparent image (not required)
115
- @mixin transparent-focusable($url: url(https://), $data: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') {
116
- $bg: (transparent);
117
- background: append($bg, $data);
118
- @if $url {
119
- @include target-browser(ie lte 7, background, append($bg, $url));
120
- }
121
- }
3
+ @import "required";
4
+ @import "util/core"; // required for `to-style` mixin
5
+ @import "hacks/core";
@@ -1,23 +1,5 @@
1
- // include configs
2
- @import "archetype/config";
1
+ @import "core";
3
2
 
4
- // include Compass mixins
5
- @import "compass";
6
-
7
- // utility mixins and helper functions
8
- @import "archetype/util";
9
-
10
- // custom hacks
11
- @import "archetype/hacks";
12
-
13
- // ui
14
- @import "archetype/ui";
15
-
16
- // grids
17
- @import "archetype/grid";
18
-
19
- // styleguide
20
- @import "archetype/styleguide";
21
-
22
- // base
23
- @import "archetype/base";
3
+ @import "ui/init";
4
+ @import "hacks/init";
5
+ @import "styleguide/init";
@@ -0,0 +1,3 @@
1
+ // these files are required by all Archetype modules
2
+ @import "compass"; // include Compass
3
+ @import "config/core"; // configuration
@@ -0,0 +1,3 @@
1
+ $CONFIG_RESET_AUTO: true;
2
+
3
+ @import "init";
@@ -1,6 +1,2 @@
1
- @import "config";
2
- @import "util";
3
- @import "styleguide/styleguide";
4
- @import "styleguide/primitives";
5
- @import "styleguide/helpers";
6
- @import "styleguide/components";
1
+ // styleguide is loaded as part of core
2
+ @import "core";
@@ -1,360 +1,4 @@
1
1
  // @category ui
2
- @import "hacks";
3
- @import "compass/layout/stretching";
2
+ @import "required";
4
3
 
5
- // computes the border position to use
6
- // @function _getTriangleBorderDirection
7
- // @private
8
- // @param $direction {String} the direction the arrow is pointing (top, left, top left, etc)
9
- // @return {List} the computed border position (e.g. top, left, bottom)
10
- @function _getTriangleBorderDirection($direction) {
11
- @if(length($direction) == 1) {
12
- @return opposite-position($direction);
13
- }
14
- @return if(index($direction, top), bottom, top);
15
- }
16
-
17
- // computes the border width for the triangle
18
- // @function _getTriangleBorderWidth
19
- // @private
20
- // @param $width {Number} the width of the arrow
21
- // @param $height {Number} the height of the arrow
22
- // @param $direction {String} the direction the arrow is pointing (top, left, top left, etc)
23
- // @return {List} the computed border widths
24
- @function _getTriangleBorderWidth($width, $height, $direction) {
25
- @if(length($direction) == 1) {
26
- // TOP
27
- @if($direction == top) {
28
- @return 0 ($width/2) $height;
29
- }
30
- // BOTTOM
31
- @else if($direction == bottom) {
32
- @return $height ($width/2) 0;
33
- }
34
- // LEFT
35
- @else if($direction == left) {
36
- @return ($height/2) $width ($height/2) 0;
37
- }
38
- // RIGHT
39
- @else if($direction == right) {
40
- @return ($height/2) 0 ($height/2) $width;
41
- }
42
- }
43
- @else if(index($direction, top)) {
44
- // TOP LEFT
45
- @if(index($direction, left)) {
46
- @return 0 $width $height 0;
47
- }
48
- // TOP RIGHT
49
- @else {
50
- @return 0 0 $height $width;
51
- }
52
- }
53
- @else if(index($direction, bottom)) {
54
- // BOTTOM LEFT
55
- @if(index($direction, left)) {
56
- @return $height $width 0 0;
57
- }
58
- // BOTTOM RIGHT
59
- @else {
60
- @return $height 0 0 $width;
61
- }
62
- }
63
- @return 0;
64
- }
65
-
66
- // generates a cross-browser triangle using borders
67
- // @mixin triangle
68
- // @param $direction {String} the direction the arrow is pointing (top, left, top left, etc)
69
- // @param $width {Number} the width of the arrow
70
- // @param $height {Number} the height of the arrow
71
- // @param $color {Color} the color of the arrow
72
- @mixin triangle($direction: bottom, $width: 1em, $height: false, $color: #aaa) {
73
- $direction: rtl($direction);
74
- // if no height was specified, assume it's identitcal to width
75
- @if(not $height) {
76
- $height: $width;
77
- }
78
- // zero out it's content
79
- height: 0;
80
- width : 0;
81
- // IE6 needs some extra love
82
- @include target-browser(ie 6, font-size, 0);
83
- @include target-browser(ie 6, line-height, 0);
84
- border: {
85
- // for IE6, transparent borders are simulated using `dashed` styles instead of a chroma filter
86
- // IE won't render a `dashed` border-style unless (width * 5) >= border-width
87
- // since width is always 0, dashed borders aren't rendered
88
- // @link http://hedgerwow.appspot.com/demo/arrows
89
- style: dashed;
90
- // transparent for all other browsers
91
- color: transparent;
92
- width: _getTriangleBorderWidth($width, $height, $direction);
93
- #{_getTriangleBorderDirection($direction)}: {
94
- color: $color;
95
- style: solid;
96
- }
97
- }
98
- }
99
-
100
- // makes your element centered vertically and horizontally in a parent element
101
- // @mixin centered-box
102
- @mixin centered-box() {
103
- @include stretch();
104
- margin: auto;
105
- }
106
-
107
- // hide element visibly but preserve screen-reader support
108
- // @mixin hide-element
109
- // @credit Jonathan Snook
110
- // @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
111
- @mixin hide-element() {
112
- position: absolute !important;
113
- height: 1px;
114
- width: 1px;
115
- overflow: hidden;
116
- @include target-browser(ie lte 7, clip, rect(1px 1px 1px 1px));
117
- clip: rect(1px, 1px, 1px, 1px);
118
- }
119
-
120
- // reverse hide-element and make the element visible again
121
- // @mixin unhide-element
122
- // @see hide-element
123
- // @param $position {String} value for the position property
124
- // @param $height {String} value for the height property
125
- // @param $width {String} value for the width property
126
- // @param $overflow {String} value for the overflow property
127
- @mixin unhide-element($position: static, $height:auto, $width:auto, $overflow:visible) {
128
- position: $position !important;
129
- height: $height;
130
- width: $width;
131
- overflow: $overflow;
132
- clip: auto;
133
- }
134
-
135
- // mixin for generating a fade box which fades from transparent to white
136
- // @mixin fade-box
137
- // @param $width {String} the width of the overlay
138
- // @param $height {String} the height of the overlay
139
- // @param $direction {String} top=vertical left=horizontal
140
- @mixin fade-box($width: 100%, $height: 100%, $direction: top) {
141
- $direction: rtl($direction);
142
- // TODO - update this when Compass supports IE alpha channels
143
- @if $direction == left {
144
- @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1));
145
- }
146
- @else {
147
- @include ie-filter(gradient(startColorstr='#00ffffff', endColorstr='#ffffff'));
148
- }
149
- @include background-image(linear-gradient($direction, rgba(255,255,255,0.4), rgba(255,255,255,1)) );
150
- @include pseudo-element($width: $width, $height: $height, $position: absolute);
151
- text-align: center;
152
- bottom: 0;
153
- #{if($direction == left, right, left)}: 0;
154
- }
155
-
156
- // create a stroke line around text (or font icon)
157
- // @mixin stroke
158
- // @param $width {Number} the width of the stroke
159
- // @param $color {Color} the color of the stroke
160
- // @param $shadow {List} an additional drop shadow to attach
161
- @mixin glyph-stroke($width: 1px, $color: black, $shadow: false) {
162
- @include box-shadow(compact(0 $width 0 $color, 0 -1*$width 0 $color, $width 0 0 $color, -1*$width 0 0 $color, $shadow));
163
- }
164
-
165
- // create a glyph icon
166
- // @mixin glyph-icon
167
- // @param $icon {String} the icon name
168
- // @param $size {Number} the size of the icon
169
- // @param $color {Color} the color of the font
170
- // @param $placement {String} where to place the icon [before|after|inline]
171
- // @param $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extendable)
172
- // @param $ie-uid {String} a custom, unique identifier for the generate IE6/7 element
173
- // @content
174
- @mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false, $ie-uid: false) {
175
- $archetype-glyph-selector: false;
176
- $char-mapping: nil;
177
- $char-code: nil;
178
- @if $icon {
179
- $char-mapping: -compass-list(associative($CONFIG_GLYPHS_MAPPINGS, $icon, $strict: true));
180
- $char-code: nth($char-mapping, 1);
181
- }
182
- @if $char-code == nil and $icon != false {
183
- @warn "could not find character mapping for `#{icon}`";
184
- }
185
- @else {
186
- @if $size == default {
187
- $default-size: nil;
188
- @if $icon {
189
- $default-size: nth-cyclic($char-mapping, 2);
190
- }
191
- $size: if(type-of($default-size) == number, $default-size, 100%);
192
- }
193
- // if the size is under a given threshold, use a halfling, if available
194
- @if $icon {
195
- $char-code: nth(-compass-list($char-code), 1);
196
- }
197
- $selector: if(index(before after, $placement), '&:#{$placement}', '&');
198
- #{$selector} {
199
- font-family: '#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';
200
- font-weight: $CONFIG_GLYPHS_WEIGHT;
201
- font-style: $CONFIG_GLYPHS_STYLE;
202
- text-decoration: inherit;
203
- speak: none;
204
- @include if-set(font-size, $size);
205
- @include if-set(color, $color);
206
- @if $icon {
207
- content: $char-code;
208
- }
209
- }
210
- $archetype-glyph-selector: $selector;
211
- @if($selector != '&' and $ie-styles != nil) {
212
- // support for IE6/7
213
- $styles: "font-family:'#{$CONFIG_GLYPHS_NAME}-#{$CONFIG_GLYPHS_VERSION}', '#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
214
- @if($size != nil) {
215
- $styles: $styles + "font-size:#{$size};"
216
- }
217
- @if($color != nil) {
218
- $styles: $styles + "color:#{$color};"
219
- }
220
- @if($ie-styles) {
221
- $styles: $styles + $ie-styles;
222
- }
223
-
224
- @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph, $uid: $ie-uid);
225
- @if $archetype-pseudo-selector {
226
- $archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}';
227
- }
228
- }
229
- #{$archetype-glyph-selector} {
230
- @content;
231
- }
232
- }
233
- }
234
-
235
- // generate rotational and position keyframes for loading spinners
236
- // @mixin generate-loader-keyframes
237
- @mixin generate-loader-keyframes() {
238
- @if not $CONFIG_DISABLE_STYLEGUIDE_SPRITES {
239
- // generate rotating keyframes
240
- @include -generate-loader-keyframes-360();
241
- // generate specific keyframes
242
- @each $size in $CONFIG_LOADERS {
243
- @if $size != nil {
244
- $values: nth($size, 2);
245
- $size: nth($size, 1);
246
- @each $context in (1 2) {
247
- $name: unquote('#{$size}-#{$context}');
248
- $icon: nth-cyclic(associative($values, default), $context);
249
- $position: styleguide-sprite-position($CONFIG_SPRITE_LOADERS, $icon);
250
- $sprite-file: styleguide-sprite-file($CONFIG_SPRITE_LOADERS, $icon);
251
- $width: styleguide-image-width($sprite-file);
252
- $height: styleguide-image-height($sprite-file);
253
- @include -generate-loader-keyframes-position($name, $position, $width, $height);
254
- }
255
- }
256
- }
257
- }
258
- }
259
-
260
- // generate rotational keyframes for loading spinners
261
- // @mixin -generate-loader-keyframes-360
262
- // @private
263
- @mixin -generate-loader-keyframes-360() {
264
- @if do-once("archetype/ui/generate-keyframe/#{$CONFIG_KEYFRAME_LOADERS}") {
265
- @if archetype-version('compass >= 0.13') {
266
- @include keyframes($CONFIG_KEYFRAME_LOADERS) {
267
- from { @include rotate(0deg); }
268
- to { @include rotate(360deg); }
269
- }
270
- }
271
- @else {
272
- @if $experimental-support-for-webkit {
273
- @-webkit-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
274
- from { -webkit-transform: rotate(0deg); }
275
- to { -webkit-transform: rotate(360deg); }
276
- }
277
- }
278
- @if $experimental-support-for-mozilla {
279
- @-moz-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
280
- from { -moz-transform: rotate(0deg); }
281
- to { -moz-transform: rotate(360deg); }
282
- }
283
- }
284
- @if $experimental-support-for-microsoft {
285
- @-ms-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
286
- from { -ms-transform: rotate(0deg); }
287
- to { -ms-transform: rotate(360deg); }
288
- }
289
- }
290
- @if $experimental-support-for-opera {
291
- @-o-keyframes #{$CONFIG_KEYFRAME_LOADERS} {
292
- from { -o-transform: rotate(0deg); }
293
- to { -o-transform: rotate(360deg); }
294
- }
295
- }
296
- @keyframes #{$CONFIG_KEYFRAME_LOADERS} {
297
- from { transform: rotate(0deg); }
298
- to { transform: rotate(360deg); }
299
- }
300
- }
301
- }
302
- }
303
-
304
- // generate position keyframes for loading spinners
305
- // @mixin -generate-loader-keyframes-position
306
- // @private
307
- // @param $name {String} the name for this keyframe
308
- // @param $position {List} the background-position of the spinner image
309
- // @param $width {Number} the width of the spinner image
310
- // @param $height {Number} the height of the spinner image
311
- @mixin -generate-loader-keyframes-position($name, $position, $width, $height) {
312
- $name: unquote('#{$CONFIG_KEYFRAME_LOADERS}-position-#{$name}');
313
- @if do-once("archetype/ui/generate-keyframe/#{$name}") {
314
- @if archetype-version('compass >= 0.13') {
315
- @include keyframes($name) {
316
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
317
- }
318
- }
319
- @else {
320
- @-webkit-keyframes #{$name} {
321
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
322
- }
323
- @-moz-keyframes #{$name} {
324
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
325
- }
326
- @-ms-keyframes #{$name} {
327
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
328
- }
329
- @-o-keyframes #{$name} {
330
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
331
- }
332
- @keyframes #{$name} {
333
- from, to { @include -generate-loader-keyframes-position-css($position, $width, $height); }
334
- }
335
- }
336
- }
337
- }
338
-
339
- // a helper to generate the required CSS for the position keyframe
340
- // @mixin -generate-loader-keyframes-position-css
341
- // @private
342
- // @param $position {List} the background-position of the spinner image
343
- // @param $width {Number} the width of the spinner image
344
- // @param $height {Number} the height of the spinner image
345
- @mixin -generate-loader-keyframes-position-css($position, $width, $height) {
346
- background-position: $position;
347
- width: $width;
348
- height: $height;
349
- margin-left: $width / -2;
350
- margin-top: $height / -2;
351
- }
352
-
353
- // a method for removing default styling from a button
354
- // @mixin unstyled-button
355
- @mixin unstyled-button() {
356
- background: none;
357
- border: none;
358
- padding: 0;
359
- @include appearance(none);
360
- }
4
+ @import "ui/core";