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.
Files changed (6) hide show
  1. data/lib/toolkit.rb +1 -5
  2. data/stylesheets/_toolkit.scss +5 -0
  3. data/stylesheets/toolkit/_fluid-media.scss +0 -52
  4. data/stylesheets/toolkit/_intrinsic-ratio.scss +51 -0
  5. data/stylesheets/toolkit/_pe.scss +2 -0
  6. metadata +16 -2
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 = ""
data/stylesheets/_toolkit.scss CHANGED
@@ -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
  ////////////////////////
data/stylesheets/toolkit/_fluid-media.scss CHANGED
@@ -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
  }
data/stylesheets/toolkit/_intrinsic-ratio.scss ADDED
@@ -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
+ }
data/stylesheets/toolkit/_pe.scss CHANGED
@@ -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