-
Notifications
You must be signed in to change notification settings - Fork 17
/
_hacks.scss
121 lines (111 loc) · 4.96 KB
/
_hacks.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// @category hacks
@import "util";
// hack to support negative margins in legacy IE
// @mixin hack-negative-margin
@mixin hack-negative-margin() {
@if($legacy-support-for-ie6 or $legacy-support-for-ie7) {
@include has-layout();
position: relative;
}
}
// max-height hack
// @mixin max-height
// @param $value {String} the height
@mixin max-height($value) {
@include hacked-maximum(height, $value);
}
// max-width hack
// @mixin max-width
// @param $value {String} the width
@mixin max-width($value) {
@include hacked-maximum(width, $value);
}
// generic max-* hack wrapper
// @mixin hacked-maximum
// @param $property {String} property [height|width]
// @param $value {String} the value
@mixin hacked-maximum($property, $value) {
max-#{$property}: $value;
@include bang-hack($property, auto, $value);
}
// proxy for ie-pseudo
// @mixin ie-pseudo-before
// @param $styles {String} the styles to apply to the pseudo-element
// @param $content {String} the content to insert into the element (similar to css `content` attribute)
// @param $name {String} the name of the element
// @content
@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
@include ie-pseudo($styles, $content, before, $name) {
@content;
}
}
// proxy for ie-pseudo
// @mixin ie-pseudo-after
// @param $styles {String} the styles to apply to the pseudo-element
// @param $content {String} the content to insert into the element (similar to css `content` attribute)
// @param $name {String} the name of the element
// @content
@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
@include ie-pseudo($styles, $content, after, $name) {
@content;
}
}
// this creates a one-type executing expression that inserts an element relative to `this` element.
// this allows some level of support for :before/:after in IE6/7
// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
// @mixin ie-pseudo
// @param $styles {String} the styles to apply to the pseudo-element
// @param $content {String} the content to insert into the element (similar to css `content` attribute)
// @param $placement {String} [before|after] simulate :before or :after behavior
// @param $name {String} the name of the element
// @param $uid {String} a custom, unique identifier for the generate element
// @content
@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
$archetype-pseudo-selector: false;
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
$uid: if($uid, $uid, unique('ie-pseudo-'));
$archetype-pseudo-selector: '& ##{$uid}';
$this: 't';
$cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")'));
$method: if($placement == before, insertBefore, appendChild);
@if $content and $content != nil {
$cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma);
}
@if $CONFIG_GENERATED_TAG_CSS {
$styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
}
@if $styles and $styles != nil and $styles != '' and $CONFIG_GENERATED_TAG_INLINE {
// sets the icon styles on the node
$cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma);
}
// if we're using the insertBefore method, we need to specify the node reference to the first childNode
$reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
$cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma);
$runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once
// we execute in a setTimeout to decouple from the current UI thread
// this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
// http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
*zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
// if we're NOT using inline styles...
@if not $CONFIG_GENERATED_TAG_INLINE {
// output it on the generated selector
#{$archetype-pseudo-selector} {
@include to-styles(-style-string-to-list(unquote($styles)));
@if archetype-version('Sass >= 3.2') {
@content;
}
}
}
}
}
// a hack that allows elements with transparent backgrounds to be focusable in IE
// @mixin transparent-focusable
// @param $url {String} an optional URL to point to an image (not required)
// @param $data {String} an optional data URI for a transparent image (not required)
@mixin transparent-focusable($url: url(https://), $data: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') {
$bg: (transparent);
background: append($bg, $data);
@if $url {
@include target-browser(ie lte 7, background, append($bg, $url));
}
}