magic_stylez 0.0.0.36 → 0.0.0.37
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.
- 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
|
+
}
|