magic_stylez 0.0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +11 -0
- data/Gemfile +14 -0
- data/MIT-LICENSE +20 -0
- data/README.md +33 -0
- data/Rakefile +32 -0
- data/lib/magic_stylez/engine.rb +10 -0
- data/lib/magic_stylez/version.rb +3 -0
- data/lib/magic_stylez.rb +53 -0
- data/lib/tasks/magic_stylez_tasks.rake +4 -0
- data/magic_stylez.gemspec +38 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +15 -0
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +71 -0
- data/test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco +70 -0
- data/test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco +1528 -0
- data/test/dummy/app/assets/javascripts/views/elements/arrow_infos.jst.eco +46 -0
- data/test/dummy/app/assets/javascripts/views/layout/corset.jst.eco +27 -0
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +76 -0
- data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco +109 -0
- data/test/dummy/app/assets/javascripts/views/layout/slide_boxes.jst.eco +33 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +180 -0
- data/test/dummy/app/controllers/application_controller.rb +6 -0
- data/test/dummy/app/controllers/concerns/.keep +0 -0
- data/test/dummy/app/controllers/front_controller.rb +7 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/mailers/.keep +0 -0
- data/test/dummy/app/models/.keep +0 -0
- data/test/dummy/app/models/concerns/.keep +0 -0
- data/test/dummy/app/views/front/_aside.html.erb +36 -0
- data/test/dummy/app/views/front/start.html.erb +77 -0
- data/test/dummy/app/views/layouts/application.html.erb +24 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config/application.rb +32 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +49 -0
- data/test/dummy/config/environments/production.rb +88 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +61 -0
- data/test/dummy/config/secrets.yml +20 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/xindex.html +135 -0
- data/test/magic_stylez_test.rb +7 -0
- data/test/test_helper.rb +21 -0
- data/vendor/assets/filter/magic/filter.svg +10 -0
- data/vendor/assets/filter/magic/noise.svg +70 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.eot +0 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.svg +461 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.ttf +0 -0
- data/vendor/assets/fonts/magic/magicons-regular-webfont.woff +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.eot +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.svg +172 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.ttf +0 -0
- data/vendor/assets/fonts/magic/orderlifticons-webfont.woff +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round1-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round1-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round2-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow-round2-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow1.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-1.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-2.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow2-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow3-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow3-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow4-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow4-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow5-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow5-b.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow6-a.png +0 -0
- data/vendor/assets/images/magic/arrows/arrow6-b.png +0 -0
- data/vendor/assets/images/magic/bgs/hdr_landsberger.jpg +0 -0
- data/vendor/assets/images/magic/bgs/rain-flower.jpg +0 -0
- data/vendor/assets/images/magic/bgs/seucide.jpg +0 -0
- data/vendor/assets/javascripts/magic/render_eco.js.coffee +9 -0
- data/vendor/assets/javascripts/magic-stylez.js.coffee +49 -0
- data/vendor/assets/stylesheets/magic/_animation.scss +3 -0
- data/vendor/assets/stylesheets/magic/_forms.scss +42 -0
- data/vendor/assets/stylesheets/magic/_text.scss +41 -0
- data/vendor/assets/stylesheets/magic/content/_banner.scss +77 -0
- data/vendor/assets/stylesheets/magic/corporate/_colors.scss +244 -0
- data/vendor/assets/stylesheets/magic/corporate/_fonts.scss +152 -0
- data/vendor/assets/stylesheets/magic/corporate/_typo.scss +57 -0
- data/vendor/assets/stylesheets/magic/corporate/_variables.scss +636 -0
- data/vendor/assets/stylesheets/magic/effects/_reflections.scss +52 -0
- data/vendor/assets/stylesheets/magic/effects/_shadows.scss +255 -0
- data/vendor/assets/stylesheets/magic/icons/magicons.scss +706 -0
- data/vendor/assets/stylesheets/magic/icons/orderlifticons.scss +258 -0
- data/vendor/assets/stylesheets/magic/layout/_corset.scss +60 -0
- data/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss +176 -0
- data/vendor/assets/stylesheets/magic/layout/_section.scss +126 -0
- data/vendor/assets/stylesheets/magic/layout/_tables.scss +513 -0
- data/vendor/assets/stylesheets/magic/lib/_cross_browser.scss +51 -0
- data/vendor/assets/stylesheets/magic/lib/_media_querries.scss +59 -0
- data/vendor/assets/stylesheets/magic/lib/_twbs.scss +55 -0
- data/vendor/assets/stylesheets/magic/lists/_nav.scss +207 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +140 -0
- metadata +397 -0
@@ -0,0 +1,244 @@
|
|
1
|
+
//== Colors
|
2
|
+
//
|
3
|
+
//## Gray and brand colors for use across Bootstrap.
|
4
|
+
// -------------------------
|
5
|
+
$black: #1c1c1c !default;
|
6
|
+
$gray-darker: lighten(#000, 13.5%) !default; // #222
|
7
|
+
$gray-dark: lighten(#000, 20%) !default; // #333
|
8
|
+
$gray: lighten(#000, 33.5%) !default; // #555
|
9
|
+
$gray-light: lighten(#000, 60%) !default; // #999
|
10
|
+
$gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
11
|
+
$gray-soft: #f0f0f0 !default;
|
12
|
+
$gray-softer: #f9f9f9 !default;
|
13
|
+
$white: #ffffff !default;
|
14
|
+
// -------------------------
|
15
|
+
// Brand colors
|
16
|
+
// -------------------------
|
17
|
+
$brand-primary: #336699 !default;
|
18
|
+
$brand-success: #5cb85c !default;
|
19
|
+
$brand-info: #5bc0de !default;
|
20
|
+
$brand-warning: #f0ad4e !default;
|
21
|
+
$brand-danger: #d9534f !default;
|
22
|
+
// -------------------------
|
23
|
+
// Accent colors
|
24
|
+
// -------------------------
|
25
|
+
$blue-soft: #9dcfe1 !default;
|
26
|
+
$blue-lighter: #d8e7ec !default;
|
27
|
+
$blue-light: #0099cc !default;
|
28
|
+
$blue: #006699 !default;
|
29
|
+
$blue-dark: darken($blue, 15%) !default;
|
30
|
+
$green: #006600 !default;
|
31
|
+
$red: #9d261d !default;
|
32
|
+
$red-dark: darkred !default;
|
33
|
+
$yellow: #ffc40d !default;
|
34
|
+
$orange: #ff6600 !default;
|
35
|
+
$pink: #c3325f !default;
|
36
|
+
$purple: #7a43b6 !default;
|
37
|
+
|
38
|
+
|
39
|
+
|
40
|
+
//== Scaffolding
|
41
|
+
//** Settings for some of the most global styles.
|
42
|
+
|
43
|
+
// M A G I C - S T Y L E Z
|
44
|
+
|
45
|
+
//** Global Background colors.
|
46
|
+
$main-bg: #f2f1f1 !default;
|
47
|
+
$dark-bg: #e5e5e5 !default;
|
48
|
+
$blue-bg: $blue-soft !default;
|
49
|
+
|
50
|
+
//** Global Highlight color.
|
51
|
+
// $main-active-color: #a0c775;
|
52
|
+
$brand-color: #a0c775;
|
53
|
+
|
54
|
+
//** Global Border color.
|
55
|
+
$main-border-color: #ccc !default;
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
// T W I T T E R - B O O T S T R A P
|
60
|
+
|
61
|
+
//** Background color for `<body>`.
|
62
|
+
$body-bg: $main-bg;
|
63
|
+
|
64
|
+
//** Global text color on `<body>`.
|
65
|
+
$text-color: $gray-dark !default;
|
66
|
+
|
67
|
+
//** Global textual link color.
|
68
|
+
$link-color: $brand-primary !default;
|
69
|
+
//** Link hover color set via `darken()` function.
|
70
|
+
$link-hover-color: darken($link-color, 15%) !default;
|
71
|
+
|
72
|
+
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
//== Components
|
78
|
+
|
79
|
+
//** Global color for active items (e.g., navs or dropdowns).
|
80
|
+
$component-active-color: #fff !default;
|
81
|
+
//** Global background color for active items (e.g., navs or dropdowns).
|
82
|
+
$component-active-bg: $brand-primary !default;
|
83
|
+
|
84
|
+
|
85
|
+
|
86
|
+
//== Buttons
|
87
|
+
//
|
88
|
+
|
89
|
+
$btn-default-color: #333 !default;
|
90
|
+
$btn-default-bg: #fff !default;
|
91
|
+
$btn-default-border: #ccc !default;
|
92
|
+
|
93
|
+
$btn-primary-color: #fff !default;
|
94
|
+
$btn-primary-bg: $brand-primary !default;
|
95
|
+
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
|
96
|
+
|
97
|
+
$btn-success-color: #fff !default;
|
98
|
+
$btn-success-bg: $brand-success !default;
|
99
|
+
$btn-success-border: darken($btn-success-bg, 5%) !default;
|
100
|
+
|
101
|
+
$btn-info-color: #fff !default;
|
102
|
+
$btn-info-bg: $brand-info !default;
|
103
|
+
$btn-info-border: darken($btn-info-bg, 5%) !default;
|
104
|
+
|
105
|
+
$btn-warning-color: #fff !default;
|
106
|
+
$btn-warning-bg: $brand-warning !default;
|
107
|
+
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
|
108
|
+
|
109
|
+
$btn-danger-color: #fff !default;
|
110
|
+
$btn-danger-bg: $brand-danger !default;
|
111
|
+
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
112
|
+
|
113
|
+
$btn-link-disabled-color: $gray-light !default;
|
114
|
+
|
115
|
+
|
116
|
+
//== Forms
|
117
|
+
//
|
118
|
+
//##
|
119
|
+
|
120
|
+
//** `<input>` background color
|
121
|
+
$input-bg: #fff !default;
|
122
|
+
//** `<input disabled>` background color
|
123
|
+
$input-bg-disabled: $gray-lighter !default;
|
124
|
+
|
125
|
+
//** Text color for `<input>`s
|
126
|
+
$input-color: $gray !default;
|
127
|
+
//** `<input>` border color
|
128
|
+
$input-border: #ccc !default;
|
129
|
+
//** Border color for inputs on focus
|
130
|
+
$input-border-focus: #66afe9 !default;
|
131
|
+
|
132
|
+
//** Placeholder text color
|
133
|
+
$input-color-placeholder: $gray-light !default;
|
134
|
+
|
135
|
+
$legend-color: $gray-dark !default;
|
136
|
+
$legend-border-color: #e5e5e5 !default;
|
137
|
+
|
138
|
+
//** Background color for textual input addons
|
139
|
+
$input-group-addon-bg: $gray-lighter !default;
|
140
|
+
//** Border color for textual input addons
|
141
|
+
$input-group-addon-border-color: $input-border !default;
|
142
|
+
|
143
|
+
|
144
|
+
//== Tables
|
145
|
+
//
|
146
|
+
//** Default background color used for all tables.
|
147
|
+
$table-bg: transparent !default;
|
148
|
+
//** Background color used for `.table-striped`.
|
149
|
+
$table-bg-accent: #f9f9f9 !default;
|
150
|
+
//** Background color used for `.table-hover`.
|
151
|
+
$table-bg-hover: #f5f5f5 !default;
|
152
|
+
$table-bg-active: $table-bg-hover !default;
|
153
|
+
|
154
|
+
//** Border color for table and cell borders.
|
155
|
+
$table-border-color: #ddd !default;
|
156
|
+
|
157
|
+
|
158
|
+
//== Dropdowns
|
159
|
+
//
|
160
|
+
//## Dropdown menu container and contents.
|
161
|
+
|
162
|
+
//** Background for the dropdown menu.
|
163
|
+
$dropdown-bg: #fff !default;
|
164
|
+
//** Dropdown menu `border-color`.
|
165
|
+
$dropdown-border: rgba(0,0,0,.15) !default;
|
166
|
+
//** Dropdown menu `border-color` **for IE8**.
|
167
|
+
$dropdown-fallback-border: #ccc !default;
|
168
|
+
//** Divider color for between dropdown items.
|
169
|
+
$dropdown-divider-bg: #e5e5e5 !default;
|
170
|
+
|
171
|
+
//** Dropdown link text color.
|
172
|
+
$dropdown-link-color: $gray-dark !default;
|
173
|
+
//** Hover color for dropdown links.
|
174
|
+
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
175
|
+
//** Hover background for dropdown links.
|
176
|
+
$dropdown-link-hover-bg: #f5f5f5 !default;
|
177
|
+
|
178
|
+
//** Active dropdown menu item text color.
|
179
|
+
$dropdown-link-active-color: $component-active-color !default;
|
180
|
+
//** Active dropdown menu item background color.
|
181
|
+
$dropdown-link-active-bg: $component-active-bg !default;
|
182
|
+
|
183
|
+
//** Disabled dropdown menu item background color.
|
184
|
+
$dropdown-link-disabled-color: $gray-light !default;
|
185
|
+
|
186
|
+
//** Text color for headers within dropdown menus.
|
187
|
+
$dropdown-header-color: $gray-light !default;
|
188
|
+
|
189
|
+
//** Deprecated `$dropdown-caret-color` as of v3.1.0
|
190
|
+
$dropdown-caret-color: #000 !default;
|
191
|
+
|
192
|
+
|
193
|
+
|
194
|
+
//== Navbar
|
195
|
+
//
|
196
|
+
//##
|
197
|
+
$navbar-default-color: #777 !default;
|
198
|
+
$navbar-default-bg: #f8f8f8 !default;
|
199
|
+
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
200
|
+
|
201
|
+
// Navbar links
|
202
|
+
$navbar-default-link-color: #777 !default;
|
203
|
+
$navbar-default-link-hover-color: #333 !default;
|
204
|
+
$navbar-default-link-hover-bg: transparent !default;
|
205
|
+
$navbar-default-link-active-color: #555 !default;
|
206
|
+
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
|
207
|
+
$navbar-default-link-disabled-color: #ccc !default;
|
208
|
+
$navbar-default-link-disabled-bg: transparent !default;
|
209
|
+
|
210
|
+
// Navbar brand label
|
211
|
+
$navbar-default-brand-color: $navbar-default-link-color !default;
|
212
|
+
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
|
213
|
+
$navbar-default-brand-hover-bg: transparent !default;
|
214
|
+
|
215
|
+
// Navbar toggle
|
216
|
+
$navbar-default-toggle-hover-bg: #ddd !default;
|
217
|
+
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
218
|
+
$navbar-default-toggle-border-color: #ddd !default;
|
219
|
+
|
220
|
+
|
221
|
+
// Inverted navbar
|
222
|
+
// Reset inverted navbar basics
|
223
|
+
$navbar-inverse-color: $gray-light !default;
|
224
|
+
$navbar-inverse-bg: #222 !default;
|
225
|
+
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
|
226
|
+
|
227
|
+
// Inverted navbar links
|
228
|
+
$navbar-inverse-link-color: $gray-light !default;
|
229
|
+
$navbar-inverse-link-hover-color: #fff !default;
|
230
|
+
$navbar-inverse-link-hover-bg: transparent !default;
|
231
|
+
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
232
|
+
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
|
233
|
+
$navbar-inverse-link-disabled-color: #444 !default;
|
234
|
+
$navbar-inverse-link-disabled-bg: transparent !default;
|
235
|
+
|
236
|
+
// Inverted navbar brand label
|
237
|
+
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
238
|
+
$navbar-inverse-brand-hover-color: #fff !default;
|
239
|
+
$navbar-inverse-brand-hover-bg: transparent !default;
|
240
|
+
|
241
|
+
// Inverted navbar toggle
|
242
|
+
$navbar-inverse-toggle-hover-bg: #333 !default;
|
243
|
+
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
244
|
+
$navbar-inverse-toggle-border-color: #333 !default;
|
@@ -0,0 +1,152 @@
|
|
1
|
+
//
|
2
|
+
// F O N T S
|
3
|
+
//
|
4
|
+
|
5
|
+
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
6
|
+
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
7
|
+
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
8
|
+
|
9
|
+
|
10
|
+
//
|
11
|
+
// webfonts
|
12
|
+
//
|
13
|
+
|
14
|
+
// goolge
|
15
|
+
// $magicSans: "Open Sans", $sansFontFamily;
|
16
|
+
// $magicCondensedSans: "Open Sans Condensed", $sansFontFamily;
|
17
|
+
// $magicHandwritten: 'Satisfy', cursive;
|
18
|
+
|
19
|
+
// typekit (Adobe)
|
20
|
+
// $magicSans: "Montserrat", $sansFontFamily;
|
21
|
+
// $magicCondensedSans: "Lato", $sansFontFamily;
|
22
|
+
// $magicHandwritten: "ff-market-web", cursive;
|
23
|
+
|
24
|
+
$magicSans: $sansFontFamily;
|
25
|
+
$magicCondensedSans: $sansFontFamily;
|
26
|
+
$magicHandwritten: cursive;
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
// Open Sans
|
32
|
+
.sans {
|
33
|
+
font-family: $magicSans;
|
34
|
+
font-weight: 400;
|
35
|
+
&.thin, .thin { font-weight: 300; }
|
36
|
+
&.regular, .regular { font-weight: 400; }
|
37
|
+
&.sbold, .sbold { font-weight: 600; }
|
38
|
+
&.bold, .bold { font-weight: 700; }
|
39
|
+
&.ebold, .ebold { font-weight: 800; }
|
40
|
+
}
|
41
|
+
@mixin sansThin {
|
42
|
+
// font-family: 'Open Sans', sans-serif;
|
43
|
+
font-family: $magicSans;
|
44
|
+
font-weight: 300;
|
45
|
+
}
|
46
|
+
@mixin sansRegular {
|
47
|
+
font-family: $magicSans;
|
48
|
+
font-weight: 400;
|
49
|
+
}
|
50
|
+
@mixin sansSemi {
|
51
|
+
font-family: $magicSans;
|
52
|
+
font-weight: 600;
|
53
|
+
}
|
54
|
+
@mixin sansBold {
|
55
|
+
font-family: $magicSans;
|
56
|
+
font-weight: 700;
|
57
|
+
}
|
58
|
+
|
59
|
+
|
60
|
+
// Open Sans Condensed
|
61
|
+
.sansCondensed {
|
62
|
+
font-family: $magicCondensedSans;
|
63
|
+
font-weight: 300;
|
64
|
+
&.thin, .thin { font-weight: 300; }
|
65
|
+
&.bold, .bold { font-weight: 700; }
|
66
|
+
}
|
67
|
+
@mixin sansCondensedThin {
|
68
|
+
font-family: $magicCondensedSans;
|
69
|
+
font-weight: 300;
|
70
|
+
}
|
71
|
+
@mixin sansCondensedBold {
|
72
|
+
font-family: $magicCondensedSans;
|
73
|
+
font-weight: 700;
|
74
|
+
}
|
75
|
+
|
76
|
+
|
77
|
+
// Specials
|
78
|
+
.handWrittenFont {
|
79
|
+
font-family: $magicHandwritten;
|
80
|
+
font-weight: 400;
|
81
|
+
}
|
82
|
+
@mixin handWrittenFont {
|
83
|
+
font-family: $magicHandwritten;
|
84
|
+
font-weight: 400;
|
85
|
+
}
|
86
|
+
|
87
|
+
|
88
|
+
|
89
|
+
// variable
|
90
|
+
$smallReadFont: $magicCondensedSans;
|
91
|
+
$readFont: $magicSans;
|
92
|
+
$bigFont: $magicSans;
|
93
|
+
$dekoFont: $magicHandwritten;
|
94
|
+
|
95
|
+
|
96
|
+
// mixin
|
97
|
+
@mixin smallReadFont { font-family: $smallReadFont; }
|
98
|
+
@mixin readFont { font-family: $readFont; }
|
99
|
+
@mixin bigFont { font-family: $bigFont; }
|
100
|
+
@mixin dekoFont { font-family: $dekoFont; }
|
101
|
+
|
102
|
+
.smallReadFont { @include smallReadFont; }
|
103
|
+
.readFont { @include readFont; }
|
104
|
+
.bigFont { @include bigFont; }
|
105
|
+
.dekoFont { @include dekoFont; }
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
|
110
|
+
|
111
|
+
|
112
|
+
|
113
|
+
|
114
|
+
|
115
|
+
// C S S - F O N T S
|
116
|
+
|
117
|
+
@mixin eingabeText { font-family: $lucida-grande; }
|
118
|
+
|
119
|
+
@mixin profileText {
|
120
|
+
font-family: $lucida-grande;
|
121
|
+
color: #333;
|
122
|
+
font-size: 12px;
|
123
|
+
line-height: 20px;
|
124
|
+
}
|
125
|
+
|
126
|
+
@mixin titelText {
|
127
|
+
@include sansSemi;
|
128
|
+
font-size: 14px;
|
129
|
+
line-height: 20px;
|
130
|
+
}
|
131
|
+
|
132
|
+
@mixin subTextSmall {
|
133
|
+
@include sansRegular;
|
134
|
+
font-size: 12px;
|
135
|
+
line-height: 20px;
|
136
|
+
}
|
137
|
+
|
138
|
+
|
139
|
+
// ------------------------------- S C H R I F T G R O E S S E N -------------------------------
|
140
|
+
|
141
|
+
$magicDefaultFontSize: 13px;
|
142
|
+
$magicDefaultLineHight: 18px;
|
143
|
+
|
144
|
+
|
145
|
+
@mixin magicDefaultFont {
|
146
|
+
@include readFont;
|
147
|
+
font-size: $magicDefaultFontSize;
|
148
|
+
line-height: $magicDefaultLineHight;
|
149
|
+
} // ..
|
150
|
+
|
151
|
+
|
152
|
+
|
@@ -0,0 +1,57 @@
|
|
1
|
+
//== Typography
|
2
|
+
//
|
3
|
+
//## Font, line-height, and color for body text, headings, and more.
|
4
|
+
|
5
|
+
// $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
6
|
+
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
|
7
|
+
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
|
8
|
+
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
|
9
|
+
// $font-family-base: $font-family-sans-serif !default;
|
10
|
+
|
11
|
+
|
12
|
+
$font-family-sans-serif: $readFont;
|
13
|
+
$font-family-base: $smallReadFont;
|
14
|
+
|
15
|
+
|
16
|
+
$font-size-base: 15px !default;
|
17
|
+
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
18
|
+
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
19
|
+
|
20
|
+
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
21
|
+
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
22
|
+
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
|
23
|
+
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
|
24
|
+
$font-size-h5: $font-size-base !default;
|
25
|
+
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
|
26
|
+
|
27
|
+
//** Unit-less `line-height` for use in components like buttons.
|
28
|
+
$line-height-base: 1.428571429 !default; // 20/14
|
29
|
+
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
30
|
+
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
31
|
+
|
32
|
+
//** By default, this inherits from the `<body>`.
|
33
|
+
// $headings-font-family: inherit !default;
|
34
|
+
$headings-font-family: $bigFont;
|
35
|
+
$headings-font-weight: 500 !default;
|
36
|
+
$headings-line-height: 1.1 !default;
|
37
|
+
$headings-color: inherit !default;
|
38
|
+
|
39
|
+
|
40
|
+
//== Buttons
|
41
|
+
|
42
|
+
$btn-font-weight: normal !default;
|
43
|
+
|
44
|
+
|
45
|
+
|
46
|
+
p.loud {
|
47
|
+
@include sansCondensedThin;
|
48
|
+
font-size: 18px;
|
49
|
+
}
|
50
|
+
p.highlight {
|
51
|
+
@include sansCondensedThin;
|
52
|
+
font-weight: 600;
|
53
|
+
font-size: 18px;
|
54
|
+
}
|
55
|
+
|
56
|
+
|
57
|
+
|