archetype 1.0.0.alpha.2 → 1.0.0.alpha.3

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.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +67 -3
  3. data/README.md +1 -1
  4. data/VERSION +1 -1
  5. data/lib/archetype.rb +4 -0
  6. data/lib/archetype/actions/migrate.rb +10 -0
  7. data/lib/archetype/extensions.rb +35 -1
  8. data/lib/archetype/functions/helpers.rb +8 -0
  9. data/lib/archetype/functions/styleguide_memoizer.rb +1 -1
  10. data/lib/archetype/sass_extensions/functions/environment.rb +1 -1
  11. data/lib/archetype/sass_extensions/functions/lists.rb +2 -1
  12. data/lib/archetype/sass_extensions/functions/styleguide.rb +45 -88
  13. data/lib/archetype/sass_extensions/functions/styleguide/components.rb +230 -1
  14. data/lib/archetype/sass_extensions/functions/styleguide/constants.rb +0 -1
  15. data/lib/archetype/sass_extensions/functions/styleguide/grammar.rb +66 -5
  16. data/lib/archetype/sass_extensions/functions/styleguide/helpers.rb +36 -1
  17. data/lib/archetype/sass_extensions/functions/styleguide/resolve.rb +12 -2
  18. data/lib/archetype/sass_extensions/functions/styleguide/styles.rb +6 -3
  19. data/lib/archetype/sass_extensions/functions/styleguide/themes.rb +2 -1
  20. data/lib/archetype/sass_extensions/functions/ui/glyphs.rb +1 -1
  21. data/lib/archetype/sass_extensions/functions/ui/scopes.rb +4 -4
  22. data/lib/archetype/sass_extensions/functions/util/debug.rb +1 -1
  23. data/lib/archetype/sass_extensions/functions/util/hacks.rb +4 -8
  24. data/lib/archetype/sass_extensions/functions/util/images.rb +11 -8
  25. data/lib/archetype/sass_extensions/functions/util/misc.rb +34 -1
  26. data/lib/archetype/sass_extensions/functions/util/spacing.rb +1 -1
  27. data/stylesheets/archetype/hacks/_hacks.scss +1 -1
  28. data/stylesheets/archetype/styleguide/_styleguide.scss +2 -0
  29. data/stylesheets/archetype/util/_styles.scss +165 -125
  30. data/stylesheets/archetype/util/_targeting.scss +62 -54
  31. data/templates/example/screen.scss +2 -0
  32. data/templates/project/manifest.rb +1 -1
  33. metadata +24 -12
@@ -35,7 +35,7 @@ module Archetype::SassExtensions::Util::Spacing
35
35
  # - {Number} the calculated spacing
36
36
  #
37
37
  def _spacing(unit = null, direction = identifier(horizontal), abuse = bool(false))
38
- return null if is_null(unit).value
38
+ return null if helpers.is_null(unit)
39
39
  unit = _archetype_integerize(unit, abuse)
40
40
  direction = helpers.to_str(direction) == 'vertical' ? 'VERTICAL' : 'HORIZONTAL'
41
41
  config = "CONFIG_#{direction}_SPACING"
@@ -117,7 +117,7 @@ $a-blackhole: require-archetype-modules(archetype/config);
117
117
  $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}"),#{$this}.el.id="#{$uid}"'));
118
118
  $method: if($placement == before, insertBefore, appendChild);
119
119
  @if $content and not is_null($content) {
120
- $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'));
120
+ $cmd: append($cmd, unquote('#{$this}.el.innerText="#{-ie-pseudo-content($content)}"'));
121
121
  }
122
122
  @if $styles and not is_null($styles) and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
123
123
  // sets the icon styles on the node if we're using inline styles...
@@ -13,11 +13,13 @@
13
13
  $definition: compact($is, $is-2, $is-3, $is-4, $is-5, $is-6, $is-7, $is-8, $is-9, $is-10);
14
14
  @if length($definition) > 0 {
15
15
  $styles: _styleguide($definition, $state, $theme);
16
+ $tmp: -styleguide-shift-context($definition);
16
17
  // output the styles
17
18
  $archetype-origin-function: styleguide !global;
18
19
  @include to-styles($styles, $exclude: $exclude, $here: $here) {
19
20
  @content;
20
21
  };
22
+ $tmp: -styleguide-shift-context();
21
23
  $archetype-origin-function: null !global;
22
24
  }
23
25
  }
@@ -3,29 +3,6 @@
3
3
  // throw an error if archetype/util has not been registered
4
4
  $a-blackhole: require-archetype-modules(archetype/util);
5
5
 
6
- // this is a proxy for output-style
7
- // this contains mixins that will eventually call output-style in one form or another
8
- // @mixin _outputStyle
9
- // @private
10
- // @param $property {String} the CSS property to output
11
- // @param $value {*} the CSS value to output
12
- @mixin _outputStyle($property, $value: null) {
13
- @if not is-null($value) {
14
- @if($property == target-browser) {
15
- @include target-browser(nth($value,1), nth($value,2), nth($value,3));
16
- }
17
- @else if($property == font-family) {
18
- @include font-family($value);
19
- }
20
- @else if($property == font-style) {
21
- @include font-style($value);
22
- }
23
- @else {
24
- @include output-style($property, $value);
25
- }
26
- }
27
- }
28
-
29
6
  @function check-for-custom-styler($property, $value, $method: pre) {
30
7
  @return mixin-exists('custom-output-styler') and function-exits('has-custom-output-styler') and has-custom-output-styler($property, $value, $method);
31
8
  }
@@ -38,118 +15,181 @@ $a-blackhole: require-archetype-modules(archetype/util);
38
15
  @if type-of($property) == map {
39
16
  @include to-styles($property);
40
17
  }
41
- @elseif( not is-null($property) and length(-archetype-list($value)) > 0 and not is-null(first-value-of(-archetype-list($value))) and not index($CONFIG_DISABLED_CSS, $property)) {
42
- // for mixins, we need to do some custom work
43
- // check to see if we have a custom output styler (pre)
44
- @if check-for-custom-styler($property, $value, pre) {
45
- @include custom-output-styler($property, $value, $method: pre);
46
- }
47
- // we're going to assume that any mixins that get invoked here have been properly imported
48
- // if not, they will simply throw a compilation error
49
- // border-radius
50
- @else if($property == border-radius) { @include border-radius($value...); }
51
- // box-sizing
52
- @else if($property == box-sizing) { @include box-sizing($value...); }
53
- // box-shadow
54
- @else if($property == box-shadow) { @include box-shadow($value...); }
55
- // text-shadow
56
- @else if($property == text-shadow) { @include text-shadow($value); }
57
- // filter-gradient
58
- @else if($property == filter-gradient) { @include filter-gradient($value...); }
59
- // background
60
- @else if($property == background) { @include background($value...); }
61
- // background-image
62
- @else if($property == background-image) { @include background-image($value...); }
63
- // background-clip
64
- @else if($property == background-clip) { @include background-clip($value...); }
65
- // background-size
66
- @else if($property == background-size) { @include background-size($value...); }
67
- // background-origin
68
- @else if($property == background-origin) { @include background-origin($value...); }
69
- // IE filters
70
- @else if($property == ie-filter) { @include ie-filter($value...); }
71
- // hide-text
72
- @else if($property == hide-text) { @include hide-text($direction: if($value == true, $hide-text-direction, $value...)); }
73
- // inline-block
74
- @else if($property == inline-block) { @include inline-block($value...); }
75
- // opacity
76
- @else if($property == opacity) { @include opacity($value...); }
77
- // min-width
78
- @else if($property == min-width) { @include min-width($value...); }
79
- // min-height
80
- @else if($property == min-height) { @include min-height($value...); }
81
- // max-width
82
- @else if($property == max-width) { @include max-width($value...); }
83
- // max-height
84
- @else if($property == max-height) { @include max-height($value...); }
85
- // stretch
86
- @else if($property == stretch) { @include stretch($value...); }
87
- // appearance
88
- @else if($property == appearance) { @include appearance($value...); }
89
- // unhide-element
90
- @else if($property == unhide-element) { @include unhide-element($value...); }
91
- // ellipsis
92
- @else if($property == ellipsis) { @include ellipsis($value...); }
93
- // scale
94
- @else if($property == scale) { @include scale($value...); }
95
- // z-index
96
- @else if($property == z-index) { @include z-index($value...); }
97
- @else if($property == glyph-icon) { @include glyph-icon($value...); }
98
- @else if($property == extend) {
99
- @each $v in -archetype-list($value) {
100
- @extend #{$v};
18
+ @else {
19
+ $property: -archetype-normalize-property($property);
20
+ @if( not is-null($property) and length(-archetype-list($value)) > 0 and not is-null(first-value-of(-archetype-list($value))) and not index($CONFIG_DISABLED_CSS, $property)) {
21
+ // if the value is the special `-archetype-no-value`, pass along an empty value
22
+ @if $value == -archetype-no-value {
23
+ $value: ();
101
24
  }
102
- }
103
- // animations
104
- @else if($property == animation) {
105
- @include animation($value...);
106
- }
107
- // hasLayout
108
- @else if($property == has-layout) {
109
- // if value is true, don't pass it along
110
- @if($value == true) {
111
- @include has-layout();
25
+
26
+ // for mixins, we need to do some custom work
27
+ // check to see if we have a custom output styler (pre)
28
+ @if check-for-custom-styler($property, $value, pre) {
29
+ @include custom-output-styler($property, $value, $method: pre);
112
30
  }
113
- @else {
114
- @include has-layout($value...);
31
+
32
+ // make a dynamic function call
33
+ @else if($property == function) {
34
+ @if type-of($value) == string {
35
+ $value: -archetype-list($value);
36
+ }
37
+ @if function-exists(nth($value, 1)) {
38
+ $fn: nth($value, 1);
39
+ $args: if(length($value) < 2, (), nth($value, 2));
40
+ @include to-styles( call($fn, $args...) );
41
+ }
115
42
  }
116
- }
117
- // clearfix
118
- @else if($property == clearfix) {
119
- @if($value == legacy-pie-clearfix) {
120
- @include legacy-pie-clearfix();
43
+
44
+ // we're going to assume that any mixins that get invoked here have been properly imported
45
+ // if not, they will simply throw a compilation error
46
+
47
+ // check that we aren't already inside of these mixins before calling them
48
+ @else if($property == font-family and not -archetype-within-mixin(font-family)) { @include font-family($value); }
49
+ @else if($property == font-style and not -archetype-within-mixin(font-style)) { @include font-style($value); }
50
+
51
+ // target-browser
52
+ @else if($property == target-browser) { @include target-browser($value...); }
53
+ // border-radius
54
+ @else if($property == border-radius) { @include border-radius($value...); }
55
+ // box-sizing
56
+ @else if($property == box-sizing) { @include box-sizing($value...); }
57
+ // box-shadow
58
+ @else if($property == box-shadow) { @include box-shadow($value...); }
59
+ // text-shadow
60
+ @else if($property == text-shadow) { @include text-shadow($value); }
61
+ // filter-gradient
62
+ @else if($property == filter-gradient) { @include filter-gradient($value...); }
63
+ // background
64
+ @else if($property == background) { @include background($value...); }
65
+ // background-image
66
+ @else if($property == background-image) { @include background-image($value...); }
67
+ // background-clip
68
+ @else if($property == background-clip) { @include background-clip($value...); }
69
+ // background-size
70
+ @else if($property == background-size) { @include background-size($value...); }
71
+ // background-origin
72
+ @else if($property == background-origin) { @include background-origin($value...); }
73
+ // IE filters
74
+ @else if($property == ie-filter) { @include ie-filter($value...); }
75
+ // hide-text
76
+ @else if($property == hide-text) { @include hide-text($value...); }
77
+ // inline-block
78
+ @else if($property == inline-block) { @include inline-block($value...); }
79
+ // opacity
80
+ @else if($property == opacity) { @include opacity($value...); }
81
+ // min-width
82
+ @else if($property == min-width) { @include min-width($value...); }
83
+ // min-height
84
+ @else if($property == min-height) { @include min-height($value...); }
85
+ // max-width
86
+ @else if($property == max-width) { @include max-width($value...); }
87
+ // max-height
88
+ @else if($property == max-height) { @include max-height($value...); }
89
+ // stretch
90
+ @else if($property == stretch) { @include stretch($value...); }
91
+ // appearance
92
+ @else if($property == appearance) { @include appearance($value...); }
93
+ // hide-element
94
+ @else if($property == hide-element) { @include hide-element($value...); }
95
+ // unhide-element
96
+ @else if($property == unhide-element) { @include unhide-element($value...); }
97
+ // unstyled-button
98
+ @else if($property == unstyled-button) { @include unstyled-button($value...); }
99
+ // ellipsis
100
+ @else if($property == ellipsis) { @include ellipsis($value...); }
101
+ // scale
102
+ @else if($property == scale) { @include scale($value...); }
103
+ // z-index
104
+ @else if($property == z-index) { @include z-index($value...); }
105
+ // glyphs
106
+ @else if($property == glyph-icon) { @include glyph-icon($value...); }
107
+ @else if($property == glyph-stroke) { @include glyph-stroke($value...); }
108
+ // animations
109
+ @else if($property == animation) { @include animation($value...); }
110
+ // hasLayout
111
+ @else if($property == has-layout) { @include has-layout($value...); }
112
+ // IE :before/:after
113
+ @else if($property == ie-pseudo) { @include ie-pseudo($value...); }
114
+ @else if($property == ie-pseudo-before) { @include ie-pseudo-before($value...); }
115
+ @else if($property == ie-pseudo-after) { @include ie-pseudo-after($value...); }
116
+ // transparent-focusable
117
+ @else if($property == transparent-focusable) { @include transparent-focusable($value); }
118
+ // triangle
119
+ @else if($property == triangle) { @include triangle($value...); }
120
+ // styleguide-diff
121
+ @else if($property == styleguide-diff) { @include styleguide-diff($value...); }
122
+ // clearfix
123
+ @else if($property == clearfix) {
124
+ @if($value == legacy-pie-clearfix) {
125
+ @include legacy-pie-clearfix();
126
+ }
127
+ @else if($value == pie-clearfix) {
128
+ @include pie-clearfix();
129
+ }
130
+ @else {
131
+ @include clearfix($value...);
132
+ }
121
133
  }
122
- @else if($value == pie-clearfix) {
123
- @include pie-clearfix();
134
+ // special case for @extend
135
+ @else if($property == extend or $property == '@extend') {
136
+ @each $v in -archetype-list($value) {
137
+ @extend #{$v};
138
+ }
124
139
  }
125
- @else {
126
- @include clearfix();
140
+ // special case for @media
141
+ @else if($property == media or $property == '@media') {
142
+ @each $query, $styles in $value {
143
+ @media #{$query} {
144
+ @include to-styles($styles);
145
+ }
146
+ }
127
147
  }
128
- }
129
- // :before/:after
130
- @else if($property == ie-pseudo-before or $property == ie-pseudo-after) {
131
- $value: -archetype-list($value);
132
- $content: false;
133
- $tag: '';
134
- @if length($value) > 1 {
135
- $content: nth($value, 2);
136
- @if length($value) > 2 {
137
- $tag: nth($value, 3);
148
+ // special case for @keyframes
149
+ @else if($property == keyframes or $property == '@keyframes') {
150
+ @each $name, $def in $value {
151
+ @each $frame, $styles in $def {
152
+ @include keyframes($name) {
153
+ @at-root #{$frame} {
154
+ @include to-styles($styles);
155
+ }
156
+ }
157
+ }
158
+ }
159
+ }
160
+ // breakpoint
161
+ @else if($property == breakpoint) {
162
+ @each $key, $styles in $value {
163
+ @include breakpoint($key) {
164
+ @include to-styles($styles);
165
+ }
138
166
  }
139
167
  }
140
- @if $property == ie-pseudo-before {
141
- @include ie-pseudo-before(nth($value, 1), $content, $tag);
168
+ // high-resolution
169
+ @else if($property == high-resolution) {
170
+ @include high-resolution {
171
+ @include to-styles($value);
172
+ }
142
173
  }
174
+ // switch-locale
175
+ @else if($property == switch-locale) {
176
+ @each $locale, $styles in $value {
177
+ @include switch-locale($locale) {
178
+ @include to-styles($styles);
179
+ }
180
+ }
181
+ }
182
+
183
+ // check to see if we have a custom output styler (post)
184
+ @else if check-for-custom-styler($property, $value, post) {
185
+ @include custom-output-styler($property, $value, $method: post);
186
+ }
187
+ // otherwise just use a key-value pair
143
188
  @else {
144
- @include ie-pseudo-after(nth($value, 1), $content, $tag);
189
+ // strip off the special `{raw}` keyword
190
+ #{str-replace($property, '{raw}', '')}: $value;
145
191
  }
146
192
  }
147
- // check to see if we have a custom output styler (post)
148
- @else if check-for-custom-styler($property, $value, post) {
149
- @include custom-output-styler($property, $value, $method: post);
150
- }
151
- // otherwise just use a key-value pair
152
- @else { #{$property}: $value; }
153
193
  }
154
194
  }
155
195
 
@@ -261,7 +301,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
261
301
  }
262
302
  // otherwise, just output it
263
303
  @else if($selectors == true and $states == true ) {
264
- @include _outputStyle($property, $value);
304
+ @include output-style($property, $value);
265
305
  }
266
306
  }
267
307
  }
@@ -414,7 +454,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
414
454
  // @mixin font-family
415
455
  // @param $family {String} the font stack to output
416
456
  @mixin font-family($family: null) {
417
- @include safe(font-family, $family);
457
+ @include safe(font-family, $family);
418
458
  }
419
459
 
420
460
  // safely use text-transform:uppercase without localization issues
@@ -3,12 +3,15 @@
3
3
  // throw an error if archetype/util has not been registered
4
4
  $a-blackhole: require-archetype-modules(archetype/util);
5
5
 
6
+ @function _getTargetedSelectorScope($selector, $merge: false) {
7
+ @return unquote(if($merge, '&.#{$selector}', '.#{$selector} &'));
8
+ }
9
+
6
10
  // given a list of browsers and versions, this will consolidate them into a
7
11
  // normalized list of targeted browsers
8
12
  // @function _getTargetedBrowsers
9
13
  // @private
10
14
  // @param $browsers {List} the browsers/versions to target
11
- // @param $using {String} an optional string to append to the end of each item
12
15
  // @param $vendors {List} the list of supported vendors for class targeting
13
16
  // @param $threshold {Number} the minimum browser usage threshold to support
14
17
  // @return $list {List} the normalized list of targeted browsers
@@ -17,8 +20,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
17
20
  // _getTargetedBrowsers(ie lte 7) => (.ie.lte7)
18
21
  // _getTargetedBrowsers(ie 6 7) => (.ie.ie6, .ie.ie7)
19
22
  // _getTargetedBrowsers(ie 10 lt 9) => (.ie.ie10, .ie.lte8)
20
- // _getTargetedBrowsers(ie 6, $using: '&') => (.ie.ie6&) // e.g. for merging with other selectors
21
- @function _getTargetedBrowsers($browsers, $using: '', $vendors: $CONFIG_BROWSER_VENDORS_CLASS, $threshold: $critical-usage-threshold) {
23
+ @function _getTargetedBrowsers($browsers, $merge: false, $vendors: $CONFIG_BROWSER_VENDORS_CLASS, $threshold: $critical-usage-threshold) {
22
24
  $browsers: -archetype-list($browsers);
23
25
  $vendors: -archetype-list($vendors);
24
26
  $comparators: (eq lt lte);
@@ -41,10 +43,12 @@ $a-blackhole: require-archetype-modules(archetype/util);
41
43
  @else if(index(-archetype-list($vendors), $item)) {
42
44
  $vendor: $item;
43
45
  // keep track of unversioned vendors
44
- $unversioned: append($unversioned, unquote('.#{$vendor}#{$using}'), comma);
46
+
47
+ $unversioned: append($unversioned, _getTargetedSelectorScope($vendor, $merge), comma);
45
48
  }
46
49
  // otherwise assume it's a version
47
50
  @else if(type-of($item) == number) {
51
+ $unversioned: list-remove($unversioned, index($unversioned, _getTargetedSelectorScope($vendor, $merge)));
48
52
  $tmp: if($vendor == ie, $item, 9999); // we only support versions for IE, otherwise, set an obsurdly high version
49
53
  // if it's equalitative, prefix the vendor onto the version
50
54
  @if(not $comparator or $comparator == eq) {
@@ -55,9 +59,8 @@ $a-blackhole: require-archetype-modules(archetype/util);
55
59
  $item: #{$comparator}#{($item + $version-adjust)};
56
60
  }
57
61
  @if($vendor and support-legacy-browser($vendor, "#{$tmp}", $threshold: $critical-usage-threshold)) {
58
- $item: '.#{$vendor}.#{$item}#{$using}';
59
- $list: append($list, unquote($item), comma);
60
- $unversioned: list-remove($unversioned, index($unversioned, '.#{$vendor}#{$using}'));
62
+ $item: _getTargetedSelectorScope('#{$vendor}.#{$item}', $merge);
63
+ $list: append($list, $item, comma);
61
64
  }
62
65
  // restore temps
63
66
  $version-adjust: 0;
@@ -83,55 +86,59 @@ $a-blackhole: require-archetype-modules(archetype/util);
83
86
  // =target-browser(ie 8, border, 10px);
84
87
  // =target-browser(ie lte 7, padding, 0);
85
88
  @mixin target-browser($browsers, $property: null, $value: null, $merge: false, $inline: true, $threshold: $critical-usage-threshold) {
89
+ // if the previous context was target-browser or target-os, we can only use inline methods
90
+ $only-inline: $inline and (-archetype-mixin-called-recursively() or -archetype-within-mixin(target-os));
86
91
  @if($CONFIG_BROWSER_ALLOW_HACKS) {
87
- // target webkit, Safari3+, Chrome1+
88
- @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, webkit-all) )) {
89
- @if $CONFIG_BROWSER_WARN_ON_HACK {
90
- @warn "[archetype:target:browser] using hack for webkit-all";
92
+ @if not $only-inline {
93
+ // target webkit, Safari3+, Chrome1+
94
+ @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, webkit-all) )) {
95
+ @if $CONFIG_BROWSER_WARN_ON_HACK {
96
+ @warn "[archetype:target:browser] using hack for webkit-all";
97
+ }
98
+ // @link http://paulirish.com/2009/browser-specific-css-hacks/
99
+ @media screen and (-webkit-min-device-pixel-ratio:0) {
100
+ & {
101
+ /* [archetype:target:browser:begin] --- webkit --- */
102
+ @include output-style($property, $value);
103
+ @content;
104
+ /* [archetype:target:browser:end] --- webkit --- */
105
+ }
106
+ }
91
107
  }
92
- // @link http://paulirish.com/2009/browser-specific-css-hacks/
93
- @media screen and (-webkit-min-device-pixel-ratio:0) {
94
- & {
95
- /* [archetype:target:browser:begin] --- webkit --- */
108
+ // target gecko
109
+ @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, gecko-all) )) {
110
+ @if $CONFIG_BROWSER_WARN_ON_HACK {
111
+ @warn "[archetype:target:browser] using hack for gecko-all";
112
+ }
113
+ // @link http://paulirish.com/2009/browser-specific-css-hacks/
114
+ &, x:-moz-any-link {
115
+ /* [archetype:target:browser:begin] --- gecko --- */
96
116
  @include output-style($property, $value);
97
117
  @content;
98
- /* [archetype:target:browser:end] --- webkit --- */
118
+ /* [archetype:target:browser:end] --- gecko --- */
99
119
  }
100
120
  }
101
- }
102
- // target gecko
103
- @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, gecko-all) )) {
104
- @if $CONFIG_BROWSER_WARN_ON_HACK {
105
- @warn "[archetype:target:browser] using hack for gecko-all";
106
- }
107
- // @link http://paulirish.com/2009/browser-specific-css-hacks/
108
- &, x:-moz-any-link {
109
- /* [archetype:target:browser:begin] --- gecko --- */
110
- @include output-style($property, $value);
111
- @content;
112
- /* [archetype:target:browser:end] --- gecko --- */
113
- }
114
- }
115
- // target opera
116
- @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, opera-all) )) {
117
- @if $CONFIG_BROWSER_WARN_ON_HACK {
118
- @warn "[archetype:target:browser] using hack for opera-all";
119
- }
120
- // @link http://paulirish.com/2009/browser-specific-css-hacks/
121
- &, x:-o-prefocus {
122
- /* [archetype:target:browser:begin] --- opera --- */
123
- @include output-style($property, $value);
124
- @content;
125
- /* [archetype:target:browser:end] --- opera --- */
121
+ // target opera
122
+ @if(index2($browsers, map-get($CONFIG_BROWSER_VENDORS_HACK, opera-all) )) {
123
+ @if $CONFIG_BROWSER_WARN_ON_HACK {
124
+ @warn "[archetype:target:browser] using hack for opera-all";
125
+ }
126
+ // @link http://paulirish.com/2009/browser-specific-css-hacks/
127
+ &, x:-o-prefocus {
128
+ /* [archetype:target:browser:begin] --- opera --- */
129
+ @include output-style($property, $value);
130
+ @content;
131
+ /* [archetype:target:browser:end] --- opera --- */
132
+ }
126
133
  }
127
134
  }
128
135
  // if there's only one target browser and it's IE6 or IE lte 7, we can use an inline hack
129
136
  @if $inline and type-of($property) != map {
130
- $tmp: _getTargetedBrowsers($browsers, $threshold: $threshold);
137
+ $tmp: _getTargetedBrowsers($browsers, $merge: false, $threshold: $threshold);
131
138
  @if(length($tmp) == 1) {
132
139
  $support: ();
133
- @if(support-legacy-browser('ie', '6', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.ie6'); }
134
- @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.lte7'); }
140
+ @if(support-legacy-browser('ie', '6', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.ie6 &'); }
141
+ @if(support-legacy-browser('ie', '7', $threshold: $critical-usage-threshold)) { $support: append($support, '.ie.lte7 &'); }
135
142
  $idx: index2($support, $tmp);
136
143
  @if($idx) {
137
144
  $prefix: nth(('_', '*'), $idx);
@@ -143,14 +150,16 @@ $a-blackhole: require-archetype-modules(archetype/util);
143
150
  }
144
151
  }
145
152
  }
146
- // target via class names
147
- $classes: _getTargetedBrowsers($browsers, $using: if($merge, '&', ' &'), $threshold: $threshold);
148
- @if(length($classes) > 0) {
149
- #{$classes} {
150
- /* [archetype:target:browser:begin] --- #{$browsers} --- */
151
- @include output-style($property, $value);
152
- @content;
153
- /* [archetype:target:browser:end] --- #{$browsers} --- */
153
+ @if not $only-inline {
154
+ // target via class names
155
+ $classes: _getTargetedBrowsers($browsers, $merge: $merge, $threshold: $threshold);
156
+ @if(length($classes) > 0) {
157
+ #{$classes} {
158
+ /* [archetype:target:browser:begin] --- #{$browsers} --- */
159
+ @include output-style($property, $value);
160
+ @content;
161
+ /* [archetype:target:browser:end] --- #{$browsers} --- */
162
+ }
154
163
  }
155
164
  }
156
165
  }
@@ -164,7 +173,6 @@ $a-blackhole: require-archetype-modules(archetype/util);
164
173
  // @content
165
174
  @mixin target-os($os: (), $property: null, $value: null, $merge: false) {
166
175
  $os: -archetype-list($os);
167
- $using: if($merge, '&', ' &');
168
176
  $classes: ();
169
177
  // if `default` is in the list of OS's, then output without a prefix
170
178
  @if(index($os, default)) {
@@ -174,7 +182,7 @@ $a-blackhole: require-archetype-modules(archetype/util);
174
182
  @each $vendor, $aliases in $CONFIG_OS_VENDORS_CLASS {
175
183
  // if it matches the requested os
176
184
  @if index2($aliases, $os) {
177
- $item: unquote('.#{$vendor}#{$using}');
185
+ $item: _getTargetedSelectorScope($vendor, $merge);
178
186
  // if it's not already on the stack, push it
179
187
  @if(not index($classes, $item)) {
180
188
  $classes: append($classes, $item, comma);