toolkit 2.0.0.alpha.10 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/toolkit.rb +10 -3
- data/stylesheets/_toolkit.scss +2 -3
- data/stylesheets/toolkit/_clearfix.scss +5 -6
- data/stylesheets/toolkit/_colors.scss +54 -21
- data/stylesheets/toolkit/_fonts.scss +94 -9
- data/stylesheets/toolkit/_intrinsic-ratio.scss +16 -18
- data/stylesheets/toolkit/_nested-context.scss +1 -1
- data/stylesheets/toolkit/_parallax.scss +43 -24
- data/stylesheets/toolkit/_placeholders.scss +30 -0
- data/stylesheets/toolkit/_rtl.scss +24 -0
- data/stylesheets/toolkit/_settings.scss +15 -8
- data/stylesheets/toolkit/_triangle.scss +2 -2
- data/stylesheets/toolkit/_vertical-center.scss +21 -9
- metadata +10 -26
- data/LICENSE.txt +0 -27
- data/stylesheets/toolkit/_element-query.scss +0 -25
- data/stylesheets/toolkit/_pe.scss +0 -69
- data/stylesheets/toolkit/_properties.scss +0 -9
- data/stylesheets/toolkit/_selectors.scss +0 -92
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 62760cac31edf0b4c29adc98c135ae7fe31701ab
|
4
|
+
data.tar.gz: 9c9685e17a161700d2a601a6000c821a867d4bea
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 312c882e68716000f7de22b83cecab58e414fae1938bf0445a34e3a8816e212982ec034b5e957af88a874f10bdadc107848caec86c542e0ae5c6fc879fb9c258
|
7
|
+
data.tar.gz: 39dc84d1b4a8567d593e09de184c000585049d3c7a7871fcf9a58bd49076c306659e67ed48e32a00315b42a01db78f20839694aa6f1d48a6d53c83dc1adbb870
|
data/lib/toolkit.rb
CHANGED
@@ -1,4 +1,11 @@
|
|
1
|
-
|
1
|
+
if (defined? Compass)
|
2
|
+
Compass::Frameworks.register(
|
3
|
+
"toolkit",
|
4
|
+
:path => "#{File.dirname(__FILE__)}/.."
|
5
|
+
)
|
6
|
+
end
|
2
7
|
|
3
|
-
|
4
|
-
|
8
|
+
module Toolkit
|
9
|
+
VERSION = "2.0.0"
|
10
|
+
DATE = "2014-03-14"
|
11
|
+
end
|
data/stylesheets/_toolkit.scss
CHANGED
@@ -2,19 +2,18 @@
|
|
2
2
|
// Toolkit Settings
|
3
3
|
//////////////////////////////
|
4
4
|
@import "toolkit/settings";
|
5
|
+
@import "toolkit/placeholders";
|
5
6
|
|
6
7
|
//////////////////////////////
|
7
8
|
// Imports
|
8
9
|
//////////////////////////////
|
9
10
|
@import "toolkit/clearfix";
|
10
11
|
@import "toolkit/colors";
|
11
|
-
@import "toolkit/element-query";
|
12
12
|
@import "toolkit/fonts";
|
13
13
|
@import "toolkit/intrinsic-ratio";
|
14
14
|
@import "toolkit/nested-context";
|
15
15
|
@import "toolkit/parallax";
|
16
|
-
@import "toolkit/
|
17
|
-
@import "toolkit/properties";
|
16
|
+
@import "toolkit/rtl";
|
18
17
|
@import "toolkit/triangle";
|
19
18
|
@import "toolkit/vertical-center";
|
20
19
|
@import "toolkit/viewport";
|
@@ -3,8 +3,11 @@
|
|
3
3
|
//////////////////////////////
|
4
4
|
@mixin clearfix($extend: null) {
|
5
5
|
$extend: if($extend != null, $extend, toolkit-get('clearfix extend'));
|
6
|
-
|
7
|
-
|
6
|
+
|
7
|
+
@if $extend == true {
|
8
|
+
@include toolkit-placeholder('clearfix') {
|
9
|
+
@include clearfix(false);
|
10
|
+
}
|
8
11
|
}
|
9
12
|
@else {
|
10
13
|
&:after {
|
@@ -13,8 +16,4 @@
|
|
13
16
|
clear: both;
|
14
17
|
}
|
15
18
|
}
|
16
|
-
}
|
17
|
-
|
18
|
-
%toolkit-clearfix {
|
19
|
-
@include clearfix(false);
|
20
19
|
}
|
@@ -5,12 +5,12 @@
|
|
5
5
|
//////////////////////////////
|
6
6
|
// Tint and Shade
|
7
7
|
//////////////////////////////
|
8
|
-
@function tint($
|
9
|
-
@return mix(toolkit-get('tint color'), $
|
8
|
+
@function tint($color, $amount) {
|
9
|
+
@return mix(toolkit-get('tint color'), $color, $amount);
|
10
10
|
}
|
11
11
|
|
12
|
-
@function shade($
|
13
|
-
@return mix(toolkit-get('shade color'), $
|
12
|
+
@function shade($color, $amount) {
|
13
|
+
@return mix(toolkit-get('shade color'), $color, $amount);
|
14
14
|
}
|
15
15
|
|
16
16
|
//////////////////////////////
|
@@ -80,32 +80,65 @@
|
|
80
80
|
//////////////////////////////
|
81
81
|
// Color Scales
|
82
82
|
//////////////////////////////
|
83
|
-
@function color-scale($main, $secondary, $
|
84
|
-
$
|
83
|
+
@function color-scale($main, $secondary, $steps: null) {
|
84
|
+
$steps: if($steps != null, $steps, toolkit-get('color scale steps'));;
|
85
85
|
|
86
86
|
$list: $main;
|
87
87
|
|
88
88
|
$red1: red($main);
|
89
89
|
$red2: red($secondary);
|
90
|
-
$red-diff: (($red1 - $red2) / (($
|
90
|
+
$red-diff: (($red1 - $red2) / (($steps - 1)));
|
91
91
|
|
92
|
-
$
|
93
|
-
$
|
94
|
-
|
92
|
+
$hue1: hue($main);
|
93
|
+
$hue2: hue($secondary);
|
94
|
+
@if ($hue2 + 359 - $hue1) < abs($hue1 - $hue2) {
|
95
|
+
$hue2: $hue2 + 359;
|
96
|
+
}
|
97
|
+
$hue-diff: ($hue2 - $hue1) / ($steps - 1);
|
98
|
+
|
99
|
+
$sat1: saturation($main);
|
100
|
+
$sat2: saturation($secondary);
|
101
|
+
$sat-diff: 0;
|
102
|
+
@if $sat1 > $sat2 {
|
103
|
+
$sat-diff: ($sat2 - $sat1) / ($steps - 1);
|
104
|
+
}
|
105
|
+
@else {
|
106
|
+
$sat-diff: ($sat1 - $sat2) / ($steps - 1);
|
107
|
+
}
|
108
|
+
|
109
|
+
$lte1: lightness($main);
|
110
|
+
$lte2: lightness($secondary);
|
111
|
+
$lte-diff: 0;
|
112
|
+
@if $lte1 > $lte2 {
|
113
|
+
$lte-diff: ($lte2 - $lte1) / ($steps - 1);
|
114
|
+
}
|
115
|
+
@else {
|
116
|
+
$lte-diff: ($lte1 - $lte2) / ($steps - 1);
|
117
|
+
}
|
118
|
+
|
119
|
+
$alp1: alpha($main);
|
120
|
+
$alp2: alpha($secondary);
|
121
|
+
$alp-diff: 0;
|
122
|
+
@if $alp1 > $alp2 {
|
123
|
+
$alp-diff: ($alp2 - $alp1) / ($steps - 1);
|
124
|
+
}
|
125
|
+
@else {
|
126
|
+
$alp-diff: ($alp1 - $alp2) / ($steps - 1);
|
127
|
+
}
|
95
128
|
|
96
|
-
$
|
97
|
-
$
|
98
|
-
$
|
129
|
+
$hue-hold: $hue1;
|
130
|
+
$sat-hold: $sat1;
|
131
|
+
$lte-hold: $lte1;
|
132
|
+
$alp-hold: $alp1;
|
133
|
+
$color-hold: 0;
|
99
134
|
|
100
|
-
$
|
101
|
-
|
102
|
-
|
135
|
+
@for $i from 2 through $steps {
|
136
|
+
$hue-hold: $hue-hold + $hue-diff;
|
137
|
+
$sat-hold: $sat-hold + $sat-diff;
|
138
|
+
$lte-hold: $lte-hold + $lte-diff;
|
139
|
+
$alp-hold: $alp-hold + $alp-diff;
|
103
140
|
|
104
|
-
|
105
|
-
$red-hold: $red-hold - ($red-diff);
|
106
|
-
$grn-hold: $grn-hold - ($grn-diff);
|
107
|
-
$blu-hold: $blu-hold - ($blu-diff);
|
108
|
-
$color-hold: rgb($red-hold, $grn-hold, $blu-hold);
|
141
|
+
$color-hold: hsla($hue-hold, $sat-hold, $lte-hold, $alp-hold);
|
109
142
|
$list: append($list, $color-hold);
|
110
143
|
}
|
111
144
|
|
@@ -2,10 +2,12 @@
|
|
2
2
|
// Enable ligatures
|
3
3
|
//////////////////////////////
|
4
4
|
@mixin enable-ligatures($extend: null) {
|
5
|
-
$extend: if($extend != null, $extend, toolkit-get('extend
|
5
|
+
$extend: if($extend != null, $extend, toolkit-get('ligature extend'));
|
6
6
|
|
7
7
|
@if $extend {
|
8
|
-
@
|
8
|
+
@include toolkit-placeholder('enable ligatures') {
|
9
|
+
@include enable-ligatures;
|
10
|
+
}
|
9
11
|
}
|
10
12
|
@else {
|
11
13
|
-webkit-font-feature-settings:"liga","dlig";
|
@@ -17,8 +19,93 @@
|
|
17
19
|
}
|
18
20
|
}
|
19
21
|
|
20
|
-
|
21
|
-
|
22
|
+
//////////////////////////////
|
23
|
+
// Font Face
|
24
|
+
//////////////////////////////
|
25
|
+
@mixin font-face($name, $files, $weight: null, $style: null, $inline-woff: null) {
|
26
|
+
$weight: if($weight != null, $weight, toolkit-get('font face weight'));
|
27
|
+
$style: if($style != null, $style, toolkit-get('font face style'));
|
28
|
+
$inline-woff: if($inline-woff != null, $inline-woff, toolkit-get('font face inline woff'));
|
29
|
+
|
30
|
+
$font-stack: ();
|
31
|
+
$font-src: '';
|
32
|
+
$eot: false;
|
33
|
+
$font-extensions: ('eot': 'embedded-opentype', 'woff': 'woff', 'ttf': 'truetype', 'svg': 'svg');
|
34
|
+
|
35
|
+
@each $ext, $format in $font-extensions {
|
36
|
+
@if map-has-key($files, $ext) {
|
37
|
+
@if function-exists(inline-font-files) and $inline-woff == true and $ext == 'woff' {
|
38
|
+
$font-src: inline-font-files(map-get($files, $ext));
|
39
|
+
}
|
40
|
+
@else if function-exists(font-url) {
|
41
|
+
$font-src: font-url(map-get($files, $ext)) format($format);
|
42
|
+
@if $ext == 'eot' {
|
43
|
+
$eot: $font-src;
|
44
|
+
$font-src: font-url(map-get($files, $ext) + '#iefix') format($format);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
@else {
|
48
|
+
$font-src: url(map-get($files, $ext)) format($format);
|
49
|
+
@if $ext == 'eot' {
|
50
|
+
$eot: $font-src;
|
51
|
+
$font-src: url(map-get($files, $ext) + '#iefix') format($format);
|
52
|
+
}
|
53
|
+
}
|
54
|
+
$font-stack: append($font-stack, $font-src, 'comma');
|
55
|
+
}
|
56
|
+
|
57
|
+
}
|
58
|
+
|
59
|
+
@at-root {
|
60
|
+
@font-face {
|
61
|
+
font-family: $name;
|
62
|
+
font-weight: $weight;
|
63
|
+
font-style: $style;
|
64
|
+
@if $eot {
|
65
|
+
src: $eot;
|
66
|
+
}
|
67
|
+
@if length($font-stack) > 0 {
|
68
|
+
src: $font-stack;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
//////////////////////////////
|
75
|
+
// Icon Font
|
76
|
+
// From http://icomoon.io
|
77
|
+
//////////////////////////////
|
78
|
+
@mixin icon-font($font-stack, $speak: null, $extend: null) {
|
79
|
+
$speak: if($speak != null, $speak, toolkit-get('icon font speak'));
|
80
|
+
$extend: if($extend != null, $extend, toolkit-get('icon font extend'));
|
81
|
+
|
82
|
+
font-family: $font-stack;
|
83
|
+
@if $speak == false {
|
84
|
+
speak: none;
|
85
|
+
}
|
86
|
+
@include icon-font--core($extend);
|
87
|
+
}
|
88
|
+
|
89
|
+
@mixin icon-font--core($extend: null) {
|
90
|
+
$extend: if($extend != null, $extend, toolkit-get('icon font extend'));
|
91
|
+
|
92
|
+
@if $extend {
|
93
|
+
@include toolkit-placeholder('icon font core') {
|
94
|
+
@include icon-font--core(false);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
@else {
|
98
|
+
font-style: normal;
|
99
|
+
font-weight: normal;
|
100
|
+
font-variant: normal;
|
101
|
+
text-transform: none;
|
102
|
+
line-height: 1;
|
103
|
+
|
104
|
+
@include enable-ligatures($extend);
|
105
|
+
|
106
|
+
-webkit-font-smoothing: antialiased;
|
107
|
+
-moz-osx-font-smoothing: grayscale;
|
108
|
+
}
|
22
109
|
}
|
23
110
|
|
24
111
|
//////////////////////////////
|
@@ -30,7 +117,9 @@
|
|
30
117
|
$extend: if($extend != null, $extend, toolkit-get('fade in extend'));
|
31
118
|
|
32
119
|
@if $extend == true and $duration == toolkit-get('fade in duration') and $loading == toolkit-get('fade in loading class') {
|
33
|
-
@
|
120
|
+
@include toolkit-placeholder('content fade in') {
|
121
|
+
@include content-fade-in($extend: false);
|
122
|
+
}
|
34
123
|
}
|
35
124
|
@else {
|
36
125
|
opacity: 1;
|
@@ -46,8 +135,4 @@
|
|
46
135
|
opacity: 0;
|
47
136
|
}
|
48
137
|
}
|
49
|
-
}
|
50
|
-
|
51
|
-
%content-fade-in {
|
52
|
-
@include content-fade-in($extend: false);
|
53
138
|
}
|
@@ -4,20 +4,24 @@
|
|
4
4
|
@mixin intrinsic-ratio-parent($extend: null) {
|
5
5
|
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
|
6
6
|
|
7
|
-
|
8
|
-
@
|
9
|
-
@
|
10
|
-
}
|
11
|
-
@else {
|
12
|
-
position: relative;
|
13
|
-
height: 0;
|
7
|
+
@if $extend {
|
8
|
+
@include toolkit-placeholder('intrinsic ratio parent') {
|
9
|
+
@include intrinsic-ratio-parent(false);
|
14
10
|
}
|
11
|
+
}
|
12
|
+
@else {
|
13
|
+
position: relative;
|
14
|
+
height: 0;
|
15
|
+
}
|
15
16
|
}
|
16
17
|
|
17
18
|
@mixin intrinsic-ratio-child($extend: null) {
|
18
19
|
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
|
20
|
+
|
19
21
|
@if $extend {
|
20
|
-
@
|
22
|
+
@include toolkit-placeholder('intrinsic ratio child') {
|
23
|
+
@include intrinsic-ratio-child(false);
|
24
|
+
}
|
21
25
|
}
|
22
26
|
@else {
|
23
27
|
display: block;
|
@@ -33,7 +37,8 @@
|
|
33
37
|
@mixin intrinsic-ratio-ratio($ratio: null, $width: null, $position: null) {
|
34
38
|
$ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
|
35
39
|
$width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
|
36
|
-
$position: if($position != null, $position, toolkit-get('intrinsic ratio
|
40
|
+
$position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
|
41
|
+
|
37
42
|
padding-#{$position}: (1 / $ratio) * $width;
|
38
43
|
width: $width;
|
39
44
|
}
|
@@ -42,8 +47,9 @@
|
|
42
47
|
$ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio'));
|
43
48
|
$width: if($width != null, $width, toolkit-get('intrinsic ratio width'));
|
44
49
|
$elements: if($elements != null, $elements, toolkit-get('intrinsic ratio elements'));
|
45
|
-
$position: if($position != null, $position, toolkit-get('intrinsic ratio
|
50
|
+
$position: if($position != null, $position, toolkit-get('intrinsic ratio position'));
|
46
51
|
$extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend'));
|
52
|
+
|
47
53
|
@include intrinsic-ratio-parent($extend);
|
48
54
|
|
49
55
|
@include intrinsic-ratio-ratio($ratio, $width, $position);
|
@@ -57,12 +63,4 @@
|
|
57
63
|
|
58
64
|
@mixin ir($ratio: null, $width: null, $elements: null, $position: null, $extend: null) {
|
59
65
|
@include intrinsic-ratio($ratio, $width, $elements, $extend, $position);
|
60
|
-
}
|
61
|
-
|
62
|
-
%intrinsic-ratio-parent {
|
63
|
-
@include intrinsic-ratio-parent(false);
|
64
|
-
}
|
65
|
-
|
66
|
-
%intrinsic-ratio-child {
|
67
|
-
@include intrinsic-ratio-child(false);
|
68
66
|
}
|
@@ -17,7 +17,7 @@
|
|
17
17
|
// mixin to make things easier
|
18
18
|
@mixin nested-context($contexts: null, $position: null) {
|
19
19
|
$contexts: if($contexts != null, $contexts, toolkit-get('nested context contexts'));
|
20
|
-
$position: if($position != null, $position, toolkit-get('
|
20
|
+
$position: if($position != null, $position, toolkit-get('nested context position'));
|
21
21
|
|
22
22
|
width: nested-context($contexts);
|
23
23
|
@if $position == "center" {
|
@@ -6,36 +6,55 @@
|
|
6
6
|
$parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
|
7
7
|
|
8
8
|
@if $element == 'body' {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
@at-root {
|
10
|
+
html, body {
|
11
|
+
width: 100%;
|
12
|
+
height: 100%;
|
13
|
+
margin: 0;
|
14
|
+
padding: 0;
|
15
|
+
overflow: hidden;
|
16
|
+
}
|
17
|
+
body {
|
18
|
+
@include parallax-init-core($perspective, $parallax-ios);
|
19
|
+
}
|
15
20
|
}
|
16
21
|
}
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
@include perspective($perspective * 1px);
|
22
|
+
@else {
|
23
|
+
@if $element == this {
|
24
|
+
@include parallax-init-core($perspective, $parallax-ios);
|
21
25
|
}
|
22
26
|
@else {
|
23
|
-
-
|
24
|
-
|
27
|
+
@at-root #{$element} {
|
28
|
+
@include parallax-init-core($perspective, $parallax-ios);
|
29
|
+
}
|
25
30
|
}
|
26
|
-
|
27
|
-
|
28
|
-
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin parallax-init-core($perspective: null, $parallax-ios: null) {
|
35
|
+
$perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
|
36
|
+
$parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
|
37
|
+
|
38
|
+
overflow: auto;
|
39
|
+
@if mixin-exists(perspective) {
|
40
|
+
@include perspective($perspective * 1px);
|
41
|
+
}
|
42
|
+
@else {
|
43
|
+
-webkit-perspective: $perspective * 1px;
|
44
|
+
perspective: $perspective * 1px;
|
45
|
+
}
|
46
|
+
// Allows for smooth scrolling but disables parallax effects.
|
47
|
+
@if $parallax-ios == false {
|
48
|
+
-webkit-overflow-scrolling: touch;
|
49
|
+
}
|
50
|
+
// Make sure 3D perspective is preserved
|
51
|
+
&, & * {
|
52
|
+
@if mixin-exists(transform-style) {
|
53
|
+
@include transform-style(preserve-3d);
|
29
54
|
}
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
@include transform-style(preserve-3d);
|
34
|
-
}
|
35
|
-
@else {
|
36
|
-
-webkit-transform-style: preserve-3d;
|
37
|
-
transform-style: preserve-3d;
|
38
|
-
}
|
55
|
+
@else {
|
56
|
+
-webkit-transform-style: preserve-3d;
|
57
|
+
transform-style: preserve-3d;
|
39
58
|
}
|
40
59
|
}
|
41
60
|
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
$Private-Toolkit-Placeholders: (
|
2
|
+
);
|
3
|
+
|
4
|
+
//////////////////////////////
|
5
|
+
// Placeholder Get/Set
|
6
|
+
//////////////////////////////
|
7
|
+
@function toolkit-placeholder-set($id) {
|
8
|
+
$unique-id: unique-id();
|
9
|
+
$Private-Toolkit-Placeholders: map-merge($Private-Toolkit-Placeholders, ($id: $unique-id)) !global;
|
10
|
+
@return $unique-id;
|
11
|
+
}
|
12
|
+
|
13
|
+
@function toolkit-placeholder-get($id) {
|
14
|
+
@return map-get($Private-Toolkit-Placeholders, $id);
|
15
|
+
}
|
16
|
+
|
17
|
+
//////////////////////////////
|
18
|
+
// Generate Placeholder Class and Extend
|
19
|
+
//////////////////////////////
|
20
|
+
@mixin toolkit-placeholder($id) {
|
21
|
+
$placeholder-id: toolkit-placeholder-get($id);
|
22
|
+
|
23
|
+
@if $placeholder-id == null {
|
24
|
+
$placeholder-id: toolkit-placeholder-set($id);
|
25
|
+
@at-root %#{$placeholder-id} {
|
26
|
+
@content;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
@extend %#{$placeholder-id};
|
30
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
@mixin rtl($property, $value) {
|
2
|
+
$_property: $property;
|
3
|
+
#{$property}: $value;
|
4
|
+
|
5
|
+
@if length($value) == 4 {
|
6
|
+
[dir="rtl"] & {
|
7
|
+
#{$property}: nth($value, 1) nth($value, 4) nth($value, 3) nth($value, 2);
|
8
|
+
}
|
9
|
+
}
|
10
|
+
@else {
|
11
|
+
@if (str-index($property, 'left')) {
|
12
|
+
$property: str-slice($property, 1, str-index($property, 'left') - 1) + 'right';
|
13
|
+
}
|
14
|
+
@else if (str-index($property, 'right')) {
|
15
|
+
$property: str-slice($property, 1, str-index($property, 'right') - 1) + 'left';
|
16
|
+
}
|
17
|
+
|
18
|
+
@if $property != $_property {
|
19
|
+
[dir="rtl"] & {
|
20
|
+
#{$property}: $value;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
}
|
24
|
+
}
|
@@ -7,21 +7,23 @@ $Toolkit-Settings: (
|
|
7
7
|
'tint shade amounts': 75% 50% 25%,
|
8
8
|
'tint color': #fff,
|
9
9
|
'shade color': #000,
|
10
|
-
'color scale
|
11
|
-
'extend
|
10
|
+
'color scale steps': 6,
|
11
|
+
'ligature extend': false,
|
12
|
+
'font face weight': normal,
|
13
|
+
'font face style': normal,
|
14
|
+
'font face inline woff': false,
|
15
|
+
'icon font extend': false,
|
16
|
+
'icon font speak': false,
|
12
17
|
'fade in duration': 1s,
|
13
18
|
'fade in loading class': '.wf-loading',
|
14
19
|
'fade in extend': false,
|
15
20
|
'intrinsic ratio': 16/9,
|
16
21
|
'intrinsic ratio width': 100%,
|
17
22
|
'intrinsic ratio elements': '> *',
|
18
|
-
'intrinsic ratio
|
23
|
+
'intrinsic ratio position': top,
|
19
24
|
'intrinsic ratio extend': false,
|
20
25
|
'nested context contexts': 100%,
|
21
26
|
'nested context position': left,
|
22
|
-
'enhance with extend': false,
|
23
|
-
'degrade from extend': false,
|
24
|
-
'degrade from javascript': false,
|
25
27
|
'triangle color': #000,
|
26
28
|
'triangle height': 1em,
|
27
29
|
'triangle width': 1em,
|
@@ -31,6 +33,7 @@ $Toolkit-Settings: (
|
|
31
33
|
'parallax ios': true,
|
32
34
|
'parallax distance': 0,
|
33
35
|
'vertical midpoint': 50%,
|
36
|
+
'vertical extend': false
|
34
37
|
);
|
35
38
|
|
36
39
|
//////////////////////////////
|
@@ -66,8 +69,8 @@ $toolkit: () !default;
|
|
66
69
|
// Set Settings
|
67
70
|
//////////////////////////////
|
68
71
|
@function toolkit-set($setting, $value) {
|
69
|
-
@if str-index($setting, '-')
|
70
|
-
@warn "
|
72
|
+
@if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
|
73
|
+
@warn "Words in Singularity settings should be spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
|
71
74
|
}
|
72
75
|
$toolkit: map-merge($toolkit, ($setting: $value)) !global;
|
73
76
|
@return true;
|
@@ -77,6 +80,10 @@ $toolkit: () !default;
|
|
77
80
|
$toolkit-change: toolkit-set($setting, $value);
|
78
81
|
}
|
79
82
|
|
83
|
+
@mixin toolkit-set($setting, $value) {
|
84
|
+
$toolkit-change: toolkit-set($setting, $value);
|
85
|
+
}
|
86
|
+
|
80
87
|
//////////////////////////////
|
81
88
|
// Remove Setting
|
82
89
|
//////////////////////////////
|
@@ -39,11 +39,11 @@
|
|
39
39
|
}
|
40
40
|
|
41
41
|
@if unit($height) == "" or unit($height) == "%" {
|
42
|
-
@debug "in triangle #{$height} is not a
|
42
|
+
@debug "in triangle #{$height} is not a compatible unit for height."
|
43
43
|
}
|
44
44
|
|
45
45
|
@if unit($width) == "" or unit($width) == "%" {
|
46
|
-
@debug "in triangle #{$width} is not a
|
46
|
+
@debug "in triangle #{$width} is not a compatible unit for width."
|
47
47
|
}
|
48
48
|
|
49
49
|
// offset 45deg to make each side start at 0
|
@@ -1,16 +1,28 @@
|
|
1
1
|
// Vertically center anything, literally anything.
|
2
2
|
// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
|
3
|
-
@mixin vertical-center($midpoint: null) {
|
4
|
-
|
3
|
+
@mixin vertical-center($midpoint: null, $extend: null) {
|
5
4
|
$midpoint: if($midpoint != null, $midpoint, toolkit-get('vertical midpoint'));
|
5
|
+
$extend: if($extend != null, $extend, toolkit-get('vertical extend'));
|
6
6
|
|
7
|
-
position: relative;
|
8
7
|
top: $midpoint;
|
9
|
-
@
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
8
|
+
@include vertical-center-core($extend);
|
9
|
+
}
|
10
|
+
|
11
|
+
@mixin vertical-center-core($extend: null) {
|
12
|
+
$extend: if($extend != null, $extend, toolkit-get('vertical extend'));
|
13
|
+
@if $extend {
|
14
|
+
@include toolkit-placeholder('vertical center') {
|
15
|
+
@include vertical-center-core($extend: false);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
@else {
|
19
|
+
position: relative;
|
20
|
+
@if mixin-exists(transform) {
|
21
|
+
@include transform(translateY(-50%));
|
22
|
+
} @else {
|
23
|
+
-webkit-transform: translateY(-50%);
|
24
|
+
-ms-transform: translateY(-50%);
|
25
|
+
transform: translateY(-50%);
|
26
|
+
}
|
15
27
|
}
|
16
28
|
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: toolkit
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.0
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sam Richard
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2014-
|
13
|
+
date: 2014-03-14 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: sass
|
@@ -18,29 +18,16 @@ dependencies:
|
|
18
18
|
requirements:
|
19
19
|
- - ~>
|
20
20
|
- !ruby/object:Gem::Version
|
21
|
-
version: 3.3.0
|
21
|
+
version: 3.3.0
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
24
|
version_requirements: !ruby/object:Gem::Requirement
|
25
25
|
requirements:
|
26
26
|
- - ~>
|
27
27
|
- !ruby/object:Gem::Version
|
28
|
-
version: 3.3.0
|
29
|
-
|
30
|
-
|
31
|
-
requirement: !ruby/object:Gem::Requirement
|
32
|
-
requirements:
|
33
|
-
- - ~>
|
34
|
-
- !ruby/object:Gem::Version
|
35
|
-
version: 1.0.0.alpha.17
|
36
|
-
type: :runtime
|
37
|
-
prerelease: false
|
38
|
-
version_requirements: !ruby/object:Gem::Requirement
|
39
|
-
requirements:
|
40
|
-
- - ~>
|
41
|
-
- !ruby/object:Gem::Version
|
42
|
-
version: 1.0.0.alpha.17
|
43
|
-
description: Toolkit for Progressive Enhancement and Responsive Web Design
|
28
|
+
version: 3.3.0
|
29
|
+
description: Toolkit full of bits and bobs of awesome aimed at assisting in advanced
|
30
|
+
styling with Sass
|
44
31
|
email:
|
45
32
|
- sam@snug.ug
|
46
33
|
- scott@scottkellum.com
|
@@ -53,24 +40,21 @@ files:
|
|
53
40
|
- stylesheets/_toolkit.scss
|
54
41
|
- stylesheets/toolkit/_clearfix.scss
|
55
42
|
- stylesheets/toolkit/_colors.scss
|
56
|
-
- stylesheets/toolkit/_element-query.scss
|
57
43
|
- stylesheets/toolkit/_fonts.scss
|
58
44
|
- stylesheets/toolkit/_intrinsic-ratio.scss
|
59
45
|
- stylesheets/toolkit/_kickstart.scss
|
60
46
|
- stylesheets/toolkit/_nested-context.scss
|
61
47
|
- stylesheets/toolkit/_parallax.scss
|
62
|
-
- stylesheets/toolkit/
|
63
|
-
- stylesheets/toolkit/
|
64
|
-
- stylesheets/toolkit/_selectors.scss
|
48
|
+
- stylesheets/toolkit/_placeholders.scss
|
49
|
+
- stylesheets/toolkit/_rtl.scss
|
65
50
|
- stylesheets/toolkit/_settings.scss
|
66
51
|
- stylesheets/toolkit/_triangle.scss
|
67
52
|
- stylesheets/toolkit/_vertical-center.scss
|
68
53
|
- stylesheets/toolkit/_viewport.scss
|
69
|
-
- LICENSE.txt
|
70
54
|
homepage: https://github.com/Snugug/toolkit
|
71
55
|
licenses:
|
72
56
|
- MIT
|
73
|
-
- GPL
|
57
|
+
- GPL-2.0
|
74
58
|
metadata: {}
|
75
59
|
post_install_message:
|
76
60
|
rdoc_options: []
|
@@ -91,5 +75,5 @@ rubyforge_project: toolkit
|
|
91
75
|
rubygems_version: 2.0.3
|
92
76
|
signing_key:
|
93
77
|
specification_version: 4
|
94
|
-
summary:
|
78
|
+
summary: Toolkit of awesome Sass stuff
|
95
79
|
test_files: []
|
data/LICENSE.txt
DELETED
@@ -1,27 +0,0 @@
|
|
1
|
-
Toolkit is dual licensed under the MIT and GPL licenses:
|
2
|
-
|
3
|
-
GPL license: http://www.gnu.org/licenses/gpl.html
|
4
|
-
|
5
|
-
MIT license: http://www.opensource.org/licenses/mit-license.php
|
6
|
-
|
7
|
-
Hammer.js License:
|
8
|
-
|
9
|
-
Copyright (C) 2011 by Jorik Tangelder (Eight Media)
|
10
|
-
|
11
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
12
|
-
of this software and associated documentation files (the "Software"), to deal
|
13
|
-
in the Software without restriction, including without limitation the rights
|
14
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
15
|
-
copies of the Software, and to permit persons to whom the Software is
|
16
|
-
furnished to do so, subject to the following conditions:
|
17
|
-
|
18
|
-
The above copyright notice and this permission notice shall be included in
|
19
|
-
all copies or substantial portions of the Software.
|
20
|
-
|
21
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
22
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
23
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
24
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
25
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
26
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
27
|
-
THE SOFTWARE.
|
@@ -1,25 +0,0 @@
|
|
1
|
-
//////////////////////////////
|
2
|
-
// Element Query
|
3
|
-
//
|
4
|
-
// Mixin as described by Filament Group
|
5
|
-
// http://filamentgroup.com/lab/element_query_workarounds/
|
6
|
-
//////////////////////////////
|
7
|
-
|
8
|
-
@mixin element-query($sizes...) {
|
9
|
-
@each $selector, $query in $sizes {
|
10
|
-
@if mixin-exists(breakpoint) {
|
11
|
-
@include breakpoint($query) {
|
12
|
-
#{$selector} & {
|
13
|
-
@content;
|
14
|
-
}
|
15
|
-
}
|
16
|
-
}
|
17
|
-
@else {
|
18
|
-
@media #{$query} {
|
19
|
-
#{$selector} & {
|
20
|
-
@content;
|
21
|
-
}
|
22
|
-
}
|
23
|
-
}
|
24
|
-
}
|
25
|
-
}
|
@@ -1,69 +0,0 @@
|
|
1
|
-
////////////////////////
|
2
|
-
// Enhance From
|
3
|
-
//
|
4
|
-
// - $feature: Modernizr feature (base CSS class name)
|
5
|
-
////////////////////////
|
6
|
-
@mixin enhance-with($features, $extend: null) {
|
7
|
-
$extend: if($extend != null, $extend, toolkit-get('enhance with extend'));
|
8
|
-
|
9
|
-
@if $extend {
|
10
|
-
$uid: unique-id();
|
11
|
-
@at-root %#{$uid} {
|
12
|
-
@content;
|
13
|
-
}
|
14
|
-
@each $feature in $features {
|
15
|
-
.#{$feature} & {
|
16
|
-
@extend %#{$uid};
|
17
|
-
}
|
18
|
-
}
|
19
|
-
}
|
20
|
-
@else {
|
21
|
-
@each $feature in $features {
|
22
|
-
.#{$feature} & {
|
23
|
-
@content;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
}
|
27
|
-
}
|
28
|
-
|
29
|
-
////////////////////////
|
30
|
-
// Degrade From
|
31
|
-
//
|
32
|
-
// - $feature: Modernizr feature (base CSS class name)
|
33
|
-
////////////////////////
|
34
|
-
@mixin degrade-from($features, $no-js: null, $extend: null) {
|
35
|
-
$no-js: if($no-js != null, $no-js, toolkit-get('degrade from javascript'));
|
36
|
-
$extend: if($extend != null, $extend, toolkit-get('degrade from extend'));
|
37
|
-
|
38
|
-
@if $extend {
|
39
|
-
$uid: unique-id();
|
40
|
-
@at-root %#{$uid} {
|
41
|
-
@content;
|
42
|
-
}
|
43
|
-
|
44
|
-
@each $feature in $features {
|
45
|
-
.no-#{$feature} & {
|
46
|
-
@extend %#{$uid};
|
47
|
-
}
|
48
|
-
}
|
49
|
-
|
50
|
-
@if not index($features, 'js') and $no-js != true {
|
51
|
-
.no-js & {
|
52
|
-
@extend %#{$uid};
|
53
|
-
}
|
54
|
-
}
|
55
|
-
}
|
56
|
-
@else {
|
57
|
-
@each $feature in $features {
|
58
|
-
.no-#{$feature} & {
|
59
|
-
@content;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
@if not index($features, 'js') and $no-js != true {
|
64
|
-
.no-js & {
|
65
|
-
@content;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
@@ -1,92 +0,0 @@
|
|
1
|
-
//////////////////////////////
|
2
|
-
// Attribute Selector
|
3
|
-
//////////////////////////////
|
4
|
-
|
5
|
-
@mixin style-attribute($attribute, $selector, $value, $sibling: '') {
|
6
|
-
$select: false;
|
7
|
-
|
8
|
-
@if $selector == 'equals' {
|
9
|
-
$select: '=';
|
10
|
-
}
|
11
|
-
@else if $selector == 'contains' {
|
12
|
-
$select: '*=';
|
13
|
-
}
|
14
|
-
@else if $selector == 'begins with' {
|
15
|
-
$select: '^=';
|
16
|
-
}
|
17
|
-
@else if $selector == 'ends with' {
|
18
|
-
$select: '$=';
|
19
|
-
}
|
20
|
-
@else if $selector == 'within spaced list' {
|
21
|
-
$select: '~=';
|
22
|
-
}
|
23
|
-
@else if $selector == 'within dashed list' {
|
24
|
-
$select: '|=';
|
25
|
-
}
|
26
|
-
|
27
|
-
@if $select {
|
28
|
-
#{$sibling}[#{$attribute}#{$select}"#{$value}"] {
|
29
|
-
@content;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
@else {
|
33
|
-
@warn '"#{$selector}" is not a valid use of CSS Attribute Selectors';
|
34
|
-
}
|
35
|
-
}
|
36
|
-
|
37
|
-
//////////////////////////////
|
38
|
-
// External Link Selectors
|
39
|
-
//////////////////////////////
|
40
|
-
@mixin style-external-links($base-url: false, $scheme: 'all') {
|
41
|
-
@if $base-url {
|
42
|
-
@if $scheme == 'plain' {
|
43
|
-
a[href^="http://"][href*="#{$base-url}"] {
|
44
|
-
@content;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
@else if $scheme == 'secure' {
|
48
|
-
a[href^="https://"][href*="#{$base-url}"] {
|
49
|
-
@content;
|
50
|
-
}
|
51
|
-
}
|
52
|
-
@else if $scheme == 'all' {
|
53
|
-
a[href^="http"][href*="#{$base-url}"] {
|
54
|
-
@content;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
@else {
|
59
|
-
@if $scheme == 'all' {
|
60
|
-
a[href^="http"] {
|
61
|
-
@content;
|
62
|
-
}
|
63
|
-
}
|
64
|
-
@else if $scheme == 'plain' {
|
65
|
-
a[href^="http://"] {
|
66
|
-
@content;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
@else if $scheme == 'secure' {
|
70
|
-
a[href^="https://"] {
|
71
|
-
@content;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}
|
75
|
-
}
|
76
|
-
|
77
|
-
$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8 !default;
|
78
|
-
|
79
|
-
//////////////////////////////
|
80
|
-
// Syle Internal Links
|
81
|
-
//////////////////////////////
|
82
|
-
@mixin style-internal-links {
|
83
|
-
@if $legacy-support-for-ie {
|
84
|
-
a {
|
85
|
-
@content;
|
86
|
-
}
|
87
|
-
}
|
88
|
-
a:not([href^='http://']),
|
89
|
-
a:not([href^='https://']) {
|
90
|
-
@content;
|
91
|
-
}
|
92
|
-
}
|