accoutrement 0.0.1
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/README.md +28 -0
- data/lib/accoutrement.rb +3 -0
- data/stylesheets/_accoutrement.scss +16 -0
- data/stylesheets/accoutrement/_background.scss +116 -0
- data/stylesheets/accoutrement/_color.scss +129 -0
- data/stylesheets/accoutrement/_math.scss +14 -0
- data/stylesheets/accoutrement/_media.scss +72 -0
- data/stylesheets/accoutrement/_pseudo-elements.scss +34 -0
- data/stylesheets/accoutrement/_rhythm.scss +28 -0
- data/stylesheets/accoutrement/_sass-lists.scss +40 -0
- data/stylesheets/accoutrement/_tabs.scss +152 -0
- data/stylesheets/accoutrement/_type.scss +41 -0
- metadata +91 -0
data/README.md
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
# Accoutrement Etc.
|
2
|
+
|
3
|
+
These are just assorted functions and mixins I use on my projects.
|
4
|
+
Maybe some of them will develop in to more legit Things,
|
5
|
+
but for now thye are just normal things.
|
6
|
+
|
7
|
+
If they are documented,
|
8
|
+
that's merely an excercise in good code practice,
|
9
|
+
and doesn't imply that they are useful.
|
10
|
+
|
11
|
+
Some of these things are stolen and re-worked from other projects,
|
12
|
+
notably [toolkit][] by [snugug][] and [canarymason][]
|
13
|
+
who are very smart.
|
14
|
+
|
15
|
+
[toolkit]: https://github.com/Snugug/toolkit
|
16
|
+
[snugug]: https://github.com/Snugug/
|
17
|
+
[canarymason]: https://github.com/canarymason/
|
18
|
+
|
19
|
+
## License
|
20
|
+
|
21
|
+
Copyright © Eric Meyer.
|
22
|
+
|
23
|
+
Original code licensed under MIT/GLPv2
|
24
|
+
Open Source projects used within this project retain their original licenses.
|
25
|
+
|
26
|
+
GPL license: http://www.gnu.org/licenses/gpl.html
|
27
|
+
|
28
|
+
MIT license: http://www.opensource.org/licenses/mit-license.php
|
data/lib/accoutrement.rb
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Helpers
|
3
|
+
|
4
|
+
@import 'accoutrement/math';
|
5
|
+
@import 'accoutrement/sass-lists';
|
6
|
+
@import 'accoutrement/rhythm';
|
7
|
+
@import 'accoutrement/color';
|
8
|
+
@import 'accoutrement/background';
|
9
|
+
@import 'accoutrement/pseudo-elements';
|
10
|
+
@import 'accoutrement/media';
|
11
|
+
@import 'accoutrement/type';
|
12
|
+
|
13
|
+
// ----------------------------------------------------------------------------
|
14
|
+
// Patterns
|
15
|
+
|
16
|
+
@import 'accoutrement/tabs';
|
@@ -0,0 +1,116 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Imports
|
3
|
+
|
4
|
+
@import 'sass-lists';
|
5
|
+
@import 'color';
|
6
|
+
|
7
|
+
// ----------------------------------------------------------------------------
|
8
|
+
// Temporary gradient fixes
|
9
|
+
|
10
|
+
// Return the convert angle or position for a css gradient using either syntax
|
11
|
+
//
|
12
|
+
// convert-gradient-angle($deg)
|
13
|
+
// - $deg : The angle or position to convert.
|
14
|
+
// - Whichever syntax you pass, the other will be returned.
|
15
|
+
@function convert-gradient-angle(
|
16
|
+
$deg
|
17
|
+
) {
|
18
|
+
@if type-of($deg) == 'number' {
|
19
|
+
@return mod(abs($deg - 450), 360deg);
|
20
|
+
} @else {
|
21
|
+
$direction: compact();
|
22
|
+
@if nth($deg,1) == 'to' {
|
23
|
+
@if length($deg) < 2 {
|
24
|
+
$direction: top;
|
25
|
+
@warn "no direction given for 'to'. Using 'to bottom' as default.";
|
26
|
+
} @else { $direction: opposite-position(nth($deg,2)); }
|
27
|
+
@if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
|
28
|
+
} @else {
|
29
|
+
$direction: append($direction, to, space);
|
30
|
+
@each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
|
31
|
+
}
|
32
|
+
@return $direction;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
// Return a linear gradient converted between the old and new syntax
|
37
|
+
//
|
38
|
+
// convert-linear($angle, $details...)
|
39
|
+
// - $angle : The angle or position to be converted.
|
40
|
+
// - $details... : Color-stops and other details that don't require conversion.
|
41
|
+
@function convert-gradient(
|
42
|
+
$angle,
|
43
|
+
$details...
|
44
|
+
) {
|
45
|
+
@return linear-gradient(convert-gradient-angle($angle), $details...);
|
46
|
+
}
|
47
|
+
|
48
|
+
// Create a single gradient background image.
|
49
|
+
// Layered backgrounds require a bit more finess than mixins provide.
|
50
|
+
//
|
51
|
+
// @include gradient-background-image($gradient...)
|
52
|
+
// - $gradient: A list of gradient features (position/angle, color-stops, etc.)
|
53
|
+
@mixin gradient-background-image(
|
54
|
+
$gradient...
|
55
|
+
) {
|
56
|
+
@include background-image(convert-gradient($gradient...));
|
57
|
+
background-image: linear-gradient($gradient...);
|
58
|
+
}
|
59
|
+
|
60
|
+
// ----------------------------------------------------------------------------
|
61
|
+
// Stripes
|
62
|
+
|
63
|
+
// Returns a striped gradient for use anywhere gradients are accepted.
|
64
|
+
//
|
65
|
+
// stripes($position, $colors)
|
66
|
+
// - $position: the starting position or angle of the gradient.
|
67
|
+
// - $colors: a list of all the colors to be used.
|
68
|
+
@function stripes(
|
69
|
+
$position,
|
70
|
+
$colors
|
71
|
+
) {
|
72
|
+
$colors: if(type-of($colors) != 'list', compact($colors), $colors);
|
73
|
+
$gradient: compact();
|
74
|
+
$width: 100% / length($colors);
|
75
|
+
|
76
|
+
@for $i from 1 through length($colors) {
|
77
|
+
$pop: nth($colors,$i);
|
78
|
+
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
|
79
|
+
$gradient: join($gradient, $new, comma);
|
80
|
+
}
|
81
|
+
|
82
|
+
@return linear-gradient($position, $gradient);
|
83
|
+
}
|
84
|
+
|
85
|
+
// ----------------------------------------------------------------------------
|
86
|
+
// Color Palettes
|
87
|
+
|
88
|
+
// Returns a full list of tinted and shaded variations on a color.
|
89
|
+
//
|
90
|
+
// get-palette($color [, $tints, $shades])
|
91
|
+
// - $color : The color that your palette stack will be based around.
|
92
|
+
// - $tints : Optional list of percentage tint amounts.
|
93
|
+
// - $shades : Optional list of percentage shade amounts.
|
94
|
+
@function get-palette(
|
95
|
+
$color,
|
96
|
+
$tints: $default-tints,
|
97
|
+
$shades: $default-shades
|
98
|
+
) {
|
99
|
+
$tint-stack: tint-stack($color, $tints);
|
100
|
+
$shade-stack: shade-stack($color, $shades);
|
101
|
+
@return remove-duplicates(join(reverse($tint-stack), $shade-stack));
|
102
|
+
}
|
103
|
+
|
104
|
+
// Creates a background gradient color palette based on a given color
|
105
|
+
//
|
106
|
+
// palette($color [, $tints, $shades])
|
107
|
+
// - $color : The color that your palette gradient will be based around.
|
108
|
+
// - $tints : Optional list of percentage tint amounts.
|
109
|
+
// - $shades : Optional list of percentage shade amounts.
|
110
|
+
@function palette(
|
111
|
+
$color,
|
112
|
+
$tints: $default-tints,
|
113
|
+
$shades: $default-shades
|
114
|
+
) {
|
115
|
+
@return stripes(left,get-palette($color, $tints, $shades));
|
116
|
+
}
|
@@ -0,0 +1,129 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Color Stacks
|
3
|
+
|
4
|
+
// Set the default mixing intervals for use in color stacks
|
5
|
+
$default-amounts : 20% 40% 60% 70% 80%;
|
6
|
+
$default-tints : $default-amounts;
|
7
|
+
$default-shades : $default-amounts;
|
8
|
+
|
9
|
+
// Returns a list of mixed colors at given intervals
|
10
|
+
// based on two initial source colors.
|
11
|
+
//
|
12
|
+
// color-stack($main, $second [, $amounts])
|
13
|
+
// - $main : The main color this stack is based on.
|
14
|
+
// - $second : The color to be mixed in at varrying amounts.
|
15
|
+
// - $amounts : Optional list of percentage mix intervals;
|
16
|
+
@function color-stack(
|
17
|
+
$main,
|
18
|
+
$second,
|
19
|
+
$amounts: $default-amounts
|
20
|
+
) {
|
21
|
+
$stack: $main;
|
22
|
+
|
23
|
+
@each $amount in $amounts {
|
24
|
+
$stack: join($stack, mix($second, $main, $amount));
|
25
|
+
}
|
26
|
+
|
27
|
+
@return $stack;
|
28
|
+
}
|
29
|
+
|
30
|
+
// Shortcut for returning tint stacks based on a given color.
|
31
|
+
//
|
32
|
+
// tint-stack($color [, $amounts])
|
33
|
+
// - $color : The color to tint.
|
34
|
+
// - $amounts : Optional list of percentage tint amounts.
|
35
|
+
@function tint-stack(
|
36
|
+
$color,
|
37
|
+
$amounts: $default-tints
|
38
|
+
) {
|
39
|
+
@return color-stack($color, #fff, $amounts);
|
40
|
+
}
|
41
|
+
|
42
|
+
// Shortcut for returning shade stacks based on a given color.
|
43
|
+
//
|
44
|
+
// shade-stack($color [, $amounts])
|
45
|
+
// - $color : The color to shade.
|
46
|
+
// - $amounts... : Optional list of percentage shade amounts.
|
47
|
+
@function shade-stack(
|
48
|
+
$color,
|
49
|
+
$amounts: $default-shades
|
50
|
+
) {
|
51
|
+
@return color-stack($color, #000, $amounts);
|
52
|
+
}
|
53
|
+
|
54
|
+
// ---------------------------------------------------------------------------
|
55
|
+
// Managing Colors
|
56
|
+
|
57
|
+
// Returns a given tint or shade of a color,
|
58
|
+
// with options for changing saturation and alpha channels as well.
|
59
|
+
//
|
60
|
+
// color($color [, $alpha, $tints, $shades])
|
61
|
+
// - $color : The color to work from (See "Parsing Colors" detail below)
|
62
|
+
// - $tints : Optional list of percentage tint amounts.
|
63
|
+
// - $shades : Optional list of percentage shade amounts.
|
64
|
+
//
|
65
|
+
// Parsing Colors: $color == $saturation $color $tint-shade
|
66
|
+
// - Any color value will be used as the base color.
|
67
|
+
// - Any percentage preceeding the color will scale saturation.
|
68
|
+
// - Any intiger, percentage, or keyword will change tint/shade:
|
69
|
+
// - Intigers step through your list of tint/shade amounts.
|
70
|
+
// - Percentages are used directly as tint/shade amounts.
|
71
|
+
// - Positive numbers tint, negative numbers scale.
|
72
|
+
// - Keywords light/lighter/lightest & dark/darker/darkest
|
73
|
+
// use the first, middle, and last amounts in a stack.
|
74
|
+
@function color(
|
75
|
+
$color,
|
76
|
+
$alpha: 1,
|
77
|
+
$tints: $default-tints,
|
78
|
+
$shades: $default-shades
|
79
|
+
) {
|
80
|
+
$saturation: false;
|
81
|
+
$light: false;
|
82
|
+
$base: false;
|
83
|
+
$index: 0;
|
84
|
+
|
85
|
+
@each $arg in $color {
|
86
|
+
@if type-of($arg) == 'color' { $base: $arg; }
|
87
|
+
@if type-of($arg) == 'number' {
|
88
|
+
@if unit($arg) != '' {
|
89
|
+
@if $base { $light: $arg; }
|
90
|
+
@else{ $saturation: $arg; }
|
91
|
+
}
|
92
|
+
@else { $index: $arg; }
|
93
|
+
}
|
94
|
+
@if type-of($arg) == 'string' {
|
95
|
+
$tint-length : length($tints);
|
96
|
+
$tint-half : floor($tint-length/2);
|
97
|
+
$shade-length : length($shades);
|
98
|
+
$shade-half : floor($shade-length/2);
|
99
|
+
@if $arg == 'light' { $index: 1; }
|
100
|
+
@if $arg == 'lighter' { $index: if($tint-half < 2, 2, $tint-half); }
|
101
|
+
@if $arg == 'lightest' { $index: $tint-length; }
|
102
|
+
@if $arg == 'dark' { $index: -1; }
|
103
|
+
@if $arg == 'darker' { $index: if($shade-half < 2, -2, - $shade-half); }
|
104
|
+
@if $arg == 'darkest' { $index: - $shade-length; }
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
@if $light and $light != 0 {
|
109
|
+
@if $light > 0 { $base: tint($base,$light); }
|
110
|
+
@else { $base: shade($base,abs($light)); }
|
111
|
+
} @else if $index and $index != 0 {
|
112
|
+
$color-stack: compact();
|
113
|
+
@if $index > 0 {
|
114
|
+
$index: $index + 1;
|
115
|
+
$color-stack: tint-stack($base, $tints);
|
116
|
+
} @else {
|
117
|
+
$index: abs($index) + 1;
|
118
|
+
$color-stack: shade-stack($base, $shades);
|
119
|
+
}
|
120
|
+
@if $index <= length($color-stack) {
|
121
|
+
$base: nth($color-stack,$index);
|
122
|
+
} @else {
|
123
|
+
@warn "You don't have #{$index - 1} colors in this stack";
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
@if $saturation { $base: scale-color($base, $saturation: $saturation); }
|
128
|
+
@return rgba($base, $alpha);
|
129
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Math Functions
|
3
|
+
|
4
|
+
// Return the modulo of two numbers.
|
5
|
+
//
|
6
|
+
// mod($dividend, $divisor)
|
7
|
+
// - $dividend : the sample size.
|
8
|
+
// - $divisor : the full count.
|
9
|
+
@function mod(
|
10
|
+
$dividend,
|
11
|
+
$divisor
|
12
|
+
) {
|
13
|
+
@return $dividend - (floor($dividend/$divisor)*$divisor);
|
14
|
+
}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Fluid Media
|
3
|
+
|
4
|
+
// Default property-value pair for setting fluid width.
|
5
|
+
$default-fluid-width : max-width 100%;
|
6
|
+
|
7
|
+
// Default list of elements for the fluid-media mixin.
|
8
|
+
$default-fluid-elements : 'img, video' !default;
|
9
|
+
|
10
|
+
// Create fluid images and video
|
11
|
+
//
|
12
|
+
// @include fluid-media([$width, $elements])
|
13
|
+
// - $width : Property-value pair for setting fluid width.
|
14
|
+
// - $elements : List of elements for the fluid-media mixin.
|
15
|
+
@mixin fluid-media(
|
16
|
+
$width : $default-fluid-width,
|
17
|
+
$elements : $default-fluid-elements
|
18
|
+
) {
|
19
|
+
$property : max-width;
|
20
|
+
$value : 100%;
|
21
|
+
|
22
|
+
@each $arg in $width {
|
23
|
+
@if type-of($arg) == 'string' { $property: $arg; }
|
24
|
+
@if type-of($arg) == 'number' { $value: $arg; }
|
25
|
+
}
|
26
|
+
|
27
|
+
#{$elements} {
|
28
|
+
#{$property}: $value;
|
29
|
+
height: auto;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
// ----------------------------------------------------------------------------
|
34
|
+
// Fluid Ratios
|
35
|
+
|
36
|
+
// The default fluid ratio.
|
37
|
+
$default-fluid-ratio : 16/9 !default;
|
38
|
+
|
39
|
+
// The default fluid ratio width.
|
40
|
+
$default-fluid-ratio-width : 100% !default;
|
41
|
+
|
42
|
+
// Child elements to keep within the ratio.
|
43
|
+
$default-fluid-ratio-children : '*' !default;
|
44
|
+
|
45
|
+
// Force an element and its children to hold a fluid ratio
|
46
|
+
//
|
47
|
+
// @include fluid-ratio([$ratio, $width, $children])
|
48
|
+
// - $ratio : Ratio e.g. 16/9
|
49
|
+
// - $width : Fluid width
|
50
|
+
// - $children : Child elements to keep within the ratio
|
51
|
+
@mixin fluid-ratio(
|
52
|
+
$ratio : $default-fluid-ratio,
|
53
|
+
$width : $default-fluid-ratio-width,
|
54
|
+
$children : $default-fluid-ratio-children
|
55
|
+
) {
|
56
|
+
position: relative;
|
57
|
+
height: 0;
|
58
|
+
padding-top: (1 / $ratio) * $width;
|
59
|
+
width: $width;
|
60
|
+
|
61
|
+
@if $children {
|
62
|
+
> #{$children} {
|
63
|
+
display: block;
|
64
|
+
position: absolute;
|
65
|
+
width: 100%;
|
66
|
+
height: 100%;
|
67
|
+
top: 0;
|
68
|
+
margin: 0;
|
69
|
+
padding: 0;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Pseudo Elements
|
3
|
+
|
4
|
+
// Add content before an element.
|
5
|
+
//
|
6
|
+
// @include before($content)
|
7
|
+
// $content: The string to add before.
|
8
|
+
@mixin before($content) {
|
9
|
+
&:before {
|
10
|
+
content: $content;
|
11
|
+
@content;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
// Add content after an element.
|
16
|
+
//
|
17
|
+
// @include after($content)
|
18
|
+
// $content: The string to add after.
|
19
|
+
@mixin after($content) {
|
20
|
+
&:after {
|
21
|
+
content: $content;
|
22
|
+
@content;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
|
26
|
+
// Wrap content before and after an element.
|
27
|
+
//
|
28
|
+
// @include wrap($content)
|
29
|
+
// $content: The strings to add before and after.
|
30
|
+
@mixin wrap-content($content: "“" "”") {
|
31
|
+
$content: if(length($content) < 2, $content $content, $content);
|
32
|
+
@include before(nth($content,1)) { @content; };
|
33
|
+
@include after(nth($content,2)) { @content; };
|
34
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Pixels and Rhythms
|
3
|
+
|
4
|
+
// Returns the nearest half-rhythm value for a given pixel length
|
5
|
+
//
|
6
|
+
// px-to-rhythm($px [, $from, $round])
|
7
|
+
// - $px : The pixel value to convert.
|
8
|
+
// - $from : Optional context font-size.
|
9
|
+
// - $round : Optional direction ["up" | "down"] to round the results.
|
10
|
+
@function px-to-rhythm(
|
11
|
+
$px,
|
12
|
+
$from: $base-font-size,
|
13
|
+
$round: up
|
14
|
+
) {
|
15
|
+
$rough: 2 * $px / $base-line-height;
|
16
|
+
$lines: if($round == down, floor($rough) / 2, ceil($rough) / 2);
|
17
|
+
@return rhythm($lines, $from);
|
18
|
+
}
|
19
|
+
|
20
|
+
// Returns the nearest half-rhythm value based on an images height
|
21
|
+
//
|
22
|
+
// rhythm-image($image [, $from, $round])
|
23
|
+
// - $image : The image whos height we will use.
|
24
|
+
// - $from : Optional context font-size.
|
25
|
+
// - $round : Optional direction ["up" | "down"] to round the results.
|
26
|
+
@function rhythm-image($image, $from: $base-font-size, $round: up) {
|
27
|
+
@return px-to-rhythm(image-height($image), $from, $round);
|
28
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Sass List Controls
|
3
|
+
|
4
|
+
// Return a list with items in reverse order.
|
5
|
+
//
|
6
|
+
// reverse($list)
|
7
|
+
// - $list: The list to reverse.
|
8
|
+
@function reverse($list) {
|
9
|
+
$l: length($list);
|
10
|
+
$reverse: compact();
|
11
|
+
@for $i from 0 to $l { $reverse: append($reverse,nth($list,$l - $i)); }
|
12
|
+
@return $reverse;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Return a list with all duplicates removed
|
16
|
+
//
|
17
|
+
// remove-duplicates($list)
|
18
|
+
// - $list: The list to clean up.
|
19
|
+
@function remove-duplicates($list) {
|
20
|
+
$clean: compact();
|
21
|
+
@each $item in $list {
|
22
|
+
@if not index($clean, $item) { $clean: append($clean, $item) }
|
23
|
+
}
|
24
|
+
@return $clean;
|
25
|
+
}
|
26
|
+
|
27
|
+
// Return a list with specific items removed
|
28
|
+
//
|
29
|
+
// remove-duplicates($list, $target)
|
30
|
+
// - $list : The list to filter.
|
31
|
+
// - $target : An item to be removed from the list.
|
32
|
+
@function filter($list, $target) {
|
33
|
+
$clean: compact();
|
34
|
+
@if index($list, $target) {
|
35
|
+
@each $item in $list {
|
36
|
+
$clean: if($item == $target, $clean, append($clean, $item));
|
37
|
+
}
|
38
|
+
} @else { $clean: $list; }
|
39
|
+
@return $clean;
|
40
|
+
}
|
@@ -0,0 +1,152 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// CSS Tabs and Accordion
|
3
|
+
|
4
|
+
// Create tabs with pure css & html.
|
5
|
+
//
|
6
|
+
// # Markup (within a shared container):
|
7
|
+
// 1. radio or checkbox inputs : [id*="SLUG"]
|
8
|
+
// 2. labels for those inpults : [for*="SLUG"]
|
9
|
+
// 3. content for each tab : [class*="SLUG"];
|
10
|
+
//
|
11
|
+
// - The labels and content can be nested,
|
12
|
+
// as long as you pass that nesting information along to the `tabs` mixin.
|
13
|
+
// You can also change the default setting with `$default-nested-selectors`.
|
14
|
+
// - You can also change the selector attributes with the
|
15
|
+
// `$toggle-attribute`, `$title-attribute`, & `$content-attribute` settings.
|
16
|
+
// - By default, we use the ':checked' attribute to know what tabs are active.
|
17
|
+
// You can change that `$default-checked-selector` setting,
|
18
|
+
// or the `$checked` argument in the `tabs` mixin.
|
19
|
+
//
|
20
|
+
// # Styles
|
21
|
+
// 1. hidden content : %hide-tab-content { ... };
|
22
|
+
// 2. visible content : %show-tab-content { ... };
|
23
|
+
// 3. active tab title : %active-tab-title { ... };
|
24
|
+
//
|
25
|
+
// There are some very basic default styles that you can use to get started.
|
26
|
+
// Simply `@include tab-defaults` and see it in action.
|
27
|
+
//
|
28
|
+
// # Tabs Example:
|
29
|
+
//
|
30
|
+
// section.mytabs
|
31
|
+
// input[type="radio"]#first-tab-toggle
|
32
|
+
// input[type="radio"]#second-tab-toggle
|
33
|
+
// input[type="radio"]#third-tab-toggle
|
34
|
+
//
|
35
|
+
// label[for="first-tab-toggle"]
|
36
|
+
// "First Tab"
|
37
|
+
// label[for="second-tab-toggle"]
|
38
|
+
// "Second Tab"
|
39
|
+
// label[for="third-tab-toggle"]
|
40
|
+
// "Third Tab"
|
41
|
+
//
|
42
|
+
// article.first
|
43
|
+
// "Content for the first tab"
|
44
|
+
// article.second
|
45
|
+
// "Content for the first tab"
|
46
|
+
// article.third
|
47
|
+
// "Content for the first tab"
|
48
|
+
//
|
49
|
+
// @include tab-defaults;
|
50
|
+
// @include tabs(first second third);
|
51
|
+
//
|
52
|
+
// # Accordion Example
|
53
|
+
//
|
54
|
+
// section.accordion
|
55
|
+
// input[type="checkbox"]#first-toggle
|
56
|
+
// input[type="checkbox"]#second-toggle
|
57
|
+
// input[type="checkbox"]#third-toggle
|
58
|
+
//
|
59
|
+
// article
|
60
|
+
// label[for="first-toggle"]
|
61
|
+
// "First Section"
|
62
|
+
// div.first
|
63
|
+
// "Content for the first section"
|
64
|
+
//
|
65
|
+
// article
|
66
|
+
// label[for="second-toggle"]
|
67
|
+
// "Second Section"
|
68
|
+
// div.second
|
69
|
+
// "Content for the first section"
|
70
|
+
//
|
71
|
+
// article
|
72
|
+
// label[for="third-toggle"]
|
73
|
+
// "Third Section"
|
74
|
+
// div.third
|
75
|
+
// "Content for the first section"
|
76
|
+
//
|
77
|
+
// @include tab-defaults;
|
78
|
+
// @include tabs(first second third, article);
|
79
|
+
|
80
|
+
// ---------------------------------------------------------------------------
|
81
|
+
// Settings
|
82
|
+
|
83
|
+
// We don't need the radio-inputs to display.
|
84
|
+
%hide-tab-toggle { display: none; }
|
85
|
+
|
86
|
+
// The CSS3 `:checked` selector is not supported by IE7 and IE8.
|
87
|
+
// For legacy support, use `[aria-checked="true"]` applied with JavaScrip.
|
88
|
+
$default-checked-selector : ':checked' !default;
|
89
|
+
$default-nested-selectors : null !default;
|
90
|
+
|
91
|
+
// Change the attributes used for each selector.
|
92
|
+
// These attributes need to be different,
|
93
|
+
// since everything else is the same in the selectors.
|
94
|
+
$toggle-attribute : id !default;
|
95
|
+
$title-attribute : for !default;
|
96
|
+
$content-attribute : class !default;
|
97
|
+
|
98
|
+
// ---------------------------------------------------------------------------
|
99
|
+
// Mixins
|
100
|
+
|
101
|
+
// Default styles for the content and the tab titles
|
102
|
+
//
|
103
|
+
// @include tab-defaults
|
104
|
+
// - %hide-tab-content: Applied to hidden tabs.
|
105
|
+
// - %show-tab-content: Applied to visible tabs.
|
106
|
+
// - %active-tab-title: Applied to the tab-title for the active tab.
|
107
|
+
@mixin tab-defaults {
|
108
|
+
%hide-tab-content { display: none; }
|
109
|
+
%show-tab-content { display: block; }
|
110
|
+
%active-tab-title { font-weight: bold; }
|
111
|
+
}
|
112
|
+
|
113
|
+
// Create tabs for the given slugs
|
114
|
+
//
|
115
|
+
// @include make-tabs($slugs [, $nested, $checked])
|
116
|
+
// - $slugs : The slugs to use in tab selectors.
|
117
|
+
// - $nested : If the tabs or content are nested, add those selectors as well.
|
118
|
+
// - One selector will be used for both
|
119
|
+
// - Two selectors will be split: first tabs, then content
|
120
|
+
// - Use `null` to unset one e.g. '.tab-selector null'
|
121
|
+
// - $checked : How we know when a toggle is checked e.g. ':checked'.
|
122
|
+
@mixin tabs(
|
123
|
+
$slugs,
|
124
|
+
$nested: $default-nested-selectors,
|
125
|
+
$checked: $default-checked-selector
|
126
|
+
) {
|
127
|
+
$nested-tabs: $nested;
|
128
|
+
$nested-content: $nested;
|
129
|
+
@if length($nested) > 1 {
|
130
|
+
$nested-tabs: nth($nested, 1);
|
131
|
+
$nested-content: nth($nested, 2);
|
132
|
+
}
|
133
|
+
|
134
|
+
@each $slug in $slugs {
|
135
|
+
$toggle : '[#{$toggle-attribute}*="#{$slug}"]';
|
136
|
+
$title : '[#{$title-attribute}*="#{$slug}"]';
|
137
|
+
$content : '[#{$content-attribute}*="#{$slug}"]';
|
138
|
+
|
139
|
+
#{$content} { @extend %hide-tab-content; }
|
140
|
+
#{$toggle} {
|
141
|
+
@extend %hide-tab-toggle;
|
142
|
+
&#{$checked} {
|
143
|
+
& ~ #{$nested-tabs} #{$title} {
|
144
|
+
@extend %active-tab-title !optional;
|
145
|
+
}
|
146
|
+
& ~ #{$nested-content} #{$content} {
|
147
|
+
@extend %show-tab-content;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// ----------------------------------------------------------------------------
|
2
|
+
// Typography
|
3
|
+
|
4
|
+
// @private base settings
|
5
|
+
$base-font-size : 16px !default;
|
6
|
+
|
7
|
+
// The default padding on a dropcap letter
|
8
|
+
$default-dropcap-padding : null;
|
9
|
+
|
10
|
+
// The default font settings (null == inherit)
|
11
|
+
$default-dropcap-font-family : null;
|
12
|
+
$default-dropcap-font-weight : null;
|
13
|
+
$default-dropcap-font-style : null;
|
14
|
+
$default-dropcap-font-variant : null;
|
15
|
+
$default-dropcap-text-transform : null;
|
16
|
+
|
17
|
+
// Creates a dropcap using the :first-letter selector
|
18
|
+
//
|
19
|
+
// dropcap([$size, $lines, $padding, $from-size]) { @content }
|
20
|
+
// - $size : Optional font-size of your dropcap.
|
21
|
+
// - $lines : Optional lines of rhythm for the dropcap line-height.
|
22
|
+
// - $padding : Optional padding around the dropcap.
|
23
|
+
// - $from-size : Optional context font size, if using relative sizing.
|
24
|
+
// - $font-family : Optional font-stack for the dropcap.
|
25
|
+
// - @content : Optionally override the default dropcap styles as needed.
|
26
|
+
@mixin dropcap(
|
27
|
+
$size : $base-font-size*2,
|
28
|
+
$lines : lines-for-font-size($size),
|
29
|
+
$padding : $default-dropcap-padding,
|
30
|
+
$from-size : $base-font-size,
|
31
|
+
$font-family : $default-dropcap-font-family
|
32
|
+
) {
|
33
|
+
&:first-letter {
|
34
|
+
@include adjust-font-size-to($size,$lines,$from-size);
|
35
|
+
font-family: $font-family;
|
36
|
+
float: left;
|
37
|
+
padding: $padding;
|
38
|
+
|
39
|
+
@content;
|
40
|
+
}
|
41
|
+
}
|
metadata
ADDED
@@ -0,0 +1,91 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: accoutrement
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Eric Meyer
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2012-11-30 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: compass
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 43
|
29
|
+
segments:
|
30
|
+
- 0
|
31
|
+
- 12
|
32
|
+
- 2
|
33
|
+
version: 0.12.2
|
34
|
+
type: :runtime
|
35
|
+
version_requirements: *id001
|
36
|
+
description: Assorted Sass/Compass accoutrement & accessories
|
37
|
+
email: eric@oddbird.net
|
38
|
+
executables: []
|
39
|
+
|
40
|
+
extensions: []
|
41
|
+
|
42
|
+
extra_rdoc_files: []
|
43
|
+
|
44
|
+
files:
|
45
|
+
- README.md
|
46
|
+
- lib/accoutrement.rb
|
47
|
+
- stylesheets/_accoutrement.scss
|
48
|
+
- stylesheets/accoutrement/_background.scss
|
49
|
+
- stylesheets/accoutrement/_color.scss
|
50
|
+
- stylesheets/accoutrement/_math.scss
|
51
|
+
- stylesheets/accoutrement/_media.scss
|
52
|
+
- stylesheets/accoutrement/_pseudo-elements.scss
|
53
|
+
- stylesheets/accoutrement/_rhythm.scss
|
54
|
+
- stylesheets/accoutrement/_sass-lists.scss
|
55
|
+
- stylesheets/accoutrement/_tabs.scss
|
56
|
+
- stylesheets/accoutrement/_type.scss
|
57
|
+
homepage: http://oddbird.net/
|
58
|
+
licenses: []
|
59
|
+
|
60
|
+
post_install_message:
|
61
|
+
rdoc_options: []
|
62
|
+
|
63
|
+
require_paths:
|
64
|
+
- lib
|
65
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
66
|
+
none: false
|
67
|
+
requirements:
|
68
|
+
- - ">="
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
hash: 3
|
71
|
+
segments:
|
72
|
+
- 0
|
73
|
+
version: "0"
|
74
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
75
|
+
none: false
|
76
|
+
requirements:
|
77
|
+
- - ">="
|
78
|
+
- !ruby/object:Gem::Version
|
79
|
+
hash: 3
|
80
|
+
segments:
|
81
|
+
- 0
|
82
|
+
version: "0"
|
83
|
+
requirements: []
|
84
|
+
|
85
|
+
rubyforge_project:
|
86
|
+
rubygems_version: 1.8.24
|
87
|
+
signing_key:
|
88
|
+
specification_version: 3
|
89
|
+
summary: Assorted Sass/Compass accoutrement & accessories
|
90
|
+
test_files: []
|
91
|
+
|