toolkit 0.2.2 → 0.2.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.
data/lib/toolkit.rb CHANGED
@@ -2,16 +2,12 @@ require 'compass'
2
2
  require 'susy'
3
3
  require 'respond-to'
4
4
  require 'singularitygs'
5
+ require 'sassy-strings'
5
6
 
6
7
  extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
7
8
  Compass::Frameworks.register('toolkit', :path => extension_path)
8
9
 
9
10
  module Sass::Script::Functions
10
- def str_replace(needle, replace, haystack)
11
- result = haystack.value.gsub(needle.value, replace.value)
12
- Sass::Script::String.new(result)
13
- end
14
-
15
11
  def children_of_ie_nth(input)
16
12
  n = "n"
17
13
  b = ""
@@ -13,6 +13,11 @@
13
13
  ////////////////////////
14
14
  @import 'toolkit/fluid-media';
15
15
 
16
+ ////////////////////////
17
+ // Import Intrinsic Ratio
18
+ ////////////////////////
19
+ @import 'toolkit/intrinsic-ratio';
20
+
16
21
  ////////////////////////
17
22
  // Import Progressive Enhancement
18
23
  ////////////////////////
@@ -4,56 +4,4 @@
4
4
  img, video {
5
5
  max-width: 100%;
6
6
  height: auto;
7
- }
8
-
9
- ////////////////////////
10
- // Fluid Embeds and whatever WITH NO JAVASCIPT!
11
- ////////////////////////
12
- $intrinsic-ratio: 16/9 !default;
13
- $intrinsic-ratio-width: 100% !default;
14
- $intrinsic-ratio-elements: '*' !default;
15
- $intrinsic-ratio-extend: true !default;
16
-
17
- @mixin intrinsic-ratio-parent {
18
- position: relative;
19
- height: 0;
20
- }
21
-
22
- @mixin intrinsic-ratio-child {
23
- display: block;
24
- position: absolute;
25
- width: 100% !important; // Nuke the external styles
26
- height: 100% !important; // Nuke the external styles
27
- top: 0;
28
- margin: 0;
29
- padding: 0;
30
- }
31
-
32
- @mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
33
- @if not $extend {
34
- @include intrinsic-ratio-parent;
35
- }
36
- @else {
37
- @extend %intrinsic-ratio-parent;
38
- }
39
- padding-top: (1 / $ratio) * $width;
40
- width: $width;
41
- @each $element in $elements {
42
- > #{$element} {
43
- @if not $extend {
44
- @include intrinsic-ratio-child;
45
- }
46
- @else {
47
- @extend %intrinsic-ratio-child;
48
- }
49
- }
50
- }
51
- }
52
-
53
- %intrinsic-ratio-parent {
54
- @include intrinsic-ratio-parent;
55
- }
56
-
57
- %intrinsic-ratio-child {
58
- @include intrinsic-ratio-child;
59
7
  }
@@ -0,0 +1,51 @@
1
+ ////////////////////////
2
+ // Fluid Embeds and whatever WITH NO JAVASCIPT!
3
+ ////////////////////////
4
+ $intrinsic-ratio: 16/9 !default;
5
+ $intrinsic-ratio-width: 100% !default;
6
+ $intrinsic-ratio-elements: '> *' !default;
7
+ $intrinsic-ratio-extend: true !default;
8
+
9
+ @mixin intrinsic-ratio-parent {
10
+ position: relative;
11
+ height: 0;
12
+ }
13
+
14
+ @mixin intrinsic-ratio-child {
15
+ display: block;
16
+ position: absolute;
17
+ width: 100% !important; // Nuke the external styles
18
+ height: 100% !important; // Nuke the external styles
19
+ top: 0;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+
24
+ @mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
25
+ @if not $extend {
26
+ @include intrinsic-ratio-parent;
27
+ }
28
+ @else {
29
+ @extend %intrinsic-ratio-parent;
30
+ }
31
+ padding-top: (1 / $ratio) * $width;
32
+ width: $width;
33
+ @each $element in $elements {
34
+ #{$element} {
35
+ @if not $extend {
36
+ @include intrinsic-ratio-child;
37
+ }
38
+ @else {
39
+ @extend %intrinsic-ratio-child;
40
+ }
41
+ }
42
+ }
43
+ }
44
+
45
+ %intrinsic-ratio-parent {
46
+ @include intrinsic-ratio-parent;
47
+ }
48
+
49
+ %intrinsic-ratio-child {
50
+ @include intrinsic-ratio-child;
51
+ }
@@ -39,6 +39,8 @@
39
39
  // - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
40
40
  // - $inline: Whether or not the containing selector is an inline element. Defaults to false.
41
41
  ////////////////////////
42
+ @import "compass/utilities/sprites";
43
+
42
44
  $replace-text-pe-method: 'svg' !default;
43
45
  $replace-text-pe-inline-svg: true !default;
44
46
  $replace-text-pe-with-dimensions: true !default;
metadata CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 2
8
- - 2
9
- version: 0.2.2
8
+ - 3
9
+ version: 0.2.3
10
10
  platform: ruby
11
11
  authors:
12
12
  - Sam Richard
@@ -74,6 +74,19 @@ dependencies:
74
74
  version: 0.0.17
75
75
  type: :runtime
76
76
  version_requirements: *id004
77
+ - !ruby/object:Gem::Dependency
78
+ name: sassy-strings
79
+ prerelease: false
80
+ requirement: &id005 !ruby/object:Gem::Requirement
81
+ requirements:
82
+ - - ">="
83
+ - !ruby/object:Gem::Version
84
+ segments:
85
+ - 0
86
+ - 1
87
+ version: "0.1"
88
+ type: :runtime
89
+ version_requirements: *id005
77
90
  description: Toolkit for Progressive Enhancement and Responsive Web Design
78
91
  email:
79
92
  - sam@snug.ug
@@ -93,6 +106,7 @@ files:
93
106
  - stylesheets/toolkit/_clearfix.scss
94
107
  - stylesheets/toolkit/_colours.scss
95
108
  - stylesheets/toolkit/_fluid-media.scss
109
+ - stylesheets/toolkit/_intrinsic-ratio.scss
96
110
  - stylesheets/toolkit/_pe.scss
97
111
  - stylesheets/toolkit/_selectors.scss
98
112
  - stylesheets/toolkit/_triangle.scss