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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +67 -3
- data/README.md +1 -1
- data/VERSION +1 -1
- data/lib/archetype.rb +4 -0
- data/lib/archetype/actions/migrate.rb +10 -0
- data/lib/archetype/extensions.rb +35 -1
- data/lib/archetype/functions/helpers.rb +8 -0
- data/lib/archetype/functions/styleguide_memoizer.rb +1 -1
- data/lib/archetype/sass_extensions/functions/environment.rb +1 -1
- data/lib/archetype/sass_extensions/functions/lists.rb +2 -1
- data/lib/archetype/sass_extensions/functions/styleguide.rb +45 -88
- data/lib/archetype/sass_extensions/functions/styleguide/components.rb +230 -1
- data/lib/archetype/sass_extensions/functions/styleguide/constants.rb +0 -1
- data/lib/archetype/sass_extensions/functions/styleguide/grammar.rb +66 -5
- data/lib/archetype/sass_extensions/functions/styleguide/helpers.rb +36 -1
- data/lib/archetype/sass_extensions/functions/styleguide/resolve.rb +12 -2
- data/lib/archetype/sass_extensions/functions/styleguide/styles.rb +6 -3
- data/lib/archetype/sass_extensions/functions/styleguide/themes.rb +2 -1
- data/lib/archetype/sass_extensions/functions/ui/glyphs.rb +1 -1
- data/lib/archetype/sass_extensions/functions/ui/scopes.rb +4 -4
- data/lib/archetype/sass_extensions/functions/util/debug.rb +1 -1
- data/lib/archetype/sass_extensions/functions/util/hacks.rb +4 -8
- data/lib/archetype/sass_extensions/functions/util/images.rb +11 -8
- data/lib/archetype/sass_extensions/functions/util/misc.rb +34 -1
- data/lib/archetype/sass_extensions/functions/util/spacing.rb +1 -1
- data/stylesheets/archetype/hacks/_hacks.scss +1 -1
- data/stylesheets/archetype/styleguide/_styleguide.scss +2 -0
- data/stylesheets/archetype/util/_styles.scss +165 -125
- data/stylesheets/archetype/util/_targeting.scss +62 -54
- data/templates/example/screen.scss +2 -0
- data/templates/project/manifest.rb +1 -1
- 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)
|
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.
|
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
|
-
@
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
@
|
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
|
-
|
104
|
-
|
105
|
-
@
|
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
|
-
|
114
|
-
|
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
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
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
|
-
|
123
|
-
|
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
|
-
@
|
126
|
-
|
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
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
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
|
-
|
141
|
-
|
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
|
-
|
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
|
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
|
-
|
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
|
-
|
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
|
-
|
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: '
|
59
|
-
$list: append($list,
|
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
|
-
|
88
|
-
|
89
|
-
@if $
|
90
|
-
@
|
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
|
-
//
|
93
|
-
@
|
94
|
-
|
95
|
-
|
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] ---
|
118
|
+
/* [archetype:target:browser:end] --- gecko --- */
|
99
119
|
}
|
100
120
|
}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
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
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
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:
|
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);
|