magic_stylez 0.0.0.99 → 0.0.330
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/Gemfile +1 -1
- data/lib/magic_stylez/version.rb +1 -1
- data/magic_stylez.gemspec +1 -2
- data/test/dummy/app/assets/javascripts/app.js.coffee +11 -50
- data/test/dummy/app/assets/javascripts/application.js +1 -1
- data/test/dummy/app/assets/javascripts/assets.js.coffee.erb +6 -0
- data/test/dummy/app/assets/javascripts/views/app/changelog.jst.eco +49 -2
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +13 -9
- data/test/dummy/app/assets/javascripts/views/helper/dots.jst.eco +21 -4
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +113 -51
- data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco +1 -10
- data/test/dummy/app/controllers/front_controller.rb +1 -0
- data/test/dummy/app/views/front/start.html.erb +3 -19
- data/test/dummy/app/views/layouts/application.html.erb +9 -0
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +2 -2
- data/test/dummy/public/html/index.html +6 -22
- data/test/dummy/public/html/slidebar-header.html +2 -2
- data/test/dummy/public/html/slidebar-subnav.html +2 -2
- data/vendor/assets/stylesheets/magic/content/_banner.scss +18 -4
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +1 -1
- data/vendor/assets/stylesheets/magic/content/_forms.scss +1 -1
- data/vendor/assets/stylesheets/magic/content/_helper.scss +3 -3
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +1 -1
- data/vendor/assets/stylesheets/magic/helper/_dots.scss +64 -0
- data/vendor/assets/stylesheets/magic/helper/_three_previews.scss +1 -1
- data/vendor/assets/stylesheets/magic/layout/_corset.scss +6 -6
- data/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss +16 -0
- data/vendor/assets/stylesheets/magic/layout/_section.scss +108 -113
- data/vendor/assets/stylesheets/magic/layout/_tables_v1.scss +2 -2
- data/vendor/assets/stylesheets/magic/layout/_tables_v2.scss +2 -2
- data/vendor/assets/stylesheets/magic/lib/_text.scss +2 -2
- data/vendor/assets/stylesheets/magic/lists/_nav.scss +44 -49
- metadata +12 -6
|
@@ -188,16 +188,7 @@
|
|
|
188
188
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
189
189
|
</div>
|
|
190
190
|
</div>
|
|
191
|
-
|
|
192
|
-
<div class="corset">
|
|
193
|
-
<h4>.image.fixed</h4>
|
|
194
|
-
<br/>
|
|
195
|
-
<p>with pictures makes more sensce ...</p>
|
|
196
|
-
<br/><br/><br/>
|
|
197
|
-
<br/><br/><br/>
|
|
198
|
-
<br/><br/><br/>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
191
|
+
|
|
201
192
|
|
|
202
193
|
<div class="section black">
|
|
203
194
|
<div class="corset">
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="corset">
|
|
3
3
|
<div class="row">
|
|
4
4
|
<div class="col-sm-9 col-xs-6">
|
|
5
|
-
<h1>magic-stylez
|
|
5
|
+
<h1>magic-stylez <small><%= MagicStylez::VERSION %></small></h1>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="col-sm-3 col-xs-6">
|
|
8
8
|
<a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
|
|
@@ -14,22 +14,6 @@
|
|
|
14
14
|
</div>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
<div class="section flatted">
|
|
19
|
-
<div class="corset tight">
|
|
20
|
-
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
<div class="section hard-top">
|
|
25
|
-
<div class="corset center_text">
|
|
26
|
-
<h2>Warning</h2>
|
|
27
|
-
<p class="loud">This Gem is still work in process!</p>
|
|
28
|
-
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
|
|
29
|
-
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
17
|
<div class="section hard-top">
|
|
34
18
|
<div class="corset tight">
|
|
35
19
|
<h3>Dependencies</h3>
|
|
@@ -82,7 +66,7 @@ CSS:
|
|
|
82
66
|
<br/>
|
|
83
67
|
<hr class="half" />
|
|
84
68
|
<br/>
|
|
85
|
-
<p class="louder">Please allways look in the
|
|
69
|
+
<p class="louder">Please allways look in the <a href="#app/changelog" data-target="app/changelog">Changelog</a> for recent chnages.</p>
|
|
86
70
|
<br/>
|
|
87
71
|
|
|
88
72
|
</div>
|
|
@@ -142,6 +126,6 @@ CSS:
|
|
|
142
126
|
|
|
143
127
|
<div class="section shine-top flatted">
|
|
144
128
|
<div class="corset">
|
|
145
|
-
<p class="center_text">©
|
|
129
|
+
<p class="center_text">© 2017 Torsten Wetzel (berlinmagic UG)</p>
|
|
146
130
|
</div>
|
|
147
131
|
</div>
|
|
@@ -31,6 +31,15 @@
|
|
|
31
31
|
</script>
|
|
32
32
|
</head>
|
|
33
33
|
<body class="main_template">
|
|
34
|
+
<% if @show_dev_bar && Rails.env.production? %>
|
|
35
|
+
<div style="display: block; position: fixed; top: 0; right: 0; background: rgba(0,0,0,.25); color: #fff; z-index: 1111; padding: 10px 30px;">
|
|
36
|
+
|
|
37
|
+
<a class="btn btn-warning pull-right" href="/cache_pages">
|
|
38
|
+
render pages
|
|
39
|
+
</a>
|
|
40
|
+
|
|
41
|
+
</div>
|
|
42
|
+
<% end %>
|
|
34
43
|
<a href="#" id="mobile_header" class="inline_table center_text">
|
|
35
44
|
<div class="cell icn col-1 middle">
|
|
36
45
|
<i class="olicons-show-sb"></i>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" 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 = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" 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 = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" 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 = {};
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
7
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
8
8
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
9
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
10
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
9
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-f6b944362b05ca8e034bddd1145b4433.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
13
13
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
14
14
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
|
|
15
15
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
<div class="corset">
|
|
125
125
|
<div class="row">
|
|
126
126
|
<div class="col-sm-9 col-xs-6">
|
|
127
|
-
<h1>magic-stylez</h1>
|
|
127
|
+
<h1>magic-stylez <small>0.1.1</small></h1>
|
|
128
128
|
</div>
|
|
129
129
|
<div class="col-sm-3 col-xs-6">
|
|
130
130
|
<a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
|
|
@@ -136,22 +136,6 @@
|
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
138
|
|
|
139
|
-
|
|
140
|
-
<div class="section flatted">
|
|
141
|
-
<div class="corset tight">
|
|
142
|
-
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<div class="section hard-top">
|
|
147
|
-
<div class="corset center_text">
|
|
148
|
-
<h2>Warning</h2>
|
|
149
|
-
<p class="loud">This Gem is still work in process!</p>
|
|
150
|
-
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
|
|
151
|
-
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
|
|
155
139
|
<div class="section hard-top">
|
|
156
140
|
<div class="corset tight">
|
|
157
141
|
<h3>Dependencies</h3>
|
|
@@ -204,7 +188,7 @@ CSS:
|
|
|
204
188
|
<br/>
|
|
205
189
|
<hr class="half" />
|
|
206
190
|
<br/>
|
|
207
|
-
<p class="louder">Please allways look in the
|
|
191
|
+
<p class="louder">Please allways look in the <a href="#app/changelog" data-target="app/changelog">Changelog</a> for recent chnages.</p>
|
|
208
192
|
<br/>
|
|
209
193
|
|
|
210
194
|
</div>
|
|
@@ -264,7 +248,7 @@ CSS:
|
|
|
264
248
|
|
|
265
249
|
<div class="section shine-top flatted">
|
|
266
250
|
<div class="corset">
|
|
267
|
-
<p class="center_text">©
|
|
251
|
+
<p class="center_text">© 2017 Torsten Wetzel (berlinmagic UG)</p>
|
|
268
252
|
</div>
|
|
269
253
|
</div>
|
|
270
254
|
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" 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 = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" 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 = {};
|
|
@@ -50,12 +50,12 @@
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
@each $clrName, $clrValue in $appColorz {
|
|
53
|
-
&.#{$clrName}-bg, .#{$clrName}-bg,
|
|
54
|
-
&.bg-#{$clrName}, .bg-#{$clrName} {
|
|
53
|
+
&.#{"" + $clrName}-bg, .#{"" + $clrName}-bg,
|
|
54
|
+
&.bg-#{"" + $clrName}, .bg-#{"" + $clrName} {
|
|
55
55
|
background: #{ $clrValue };
|
|
56
56
|
}
|
|
57
|
-
&.#{$clrName}-text, .#{$clrName}-text,
|
|
58
|
-
&.text-#{$clrName}, .text-#{$clrName} {
|
|
57
|
+
&.#{"" + $clrName}-text, .#{"" + $clrName}-text,
|
|
58
|
+
&.text-#{"" + $clrName}, .text-#{"" + $clrName} {
|
|
59
59
|
color: #{ $clrValue };
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -68,6 +68,20 @@
|
|
|
68
68
|
img { max-width: 100%; }
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
#banner-berlin {
|
|
72
|
+
background-color: rgba(255,255,255,.50);
|
|
73
|
+
background-position: center center;
|
|
74
|
+
background-repeat: no-repeat;
|
|
75
|
+
background-size: cover;
|
|
76
|
+
background-image: image-url('magic/bgs/seucide.jpg');
|
|
77
|
+
}
|
|
78
|
+
#banner-one {
|
|
79
|
+
background-color: rgba(255,255,255,.50);
|
|
80
|
+
background-position: center center;
|
|
81
|
+
background-repeat: no-repeat;
|
|
82
|
+
background-size: cover;
|
|
83
|
+
background-image: image-url("magic/bgs/hdr_landsberger.jpg");
|
|
84
|
+
}
|
|
71
85
|
|
|
72
86
|
.pic-bottom {
|
|
73
87
|
display: block; display: inline-block; position: relative;
|
|
@@ -102,7 +102,7 @@ form.corset, .form {
|
|
|
102
102
|
// input {
|
|
103
103
|
// display: block; position: relative;
|
|
104
104
|
// margin: 0; padding-left: 32px;
|
|
105
|
-
//
|
|
105
|
+
// box-sizing: border-box;
|
|
106
106
|
// width: 100%; height: 30px;
|
|
107
107
|
// @include placeholder_styles {
|
|
108
108
|
// color: rgba(0,0,0,.20);
|
|
@@ -78,11 +78,11 @@
|
|
|
78
78
|
// Background and Text colors
|
|
79
79
|
// -------------------------
|
|
80
80
|
@each $clrName, $clrValue in $appColorz {
|
|
81
|
-
.#{$clrName}-bg, .bg-#{$clrName} {
|
|
81
|
+
.#{"" + $clrName}-bg, .bg-#{"" + $clrName} {
|
|
82
82
|
background: #{ $clrValue };
|
|
83
83
|
}
|
|
84
|
-
.#{$clrName}-text, .text-#{$clrName}, .txt-#{$clrName}, .#{$clrName}-txt,
|
|
85
|
-
.clr-#{$clrName}, .#{$clrName}-clr, .color-#{$clrName}, .#{$clrName}-color {
|
|
84
|
+
.#{"" + $clrName}-text, .text-#{"" + $clrName}, .txt-#{"" + $clrName}, .#{"" + $clrName}-txt,
|
|
85
|
+
.clr-#{"" + $clrName}, .#{"" + $clrName}-clr, .color-#{"" + $clrName}, .#{"" + $clrName}-color {
|
|
86
86
|
color: #{ $clrValue };
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
padding: $padding-base-vertical $padding-base-horizontal $padding-base-vertical 5px;
|
|
77
77
|
margin: 0;
|
|
78
78
|
height: $input-height-base + 1;
|
|
79
|
-
|
|
79
|
+
box-sizing: border-box;
|
|
80
80
|
border: none;
|
|
81
81
|
@include box-shadow( none );
|
|
82
82
|
outline: none;
|
|
@@ -118,3 +118,67 @@
|
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
|
121
|
+
.numbered_time_line {
|
|
122
|
+
display: block; position: relative;
|
|
123
|
+
|
|
124
|
+
.numbered_line {
|
|
125
|
+
display: block; position: relative;
|
|
126
|
+
text-align: left;
|
|
127
|
+
padding: 6px 0 6px 50px;
|
|
128
|
+
margin: 0 0 40px;
|
|
129
|
+
|
|
130
|
+
.number_dot {
|
|
131
|
+
position: absolute;
|
|
132
|
+
left: 0; top: 0;
|
|
133
|
+
background: $brand-color;
|
|
134
|
+
border: none;
|
|
135
|
+
line-height: 40px;
|
|
136
|
+
font-weight: 300;
|
|
137
|
+
}
|
|
138
|
+
p {
|
|
139
|
+
margin: 0;
|
|
140
|
+
line-height: 28px;
|
|
141
|
+
color: #333 !important;
|
|
142
|
+
font-weight: 400;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&:before {
|
|
147
|
+
display: block; position: absolute;
|
|
148
|
+
margin: 0; padding: 0;
|
|
149
|
+
content: "";
|
|
150
|
+
top: 0; left: 19px; bottom: 0; width: 2px;
|
|
151
|
+
background: $brand-color;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
159
|
+
@include responsiveStep-sm {
|
|
160
|
+
|
|
161
|
+
.numbered_time_line {
|
|
162
|
+
.numbered_line {
|
|
163
|
+
&:nth-child(even) {
|
|
164
|
+
text-align: right;
|
|
165
|
+
margin-right: 50%;
|
|
166
|
+
padding: 6px 30px 6px 0px;
|
|
167
|
+
.number_dot { left: auto; right: -20px; }
|
|
168
|
+
}
|
|
169
|
+
&:nth-child(odd) {
|
|
170
|
+
margin-left: 50%;
|
|
171
|
+
padding: 6px 0px 6px 30px;
|
|
172
|
+
.number_dot { left: -20px; }
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
&:before {
|
|
176
|
+
margin-left: -1px;
|
|
177
|
+
left: 50%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
margin: 0 10px !important; // margin: 0 5%;
|
|
5
5
|
padding: 0;
|
|
6
6
|
background: transparent;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
width: auto;
|
|
8
|
+
// max-width: 1200px;
|
|
9
|
+
text-align: inherit;
|
|
10
|
+
&.left { text-align: left; }
|
|
11
|
+
&.right { text-align: right; }
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
&.full { margin: 0 10px !important; }
|
|
14
14
|
|
|
15
15
|
&.tight { margin: 0 30px !important; }
|
|
16
16
|
&.extra-tight { margin: 0 40px !important; }
|
|
@@ -4,6 +4,11 @@ html, body, #body {
|
|
|
4
4
|
// overflow-y: auto;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
$fullpageBrightBG: rgba(255,255,255,.42) !default;
|
|
9
|
+
$fullpageDarkBG: rgba(0,0,0,.23) !default;
|
|
10
|
+
|
|
11
|
+
|
|
7
12
|
.fullpage-table, div.table {
|
|
8
13
|
width: 100%;
|
|
9
14
|
display: block;
|
|
@@ -16,6 +21,17 @@ html, body, #body {
|
|
|
16
21
|
position: relative;
|
|
17
22
|
}
|
|
18
23
|
}
|
|
24
|
+
|
|
25
|
+
.header-cell, .footer-cell, .content-cell {
|
|
26
|
+
padding: 20px 0;
|
|
27
|
+
&.xs, &.flat { padding: 0; }
|
|
28
|
+
&.sm { padding: 10px 0; }
|
|
29
|
+
&.lg { padding: 30px 0; }
|
|
30
|
+
&.xl { padding: 40px 0; }
|
|
31
|
+
&.bright { background: $fullpageBrightBG; }
|
|
32
|
+
&.dark { background: $fullpageDarkBG; }
|
|
33
|
+
}
|
|
34
|
+
|
|
19
35
|
}
|
|
20
36
|
|
|
21
37
|
|
|
@@ -1,40 +1,35 @@
|
|
|
1
1
|
.section {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
display: block; position: relative;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: $section-padding 0;
|
|
5
|
+
// background: $white;
|
|
6
|
+
text-align: center;
|
|
7
7
|
|
|
8
8
|
font-size: $font-size-base;
|
|
9
|
+
|
|
9
10
|
.corset, .container { background: inherit; }
|
|
10
11
|
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
&.z, &.zindex, &.z-index { z-index: 1; }
|
|
13
14
|
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
&.image {
|
|
17
|
+
&.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.corset, .container { background: transparent; }
|
|
30
|
-
}
|
|
19
|
+
background-color: transparent;
|
|
20
|
+
background-position: center center;
|
|
21
|
+
background-repeat: no-repeat;
|
|
22
|
+
background-size: cover;
|
|
23
|
+
background-image: url('http://lorempixel.com/g/1200/500/nature/');
|
|
24
|
+
.corset, .container { background: transparent; }
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.noise {
|
|
28
|
+
.corset, .container { background: transparent; }
|
|
29
|
+
}
|
|
31
30
|
|
|
32
|
-
&.noise {
|
|
33
|
-
.corset, .container { background: transparent; }
|
|
34
|
-
}
|
|
35
31
|
|
|
36
|
-
|
|
37
|
-
//
|
|
32
|
+
//
|
|
38
33
|
// Header Section
|
|
39
34
|
//
|
|
40
35
|
&.head {
|
|
@@ -56,55 +51,55 @@
|
|
|
56
51
|
//
|
|
57
52
|
// Sections with shine
|
|
58
53
|
//
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
54
|
+
&.shine-top {
|
|
55
|
+
z-index: 1;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
&:before {
|
|
58
|
+
display: block; position: absolute; content: ""; z-index: 11;
|
|
59
|
+
margin: 0; padding: 0;
|
|
60
|
+
bottom: 100%; left: 10%; right: 10%; height: 100px;
|
|
61
|
+
@include spezial_radius( 500px / 20px );
|
|
62
|
+
@include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) );
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
&.shine-bottom {
|
|
66
|
+
z-index: 1;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
&:after {
|
|
69
|
+
display: block; position: absolute; content: ""; z-index: 11;
|
|
70
|
+
margin: 0; padding: 0;
|
|
71
|
+
top: 100%; left: 10%; right: 10%; height: 100px;
|
|
72
|
+
@include spezial_radius( 500px / 20px );
|
|
73
|
+
@include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) );
|
|
74
|
+
}
|
|
75
|
+
}
|
|
81
76
|
|
|
82
77
|
|
|
83
78
|
//
|
|
84
79
|
// Border Stylez
|
|
85
80
|
//
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
81
|
+
&.hard-top {
|
|
82
|
+
border-top: solid 1px $main-border-color;
|
|
83
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
84
|
+
}
|
|
90
85
|
&.hard-bottom {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
86
|
+
border-bottom: solid 1px rgba(255,255,255,.75);
|
|
87
|
+
@include box-shadow( inset 0 -1px 1px 0 $main-border-color );
|
|
88
|
+
}
|
|
94
89
|
&.hard-top.hard-bottom {
|
|
95
|
-
|
|
90
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
|
|
96
91
|
}
|
|
97
92
|
|
|
98
93
|
&.dotted-top {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
94
|
+
border-top: dotted 2px $gray-light;
|
|
95
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
96
|
+
}
|
|
102
97
|
&.dotted-bottom {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
98
|
+
border-bottom: dotted 2px $gray-light;
|
|
99
|
+
@include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
100
|
+
}
|
|
106
101
|
&.dotted-top, &.dotted-bottom {
|
|
107
|
-
|
|
102
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
108
103
|
}
|
|
109
104
|
|
|
110
105
|
//
|
|
@@ -119,7 +114,7 @@
|
|
|
119
114
|
|
|
120
115
|
&.flat { padding-top: 0; padding-bottom: 0; }
|
|
121
116
|
&.flat-top { padding-top: 0; }
|
|
122
|
-
|
|
117
|
+
&.flat-bottom { padding-bottom: 0; }
|
|
123
118
|
|
|
124
119
|
|
|
125
120
|
//
|
|
@@ -128,17 +123,17 @@
|
|
|
128
123
|
background: $section-background;
|
|
129
124
|
@include all_form_elements { background: $section-input-bg; }
|
|
130
125
|
|
|
131
|
-
|
|
126
|
+
&.dark {
|
|
132
127
|
background: $section-dark-background;
|
|
133
128
|
.three-previews .preview { border-color: $main-border-color; }
|
|
134
129
|
@include all_form_elements { background: $section-dark-input-bg; }
|
|
135
|
-
|
|
136
|
-
|
|
130
|
+
}
|
|
131
|
+
&.black {
|
|
137
132
|
background: #333;
|
|
138
133
|
color: #fff;
|
|
139
134
|
.three-previews .preview { border-color: $main-border-color; }
|
|
140
135
|
@include all_form_elements { background: $section-dark-input-bg; }
|
|
141
|
-
|
|
136
|
+
}
|
|
142
137
|
&.bright {
|
|
143
138
|
background: $section-bright-background;
|
|
144
139
|
@include all_form_elements { background: $section-bright-input-bg; }
|
|
@@ -151,9 +146,9 @@
|
|
|
151
146
|
background: $section-soft-background;
|
|
152
147
|
@include all_form_elements { background: $section-soft-input-bg; }
|
|
153
148
|
}
|
|
154
|
-
|
|
149
|
+
&.blank { background: transparent; }
|
|
155
150
|
|
|
156
|
-
|
|
151
|
+
&.one {
|
|
157
152
|
background: $section-one-background;
|
|
158
153
|
@include all_form_elements { background: $section-one-input-bg; }
|
|
159
154
|
}
|
|
@@ -171,49 +166,49 @@
|
|
|
171
166
|
// Speech Section
|
|
172
167
|
//
|
|
173
168
|
&.speech {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
169
|
+
&:after {
|
|
170
|
+
display: block; position: absolute; content: "";
|
|
171
|
+
margin: 0; padding: 0;
|
|
172
|
+
width: 0; height: 0;
|
|
173
|
+
border: solid 10px transparent;
|
|
174
|
+
border-right: solid 10px $section-background;
|
|
175
|
+
border-bottom: solid 10px $section-background;
|
|
176
|
+
bottom: -8px;
|
|
177
|
+
left: 50%;
|
|
178
|
+
margin-left: -8px;
|
|
179
|
+
@include rotation( 45 );
|
|
180
|
+
z-index: 99;
|
|
181
|
+
}
|
|
182
|
+
&.dark:after {
|
|
183
|
+
border-right: solid 10px $section-dark-background;
|
|
184
|
+
border-bottom: solid 10px $section-dark-background;
|
|
185
|
+
}
|
|
186
|
+
&.bright:after {
|
|
187
|
+
border-right: solid 10px $section-bright-background;
|
|
188
|
+
border-bottom: solid 10px $section-bright-background;
|
|
189
|
+
}
|
|
190
|
+
&.brand:after {
|
|
191
|
+
border-right: solid 10px $section-brand-background;
|
|
192
|
+
border-bottom: solid 10px $section-brand-background;
|
|
193
|
+
}
|
|
194
|
+
&.soft:after {
|
|
195
|
+
border-right: solid 10px $section-soft-background;
|
|
196
|
+
border-bottom: solid 10px $section-soft-background;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
&.one:after {
|
|
200
|
+
border-right: solid 10px $section-one-background;
|
|
201
|
+
border-bottom: solid 10px $section-one-background;
|
|
202
|
+
}
|
|
203
|
+
&.two:after {
|
|
204
|
+
border-right: solid 10px $section-two-background;
|
|
205
|
+
border-bottom: solid 10px $section-two-background;
|
|
206
|
+
}
|
|
207
|
+
&.three:after {
|
|
208
|
+
border-right: solid 10px $section-three-background;
|
|
209
|
+
border-bottom: solid 10px $section-three-background;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
217
212
|
|
|
218
213
|
|
|
219
214
|
//
|