magic_stylez 0.0.0.36 → 0.0.0.37
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/README.md +19 -0
- data/test/dummy/app/assets/javascripts/app.js.coffee +4 -0
- data/test/dummy/app/assets/javascripts/blank.js.coffee +20 -0
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +2 -2
- data/test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco +5 -0
- data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco +1 -1
- data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco +1 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +14 -3
- data/test/dummy/app/assets/stylesheets/corporate/_fonts.scss +4 -0
- data/test/dummy/app/assets/stylesheets/corporate/_typo.scss +2 -0
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +94 -0
- data/test/dummy/app/controllers/front_controller.rb +1 -1
- data/test/dummy/app/views/front/templates.html.erb +1 -1
- data/test/dummy/app/views/layouts/application.html.erb +1 -1
- data/test/dummy/app/views/layouts/blank.html.erb +1 -3
- data/test/dummy/app/views/templates/aside-nav.html.erb +137 -0
- data/test/dummy/app/views/templates/fixed-header.html.erb +45 -43
- data/test/dummy/app/views/templates/responsive-slidebar.html.erb +48 -46
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/favicon.png +0 -0
- data/test/dummy/public/html/aside-nav.html +241 -0
- data/test/dummy/public/html/fixed-header.html +46 -45
- data/test/dummy/public/html/index.html +5 -4
- data/test/dummy/public/html/responsive-slidebar.html +49 -48
- data/vendor/assets/stylesheets/corporate/_fonts.scss +4 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +45 -0
- data/vendor/assets/stylesheets/magic/content/_aside_nav.scss +139 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +50 -43
- data/vendor/assets/stylesheets/magic/content/_notice.scss +79 -0
- data/vendor/assets/stylesheets/magic/lib/_cross_browser.scss +10 -0
- data/vendor/assets/stylesheets/magic-min.scss +2 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +2 -0
- metadata +16 -6
- data/test/dummy/README.rdoc +0 -28
- data/test/dummy/app/assets/javascripts/blank.js +0 -14
|
@@ -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-
|
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-f918aae554a8856b66a0c2ecbe9563ab.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-e24761c35145d776b425c86f5e799ba6.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="mJIIBfIfZTs56CNC/8lLMT6TO6QpJFB2BDO1030Bluc=" 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 = {};
|
|
@@ -14,56 +14,56 @@
|
|
|
14
14
|
</script>
|
|
15
15
|
</head>
|
|
16
16
|
<body class="blank">
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
|
|
18
|
+
<div class="corset">
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</a>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
22
|
+
<div class="navbar-header">
|
|
23
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
|
|
24
|
+
<span class="sr-only">Toggle navigation</span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
<span class="icon-bar"></span>
|
|
27
|
+
<span class="icon-bar"></span>
|
|
28
|
+
</button>
|
|
29
|
+
<a class="navbar-brand" href="#">Magic-Stylez</a>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
32
|
+
<ul class="nav navbar-nav navbar-left">
|
|
33
|
+
<li><a href="#">Jobs</a></li>
|
|
34
|
+
<li><a href="#">Jobs</a></li>
|
|
35
|
+
<li><a class="btn btn-success" href="#">Jobs</a></li>
|
|
36
|
+
</ul>
|
|
37
|
+
<ul class="nav navbar-nav navbar-right">
|
|
38
|
+
<li class="dropdown">
|
|
39
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
40
|
+
Hallo <b class="caret"></b>
|
|
41
|
+
</a> <ul class="dropdown-menu">
|
|
42
|
+
<li><a href="#">Link 1</a></li>
|
|
43
|
+
<li><a href="#">Link 2</a></li>
|
|
44
|
+
<li><a href="#">Link 3</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
</ul>
|
|
48
|
+
</div>
|
|
49
49
|
|
|
50
|
+
</div>
|
|
50
51
|
</div>
|
|
51
|
-
</div>
|
|
52
52
|
|
|
53
|
-
<div class="main_content fixed-nav-xl">
|
|
53
|
+
<div class="main_content fixed-nav-xl">
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
55
|
+
<div class="section brand">
|
|
56
|
+
<div class="corset">
|
|
57
|
+
<h1>usual twbs header plus some improvements</h1>
|
|
58
|
+
<br/>
|
|
59
|
+
<p class="loud">just niced up button alignment (no <em>.navbar-btn</em> needed) .. add sizes: <em>.navbar-xs, .navbar-sm, .navbar-lg, .navbar-xl</em></p>
|
|
60
|
+
<br/>
|
|
61
|
+
<h4>dependency:</h4>
|
|
62
|
+
<code>@import "magic/content/navbar";</code>
|
|
63
|
+
</div>
|
|
63
64
|
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
65
|
|
|
66
|
+
|
|
67
67
|
|
|
68
68
|
<div class="section">
|
|
69
69
|
<div class="corset">
|
|
@@ -154,6 +154,7 @@
|
|
|
154
154
|
</div>
|
|
155
155
|
|
|
156
156
|
|
|
157
|
-
</div>
|
|
157
|
+
</div>
|
|
158
158
|
</body>
|
|
159
|
+
|
|
159
160
|
</html>
|
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-f918aae554a8856b66a0c2ecbe9563ab.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-a07afe5044cb917746751dbde81cd1ea.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="mJIIBfIfZTs56CNC/8lLMT6TO6QpJFB2BDO1030Bluc=" 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 = {};
|
|
13
13
|
App.Environment = "production";
|
|
14
14
|
</script>
|
|
15
15
|
</head>
|
|
16
|
-
<body>
|
|
16
|
+
<body class="main_template">
|
|
17
17
|
<div id="aside">
|
|
18
18
|
<div class="aside-content">
|
|
19
19
|
<ul class="nav_list dark">
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
</li>
|
|
63
63
|
<li><a class="lst_lnk" href="#">Templates</a>
|
|
64
64
|
<ul class="sub_nav">
|
|
65
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/aside-nav" href="#">Aside Nav</a></li>
|
|
65
66
|
<li><a class="app_lnk lst_lnk" data-target="templates/fixed_header" href="#">Fixed Header</a></li>
|
|
66
67
|
<li><a class="app_lnk lst_lnk" data-target="templates/responsive_slidebar" href="#">Responsive Slidebar</a></li>
|
|
67
68
|
</ul>
|
|
@@ -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-
|
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-f918aae554a8856b66a0c2ecbe9563ab.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-e24761c35145d776b425c86f5e799ba6.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="mJIIBfIfZTs56CNC/8lLMT6TO6QpJFB2BDO1030Bluc=" 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 = {};
|
|
@@ -14,60 +14,60 @@
|
|
|
14
14
|
</script>
|
|
15
15
|
</head>
|
|
16
16
|
<body class="blank">
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
|
18
|
+
<div class="corset">
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
<div class="navbar-header">
|
|
23
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
|
24
|
+
<span class="sr-only">Toggle navigation</span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
<span class="icon-bar"></span>
|
|
27
|
+
<span class="icon-bar"></span>
|
|
28
|
+
</button>
|
|
29
|
+
<a class="navbar-brand" href="#">Magic-Stylez</a>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
32
|
+
<ul class="nav navbar-nav navbar-left">
|
|
33
|
+
<li><a href="#">Link</a></li>
|
|
34
|
+
<li><a href="#">Link</a></li>
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</a>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
</ul>
|
|
37
|
+
<ul class="nav navbar-nav navbar-right">
|
|
38
|
+
<li class="dropdown">
|
|
39
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
40
|
+
Dropdown <b class="caret"></b>
|
|
41
|
+
</a> <ul class="dropdown-menu">
|
|
42
|
+
<li><a href="#">Link 1</a></li>
|
|
43
|
+
<li><a href="#">Link 2</a></li>
|
|
44
|
+
<li><a href="#">Link 3</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
|
48
|
+
</ul>
|
|
49
|
+
</div>
|
|
50
50
|
|
|
51
|
+
</div>
|
|
51
52
|
</div>
|
|
52
|
-
</div>
|
|
53
53
|
|
|
54
|
-
<div class="main_content fixed-nav">
|
|
54
|
+
<div class="main_content fixed-nav">
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
56
|
+
<div class="section brand">
|
|
57
|
+
<div class="corset">
|
|
58
|
+
<h1>Responsive Slidebar</h1>
|
|
59
|
+
<br/>
|
|
60
|
+
<p class="loud">
|
|
61
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
|
62
|
+
make your screen smaller than 768px and press the header-toggle
|
|
63
|
+
</p>
|
|
64
|
+
<br/>
|
|
65
|
+
<h4>dependency:</h4>
|
|
66
|
+
<code>@import "magic/content/navbar";</code>
|
|
67
|
+
</div>
|
|
67
68
|
</div>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
69
|
|
|
70
|
+
|
|
71
71
|
|
|
72
72
|
<div class="section">
|
|
73
73
|
<div class="corset">
|
|
@@ -157,6 +157,7 @@
|
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
|
|
160
|
-
</div>
|
|
160
|
+
</div>
|
|
161
161
|
</body>
|
|
162
|
+
|
|
162
163
|
</html>
|
|
@@ -95,6 +95,7 @@ $magicHandwritten: 'Gloria Hallelujah', cursive;
|
|
|
95
95
|
$smallReadFont: $magicCondensedSans;
|
|
96
96
|
$readFont: $magicSans;
|
|
97
97
|
$bigFont: $magicSans;
|
|
98
|
+
$alternateBigFont: $magicSans;
|
|
98
99
|
$dekoFont: $magicHandwritten;
|
|
99
100
|
|
|
100
101
|
|
|
@@ -102,11 +103,13 @@ $dekoFont: $magicHandwritten;
|
|
|
102
103
|
@mixin smallReadFont { font-family: $smallReadFont; }
|
|
103
104
|
@mixin readFont { font-family: $readFont; }
|
|
104
105
|
@mixin bigFont { font-family: $bigFont; }
|
|
106
|
+
@mixin alternateBigFont { font-family: $alternateBigFont; }
|
|
105
107
|
@mixin dekoFont { font-family: $dekoFont; }
|
|
106
108
|
|
|
107
109
|
.smallReadFont { @include smallReadFont; }
|
|
108
110
|
.readFont { @include readFont; }
|
|
109
111
|
.bigFont { @include bigFont; }
|
|
112
|
+
.alternateBigFont { @include alternateBigFont; }
|
|
110
113
|
.dekoFont { @include dekoFont; }
|
|
111
114
|
|
|
112
115
|
|
|
@@ -117,6 +120,7 @@ $dekoFont: $magicHandwritten;
|
|
|
117
120
|
|
|
118
121
|
|
|
119
122
|
|
|
123
|
+
|
|
120
124
|
// C S S - F O N T S
|
|
121
125
|
|
|
122
126
|
@mixin eingabeText { font-family: $lucida-grande; }
|
|
@@ -139,6 +139,8 @@ $zindex-dropdown: 1000 !default;
|
|
|
139
139
|
$zindex-popover: 1060 !default;
|
|
140
140
|
$zindex-tooltip: 1070 !default;
|
|
141
141
|
$zindex-navbar-fixed: 1030 !default;
|
|
142
|
+
$zindex-aside-nav: 1030 !default;
|
|
143
|
+
$zindex-important-notice: 1020 !default;
|
|
142
144
|
$zindex-modal-background: 1040 !default;
|
|
143
145
|
$zindex-modal: 1050 !default;
|
|
144
146
|
|
|
@@ -217,12 +219,55 @@ $container-large-desktop: ((1140px + $grid-gutter-width)) !default;
|
|
|
217
219
|
$container-lg: $container-large-desktop !default;
|
|
218
220
|
|
|
219
221
|
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
//== Important Notice
|
|
225
|
+
//
|
|
226
|
+
//##
|
|
227
|
+
$important-notice-height: 30px !default;
|
|
228
|
+
|
|
229
|
+
$important-notice-top: 0px !default;
|
|
230
|
+
$important-notice-bottom: auto !default;
|
|
231
|
+
|
|
232
|
+
$important-notice-font-size: 16px !default;
|
|
233
|
+
$important-notice-font-weight: 300 !default;
|
|
234
|
+
$important-notice-link-weight: 600 !default;
|
|
235
|
+
|
|
236
|
+
$important-notice-bg: #e5e5e5 !default;
|
|
237
|
+
$important-notice-color: #333 !default;
|
|
238
|
+
$important-notice-link-color: $important-notice-color !default;
|
|
239
|
+
|
|
240
|
+
$important-notice-warning-bg: #e3d396 !default;
|
|
241
|
+
$important-notice-warning-color: #cc3300 !default;
|
|
242
|
+
$important-notice-warning-link-color: $important-notice-warning-color !default;
|
|
243
|
+
|
|
244
|
+
$important-notice-alert-bg: #db321a !default;
|
|
245
|
+
$important-notice-alert-color: #fff !default;
|
|
246
|
+
$important-notice-alert-link-color: $important-notice-alert-color !default;
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
//== Aside-Navigation
|
|
250
|
+
//
|
|
251
|
+
//##
|
|
252
|
+
$aside-nav-width: 50px !default;
|
|
253
|
+
$aside-nav-btn-height: 50px !default;
|
|
254
|
+
$aside-nav-avatar-height: 60px !default;
|
|
255
|
+
|
|
256
|
+
$aside-nav-background: #e1e1e1 !default;
|
|
257
|
+
$aside-nav-border-color: #cccccc !default;
|
|
258
|
+
|
|
259
|
+
|
|
220
260
|
//== Navbar
|
|
221
261
|
//
|
|
222
262
|
//##
|
|
223
263
|
|
|
224
264
|
// Basics of a navbar
|
|
265
|
+
$navbar-height-xs: 30px !default;
|
|
266
|
+
$navbar-height-sm: 40px !default;
|
|
225
267
|
$navbar-height: 50px !default;
|
|
268
|
+
$navbar-height-lg: 60px !default;
|
|
269
|
+
$navbar-height-xl: 80px !default;
|
|
270
|
+
|
|
226
271
|
$navbar-margin-bottom: $line-height-computed !default;
|
|
227
272
|
$navbar-border-radius: $border-radius-base !default;
|
|
228
273
|
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
// mobile first on the bottom
|
|
2
|
+
#nav-aside {
|
|
3
|
+
display: block; position: fixed;
|
|
4
|
+
margin: 0; padding: 0;
|
|
5
|
+
right: 0; left: 0; bottom: 0;
|
|
6
|
+
|
|
7
|
+
// Render via GPU (for better scrolling performance)
|
|
8
|
+
@include gpu_render;
|
|
9
|
+
|
|
10
|
+
background: $aside-nav-background;
|
|
11
|
+
z-index: $zindex-aside-nav;
|
|
12
|
+
|
|
13
|
+
.inner-aside { height: 100%; }
|
|
14
|
+
|
|
15
|
+
.aside-btn {
|
|
16
|
+
display: block; display: inline-block; position: relative;
|
|
17
|
+
margin: 0; padding: 0;
|
|
18
|
+
width: $aside-nav-width;
|
|
19
|
+
line-height: $aside-nav-btn-height;
|
|
20
|
+
text-align: center; vertical-align: middle;
|
|
21
|
+
font-size: 22px;
|
|
22
|
+
|
|
23
|
+
border: none;
|
|
24
|
+
|
|
25
|
+
color: #555;
|
|
26
|
+
text-shadow: 0 1px 0 rgba( 255,255,255,.42 );
|
|
27
|
+
|
|
28
|
+
&:hover {
|
|
29
|
+
color: $brand-color;
|
|
30
|
+
text-decoration: none;
|
|
31
|
+
}
|
|
32
|
+
&:active, &.active {
|
|
33
|
+
background: $brand-color;
|
|
34
|
+
color: #fff;
|
|
35
|
+
@include antialiased_text;
|
|
36
|
+
// @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
|
|
37
|
+
text-shadow: 0 1px 2px rgba( 0,0,0,.42 );
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.user-pic {
|
|
41
|
+
height: $aside-nav-avatar-height; max-height: $aside-nav-avatar-height;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
img {
|
|
45
|
+
display: block; display: inline-block; position: relative;
|
|
46
|
+
width: 100%; max-width: $aside-nav-width;
|
|
47
|
+
vertical-align: middle;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.bubble-counter {
|
|
52
|
+
display: block; position: absolute;
|
|
53
|
+
padding: 0 5px; margin: 0;
|
|
54
|
+
top: 3px; left: 27px;
|
|
55
|
+
line-height: 14px;
|
|
56
|
+
font-size: 10px;
|
|
57
|
+
background: #cc4246;
|
|
58
|
+
@include border-radius( 2px );
|
|
59
|
+
color: #fff;
|
|
60
|
+
text-shadow: 0 1px 1px rgba( 0,0,0,.20 );
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.bordered {
|
|
65
|
+
.inner-aside { border: solid 1px $aside-nav-border-color; }
|
|
66
|
+
.aside-btn {
|
|
67
|
+
margin: 0 -1px;
|
|
68
|
+
border: solid 1px #ccc;
|
|
69
|
+
border-top: solid 1px rgba(255,255,255,.42);
|
|
70
|
+
&:active, &.active {
|
|
71
|
+
border: solid 1px darken($brand-color, 15%);
|
|
72
|
+
@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
@include responsiveStep-xs-only {
|
|
80
|
+
#nav-aside .inner-aside {
|
|
81
|
+
display: table;
|
|
82
|
+
table-layout:fixed;
|
|
83
|
+
width: 100%;
|
|
84
|
+
.aside-btn {
|
|
85
|
+
display: table-cell;
|
|
86
|
+
width: auto;
|
|
87
|
+
// border: none;
|
|
88
|
+
// border-right: solid 1px #ccc;
|
|
89
|
+
// &:last-child { border-right: none; }
|
|
90
|
+
// &:hover { border-bottom: solid 2px #999; }
|
|
91
|
+
// &:active, &.active { border-bottom: solid 2px $main-active-color; }
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
@include responsiveStep-sm {
|
|
96
|
+
|
|
97
|
+
#nav-aside {
|
|
98
|
+
top: 0; right: auto;
|
|
99
|
+
.aside-btn {
|
|
100
|
+
display: block;
|
|
101
|
+
// border: none;
|
|
102
|
+
// border-bottom: solid 1px #ccc;
|
|
103
|
+
// &:hover { border-right: solid 2px #999; }
|
|
104
|
+
// &:active, &.active { border-right: solid 2px $main-active-color; }
|
|
105
|
+
}
|
|
106
|
+
&.bordered {
|
|
107
|
+
.aside-btn:last-child { @include box-shadow( 0 1px 0 0 rgba(255,255,255,.42) ); }
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
body {
|
|
112
|
+
|
|
113
|
+
&.with_aside_nav {
|
|
114
|
+
padding-left: 50px;
|
|
115
|
+
|
|
116
|
+
#flash_msg { margin-left: 50px; }
|
|
117
|
+
.fixed-top, .navbar-fixed-top { left: 50px; }
|
|
118
|
+
|
|
119
|
+
&.aside_next_header {
|
|
120
|
+
#nav-aside { top: 0; }
|
|
121
|
+
.fixed-top, .navbar-fixed-top { left: 50px; }
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.aside_under_header {
|
|
125
|
+
.fixed-top, .navbar-fixed-top { left: 0; }
|
|
126
|
+
&.fixed-nav-xs { #nav-aside { top: $navbar-height-xs; } }
|
|
127
|
+
&.fixed-nav-sm { #nav-aside { top: $navbar-height-sm; } }
|
|
128
|
+
&.fixed-nav { #nav-aside { top: $navbar-height; } }
|
|
129
|
+
&.fixed-nav-lg { #nav-aside { top: $navbar-height-lg; } }
|
|
130
|
+
&.fixed-nav-xl { #nav-aside { top: $navbar-height-xl; } }
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
}
|