framous 0.2.5 → 0.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.
@@ -1,120 +0,0 @@
1
- //
2
- // Tables
3
- //
4
-
5
- table {
6
- position: relative;
7
- margin-bottom: ms(1);
8
- width: 100%;
9
- border: 1px solid $border-color;
10
- }
11
-
12
- * html table,
13
- *:first-child+html table {
14
- zoom: 1;
15
- }
16
-
17
- th,
18
- td {
19
- padding: ms(0)/2 ms(0) ms(0)/2 ms(0)/2;
20
- border-right: solid 1px $border-color;
21
- text-align: left; /* LTR */
22
- &:last-child {
23
- border-right: 0 none;
24
- }
25
- }
26
-
27
- thead {
28
- th,
29
- td {
30
- padding-top: ms(0)/2;
31
- }
32
- }
33
-
34
- tfoot {
35
- th,
36
- td {
37
- padding-bottom: ms(0)/2;
38
- }
39
- }
40
-
41
- tbody,
42
- tfoot {
43
- th,
44
- td {
45
- border-top: solid 1px $border-color;
46
- }
47
- }
48
-
49
- tr:nth-child(even) td { }
50
- tbody tr:nth-child(odd) {
51
- th,
52
- td {
53
- background: $background-color;
54
- }
55
- }
56
-
57
- tbody {
58
- border-top: none;
59
- }
60
-
61
- @include breakpoint($small) {
62
-
63
- table {
64
- position: relative;
65
- display: block;
66
- width: 100%;
67
- }
68
-
69
- table thead {
70
- display: block;
71
- float: left;
72
-
73
- tr th {
74
- border-right: 2px solid $border-color;
75
- border-bottom: 1px solid $border-color;
76
-
77
- &:last-child {
78
- border-right: 2px solid $border-color;
79
- border-bottom: 0 none;
80
- }
81
- }
82
- }
83
-
84
- table tbody {
85
- display: -webkit-box;
86
- overflow-x: auto;
87
- }
88
-
89
- table th,
90
- table tr,
91
- table td {
92
- display: block;
93
- }
94
-
95
- tbody,
96
- tfoot {
97
- th,
98
- td {
99
- &:first-child {
100
- border-top: 0 none;
101
- }
102
- }
103
- }
104
-
105
- // sort out borders
106
- table th {
107
- border-bottom: 0;
108
- }
109
-
110
- table td {
111
- border-right: 0;
112
- border-bottom: 0;
113
- border-left: 0;
114
- }
115
-
116
- table tbody tr {
117
- border-right: 1px solid $border-color;
118
- }
119
-
120
- }
@@ -1,213 +0,0 @@
1
- //
2
- // Typography.scss
3
- // Base Type Styles Using Modular Scale
4
- // @credits http://thesassway.com/projects/modular-scale
5
- // https://github.com/scottkellum/modular-scale
6
- // Vertical Rhythm : http://drewish.com/tools/vertical-rhythm
7
- //
8
-
9
- @import "compass/typography/vertical_rhythm";
10
- @import "compass/reset/utilities";
11
-
12
- body,div,dl,dt,dd,ul,ol,li,
13
- h1,h2,h3,h4,h5,h6,
14
- pre,form,p,blockquote,th,td {
15
- margin: 0;
16
- padding: 0;
17
- font-size: ms(0);
18
- direction: $text-direction;
19
- }
20
-
21
- body {
22
- position: relative;
23
- background: $background-body-color;
24
- color: $body-font-color;
25
- font-size: ms(0);
26
- font-family: $body-font-family;
27
- line-height: $base-line-height;
28
- -webkit-text-rendering: optimizeLegibility;
29
- -moz-text-rendering: optimizeLegibility;
30
- -ms-text-rendering: optimizeLegibility;
31
- -o-text-rendering: optimizeLegibility;
32
- text-rendering: optimizeLegibility;
33
- -webkit-font-smoothing: antialiased;
34
- -moz-font-smoothing: antialiased;
35
- -ms-font-smoothing: antialiased;
36
- -o-font-smoothing: antialiased;
37
- font-smoothing: antialiased;
38
- }
39
-
40
- // Links : link, visited, hover, active
41
- a {
42
- color: $link-color;
43
- text-decoration: none;
44
- line-height: inherit;
45
- word-wrap: break-word;
46
-
47
- &:visited {
48
- color: $link-color-hover;
49
- }
50
-
51
- &:hover {
52
- color: $link-color-hover;
53
- }
54
-
55
- &:active {
56
- color: $link-color-hover;
57
- }
58
-
59
- &:focus {
60
- outline: none;
61
- color: $link-color-hover;
62
- }
63
- }
64
-
65
- p a,
66
- p a:visited {
67
- line-height: inherit;
68
- }
69
-
70
- p {
71
- margin-bottom: ms(1);
72
- font-weight: $body-font-weight;
73
- font-family: $body-font-family;
74
- @include adjust-font-size-to(ms(0));
75
- }
76
-
77
- aside p {
78
- font-size: ms(0) - 1;
79
- @include adjust-font-size-to(ms(0) - 1);
80
- }
81
-
82
- h1, h2, h3, h4, h5, h6 {
83
- margin-top: ms(0);
84
- margin-bottom: ms(0);
85
- color: $header-font-color;
86
- font-weight: $header-font-weight;
87
- font-family: $header-font-family;
88
- text-rendering: optimizeLegibility;
89
-
90
- small {
91
- color: lighten($header-font-color, 30%);
92
- font-size: 75%;
93
- line-height: 0;
94
- }
95
- }
96
-
97
- h1 { @include adjust-font-size-to(ms(5)); }
98
- h2 { @include adjust-font-size-to(ms(4)); }
99
- h3 { @include adjust-font-size-to(ms(3)); }
100
- h4 { @include adjust-font-size-to(ms(2)); }
101
- h5 { @include adjust-font-size-to(ms(1)); }
102
- h6 { @include adjust-font-size-to(ms(0)); }
103
-
104
- hr {
105
- clear: both;
106
- margin: ms(1) 0 ms(1);
107
- height: 0;
108
- border: solid #ddd;
109
- border-width: 1px 0 0;
110
- }
111
-
112
- em, i {
113
- font-style: italic;
114
- line-height: inherit;
115
- }
116
-
117
- strong, b {
118
- font-weight: bold;
119
- line-height: inherit;
120
- }
121
-
122
- small {
123
- font-size: 75%;
124
- line-height: inherit;
125
- }
126
-
127
- code {
128
- background: $highlight-color;
129
- font-weight: bold;
130
- }
131
-
132
- // Lists
133
- ul, ol {
134
- margin-bottom: ms(1);
135
- margin-left: ms(1);
136
- @include adjust-font-size-to(ms(0));
137
- }
138
-
139
- ul {
140
- li {
141
- ul, ol {
142
- margin-#{$default-float}: ms(1);
143
- }
144
- }
145
- }
146
-
147
- ol {
148
- li {
149
- ul, ol {
150
- margin-#{$default-float}: ms(1);
151
- }
152
- }
153
- }
154
-
155
- nav ul, nav ol,
156
- .nav li, .nav ol {
157
- @include reset-list-style;
158
- margin: 0;
159
- padding: 0;
160
- }
161
-
162
- // Text Marking
163
- ins, mark {
164
- background-color: $highlight-color;
165
- color: invert($highlight-color);
166
- }
167
-
168
- ins {
169
- text-decoration: none;
170
- }
171
-
172
- del {
173
- text-decoration: line-through;
174
- }
175
-
176
- // Blockquote
177
- blockquote, blockquote p {
178
- color: lighten($header-font-color, 30%);
179
- font-style: italic;
180
- line-height: 1.5;
181
- }
182
-
183
- blockquote {
184
- margin: 0 0 ms(1) ms(1);
185
- padding: 0px ms(1) 0 ms(1);
186
- border-#{$default-float}: 1px solid $grey-set;
187
-
188
- cite {
189
- display: block;
190
- color: lighten($header-font-color, 20%);
191
- font-size: ms(0) - 1;
192
-
193
- &:before {
194
- content: "\2014 \0020";
195
- }
196
-
197
- a, a:visited {
198
- color: lighten($header-font-color, 20%);
199
- }
200
- }
201
- }
202
-
203
- abbr, acronym {
204
- border-bottom: 1px solid $grey-set;
205
- color: $header-font-color;
206
- text-transform: uppercase !important;
207
- font-size: 90%;
208
- cursor: help;
209
- }
210
-
211
- abbr {
212
- text-transform: none;
213
- }
@@ -1,9 +0,0 @@
1
- //
2
- // Framous-grid.scss
3
- // A semantic, fluid grid framework
4
- // Based on http://neat.bourbon.io/ & http://susy.oddbird.net/
5
- //
6
-
7
- @import "settings";
8
- @import "functions";
9
- @import "grid";
@@ -1,39 +0,0 @@
1
- //
2
- // Functions & Mixins
3
- //
4
-
5
- //
6
- // Flexible grid
7
- //
8
-
9
- @function flex-grid($columns, $container-columns: $fg-max-columns) {
10
- $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
11
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
12
- @return percentage($width / $container-width);
13
- }
14
-
15
- // Flexible gutter
16
- @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
17
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
18
- @return percentage($gutter / $container-width);
19
- }
20
-
21
- //
22
- // Container Span
23
- //
24
-
25
- @function container-span($span: $span) {
26
- @if length($span) == 3 {
27
- $container-columns: nth($span, 3);
28
- @return $container-columns;
29
- }
30
-
31
- @else if length($span) == 2 {
32
- $container-columns: nth($span, 2);
33
- @return $container-columns;
34
- }
35
-
36
- @else {
37
- @return $grid-columns;
38
- }
39
- }
@@ -1,201 +0,0 @@
1
- //
2
- // Grid.scss
3
- // The default grid uses 12 columns.
4
- //
5
-
6
- //
7
- // Imports
8
- //
9
-
10
- @import "compass/css3/box-sizing";
11
- @import "compass/utilities/general";
12
-
13
- // $border-box-sizing: true !default;
14
- // Makes all elements have a border-box layout
15
-
16
- @if $border-box-sizing == true {
17
- * {
18
- @include box-sizing(border-box);
19
- }
20
- }
21
-
22
- $fg-column: $column;
23
- $fg-gutter: $gutter;
24
- $fg-max-columns: $grid-columns;
25
- $fg-max-width: $max-width;
26
- $parent-columns: $grid-columns !default;
27
-
28
- // outer wrapper center container
29
- @mixin outer-container() {
30
- @include clearfix;
31
- max-width: $fg-max-width;
32
- text-align: left;
33
- margin: {
34
- left: auto;
35
- right: auto;
36
- }
37
- }
38
-
39
- // Grid span columns
40
- // Use the span-columns mixin to specify the number of columns an element:
41
- // @include span-columns($span: $columns of $container-columns, $display: block)
42
- // eg. Element that spans across 6 columns (out of the default 12)
43
- // div.element { @include span-columns(6 of 8); }
44
- @mixin span-columns($span: $columns of $container-columns, $display: block) {
45
-
46
- $columns: nth($span, 1);
47
- $container-columns: container-span($span);
48
-
49
- @if $container-columns != $grid-columns {
50
- $parent-columns: $container-columns;
51
- }
52
-
53
- @if $display == table {
54
- display: table-cell;
55
- padding-right: flex-gutter($container-columns);
56
- width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
57
-
58
- &:last-child {
59
- padding-right: 0;
60
- }
61
- }
62
-
63
- @else if $display == inline-block {
64
- @include inline-block;
65
- margin-right: flex-gutter($container-columns);
66
- width: flex-grid($columns, $container-columns);
67
-
68
- &:last-child {
69
- margin-right: 0;
70
- }
71
- }
72
-
73
- @else {
74
- display: block;
75
- float: left;
76
- margin-right: flex-gutter($container-columns);
77
- width: flex-grid($columns, $container-columns);
78
-
79
- &:last-child {
80
- margin-right: 0;
81
- }
82
- }
83
- }
84
-
85
- // Clearfix / row container
86
- // In order to clear floated or table-cell columns:
87
- @mixin row($display: block) {
88
- @include clearfix;
89
- @if $display == table {
90
- display: table;
91
- }
92
-
93
- @else {
94
- display: block;
95
- }
96
- }
97
-
98
- // Shift
99
- // To move an element to the left or right by a number of columns:
100
- @mixin shift($n-columns: 1) {
101
- margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
102
- }
103
-
104
- // Pad
105
- // To add padding around the entire column use pad().
106
- // By default it adds the same value as the grid's gutter.
107
- @mixin pad($padding: flex-gutter()) {
108
- padding: $padding;
109
- }
110
-
111
- // Remove element gutter
112
- @mixin omega($display: block, $direction: right) {
113
- @if $display == table {
114
- padding-#{$direction}: 0;
115
- }
116
-
117
- @else {
118
- margin-#{$direction}: 0;
119
- }
120
- }
121
-
122
- // You can also use nth-omega to remove the gutter of a specific column or set of columns
123
- @mixin nth-omega($nth, $display: block, $direction: right) {
124
- @if $display == table {
125
- &:nth-child(#{$nth}) {
126
- padding-#{$direction}: 0;
127
- }
128
- }
129
-
130
- @else {
131
- &:nth-child(#{$nth}) {
132
- margin-#{$direction}: 0;
133
- }
134
- }
135
- }
136
-
137
- // Fill 100% of parent
138
- // This makes sure that the child fills 100% of its parent
139
- @mixin fill-parent() {
140
- width: 100%;
141
-
142
- @if $border-box-sizing == false {
143
- @include box-sizing(border-box);
144
- }
145
- }
146
-
147
- // Breakpoints
148
- // The breakpoint() mixin allows you to use media-queries to modify both the grid and the layout.
149
- // It takes two arguments:
150
- @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
151
-
152
- @if length($query) == 1 {
153
- @media screen and ($default-feature: nth($query, 1)) {
154
- $default-grid-columns: $grid-columns;
155
- $grid-columns: $total-columns;
156
- @content;
157
- $grid-columns: $default-grid-columns;
158
- }
159
- }
160
-
161
- @else if length($query) == 2 {
162
- @media screen and (nth($query, 1): nth($query, 2)) {
163
- $default-grid-columns: $grid-columns;
164
- $grid-columns: $total-columns;
165
- @content;
166
- $grid-columns: $default-grid-columns;
167
- }
168
- }
169
-
170
- @else if length($query) == 3 {
171
- @media screen and (nth($query, 1): nth($query, 2)) {
172
- $default-grid-columns: $grid-columns;
173
- $grid-columns: nth($query, 3);
174
- @content;
175
- $grid-columns: $default-grid-columns;
176
- }
177
- }
178
-
179
- @else if length($query) == 4 {
180
- @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
181
- $default-grid-columns: $grid-columns;
182
- $grid-columns: $total-columns;
183
- @content;
184
- $grid-columns: $default-grid-columns;
185
- }
186
- }
187
-
188
- @else if length($query) == 5 {
189
- @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
190
- $default-grid-columns: $grid-columns;
191
- $grid-columns: nth($query, 5);
192
- @content;
193
- $grid-columns: $default-grid-columns;
194
- }
195
- }
196
-
197
- @else {
198
- @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
199
- }
200
- }
201
-