magic_stylez 0.0.0.27 → 0.0.0.28
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +24 -2
- data/lib/generators/magic_stylez/install_generator.rb +56 -0
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +43 -15
- data/test/dummy/app/assets/javascripts/views/content/{_box.jst.eco → box.jst.eco} +0 -0
- data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +8 -8
- data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +7 -2
- data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +6 -6
- data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco +7 -4
- data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +12 -5
- data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +8 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -3
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss +28 -22
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_fonts.scss +5 -0
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss +14 -8
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss +6 -0
- data/test/dummy/app/views/front/_aside.html.erb +3 -1
- data/test/dummy/app/views/front/start.html.erb +49 -27
- data/test/dummy/app/views/templates/fixed-header.html.erb +4 -4
- data/test/dummy/public/html/{fixed-header.html.erb → fixed-header.html} +6 -6
- data/test/dummy/public/html/index.html +65 -45
- data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} +2 -2
- data/vendor/assets/stylesheets/corporate/_colors.scss +285 -0
- data/vendor/assets/stylesheets/corporate/_fonts.scss +157 -0
- data/vendor/assets/stylesheets/corporate/_typo.scss +85 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +640 -0
- data/vendor/assets/stylesheets/magic-min.scss +62 -0
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +25 -1
- data/vendor/assets/stylesheets/magic/content/_forms.scss +25 -0
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +4 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +67 -0
- data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -20
- data/vendor/assets/stylesheets/magic/layout/_section.scss +33 -32
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +68 -0
- data/vendor/assets/stylesheets/magic/lib/_twbs.scss +4 -4
- metadata +21 -11
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-30d990160e44c5b6df4f8af9d27cb74e.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-dabc2fee75a487407fe0cb5afbceec09.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="2QEaNnpTAPmpIpX0chCJ9EFDgbgs6uOKuOtBgNx56h4=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Magic-Stylez - Colors
|
|
3
|
+
//
|
|
4
|
+
// if you like to change values, remove the '!default' flag!
|
|
5
|
+
//
|
|
6
|
+
//
|
|
7
|
+
//== Colors
|
|
8
|
+
//
|
|
9
|
+
// -------------------------
|
|
10
|
+
// Gray colors
|
|
11
|
+
// -------------------------
|
|
12
|
+
$black: #1c1c1c !default;
|
|
13
|
+
$gray-darker: lighten(#000, 13.5%) !default; // #222
|
|
14
|
+
$gray-dark: lighten(#000, 20%) !default; // #333
|
|
15
|
+
$gray: lighten(#000, 33.5%) !default; // #555
|
|
16
|
+
$gray-light: lighten(#000, 60%) !default; // #999
|
|
17
|
+
$gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
|
18
|
+
$gray-soft: #f0f0f0 !default;
|
|
19
|
+
$gray-softer: #f9f9f9 !default;
|
|
20
|
+
$white: #ffffff !default;
|
|
21
|
+
// -------------------------
|
|
22
|
+
// Accent colors
|
|
23
|
+
// -------------------------
|
|
24
|
+
$blue-soft: #9dcfe1 !default;
|
|
25
|
+
$blue-lighter: #d8e7ec !default;
|
|
26
|
+
$blue-light: #0099cc !default;
|
|
27
|
+
$blue: #006699 !default;
|
|
28
|
+
$blue-dark: darken($blue, 15%) !default;
|
|
29
|
+
$green: #006600 !default;
|
|
30
|
+
$red: #9d261d !default;
|
|
31
|
+
$red-dark: darkred !default;
|
|
32
|
+
$yellow: #ffc40d !default;
|
|
33
|
+
$orange: #ff6600 !default;
|
|
34
|
+
$pink: #c3325f !default;
|
|
35
|
+
$purple: #7a43b6 !default;
|
|
36
|
+
$violett: #ac4d83 !default;
|
|
37
|
+
// -------------------------
|
|
38
|
+
// Brand colors
|
|
39
|
+
// -------------------------
|
|
40
|
+
$brand-color: #a0c775 !default;
|
|
41
|
+
$brand-primary: #336699 !default; // twbs-default: #428bca
|
|
42
|
+
$brand-success: #006600 !default; // twbs-default: #5cb85c
|
|
43
|
+
$brand-info: #0099cc !default; // twbs-default: #5bc0de
|
|
44
|
+
$brand-warning: #f0ad4e !default; // twbs-default: #f0ad4e
|
|
45
|
+
$brand-danger: #d9534f !default; // twbs-default: #d9534f
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
// -------------------------
|
|
52
|
+
// Global Background colors.
|
|
53
|
+
// -------------------------
|
|
54
|
+
$main-bg: darken(#fff, 5%) !default; // result: #f2f2f2
|
|
55
|
+
$body-bg: $main-bg; //** Background color for `<body>`
|
|
56
|
+
$dark-bg: #e5e5e5 !default;
|
|
57
|
+
$soft-bg: #f8f8f8 !default;
|
|
58
|
+
$blue-bg: $blue-soft !default;
|
|
59
|
+
$brand-bg: $brand-color !default;
|
|
60
|
+
$bright-bg: $white !default;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
// -------------------------
|
|
64
|
+
// Global Border color
|
|
65
|
+
// -------------------------
|
|
66
|
+
$main-border-color: #ccc !default;
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
// -------------------------
|
|
70
|
+
// Global Text colors
|
|
71
|
+
// -------------------------
|
|
72
|
+
//** Global text color on `<body>`.
|
|
73
|
+
$text-color: $gray-dark !default;
|
|
74
|
+
//** Global textual link color.
|
|
75
|
+
$link-color: $brand-primary !default;
|
|
76
|
+
//** Link hover color set via `darken()` function.
|
|
77
|
+
$link-hover-color: darken($link-color, 15%) !default;
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
//== Components
|
|
85
|
+
|
|
86
|
+
//** Global color for active items (e.g., navs or dropdowns).
|
|
87
|
+
$component-active-color: #fff !default;
|
|
88
|
+
//** Global background color for active items (e.g., navs or dropdowns).
|
|
89
|
+
$component-active-bg: $brand-primary !default;
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
// -------------------------
|
|
94
|
+
// Buttons
|
|
95
|
+
// -------------------------
|
|
96
|
+
$btn-default-color: #333 !default;
|
|
97
|
+
$btn-default-bg: #fff !default;
|
|
98
|
+
$btn-default-border: #ccc !default;
|
|
99
|
+
|
|
100
|
+
$btn-primary-color: #fff !default;
|
|
101
|
+
$btn-primary-bg: $brand-primary !default;
|
|
102
|
+
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
|
|
103
|
+
|
|
104
|
+
$btn-success-color: #fff !default;
|
|
105
|
+
$btn-success-bg: $brand-success !default;
|
|
106
|
+
$btn-success-border: darken($btn-success-bg, 5%) !default;
|
|
107
|
+
|
|
108
|
+
$btn-info-color: #fff !default;
|
|
109
|
+
$btn-info-bg: $brand-info !default;
|
|
110
|
+
$btn-info-border: darken($btn-info-bg, 5%) !default;
|
|
111
|
+
|
|
112
|
+
$btn-warning-color: #fff !default;
|
|
113
|
+
$btn-warning-bg: $brand-warning !default;
|
|
114
|
+
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
|
|
115
|
+
|
|
116
|
+
$btn-danger-color: #fff !default;
|
|
117
|
+
$btn-danger-bg: $brand-danger !default;
|
|
118
|
+
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
|
|
119
|
+
|
|
120
|
+
$btn-link-disabled-color: $gray-light !default;
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
// -------------------------
|
|
124
|
+
// Social Buttons
|
|
125
|
+
// -------------------------
|
|
126
|
+
// Flat Colors
|
|
127
|
+
$btn-facebook-color: #fff !default;
|
|
128
|
+
$btn-facebook-bg: #3b5998 !default;
|
|
129
|
+
$btn-facebook-border: darken($btn-facebook-bg, 5%) !default;
|
|
130
|
+
|
|
131
|
+
$btn-google-color: #fff !default;
|
|
132
|
+
$btn-google-bg: #dd4b39 !default;
|
|
133
|
+
$btn-google-border: darken($btn-google-bg, 5%) !default;
|
|
134
|
+
|
|
135
|
+
$btn-paypal-color: #fff !default;
|
|
136
|
+
$btn-paypal-bg: #1784cb !default; // was #12398c
|
|
137
|
+
$btn-paypal-border: darken($btn-paypal-bg, 5%) !default;
|
|
138
|
+
|
|
139
|
+
$btn-twitter-color: #fff !default;
|
|
140
|
+
$btn-twitter-bg: #00aced !default;
|
|
141
|
+
$btn-twitter-border: darken($btn-twitter-bg, 5%) !default;
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
// Gradient Colors
|
|
145
|
+
$facebook-gradient-top: lighten($btn-facebook-bg, 7%);
|
|
146
|
+
$facebook-gradient-bottom: darken($btn-facebook-bg, 7%);
|
|
147
|
+
$google-gradient-top: lighten($btn-google-bg, 7%);
|
|
148
|
+
$google-gradient-bottom: darken($btn-google-bg, 7%);
|
|
149
|
+
$twitter-gradient-top: lighten($btn-twitter-bg, 7%);
|
|
150
|
+
$twitter-gradient-bottom: darken($btn-twitter-bg, 7%);
|
|
151
|
+
$paypal-gradient-top: #52b9f4;
|
|
152
|
+
$paypal-gradient-bottom: darken(#1784cb, 5%);
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
//== Forms
|
|
158
|
+
//
|
|
159
|
+
//##
|
|
160
|
+
|
|
161
|
+
//** `<input>` background color
|
|
162
|
+
$input-bg: #fff !default;
|
|
163
|
+
//** `<input disabled>` background color
|
|
164
|
+
$input-bg-disabled: $gray-lighter !default;
|
|
165
|
+
|
|
166
|
+
//** Text color for `<input>`s
|
|
167
|
+
$input-color: $gray !default;
|
|
168
|
+
//** `<input>` border color
|
|
169
|
+
$input-border: #ccc !default;
|
|
170
|
+
//** Border color for inputs on focus
|
|
171
|
+
$input-border-focus: #66afe9 !default;
|
|
172
|
+
|
|
173
|
+
//** Placeholder text color
|
|
174
|
+
$input-color-placeholder: $gray-light !default;
|
|
175
|
+
|
|
176
|
+
$legend-color: $gray-dark !default;
|
|
177
|
+
$legend-border-color: #e5e5e5 !default;
|
|
178
|
+
|
|
179
|
+
//** Background color for textual input addons
|
|
180
|
+
$input-group-addon-bg: $gray-lighter !default;
|
|
181
|
+
//** Border color for textual input addons
|
|
182
|
+
$input-group-addon-border-color: $input-border !default;
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
//== Tables
|
|
186
|
+
//
|
|
187
|
+
//** Default background color used for all tables.
|
|
188
|
+
$table-bg: transparent !default;
|
|
189
|
+
//** Background color used for `.table-striped`.
|
|
190
|
+
$table-bg-accent: #f9f9f9 !default;
|
|
191
|
+
//** Background color used for `.table-hover`.
|
|
192
|
+
$table-bg-hover: #f5f5f5 !default;
|
|
193
|
+
$table-bg-active: $table-bg-hover !default;
|
|
194
|
+
|
|
195
|
+
//** Border color for table and cell borders.
|
|
196
|
+
$table-border-color: #ddd !default;
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
//== Dropdowns
|
|
200
|
+
//
|
|
201
|
+
//## Dropdown menu container and contents.
|
|
202
|
+
|
|
203
|
+
//** Background for the dropdown menu.
|
|
204
|
+
$dropdown-bg: #fff !default;
|
|
205
|
+
//** Dropdown menu `border-color`.
|
|
206
|
+
$dropdown-border: rgba(0,0,0,.15) !default;
|
|
207
|
+
//** Dropdown menu `border-color` **for IE8**.
|
|
208
|
+
$dropdown-fallback-border: #ccc !default;
|
|
209
|
+
//** Divider color for between dropdown items.
|
|
210
|
+
$dropdown-divider-bg: #e5e5e5 !default;
|
|
211
|
+
|
|
212
|
+
//** Dropdown link text color.
|
|
213
|
+
$dropdown-link-color: $gray-dark !default;
|
|
214
|
+
//** Hover color for dropdown links.
|
|
215
|
+
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
|
216
|
+
//** Hover background for dropdown links.
|
|
217
|
+
$dropdown-link-hover-bg: #f5f5f5 !default;
|
|
218
|
+
|
|
219
|
+
//** Active dropdown menu item text color.
|
|
220
|
+
$dropdown-link-active-color: $component-active-color !default;
|
|
221
|
+
//** Active dropdown menu item background color.
|
|
222
|
+
$dropdown-link-active-bg: $component-active-bg !default;
|
|
223
|
+
|
|
224
|
+
//** Disabled dropdown menu item background color.
|
|
225
|
+
$dropdown-link-disabled-color: $gray-light !default;
|
|
226
|
+
|
|
227
|
+
//** Text color for headers within dropdown menus.
|
|
228
|
+
$dropdown-header-color: $gray-light !default;
|
|
229
|
+
|
|
230
|
+
//** Deprecated `$dropdown-caret-color` as of v3.1.0
|
|
231
|
+
$dropdown-caret-color: #000 !default;
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
//== Navbar
|
|
236
|
+
//
|
|
237
|
+
//##
|
|
238
|
+
$navbar-default-color: #777 !default;
|
|
239
|
+
$navbar-default-bg: #f8f8f8 !default;
|
|
240
|
+
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
|
241
|
+
|
|
242
|
+
// Navbar links
|
|
243
|
+
$navbar-default-link-color: #777 !default;
|
|
244
|
+
$navbar-default-link-hover-color: #333 !default;
|
|
245
|
+
$navbar-default-link-hover-bg: transparent !default;
|
|
246
|
+
$navbar-default-link-active-color: #555 !default;
|
|
247
|
+
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
|
|
248
|
+
$navbar-default-link-disabled-color: #ccc !default;
|
|
249
|
+
$navbar-default-link-disabled-bg: transparent !default;
|
|
250
|
+
|
|
251
|
+
// Navbar brand label
|
|
252
|
+
$navbar-default-brand-color: $navbar-default-link-color !default;
|
|
253
|
+
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
|
|
254
|
+
$navbar-default-brand-hover-bg: transparent !default;
|
|
255
|
+
|
|
256
|
+
// Navbar toggle
|
|
257
|
+
$navbar-default-toggle-hover-bg: #ddd !default;
|
|
258
|
+
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
|
259
|
+
$navbar-default-toggle-border-color: #ddd !default;
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
// Inverted navbar
|
|
263
|
+
// Reset inverted navbar basics
|
|
264
|
+
$navbar-inverse-color: $gray-light !default;
|
|
265
|
+
$navbar-inverse-bg: #222 !default;
|
|
266
|
+
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
|
|
267
|
+
|
|
268
|
+
// Inverted navbar links
|
|
269
|
+
$navbar-inverse-link-color: $gray-light !default;
|
|
270
|
+
$navbar-inverse-link-hover-color: #fff !default;
|
|
271
|
+
$navbar-inverse-link-hover-bg: transparent !default;
|
|
272
|
+
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
|
273
|
+
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
|
|
274
|
+
$navbar-inverse-link-disabled-color: #444 !default;
|
|
275
|
+
$navbar-inverse-link-disabled-bg: transparent !default;
|
|
276
|
+
|
|
277
|
+
// Inverted navbar brand label
|
|
278
|
+
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
|
279
|
+
$navbar-inverse-brand-hover-color: #fff !default;
|
|
280
|
+
$navbar-inverse-brand-hover-bg: transparent !default;
|
|
281
|
+
|
|
282
|
+
// Inverted navbar toggle
|
|
283
|
+
$navbar-inverse-toggle-hover-bg: #333 !default;
|
|
284
|
+
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
|
285
|
+
$navbar-inverse-toggle-border-color: #333 !default;
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Magic-Stylez - Fonts
|
|
3
|
+
//
|
|
4
|
+
// if you like to change values, remove the '!default' flag!
|
|
5
|
+
//
|
|
6
|
+
//
|
|
7
|
+
// F O N T S
|
|
8
|
+
//
|
|
9
|
+
|
|
10
|
+
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
11
|
+
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
|
12
|
+
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
//
|
|
16
|
+
// webfonts
|
|
17
|
+
//
|
|
18
|
+
|
|
19
|
+
// goolge
|
|
20
|
+
// $magicSans: "Open Sans", $sansFontFamily;
|
|
21
|
+
// $magicCondensedSans: "Open Sans Condensed", $sansFontFamily;
|
|
22
|
+
// $magicHandwritten: 'Satisfy', cursive;
|
|
23
|
+
|
|
24
|
+
// typekit (Adobe)
|
|
25
|
+
// $magicSans: "Montserrat", $sansFontFamily;
|
|
26
|
+
// $magicCondensedSans: "Lato", $sansFontFamily;
|
|
27
|
+
// $magicHandwritten: "ff-market-web", cursive;
|
|
28
|
+
|
|
29
|
+
$magicSans: $sansFontFamily;
|
|
30
|
+
$magicCondensedSans: $sansFontFamily;
|
|
31
|
+
$magicHandwritten: 'Gloria Hallelujah', cursive;
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
// Open Sans
|
|
37
|
+
.sans {
|
|
38
|
+
font-family: $magicSans;
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
&.thin, .thin { font-weight: 300; }
|
|
41
|
+
&.regular, .regular { font-weight: 400; }
|
|
42
|
+
&.sbold, .sbold { font-weight: 600; }
|
|
43
|
+
&.bold, .bold { font-weight: 700; }
|
|
44
|
+
&.ebold, .ebold { font-weight: 800; }
|
|
45
|
+
}
|
|
46
|
+
@mixin sansThin {
|
|
47
|
+
// font-family: 'Open Sans', sans-serif;
|
|
48
|
+
font-family: $magicSans;
|
|
49
|
+
font-weight: 300;
|
|
50
|
+
}
|
|
51
|
+
@mixin sansRegular {
|
|
52
|
+
font-family: $magicSans;
|
|
53
|
+
font-weight: 400;
|
|
54
|
+
}
|
|
55
|
+
@mixin sansSemi {
|
|
56
|
+
font-family: $magicSans;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
}
|
|
59
|
+
@mixin sansBold {
|
|
60
|
+
font-family: $magicSans;
|
|
61
|
+
font-weight: 700;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
// Open Sans Condensed
|
|
66
|
+
.sansCondensed {
|
|
67
|
+
font-family: $magicCondensedSans;
|
|
68
|
+
font-weight: 300;
|
|
69
|
+
&.thin, .thin { font-weight: 300; }
|
|
70
|
+
&.bold, .bold { font-weight: 700; }
|
|
71
|
+
}
|
|
72
|
+
@mixin sansCondensedThin {
|
|
73
|
+
font-family: $magicCondensedSans;
|
|
74
|
+
font-weight: 300;
|
|
75
|
+
}
|
|
76
|
+
@mixin sansCondensedBold {
|
|
77
|
+
font-family: $magicCondensedSans;
|
|
78
|
+
font-weight: 700;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
// Specials
|
|
83
|
+
.handWrittenFont {
|
|
84
|
+
font-family: $magicHandwritten;
|
|
85
|
+
font-weight: 400;
|
|
86
|
+
}
|
|
87
|
+
@mixin handWrittenFont {
|
|
88
|
+
font-family: $magicHandwritten;
|
|
89
|
+
font-weight: 400;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
// variable
|
|
95
|
+
$smallReadFont: $magicCondensedSans;
|
|
96
|
+
$readFont: $magicSans;
|
|
97
|
+
$bigFont: $magicSans;
|
|
98
|
+
$dekoFont: $magicHandwritten;
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
// mixin
|
|
102
|
+
@mixin smallReadFont { font-family: $smallReadFont; }
|
|
103
|
+
@mixin readFont { font-family: $readFont; }
|
|
104
|
+
@mixin bigFont { font-family: $bigFont; }
|
|
105
|
+
@mixin dekoFont { font-family: $dekoFont; }
|
|
106
|
+
|
|
107
|
+
.smallReadFont { @include smallReadFont; }
|
|
108
|
+
.readFont { @include readFont; }
|
|
109
|
+
.bigFont { @include bigFont; }
|
|
110
|
+
.dekoFont { @include dekoFont; }
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
// C S S - F O N T S
|
|
121
|
+
|
|
122
|
+
@mixin eingabeText { font-family: $lucida-grande; }
|
|
123
|
+
|
|
124
|
+
@mixin profileText {
|
|
125
|
+
font-family: $lucida-grande;
|
|
126
|
+
color: #333;
|
|
127
|
+
font-size: 12px;
|
|
128
|
+
line-height: 20px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@mixin titelText {
|
|
132
|
+
@include sansSemi;
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
line-height: 20px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@mixin subTextSmall {
|
|
138
|
+
@include sansRegular;
|
|
139
|
+
font-size: 12px;
|
|
140
|
+
line-height: 20px;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
// ------------------------------- S C H R I F T G R O E S S E N -------------------------------
|
|
145
|
+
|
|
146
|
+
$magicDefaultFontSize: 13px;
|
|
147
|
+
$magicDefaultLineHight: 18px;
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
@mixin magicDefaultFont {
|
|
151
|
+
@include readFont;
|
|
152
|
+
font-size: $magicDefaultFontSize;
|
|
153
|
+
line-height: $magicDefaultLineHight;
|
|
154
|
+
} // ..
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|