compass-excess 0.0.3 → 0.0.4

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d204ab193d760f41af4a29fa38ae73cf60729ed8
4
- data.tar.gz: bf00203e13fed051de76ad51b07c69b7e922b74b
3
+ metadata.gz: cb1a3fc5c74ebf526c2ad4c4c09340e05bea4d44
4
+ data.tar.gz: 458be1863f97c5aea36367a8bfdd6df14799150d
5
5
  SHA512:
6
- metadata.gz: 6363fe6c6f3e1a1860d0da299a292a6f5105bfb84c463a3dbea5e4062937e2446937cded37efc509861bcd1d1f0cc8be018610434adaffe9662cb40cb2a2f7a3
7
- data.tar.gz: e20bc189b237e972db46c7ce49b2cea813301a6b0381f66b68d2bf5947b2832b8f308bf0b667da8282c94683be296a8f9f6e2fa3d622db8b3f6680ff307ab461
6
+ metadata.gz: a35936f5e5e05586872f98fff26411bb4d42d038fe52dc0e7935dac7a534611e8492ce48a020c646d4a49c4257492ca577835fc6ac380e13ac21c2e536322338
7
+ data.tar.gz: 2c88797c41b17d0bb4f57052269d1bbf57325d5c410c686de8ba2c492126321fb9ad19470c6a3475fcb13ea3b368612a3e7ec2154754590c17f260f76586da30
@@ -1,5 +1,5 @@
1
1
  module Compass
2
2
  module Excess
3
- VERSION = '0.0.3'
3
+ VERSION = '0.0.4'
4
4
  end
5
5
  end
@@ -23,10 +23,16 @@
23
23
  }
24
24
  }
25
25
 
26
- @mixin medium-text-underline-hover($color: black, $background-color: white, $font-size: 1.4, $line-height: 1.8, $stroke-width: 2px) {
26
+ $line-height-modifiers: (
27
+ default: 1.1875,
28
+ mac: 1,
29
+ ie: 1.25
30
+ );
31
+
32
+ @mixin text-underline-line-height($line-height) {
27
33
  display: inline-block;
28
34
  text-decoration: none;
29
- @include line-height($line-height * 1.1875);
35
+ @include line-height($line-height * map-get($line-height-modifiers, default));
30
36
 
31
37
  body.mac &,
32
38
  body.ios & {
@@ -34,26 +40,106 @@
34
40
  }
35
41
 
36
42
  body.ie & {
37
- @include line-height($line-height * 1.25);
43
+ @include line-height($line-height * map-get($line-height-modifiers, ie));
38
44
  }
45
+ } // @text-underline-line-height()
46
+
47
+ @mixin text-underline-gradient(
48
+ $color,
49
+ $background-color,
50
+ $line-height,
51
+ $line-width,
52
+ $line-offset,
53
+ $platform: default
54
+ ) {
55
+ $line-width: $line-width / 1px;
56
+ $line-offset: $line-offset / 1px;
57
+ $line-height: $line-height * map-get($line-height-modifiers, $platform);
58
+
59
+ @if $line-offset == 0 {
60
+ $color-stop: percentage(1 - ($line-width / ($line-height * 10)));
61
+ @include background-image(
62
+ linear-gradient(
63
+ $background-color,
64
+ $background-color $color-stop,
65
+ $color $color-stop,
66
+ $color 100%
67
+ )
68
+ );
69
+ } @else {
70
+ $color-stop-1: percentage(1 - (($line-width + $line-offset) / ($line-height * 10)));
71
+ $color-stop-2: percentage(1 - ($line-offset / ($line-height * 10)));
72
+
73
+ @include background-image(
74
+ linear-gradient(
75
+ $background-color,
76
+ $background-color $color-stop-1,
77
+ $color $color-stop-1,
78
+ $color $color-stop-2,
79
+ $background-color $color-stop-2,
80
+ $background-color 100%
81
+ )
82
+ );
83
+ }
84
+ } // @text-underline-gradient()
85
+
86
+ @mixin text-underline-stroke($background-color, $stroke-width) {
87
+ @include text-shadow(
88
+ 0 $stroke-width 0 $background-color,
89
+ $stroke-width 0 0 $background-color,
90
+ 0 -1 * $stroke-width 0 $background-color,
91
+ -1 * $stroke-width 0 0 $background-color
92
+ );
93
+ } // @text-underline-stroke()
94
+
95
+ @mixin text-underline(
96
+ $color: black,
97
+ $background-color: white,
98
+ $font-size: 1.4,
99
+ $line-height: 1.8,
100
+ $stroke-width: 2px,
101
+ $line-width: 1px,
102
+ $line-offset: 0px
103
+ ) {
104
+ @include text-underline-line-height($line-height);
105
+ @include text-underline-gradient($color, $background-color, $line-height, $line-width, $line-offset, default);
106
+ @include text-underline-stroke($background-color, $stroke-width);
107
+
108
+ body.mac &,
109
+ body.ios & {
110
+ @include text-underline-gradient($color, $background-color, $line-height, $line-width, $line-offset, mac);
111
+ }
112
+
113
+ body.ie & {
114
+ @include text-underline-gradient($color, $background-color, $line-height, $line-width, $line-offset, ie);
115
+ }
116
+ } // @text-underline()
117
+
118
+ @mixin medium-text-underline-hover(
119
+ $color: black,
120
+ $background-color: white,
121
+ $font-size: 1.4,
122
+ $line-height: 1.8,
123
+ $stroke-width: 2px,
124
+ $line-width: 1px,
125
+ $line-offset: 0px
126
+ ) {
127
+ @include text-underline-line-height($line-height);
39
128
 
40
129
  &:hover {
41
- $color-stop: percentage(1 - (1 / ($line-height * 11.875)));
42
- @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
43
- @include text-shadow(0 1px 0 $stroke-width $background-color, 1px 0 0 $stroke-width $background-color, 0 -1px 0 $stroke-width $background-color, -1px 0 0 $stroke-width $background-color);
130
+ @include text-underline-gradient($color, $background-color, $line-width, $line-height, $line-offset);
131
+ @include text-underline-stroke($background-color, $stroke-width);
44
132
  }
45
133
 
46
134
  body.mac &:hover,
47
135
  body.ios &:hover {
48
- $color-stop: percentage(1 - (1 / ($line-height * 10)));
49
- @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
136
+ @include text-underline-gradient($color, $background-color, $line-width, $line-height, $line-offset, mac);
50
137
  }
51
138
 
52
139
  body.ie &:hover {
53
- $color-stop: percentage(1 - (1 / ($line-height * 12.5)));
54
- @include background-image(linear-gradient($background-color, $background-color $color-stop, $color 100%));
140
+ @include text-underline-gradient($color, $background-color, $line-width, $line-height, $line-offset, ie);
55
141
  }
56
- }
142
+ } // @medium-text-underline-hover()
57
143
 
58
144
  @mixin text-no-underline-hover {
59
145
  &:hover { text-decoration: none; }
@@ -65,7 +151,14 @@
65
151
  text-overflow: ellipsis;
66
152
  }
67
153
 
68
- @mixin font-family($fontname, $filename, $weight: normal, $style: normal, $stretch: normal, $range: false) {
154
+ @mixin font-family(
155
+ $fontname,
156
+ $filename,
157
+ $weight: normal,
158
+ $style: normal,
159
+ $stretch: normal,
160
+ $range: false
161
+ ) {
69
162
  @font-face {
70
163
  font-family: $fontname;
71
164
  src: font-url($filename + '.eot');
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-excess
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3
4
+ version: 0.0.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ben Darlow
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-08-20 00:00:00.000000000 Z
11
+ date: 2015-12-08 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass