Commit defa641e7e90049b0237403b61188ce75b786f24
1 parent
921031b3
Exists in
master
and in
29 other branches
Added initial structure with header + left sidebar into responsive features
Showing
94 changed files
with
3668 additions
and
3 deletions
Show diff stats
plugins/responsive/lib/ext/application_helper.rb
... | ... | @@ -370,6 +370,35 @@ module ApplicationHelper |
370 | 370 | form_for(name, { builder: NoosferoFormBuilder }.merge(options), &proc) |
371 | 371 | end |
372 | 372 | |
373 | + # | |
374 | + # @todo Move this method to core application_helper.rb | |
375 | + # and make a merge request to master branch of noosfero | |
376 | + # | |
377 | + def method_missing(name, *args) | |
378 | + name = name.to_s | |
379 | + | |
380 | + if name.start_with? 'theme_' | |
381 | + | |
382 | + if name.include? '_not_user' | |
383 | + return include_partial name unless logged_in? | |
384 | + return | |
385 | + | |
386 | + elsif name.include? '_user' and !name.include? '_not' | |
387 | + return unless logged_in? | |
388 | + end | |
389 | + | |
390 | + include_partial name | |
391 | + end | |
392 | + end | |
393 | + | |
394 | + private | |
395 | + | |
396 | + def include_partial(name) | |
397 | + theme_value = self.instance_variable_get('@'+name) || theme_include(name.gsub('theme_','')) | |
398 | + | |
399 | + self.instance_variable_set('@'+name,theme_value) | |
400 | + end | |
401 | + | |
373 | 402 | # TODO: Make optional fields compliant to horizontal form |
374 | 403 | # def optional_field profile, name, field_html = nil, only_required = false, &block |
375 | 404 | # end |
... | ... | @@ -419,4 +448,3 @@ module ApplicationHelper |
419 | 448 | end |
420 | 449 | |
421 | 450 | end |
422 | - | ... | ... |
plugins/responsive/views/layouts/_menu_responsive.html.erb
1 | 1 | <% user = (session[:user] && User.find_by_id(session[:user])) || nil %> |
2 | 2 | <div> |
3 | -<nav id="top-bar" class="navbar navbar-default navbar-static-top" role="navigation"> | |
3 | +<nav id="top-bar" class="navbar navbar-default" role="navigation"> | |
4 | 4 | <div class="container"> |
5 | 5 | <!-- Brand and toggle get grouped for better mobile display --> |
6 | 6 | <div class="navbar-header"> |
... | ... | @@ -19,7 +19,6 @@ |
19 | 19 | <span class="icon-bar"></span> |
20 | 20 | </button> |
21 | 21 | |
22 | - <a class="navbar-brand" href="<%= environment.top_url %>"><%= theme_site_title %><%= h @environment.name %></a> | |
23 | 22 | </div> |
24 | 23 | |
25 | 24 | <!-- Collect the nav links, forms, and other content for toggling --> | ... | ... |
public/designs/themes/cube-responsive/bootstrap/_variables.scss
0 → 100644
... | ... | @@ -0,0 +1,864 @@ |
1 | +// When true, asset path helpers are used, otherwise the regular CSS `url()` is used. | |
2 | +// When there no function is defined, `fn('')` is parsed as string that equals the right hand side | |
3 | +// NB: in Sass 3.3 there is a native function: function-exists(twbs-font-path) | |
4 | +$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default; | |
5 | + | |
6 | +// | |
7 | +// Variables | |
8 | +// -------------------------------------------------- | |
9 | + | |
10 | + | |
11 | +//== Colors | |
12 | +// | |
13 | +//## Gray and brand colors for use across Bootstrap. | |
14 | + | |
15 | +$gray-base: #000 !default; | |
16 | +$gray-darker: lighten($gray-base, 13.5%) !default; // #222 | |
17 | +$gray-dark: lighten($gray-base, 20%) !default; // #333 | |
18 | +$gray: lighten($gray-base, 33.5%) !default; // #555 | |
19 | +$gray-light: lighten($gray-base, 46.7%) !default; // #777 | |
20 | +$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee | |
21 | + | |
22 | +$brand-primary: darken(#428bca, 6.5%) !default; | |
23 | +$brand-success: #5cb85c !default; | |
24 | +$brand-info: #5bc0de !default; | |
25 | +$brand-warning: #f0ad4e !default; | |
26 | +$brand-danger: #d9534f !default; | |
27 | + | |
28 | + | |
29 | +//== Scaffolding | |
30 | +// | |
31 | +//## Settings for some of the most global styles. | |
32 | + | |
33 | +//** Background color for `<body>`. | |
34 | +$body-bg: #fff !default; | |
35 | +//** Global text color on `<body>`. | |
36 | +$text-color: $gray-dark !default; | |
37 | + | |
38 | +//** Global textual link color. | |
39 | +$link-color: $brand-primary !default; | |
40 | +//** Link hover color set via `darken()` function. | |
41 | +$link-hover-color: darken($link-color, 15%) !default; | |
42 | +//** Link hover decoration. | |
43 | +$link-hover-decoration: underline !default; | |
44 | + | |
45 | + | |
46 | +//== Typography | |
47 | +// | |
48 | +//## Font, line-height, and color for body text, headings, and more. | |
49 | + | |
50 | +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; | |
51 | +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; | |
52 | +//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. | |
53 | +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; | |
54 | +$font-family-base: $font-family-sans-serif !default; | |
55 | + | |
56 | +$font-size-base: 14px !default; | |
57 | +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px | |
58 | +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px | |
59 | + | |
60 | +$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px | |
61 | +$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px | |
62 | +$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px | |
63 | +$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px | |
64 | +$font-size-h5: $font-size-base !default; | |
65 | +$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px | |
66 | + | |
67 | +//** Unit-less `line-height` for use in components like buttons. | |
68 | +$line-height-base: 1.428571429 !default; // 20/14 | |
69 | +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. | |
70 | +$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px | |
71 | + | |
72 | +//** By default, this inherits from the `<body>`. | |
73 | +$headings-font-family: inherit !default; | |
74 | +$headings-font-weight: 500 !default; | |
75 | +$headings-line-height: 1.1 !default; | |
76 | +$headings-color: inherit !default; | |
77 | + | |
78 | + | |
79 | +//== Iconography | |
80 | +// | |
81 | +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. | |
82 | + | |
83 | +//** Load fonts from this directory. | |
84 | + | |
85 | +// [converter] Asset helpers such as Sprockets and Node.js Mincer do not resolve relative paths | |
86 | +$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; | |
87 | + | |
88 | +//** File name for all font files. | |
89 | +$icon-font-name: "glyphicons-halflings-regular" !default; | |
90 | +//** Element ID within SVG icon file. | |
91 | +$icon-font-svg-id: "glyphicons_halflingsregular" !default; | |
92 | + | |
93 | + | |
94 | +//== Components | |
95 | +// | |
96 | +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). | |
97 | + | |
98 | +$padding-base-vertical: 6px !default; | |
99 | +$padding-base-horizontal: 12px !default; | |
100 | + | |
101 | +$padding-large-vertical: 10px !default; | |
102 | +$padding-large-horizontal: 16px !default; | |
103 | + | |
104 | +$padding-small-vertical: 5px !default; | |
105 | +$padding-small-horizontal: 10px !default; | |
106 | + | |
107 | +$padding-xs-vertical: 1px !default; | |
108 | +$padding-xs-horizontal: 5px !default; | |
109 | + | |
110 | +$line-height-large: 1.33 !default; | |
111 | +$line-height-small: 1.5 !default; | |
112 | + | |
113 | +$border-radius-base: 4px !default; | |
114 | +$border-radius-large: 6px !default; | |
115 | +$border-radius-small: 3px !default; | |
116 | + | |
117 | +//** Global color for active items (e.g., navs or dropdowns). | |
118 | +$component-active-color: #fff !default; | |
119 | +//** Global background color for active items (e.g., navs or dropdowns). | |
120 | +$component-active-bg: $brand-primary !default; | |
121 | + | |
122 | +//** Width of the `border` for generating carets that indicator dropdowns. | |
123 | +$caret-width-base: 4px !default; | |
124 | +//** Carets increase slightly in size for larger components. | |
125 | +$caret-width-large: 5px !default; | |
126 | + | |
127 | + | |
128 | +//== Tables | |
129 | +// | |
130 | +//## Customizes the `.table` component with basic values, each used across all table variations. | |
131 | + | |
132 | +//** Padding for `<th>`s and `<td>`s. | |
133 | +$table-cell-padding: 8px !default; | |
134 | +//** Padding for cells in `.table-condensed`. | |
135 | +$table-condensed-cell-padding: 5px !default; | |
136 | + | |
137 | +//** Default background color used for all tables. | |
138 | +$table-bg: transparent !default; | |
139 | +//** Background color used for `.table-striped`. | |
140 | +$table-bg-accent: #f9f9f9 !default; | |
141 | +//** Background color used for `.table-hover`. | |
142 | +$table-bg-hover: #f5f5f5 !default; | |
143 | +$table-bg-active: $table-bg-hover !default; | |
144 | + | |
145 | +//** Border color for table and cell borders. | |
146 | +$table-border-color: #ddd !default; | |
147 | + | |
148 | + | |
149 | +//== Buttons | |
150 | +// | |
151 | +//## For each of Bootstrap's buttons, define text, background and border color. | |
152 | + | |
153 | +$btn-font-weight: normal; | |
154 | + | |
155 | +$btn-default-color: #fff; | |
156 | +$btn-default-bg: $gray-light; | |
157 | +$btn-default-border: $btn-default-bg; | |
158 | + | |
159 | +$btn-primary-color: $btn-default-color; | |
160 | +$btn-primary-bg: $brand-primary; | |
161 | +$btn-primary-border: $btn-primary-bg; | |
162 | + | |
163 | +$btn-success-color: $btn-default-color; | |
164 | +$btn-success-bg: $brand-success; | |
165 | +$btn-success-border: $btn-success-bg; | |
166 | + | |
167 | +$btn-info-color: $btn-default-color; | |
168 | +$btn-info-bg: $brand-info; | |
169 | +$btn-info-border: $btn-info-bg; | |
170 | + | |
171 | +$btn-warning-color: $btn-default-color; | |
172 | +$btn-warning-bg: $brand-warning; | |
173 | +$btn-warning-border: $btn-warning-bg; | |
174 | + | |
175 | +$btn-danger-color: $btn-default-color; | |
176 | +$btn-danger-bg: $brand-danger; | |
177 | +$btn-danger-border: $btn-danger-bg; | |
178 | + | |
179 | +$btn-link-disabled-color: $gray-light; | |
180 | + | |
181 | + | |
182 | +//== Forms | |
183 | +// | |
184 | +//## | |
185 | + | |
186 | +//** `<input>` background color | |
187 | +$input-bg: #fff !default; | |
188 | +//** `<input disabled>` background color | |
189 | +$input-bg-disabled: $gray-lighter !default; | |
190 | + | |
191 | +//** Text color for `<input>`s | |
192 | +$input-color: $gray !default; | |
193 | +//** `<input>` border color | |
194 | +$input-border: #ccc !default; | |
195 | + | |
196 | +// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 | |
197 | +//** Default `.form-control` border radius | |
198 | +$input-border-radius: $border-radius-base !default; | |
199 | +//** Large `.form-control` border radius | |
200 | +$input-border-radius-large: $border-radius-large !default; | |
201 | +//** Small `.form-control` border radius | |
202 | +$input-border-radius-small: $border-radius-small !default; | |
203 | + | |
204 | +//** Border color for inputs on focus | |
205 | +$input-border-focus: #66afe9 !default; | |
206 | + | |
207 | +//** Placeholder text color | |
208 | +$input-color-placeholder: #999 !default; | |
209 | + | |
210 | +//** Default `.form-control` height | |
211 | +$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; | |
212 | +//** Large `.form-control` height | |
213 | +$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; | |
214 | +//** Small `.form-control` height | |
215 | +$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; | |
216 | + | |
217 | +$legend-color: $gray-dark !default; | |
218 | +$legend-border-color: #e5e5e5 !default; | |
219 | + | |
220 | +//** Background color for textual input addons | |
221 | +$input-group-addon-bg: $gray-lighter !default; | |
222 | +//** Border color for textual input addons | |
223 | +$input-group-addon-border-color: $input-border !default; | |
224 | + | |
225 | +//** Disabled cursor for form controls and buttons. | |
226 | +$cursor-disabled: not-allowed !default; | |
227 | + | |
228 | + | |
229 | +//== Dropdowns | |
230 | +// | |
231 | +//## Dropdown menu container and contents. | |
232 | + | |
233 | +//** Background for the dropdown menu. | |
234 | +$dropdown-bg: #fff !default; | |
235 | +//** Dropdown menu `border-color`. | |
236 | +$dropdown-border: rgba(0,0,0,.15) !default; | |
237 | +//** Dropdown menu `border-color` **for IE8**. | |
238 | +$dropdown-fallback-border: #ccc !default; | |
239 | +//** Divider color for between dropdown items. | |
240 | +$dropdown-divider-bg: #e5e5e5 !default; | |
241 | + | |
242 | +//** Dropdown link text color. | |
243 | +$dropdown-link-color: $gray-dark !default; | |
244 | +//** Hover color for dropdown links. | |
245 | +$dropdown-link-hover-color: darken($gray-dark, 5%) !default; | |
246 | +//** Hover background for dropdown links. | |
247 | +$dropdown-link-hover-bg: #f5f5f5 !default; | |
248 | + | |
249 | +//** Active dropdown menu item text color. | |
250 | +$dropdown-link-active-color: $component-active-color !default; | |
251 | +//** Active dropdown menu item background color. | |
252 | +$dropdown-link-active-bg: $component-active-bg !default; | |
253 | + | |
254 | +//** Disabled dropdown menu item background color. | |
255 | +$dropdown-link-disabled-color: $gray-light !default; | |
256 | + | |
257 | +//** Text color for headers within dropdown menus. | |
258 | +$dropdown-header-color: $gray-light !default; | |
259 | + | |
260 | +//** Deprecated `$dropdown-caret-color` as of v3.1.0 | |
261 | +$dropdown-caret-color: #000 !default; | |
262 | + | |
263 | + | |
264 | +//-- Z-index master list | |
265 | +// | |
266 | +// Warning: Avoid customizing these values. They're used for a bird's eye view | |
267 | +// of components dependent on the z-axis and are designed to all work together. | |
268 | +// | |
269 | +// Note: These variables are not generated into the Customizer. | |
270 | + | |
271 | +$zindex-navbar: 1000 !default; | |
272 | +$zindex-dropdown: 1000 !default; | |
273 | +$zindex-popover: 1060 !default; | |
274 | +$zindex-tooltip: 1070 !default; | |
275 | +$zindex-navbar-fixed: 1030 !default; | |
276 | +$zindex-modal: 1040 !default; | |
277 | + | |
278 | + | |
279 | +//== Media queries breakpoints | |
280 | +// | |
281 | +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. | |
282 | + | |
283 | +// Extra small screen / phone | |
284 | +//** Deprecated `$screen-xs` as of v3.0.1 | |
285 | +$screen-xs: 480px !default; | |
286 | +//** Deprecated `$screen-xs-min` as of v3.2.0 | |
287 | +$screen-xs-min: $screen-xs !default; | |
288 | +//** Deprecated `$screen-phone` as of v3.0.1 | |
289 | +$screen-phone: $screen-xs-min !default; | |
290 | + | |
291 | +// Small screen / tablet | |
292 | +//** Deprecated `$screen-sm` as of v3.0.1 | |
293 | +$screen-sm: 768px !default; | |
294 | +$screen-sm-min: $screen-sm !default; | |
295 | +//** Deprecated `$screen-tablet` as of v3.0.1 | |
296 | +$screen-tablet: $screen-sm-min !default; | |
297 | + | |
298 | +// Medium screen / desktop | |
299 | +//** Deprecated `$screen-md` as of v3.0.1 | |
300 | +$screen-md: 992px !default; | |
301 | +$screen-md-min: $screen-md !default; | |
302 | +//** Deprecated `$screen-desktop` as of v3.0.1 | |
303 | +$screen-desktop: $screen-md-min !default; | |
304 | + | |
305 | +// Large screen / wide desktop | |
306 | +//** Deprecated `$screen-lg` as of v3.0.1 | |
307 | +$screen-lg: 1200px !default; | |
308 | +$screen-lg-min: $screen-lg !default; | |
309 | +//** Deprecated `$screen-lg-desktop` as of v3.0.1 | |
310 | +$screen-lg-desktop: $screen-lg-min !default; | |
311 | + | |
312 | +// So media queries don't overlap when required, provide a maximum | |
313 | +$screen-xs-max: ($screen-sm-min - 1) !default; | |
314 | +$screen-sm-max: ($screen-md-min - 1) !default; | |
315 | +$screen-md-max: ($screen-lg-min - 1) !default; | |
316 | + | |
317 | + | |
318 | +//== Grid system | |
319 | +// | |
320 | +//## Define your custom responsive grid. | |
321 | + | |
322 | +//** Number of columns in the grid. | |
323 | +$grid-columns: 12 !default; | |
324 | +//** Padding between columns. Gets divided in half for the left and right. | |
325 | +$grid-gutter-width: 30px !default; | |
326 | +// Navbar collapse | |
327 | +//** Point at which the navbar becomes uncollapsed. | |
328 | +$grid-float-breakpoint: $screen-sm-min !default; | |
329 | +//** Point at which the navbar begins collapsing. | |
330 | +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; | |
331 | + | |
332 | + | |
333 | +//== Container sizes | |
334 | +// | |
335 | +//## Define the maximum width of `.container` for different screen sizes. | |
336 | + | |
337 | +// Small screen / tablet | |
338 | +$container-tablet: (720px + $grid-gutter-width) !default; | |
339 | +//** For `$screen-sm-min` and up. | |
340 | +$container-sm: $container-tablet !default; | |
341 | + | |
342 | +// Medium screen / desktop | |
343 | +$container-desktop: (940px + $grid-gutter-width) !default; | |
344 | +//** For `$screen-md-min` and up. | |
345 | +$container-md: $container-desktop !default; | |
346 | + | |
347 | +// Large screen / wide desktop | |
348 | +$container-large-desktop: (1140px + $grid-gutter-width) !default; | |
349 | +//** For `$screen-lg-min` and up. | |
350 | +$container-lg: $container-large-desktop !default; | |
351 | + | |
352 | + | |
353 | +//== Navbar | |
354 | +// | |
355 | +//## | |
356 | + | |
357 | +// Basics of a navbar | |
358 | +$navbar-height: 50px !default; | |
359 | +$navbar-margin-bottom: $line-height-computed !default; | |
360 | +$navbar-border-radius: $border-radius-base !default; | |
361 | +$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; | |
362 | +$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; | |
363 | +$navbar-collapse-max-height: 340px !default; | |
364 | + | |
365 | +$navbar-default-color: white !default; | |
366 | +$navbar-default-bg: #2c3e50 !default; | |
367 | +$navbar-default-border: lighten($navbar-default-bg, 6.5%) !default; | |
368 | + | |
369 | +// Navbar links | |
370 | +$navbar-default-link-color: white !default; | |
371 | +$navbar-default-link-hover-color: #333 !default; | |
372 | +$navbar-default-link-hover-bg: transparent !default; | |
373 | +$navbar-default-link-active-color: #555 !default; | |
374 | +$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; | |
375 | +$navbar-default-link-disabled-color: #ccc !default; | |
376 | +$navbar-default-link-disabled-bg: transparent !default; | |
377 | + | |
378 | +// Navbar brand label | |
379 | +$navbar-default-brand-color: $navbar-default-link-color !default; | |
380 | +$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; | |
381 | +$navbar-default-brand-hover-bg: transparent !default; | |
382 | + | |
383 | +// Navbar toggle | |
384 | +$navbar-default-toggle-hover-bg: #ddd !default; | |
385 | +$navbar-default-toggle-icon-bar-bg: #888 !default; | |
386 | +$navbar-default-toggle-border-color: #ddd !default; | |
387 | + | |
388 | + | |
389 | +// Inverted navbar | |
390 | +// Reset inverted navbar basics | |
391 | +$navbar-inverse-color: lighten($gray-light, 15%) !default; | |
392 | +$navbar-inverse-bg: #222 !default; | |
393 | +$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; | |
394 | + | |
395 | +// Inverted navbar links | |
396 | +$navbar-inverse-link-color: lighten($gray-light, 15%) !default; | |
397 | +$navbar-inverse-link-hover-color: #fff !default; | |
398 | +$navbar-inverse-link-hover-bg: transparent !default; | |
399 | +$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; | |
400 | +$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; | |
401 | +$navbar-inverse-link-disabled-color: #444 !default; | |
402 | +$navbar-inverse-link-disabled-bg: transparent !default; | |
403 | + | |
404 | +// Inverted navbar brand label | |
405 | +$navbar-inverse-brand-color: $navbar-inverse-link-color !default; | |
406 | +$navbar-inverse-brand-hover-color: #fff !default; | |
407 | +$navbar-inverse-brand-hover-bg: transparent !default; | |
408 | + | |
409 | +// Inverted navbar toggle | |
410 | +$navbar-inverse-toggle-hover-bg: #333 !default; | |
411 | +$navbar-inverse-toggle-icon-bar-bg: #fff !default; | |
412 | +$navbar-inverse-toggle-border-color: #333 !default; | |
413 | + | |
414 | + | |
415 | +//== Navs | |
416 | +// | |
417 | +//## | |
418 | + | |
419 | +//=== Shared nav styles | |
420 | +$nav-link-padding: 10px 15px !default; | |
421 | +$nav-link-hover-bg: $gray-lighter !default; | |
422 | + | |
423 | +$nav-disabled-link-color: $gray-light !default; | |
424 | +$nav-disabled-link-hover-color: $gray-light !default; | |
425 | + | |
426 | +//== Tabs | |
427 | +$nav-tabs-border-color: #ddd !default; | |
428 | + | |
429 | +$nav-tabs-link-hover-border-color: $gray-lighter !default; | |
430 | + | |
431 | +$nav-tabs-active-link-hover-bg: $body-bg !default; | |
432 | +$nav-tabs-active-link-hover-color: $gray !default; | |
433 | +$nav-tabs-active-link-hover-border-color: #ddd !default; | |
434 | + | |
435 | +$nav-tabs-justified-link-border-color: #ddd !default; | |
436 | +$nav-tabs-justified-active-link-border-color: $body-bg !default; | |
437 | + | |
438 | +//== Pills | |
439 | +$nav-pills-border-radius: $border-radius-base !default; | |
440 | +$nav-pills-active-link-hover-bg: $component-active-bg !default; | |
441 | +$nav-pills-active-link-hover-color: $component-active-color !default; | |
442 | + | |
443 | + | |
444 | +//== Pagination | |
445 | +// | |
446 | +//## | |
447 | + | |
448 | +$pagination-color: $link-color !default; | |
449 | +$pagination-bg: #fff !default; | |
450 | +$pagination-border: #ddd !default; | |
451 | + | |
452 | +$pagination-hover-color: $link-hover-color !default; | |
453 | +$pagination-hover-bg: $gray-lighter !default; | |
454 | +$pagination-hover-border: #ddd !default; | |
455 | + | |
456 | +$pagination-active-color: #fff !default; | |
457 | +$pagination-active-bg: $brand-primary !default; | |
458 | +$pagination-active-border: $brand-primary !default; | |
459 | + | |
460 | +$pagination-disabled-color: $gray-light !default; | |
461 | +$pagination-disabled-bg: #fff !default; | |
462 | +$pagination-disabled-border: #ddd !default; | |
463 | + | |
464 | + | |
465 | +//== Pager | |
466 | +// | |
467 | +//## | |
468 | + | |
469 | +$pager-bg: $pagination-bg !default; | |
470 | +$pager-border: $pagination-border !default; | |
471 | +$pager-border-radius: 15px !default; | |
472 | + | |
473 | +$pager-hover-bg: $pagination-hover-bg !default; | |
474 | + | |
475 | +$pager-active-bg: $pagination-active-bg !default; | |
476 | +$pager-active-color: $pagination-active-color !default; | |
477 | + | |
478 | +$pager-disabled-color: $pagination-disabled-color !default; | |
479 | + | |
480 | + | |
481 | +//== Jumbotron | |
482 | +// | |
483 | +//## | |
484 | + | |
485 | +$jumbotron-padding: 30px !default; | |
486 | +$jumbotron-color: inherit !default; | |
487 | +$jumbotron-bg: $gray-lighter !default; | |
488 | +$jumbotron-heading-color: inherit !default; | |
489 | +$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default; | |
490 | + | |
491 | + | |
492 | +//== Form states and alerts | |
493 | +// | |
494 | +//## Define colors for form feedback states and, by default, alerts. | |
495 | + | |
496 | +$state-success-text: #3c763d !default; | |
497 | +$state-success-bg: #dff0d8 !default; | |
498 | +$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; | |
499 | + | |
500 | +$state-info-text: #31708f !default; | |
501 | +$state-info-bg: #d9edf7 !default; | |
502 | +$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; | |
503 | + | |
504 | +$state-warning-text: #8a6d3b !default; | |
505 | +$state-warning-bg: #fcf8e3 !default; | |
506 | +$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; | |
507 | + | |
508 | +$state-danger-text: #a94442 !default; | |
509 | +$state-danger-bg: #f2dede !default; | |
510 | +$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; | |
511 | + | |
512 | + | |
513 | +//== Tooltips | |
514 | +// | |
515 | +//## | |
516 | + | |
517 | +//** Tooltip max width | |
518 | +$tooltip-max-width: 200px !default; | |
519 | +//** Tooltip text color | |
520 | +$tooltip-color: #fff !default; | |
521 | +//** Tooltip background color | |
522 | +$tooltip-bg: #000 !default; | |
523 | +$tooltip-opacity: .9 !default; | |
524 | + | |
525 | +//** Tooltip arrow width | |
526 | +$tooltip-arrow-width: 5px !default; | |
527 | +//** Tooltip arrow color | |
528 | +$tooltip-arrow-color: $tooltip-bg !default; | |
529 | + | |
530 | + | |
531 | +//== Popovers | |
532 | +// | |
533 | +//## | |
534 | + | |
535 | +//** Popover body background color | |
536 | +$popover-bg: #fff !default; | |
537 | +//** Popover maximum width | |
538 | +$popover-max-width: 276px !default; | |
539 | +//** Popover border color | |
540 | +$popover-border-color: rgba(0,0,0,.2) !default; | |
541 | +//** Popover fallback border color | |
542 | +$popover-fallback-border-color: #ccc !default; | |
543 | + | |
544 | +//** Popover title background color | |
545 | +$popover-title-bg: darken($popover-bg, 3%) !default; | |
546 | + | |
547 | +//** Popover arrow width | |
548 | +$popover-arrow-width: 10px !default; | |
549 | +//** Popover arrow color | |
550 | +$popover-arrow-color: $popover-bg !default; | |
551 | + | |
552 | +//** Popover outer arrow width | |
553 | +$popover-arrow-outer-width: ($popover-arrow-width + 1) !default; | |
554 | +//** Popover outer arrow color | |
555 | +$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; | |
556 | +//** Popover outer arrow fallback color | |
557 | +$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; | |
558 | + | |
559 | + | |
560 | +//== Labels | |
561 | +// | |
562 | +//## | |
563 | + | |
564 | +//** Default label background color | |
565 | +$label-default-bg: $gray-light !default; | |
566 | +//** Primary label background color | |
567 | +$label-primary-bg: $brand-primary !default; | |
568 | +//** Success label background color | |
569 | +$label-success-bg: $brand-success !default; | |
570 | +//** Info label background color | |
571 | +$label-info-bg: $brand-info !default; | |
572 | +//** Warning label background color | |
573 | +$label-warning-bg: $brand-warning !default; | |
574 | +//** Danger label background color | |
575 | +$label-danger-bg: $brand-danger !default; | |
576 | + | |
577 | +//** Default label text color | |
578 | +$label-color: #fff !default; | |
579 | +//** Default text color of a linked label | |
580 | +$label-link-hover-color: #fff !default; | |
581 | + | |
582 | + | |
583 | +//== Modals | |
584 | +// | |
585 | +//## | |
586 | + | |
587 | +//** Padding applied to the modal body | |
588 | +$modal-inner-padding: 15px !default; | |
589 | + | |
590 | +//** Padding applied to the modal title | |
591 | +$modal-title-padding: 15px !default; | |
592 | +//** Modal title line-height | |
593 | +$modal-title-line-height: $line-height-base !default; | |
594 | + | |
595 | +//** Background color of modal content area | |
596 | +$modal-content-bg: #fff !default; | |
597 | +//** Modal content border color | |
598 | +$modal-content-border-color: rgba(0,0,0,.2) !default; | |
599 | +//** Modal content border color **for IE8** | |
600 | +$modal-content-fallback-border-color: #999 !default; | |
601 | + | |
602 | +//** Modal backdrop background color | |
603 | +$modal-backdrop-bg: #000 !default; | |
604 | +//** Modal backdrop opacity | |
605 | +$modal-backdrop-opacity: .5 !default; | |
606 | +//** Modal header border color | |
607 | +$modal-header-border-color: #e5e5e5 !default; | |
608 | +//** Modal footer border color | |
609 | +$modal-footer-border-color: $modal-header-border-color !default; | |
610 | + | |
611 | +$modal-lg: 900px !default; | |
612 | +$modal-md: 600px !default; | |
613 | +$modal-sm: 300px !default; | |
614 | + | |
615 | + | |
616 | +//== Alerts | |
617 | +// | |
618 | +//## Define alert colors, border radius, and padding. | |
619 | + | |
620 | +$alert-padding: 15px !default; | |
621 | +$alert-border-radius: $border-radius-base !default; | |
622 | +$alert-link-font-weight: bold !default; | |
623 | + | |
624 | +$alert-success-bg: $state-success-bg !default; | |
625 | +$alert-success-text: $state-success-text !default; | |
626 | +$alert-success-border: $state-success-border !default; | |
627 | + | |
628 | +$alert-info-bg: $state-info-bg !default; | |
629 | +$alert-info-text: $state-info-text !default; | |
630 | +$alert-info-border: $state-info-border !default; | |
631 | + | |
632 | +$alert-warning-bg: $state-warning-bg !default; | |
633 | +$alert-warning-text: $state-warning-text !default; | |
634 | +$alert-warning-border: $state-warning-border !default; | |
635 | + | |
636 | +$alert-danger-bg: $state-danger-bg !default; | |
637 | +$alert-danger-text: $state-danger-text !default; | |
638 | +$alert-danger-border: $state-danger-border !default; | |
639 | + | |
640 | + | |
641 | +//== Progress bars | |
642 | +// | |
643 | +//## | |
644 | + | |
645 | +//** Background color of the whole progress component | |
646 | +$progress-bg: #f5f5f5 !default; | |
647 | +//** Progress bar text color | |
648 | +$progress-bar-color: #fff !default; | |
649 | +//** Variable for setting rounded corners on progress bar. | |
650 | +$progress-border-radius: $border-radius-base !default; | |
651 | + | |
652 | +//** Default progress bar color | |
653 | +$progress-bar-bg: $brand-primary !default; | |
654 | +//** Success progress bar color | |
655 | +$progress-bar-success-bg: $brand-success !default; | |
656 | +//** Warning progress bar color | |
657 | +$progress-bar-warning-bg: $brand-warning !default; | |
658 | +//** Danger progress bar color | |
659 | +$progress-bar-danger-bg: $brand-danger !default; | |
660 | +//** Info progress bar color | |
661 | +$progress-bar-info-bg: $brand-info !default; | |
662 | + | |
663 | + | |
664 | +//== List group | |
665 | +// | |
666 | +//## | |
667 | + | |
668 | +//** Background color on `.list-group-item` | |
669 | +$list-group-bg: #fff !default; | |
670 | +//** `.list-group-item` border color | |
671 | +$list-group-border: #ddd !default; | |
672 | +//** List group border radius | |
673 | +$list-group-border-radius: $border-radius-base !default; | |
674 | + | |
675 | +//** Background color of single list items on hover | |
676 | +$list-group-hover-bg: #f5f5f5 !default; | |
677 | +//** Text color of active list items | |
678 | +$list-group-active-color: $component-active-color !default; | |
679 | +//** Background color of active list items | |
680 | +$list-group-active-bg: $component-active-bg !default; | |
681 | +//** Border color of active list elements | |
682 | +$list-group-active-border: $list-group-active-bg !default; | |
683 | +//** Text color for content within active list items | |
684 | +$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; | |
685 | + | |
686 | +//** Text color of disabled list items | |
687 | +$list-group-disabled-color: $gray-light !default; | |
688 | +//** Background color of disabled list items | |
689 | +$list-group-disabled-bg: $gray-lighter !default; | |
690 | +//** Text color for content within disabled list items | |
691 | +$list-group-disabled-text-color: $list-group-disabled-color !default; | |
692 | + | |
693 | +$list-group-link-color: #555 !default; | |
694 | +$list-group-link-hover-color: $list-group-link-color !default; | |
695 | +$list-group-link-heading-color: #333 !default; | |
696 | + | |
697 | + | |
698 | +//== Panels | |
699 | +// | |
700 | +//## | |
701 | + | |
702 | +$panel-bg: #fff !default; | |
703 | +$panel-body-padding: 15px !default; | |
704 | +$panel-heading-padding: 10px 15px !default; | |
705 | +$panel-footer-padding: $panel-heading-padding !default; | |
706 | +$panel-border-radius: $border-radius-base !default; | |
707 | + | |
708 | +//** Border color for elements within panels | |
709 | +$panel-inner-border: #ddd !default; | |
710 | +$panel-footer-bg: #f5f5f5 !default; | |
711 | + | |
712 | +$panel-default-text: $gray-dark !default; | |
713 | +$panel-default-border: #ddd !default; | |
714 | +$panel-default-heading-bg: #f5f5f5 !default; | |
715 | + | |
716 | +$panel-primary-text: #fff !default; | |
717 | +$panel-primary-border: $brand-primary !default; | |
718 | +$panel-primary-heading-bg: $brand-primary !default; | |
719 | + | |
720 | +$panel-success-text: $state-success-text !default; | |
721 | +$panel-success-border: $state-success-border !default; | |
722 | +$panel-success-heading-bg: $state-success-bg !default; | |
723 | + | |
724 | +$panel-info-text: $state-info-text !default; | |
725 | +$panel-info-border: $state-info-border !default; | |
726 | +$panel-info-heading-bg: $state-info-bg !default; | |
727 | + | |
728 | +$panel-warning-text: $state-warning-text !default; | |
729 | +$panel-warning-border: $state-warning-border !default; | |
730 | +$panel-warning-heading-bg: $state-warning-bg !default; | |
731 | + | |
732 | +$panel-danger-text: $state-danger-text !default; | |
733 | +$panel-danger-border: $state-danger-border !default; | |
734 | +$panel-danger-heading-bg: $state-danger-bg !default; | |
735 | + | |
736 | + | |
737 | +//== Thumbnails | |
738 | +// | |
739 | +//## | |
740 | + | |
741 | +//** Padding around the thumbnail image | |
742 | +$thumbnail-padding: 4px !default; | |
743 | +//** Thumbnail background color | |
744 | +$thumbnail-bg: $body-bg !default; | |
745 | +//** Thumbnail border color | |
746 | +$thumbnail-border: #ddd !default; | |
747 | +//** Thumbnail border radius | |
748 | +$thumbnail-border-radius: $border-radius-base !default; | |
749 | + | |
750 | +//** Custom text color for thumbnail captions | |
751 | +$thumbnail-caption-color: $text-color !default; | |
752 | +//** Padding around the thumbnail caption | |
753 | +$thumbnail-caption-padding: 9px !default; | |
754 | + | |
755 | + | |
756 | +//== Wells | |
757 | +// | |
758 | +//## | |
759 | + | |
760 | +$well-bg: #f5f5f5 !default; | |
761 | +$well-border: darken($well-bg, 7%) !default; | |
762 | + | |
763 | + | |
764 | +//== Badges | |
765 | +// | |
766 | +//## | |
767 | + | |
768 | +$badge-color: #fff !default; | |
769 | +//** Linked badge text color on hover | |
770 | +$badge-link-hover-color: #fff !default; | |
771 | +$badge-bg: $gray-light !default; | |
772 | + | |
773 | +//** Badge text color in active nav link | |
774 | +$badge-active-color: $link-color !default; | |
775 | +//** Badge background color in active nav link | |
776 | +$badge-active-bg: #fff !default; | |
777 | + | |
778 | +$badge-font-weight: bold !default; | |
779 | +$badge-line-height: 1 !default; | |
780 | +$badge-border-radius: 10px !default; | |
781 | + | |
782 | + | |
783 | +//== Breadcrumbs | |
784 | +// | |
785 | +//## | |
786 | + | |
787 | +$breadcrumb-padding-vertical: 8px !default; | |
788 | +$breadcrumb-padding-horizontal: 15px !default; | |
789 | +//** Breadcrumb background color | |
790 | +$breadcrumb-bg: #f5f5f5 !default; | |
791 | +//** Breadcrumb text color | |
792 | +$breadcrumb-color: #ccc !default; | |
793 | +//** Text color of current page in the breadcrumb | |
794 | +$breadcrumb-active-color: $gray-light !default; | |
795 | +//** Textual separator for between breadcrumb elements | |
796 | +$breadcrumb-separator: "/" !default; | |
797 | + | |
798 | + | |
799 | +//== Carousel | |
800 | +// | |
801 | +//## | |
802 | + | |
803 | +$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; | |
804 | + | |
805 | +$carousel-control-color: #fff !default; | |
806 | +$carousel-control-width: 15% !default; | |
807 | +$carousel-control-opacity: .5 !default; | |
808 | +$carousel-control-font-size: 20px !default; | |
809 | + | |
810 | +$carousel-indicator-active-bg: #fff !default; | |
811 | +$carousel-indicator-border-color: #fff !default; | |
812 | + | |
813 | +$carousel-caption-color: #fff !default; | |
814 | + | |
815 | + | |
816 | +//== Close | |
817 | +// | |
818 | +//## | |
819 | + | |
820 | +$close-font-weight: bold !default; | |
821 | +$close-color: #000 !default; | |
822 | +$close-text-shadow: 0 1px 0 #fff !default; | |
823 | + | |
824 | + | |
825 | +//== Code | |
826 | +// | |
827 | +//## | |
828 | + | |
829 | +$code-color: #c7254e !default; | |
830 | +$code-bg: #f9f2f4 !default; | |
831 | + | |
832 | +$kbd-color: #fff !default; | |
833 | +$kbd-bg: #333 !default; | |
834 | + | |
835 | +$pre-bg: #f5f5f5 !default; | |
836 | +$pre-color: $gray-dark !default; | |
837 | +$pre-border-color: #ccc !default; | |
838 | +$pre-scrollable-max-height: 340px !default; | |
839 | + | |
840 | + | |
841 | +//== Type | |
842 | +// | |
843 | +//## | |
844 | + | |
845 | +//** Horizontal offset for forms and lists. | |
846 | +$component-offset-horizontal: 180px !default; | |
847 | +//** Text muted color | |
848 | +$text-muted: $gray-light !default; | |
849 | +//** Abbreviations and acronyms border color | |
850 | +$abbr-border-color: $gray-light !default; | |
851 | +//** Headings small color | |
852 | +$headings-small-color: $gray-light !default; | |
853 | +//** Blockquote small color | |
854 | +$blockquote-small-color: $gray-light !default; | |
855 | +//** Blockquote font size | |
856 | +$blockquote-font-size: ($font-size-base * 1.25) !default; | |
857 | +//** Blockquote border color | |
858 | +$blockquote-border-color: $gray-lighter !default; | |
859 | +//** Page header border color | |
860 | +$page-header-border-color: $gray-lighter !default; | |
861 | +//** Width of horizontal description list titles | |
862 | +$dl-horizontal-offset: $component-offset-horizontal !default; | |
863 | +//** Horizontal line color. | |
864 | +$hr-border: $gray-lighter !default; | ... | ... |
No preview for this file type
... | ... | @@ -0,0 +1,9 @@ |
1 | +<div class="container"> | |
2 | + <div id="footer-links"> | |
3 | + <%= link_to _('Manual'), '/doc', id: "link-to-doc", class: 'icon-help' %> | |
4 | + </div><!-- end id="footer-links" --> | |
5 | + <div id="copyright"> | |
6 | + <p><%= _('This social network uses <a href="http://noosfero.org/">Noosfero</a>, developed by %s and licensed under the <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public License</a> version 3 or any later version.') % link_to('Colivre', 'http://colivre.coop.br/') %></p> | |
7 | + </div><!-- end id="copyright" --> | |
8 | + <%= language_chooser(environment) %> | |
9 | +</div> | ... | ... |
... | ... | @@ -0,0 +1,17 @@ |
1 | +<header class="navbar" id="header-navbar"> | |
2 | + <div class="container"> | |
3 | + <%= theme_site_title %> | |
4 | + | |
5 | + <div class="clearfix"> | |
6 | + <button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button"> | |
7 | + <span class="sr-only">Toggle navigation</span> | |
8 | + <span class="fa fa-bars"></span> | |
9 | + </button> | |
10 | + | |
11 | + <%= theme_header_user_notices %> | |
12 | + | |
13 | + <%= theme_header_user_right_menu %> | |
14 | + <%= theme_header_not_user_right %> | |
15 | + </div> | |
16 | + </div> | |
17 | +</header> | ... | ... |
public/designs/themes/cube-responsive/header_not_user_right.html.erb
0 → 100644
... | ... | @@ -0,0 +1,8 @@ |
1 | +<ul class="nav navbar-nav pull-right"> | |
2 | +<li> | |
3 | + <a href="/account/login" class="" id="link_login" onclick="return noosfero.modal.inline('#inlineLoginBox')"><i class="icon-menu-login"></i><strong>Entrar</strong></a> | |
4 | +</li> | |
5 | +<li> | |
6 | + <a href="/account/signup"><strong>Registre-se</strong></a> | |
7 | +</li> | |
8 | +</ul> | ... | ... |
public/designs/themes/cube-responsive/header_user_notices.html.erb
0 → 100644
... | ... | @@ -0,0 +1,181 @@ |
1 | +<div class="nav-no-collapse navbar-left pull-left hidden-sm hidden-xs"> | |
2 | + <ul class="nav navbar-nav pull-left"> | |
3 | + <li> | |
4 | + <a class="btn" id="make-small-nav"> | |
5 | + <i><span class="fa fa-bars"></span></i> | |
6 | + </a> | |
7 | + </li> | |
8 | + <li class="dropdown hidden-xs"> | |
9 | + <a class="btn dropdown-toggle" data-target="#" data-toggle="dropdown"> | |
10 | + <i class="fa fa-bell"></i> | |
11 | + <span class="count">8</span> | |
12 | + </a> | |
13 | + <ul class="dropdown-menu notifications-list"> | |
14 | + <li class="pointer"> | |
15 | + <div class="pointer-inner"> | |
16 | + <div class="arrow"></div> | |
17 | + </div> | |
18 | + </li> | |
19 | + <li class="item-header">You have 6 new notifications</li> | |
20 | + <li class="item"> | |
21 | + <a href="#"> | |
22 | + <i class="fa fa-comment"></i> | |
23 | + <span class="content">New comment on ‘Awesome P...</span> | |
24 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
25 | + </a> | |
26 | + </li> | |
27 | + <li class="item"> | |
28 | + <a href="#"> | |
29 | + <i class="fa fa-plus"></i> | |
30 | + <span class="content">New user registration</span> | |
31 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
32 | + </a> | |
33 | + </li> | |
34 | + <li class="item"> | |
35 | + <a href="#"> | |
36 | + <i class="fa fa-envelope"></i> | |
37 | + <span class="content">New Message from George</span> | |
38 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
39 | + </a> | |
40 | + </li> | |
41 | + <li class="item"> | |
42 | + <a href="#"> | |
43 | + <i class="fa fa-shopping-cart"></i> | |
44 | + <span class="content">New purchase</span> | |
45 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
46 | + </a> | |
47 | + </li> | |
48 | + <li class="item"> | |
49 | + <a href="#"> | |
50 | + <i class="fa fa-eye"></i> | |
51 | + <span class="content">New order</span> | |
52 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
53 | + </a> | |
54 | + </li> | |
55 | + <li class="item-footer"> | |
56 | + <a href="#"> | |
57 | + View all notifications | |
58 | + </a> | |
59 | + </li> | |
60 | + </ul> | |
61 | + </li> | |
62 | + <li class="dropdown hidden-xs"> | |
63 | + <a class="btn dropdown-toggle" data-target="#" data-toggle="dropdown"> | |
64 | + <i><span class="fa fa-envelope"></span></i> | |
65 | + <span class="count">16</span> | |
66 | + </a> | |
67 | + <ul class="dropdown-menu notifications-list messages-list"> | |
68 | + <li class="pointer"> | |
69 | + <div class="pointer-inner"> | |
70 | + <div class="arrow"></div> | |
71 | + </div> | |
72 | + </li> | |
73 | + <li class="item first-item"> | |
74 | + <a href="#"> | |
75 | + <img src="/designs/themes/cube-responsive-theme/images/samples/messages-photo-1.png" alt=""/> | |
76 | + <span class="content"> | |
77 | + <span class="content-headline"> | |
78 | + George Clooney | |
79 | + </span> | |
80 | + <span class="content-text"> | |
81 | + Look, just because I don't be givin' no man a foot massage don't make it | |
82 | + right for Marsellus to throw... | |
83 | + </span> | |
84 | + </span> | |
85 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
86 | + </a> | |
87 | + </li> | |
88 | + <li class="item"> | |
89 | + <a href="#"> | |
90 | + <img src="/designs/themes/cube-responsive-theme/images/samples/messages-photo-2.png" alt=""/> | |
91 | + <span class="content"> | |
92 | + <span class="content-headline"> | |
93 | + Emma Watson | |
94 | + </span> | |
95 | + <span class="content-text"> | |
96 | + Look, just because I don't be givin' no man a foot massage don't make it | |
97 | + right for Marsellus to throw... | |
98 | + </span> | |
99 | + </span> | |
100 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
101 | + </a> | |
102 | + </li> | |
103 | + <li class="item"> | |
104 | + <a href="#"> | |
105 | + <img src="/designs/themes/cube-responsive-theme/images/samples/messages-photo-3.png" alt=""/> | |
106 | + <span class="content"> | |
107 | + <span class="content-headline"> | |
108 | + Robert Downey Jr. | |
109 | + </span> | |
110 | + <span class="content-text"> | |
111 | + Look, just because I don't be givin' no man a foot massage don't make it | |
112 | + right for Marsellus to throw... | |
113 | + </span> | |
114 | + </span> | |
115 | + <span class="time"><i class="fa fa-clock-o"></i>13 min.</span> | |
116 | + </a> | |
117 | + </li> | |
118 | + <li class="item-footer"> | |
119 | + <a href="#"> | |
120 | + View all messages | |
121 | + </a> | |
122 | + </li> | |
123 | + </ul> | |
124 | + </li> | |
125 | + <li class="dropdown hidden-xs"> | |
126 | + <a class="btn dropdown-toggle" data-toggle="dropdown"> | |
127 | + New Item | |
128 | + <i class="fa fa-caret-down"></i> | |
129 | + </a> | |
130 | + <ul class="dropdown-menu"> | |
131 | + <li class="item"> | |
132 | + <a href="#"> | |
133 | + <i class="fa fa-archive"></i> | |
134 | + New Product | |
135 | + </a> | |
136 | + </li> | |
137 | + <li class="item"> | |
138 | + <a href="#"> | |
139 | + <i class="fa fa-shopping-cart"></i> | |
140 | + New Order | |
141 | + </a> | |
142 | + </li> | |
143 | + <li class="item"> | |
144 | + <a href="#"> | |
145 | + <i class="fa fa-sitemap"></i> | |
146 | + New Category | |
147 | + </a> | |
148 | + </li> | |
149 | + <li class="item"> | |
150 | + <a href="#"> | |
151 | + <i class="fa fa-file-text"></i> | |
152 | + New Page | |
153 | + </a> | |
154 | + </li> | |
155 | + </ul> | |
156 | + </li> | |
157 | + <li class="dropdown hidden-xs"> | |
158 | + <a class="btn dropdown-toggle" data-toggle="dropdown"> | |
159 | + English | |
160 | + <i class="fa fa-caret-down"></i> | |
161 | + </a> | |
162 | + <ul class="dropdown-menu"> | |
163 | + <li class="item"> | |
164 | + <a href="#"> | |
165 | + Spanish | |
166 | + </a> | |
167 | + </li> | |
168 | + <li class="item"> | |
169 | + <a href="#"> | |
170 | + German | |
171 | + </a> | |
172 | + </li> | |
173 | + <li class="item"> | |
174 | + <a href="#"> | |
175 | + Italian | |
176 | + </a> | |
177 | + </li> | |
178 | + </ul> | |
179 | + </li> | |
180 | + </ul> | |
181 | +</div> | ... | ... |
public/designs/themes/cube-responsive/header_user_right_menu.html.erb
0 → 100644
... | ... | @@ -0,0 +1,36 @@ |
1 | +<div class="nav-no-collapse pull-right" id="header-nav"> | |
2 | + <ul class="nav navbar-nav pull-right"> | |
3 | + <li class="mobile-search"> | |
4 | + <a class="btn"> | |
5 | + <i class="fa fa-search"></i> | |
6 | + </a> | |
7 | + | |
8 | + <div class="drowdown-search"> | |
9 | + <form role="search"> | |
10 | + <div class="form-group"> | |
11 | + <input type="text" class="form-control" placeholder="Search..."> | |
12 | + <i class="fa fa-search nav-search-icon"></i> | |
13 | + </div> | |
14 | + </form> | |
15 | + </div> | |
16 | + | |
17 | + </li> | |
18 | + <li class="dropdown profile-dropdown"> | |
19 | + <a class="dropdown-toggle" data-target="#" data-toggle="dropdown"> | |
20 | + <img src="/designs/themes/cube-responsive-theme/images/samples/scarlet-159.png" alt=""/> | |
21 | + <span class="hidden-xs">Scarlett</span> <b class="caret"></b> | |
22 | + </a> | |
23 | + <ul class="dropdown-menu dropdown-menu-right"> | |
24 | + <li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li> | |
25 | + <li><a href="#"><i class="fa fa-cog"></i>Settings</a></li> | |
26 | + <li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li> | |
27 | + <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li> | |
28 | + </ul> | |
29 | + </li> | |
30 | + <li class="hidden-xxs"> | |
31 | + <a class="btn"> | |
32 | + <i class="fa fa-power-off"></i> | |
33 | + </a> | |
34 | + </li> | |
35 | + </ul> | |
36 | +</div> | ... | ... |
684 Bytes
484 Bytes
No preview for this file type
3.5 KB
3.5 KB
6.21 KB
public/designs/themes/cube-responsive/images/logo-noosfero-no-text.png
0 → 100644
9.03 KB
6.21 KB
12.5 KB
No preview for this file type
No preview for this file type
1.92 KB
3.4 KB
1.75 KB
No preview for this file type
public/designs/themes/cube-responsive/images/samples/messages-photo-1.png
0 → 100644
4.52 KB
public/designs/themes/cube-responsive/images/samples/messages-photo-2.png
0 → 100644
4.56 KB
public/designs/themes/cube-responsive/images/samples/messages-photo-3.png
0 → 100644
4.68 KB
52.8 KB
31.6 KB
5.96 KB
No preview for this file type
5.96 KB
No preview for this file type
95.6 KB
233 Bytes
215 Bytes
161 Bytes
1.57 KB
188 Bytes
187 Bytes
262 Bytes
391 Bytes
192 Bytes
224 Bytes
263 Bytes
279 Bytes
188 Bytes
235 Bytes
261 Bytes
515 Bytes
198 Bytes
223 Bytes
259 Bytes
273 Bytes
154 Bytes
156 Bytes
228 Bytes
214 Bytes
153 Bytes
156 Bytes
216 Bytes
217 Bytes
169 Bytes
2.05 KB
88 Bytes
88 Bytes
88 Bytes
192 Bytes
195 Bytes
218 Bytes
177 Bytes
228 Bytes
... | ... | @@ -0,0 +1,149 @@ |
1 | +$(function($) { | |
2 | + | |
3 | + setTimeout(function() { | |
4 | + $('#content-wrapper > .row').css({ | |
5 | + opacity: 1 | |
6 | + }); | |
7 | + }, 200); | |
8 | + | |
9 | + $('#sidebar-nav,#nav-col-submenu').on('click', '.dropdown-toggle', function (e) { | |
10 | + e.preventDefault(); | |
11 | + | |
12 | + var $item = $(this).parent(); | |
13 | + | |
14 | + if (!$item.hasClass('open')) { | |
15 | + $item.parent().find('.open .submenu').slideUp('fast'); | |
16 | + $item.parent().find('.open').toggleClass('open'); | |
17 | + } | |
18 | + | |
19 | + $item.toggleClass('open'); | |
20 | + | |
21 | + if ($item.hasClass('open')) { | |
22 | + $item.children('.submenu').slideDown('fast'); | |
23 | + } | |
24 | + else { | |
25 | + $item.children('.submenu').slideUp('fast'); | |
26 | + } | |
27 | + }); | |
28 | + | |
29 | + $('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav .dropdown-toggle', function (e) { | |
30 | + if ($( document ).width() >= 992) { | |
31 | + var $item = $(this).parent(); | |
32 | + | |
33 | + if ($('body').hasClass('fixed-leftmenu')) { | |
34 | + var topPosition = $item.position().top; | |
35 | + | |
36 | + if ((topPosition + 4*$(this).outerHeight()) >= $(window).height()) { | |
37 | + topPosition -= 6*$(this).outerHeight(); | |
38 | + } | |
39 | + | |
40 | + $('#nav-col-submenu').html($item.children('.submenu').clone()); | |
41 | + $('#nav-col-submenu > .submenu').css({'top' : topPosition}); | |
42 | + } | |
43 | + | |
44 | + $item.addClass('open'); | |
45 | + $item.children('.submenu').slideDown('fast'); | |
46 | + } | |
47 | + }); | |
48 | + | |
49 | + $('body').on('mouseleave', '#page-wrapper.nav-small #sidebar-nav > .nav-pills > li', function (e) { | |
50 | + if ($( document ).width() >= 992) { | |
51 | + var $item = $(this); | |
52 | + | |
53 | + if ($item.hasClass('open')) { | |
54 | + $item.find('.open .submenu').slideUp('fast'); | |
55 | + $item.find('.open').removeClass('open'); | |
56 | + $item.children('.submenu').slideUp('fast'); | |
57 | + } | |
58 | + | |
59 | + $item.removeClass('open'); | |
60 | + } | |
61 | + }); | |
62 | + $('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav a:not(.dropdown-toggle)', function (e) { | |
63 | + if ($('body').hasClass('fixed-leftmenu')) { | |
64 | + $('#nav-col-submenu').html(''); | |
65 | + } | |
66 | + }); | |
67 | + $('body').on('mouseleave', '#page-wrapper.nav-small #nav-col', function (e) { | |
68 | + if ($('body').hasClass('fixed-leftmenu')) { | |
69 | + $('#nav-col-submenu').html(''); | |
70 | + } | |
71 | + }); | |
72 | + | |
73 | + $('#make-small-nav').click(function (e) { | |
74 | + $('#page-wrapper').toggleClass('nav-small'); | |
75 | + }); | |
76 | + | |
77 | + $(window).smartresize(function(){ | |
78 | + if ($( document ).width() <= 991) { | |
79 | + $('#page-wrapper').removeClass('nav-small'); | |
80 | + } | |
81 | + }); | |
82 | + | |
83 | + $('.mobile-search').click(function(e) { | |
84 | + e.preventDefault(); | |
85 | + | |
86 | + $('.mobile-search').addClass('active'); | |
87 | + $('.mobile-search form input.form-control').focus(); | |
88 | + }); | |
89 | + $(document).mouseup(function (e) { | |
90 | + var container = $('.mobile-search'); | |
91 | + | |
92 | + if (!container.is(e.target) // if the target of the click isn't the container... | |
93 | + && container.has(e.target).length === 0) // ... nor a descendant of the container | |
94 | + { | |
95 | + container.removeClass('active'); | |
96 | + } | |
97 | + }); | |
98 | + | |
99 | + // $('.fixed-leftmenu #col-left').nanoScroller({ | |
100 | + // alwaysVisible: false, | |
101 | + // iOSNativeScrolling: false, | |
102 | + // preventPageScrolling: true, | |
103 | + // contentClass: 'col-left-nano-content' | |
104 | + // }); | |
105 | + | |
106 | + // build all tooltips from data-attributes | |
107 | + $("[data-toggle='tooltip']").each(function (index, el) { | |
108 | + $(el).tooltip({ | |
109 | + placement: $(this).data("placement") || 'top' | |
110 | + }); | |
111 | + }); | |
112 | +}); | |
113 | + | |
114 | +$.fn.removeClassPrefix = function(prefix) { | |
115 | + this.each(function(i, el) { | |
116 | + var classes = el.className.split(" ").filter(function(c) { | |
117 | + return c.lastIndexOf(prefix, 0) !== 0; | |
118 | + }); | |
119 | + el.className = classes.join(" "); | |
120 | + }); | |
121 | + return this; | |
122 | +}; | |
123 | + | |
124 | +(function($,sr){ | |
125 | + // debouncing function from John Hann | |
126 | + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ | |
127 | + var debounce = function (func, threshold, execAsap) { | |
128 | + var timeout; | |
129 | + | |
130 | + return function debounced () { | |
131 | + var obj = this, args = arguments; | |
132 | + function delayed () { | |
133 | + if (!execAsap) | |
134 | + func.apply(obj, args); | |
135 | + timeout = null; | |
136 | + }; | |
137 | + | |
138 | + if (timeout) | |
139 | + clearTimeout(timeout); | |
140 | + else if (execAsap) | |
141 | + func.apply(obj, args); | |
142 | + | |
143 | + timeout = setTimeout(delayed, threshold || 100); | |
144 | + }; | |
145 | + } | |
146 | + // smartresize | |
147 | + $.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; | |
148 | + | |
149 | +})($,'smartresize'); | ... | ... |
public/designs/themes/cube-responsive/layouts/application-responsive.html.erb
0 → 100644
... | ... | @@ -0,0 +1,83 @@ |
1 | +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
2 | +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= html_language %>" lang="<%= html_language %>" class="<%= h html_tag_classes %>"> | |
3 | + <head> | |
4 | + <title><%= h page_title %></title> | |
5 | + <%= yield(:feeds) %> | |
6 | + <!--<meta http-equiv="refresh" content="1"/>--> | |
7 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
8 | + | |
9 | + <% unless defined? MetadataPlugin and environment.enabled_plugins.include? 'MetadataPlugin' %> | |
10 | + <meta name="description" content="<%= @environment.name %>" /> | |
11 | + <% end %> | |
12 | + | |
13 | + <!-- site root --> | |
14 | + <meta property="noosfero:root" content="<%= Noosfero.root %>"/> | |
15 | + | |
16 | + <link rel="shortcut icon" href="<%= image_path(theme_favicon) %>" type="image/x-icon" /> | |
17 | + <%= noosfero_javascript %> | |
18 | + <%= noosfero_stylesheets %> | |
19 | + | |
20 | + <%# Add custom tags/styles/etc via content_for %> | |
21 | + <%= yield :head %> | |
22 | + <%= | |
23 | + @plugins.dispatch(:head_ending).map do |content| | |
24 | + if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end | |
25 | + end.join("\n") | |
26 | + %> | |
27 | + | |
28 | + <script type="text/javascript"> | |
29 | + DEFAULT_LOADING_MESSAGE = <%="'#{ _('loading...') }'" %>; | |
30 | + </script> | |
31 | + | |
32 | + </head> | |
33 | + <body class="<%= h body_classes %>"> | |
34 | + <a href="#content" id="link-go-content"><span><%= _("Go to the content") %></span></a> | |
35 | + | |
36 | + <%= | |
37 | + @plugins.dispatch(:body_beginning).map do |content| | |
38 | + if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end | |
39 | + end.join("\n") | |
40 | + %> | |
41 | + <div id="global-header"> | |
42 | + <%= global_header %> | |
43 | + </div> | |
44 | + | |
45 | + <!-- RESPONSIVE changes !--> | |
46 | + <div id="wrap-1" class="container"> | |
47 | + <div id='theme-header'> | |
48 | + <%= theme_header %> | |
49 | + </div> | |
50 | + <div id="page-wrapper" class="container"> | |
51 | + <div id="wrap-2"> | |
52 | + <div class="row"> | |
53 | + <%= theme_sidebar_user %> | |
54 | + <div id="content-wrapper" class="<%= 'full-content' unless logged_in? %>"> | |
55 | + <div id="content"> | |
56 | + <%= render partial: 'layouts/menu_responsive' %> | |
57 | + <%= render 'layouts/profile_title' if profile %> | |
58 | + <%= insert_boxes yield %> | |
59 | + </div><!-- end id="content" --> | |
60 | + </div> | |
61 | + </div> | |
62 | + </div><!-- end id="wrap-2" --> | |
63 | + </div> | |
64 | + </div><!-- end id="wrap-1" --> | |
65 | + | |
66 | + <%= render_environment_features(:logged_in) if logged_in? %> | |
67 | + <div id="footer"> | |
68 | + <div id="theme-footer"> | |
69 | + <%= theme_footer %> | |
70 | + </div><!-- end id="theme-footer" --> | |
71 | + <div id="global-footer"> | |
72 | + <%= global_footer %> | |
73 | + </div><!-- end id="global-footer" --> | |
74 | + </div><!-- end id="footer" --> | |
75 | + <%= noosfero_layout_features %> | |
76 | + <%= addthis_javascript %> | |
77 | + <%= | |
78 | + @plugins.dispatch(:body_ending).map do |content| | |
79 | + if content.respond_to?(:call) then instance_exec(&content).html_safe else content.html_safe end | |
80 | + end.join("\n") | |
81 | + %> | |
82 | + </body> | |
83 | +</html> | ... | ... |
public/designs/themes/cube-responsive/navigation.html.erb
0 → 100644
public/designs/themes/cube-responsive/sass/_theme_styles.scss
0 → 100644
... | ... | @@ -0,0 +1,20 @@ |
1 | +// Core variables and mixins | |
2 | +@import "imports/variables"; | |
3 | +@import "imports/mixins"; | |
4 | + | |
5 | +// Core layouts | |
6 | +@import "imports/layouts"; | |
7 | + | |
8 | +// Navigation, header, footer | |
9 | +@import "imports/header"; | |
10 | +@import "imports/sidebar"; | |
11 | +@import "imports/footer"; | |
12 | + | |
13 | +// Layouts | |
14 | +@import "imports/fixed_layouts"; | |
15 | + | |
16 | +// Skin support | |
17 | +@import "imports/skins"; | |
18 | + | |
19 | +//Noosfero and cube overrides/customs | |
20 | +@import "imports/customs"; | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_customs.scss
0 → 100644
... | ... | @@ -0,0 +1,83 @@ |
1 | +/* Noosfero core and Cube Bootstrap styles Overrides/Customizations */ | |
2 | + | |
3 | +/* Noosfero Overrides */ | |
4 | +#theme-header { | |
5 | + min-height: 20px !important; | |
6 | + height: 100% !important; | |
7 | +} | |
8 | + | |
9 | +#wrap-2 { | |
10 | + padding: 0px !important; | |
11 | + border: none !important; | |
12 | + background-color: #eee; | |
13 | +} | |
14 | + | |
15 | +#user{ | |
16 | + margin: { | |
17 | + top: 10px; | |
18 | + } | |
19 | +} | |
20 | + | |
21 | +//Bootstrap Overrides | |
22 | +.navbar >.container .navbar-brand { | |
23 | + width: 220px !important; | |
24 | +} | |
25 | + | |
26 | +.row { | |
27 | + margin: { | |
28 | + right: 8px !important; | |
29 | + } | |
30 | +} | |
31 | + | |
32 | +.container { | |
33 | + padding: { | |
34 | + right: 0px !important; | |
35 | + left: 0px !important; | |
36 | + } | |
37 | +} | |
38 | + | |
39 | +//Cube Theme Overrides | |
40 | +#nav-col { | |
41 | + height: 100%; | |
42 | +} | |
43 | + | |
44 | +#content-wrapper { | |
45 | + background: none !important; | |
46 | +} | |
47 | + | |
48 | +#header-navbar { | |
49 | + z-index: 999 !important; | |
50 | +} | |
51 | + | |
52 | +#logo.navbar-brand { | |
53 | + img { | |
54 | + float: left; | |
55 | + width: 60px !important; | |
56 | + height: 60px !important; | |
57 | + margin: 0px { | |
58 | + top: -10px; | |
59 | + } | |
60 | + } | |
61 | + | |
62 | + .logo-title { | |
63 | + float: left; | |
64 | + font: { | |
65 | + family: fantasy; | |
66 | + size: 16pt; | |
67 | + } | |
68 | + } | |
69 | +} | |
70 | + | |
71 | +#content-wrapper { | |
72 | + min-height: 100% !important; | |
73 | +} | |
74 | + | |
75 | +//New Classes and Customizations | |
76 | + | |
77 | +.full-content { | |
78 | + /* | |
79 | + * Inform additional rules here to content | |
80 | + * when the sidebar is hidden (user not logged in). | |
81 | + */ | |
82 | + margin-left: 0px !important; | |
83 | +} | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_fixed_layouts.scss
0 → 100644
... | ... | @@ -0,0 +1,49 @@ |
1 | +/* FIXED ELEMENTS */ | |
2 | +.fixed-header { | |
3 | + #header-navbar { | |
4 | + left: 0; | |
5 | + position: fixed; | |
6 | + right: 0; | |
7 | + top: 0; | |
8 | + width: 100%; | |
9 | + z-index: 999; | |
10 | + } | |
11 | + #page-wrapper { | |
12 | + padding-top: 50px; | |
13 | + } | |
14 | +} | |
15 | +.fixed-footer { | |
16 | + #footer-bar { | |
17 | + bottom: 0; | |
18 | + left: 0; | |
19 | + margin: 0; | |
20 | + position: fixed; | |
21 | + right: 0; | |
22 | + width: 100%; | |
23 | + z-index: 999; | |
24 | + } | |
25 | + #content-wrapper { | |
26 | + padding-bottom: 36px | |
27 | + } | |
28 | +} | |
29 | +@media (min-width: $break-sm-min) { | |
30 | + .fixed-leftmenu #nav-col { | |
31 | + position: fixed; | |
32 | + height: 100%; | |
33 | + } | |
34 | + .fixed-leftmenu.fixed-footer #nav-col { | |
35 | + padding-bottom: 36px; | |
36 | + } | |
37 | + .fixed-leftmenu.fixed-header #nav-col { | |
38 | + padding-bottom: 50px; | |
39 | + } | |
40 | + .fixed-leftmenu.fixed-header.fixed-footer #nav-col { | |
41 | + padding-bottom: 86px; | |
42 | + } | |
43 | +} | |
44 | +@media (max-width: $break-sm-max) { | |
45 | + .fixed-header #nav-col { | |
46 | + position: fixed; | |
47 | + width: 100%; | |
48 | + } | |
49 | +} | |
0 | 50 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_footer.scss
0 → 100644
... | ... | @@ -0,0 +1,25 @@ |
1 | +#footer-bar { | |
2 | + background: #fff; | |
3 | + border-top: 1px solid $main-bg-color; | |
4 | + bottom: 0; | |
5 | + font-size: 0.8em; | |
6 | + height: 37px; | |
7 | + line-height: 36px; | |
8 | + margin-left: -15px; | |
9 | + margin-right: -15px; | |
10 | + position: absolute; | |
11 | + width: 100%; | |
12 | + | |
13 | + @media (max-width: $break-xs-max) { | |
14 | + margin-left: -8px; | |
15 | + margin-right: -8px; | |
16 | + } | |
17 | + @media (max-width: $break-xxs-max) { | |
18 | + margin-left: -5px; | |
19 | + margin-right: -5px; | |
20 | + } | |
21 | +} | |
22 | +#footer-copyright { | |
23 | + text-align: center; | |
24 | + margin: 0; | |
25 | +} | |
0 | 26 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_header.scss
0 → 100644
... | ... | @@ -0,0 +1,516 @@ |
1 | +.navbar-toggle { | |
2 | + border: medium none; | |
3 | + font-size: 1.4em; | |
4 | + height: 50px; | |
5 | + margin: 0; | |
6 | + text-shadow: none; | |
7 | + width: 50px; | |
8 | + z-index: 100; | |
9 | + @include border-radius(0); | |
10 | + | |
11 | + .icon-bar { | |
12 | + background: none repeat scroll 0 0 white; | |
13 | + } | |
14 | +} | |
15 | +.nav > li { | |
16 | + float: left; | |
17 | +} | |
18 | +.navbar-nav { | |
19 | + margin: 0 0 0 10px; | |
20 | + | |
21 | + > li > a { | |
22 | + padding-bottom: 15px; | |
23 | + padding-top: 15px; | |
24 | + line-height: 24px; | |
25 | + } | |
26 | + > li > .dropdown-menu { | |
27 | + @include border-radius($border-radius-base); | |
28 | + min-width: 223px; | |
29 | + } | |
30 | +} | |
31 | +.dropdown-menu > li > a { | |
32 | + color: #707070; | |
33 | + font-size: 0.875em; | |
34 | + line-height: 1.7; | |
35 | + padding-left: 35px; | |
36 | + @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s); | |
37 | + | |
38 | + &:hover, | |
39 | + &:focus { | |
40 | + background-color: #f6f6f6; | |
41 | + color: #707070; | |
42 | + } | |
43 | + > i { | |
44 | + position: absolute; | |
45 | + margin-left: -18px; | |
46 | + margin-top: 4px; | |
47 | + } | |
48 | +} | |
49 | +.nav-pills > li { | |
50 | + float: none; | |
51 | + | |
52 | + > a { | |
53 | + @include border-radius(0); | |
54 | + } | |
55 | +} | |
56 | + | |
57 | +.navbar > .container .navbar-brand { | |
58 | + background: #34495e; | |
59 | + color: #fff; | |
60 | + font-family: 'Titillium Web',Geneva,sans-serif; | |
61 | + font-weight: 700; | |
62 | + width: 220px; | |
63 | + margin-left: -8px; | |
64 | + padding: 10px 15px; | |
65 | + | |
66 | + @media (max-width: $break-sm-max) { | |
67 | + background: transparent; | |
68 | + color: #262626; | |
69 | + } | |
70 | + @media (max-width: $break-xs-max) { | |
71 | + padding-top: 12px; | |
72 | + padding-top: 12.5px; | |
73 | + } | |
74 | +} | |
75 | +#logo { | |
76 | + @media (max-width: $break-xs-max) { | |
77 | + width: 150px; | |
78 | + padding-left: 0; | |
79 | + font-size: 1em; | |
80 | + margin-left: 6px; | |
81 | + } | |
82 | + @media (max-width: 400px) { | |
83 | + width: auto; | |
84 | + margin-left: 15px; | |
85 | + } | |
86 | + | |
87 | + img { | |
88 | + @media (max-width: $break-xs-max) { | |
89 | + height: 19px; | |
90 | + } | |
91 | + } | |
92 | + span { | |
93 | + @media (max-width: 400px) { | |
94 | + display: none; | |
95 | + } | |
96 | + } | |
97 | + &.navbar-brand > img { | |
98 | + margin: 0 auto; | |
99 | + padding-right: 4px; | |
100 | + height: 30px; | |
101 | + | |
102 | + @media (max-width: $break-xs-max) { | |
103 | + height: 25px; | |
104 | + } | |
105 | + } | |
106 | + &.navbar-brand > img.normal-logo.logo-white { | |
107 | + @media (min-width: $break-sm-min) { | |
108 | + display: block; | |
109 | + } | |
110 | + @media (max-width: $break-sm-max) { | |
111 | + display: none; | |
112 | + } | |
113 | + } | |
114 | + &.navbar-brand > img.normal-logo.logo-black { | |
115 | + @media (min-width: $break-sm-min) { | |
116 | + display: none; | |
117 | + } | |
118 | + @media (max-width: $break-sm-max) { | |
119 | + display: block; | |
120 | + } | |
121 | + } | |
122 | +} | |
123 | +#header-navbar { | |
124 | + background: #fff; | |
125 | + border: 0 none; | |
126 | + @include border-radius(0); | |
127 | + margin: 0; | |
128 | + min-height: 50px; | |
129 | + color: #262626; | |
130 | + box-shadow: 0px 1px 3px 0 rgba(0,0,0, 0.1); | |
131 | + position: relative; | |
132 | + z-index: 99; | |
133 | + | |
134 | + .navbar-form { | |
135 | + .form-group { | |
136 | + position: relative; | |
137 | + } | |
138 | + .form-control { | |
139 | + background: #131313; | |
140 | + color: #707070; | |
141 | + height: 30px; | |
142 | + line-height: 30px; | |
143 | + margin-top: 2px; | |
144 | + font-size: 0.75em; | |
145 | + } | |
146 | + .nav-search-icon { | |
147 | + position: absolute; | |
148 | + color: #707070; | |
149 | + right: 6px; | |
150 | + top: 8px; | |
151 | + } | |
152 | + } | |
153 | + .nav > li > a { | |
154 | + height: 50px; | |
155 | + } | |
156 | + .nav > li > a > span.count { | |
157 | + background: none repeat scroll 0 0 $red-color; | |
158 | + @include border-radius(50%); | |
159 | + color: #fff; | |
160 | + display: block; | |
161 | + font-size: 9px; | |
162 | + height: 14px; | |
163 | + line-height: 14px; | |
164 | + position: absolute; | |
165 | + right: 10px; | |
166 | + text-align: center; | |
167 | + top: 11px; | |
168 | + width: 14px; | |
169 | + } | |
170 | + .profile-dropdown > a { | |
171 | + padding-top: 8px; | |
172 | + padding-bottom: 7px; | |
173 | + line-height: 35px; | |
174 | + | |
175 | + > img { | |
176 | + @include border-radius(50%); | |
177 | + float: left; | |
178 | + height: 35px; | |
179 | + margin-right: 5px; | |
180 | + width: 35px; | |
181 | + border: 2px solid #fff; | |
182 | + } | |
183 | + > span { | |
184 | + float: left; | |
185 | + display: block; | |
186 | + margin-right: 3px; | |
187 | + font-size: em; | |
188 | + } | |
189 | + } | |
190 | +} | |
191 | +#header-nav .form-control { | |
192 | + @include border-radius(0); | |
193 | + border: 0; | |
194 | +} | |
195 | +#header-navbar .navbar-left .navbar-nav { | |
196 | + margin-left: 0; | |
197 | +} | |
198 | +#header-navbar .nav > li > a { | |
199 | + font-size: 0.875em; | |
200 | + padding-left: 18px; | |
201 | + padding-right: 18px; | |
202 | + color: #484848; | |
203 | + border: none; | |
204 | + @include border-radius(0); | |
205 | + cursor: pointer; | |
206 | +} | |
207 | +#header-navbar .nav > li > a > i, | |
208 | +#sidebar-nav .nav > li > a > i { | |
209 | + font-size: 1.125em; | |
210 | +} | |
211 | +#sidebar-nav .nav > li > a:focus, | |
212 | +#sidebar-nav .nav .open > a, | |
213 | +#sidebar-nav .nav .open > a:focus { | |
214 | + background: inherit; | |
215 | +} | |
216 | +#sidebar-nav .nav > li > a:hover, | |
217 | +#sidebar-nav .nav .open > a:hover { | |
218 | + background: darken(#2c3e50, 4%); | |
219 | + color: #fff; | |
220 | + outline: none; | |
221 | +} | |
222 | +#header-navbar .nav > li > a:hover, | |
223 | +#header-navbar .nav > li > a:focus, | |
224 | +#header-navbar .nav .open > a, | |
225 | +#header-navbar .nav .open > a:hover, | |
226 | +#header-navbar .nav .open > a:focus, | |
227 | +.navbar-toggle:hover, | |
228 | +.navbar-toggle:focus, | |
229 | +.mobile-search.active > .btn { | |
230 | + background: $primary-color; | |
231 | + color: #fff; | |
232 | +} | |
233 | +#header-navbar .nav > li > a:hover, | |
234 | +#header-navbar .nav > li > a:focus, | |
235 | +#header-navbar .nav .open > a, | |
236 | +#header-navbar .nav .open > a:hover, | |
237 | +#header-navbar .nav .open > a:focus { | |
238 | + background-color: $primary-color; | |
239 | +} | |
240 | +.nav-pills > li.active > a, | |
241 | +.nav-pills > li.active > a:hover, | |
242 | +.nav-pills > li.active > a:focus, | |
243 | +#sidebar-nav .nav-pills > li.active > a, | |
244 | +#sidebar-nav .nav-pills > li.active > a:hover, | |
245 | +#sidebar-nav .nav-pills > li.active > a:focus, | |
246 | +.nav-pills > li.open > a, | |
247 | +.nav-pills > li.open > a:hover, | |
248 | +.nav-pills > li.open > a:focus, | |
249 | +#sidebar-nav .nav-pills > li.open > a, | |
250 | +#sidebar-nav .nav-pills > li.open > a:hover, | |
251 | +#sidebar-nav .nav-pills > li.open > a:focus, | |
252 | +.nav-small #nav-col #sidebar-nav .nav-pills > li.open > a { | |
253 | + background-color: darken(#2c3e50, 4%); | |
254 | + color: #fff; | |
255 | + border-left-color: $primary-color; | |
256 | +} | |
257 | +#header-navbar .nav > li .caret { | |
258 | + border-top-color: #fff; | |
259 | + border-bottom-color: #fff; | |
260 | +} | |
261 | +#header-navbar .nav a:hover .caret { | |
262 | + border-top-color: #fff; | |
263 | + border-bottom-color: #fff; | |
264 | +} | |
265 | +.drowdown-search { | |
266 | + background: #FFFFFF; | |
267 | + display: block; | |
268 | + left: 168px; | |
269 | + padding: 4px 0; | |
270 | + position: absolute; | |
271 | + top: 0; | |
272 | + @include transition(left 0.25s ease-out 0s, right 0.25s ease-out 0s); | |
273 | + width: 0; | |
274 | + z-index: 1; | |
275 | + overflow: hidden; | |
276 | + | |
277 | + @media (max-width: $break-sm-max) { | |
278 | + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); | |
279 | + display: block; | |
280 | + left: 0; | |
281 | + padding: 10px 0; | |
282 | + top: 50px; | |
283 | + width: 100%; | |
284 | + display: none; | |
285 | + @include transition(none); | |
286 | + } | |
287 | + | |
288 | + form { | |
289 | + .form-group { | |
290 | + position: relative; | |
291 | + margin: 0 15px; | |
292 | + } | |
293 | + .form-control { | |
294 | + background: none repeat scroll 0 0 #FFFFFF; | |
295 | + box-shadow: none !important; | |
296 | + color: $text-color; | |
297 | + font-size: 1em; | |
298 | + font-weight: 400; | |
299 | + height: 42px; | |
300 | + line-height: 42px; | |
301 | + padding-left: 5px; | |
302 | + padding-right: 26px; | |
303 | + | |
304 | + @media (max-width: $break-sm-max) { | |
305 | + font-size: 1.6em; | |
306 | + font-weight: 600; | |
307 | + } | |
308 | + } | |
309 | + .nav-search-icon { | |
310 | + color: $text-color; | |
311 | + font-size: 1.2em; | |
312 | + position: absolute; | |
313 | + right: 5px; | |
314 | + top: 13px; | |
315 | + cursor: pointer; | |
316 | + | |
317 | + @media (max-width: $break-sm-max) { | |
318 | + font-size: 1.8em; | |
319 | + right: 15px; | |
320 | + top: 8px; | |
321 | + } | |
322 | + } | |
323 | + .form-control::-webkit-input-placeholder { /* WebKit browsers */ | |
324 | + color: $text-color; | |
325 | + } | |
326 | + .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ | |
327 | + color: $text-color; | |
328 | + } | |
329 | + .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ | |
330 | + color: $text-color; | |
331 | + } | |
332 | + .form-control:-ms-input-placeholder { /* Internet Explorer 10+ */ | |
333 | + color: $text-color; | |
334 | + } | |
335 | + } | |
336 | +} | |
337 | +.mobile-search { | |
338 | + overflow: hidden; | |
339 | + | |
340 | + @media (max-width: $break-sm-max) { | |
341 | + position: inherit !important; | |
342 | + overflow: visible; | |
343 | + } | |
344 | + | |
345 | + > a.btn { | |
346 | + float: right; | |
347 | + } | |
348 | + &.active { | |
349 | + width: 220px; | |
350 | + | |
351 | + @media (max-width: $break-sm-max) { | |
352 | + width: auto; | |
353 | + } | |
354 | + | |
355 | + .drowdown-search { | |
356 | + width: 220px; | |
357 | + left: 0; | |
358 | + | |
359 | + @media (max-width: $break-sm-max) { | |
360 | + display: block; | |
361 | + width: 100%; | |
362 | + left: 0; | |
363 | + } | |
364 | + } | |
365 | + } | |
366 | +} | |
367 | + | |
368 | +.navbar-nav > li > .dropdown-menu.notifications-list { | |
369 | + min-width: 310px; | |
370 | + padding-bottom: 0; | |
371 | + padding-top: 0; | |
372 | + //margin-top: 8px; | |
373 | + color: #707070; | |
374 | + // margin-left: -258px; | |
375 | +} | |
376 | +.notifications-list { | |
377 | + .item-header { | |
378 | + font-size: 0.875em; | |
379 | + font-weight: bold; | |
380 | + line-height: 40px; | |
381 | + text-align: center; | |
382 | + } | |
383 | + .item { | |
384 | + border-top: 1px solid #f6f6f6; | |
385 | + line-height: 1.4; | |
386 | + padding-bottom: 0; | |
387 | + padding-top: 0; | |
388 | + clear: both; | |
389 | + | |
390 | + > a > i { | |
391 | + color: $red-color; | |
392 | + } | |
393 | + a { | |
394 | + clear: both; | |
395 | + white-space: normal; | |
396 | + padding-bottom: 8px; | |
397 | + padding-top: 8px; | |
398 | + | |
399 | + .content { | |
400 | + | |
401 | + } | |
402 | + .time { | |
403 | + color: $primary-color; | |
404 | + margin-left: 10px; | |
405 | + position: absolute; | |
406 | + right: 13px; | |
407 | + white-space: normal !important; | |
408 | + | |
409 | + i { | |
410 | + margin-right: 3px; | |
411 | + } | |
412 | + } | |
413 | + } | |
414 | + } | |
415 | + .item-footer { | |
416 | + background: $primary-color; | |
417 | + padding-bottom: 0; | |
418 | + padding-top: 0; | |
419 | + @include border-radius(0 0 $border-radius-base $border-radius-base); | |
420 | + | |
421 | + a { | |
422 | + padding: 8px 20px; | |
423 | + text-align: center; | |
424 | + @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s); | |
425 | + color: #fff; | |
426 | + | |
427 | + &:hover, | |
428 | + &:focus { | |
429 | + background-color: $primary-color-dark; | |
430 | + color: #fff; | |
431 | + } | |
432 | + } | |
433 | + } | |
434 | + .pointer { | |
435 | + height: 12px; | |
436 | + margin: 0; | |
437 | + padding: 0; | |
438 | + position: absolute; | |
439 | + right: 21px; | |
440 | + top: -12px; | |
441 | + width: 12px; | |
442 | + display: none !important; | |
443 | + | |
444 | + .pointer-inner { | |
445 | + position: relative; | |
446 | + } | |
447 | + .arrow { | |
448 | + border-color: transparent transparent #FFFFFF; | |
449 | + border-style: solid; | |
450 | + border-width: 6px; | |
451 | + cursor: pointer; | |
452 | + left: auto; | |
453 | + position: absolute; | |
454 | + right: 0; | |
455 | + top: 0; | |
456 | + z-index: 1002; | |
457 | + } | |
458 | + .arrow-border { | |
459 | + border-color: transparent transparent rgba(0, 0, 0, 0.15); | |
460 | + border-style: solid; | |
461 | + border-width: 7px; | |
462 | + cursor: pointer; | |
463 | + left: -1px; | |
464 | + position: absolute; | |
465 | + top: -2px; | |
466 | + z-index: 1001; | |
467 | + } | |
468 | + } | |
469 | +} | |
470 | +.messages-list { | |
471 | + .item.first-item { | |
472 | + border-top: 0 !important; | |
473 | + } | |
474 | + .item > a { | |
475 | + padding-left: 20px; | |
476 | + padding-right: 20px; | |
477 | + padding-bottom: 25px; | |
478 | + @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s); | |
479 | + | |
480 | + > img { | |
481 | + position: absolute; | |
482 | + margin-top: 10px; | |
483 | + } | |
484 | + > .content { | |
485 | + display: block; | |
486 | + padding-left: 50px; | |
487 | + padding-top: 5px; | |
488 | + | |
489 | + .content-headline { | |
490 | + color: #605F5F; | |
491 | + display: block; | |
492 | + font-weight: 600; | |
493 | + } | |
494 | + .content-text { | |
495 | + display: block; | |
496 | + line-height: 1.4; | |
497 | + } | |
498 | + } | |
499 | + } | |
500 | +} | |
501 | +#header-navbar .container { | |
502 | + @media (max-width: 400px) { | |
503 | + padding: 0; | |
504 | + } | |
505 | +} | |
506 | +.profile-dropdown .dropdown-toggle { | |
507 | + @media (max-width: 400px) { | |
508 | + padding-left: 5px !important; | |
509 | + padding-right: 5px !important; | |
510 | + } | |
511 | +} | |
512 | +#header-nav .nav { | |
513 | + @media (max-width: 400px) { | |
514 | + margin-left: 0; | |
515 | + } | |
516 | +} | |
0 | 517 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_layouts.scss
0 → 100644
... | ... | @@ -0,0 +1,273 @@ |
1 | +html, body { | |
2 | + font-family: $font-stack; | |
3 | + -webkit-font-smoothing: antialiased; | |
4 | + | |
5 | + @media (max-width: $break-xxs-max) { | |
6 | + font-size: 12px; | |
7 | + } | |
8 | +} | |
9 | +body { | |
10 | + color: $text-color; | |
11 | + background: url("../../img/whitey.jpg") repeat scroll 0 0 #fff; | |
12 | + background-size: 220px 220px; | |
13 | +} | |
14 | +h1, h2, h3, h4, h5, h6 { | |
15 | + font-family: $heading-font-family; | |
16 | + font-weight: $font-hx-weight; | |
17 | +} | |
18 | +h1 { | |
19 | + clear: both; | |
20 | + color: $primary-color; | |
21 | + margin: 0 0 20px 0; | |
22 | + padding-left: 14px; | |
23 | + font-size: $font-size-h1; | |
24 | +} | |
25 | +h2 { | |
26 | + clear: both; | |
27 | + font-size: $font-size-h2; | |
28 | + margin-bottom: 10px; | |
29 | + padding: 10px 0 10px 30px; | |
30 | +} | |
31 | +h3 { | |
32 | + border-bottom: 2px solid $gray-color-light; | |
33 | + padding-left: 5px; | |
34 | + margin-bottom: 15px; | |
35 | + margin-top: 30px; | |
36 | + font-size: $font-size-h3; | |
37 | + | |
38 | + > span { | |
39 | + border-bottom: 2px solid $gray-color-light; | |
40 | + display: inline-block; | |
41 | + padding: 0 5px 5px; | |
42 | + } | |
43 | +} | |
44 | +h4 { | |
45 | + font-size: $font-size-h4; | |
46 | +} | |
47 | +h5 { | |
48 | + font-size: $font-size-h5; | |
49 | +} | |
50 | +h6 { | |
51 | + font-size: $font-size-h6; | |
52 | +} | |
53 | + | |
54 | +a { | |
55 | + color: $link-color; | |
56 | + outline: none !important; | |
57 | + | |
58 | + &:hover, | |
59 | + &:focus { | |
60 | + color: $link-color-hover; | |
61 | + } | |
62 | +} | |
63 | +.container { | |
64 | + padding-left: 8px; | |
65 | + padding-right: 8px; | |
66 | + | |
67 | + @media (max-width: $break-xs-max) { | |
68 | + padding-left: 5px; | |
69 | + padding-right: 5px; | |
70 | + } | |
71 | +} | |
72 | +.row { | |
73 | + margin-left: -8px; | |
74 | + margin-right: -8px; | |
75 | + | |
76 | + @media (max-width: $break-xs-max) { | |
77 | + margin-left: -5px; | |
78 | + margin-right: -5px; | |
79 | + } | |
80 | +} | |
81 | +.col-xs-1, | |
82 | +.col-sm-1, | |
83 | +.col-md-1, | |
84 | +.col-lg-1, | |
85 | +.col-xs-2, | |
86 | +.col-sm-2, | |
87 | +.col-md-2, | |
88 | +.col-lg-2, | |
89 | +.col-xs-3, | |
90 | +.col-sm-3, | |
91 | +.col-md-3, | |
92 | +.col-lg-3, | |
93 | +.col-xs-4, | |
94 | +.col-sm-4, | |
95 | +.col-md-4, | |
96 | +.col-lg-4, | |
97 | +.col-xs-5, | |
98 | +.col-sm-5, | |
99 | +.col-md-5, | |
100 | +.col-lg-5, | |
101 | +.col-xs-6, | |
102 | +.col-sm-6, | |
103 | +.col-md-6, | |
104 | +.col-lg-6, | |
105 | +.col-xs-7, | |
106 | +.col-sm-7, | |
107 | +.col-md-7, | |
108 | +.col-lg-7, | |
109 | +.col-xs-8, | |
110 | +.col-sm-8, | |
111 | +.col-md-8, | |
112 | +.col-lg-8, | |
113 | +.col-xs-9, | |
114 | +.col-sm-9, | |
115 | +.col-md-9, | |
116 | +.col-lg-9, | |
117 | +.col-xs-10, | |
118 | +.col-sm-10, | |
119 | +.col-md-10, | |
120 | +.col-lg-10, | |
121 | +.col-xs-11, | |
122 | +.col-sm-11, | |
123 | +.col-md-11, | |
124 | +.col-lg-11, | |
125 | +.col-xs-12, | |
126 | +.col-sm-12, | |
127 | +.col-md-12, | |
128 | +.col-lg-12 { | |
129 | + padding-left: 8px; | |
130 | + padding-right: 8px; | |
131 | + | |
132 | + @media (max-width: $break-xs-max) { | |
133 | + padding-left: 5px; | |
134 | + padding-right: 5px; | |
135 | + } | |
136 | +} | |
137 | + | |
138 | +/* new xxs layout for extra small devices */ | |
139 | +@media (max-width: $break-xxs-max) { | |
140 | + h1 { | |
141 | + padding-left: 5px; | |
142 | + font-size: 1.8em; | |
143 | + } | |
144 | + h2 { | |
145 | + font-size: 1.5em; | |
146 | + } | |
147 | + .hidden-xxs { | |
148 | + display: none !important; | |
149 | + } | |
150 | + tr.hidden-xxs { | |
151 | + display: table-row !important; | |
152 | + } | |
153 | + | |
154 | + th.hidden-xxs, | |
155 | + td.hidden-xxs { | |
156 | + display: table-cell !important; | |
157 | + } | |
158 | + | |
159 | + .visible-xxs { | |
160 | + display: block !important; | |
161 | + } | |
162 | + tr.visible-xxs { | |
163 | + display: none !important; | |
164 | + } | |
165 | + | |
166 | + th.visible-xxs, | |
167 | + td.visible-xxs { | |
168 | + display: none !important; | |
169 | + } | |
170 | + .breadcrumb { | |
171 | + padding-left: 6px; | |
172 | + } | |
173 | +} | |
174 | + | |
175 | +#theme-wrapper { | |
176 | + box-shadow: 0 0 53px 0 rgba(0, 0, 0, 0.55); | |
177 | + max-width: $container-max-width; | |
178 | +} | |
179 | +#page-wrapper { | |
180 | + background-color: #2c3e50; | |
181 | +} | |
182 | +.container { | |
183 | + margin: 0; | |
184 | + max-width: $container-max-width; | |
185 | + width: 100%; | |
186 | +} | |
187 | + | |
188 | +#content-wrapper { | |
189 | + background: $main-bg-color; | |
190 | + height: 100%; | |
191 | + margin-top: 0; | |
192 | + margin-bottom: 0; | |
193 | + position: relative; | |
194 | + min-height: 1200px; | |
195 | + padding: 15px 15px 35px 15px; | |
196 | + margin-left: 220px; | |
197 | + | |
198 | + @media (max-width: $break-sm-max) { | |
199 | + margin-left: 0; | |
200 | + border-left: 0 !important; | |
201 | + border-right: 0 !important; | |
202 | + } | |
203 | + @media (max-width: $break-xs-max) { | |
204 | + padding: 10px 8px 0 8px; | |
205 | + } | |
206 | + @media (max-width: $break-xxs-max) { | |
207 | + padding: 5px 5px 0 5px; | |
208 | + } | |
209 | + | |
210 | + > .row { | |
211 | + @include opacity(1); | |
212 | + /*transition: opacity 0.8s ease-in-out 0s;*/ | |
213 | + } | |
214 | +} | |
215 | +#content-header { | |
216 | + background: lighten($main-bg-color, 4%); | |
217 | + margin: -15px -15px 20px -15px; | |
218 | + padding: 15px; | |
219 | + border-bottom: 1px solid darken($main-bg-color, 3%); | |
220 | + | |
221 | + @media (max-width: $break-xs-max) { | |
222 | + margin: -15px -5px 20px -5px; | |
223 | + } | |
224 | +} | |
225 | +#content-header h1 { | |
226 | + margin-bottom: 0; | |
227 | + font-size: 1.8em; | |
228 | +} | |
229 | +.main-box { | |
230 | + background: #FFFFFF; | |
231 | + box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | |
232 | + margin-bottom: 16px; | |
233 | + /* overflow: hidden; */ | |
234 | + @include border-radius($border-radius-base); | |
235 | + | |
236 | + @media (max-width: $break-xs-max) { | |
237 | + margin-bottom: 10px; | |
238 | + } | |
239 | + | |
240 | + h2 { | |
241 | + font-size: 1.3em; | |
242 | + line-height: 29px; | |
243 | + margin: 0; | |
244 | + padding: 0; | |
245 | + | |
246 | + @media (max-width: $break-xxs-max) { | |
247 | + margin-bottom: 5px; | |
248 | + } | |
249 | + } | |
250 | + &.no-header { | |
251 | + padding-top: 20px; | |
252 | + } | |
253 | + .main-box-header { | |
254 | + min-height: 50px; | |
255 | + padding: 10px 20px; | |
256 | + | |
257 | + &.with-border { | |
258 | + border-bottom: 1px solid #ecf0f1; | |
259 | + } | |
260 | + } | |
261 | + .main-box-body { | |
262 | + padding: 0 20px 20px 20px; | |
263 | + } | |
264 | +} | |
265 | + | |
266 | +h1 small, | |
267 | +h2 small, | |
268 | +h3 small, | |
269 | +h1 .small, | |
270 | +h2 .small, | |
271 | +h3 .small { | |
272 | + padding-left: 8px; | |
273 | +} | |
0 | 274 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_mixins.scss
0 → 100644
... | ... | @@ -0,0 +1,63 @@ |
1 | +// MIXINS | |
2 | +@mixin border-radius($radius) { | |
3 | + border-radius: $radius; | |
4 | + background-clip: padding-box; /* stops bg color from leaking outside the border: */ | |
5 | +} | |
6 | + | |
7 | +@mixin box-sizing($box-model) { | |
8 | + box-sizing: $box-model; | |
9 | +} | |
10 | + | |
11 | +@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { | |
12 | + top: $top; | |
13 | + right: $right; | |
14 | + bottom: $bottom; | |
15 | + left: $left; | |
16 | + position: absolute; | |
17 | +} | |
18 | + | |
19 | +@mixin font-size($size: 12, $base: 16) { | |
20 | + font-size: $size + px; | |
21 | + font-size: ($size / $base) * 1rem; | |
22 | +} | |
23 | + | |
24 | +@mixin keyframes($animation-name) { | |
25 | + @-webkit-keyframes #{$animation-name} { | |
26 | + @content; | |
27 | + } | |
28 | + @-moz-keyframes #{$animation-name} { | |
29 | + @content; | |
30 | + } | |
31 | + @-ms-keyframes #{$animation-name} { | |
32 | + @content; | |
33 | + } | |
34 | + @-o-keyframes #{$animation-name} { | |
35 | + @content; | |
36 | + } | |
37 | + @keyframes #{$animation-name} { | |
38 | + @content; | |
39 | + } | |
40 | +} | |
41 | + | |
42 | +@mixin animation($str) { | |
43 | + -webkit-animation: #{$str}; | |
44 | + -moz-animation: #{$str}; | |
45 | + -ms-animation: #{$str}; | |
46 | + -o-animation: #{$str}; | |
47 | + animation: #{$str}; | |
48 | +} | |
49 | + | |
50 | +@mixin transition($args...) { | |
51 | + transition: $args; | |
52 | +} | |
53 | + | |
54 | +@mixin opacity($opacity) { | |
55 | + opacity: $opacity; | |
56 | +} | |
57 | + | |
58 | +// PLACEHOLDERS | |
59 | +%text-truncate { | |
60 | + overflow: hidden; | |
61 | + text-overflow: ellipsis; | |
62 | + white-space: nowrap; | |
63 | +} | |
0 | 64 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_sidebar.scss
0 → 100644
... | ... | @@ -0,0 +1,274 @@ |
1 | +#col-left { | |
2 | + position: relative; | |
3 | + color: #003940; | |
4 | + height: 100%; | |
5 | + | |
6 | + a { | |
7 | + color: #e1e1e1; | |
8 | + } | |
9 | + a:hover, | |
10 | + .nav-active a.nav-link, | |
11 | + a.active { | |
12 | + color: #fff; | |
13 | + } | |
14 | + * { | |
15 | + outline: none; | |
16 | + } | |
17 | +} | |
18 | +#nav-col { | |
19 | + padding: 0; | |
20 | + z-index: 100; | |
21 | + position: absolute; | |
22 | + background: #2c3e50; | |
23 | + width: 220px; | |
24 | + | |
25 | + @media (max-width: $break-sm-max) { | |
26 | + position: relative; | |
27 | + width: auto; | |
28 | + } | |
29 | +} | |
30 | +#sidebar-nav { | |
31 | + max-height: 100%; | |
32 | + padding-left: 0; | |
33 | + padding-right: 0; | |
34 | + | |
35 | + .nav { | |
36 | + > li { | |
37 | + margin: 0; | |
38 | + /* font-size: 0.875em; | |
39 | + font-weight: 600; */ | |
40 | + | |
41 | + &.nav-header { | |
42 | + color: lighten(#2c3e50, 40%); | |
43 | + font-size: 0.8em; | |
44 | + padding: 12px 15px 6px 14px; | |
45 | + border-top: 2px solid darken(#2c3e50, 4%); | |
46 | + | |
47 | + &.nav-header-first { | |
48 | + padding-top: 4px; | |
49 | + border-top: 0; | |
50 | + } | |
51 | + } | |
52 | + | |
53 | + > a { | |
54 | + color: #fff; | |
55 | + height: 44px; | |
56 | + line-height: 28px; | |
57 | + @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s); | |
58 | + overflow: hidden; | |
59 | + padding: 8px 15px 8px 20px; | |
60 | + border-left: 0 solid transparent; | |
61 | + | |
62 | + &:hover { | |
63 | + border-left-color: $primary-color; | |
64 | + } | |
65 | + > i { | |
66 | + position: absolute; | |
67 | + margin-top: 6px; | |
68 | + } | |
69 | + > span { | |
70 | + margin-left: 35px; | |
71 | + font-size: 0.875em; | |
72 | + font-weight: 700; | |
73 | + | |
74 | + &.label { | |
75 | + font-size: 0.75em; | |
76 | + margin: 5px 0 0 0; | |
77 | + padding: 4px 0.6em; | |
78 | + } | |
79 | + &.label.label-circle { | |
80 | + margin-right: 5px; | |
81 | + } | |
82 | + } | |
83 | + } | |
84 | + &.open > a { | |
85 | + border-bottom-color: #252525; | |
86 | + outline: none; | |
87 | + text-decoration: none; | |
88 | + } | |
89 | + &.active > .submenu > li.active > .submenu { | |
90 | + display: block; | |
91 | + } | |
92 | + } | |
93 | + li { | |
94 | + @import "sidebar/submenu"; | |
95 | + | |
96 | + &.active > .submenu { | |
97 | + display: block; | |
98 | + } | |
99 | + } | |
100 | + > .open, | |
101 | + > .active { | |
102 | + @import "sidebar/open_active"; | |
103 | + } | |
104 | + } | |
105 | +} | |
106 | +.navbar-nav .open .dropdown-menu { | |
107 | + background-color: #FFFFFF; | |
108 | + border: none; | |
109 | + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); | |
110 | + // left: 0; | |
111 | + position: absolute; | |
112 | +} | |
113 | +#user-left-box { | |
114 | + padding: 20px 15px 20px 25px; | |
115 | + | |
116 | + img { | |
117 | + @include border-radius(18%); | |
118 | + border: 3px solid #fff; | |
119 | + float: left; | |
120 | + width: 70px; | |
121 | + } | |
122 | + .user-box { | |
123 | + color: #fff; | |
124 | + float: left; | |
125 | + padding-left: 15px; | |
126 | + padding-top: 18px; | |
127 | + | |
128 | + > .name { | |
129 | + display: block; | |
130 | + font-size: 1em; | |
131 | + font-weight: 600; | |
132 | + line-height: 1.2; | |
133 | + | |
134 | + > a { | |
135 | + color: #fff; | |
136 | + | |
137 | + &:hover, | |
138 | + &:focus { | |
139 | + color: #E1E1E1; | |
140 | + text-decoration: none; | |
141 | + } | |
142 | + } | |
143 | + } | |
144 | + > .status { | |
145 | + display: block; | |
146 | + font-size: 0.75em; | |
147 | + padding-top: 3px; | |
148 | + } | |
149 | + > .status > i { | |
150 | + color: $green-color; | |
151 | + margin-right: 4px; | |
152 | + } | |
153 | + } | |
154 | + &.dropdown { | |
155 | + .dropdown-menu { | |
156 | + top: 55px; | |
157 | + left: 30px; | |
158 | + | |
159 | + a { | |
160 | + color: #707070; | |
161 | + font-size: 0.875em; | |
162 | + | |
163 | + &:hover { | |
164 | + background-color: #f6f6f6; | |
165 | + color: #707070; | |
166 | + } | |
167 | + } | |
168 | + } | |
169 | + } | |
170 | +} | |
171 | +@media (min-width: $break-sm-min) { | |
172 | + .nav-small { | |
173 | + #nav-col { | |
174 | + width: 64px; | |
175 | + } | |
176 | + #content-wrapper { | |
177 | + margin-left: 64px; | |
178 | + } | |
179 | + #nav-col { | |
180 | + #user-left-box { | |
181 | + display: none; | |
182 | + } | |
183 | + #sidebar-nav { | |
184 | + .nav > li > a { | |
185 | + padding-left: 15px !important; | |
186 | + padding-right: 15px; | |
187 | + text-align: center; | |
188 | + | |
189 | + > i { | |
190 | + position: relative; | |
191 | + font-size: 1.25em; | |
192 | + } | |
193 | + > span { | |
194 | + display: none; | |
195 | + } | |
196 | + } | |
197 | + .nav > li.nav-header { | |
198 | + display: none; | |
199 | + } | |
200 | + .nav li > a.dropdown-toggle > .drop-icon { | |
201 | + display: none; | |
202 | + } | |
203 | + .nav .submenu > li > a.dropdown-toggle > .drop-icon { | |
204 | + display: block; | |
205 | + } | |
206 | + .nav li .submenu { | |
207 | + left: 64px; | |
208 | + position: absolute; | |
209 | + top: 0; | |
210 | + width: 210px; | |
211 | + | |
212 | + > li > a { | |
213 | + padding-left: 28px; | |
214 | + } | |
215 | + } | |
216 | + .nav > .open > .submenu > li > .submenu, | |
217 | + .nav > .active > .submenu > li > .submenu { | |
218 | + left: auto; | |
219 | + position: relative; | |
220 | + top: auto; | |
221 | + width: 100%; | |
222 | + | |
223 | + a { | |
224 | + padding-left: 48px | |
225 | + } | |
226 | + } | |
227 | + } | |
228 | + } | |
229 | + #sidebar-nav .nav li.active > .submenu { | |
230 | + display: none; | |
231 | + } | |
232 | + #nav-col-submenu { | |
233 | + @import "sidebar/submenu"; | |
234 | + @import "sidebar/open_active"; | |
235 | + | |
236 | + .submenu { | |
237 | + position: absolute; | |
238 | + top: 60px; | |
239 | + left: 64px; | |
240 | + width: 210px; | |
241 | + | |
242 | + > li > a { | |
243 | + padding-left: 28px; | |
244 | + | |
245 | + &.dropdown-toggle > .drop-icon { | |
246 | + display: block; | |
247 | + } | |
248 | + } | |
249 | + } | |
250 | + > .submenu { | |
251 | + display: block !important; | |
252 | + } | |
253 | + .submenu > li > .submenu, | |
254 | + .submenu > li > .submenu { | |
255 | + left: auto; | |
256 | + position: relative; | |
257 | + top: auto; | |
258 | + width: 100%; | |
259 | + | |
260 | + a { | |
261 | + padding-left: 48px | |
262 | + } | |
263 | + } | |
264 | + } | |
265 | + } | |
266 | +} | |
267 | +@media (max-width: $break-sm-max) { | |
268 | + .navbar-toggle { | |
269 | + display: block; | |
270 | + } | |
271 | + #sidebar-nav.navbar-collapse { | |
272 | + max-height: 336px; | |
273 | + } | |
274 | +} | |
0 | 275 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/_skins.scss
0 → 100644
public/designs/themes/cube-responsive/sass/imports/_variables.scss
0 → 100644
... | ... | @@ -0,0 +1,89 @@ |
1 | +//BASICS | |
2 | + | |
3 | +//primary colors | |
4 | +$primary-color: #03a9f4; | |
5 | +$primary-color-dark: #0288d1; | |
6 | + | |
7 | +$red-color: #e84e40; | |
8 | +$red-color-dark: #dd191d; | |
9 | + | |
10 | +$yellow-color: #ffc107; | |
11 | +$yellow-color-dark: #ffa000; | |
12 | + | |
13 | +$green-color: #8bc34a; | |
14 | +$green-color-dark: #689f38; | |
15 | + | |
16 | +$purple-color: #9c27b0; | |
17 | +$purple-color-dark: #7b1fa2; | |
18 | + | |
19 | +$gray-color: #90a4ae; | |
20 | +$gray-color-dark: #607d8b; | |
21 | +$gray-color-light: #b0bec5; | |
22 | + | |
23 | +$cyan-color: #00bcd4; | |
24 | +$cyan-color-dark: #0097a7; | |
25 | + | |
26 | +$teal-color: #009688; | |
27 | +$teal-color-dark: #00796b; | |
28 | + | |
29 | +//global text color | |
30 | +$text-color: #212121; | |
31 | + | |
32 | +//global bg color | |
33 | +$main-bg-color: #e7ebee; | |
34 | + | |
35 | +//global link color | |
36 | +$link-color: $primary-color; | |
37 | +$link-color-hover: $primary-color; | |
38 | + | |
39 | +$default-bg-hover-color: #f8f8f8; | |
40 | + | |
41 | + | |
42 | +//TYPOGRAPHY | |
43 | + | |
44 | +//font families | |
45 | +$font-stack: 'Open Sans', sans-serif; | |
46 | + | |
47 | +//headings typo | |
48 | +$font-size-h1: 2em; | |
49 | +$font-size-h2: 1.8em; | |
50 | +$font-size-h3: 1.4em; | |
51 | +$font-size-h4: 1.2em; | |
52 | +$font-size-h5: 1em; | |
53 | +$font-size-h6: 0.875em; | |
54 | + | |
55 | +$font-hx-weight: 300; | |
56 | + | |
57 | +$line-height-base: 1.428571429 !default; | |
58 | + | |
59 | +$heading-font-family: $font-stack; | |
60 | + | |
61 | + | |
62 | +//GRID - media queries breakpoints | |
63 | +$break-xxs-min: 420px; | |
64 | +$break-xs-min: 768px; | |
65 | +$break-sm-min: 992px; | |
66 | +$break-md-min: 1200px; | |
67 | + | |
68 | +$break-xxs-max: ($break-xxs-min - 1); | |
69 | +$break-xs-max: ($break-xs-min - 1); | |
70 | +$break-sm-max: ($break-sm-min - 1); | |
71 | +$break-md-max: ($break-md-min - 1); | |
72 | + | |
73 | +$container-max-width: 1920px; | |
74 | + | |
75 | + | |
76 | +//BOXED LAYOUT | |
77 | +$boxed-layout-max-width: 1200px; | |
78 | + | |
79 | +$boxed-layout-breakdown2: 1260px; | |
80 | +$boxed-layout-max-width2: 1140px; | |
81 | + | |
82 | +$boxed-layout-breakdown3: $break-md-max; | |
83 | +$boxed-layout-max-width3: 1024px; | |
84 | + | |
85 | + | |
86 | +//OTHER | |
87 | +$border-radius-base: 3px !default; | |
88 | +$border-radius-large: 6px !default; | |
89 | +$border-radius-small: 2px !default; | ... | ... |
public/designs/themes/cube-responsive/sass/imports/sidebar/_open_active.scss
0 → 100644
... | ... | @@ -0,0 +1,46 @@ |
1 | +.submenu { | |
2 | + .submenu { | |
3 | + display: none; | |
4 | + } | |
5 | + > .open > a, | |
6 | + > .active > a { | |
7 | + background: inherit; | |
8 | + border-bottom-color: darken(#2c3e50, 7%); | |
9 | + box-shadow: 0 -1px 0 darken(#2c3e50, 7%) inset; | |
10 | + } | |
11 | + > li { | |
12 | + a { | |
13 | + position: relative; | |
14 | + } | |
15 | + > a.dropdown-toggle > .drop-icon { | |
16 | + font-size: 10px; | |
17 | + margin-top: -5px; | |
18 | + } | |
19 | + > .submenu { | |
20 | + background-color: darken(#2c3e50, 7%); | |
21 | + | |
22 | + > li a:hover, | |
23 | + > li a.active { | |
24 | + /* background-color: #232323; */ | |
25 | + color: $primary-color; | |
26 | + } | |
27 | + a { | |
28 | + border-bottom: 0 none; | |
29 | + border-top: 0 none; | |
30 | + padding-left: 85px; | |
31 | + | |
32 | + &:before{ | |
33 | + content: "\f111"; | |
34 | + display: inline; | |
35 | + font-family: FontAwesome; | |
36 | + font-size: 4px; | |
37 | + font-style: normal; | |
38 | + font-weight: normal; | |
39 | + margin-left: -10px; | |
40 | + margin-top: 1px; | |
41 | + position: absolute; | |
42 | + } | |
43 | + } | |
44 | + } | |
45 | + } | |
46 | +} | |
0 | 47 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/sidebar/_submenu.scss
0 → 100644
... | ... | @@ -0,0 +1,49 @@ |
1 | +a.dropdown-toggle > .drop-icon { | |
2 | + color: #868b98; | |
3 | + font-size: 12px; | |
4 | + margin-top: -6px; | |
5 | + position: absolute; | |
6 | + right: 25px; | |
7 | + top: 50%; | |
8 | + @include transition(transform 0.2s ease-in-out 0.1s); | |
9 | +} | |
10 | +&.open > a.dropdown-toggle > .drop-icon, | |
11 | +&.active > a.dropdown-toggle > .drop-icon { | |
12 | + color: #fff; | |
13 | + transform:rotate(90deg); | |
14 | +} | |
15 | + | |
16 | +.submenu { | |
17 | + display: none; | |
18 | + background: darken(#2c3e50, 4%); | |
19 | + padding: 5px 0; | |
20 | + margin: 0; | |
21 | + list-style: none; | |
22 | + | |
23 | + > li { | |
24 | + position: relative; | |
25 | + | |
26 | + > a { | |
27 | + display: block; | |
28 | + font-size: 0.875em; | |
29 | + line-height: 38px; | |
30 | + padding-left: 66px; | |
31 | + color: #fff; | |
32 | + outline: none; | |
33 | + text-decoration: none; | |
34 | + @include transition(border-color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s); | |
35 | + } | |
36 | + &:first-of-type > a { | |
37 | + border-top: 0; | |
38 | + } | |
39 | + > a:hover, | |
40 | + > a.active, | |
41 | + &.active > a, | |
42 | + &.open > a { | |
43 | + text-decoration: none; | |
44 | + color: #fff; | |
45 | + background-color: darken(#2c3e50, 7%); | |
46 | + /* box-shadow: 0 -1px 0 0 #8bf2e6 inset; */ | |
47 | + } | |
48 | + } | |
49 | +} | |
0 | 50 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/skins/_blue.scss
0 → 100644
... | ... | @@ -0,0 +1,102 @@ |
1 | +$blue-nav-color: #4c5763; | |
2 | + | |
3 | +.theme-blue { | |
4 | + #header-navbar { | |
5 | + background-color: $primary-color; | |
6 | + } | |
7 | + .navbar > .container .navbar-brand { | |
8 | + background-color: $primary-color; | |
9 | + } | |
10 | + #nav-col, | |
11 | + #page-wrapper { | |
12 | + background-color: $blue-nav-color; | |
13 | + } | |
14 | + #sidebar-nav .nav > .open > .submenu > li > .submenu, | |
15 | + #sidebar-nav .nav > .active > .submenu > li > .submenu, | |
16 | + #sidebar-nav .nav li .submenu > li.open a, | |
17 | + #nav-col-submenu .submenu > li > .submenu, | |
18 | + #nav-col-submenu li .submenu > li.open > a { | |
19 | + background-color: darken($blue-nav-color, 10%); | |
20 | + } | |
21 | + #sidebar-nav .nav > .open > .submenu > .open > a, | |
22 | + #sidebar-nav .nav > .active > .submenu > .open > a, | |
23 | + #sidebar-nav .nav > .active > .submenu > .active > a, | |
24 | + #nav-col-submenu > .submenu > .open > a, | |
25 | + #nav-col-submenu > .submenu > .active > a { | |
26 | + border-bottom-color: transparent; | |
27 | + box-shadow: 0 -1px 0 transparent inset; | |
28 | + } | |
29 | + #sidebar-nav .nav > .open > .submenu > li > .submenu > li a:hover, | |
30 | + #sidebar-nav .nav > .active > .submenu > li > .submenu > li a:hover, | |
31 | + #sidebar-nav .nav > .active > .submenu > li > .submenu > li a.active { | |
32 | + color: $primary-color; | |
33 | + } | |
34 | + .nav-pills > li.active > a, | |
35 | + .nav-pills > li.active > a:hover, | |
36 | + .nav-pills > li.active > a:focus, | |
37 | + #sidebar-nav .nav-pills > li.active > a, | |
38 | + #sidebar-nav .nav-pills > li.active > a:hover, | |
39 | + #sidebar-nav .nav-pills > li.active > a:focus, | |
40 | + .nav-pills > li.open > a, | |
41 | + .nav-pills > li.open > a:hover, | |
42 | + .nav-pills > li.open > a:focus, | |
43 | + #sidebar-nav .nav-pills > li.open > a, | |
44 | + #sidebar-nav .nav-pills > li.open > a:hover, | |
45 | + #sidebar-nav .nav-pills > li.open > a:focus, | |
46 | + .nav-small #nav-col #sidebar-nav .nav-pills > li.open > a, | |
47 | + .nav-small #nav-col-submenu .submenu > .open > a, | |
48 | + .nav-small #nav-col-submenu .submenu > .active > a, | |
49 | + .nav-small #nav-col-submenu .submenu > li > a:hover { | |
50 | + background-color: darken($blue-nav-color, 5%); | |
51 | + } | |
52 | + #sidebar-nav .nav > li > a:hover { | |
53 | + background-color: darken($blue-nav-color, 5%); | |
54 | + } | |
55 | + #header-navbar .nav > li > a { | |
56 | + color: #fff; | |
57 | + } | |
58 | + #header-navbar .nav > li > a:hover, | |
59 | + #header-navbar .nav > li > a:focus, | |
60 | + #header-navbar .nav .open > a, | |
61 | + #header-navbar .nav .open > a:hover, | |
62 | + #header-navbar .nav .open > a:focus { | |
63 | + background-color: #2980b9; | |
64 | + } | |
65 | + #sidebar-nav .nav li .submenu, | |
66 | + #nav-col-submenu .submenu { | |
67 | + background-color: darken($blue-nav-color, 5%); | |
68 | + } | |
69 | + #sidebar-nav .nav li .submenu > li > a:hover, | |
70 | + #sidebar-nav .nav li .submenu > li > a.active, | |
71 | + #sidebar-nav .nav li .submenu > li.active > a, | |
72 | + .nav-small #nav-col-submenu .submenu > .open > a, | |
73 | + .nav-small #nav-col-submenu .submenu > .active > a, | |
74 | + .nav-small #nav-col-submenu .submenu > li > a:hover, | |
75 | + .nav-small #nav-col-submenu .submenu > li > a.active, | |
76 | + .nav-small #nav-col-submenu .submenu > li.active > a { | |
77 | + background-color: darken($blue-nav-color, 10%); | |
78 | + } | |
79 | + #sidebar-nav .nav > li.nav-header { | |
80 | + border-top-color: darken($blue-nav-color, 5%); | |
81 | + color: lighten($blue-nav-color, 30%); | |
82 | + } | |
83 | + .navbar > .container .navbar-brand { | |
84 | + color: #fff; | |
85 | + } | |
86 | + .navbar-toggle { | |
87 | + color: #fff; | |
88 | + } | |
89 | + .pace .pace-progress { | |
90 | + background-color: #fff; | |
91 | + } | |
92 | +} | |
93 | +@media (max-width: $break-sm-max) { | |
94 | + .theme-blue { | |
95 | + #logo.navbar-brand > img.normal-logo.logo-white { | |
96 | + display: block; | |
97 | + } | |
98 | + #logo.navbar-brand > img.normal-logo.logo-black { | |
99 | + display: none; | |
100 | + } | |
101 | + } | |
102 | +} | |
0 | 103 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sass/imports/skins/_blue_gradient.scss
0 → 100644
... | ... | @@ -0,0 +1,109 @@ |
1 | +.theme-blue-gradient #header-navbar, | |
2 | +#config-tool #skin-colors li a.skin-changer.blue-gradient { | |
3 | + background: $primary-color; /* Old browsers */ | |
4 | + background: -moz-linear-gradient(top, $primary-color 0%, #2980b9 100%); /* FF3.6+ */ | |
5 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$primary-color), color-stop(100%,#2980b9)); /* Chrome,Safari4+ */ | |
6 | + background: -webkit-linear-gradient(top, $primary-color 0%,#2980b9 100%); /* Chrome10+,Safari5.1+ */ | |
7 | + background: -o-linear-gradient(top, $primary-color 0%,#2980b9 100%); /* Opera 11.10+ */ | |
8 | + background: -ms-linear-gradient(top, $primary-color 0%,#2980b9 100%); /* IE10+ */ | |
9 | + background: linear-gradient(to bottom, $primary-color 0%,#2980b9 100%); /* W3C */ | |
10 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary-color', endColorstr='#2980b9',GradientType=0 ); /* IE6-9 */ | |
11 | +} | |
12 | +.theme-blue-gradient { | |
13 | + .navbar > .container .navbar-brand { | |
14 | + background: transparent; | |
15 | + } | |
16 | + #header-navbar .nav > li > a { | |
17 | + color: #fff; | |
18 | + } | |
19 | + #header-navbar .nav > li > a:hover, | |
20 | + #header-navbar .nav > li > a:focus, | |
21 | + #header-navbar .nav .open > a, | |
22 | + #header-navbar .nav .open > a:hover, | |
23 | + #header-navbar .nav .open > a:focus { | |
24 | + background-color: #005486; | |
25 | + } | |
26 | + .navbar > .container .navbar-brand { | |
27 | + color: #fff; | |
28 | + } | |
29 | + .navbar-toggle { | |
30 | + color: #fff; | |
31 | + } | |
32 | + .red-bg { | |
33 | + background: $red-color !important; /* Old browsers */ | |
34 | + background: -moz-linear-gradient(top, $red-color 0%, $red-color-dark 100%) !important; /* FF3.6+ */ | |
35 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$red-color), color-stop(100%,$red-color-dark)) !important; /* Chrome,Safari4+ */ | |
36 | + background: -webkit-linear-gradient(top, $red-color 0%,$red-color-dark 100%) !important; /* Chrome10+,Safari5.1+ */ | |
37 | + background: -o-linear-gradient(top, $red-color 0%,$red-color-dark 100%) !important; /* Opera 11.10+ */ | |
38 | + background: -ms-linear-gradient(top, $red-color 0%,$red-color-dark 100%) !important; /* IE10+ */ | |
39 | + background: linear-gradient(to bottom, $red-color 0%,$red-color-dark 100%) !important; /* W3C */ | |
40 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$red-color', endColorstr='$red-color-dark',GradientType=0 ) !important; /* IE6-9 */ | |
41 | + } | |
42 | + .emerald-bg { | |
43 | + background: $primary-color !important; /* Old browsers */ | |
44 | + background: -moz-linear-gradient(top, $primary-color 0%, #2980b9 100%) !important; /* FF3.6+ */ | |
45 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$primary-color), color-stop(100%,#2980b9)) !important; /* Chrome,Safari4+ */ | |
46 | + background: -webkit-linear-gradient(top, $primary-color 0%,#2980b9 100%) !important; /* Chrome10+,Safari5.1+ */ | |
47 | + background: -o-linear-gradient(top, $primary-color 0%,#2980b9 100%) !important; /* Opera 11.10+ */ | |
48 | + background: -ms-linear-gradient(top, $primary-color 0%,#2980b9 100%) !important; /* IE10+ */ | |
49 | + background: linear-gradient(to bottom, $primary-color 0%,#2980b9 100%) !important; /* W3C */ | |
50 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary-color', endColorstr='#2980b9',GradientType=0 ) !important; /* IE6-9 */ | |
51 | + } | |
52 | + .yellow-bg { | |
53 | + background: $yellow-color !important; /* Old browsers */ | |
54 | + background: -moz-linear-gradient(top, $yellow-color 0%, $yellow-color-dark 100%) !important; /* FF3.6+ */ | |
55 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$yellow-color), color-stop(100%,$yellow-color-dark)) !important; /* Chrome,Safari4+ */ | |
56 | + background: -webkit-linear-gradient(top, $yellow-color 0%,$yellow-color-dark 100%) !important; /* Chrome10+,Safari5.1+ */ | |
57 | + background: -o-linear-gradient(top, $yellow-color 0%,$yellow-color-dark 100%) !important; /* Opera 11.10+ */ | |
58 | + background: -ms-linear-gradient(top, $yellow-color 0%,$yellow-color-dark 100%) !important; /* IE10+ */ | |
59 | + background: linear-gradient(to bottom, $yellow-color 0%,$yellow-color-dark 100%) !important; /* W3C */ | |
60 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$yellow-color', endColorstr='$yellow-color-dark',GradientType=0 ) !important; /* IE6-9 */ | |
61 | + } | |
62 | + .green-bg { | |
63 | + background: $green-color !important; /* Old browsers */ | |
64 | + background: -moz-linear-gradient(top, $green-color 0%, $green-color-dark 100%) !important; /* FF3.6+ */ | |
65 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$green-color), color-stop(100%,$green-color-dark)) !important; /* Chrome,Safari4+ */ | |
66 | + background: -webkit-linear-gradient(top, $green-color 0%,$green-color-dark 100%) !important; /* Chrome10+,Safari5.1+ */ | |
67 | + background: -o-linear-gradient(top, $green-color 0%,$green-color-dark 100%) !important; /* Opera 11.10+ */ | |
68 | + background: -ms-linear-gradient(top, $green-color 0%,$green-color-dark 100%) !important; /* IE10+ */ | |
69 | + background: linear-gradient(to bottom, $green-color 0%,$green-color-dark 100%) !important; /* W3C */ | |
70 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$green-color', endColorstr='$green-color-dark',GradientType=0 ) !important; /* IE6-9 */ | |
71 | + } | |
72 | + .purple-bg { | |
73 | + background: $purple-color !important; /* Old browsers */ | |
74 | + background: -moz-linear-gradient(top, $purple-color 0%, $purple-color-dark 100%) !important; /* FF3.6+ */ | |
75 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$purple-color), color-stop(100%,$purple-color-dark)) !important; /* Chrome,Safari4+ */ | |
76 | + background: -webkit-linear-gradient(top, $purple-color 0%,$purple-color-dark 100%) !important; /* Chrome10+,Safari5.1+ */ | |
77 | + background: -o-linear-gradient(top, $purple-color 0%,$purple-color-dark 100%) !important; /* Opera 11.10+ */ | |
78 | + background: -ms-linear-gradient(top, $purple-color 0%,$purple-color-dark 100%) !important; /* IE10+ */ | |
79 | + background: linear-gradient(to bottom, $purple-color 0%,$purple-color-dark 100%) !important; /* W3C */ | |
80 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$purple-color', endColorstr='$purple-color-dark',GradientType=0 ) !important; /* IE6-9 */ | |
81 | + } | |
82 | + .gray-bg { | |
83 | + background: $gray-color !important; /* Old browsers */ | |
84 | + background: -moz-linear-gradient(top, $gray-color 0%, $gray-color-dark 100%) !important; /* FF3.6+ */ | |
85 | + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$gray-color), color-stop(100%,$gray-color-dark)) !important; /* Chrome,Safari4+ */ | |
86 | + background: -webkit-linear-gradient(top, $gray-color 0%,$gray-color-dark 100%) !important; /* Chrome10+,Safari5.1+ */ | |
87 | + background: -o-linear-gradient(top, $gray-color 0%,$gray-color-dark 100%) !important; /* Opera 11.10+ */ | |
88 | + background: -ms-linear-gradient(top, $gray-color 0%,$gray-color-dark 100%) !important; /* IE10+ */ | |
89 | + background: linear-gradient(to bottom, $gray-color 0%,$gray-color-dark 100%) !important; /* W3C */ | |
90 | + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gray-color', endColorstr='$gray-color-dark',GradientType=0 ) !important; /* IE6-9 */ | |
91 | + } | |
92 | + .pace .pace-progress { | |
93 | + background-color: #fff; | |
94 | + } | |
95 | + #nav-col, | |
96 | + #page-wrapper { | |
97 | + background-color: #2c3e50; | |
98 | + } | |
99 | +} | |
100 | +@media (max-width: $break-sm-max) { | |
101 | + .theme-blue-gradient { | |
102 | + #logo.navbar-brand > img.normal-logo.logo-white { | |
103 | + display: block; | |
104 | + } | |
105 | + #logo.navbar-brand > img.normal-logo.logo-black { | |
106 | + display: none; | |
107 | + } | |
108 | + } | |
109 | +} | |
0 | 110 | \ No newline at end of file | ... | ... |
public/designs/themes/cube-responsive/sidebar_user.html.erb
0 → 100644
... | ... | @@ -0,0 +1,418 @@ |
1 | +<div id="nav-col"> | |
2 | + <section id="col-left" class="col-left-nano"> | |
3 | + <div id="col-left-inner" class="col-left-nano-content"> | |
4 | + <div id="user-left-box" class="clearfix hidden-sm hidden-xs dropdown profile2-dropdown"> | |
5 | + <img alt="" src="/designs/themes/cube-responsive-theme/images/samples/scarlet-159.png" /> | |
6 | + <div class="user-box"> | |
7 | + <span class="name"> | |
8 | + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
9 | + Scarlett J. | |
10 | + <i class="fa fa-angle-down"></i> | |
11 | + </a> | |
12 | + <ul class="dropdown-menu"> | |
13 | + <li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li> | |
14 | + <li><a href="#"><i class="fa fa-cog"></i>Settings</a></li> | |
15 | + <li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li> | |
16 | + <li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li> | |
17 | + </ul> | |
18 | + </span> | |
19 | + <span class="status"> | |
20 | + <i class="fa fa-circle"></i> Online | |
21 | + </span> | |
22 | + </div> | |
23 | + </div> | |
24 | + <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav"> | |
25 | + <ul class="nav nav-pills nav-stacked"> | |
26 | + <li class="nav-header nav-header-first hidden-sm hidden-xs"> | |
27 | + Navigation | |
28 | + </li> | |
29 | + <li class="active"> | |
30 | + <a href="index.html"> | |
31 | + <i class="fa fa-dashboard"></i> | |
32 | + <span>Dashboard</span> | |
33 | + <span class="label label-primary label-circle pull-right">28</span> | |
34 | + </a> | |
35 | + </li> | |
36 | + <li> | |
37 | + <a href="#" class="dropdown-toggle"> | |
38 | + <i class="fa fa-table"></i> | |
39 | + <span>Tables</span> | |
40 | + <i class="fa fa-angle-right drop-icon"></i> | |
41 | + </a> | |
42 | + <ul class="submenu"> | |
43 | + <li> | |
44 | + <a href="tables.html"> | |
45 | + Simple | |
46 | + </a> | |
47 | + </li> | |
48 | + <li> | |
49 | + <a href="tables-advanced.html"> | |
50 | + Advanced | |
51 | + </a> | |
52 | + </li> | |
53 | + <li> | |
54 | + <a href="users.html"> | |
55 | + Users | |
56 | + </a> | |
57 | + </li> | |
58 | + </ul> | |
59 | + </li> | |
60 | + <li> | |
61 | + <a href="#" class="dropdown-toggle"> | |
62 | + <i class="fa fa-envelope"></i> | |
63 | + <span>Email</span> | |
64 | + <i class="fa fa-angle-right drop-icon"></i> | |
65 | + </a> | |
66 | + <ul class="submenu"> | |
67 | + <li> | |
68 | + <a href="email-inbox.html"> | |
69 | + Inbox | |
70 | + </a> | |
71 | + </li> | |
72 | + <li> | |
73 | + <a href="email-detail.html"> | |
74 | + Detail | |
75 | + </a> | |
76 | + </li> | |
77 | + <li> | |
78 | + <a href="email-compose.html"> | |
79 | + Compose | |
80 | + </a> | |
81 | + </li> | |
82 | + </ul> | |
83 | + </li> | |
84 | + <li> | |
85 | + <a href="#" class="dropdown-toggle"> | |
86 | + <i class="fa fa-bar-chart-o"></i> | |
87 | + <span>Graphs</span> | |
88 | + <i class="fa fa-angle-right drop-icon"></i> | |
89 | + </a> | |
90 | + <ul class="submenu"> | |
91 | + <li> | |
92 | + <a href="graphs-morris.html"> | |
93 | + Morris & Mixed | |
94 | + </a> | |
95 | + </li> | |
96 | + <li> | |
97 | + <a href="graphs-flot.html"> | |
98 | + Flot | |
99 | + </a> | |
100 | + </li> | |
101 | + <li> | |
102 | + <a href="graphs-dygraphs.html"> | |
103 | + Dygraphs | |
104 | + </a> | |
105 | + </li> | |
106 | + <li> | |
107 | + <a href="graphs-xcharts.html"> | |
108 | + xCharts | |
109 | + </a> | |
110 | + </li> | |
111 | + </ul> | |
112 | + </li> | |
113 | + <li> | |
114 | + <a href="widgets.html"> | |
115 | + <i class="fa fa-th-large"></i> | |
116 | + <span>Widgets</span> | |
117 | + <span class="label label-success pull-right">New</span> | |
118 | + </a> | |
119 | + </li> | |
120 | + <li> | |
121 | + <a href="#" class="dropdown-toggle"> | |
122 | + <i class="fa fa-copy"></i> | |
123 | + <span>Pages</span> | |
124 | + <i class="fa fa-angle-right drop-icon"></i> | |
125 | + </a> | |
126 | + <ul class="submenu"> | |
127 | + <li> | |
128 | + <a href="calendar.html"> | |
129 | + Calendar | |
130 | + </a> | |
131 | + </li> | |
132 | + <li> | |
133 | + <a href="gallery.html"> | |
134 | + Gallery | |
135 | + </a> | |
136 | + </li> | |
137 | + <li> | |
138 | + <a href="gallery-v2.html"> | |
139 | + Gallery v2 | |
140 | + </a> | |
141 | + </li> | |
142 | + <li> | |
143 | + <a href="pricing.html"> | |
144 | + Pricing | |
145 | + </a> | |
146 | + </li> | |
147 | + <li> | |
148 | + <a href="projects.html"> | |
149 | + Projects | |
150 | + </a> | |
151 | + </li> | |
152 | + <li> | |
153 | + <a href="team-members.html"> | |
154 | + Team Members | |
155 | + </a> | |
156 | + </li> | |
157 | + <li> | |
158 | + <a href="timeline.html"> | |
159 | + Timeline | |
160 | + </a> | |
161 | + </li> | |
162 | + <li> | |
163 | + <a href="timeline-grid.html"> | |
164 | + Timeline Grid | |
165 | + </a> | |
166 | + </li> | |
167 | + <li> | |
168 | + <a href="user-profile.html"> | |
169 | + User Profile | |
170 | + </a> | |
171 | + </li> | |
172 | + <li> | |
173 | + <a href="search.html"> | |
174 | + Search Results | |
175 | + </a> | |
176 | + </li> | |
177 | + <li> | |
178 | + <a href="invoice.html"> | |
179 | + Invoice | |
180 | + </a> | |
181 | + </li> | |
182 | + <li> | |
183 | + <a href="intro.html"> | |
184 | + Tour Layout | |
185 | + </a> | |
186 | + </li> | |
187 | + </ul> | |
188 | + </li> | |
189 | + <li class="nav-header hidden-sm hidden-xs"> | |
190 | + Components | |
191 | + </li> | |
192 | + <li> | |
193 | + <a href="#" class="dropdown-toggle"> | |
194 | + <i class="fa fa-edit"></i> | |
195 | + <span>Forms</span> | |
196 | + <i class="fa fa-angle-right drop-icon"></i> | |
197 | + </a> | |
198 | + <ul class="submenu"> | |
199 | + <li> | |
200 | + <a href="form-elements.html"> | |
201 | + Elements | |
202 | + </a> | |
203 | + </li> | |
204 | + <li> | |
205 | + <a href="x-editable.html"> | |
206 | + X-Editable | |
207 | + </a> | |
208 | + </li> | |
209 | + <li> | |
210 | + <a href="form-wizard.html"> | |
211 | + Wizard | |
212 | + </a> | |
213 | + </li> | |
214 | + <li> | |
215 | + <a href="form-wizard-popup.html"> | |
216 | + Wizard popup | |
217 | + </a> | |
218 | + </li> | |
219 | + <li> | |
220 | + <a href="form-wysiwyg.html"> | |
221 | + WYSIWYG | |
222 | + </a> | |
223 | + </li> | |
224 | + <li> | |
225 | + <a href="form-summernote.html"> | |
226 | + WYSIWYG Summernote | |
227 | + </a> | |
228 | + </li> | |
229 | + <li> | |
230 | + <a href="form-ckeditor.html"> | |
231 | + WYSIWYG CKEditor | |
232 | + </a> | |
233 | + </li> | |
234 | + <li> | |
235 | + <a href="form-dropzone.html"> | |
236 | + Multiple File Upload | |
237 | + </a> | |
238 | + </li> | |
239 | + </ul> | |
240 | + </li> | |
241 | + <li> | |
242 | + <a href="#" class="dropdown-toggle"> | |
243 | + <i class="fa fa-desktop"></i> | |
244 | + <span>UI Kit</span> | |
245 | + <i class="fa fa-angle-right drop-icon"></i> | |
246 | + </a> | |
247 | + <ul class="submenu"> | |
248 | + <li> | |
249 | + <a href="ui-elements.html"> | |
250 | + Elements | |
251 | + </a> | |
252 | + </li> | |
253 | + <li> | |
254 | + <a href="notifications.html"> | |
255 | + Notifications & Alerts | |
256 | + </a> | |
257 | + </li> | |
258 | + <li> | |
259 | + <a href="modals.html"> | |
260 | + Modals | |
261 | + </a> | |
262 | + </li> | |
263 | + <li> | |
264 | + <a href="video.html"> | |
265 | + Video | |
266 | + </a> | |
267 | + </li> | |
268 | + <li> | |
269 | + <a href="#" class="dropdown-toggle"> | |
270 | + Icons | |
271 | + <i class="fa fa-angle-right drop-icon"></i> | |
272 | + </a> | |
273 | + <ul class="submenu"> | |
274 | + <li> | |
275 | + <a href="icons-awesome.html"> | |
276 | + Awesome Icons | |
277 | + </a> | |
278 | + </li> | |
279 | + <li> | |
280 | + <a href="icons-halflings.html"> | |
281 | + Halflings Icons | |
282 | + </a> | |
283 | + </li> | |
284 | + </ul> | |
285 | + </li> | |
286 | + <li> | |
287 | + <a href="ui-nestable.html"> | |
288 | + Nestable List | |
289 | + </a> | |
290 | + </li> | |
291 | + <li> | |
292 | + <a href="typography.html"> | |
293 | + Typography | |
294 | + </a> | |
295 | + </li> | |
296 | + <li> | |
297 | + <a href="#" class="dropdown-toggle"> | |
298 | + 3 Level Menu | |
299 | + <i class="fa fa-angle-right drop-icon"></i> | |
300 | + </a> | |
301 | + <ul class="submenu"> | |
302 | + <li> | |
303 | + <a href="#"> | |
304 | + 3rd Level | |
305 | + </a> | |
306 | + </li> | |
307 | + <li> | |
308 | + <a href="#"> | |
309 | + 3rd Level | |
310 | + </a> | |
311 | + </li> | |
312 | + <li> | |
313 | + <a href="#"> | |
314 | + 3rd Level | |
315 | + </a> | |
316 | + </li> | |
317 | + </ul> | |
318 | + </li> | |
319 | + </ul> | |
320 | + </li> | |
321 | + <li> | |
322 | + <a href="maps.html"> | |
323 | + <i class="fa fa-map-marker"></i> | |
324 | + <span>Google Maps</span> | |
325 | + <span class="label label-danger pull-right">Updated</span> | |
326 | + </a> | |
327 | + </li> | |
328 | + <li> | |
329 | + <a href="#" class="dropdown-toggle"> | |
330 | + <i class="fa fa-file-text-o"></i> | |
331 | + <span>Extra pages</span> | |
332 | + <i class="fa fa-angle-right drop-icon"></i> | |
333 | + </a> | |
334 | + <ul class="submenu"> | |
335 | + <li> | |
336 | + <a href="faq.html"> | |
337 | + FAQ | |
338 | + </a> | |
339 | + </li> | |
340 | + <li> | |
341 | + <a href="emails.html"> | |
342 | + Email Templates | |
343 | + </a> | |
344 | + </li> | |
345 | + <li> | |
346 | + <a href="login.html"> | |
347 | + Login | |
348 | + </a> | |
349 | + </li> | |
350 | + <li> | |
351 | + <a href="login-full.html"> | |
352 | + Login Full | |
353 | + </a> | |
354 | + </li> | |
355 | + <li> | |
356 | + <a href="registration.html"> | |
357 | + Registration | |
358 | + </a> | |
359 | + </li> | |
360 | + <li> | |
361 | + <a href="registration-full.html"> | |
362 | + Registration Full | |
363 | + </a> | |
364 | + </li> | |
365 | + <li> | |
366 | + <a href="forgot-password.html"> | |
367 | + Forgot Password | |
368 | + </a> | |
369 | + </li> | |
370 | + <li> | |
371 | + <a href="forgot-password-full.html"> | |
372 | + Forgot Password Full | |
373 | + </a> | |
374 | + </li> | |
375 | + <li> | |
376 | + <a href="lock-screen.html"> | |
377 | + Lock Screen | |
378 | + </a> | |
379 | + </li> | |
380 | + <li> | |
381 | + <a href="lock-screen-full.html"> | |
382 | + Lock Screen Full | |
383 | + </a> | |
384 | + </li> | |
385 | + <li> | |
386 | + <a href="error-404.html"> | |
387 | + Error 404 | |
388 | + </a> | |
389 | + </li> | |
390 | + <li> | |
391 | + <a href="error-404-v2.html"> | |
392 | + Error 404 Nested | |
393 | + </a> | |
394 | + </li> | |
395 | + <li> | |
396 | + <a href="error-500.html"> | |
397 | + Error 500 | |
398 | + </a> | |
399 | + </li> | |
400 | + <li> | |
401 | + <a href="extra-grid.html"> | |
402 | + Grid | |
403 | + </a> | |
404 | + </li> | |
405 | + </ul> | |
406 | + </li> | |
407 | + <li> | |
408 | + <a href="/angularjs"> | |
409 | + <i class="fa fa-google"></i> | |
410 | + <span>AngularJS Demo</span> | |
411 | + </a> | |
412 | + </li> | |
413 | + </ul> | |
414 | + </div> | |
415 | + </div> | |
416 | + </section> | |
417 | + <div id="nav-col-submenu"></div> | |
418 | +</div> | ... | ... |
public/designs/themes/cube-responsive/site_title.html.erb
0 → 100644
... | ... | @@ -0,0 +1,5 @@ |
1 | +<a href="index.html" id="logo" class="navbar-brand"> | |
2 | + <img src="/designs/themes/cube-responsive-theme/images/logo-noosfero-header.png" alt="" class="normal-logo logo-white"/> <span class="logo-title">Noosfero</span> | |
3 | + <img src="/designs/themes/cube-responsive-theme/images/logo-black.png" alt="" class="normal-logo logo-black"/> | |
4 | + <img src="/designs/themes/cube-responsive-theme/images/logo-small.png" alt="" class="small-logo hidden-xs hidden-sm hidden"/> | |
5 | +</a> | ... | ... |
... | ... | @@ -0,0 +1,10 @@ |
1 | +// bootstrap customizations, bootstrap | |
2 | +// see also plugins/responsive/public/bootstrap/all.scss | |
3 | +@import 'bootstrap/variables'; | |
4 | +@import 'bootstrap-core'; | |
5 | + | |
6 | +// say to base-responsive that we already took care of boostrap | |
7 | +$bootstrap-loaded: true; | |
8 | + | |
9 | +@import 'sass/theme_styles'; | |
10 | +@import '../base-responsive/style'; | ... | ... |
... | ... | @@ -0,0 +1,149 @@ |
1 | +$(function($) { | |
2 | + | |
3 | + setTimeout(function() { | |
4 | + $('#content-wrapper > .row').css({ | |
5 | + opacity: 1 | |
6 | + }); | |
7 | + }, 200); | |
8 | + | |
9 | + $('#sidebar-nav,#nav-col-submenu').on('click', '.dropdown-toggle', function (e) { | |
10 | + e.preventDefault(); | |
11 | + | |
12 | + var $item = $(this).parent(); | |
13 | + | |
14 | + if (!$item.hasClass('open')) { | |
15 | + $item.parent().find('.open .submenu').slideUp('fast'); | |
16 | + $item.parent().find('.open').toggleClass('open'); | |
17 | + } | |
18 | + | |
19 | + $item.toggleClass('open'); | |
20 | + | |
21 | + if ($item.hasClass('open')) { | |
22 | + $item.children('.submenu').slideDown('fast'); | |
23 | + } | |
24 | + else { | |
25 | + $item.children('.submenu').slideUp('fast'); | |
26 | + } | |
27 | + }); | |
28 | + | |
29 | + $('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav .dropdown-toggle', function (e) { | |
30 | + if ($( document ).width() >= 992) { | |
31 | + var $item = $(this).parent(); | |
32 | + | |
33 | + if ($('body').hasClass('fixed-leftmenu')) { | |
34 | + var topPosition = $item.position().top; | |
35 | + | |
36 | + if ((topPosition + 4*$(this).outerHeight()) >= $(window).height()) { | |
37 | + topPosition -= 6*$(this).outerHeight(); | |
38 | + } | |
39 | + | |
40 | + $('#nav-col-submenu').html($item.children('.submenu').clone()); | |
41 | + $('#nav-col-submenu > .submenu').css({'top' : topPosition}); | |
42 | + } | |
43 | + | |
44 | + $item.addClass('open'); | |
45 | + $item.children('.submenu').slideDown('fast'); | |
46 | + } | |
47 | + }); | |
48 | + | |
49 | + $('body').on('mouseleave', '#page-wrapper.nav-small #sidebar-nav > .nav-pills > li', function (e) { | |
50 | + if ($( document ).width() >= 992) { | |
51 | + var $item = $(this); | |
52 | + | |
53 | + if ($item.hasClass('open')) { | |
54 | + $item.find('.open .submenu').slideUp('fast'); | |
55 | + $item.find('.open').removeClass('open'); | |
56 | + $item.children('.submenu').slideUp('fast'); | |
57 | + } | |
58 | + | |
59 | + $item.removeClass('open'); | |
60 | + } | |
61 | + }); | |
62 | + $('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav a:not(.dropdown-toggle)', function (e) { | |
63 | + if ($('body').hasClass('fixed-leftmenu')) { | |
64 | + $('#nav-col-submenu').html(''); | |
65 | + } | |
66 | + }); | |
67 | + $('body').on('mouseleave', '#page-wrapper.nav-small #nav-col', function (e) { | |
68 | + if ($('body').hasClass('fixed-leftmenu')) { | |
69 | + $('#nav-col-submenu').html(''); | |
70 | + } | |
71 | + }); | |
72 | + | |
73 | + $('#make-small-nav').click(function (e) { | |
74 | + $('#page-wrapper').toggleClass('nav-small'); | |
75 | + }); | |
76 | + | |
77 | + $(window).smartresize(function(){ | |
78 | + if ($( document ).width() <= 991) { | |
79 | + $('#page-wrapper').removeClass('nav-small'); | |
80 | + } | |
81 | + }); | |
82 | + | |
83 | + $('.mobile-search').click(function(e) { | |
84 | + e.preventDefault(); | |
85 | + | |
86 | + $('.mobile-search').addClass('active'); | |
87 | + $('.mobile-search form input.form-control').focus(); | |
88 | + }); | |
89 | + $(document).mouseup(function (e) { | |
90 | + var container = $('.mobile-search'); | |
91 | + | |
92 | + if (!container.is(e.target) // if the target of the click isn't the container... | |
93 | + && container.has(e.target).length === 0) // ... nor a descendant of the container | |
94 | + { | |
95 | + container.removeClass('active'); | |
96 | + } | |
97 | + }); | |
98 | + | |
99 | + // $('.fixed-leftmenu #col-left').nanoScroller({ | |
100 | + // alwaysVisible: false, | |
101 | + // iOSNativeScrolling: false, | |
102 | + // preventPageScrolling: true, | |
103 | + // contentClass: 'col-left-nano-content' | |
104 | + // }); | |
105 | + | |
106 | + // build all tooltips from data-attributes | |
107 | + $("[data-toggle='tooltip']").each(function (index, el) { | |
108 | + $(el).tooltip({ | |
109 | + placement: $(this).data("placement") || 'top' | |
110 | + }); | |
111 | + }); | |
112 | +}); | |
113 | + | |
114 | +$.fn.removeClassPrefix = function(prefix) { | |
115 | + this.each(function(i, el) { | |
116 | + var classes = el.className.split(" ").filter(function(c) { | |
117 | + return c.lastIndexOf(prefix, 0) !== 0; | |
118 | + }); | |
119 | + el.className = classes.join(" "); | |
120 | + }); | |
121 | + return this; | |
122 | +}; | |
123 | + | |
124 | +(function($,sr){ | |
125 | + // debouncing function from John Hann | |
126 | + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ | |
127 | + var debounce = function (func, threshold, execAsap) { | |
128 | + var timeout; | |
129 | + | |
130 | + return function debounced () { | |
131 | + var obj = this, args = arguments; | |
132 | + function delayed () { | |
133 | + if (!execAsap) | |
134 | + func.apply(obj, args); | |
135 | + timeout = null; | |
136 | + }; | |
137 | + | |
138 | + if (timeout) | |
139 | + clearTimeout(timeout); | |
140 | + else if (execAsap) | |
141 | + func.apply(obj, args); | |
142 | + | |
143 | + timeout = setTimeout(delayed, threshold || 100); | |
144 | + }; | |
145 | + } | |
146 | + // smartresize | |
147 | + $.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; | |
148 | + | |
149 | +})($,'smartresize'); | ... | ... |