Migrated from @blog -> @site
[editorial.git] / assets / main / sass / layout / _sidebar.scss
1 ///
2 /// Editorial by HTML5 UP
3 /// html5up.net | @ajlkn
4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5 ///
6
7 /* Sidebar */
8
9 #search {
10 form {
11 @include icon;
12 position: relative;
13
14 &:before {
15 @include vendor('transform', 'scaleX(-1)');
16 color: _palette(fg);
17 content: '\f002';
18 cursor: default;
19 display: block;
20 font-size: 1.5em;
21 height: _size(element-height) / 1.375;
22 line-height: _size(element-height) / 1.375;
23 opacity: 0.325;
24 position: absolute;
25 right: 0;
26 text-align: center;
27 top: 0;
28 width: _size(element-height) / 1.375;
29 }
30
31 input[type="text"] {
32 padding-right: _size(element-height);
33 }
34 }
35 }
36
37 #sidebar {
38 $pad: 2em / 0.9;
39
40 @include vendor('flex-grow', '0');
41 @include vendor('flex-shrink', '0');
42 @include vendor('transition', (
43 'margin-left 0.5s ease',
44 'box-shadow 0.5s ease'
45 ));
46 background-color: _palette(bg-alt);
47 font-size: 0.9em;
48 position: relative;
49 width: _size(sidebar-width);
50
51 h2 {
52 font-size: (1.25em / 0.9);
53 }
54
55 > .inner {
56 @include padding($pad, $pad, (0, 0, $pad, 0));
57 position: relative;
58 width: _size(sidebar-width);
59
60 > * {
61 border-bottom: solid 2px _palette(border);
62 margin: 0 0 (_size(element-margin) * 1.75) 0;
63 padding: 0 0 (_size(element-margin) * 1.75) 0;
64
65 > :last-child {
66 margin-bottom: 0;
67 }
68
69 &:last-child {
70 border-bottom: 0;
71 margin-bottom: 0;
72 padding-bottom: 0;
73 }
74 }
75
76 > .alt {
77 background-color: darken(_palette(bg-alt), 2);
78 border-bottom: 0;
79 margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
80 padding: $pad;
81 width: calc(100% + #{$pad * 2});
82 }
83 }
84
85 .toggle {
86 @include icon;
87 @include vendor('transition', 'left 0.5s ease');
88 -webkit-tap-highlight-color: rgba(255,255,255,0);
89 border: 0;
90 display: block;
91 height: 7.5em;
92 left: _size(sidebar-width);
93 line-height: 7.5em;
94 outline: 0;
95 overflow: hidden;
96 position: absolute;
97 text-align: center;
98 text-indent: 7.5em;
99 top: 0;
100 width: 6em;
101 z-index: _misc(z-index-base);
102
103 &:before {
104 content: '\f0c9';
105 font-size: 2rem;
106 height: inherit;
107 left: 0;
108 line-height: inherit;
109 position: absolute;
110 text-indent: 0;
111 top: 0;
112 width: inherit;
113 }
114 }
115
116 &.inactive {
117 margin-left: (_size(sidebar-width) * -1);
118 }
119
120 @include breakpoint('<=xlarge') {
121 $pad: 1.5em / 0.9;
122
123 width: _size(sidebar-width-alt);
124
125 > .inner {
126 @include padding($pad, $pad, (0, 0, $pad, 0));
127 width: _size(sidebar-width-alt);
128
129 > .alt {
130 margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
131 padding: $pad;
132 width: calc(100% + #{$pad * 2});
133 }
134 }
135
136 .toggle {
137 height: 6.25em;
138 left: _size(sidebar-width-alt);
139 line-height: 6.25em;
140 text-indent: 5em;
141 width: 5em;
142
143 &:before {
144 font-size: 1.5rem;
145 }
146 }
147
148 &.inactive {
149 margin-left: (_size(sidebar-width-alt) * -1);
150 }
151 }
152
153 @include breakpoint('<=large') {
154 box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
155 height: 100%;
156 left: 0;
157 position: fixed;
158 top: 0;
159 z-index: _misc(z-index-base);
160
161 &.inactive {
162 box-shadow: none;
163 }
164
165 > .inner {
166 -webkit-overflow-scrolling: touch;
167 height: 100%;
168 left: 0;
169 overflow-x: hidden;
170 overflow-y: auto;
171 position: absolute;
172 top: 0;
173
174 &:after {
175 content: '';
176 display: block;
177 height: 4em;
178 width: 100%;
179 }
180 }
181
182 .toggle {
183 text-indent: 6em;
184 width: 6em;
185
186 &:before {
187 font-size: 1.5rem;
188 margin-left: (-0.875em / 2);
189 }
190 }
191
192 body.is-preload & {
193 display: none;
194 }
195 }
196
197 @include breakpoint('<=small') {
198 .toggle {
199 text-indent: 7.25em;
200 width: 7.25em;
201
202 &:before {
203 color: _palette(fg);
204 margin-left: (-0.125em / 2);
205 margin-top: (-0.5em / 2);
206 font-size: 1.1rem;
207 z-index: 1;
208 }
209
210 &:after {
211 background: transparentize(lighten(_palette(fg), 35), 0.25);
212 border-radius: _size(border-radius);
213 content: '';
214 height: 3.5em;
215 left: 1em;
216 position: absolute;
217 top: 1em;
218 width: 5em;
219 }
220 }
221 }
222 }