seasons 0.9.3.beta12 → 0.9.3.beta13
Sign up to get free protection for your applications and to get access to all the features.
- data/seasons.gemspec +2 -6
- data/stylesheets/seasons/_core.sass +3 -3
- data/stylesheets/seasons/_tools.sass +0 -4
- data/stylesheets/seasons/plugin/_mobile.sass +57 -54
- data/stylesheets/seasons/tools/_css3.sass +28 -4
- data/stylesheets/seasons/tools/_reset.sass +2 -1
- data/templates/project/_config.sass +7 -23
- metadata +2 -6
- data/stylesheets/seasons/tools/_color-schemer.sass +0 -180
- data/stylesheets/seasons/tools/_flexbox.sass +0 -65
- data/stylesheets/seasons/tools/_math.scss +0 -275
- data/stylesheets/seasons/tools/_modular-scale.sass +0 -313
data/seasons.gemspec
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
Gem::Specification.new do |s|
|
4
4
|
s.name = %q{seasons}
|
5
|
-
s.version = "0.9.3.
|
5
|
+
s.version = "0.9.3.beta13"
|
6
6
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
8
8
|
s.authors = ["Scott Kellum"]
|
@@ -16,12 +16,8 @@ Gem::Specification.new do |s|
|
|
16
16
|
"stylesheets/seasons/_core.sass",
|
17
17
|
"stylesheets/seasons/_tools.sass",
|
18
18
|
"stylesheets/seasons/tools/_basic-functions.sass",
|
19
|
-
"stylesheets/seasons/tools/_color-schemer.sass",
|
20
19
|
"stylesheets/seasons/tools/_css3.sass",
|
21
|
-
"stylesheets/seasons/tools/_flexbox.sass",
|
22
20
|
"stylesheets/seasons/tools/_grid-tools.sass",
|
23
|
-
"stylesheets/seasons/tools/_math.scss",
|
24
|
-
"stylesheets/seasons/tools/_modular-scale.sass",
|
25
21
|
"stylesheets/seasons/tools/_relative-pixels.sass",
|
26
22
|
"stylesheets/seasons/tools/_reset.sass",
|
27
23
|
"stylesheets/seasons/plugin/_ad.sass",
|
@@ -47,7 +43,7 @@ Gem::Specification.new do |s|
|
|
47
43
|
s.homepage = %q{http://www.treesaver.net/}
|
48
44
|
s.require_paths = ["lib"]
|
49
45
|
s.rubyforge_project = %q{seasons}
|
50
|
-
s.rubygems_version = %q{
|
46
|
+
s.rubygems_version = %q{1.7.2}
|
51
47
|
s.summary = %q{The Compass variant of the Seasons framework to style Treesaver.}
|
52
48
|
s.add_dependency(%q<compass>, ["~> 0.11"])
|
53
49
|
end
|
@@ -141,14 +141,14 @@ $scroll-support: true !default
|
|
141
141
|
height: 100%
|
142
142
|
padding-bottom: 40px
|
143
143
|
// FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar
|
144
|
-
::-webkit-scrollbar
|
144
|
+
::-webkit-scrollbar, ::-moz-scrollbar, ::scrollbar
|
145
145
|
-webkit-appearance: none
|
146
146
|
width: 6px
|
147
|
-
::-webkit-scrollbar-thumb
|
147
|
+
::-webkit-scrollbar-thumb, ::-moz-scrollbar-thumb, ::scrollbar-thumb
|
148
148
|
border-radius: 3px
|
149
149
|
background-color: rgba(0,0,0,.5)
|
150
150
|
// Make The Scrollbars Smaller On Touch Devices
|
151
|
-
.touch ::-webkit-scrollbar
|
151
|
+
.touch ::-webkit-scrollbar, .touch ::-moz-scrollbar, .touch ::-scrollbar
|
152
152
|
width: 3px
|
153
153
|
|
154
154
|
// TYPOGRAPHY RESET
|
@@ -15,71 +15,74 @@ $cover_width: 250px
|
|
15
15
|
border: none
|
16
16
|
|
17
17
|
// All the mobile grid styles here.
|
18
|
+
|
19
|
+
// SHRINK IMAGES + PAGES
|
20
|
+
=ratio($width, $height, $cols: $columns)
|
21
|
+
// Force resize images
|
22
|
+
.mobile.grid .container [ratio="#{$width}x#{$height}"] img
|
23
|
+
width: 280px
|
24
|
+
height: 280px * ( $height / $width )
|
25
|
+
|
26
|
+
// Detect smallscreen devices
|
27
|
+
//@media screen and (device-width: 480px) and (orientation: landscape), screen and (device-width: 320px) and (orientation: portrait)
|
18
28
|
.smallscreen.mobile
|
19
29
|
.viewer
|
20
|
-
padding: 0
|
21
|
-
margin: 0
|
22
|
-
left: 0
|
23
|
-
right: 0
|
24
|
-
top: 0
|
25
|
-
bottom: 0
|
30
|
+
padding: 0 !important
|
31
|
+
margin: 0 !important
|
32
|
+
left: 0 !important
|
33
|
+
right: 0 !important
|
34
|
+
top: 0 !important
|
35
|
+
bottom: 0 !important
|
26
36
|
background: $page
|
27
|
-
.grid:not(.fixed)
|
37
|
+
.grid:not(.fixed):not(.sizetocontainer):not(.mobile):not(.cover):not(.ad)
|
28
38
|
+remove
|
29
39
|
.mobile.grid
|
30
40
|
opacity: 1 !important
|
31
41
|
margin: 0
|
32
42
|
width: 280px
|
33
43
|
min-width: 280px
|
34
|
-
padding:
|
44
|
+
padding: 18px
|
35
45
|
.column, .container
|
36
46
|
width: 280px
|
37
47
|
min-width: 280px
|
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
|
-
max-height: none
|
78
|
-
min-width: none
|
79
|
-
min-height: none
|
80
|
-
// FALLBACK IMAGES
|
81
|
-
.mobile.grid .keeptogether.fallback img
|
82
|
-
width: 40px
|
83
|
-
height: 40px
|
48
|
+
|
49
|
+
|
50
|
+
// Pull in the ratios defined in the skin
|
51
|
+
+ratios
|
52
|
+
|
53
|
+
// MOBILE COVERS
|
54
|
+
// If you grid is named "cover" it will be resized to be optimized for mobile devices.
|
55
|
+
html.mobile.smallscreen
|
56
|
+
// Large mobile cover
|
57
|
+
.cover.fixed.w3col.grid, .cover.fixed.w3col.grid *
|
58
|
+
margin: 0
|
59
|
+
padding: 0
|
60
|
+
width: $cover_width
|
61
|
+
height: $cover_width * ( 4 / 3 )
|
62
|
+
min-width: $cover_width
|
63
|
+
min-height: $cover_width * ( 4 / 3 )
|
64
|
+
.img
|
65
|
+
top: 0
|
66
|
+
// Small mobile cover
|
67
|
+
.cover.fixed.w2col.grid, .cover.fixed.w2col.grid *
|
68
|
+
margin: 0
|
69
|
+
padding: 0
|
70
|
+
width: $cover_width/2
|
71
|
+
height: $cover_width/2 * ( 4 / 3 )
|
72
|
+
min-width: $cover_width/2
|
73
|
+
min-height: $cover_width/2 * ( 4 / 3 )
|
74
|
+
.img
|
75
|
+
top: 0
|
76
|
+
.cover.grid
|
77
|
+
margin: 0 ( ( $cover_width - 320px ) / 8 )
|
78
|
+
.fixed.grid, .sizetocontainer.grid
|
79
|
+
max-width: none
|
80
|
+
max-height: none
|
81
|
+
min-width: none
|
82
|
+
min-height: none
|
83
|
+
// FALLBACK IMAGES
|
84
|
+
.mobile.grid .keeptogether.fallback img
|
85
|
+
width: 40px
|
86
|
+
height: 40px
|
84
87
|
|
85
88
|
$seasons-mobile-loaded: true
|
@@ -43,20 +43,44 @@ $prefixes: -webkit- -moz- -ms- -o- !default
|
|
43
43
|
=appearance($value)
|
44
44
|
+prefix(appearance, $value)
|
45
45
|
|
46
|
+
=appearance($value)
|
47
|
+
+prefix(appearance, $value)
|
48
|
+
|
49
|
+
=aspect-ratio($value)
|
50
|
+
+prefix(aspect-ratio, $value)
|
51
|
+
|
46
52
|
=backface-visibility($value)
|
47
53
|
+prefix(backface-visibility, $value)
|
48
54
|
|
49
55
|
=background-clip($value)
|
50
|
-
+prefix(background-clip, $value)
|
56
|
+
+prefix(background-clip, $value, -webkit-)
|
51
57
|
|
52
58
|
=background-composite($value)
|
53
59
|
+prefix(background-composite, $value)
|
54
60
|
|
61
|
+
=background-inline-policy($value)
|
62
|
+
+prefix(background-inline-policy, $value)
|
63
|
+
|
55
64
|
=background-origin($value)
|
56
|
-
+prefix(background-origin, $value)
|
65
|
+
+prefix(background-origin, $value, -webkit-)
|
66
|
+
|
67
|
+
=background-position-x($value)
|
68
|
+
+prefix(background-position-x, $value, -ms-)
|
69
|
+
|
70
|
+
=background-position-y($value)
|
71
|
+
+prefix(background-position-y, $value, -ms-)
|
57
72
|
|
58
73
|
=background-size($value)
|
59
|
-
+prefix(background-size, $value)
|
74
|
+
+prefix(background-size, $value, -webkit-)
|
75
|
+
|
76
|
+
=behavior($value)
|
77
|
+
+prefix(behavior, $value)
|
78
|
+
|
79
|
+
=binding($value)
|
80
|
+
+prefix(binding, $value)
|
81
|
+
|
82
|
+
=block-progression($value)
|
83
|
+
+prefix(block-progression, $value)
|
60
84
|
|
61
85
|
=border-after($value)
|
62
86
|
+prefix(border-after, $value)
|
@@ -491,7 +515,7 @@ $prefixes: -webkit- -moz- -ms- -o- !default
|
|
491
515
|
// OTHER CSS3 TOOLS
|
492
516
|
=corner-radius($top, $left, $borderradius)
|
493
517
|
-moz-border-radius-#{$top}#{$left}: $borderradius
|
494
|
-
|
518
|
+
border-#{$top}-#{$left}-radius: $borderradius
|
495
519
|
-o-border-#{$top}-#{$left}-radius: $borderradius
|
496
520
|
border-#{$top}-#{$left}-radius: $borderradius
|
497
521
|
|
@@ -8,11 +8,12 @@ $reset: true !default
|
|
8
8
|
// HTML5 Doctor...................http://html5doctor.com
|
9
9
|
// and the HTML5 Boilerplate......http://html5boilerplate.com
|
10
10
|
|
11
|
-
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video
|
11
|
+
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, button
|
12
12
|
margin: 0
|
13
13
|
padding: 0
|
14
14
|
border: 0
|
15
15
|
outline: 0
|
16
|
+
font-size: 1em
|
16
17
|
vertical-align: baseline
|
17
18
|
background: transparent
|
18
19
|
cursor: default
|
@@ -4,41 +4,25 @@
|
|
4
4
|
// This must be a fixed unit of measurement, usually correlating to your text size.
|
5
5
|
$base-size: 16px
|
6
6
|
|
7
|
-
// RATIO
|
8
|
-
// Choose a ratio you wish to use with the modular scale, not nessisary if you don't plan on using modular scales.
|
9
|
-
$ratio: $fourth
|
10
|
-
|
11
7
|
// FONT-SIZE
|
12
8
|
$size: 1em
|
13
9
|
|
14
10
|
// LINE HEIGHT
|
15
11
|
// Basing the modular scale off of ems for this. ms(n) refers to the position on a built-in modular scale where "n" is the position. However you can use any value you like.
|
16
|
-
$line-height:
|
12
|
+
$line-height: 1.5em
|
17
13
|
|
18
14
|
// GRID MEASUREMENTS
|
19
15
|
// Grid module measurements. See Mark Boulton’s write up on grids http://www.markboulton.co.uk/journal/comments/rethinking-css-grids
|
20
|
-
$module-w:
|
21
|
-
$module-h:
|
22
|
-
$gutter:
|
16
|
+
$module-w: 4.5em // module width
|
17
|
+
$module-h: $module-w // module height
|
18
|
+
$gutter: 1.5em // gutters
|
23
19
|
// grid margins:
|
24
|
-
$margin:
|
25
|
-
$top:
|
26
|
-
$bottom:
|
20
|
+
$margin: $gutter // side margins
|
21
|
+
$top: 2em // default top margin (for text and containers)
|
22
|
+
$bottom: 3em // default bottom margin (for text and containers)
|
27
23
|
// number of modules across to calculate:
|
28
24
|
$columns: 12 // # of columns you want to calculate for
|
29
25
|
|
30
|
-
// COLORS
|
31
|
-
// calculated by a built in color schemer, write your own color schemes as you wish.
|
32
|
-
$base-color: #237ADE // base or primary color
|
33
|
-
$color-scheme: analogic // complement, triad, tetrad, analogic or accented-analogic
|
34
|
-
$color-angle: 30 // color offset ammount.
|
35
|
-
|
36
|
-
// Output of color scemer, set to your own values if you want.
|
37
|
-
$primary: color-schemer(primary)
|
38
|
-
$secondary: color-schemer(secondary)
|
39
|
-
$tertiary: color-schemer(tertiary)
|
40
|
-
$quadrary: color-schemer(quadrary)
|
41
|
-
|
42
26
|
$text: #333
|
43
27
|
$page: #fff
|
44
28
|
$body: #666
|
metadata
CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
|
|
6
6
|
- 0
|
7
7
|
- 9
|
8
8
|
- 3
|
9
|
-
-
|
10
|
-
version: 0.9.3.
|
9
|
+
- beta13
|
10
|
+
version: 0.9.3.beta13
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Scott Kellum
|
@@ -46,12 +46,8 @@ files:
|
|
46
46
|
- stylesheets/seasons/_core.sass
|
47
47
|
- stylesheets/seasons/_tools.sass
|
48
48
|
- stylesheets/seasons/tools/_basic-functions.sass
|
49
|
-
- stylesheets/seasons/tools/_color-schemer.sass
|
50
49
|
- stylesheets/seasons/tools/_css3.sass
|
51
|
-
- stylesheets/seasons/tools/_flexbox.sass
|
52
50
|
- stylesheets/seasons/tools/_grid-tools.sass
|
53
|
-
- stylesheets/seasons/tools/_math.scss
|
54
|
-
- stylesheets/seasons/tools/_modular-scale.sass
|
55
51
|
- stylesheets/seasons/tools/_relative-pixels.sass
|
56
52
|
- stylesheets/seasons/tools/_reset.sass
|
57
53
|
- stylesheets/seasons/plugin/_ad.sass
|
@@ -1,180 +0,0 @@
|
|
1
|
-
// Define color schemes quickly
|
2
|
-
|
3
|
-
// Color schemes to choose from
|
4
|
-
// mono
|
5
|
-
// complement
|
6
|
-
// triad
|
7
|
-
// tetrad
|
8
|
-
// analogic
|
9
|
-
// accented-analogic
|
10
|
-
|
11
|
-
$color-location: primary !default
|
12
|
-
$base-color: #f00 !default
|
13
|
-
$color-scheme: mono !default
|
14
|
-
$hue-offset: 20 !default
|
15
|
-
$brightness-offset: 10% !default
|
16
|
-
$color-theory: rgb !default
|
17
|
-
$equalize: false !default
|
18
|
-
|
19
|
-
// Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
|
20
|
-
@function equalize($color)
|
21
|
-
@return hsl(hue($color), 100%, 50%)
|
22
|
-
|
23
|
-
// Complement based on Claude Boutet's color wheel
|
24
|
-
@function boutet-complement($color)
|
25
|
-
$hue: round(hue($color)/ 10) // find and round hue
|
26
|
-
// Manually adjusted values until these can be mathmatically explained.
|
27
|
-
@if $hue == 0
|
28
|
-
@return adjust-hue(invert($color), -60) // Start with red
|
29
|
-
@if $hue == 1
|
30
|
-
@return adjust-hue(invert($color), -50)
|
31
|
-
@if $hue == 2
|
32
|
-
@return adjust-hue(invert($color), -40)
|
33
|
-
@if $hue == 3
|
34
|
-
@return adjust-hue(invert($color), -25)
|
35
|
-
@if $hue == 4
|
36
|
-
@return adjust-hue(invert($color), 0)
|
37
|
-
@if $hue == 5
|
38
|
-
@return adjust-hue(invert($color), 25)
|
39
|
-
@if $hue == 6
|
40
|
-
@return adjust-hue(invert($color), 38)
|
41
|
-
@if $hue == 7
|
42
|
-
@return adjust-hue(invert($color), 44)
|
43
|
-
@if $hue == 8
|
44
|
-
@return adjust-hue(invert($color), 52)
|
45
|
-
@if $hue == 9
|
46
|
-
@return adjust-hue(invert($color), 58)
|
47
|
-
@if $hue == 10
|
48
|
-
@return adjust-hue(invert($color), 59)
|
49
|
-
@if $hue == 11
|
50
|
-
@return adjust-hue(invert($color), 60)
|
51
|
-
@if $hue == 12
|
52
|
-
@return adjust-hue(invert($color), 60) // Green is halfway through the Boutet scale.
|
53
|
-
@if $hue == 13
|
54
|
-
@return adjust-hue(invert($color), 55)
|
55
|
-
@if $hue == 14
|
56
|
-
@return adjust-hue(invert($color), 50)
|
57
|
-
@if $hue == 15
|
58
|
-
@return adjust-hue(invert($color), 45)
|
59
|
-
@if $hue == 16
|
60
|
-
@return adjust-hue(invert($color), 40)
|
61
|
-
@if $hue == 17
|
62
|
-
@return adjust-hue(invert($color), 35)
|
63
|
-
@if $hue == 18
|
64
|
-
@return adjust-hue(invert($color), 30)
|
65
|
-
@if $hue == 19
|
66
|
-
@return adjust-hue(invert($color), 25)
|
67
|
-
@if $hue == 20
|
68
|
-
@return adjust-hue(invert($color), 20)
|
69
|
-
@if $hue == 21
|
70
|
-
@return adjust-hue(invert($color), 15)
|
71
|
-
@if $hue == 22
|
72
|
-
@return adjust-hue(invert($color), -5)
|
73
|
-
@if $hue == 23
|
74
|
-
@return adjust-hue(invert($color), -8)
|
75
|
-
@if $hue == 24
|
76
|
-
@return adjust-hue(invert($color), -17)
|
77
|
-
@if $hue == 25
|
78
|
-
@return adjust-hue(invert($color), -25)
|
79
|
-
@if $hue == 26
|
80
|
-
@return adjust-hue(invert($color), -30)
|
81
|
-
@if $hue == 27
|
82
|
-
@return adjust-hue(invert($color), -35)
|
83
|
-
@if $hue == 28
|
84
|
-
@return adjust-hue(invert($color), -40)
|
85
|
-
@if $hue == 29
|
86
|
-
@return adjust-hue(invert($color), -43)
|
87
|
-
@if $hue == 30
|
88
|
-
@return adjust-hue(invert($color), -46)
|
89
|
-
@if $hue == 31
|
90
|
-
@return adjust-hue(invert($color), -49)
|
91
|
-
@if $hue == 32
|
92
|
-
@return adjust-hue(invert($color), -52)
|
93
|
-
@if $hue == 33
|
94
|
-
@return adjust-hue(invert($color), -54)
|
95
|
-
@if $hue == 34
|
96
|
-
@return adjust-hue(invert($color), -57)
|
97
|
-
@if $hue == 35
|
98
|
-
@return adjust-hue(invert($color), -60)
|
99
|
-
|
100
|
-
// Add percentage of white to a color
|
101
|
-
@function tint($color, $percent)
|
102
|
-
@return mix(white, $color, $percent)
|
103
|
-
|
104
|
-
// Add percentage of black to a color
|
105
|
-
@function shade($color, $percent)
|
106
|
-
@return mix(black, $color, $percent)
|
107
|
-
|
108
|
-
@function color-schemer($color-location, $base-color, $color-scheme, $hue-offset)
|
109
|
-
// Primary, just return the base-color.
|
110
|
-
@if $equalize
|
111
|
-
$base-color: equalize($base-color)
|
112
|
-
@if $color-location == primary
|
113
|
-
@return $base-color
|
114
|
-
// Secondary colors
|
115
|
-
@if $color-location == secondary
|
116
|
-
@if $color-scheme == mono
|
117
|
-
@return lighten($base-color, $brightness-offset)
|
118
|
-
@if $color-scheme == complement
|
119
|
-
@if $color-theory == boutet
|
120
|
-
@return boutet-complement($base-color)
|
121
|
-
@return complement($base-color)
|
122
|
-
@if $color-scheme == triad
|
123
|
-
@if $color-theory == boutet
|
124
|
-
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
125
|
-
@return adjust-hue(complement($base-color), $hue-offset)
|
126
|
-
@if $color-scheme == tetrad
|
127
|
-
@return adjust-hue($base-color, $hue-offset)
|
128
|
-
@if $color-scheme == analogic
|
129
|
-
@return adjust-hue($base-color, $hue-offset)
|
130
|
-
@if $color-scheme == accented-analogic
|
131
|
-
@return adjust-hue($base-color, $hue-offset)
|
132
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
133
|
-
// Tertiary colors
|
134
|
-
@if $color-location == tertiary
|
135
|
-
@if $color-scheme == mono
|
136
|
-
@return lighten($base-color, $brightness-offset * 2)
|
137
|
-
@if $color-scheme == complement
|
138
|
-
@return lighten($base-color, $brightness-offset)
|
139
|
-
@if $color-scheme == triad
|
140
|
-
@if $color-theory == boutet
|
141
|
-
@return adjust-hue(boutet-complement($base-color), -$hue-offset)
|
142
|
-
@return adjust-hue(complement($base-color), -$hue-offset)
|
143
|
-
@if $color-scheme == tetrad
|
144
|
-
@if $color-theory == boutet
|
145
|
-
@return boutet-complement($base-color)
|
146
|
-
@return complement($base-color)
|
147
|
-
@if $color-scheme == analogic
|
148
|
-
@return adjust-hue($base-color, -$hue-offset)
|
149
|
-
@if $color-scheme == accented-analogic
|
150
|
-
@return adjust-hue($base-color, -$hue-offset)
|
151
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
152
|
-
// Quadrary colors
|
153
|
-
@if $color-location == quadrary
|
154
|
-
@if $color-scheme == mono
|
155
|
-
@return darken($base-color, $brightness-offset)
|
156
|
-
@if $color-scheme == complement
|
157
|
-
@return darken($base-color, $brightness-offset)
|
158
|
-
@if $color-scheme == triad
|
159
|
-
@return darken($base-color, $brightness-offset)
|
160
|
-
@if $color-scheme == tetrad
|
161
|
-
@if $color-theory == boutet
|
162
|
-
@return adjust-hue(boutet-complement($base-color), $hue-offset)
|
163
|
-
@return adjust-hue(complement($base-color), $hue-offset)
|
164
|
-
@if $color-scheme == analogic
|
165
|
-
@return darken($base-color, $brightness-offset)
|
166
|
-
@if $color-scheme == accented-analogic
|
167
|
-
@if $color-theory == boutet
|
168
|
-
@return boutet-complement($base-color)
|
169
|
-
@return complement($base-color)
|
170
|
-
@warn "Oops! You didn’t properly define $color-scheme (complement, triad...)"
|
171
|
-
@warn "Oops! You didn’t properly define $color-location (primary, secondary...)"
|
172
|
-
|
173
|
-
// Write your basic color scheme
|
174
|
-
$primary: color-schemer(primary) !default
|
175
|
-
$secondary: color-schemer(secondary) !default
|
176
|
-
$tertiary: color-schemer(tertiary) !default
|
177
|
-
$quadrary: color-schemer(quadrary) !default
|
178
|
-
|
179
|
-
// Tell other files that this is loaded.
|
180
|
-
$color-schemer-loaded: true
|
@@ -1,65 +0,0 @@
|
|
1
|
-
// Original gist https://gist.github.com/280797
|
2
|
-
|
3
|
-
$prefixes: -webkit- -moz- -ms- -o- !default
|
4
|
-
|
5
|
-
=prefix($property, $value, $prefixes)
|
6
|
-
@each $prefix in $prefixes
|
7
|
-
#{$prefix}#{$property}: $value
|
8
|
-
#{$property}: $value
|
9
|
-
|
10
|
-
=prefix-value($property, $value, $prefixes)
|
11
|
-
@each $prefix in $prefixes
|
12
|
-
#{$property}: #{$prefix}$value
|
13
|
-
#{$property}: $value
|
14
|
-
|
15
|
-
=display-box($property: display-box, $value: box)
|
16
|
-
+prefix-value($property, $value)
|
17
|
-
|
18
|
-
// Value: horizontal | vertical | inline-axis | block-axis | inherit
|
19
|
-
// Initial: inline-axis
|
20
|
-
// Default: horizontal
|
21
|
-
=box-orient($property: box-orient, $value: horizontal)
|
22
|
-
+prefix($property, $value)
|
23
|
-
|
24
|
-
// Value: normal | reverse | inherit
|
25
|
-
// Initial: normal
|
26
|
-
// Default: reverse
|
27
|
-
=box-direction($property: box-direction, $value: reverse)
|
28
|
-
+prefix($property, $value)
|
29
|
-
|
30
|
-
// Value: <integer>
|
31
|
-
// Initial: 1
|
32
|
-
// Default: 2
|
33
|
-
=box-ordinal-group($property: box-ordinal-group, $value: 2)
|
34
|
-
+prefix($property, $value)
|
35
|
-
|
36
|
-
// Value: start | end | center | baseline | stretch
|
37
|
-
// Initial: stretch
|
38
|
-
// Default: start
|
39
|
-
=box-align($property: box-align, $value: start)
|
40
|
-
+prefix($property, $value)
|
41
|
-
|
42
|
-
// Value: <number>
|
43
|
-
// Initial: 0.0
|
44
|
-
// Default: 1
|
45
|
-
=box-flex($property: box-flex, $value: 1)
|
46
|
-
+prefix($property, $value)
|
47
|
-
|
48
|
-
// Value: <integer>
|
49
|
-
// Initial: 1
|
50
|
-
// Default: 2
|
51
|
-
=box-flex-group($property: box-flex-group, $value: 2)
|
52
|
-
+prefix($property, $value)
|
53
|
-
|
54
|
-
// Value: start | end | center | justify
|
55
|
-
// Initial: start
|
56
|
-
// Default: center
|
57
|
-
=box-pack($property: box-pack, $value: center)
|
58
|
-
+prefix($property, $value)
|
59
|
-
|
60
|
-
// I don't see this working in any browser currently...
|
61
|
-
// Value: single | multiple
|
62
|
-
// Initial: single
|
63
|
-
// Default: multiple
|
64
|
-
=box-lines($property: box-lines, $value: multiple)
|
65
|
-
+prefix($property, $value)
|
@@ -1,275 +0,0 @@
|
|
1
|
-
// SASSY MATH
|
2
|
-
|
3
|
-
@charset "UTF-8";
|
4
|
-
|
5
|
-
//////////////////////////////
|
6
|
-
// Variables
|
7
|
-
//////////////////////////////
|
8
|
-
$pi: 3.1415926535897932384626433832795028841971693993751;
|
9
|
-
$π: $pi;
|
10
|
-
$e: 2.71828182845904523536028747135266249775724709369995;
|
11
|
-
|
12
|
-
$iter: 50;
|
13
|
-
|
14
|
-
//////////////////////////////
|
15
|
-
// Random Number
|
16
|
-
// Working from http://xkcd.com/221/
|
17
|
-
// Chosen by fair dice roll.
|
18
|
-
// Guarenteed to be random.
|
19
|
-
//////////////////////////////
|
20
|
-
@function rand() {
|
21
|
-
@return 4;
|
22
|
-
}
|
23
|
-
|
24
|
-
//////////////////////////////
|
25
|
-
// Percent
|
26
|
-
//////////////////////////////
|
27
|
-
@function percent($number) {
|
28
|
-
@return $number * 0.01;
|
29
|
-
}
|
30
|
-
|
31
|
-
//////////////////////////////
|
32
|
-
// Golden Ratio
|
33
|
-
//////////////////////////////
|
34
|
-
@function golden() {
|
35
|
-
@return 1/2 + sqrt(5) / 2;
|
36
|
-
}
|
37
|
-
@function ϕ() {
|
38
|
-
@return golden();
|
39
|
-
}
|
40
|
-
|
41
|
-
$golden: golden();
|
42
|
-
$gold: $golden;
|
43
|
-
$ϕ: $golden;
|
44
|
-
|
45
|
-
//////////////////////////////
|
46
|
-
// Exponent
|
47
|
-
//////////////////////////////
|
48
|
-
@function exponent($base, $exponent) {
|
49
|
-
// reset value
|
50
|
-
$value: $base;
|
51
|
-
// positive intergers get multiplied
|
52
|
-
@if $exponent > 1 {
|
53
|
-
@for $i from 2 through $exponent {
|
54
|
-
$value: $value * $base; } }
|
55
|
-
// negitive intergers get divided. A number divided by itself is 1
|
56
|
-
@if $exponent < 1 {
|
57
|
-
@for $i from 0 through -$exponent {
|
58
|
-
$value: $value / $base; } }
|
59
|
-
// return the last value written
|
60
|
-
@return $value;
|
61
|
-
}
|
62
|
-
|
63
|
-
@function pow($base, $exponent) {
|
64
|
-
@return exponent($base, $exponent);
|
65
|
-
}
|
66
|
-
|
67
|
-
//////////////////////////////
|
68
|
-
// Factorial
|
69
|
-
//////////////////////////////
|
70
|
-
@function factorial($number) {
|
71
|
-
// reset value
|
72
|
-
$value: 1;
|
73
|
-
// positive intergers get multiplied
|
74
|
-
@if $number > 0 {
|
75
|
-
@for $i from 1 through $number {
|
76
|
-
$value: $value * $i;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
@return $value;
|
80
|
-
}
|
81
|
-
|
82
|
-
@function fact($number) {
|
83
|
-
@return factorial($number);
|
84
|
-
}
|
85
|
-
|
86
|
-
|
87
|
-
//////////////////////////////
|
88
|
-
// Polynomial Approximation
|
89
|
-
//////////////////////////////
|
90
|
-
// Maclaurin series can be used to estimate Sine and Consine
|
91
|
-
@function maclaurin($start, $key, $number) {
|
92
|
-
$value: $start;
|
93
|
-
$add: 0;
|
94
|
-
|
95
|
-
@for $i from 1 through $iter {
|
96
|
-
@if $add == 0 {
|
97
|
-
$value: $value - ( exponent($number, $key) / factorial($key) );
|
98
|
-
$add: 1;
|
99
|
-
}
|
100
|
-
@else {
|
101
|
-
$value: $value + ( exponent($number, $key) / factorial($key) );
|
102
|
-
$add: 0;
|
103
|
-
}
|
104
|
-
|
105
|
-
$key: $key + 2;
|
106
|
-
}
|
107
|
-
|
108
|
-
@return $value;
|
109
|
-
}
|
110
|
-
// Taylor series can be used to estiamte ln
|
111
|
-
@function taylor($number) {
|
112
|
-
@return taylor;
|
113
|
-
}
|
114
|
-
|
115
|
-
//////////////////////////////
|
116
|
-
// Basic Trig Functions
|
117
|
-
//////////////////////////////
|
118
|
-
@function sin($number, $unit: 'deg') {
|
119
|
-
@if $unit == 'deg' {
|
120
|
-
$number: deg-to-rad($number);
|
121
|
-
}
|
122
|
-
@return maclaurin($number, 3, $number);
|
123
|
-
}
|
124
|
-
|
125
|
-
@function cos($number, $unit: 'deg') {
|
126
|
-
@if $unit == 'deg' {
|
127
|
-
$number: deg-to-rad($number);
|
128
|
-
}
|
129
|
-
@return maclaurin(1, 2, $number);
|
130
|
-
}
|
131
|
-
|
132
|
-
// Trig Identity: Tangent = Sine divided by Cosine.
|
133
|
-
@function tan($number, $unit: 'deg') {
|
134
|
-
@if $unit == 'deg' {
|
135
|
-
$number: deg-to-rad($number);
|
136
|
-
}
|
137
|
-
@return sin($number) / cos($number);
|
138
|
-
}
|
139
|
-
|
140
|
-
//////////////////////////////
|
141
|
-
// Reciprocal Trig Functions
|
142
|
-
//////////////////////////////
|
143
|
-
@function csc($number, $unit: 'deg') {
|
144
|
-
@if $unit == 'deg' {
|
145
|
-
$number: deg-to-rad($number);
|
146
|
-
}
|
147
|
-
@return 1 / sin($number);
|
148
|
-
}
|
149
|
-
|
150
|
-
@function scs($number, $unit: 'deg') {
|
151
|
-
@if $unit == 'deg' {
|
152
|
-
$number: deg-to-rad($number);
|
153
|
-
}
|
154
|
-
@return 1 / cos($number);
|
155
|
-
}
|
156
|
-
|
157
|
-
@function cot($number, $unit: 'deg') {
|
158
|
-
@if $unit == 'deg' {
|
159
|
-
$number: deg-to-rad($number);
|
160
|
-
}
|
161
|
-
@return 1 / tan($number);
|
162
|
-
}
|
163
|
-
|
164
|
-
//////////////////////////////
|
165
|
-
// Hyperbolic Functions
|
166
|
-
//////////////////////////////
|
167
|
-
@function sinh($number) {
|
168
|
-
$top: exponent($e, (2 * $number)) - 1;
|
169
|
-
$bottom: 2 * exponent($e, $number);
|
170
|
-
@return $top / $bottom;
|
171
|
-
}
|
172
|
-
|
173
|
-
@function cosh($number) {
|
174
|
-
$top: exponent($e, (2 * $number)) + 1;
|
175
|
-
$bottom: 2 * exponent($e, $number);
|
176
|
-
@return $top / $bottom;
|
177
|
-
}
|
178
|
-
|
179
|
-
@function tanh($number) {
|
180
|
-
$top: exponent($e, (2 * $number)) - 1;
|
181
|
-
$bottom: exponent($e, (2 * $number)) + 1;
|
182
|
-
@return $top / $bottom;
|
183
|
-
}
|
184
|
-
|
185
|
-
//////////////////////////////
|
186
|
-
// Reciprocal Hyperbolic Functions
|
187
|
-
//////////////////////////////
|
188
|
-
@function csch($number) {
|
189
|
-
@return 1 / sinh($number);
|
190
|
-
}
|
191
|
-
|
192
|
-
@function sech($number) {
|
193
|
-
@return 1 / cosh($number);
|
194
|
-
}
|
195
|
-
|
196
|
-
@function coth($number) {
|
197
|
-
@return 1/ tanh($number);
|
198
|
-
}
|
199
|
-
|
200
|
-
|
201
|
-
@function log($number) {
|
202
|
-
@return $number;
|
203
|
-
}
|
204
|
-
|
205
|
-
@function ln($number) {
|
206
|
-
@if $number > 0 and $number < 1 {
|
207
|
-
$value: 0;
|
208
|
-
@for $i from 1 through $iter {
|
209
|
-
$value: $value + ( pow(-1, $i) * pow(-1 * (1 - $number), $i)) / $i;
|
210
|
-
}
|
211
|
-
$value: -1 * $value;
|
212
|
-
|
213
|
-
@return $value;
|
214
|
-
}
|
215
|
-
@else if $number == 1 {
|
216
|
-
@return 0;
|
217
|
-
}
|
218
|
-
@else {
|
219
|
-
@return ERROR;
|
220
|
-
@warn ln input must be greater than zero and less than or equal to 1;
|
221
|
-
}
|
222
|
-
}
|
223
|
-
|
224
|
-
|
225
|
-
//////////////////////////////
|
226
|
-
// Degree/Radian Conversion
|
227
|
-
//////////////////////////////
|
228
|
-
@function deg-to-rad($number) {
|
229
|
-
@return $number * $pi / 180deg;
|
230
|
-
}
|
231
|
-
|
232
|
-
@function rad-to-deg($number) {
|
233
|
-
@return $number * 180deg / $pi;
|
234
|
-
}
|
235
|
-
|
236
|
-
//////////////////////////////
|
237
|
-
// Root Functions
|
238
|
-
//////////////////////////////
|
239
|
-
// Basic General-Purpose Root Function
|
240
|
-
@function n-root($number, $n) {
|
241
|
-
@if $number < 1 {
|
242
|
-
@return ERROR;
|
243
|
-
@warn ROOT ERROR;
|
244
|
-
}
|
245
|
-
// If a whole number, generate it quickly
|
246
|
-
@for $i from 1 through $number {
|
247
|
-
@if exponent($i, $n) == $number {
|
248
|
-
@return $i;
|
249
|
-
}
|
250
|
-
}
|
251
|
-
// Else, run through other options
|
252
|
-
@for $i from 1 through $number * 1000 / 2 {
|
253
|
-
@if round(exponent($i / 1000, $n) * 100) == round($number * 100) {
|
254
|
-
@return $i / 1000;
|
255
|
-
}
|
256
|
-
}
|
257
|
-
}
|
258
|
-
|
259
|
-
@function root($number, $n) {
|
260
|
-
@return n-root($number, $n);
|
261
|
-
}
|
262
|
-
|
263
|
-
// Square Roots
|
264
|
-
@function √($number) {
|
265
|
-
@return sqrt($number);
|
266
|
-
}
|
267
|
-
|
268
|
-
@function sqrt($number) {
|
269
|
-
$guess: rand();
|
270
|
-
$root: $guess;
|
271
|
-
@for $i from 1 through $iter {
|
272
|
-
$root: $root - (pow($root, 2) - $number) / (2 * $root);
|
273
|
-
}
|
274
|
-
@return $root;
|
275
|
-
}
|
@@ -1,313 +0,0 @@
|
|
1
|
-
// SASSY MODULAR-SCALE
|
2
|
-
// https://github.com/scottkellum/modular-scale
|
3
|
-
|
4
|
-
// Ratios
|
5
|
-
$golden: 1.618
|
6
|
-
$gold: $golden
|
7
|
-
$octave: (2 / 1)
|
8
|
-
$major-seventh: (15 / 8)
|
9
|
-
$minor-seventh: (16 / 9)
|
10
|
-
$major-sixth: (5 / 3)
|
11
|
-
$minor-sixth: (8 / 5)
|
12
|
-
$fifth: (3 / 2)
|
13
|
-
$fourth: (4 / 3)
|
14
|
-
$major-third: (5 / 4)
|
15
|
-
$minor-third: (6 / 5)
|
16
|
-
$major-second: (9 / 8)
|
17
|
-
$minor-second: (16 / 15)
|
18
|
-
|
19
|
-
// Defaults
|
20
|
-
$ratio: $golden !default
|
21
|
-
$base-size: 12px !default
|
22
|
-
$property: font-size !default
|
23
|
-
$class-slug: ms !default
|
24
|
-
|
25
|
-
// Modular Scale function
|
26
|
-
@function modular-scale($multiple, $base-size, $ratio)
|
27
|
-
// return the $base-size if $multiple is zero
|
28
|
-
@if $multiple == 0
|
29
|
-
@if type-of($base-size) == 'list'
|
30
|
-
$base-size: sort-list($base-size)
|
31
|
-
@return nth($base-size, 1)
|
32
|
-
// return just the simple $base-size value if it's not a list
|
33
|
-
@return $base-size
|
34
|
-
|
35
|
-
// if multiple base-sizes are passed in as a list
|
36
|
-
// and multiple ratios are passed in as a list
|
37
|
-
// calculate values in using each base-size / ratio combination
|
38
|
-
@if type-of($base-size) == 'list' and type-of($ratio) == 'list'
|
39
|
-
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px'
|
40
|
-
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
|
41
|
-
@return ms-multibase-multiratio($multiple, $base-size, $ratio)
|
42
|
-
|
43
|
-
// if multiple base-sizes are passed in as a list
|
44
|
-
// calculate values in using each base-size
|
45
|
-
@if type-of($base-size) == 'list' and type-of($ratio) == 'number'
|
46
|
-
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px'
|
47
|
-
@return round(ms-multibase($multiple, $base-size, $ratio))
|
48
|
-
@return ms-multibase($multiple, $base-size, $ratio)
|
49
|
-
|
50
|
-
// if multiple ratios are passed in as a list
|
51
|
-
// calculate values in using each ratio
|
52
|
-
@if type-of($base-size) == 'number' and type-of($ratio) == 'list'
|
53
|
-
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px'
|
54
|
-
@return round(ms-multiratio($multiple, $base-size, $ratio))
|
55
|
-
@return ms-multiratio($multiple, $base-size, $ratio)
|
56
|
-
|
57
|
-
// If there are no lists just run the simple function
|
58
|
-
@if unit(exponent($ratio, $multiple) * $base-size) == 'px'
|
59
|
-
@return round(exponent($ratio, $multiple) * $base-size)
|
60
|
-
@return exponent($ratio, $multiple) * $base-size
|
61
|
-
|
62
|
-
|
63
|
-
// calculate values in using each base-size / ratio combination
|
64
|
-
@function ms-multibase-multiratio($multiple, $base-size, $ratio)
|
65
|
-
// start with an empty list to place all values in
|
66
|
-
$scale-values: ()
|
67
|
-
// make sure base sizes are in ascending order
|
68
|
-
$base-size: sort-list($base-size)
|
69
|
-
// take each base-size in turn
|
70
|
-
$k: 1
|
71
|
-
@while $k <= length($base-size)
|
72
|
-
// add each $base-size to the list except the first
|
73
|
-
@if $k > 1
|
74
|
-
$scale-values: append($scale-values, nth($base-size, $k))
|
75
|
-
// take each ratio in turn
|
76
|
-
$j: 1
|
77
|
-
@while $j <= length($ratio)
|
78
|
-
// reset $modular-scale for each set
|
79
|
-
$modular-scale: nth($base-size, $k)
|
80
|
-
// do the scale for each base-size using this ratio
|
81
|
-
@if $multiple > 0
|
82
|
-
// up $multiple times
|
83
|
-
// and add the result to $scale-values
|
84
|
-
@for $i from 1 through $multiple
|
85
|
-
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
86
|
-
$scale-values: append($scale-values, $modular-scale)
|
87
|
-
// and down until the value is lower than the lowest $base-size
|
88
|
-
// and add the result to $scale-values
|
89
|
-
$i: -1
|
90
|
-
$modular-scale: nth($base-size, $k)
|
91
|
-
@while $modular-scale >= nth($base-size, 1)
|
92
|
-
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
93
|
-
$scale-values: append($scale-values, $modular-scale)
|
94
|
-
$i: $i - 1
|
95
|
-
@if $multiple < 0
|
96
|
-
// do the scale down for each set to below 1px
|
97
|
-
$i: -1
|
98
|
-
$modular-scale: nth($base-size, $k)
|
99
|
-
@while $modular-scale > 1
|
100
|
-
$modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
|
101
|
-
$scale-values: append($scale-values, $modular-scale)
|
102
|
-
$i: $i - 1
|
103
|
-
$j: $j + 1
|
104
|
-
$k: $k + 1
|
105
|
-
// return trimmed and sorted final list
|
106
|
-
@return trim-sort($multiple, $scale-values, $base-size)
|
107
|
-
|
108
|
-
|
109
|
-
// calculate values in using each base-size
|
110
|
-
@function ms-multibase($multiple, $base-size, $ratio)
|
111
|
-
// start with an empty list to place all values in
|
112
|
-
$scale-values: ()
|
113
|
-
// make sure base sizes are in ascending order
|
114
|
-
$base-size: sort-list($base-size)
|
115
|
-
// take each base-size in turn
|
116
|
-
$k: 1
|
117
|
-
@while $k <= length($base-size)
|
118
|
-
// add each $base-size to the list except the first
|
119
|
-
@if $k > 1
|
120
|
-
$scale-values: append($scale-values, nth($base-size, $k))
|
121
|
-
// reset $modular-scale for each set
|
122
|
-
$modular-scale: nth($base-size, $k)
|
123
|
-
// do the scale for each base-size using this ratio
|
124
|
-
@if $multiple > 0
|
125
|
-
// up $multiple times
|
126
|
-
// and add the result to $scale-values
|
127
|
-
@for $i from 1 through $multiple
|
128
|
-
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
129
|
-
$scale-values: append($scale-values, $modular-scale)
|
130
|
-
// and down until the value is lower than the lowest $base-size
|
131
|
-
// and add the result to $scale-values
|
132
|
-
$i: -1
|
133
|
-
$modular-scale: nth($base-size, $k)
|
134
|
-
@while $modular-scale >= nth($base-size, 1)
|
135
|
-
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
136
|
-
$scale-values: append($scale-values, $modular-scale)
|
137
|
-
$i: $i - 1
|
138
|
-
@if $multiple < 0
|
139
|
-
// do the scale down for each set to below 1px
|
140
|
-
$i: -1
|
141
|
-
$modular-scale: nth($base-size, $k)
|
142
|
-
@while $modular-scale > 1
|
143
|
-
$modular-scale: exponent($ratio, $i) * nth($base-size, $k)
|
144
|
-
$scale-values: append($scale-values, $modular-scale)
|
145
|
-
$i: $i - 1
|
146
|
-
$k: $k + 1
|
147
|
-
// return trimmed and sorted final list
|
148
|
-
@return trim-sort($multiple, $scale-values, $base-size)
|
149
|
-
|
150
|
-
|
151
|
-
// calculate values in using each ratio
|
152
|
-
@function ms-multiratio($multiple, $base-size, $ratio)
|
153
|
-
// start with an empty list to place all values in
|
154
|
-
$scale-values: ()
|
155
|
-
// If $multiple is a positive integer (up the scale)
|
156
|
-
@if $multiple > 0
|
157
|
-
// take each ratio in turn
|
158
|
-
$j: 1
|
159
|
-
@while $j <= length($ratio)
|
160
|
-
// reset $modular-scale for each set
|
161
|
-
$modular-scale: $base-size
|
162
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
163
|
-
@for $i from 1 through $multiple
|
164
|
-
$modular-scale: exponent(nth($ratio, $j), $i) * $base-size
|
165
|
-
$scale-values: append($scale-values, $modular-scale)
|
166
|
-
$j: $j + 1
|
167
|
-
// sort acsending
|
168
|
-
$scale-values: sort-list($scale-values)
|
169
|
-
// return the final value using the laced list
|
170
|
-
@return nth($scale-values, $multiple)
|
171
|
-
// If $multiple is a negative integer (down the scale)
|
172
|
-
@if $multiple < 0
|
173
|
-
// take each ratio in turn
|
174
|
-
$j: 1
|
175
|
-
@while $j <= length($ratio)
|
176
|
-
// reset $modular-scale for each set
|
177
|
-
$modular-scale: $base-size
|
178
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
179
|
-
@for $i from 1 through ($multiple * -1)
|
180
|
-
$modular-scale: exponent(nth($ratio, $j), -$i) * $base-size
|
181
|
-
$scale-values: append($scale-values, $modular-scale)
|
182
|
-
$j: $j + 1
|
183
|
-
// sort decending
|
184
|
-
$scale-values: sort-list($scale-values, 'dec')
|
185
|
-
// return the final value using the laced list
|
186
|
-
@return nth($scale-values, $multiple * -1)
|
187
|
-
|
188
|
-
|
189
|
-
// trim and sort the final list
|
190
|
-
@function trim-sort($multiple, $scale-values, $base-size)
|
191
|
-
@if $multiple > 0
|
192
|
-
// trim list so we can count from the lowest $base-size
|
193
|
-
$scale-values: trim-list($scale-values, nth($base-size, 1))
|
194
|
-
// sort acsending
|
195
|
-
$scale-values: sort-list($scale-values)
|
196
|
-
// return the final value using the laced list
|
197
|
-
@return nth($scale-values, $multiple)
|
198
|
-
@else
|
199
|
-
// trim list so we can count from the lowest $base-size
|
200
|
-
$scale-values: trim-list($scale-values, nth($base-size, 1), 'dec')
|
201
|
-
// sort acsending
|
202
|
-
$scale-values: sort-list($scale-values, 'dec')
|
203
|
-
// return the final value using the laced list
|
204
|
-
@return nth($scale-values, -$multiple)
|
205
|
-
|
206
|
-
|
207
|
-
/////////////////////////////////////////////////////////////////////////
|
208
|
-
|
209
|
-
// Shortcut
|
210
|
-
@function ms($multiple, $base-size, $ratio)
|
211
|
-
// Return the value from the Modular Scale function
|
212
|
-
@return modular-scale($multiple, $base-size, $ratio)
|
213
|
-
|
214
|
-
// Mixin
|
215
|
-
// Deprecated. Use the modular-scale() function instead
|
216
|
-
=modular-scale($property, $multiple, $base-size, $ratio)
|
217
|
-
// Print the $property and return the value from the Modular Scale function
|
218
|
-
@warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)"
|
219
|
-
#{$property}: modular-scale($multiple, $base-size, $ratio)
|
220
|
-
|
221
|
-
// Classes Mixin
|
222
|
-
=modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio)
|
223
|
-
// Loop from 0 through the value of $multiple and generate a range of classes
|
224
|
-
@for $i from 0 through $multiple
|
225
|
-
.#{$class-slug}-#{$i}
|
226
|
-
// Print the $property and return the value from the Modular Scale function
|
227
|
-
#{$property}: modular-scale($i, $base-size, $ratio)
|
228
|
-
|
229
|
-
|
230
|
-
/////////////////////////////////////////////////////////////////////////
|
231
|
-
|
232
|
-
|
233
|
-
// Sass exponent support
|
234
|
-
@function exponent($base, $exponent)
|
235
|
-
// reset value
|
236
|
-
$value: $base
|
237
|
-
// positive intergers get multiplied
|
238
|
-
@if $exponent > 1
|
239
|
-
@for $i from 2 through $exponent
|
240
|
-
$value: $value * $base
|
241
|
-
// negitive intergers get divided. A number divided by itself is 1
|
242
|
-
@if $exponent < 1
|
243
|
-
@for $i from 0 through -$exponent
|
244
|
-
$value: $value / $base
|
245
|
-
// return the last value written
|
246
|
-
@return $value
|
247
|
-
|
248
|
-
|
249
|
-
// Sass list sorting support
|
250
|
-
@function sort-list($list, $dir: 'asc')
|
251
|
-
// built-in list sorting in Sass would make this go away.
|
252
|
-
// declare some empty lists to put our new order and temporary values
|
253
|
-
$new-order: ()
|
254
|
-
$temp: ()
|
255
|
-
// fill $temp with the contents of $list
|
256
|
-
$temp: join($temp, $list)
|
257
|
-
// if sorting ascending
|
258
|
-
@if $dir == 'asc'
|
259
|
-
// loop through all values in $list
|
260
|
-
@for $i from 1 through length($list)
|
261
|
-
// impossibly high starter value to compare
|
262
|
-
$low: 1000000
|
263
|
-
// check for lowest value in $temp
|
264
|
-
@for $j from 1 through length($temp)
|
265
|
-
@if nth($temp, $j) < $low
|
266
|
-
$low: nth($temp, $j)
|
267
|
-
// add lowest value to $new-order
|
268
|
-
$new-order: append($new-order, $low)
|
269
|
-
// empty $temp for the next comparison
|
270
|
-
$temp: ()
|
271
|
-
// re-populate $temp with remaining values to sort
|
272
|
-
@for $k from 1 through length($list)
|
273
|
-
@if nth($list, $k) > $low
|
274
|
-
$temp: append($temp, nth($list, $k))
|
275
|
-
@if $dir == 'dec'
|
276
|
-
// loop through all values in $list
|
277
|
-
@for $i from 1 through length($list)
|
278
|
-
// 0 starter value
|
279
|
-
$high: 0
|
280
|
-
// check for highest value in $temp
|
281
|
-
@for $j from 1 through length($temp)
|
282
|
-
@if nth($temp, $j) > $high
|
283
|
-
$high: nth($temp, $j)
|
284
|
-
$new-order: append($new-order, $high)
|
285
|
-
// empty $temp for the next comparison
|
286
|
-
$temp: ()
|
287
|
-
// re-populate $temp with remaining values to sort
|
288
|
-
@for $k from 1 through length($list)
|
289
|
-
@if nth($list, $k) < $high
|
290
|
-
$temp: append($temp, nth($list, $k))
|
291
|
-
@return $new-order
|
292
|
-
|
293
|
-
|
294
|
-
// Sass list trimming support
|
295
|
-
@function trim-list($list, $start, $dir: 'asc')
|
296
|
-
// built-in list trimming in Sass would make this go away.
|
297
|
-
// declare some empty lists to put our trimmed values
|
298
|
-
$trimmed: ()
|
299
|
-
// if sorting ascending
|
300
|
-
@if $dir == 'asc'
|
301
|
-
// loop through all values in $list
|
302
|
-
@for $i from 1 through length($list)
|
303
|
-
@if nth($list, $i) >= $start
|
304
|
-
$trimmed: append($trimmed, nth($list, $i))
|
305
|
-
@if $dir == 'dec'
|
306
|
-
// loop through all values in $list
|
307
|
-
@for $i from 1 through length($list)
|
308
|
-
@if nth($list, $i) <= $start
|
309
|
-
$trimmed: append($trimmed, nth($list, $i))
|
310
|
-
@return $trimmed
|
311
|
-
|
312
|
-
// Other libraries can easily query if this function is avalible
|
313
|
-
$modular-scale-loaded: true
|