MDL-55805 theme_noname: Footer adjusments and made sticky
[moodle.git] / theme / noname / scss / preset-flatly.scss
1 //
2 // The MIT License (MIT)
3 //
4 // Copyright (c) 2013 Thomas Park
5 //
6 // Permission is hereby granted, free of charge, to any person obtaining a copy
7 // of this software and associated documentation files (the "Software"), to deal
8 // in the Software without restriction, including without limitation the rights
9 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 // copies of the Software, and to permit persons to whom the Software is
11 // furnished to do so, subject to the following conditions:
12 //
13 // The above copyright notice and this permission notice shall be included in
14 // all copies or substantial portions of the Software.
15 //
16 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 // THE SOFTWARE.
23 //
24 $bootstrap-sass-asset-helper: false !default;
25 // Flatly 3.3.7
26 // Variables
27 // --------------------------------------------------
30 //== Colors
31 //
32 //## Gray and brand colors for use across Bootstrap.
34 $gray-base:              #000 !default;
35 $gray-darker:            lighten($gray-base, 13.5%) !default; // #222
36 $gray-dark:              #7b8a8b !default;   // #333
37 $gray:                   #95a5a6 !default; // #555
38 $gray-light:             #b4bcc2 !default;   // #999
39 $gray-lighter:           #ecf0f1 !default; // #eee
41 $gray-lightest:          lighten($gray-lighter, 13.5%);
43 $brand-primary:         #2C3E50 !default;
44 $brand-success:         #18BC9C !default;
45 $brand-info:            #3498DB !default;
46 $brand-warning:         #F39C12 !default;
47 $brand-danger:          #E74C3C !default;
50 //== Scaffolding
51 //
52 //## Settings for some of the most global styles.
54 //** Background color for `<body>`.
55 $body-bg:               #fff !default;
56 //** Global text color on `<body>`.
57 $text-color:            $brand-primary !default;
59 $body-color: $text-color;
61 //** Global textual link color.
62 $link-color:            $brand-success !default;
63 //** Link hover color set via `darken()` function.
64 $link-hover-color:      $link-color !default;
65 //** Link hover decoration.
66 $link-hover-decoration: underline !default;
69 //== Typography
70 //
71 //## Font, line-height, and color for body text, headings, and more.
73 $font-family-sans-serif:  "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
74 $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
75 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
76 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
77 $font-family-base:        $font-family-sans-serif !default;
79 $font-size-base:          15px !default;
80 $font-size-root: $font-size-base;
82 $font-size-lg:         ceil(($font-size-base * 1.25)) !default; // ~18px
83 $font-size-sm:         ceil(($font-size-base * 0.85)) !default; // ~12px
85 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
86 $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
87 $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
88 $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
89 $font-size-h5:            $font-size-base !default;
90 $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
92 //** Unit-less `line-height` for use in components like buttons.
93 $line-height-base:        1.428571429 !default; // 20/14
94 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
95 $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
97 //** By default, this inherits from the `<body>`.
98 $headings-font-family:    $font-family-base !default;
99 $headings-font-weight:    400 !default;
100 $headings-line-height:    1.1 !default;
101 $headings-color:          inherit !default;
104 //== Iconography
105 //
106 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
108 //** Load fonts from this directory.
109 $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
110 //** File name for all font files.
111 $icon-font-name:          "glyphicons-halflings-regular" !default;
112 //** Element ID within SVG icon file.
113 $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
116 //== Components
117 //
118 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
120 $padding-base-y:     10px !default;
121 $padding-base-x:   15px !default;
123 $padding-lg-y:    18px !default;
124 $padding-lg-x:  27px !default;
126 $padding-sm-y:    6px !default;
127 $padding-sm-x:  9px !default;
129 $padding-xs-y:       1px !default;
130 $padding-xs-x:     5px !default;
132 $line-height-lg:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
133 $line-height-sm:         1.5 !default;
135 $border-radius:        4px !default;
136 $border-radius-lg:       6px !default;
137 $border-radius-sm:       3px !default;
139 //** Global color for active items (e.g., navs or dropdowns).
140 $component-active-color:    #fff !default;
141 //** Global background color for active items (e.g., navs or dropdowns).
142 $component-active-bg:       $brand-primary !default;
144 //** Width of the `border` for generating carets that indicate dropdowns.
145 $caret-width-base:          4px !default;
146 //** Carets increase slightly in size for lgr components.
147 $caret-width-lg:         5px !default;
150 //== Tables
151 //
152 //## Customizes the `.table` component with basic values, each used across all table variations.
154 //** Padding for `<th>`s and `<td>`s.
155 $table-cell-padding:            8px !default;
156 //** Padding for cells in `.table-condensed`.
157 $table-sm-cell-padding:  5px !default;
159 //** Default background color used for all tables.
160 $table-bg:                      transparent !default;
161 //** Background color used for `.table-striped`.
162 $table-bg-accent:               #f9f9f9 !default;
163 //** Background color used for `.table-hover`.
164 $table-bg-hover:                $gray-lighter !default;
165 $table-bg-active:               $table-bg-hover !default;
167 //** Border color for table and cell borders.
168 $table-border-color:            $gray-lighter !default;
171 //== Buttons
172 //
173 //## For each of Bootstrap's buttons, define text, background and border color.
175 $btn-font-weight:                normal !default;
177 $btn-default-color:              #fff !default;
178 $btn-default-bg:                 $gray !default;
179 $btn-default-border:             $btn-default-bg !default;
181 $btn-secondary-color: $btn-default-color;
182 $btn-secondary-bg: $btn-default-bg;
183 $btn-secondary-border: $btn-default-border;
187 $btn-primary-color:              $btn-default-color !default;
188 $btn-primary-bg:                 $brand-primary !default;
189 $btn-primary-border:             $btn-primary-bg !default;
191 $btn-success-color:              $btn-default-color !default;
192 $btn-success-bg:                 $brand-success !default;
193 $btn-success-border:             $btn-success-bg !default;
195 $btn-info-color:                 $btn-default-color !default;
196 $btn-info-bg:                    $brand-info !default;
197 $btn-info-border:                $btn-info-bg !default;
199 $btn-warning-color:              $btn-default-color !default;
200 $btn-warning-bg:                 $brand-warning !default;
201 $btn-warning-border:             $btn-warning-bg !default;
203 $btn-danger-color:               $btn-default-color !default;
204 $btn-danger-bg:                  $brand-danger !default;
205 $btn-danger-border:              $btn-danger-bg !default;
207 $btn-link-disabled-color:        $gray-light !default;
209 // Allows for customizing button radius independently from global border radius
210 $btn-border-radius:         $border-radius !default;
211 $btn-border-radius-lg:        $border-radius-lg !default;
212 $btn-border-radius-sm:        $border-radius-sm !default;
215 //== Forms
216 //
217 //##
219 //** `<input>` background color
220 $input-bg:                       #fff !default;
221 //** `<input disabled>` background color
222 $input-bg-disabled:              $gray-lighter !default;
224 //** Text color for `<input>`s
225 $input-color:                    $text-color !default;
226 //** `<input>` border color
227 $input-border:                   #dce4ec !default;
229 // TODO: Rename `$input-border-radius` to `$input-border-radius` in v4
230 //** Default `.form-control` border radius
231 // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
232 $input-border-color: $input-border;
234 $input-border-radius:            $border-radius !default;
235 //** Large `.form-control` border radius
236 $input-border-radius-lg:      $border-radius-lg !default;
237 //** Small `.form-control` border radius
238 $input-border-radius-sm:      $border-radius-sm !default;
240 //** Border color for inputs on focus
241 $input-border-focus:             $brand-primary !default;
243 //** Placeholder text color
244 $input-color-placeholder:        #acb6c0 !default;
246 //** Default `.form-control` height
247 $input-height:              ($line-height-computed + ($padding-base-y * 2) + 4) !default;
248 //** Large `.form-control` height
249 $input-height-lg:             (ceil($font-size-lg * $line-height-lg) + ($padding-lg-y * 2) + 4) !default;
250 //** Small `.form-control` height
251 $input-height-sm:             (floor($font-size-sm * $line-height-sm) + ($padding-sm-y * 2) + 4) !default;
253 //** `.form-group` margin
254 $form-group-margin-bottom:       15px !default;
256 $legend-color:                   $text-color !default;
257 $legend-border-color:            transparent !default;
259 //** Background color for textual input addons
260 $input-group-addon-bg:           $gray-lighter !default;
261 //** Border color for textual input addons
262 $input-group-addon-border-color: $input-border !default;
264 //** Disabled cursor for form controls and buttons.
265 $cursor-disabled:                not-allowed !default;
268 //== Dropdowns
269 //
270 //## Dropdown menu container and contents.
272 //** Background for the dropdown menu.
273 $dropdown-bg:                    #fff !default;
274 //** Dropdown menu `border-color`.
275 $dropdown-border:                rgba(0,0,0,.15) !default;
276 //** Dropdown menu `border-color` **for IE8**.
277 $dropdown-fallback-border:       #ccc !default;
278 //** Divider color for between dropdown items.
279 $dropdown-divider-bg:            #e5e5e5 !default;
281 //** Dropdown link text color.
282 $dropdown-link-color:            $gray-dark !default;
283 //** Hover color for dropdown links.
284 $dropdown-link-hover-color:      #fff !default;
285 //** Hover background for dropdown links.
286 $dropdown-link-hover-bg:         $component-active-bg !default;
288 //** Active dropdown menu item text color.
289 $dropdown-link-active-color:     #fff !default;
290 //** Active dropdown menu item background color.
291 $dropdown-link-active-bg:        $component-active-bg !default;
293 //** Disabled dropdown menu item background color.
294 $dropdown-link-disabled-color:   $gray-light !default;
296 //** Text color for headers within dropdown menus.
297 $dropdown-header-color:          $gray-light !default;
299 //** Deprecated `$dropdown-caret-color` as of v3.1.0
300 $dropdown-caret-color:           #000 !default;
303 //-- Z-index master list
304 //
305 // Warning: Avoid customizing these values. They're used for a bird's eye view
306 // of components dependent on the z-axis and are designed to all work together.
307 //
308 // Note: These variables are not generated into the Customizer.
310 $zindex-navbar:            1000 !default;
311 $zindex-dropdown:          1000 !default;
312 $zindex-popover:           1060 !default;
313 $zindex-tooltip:           1070 !default;
314 $zindex-navbar-fixed:      1030 !default;
315 $zindex-modal-background:  1040 !default;
316 $zindex-modal:             1050 !default;
319 //== Media queries breakpoints
320 //
321 //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
323 // Extra sm screen / phone
324 //** Deprecated `$screen-xs` as of v3.0.1
325 $screen-xs:                  480px !default;
326 //** Deprecated `$screen-xs-min` as of v3.2.0
327 $screen-xs-min:              $screen-xs !default;
328 //** Deprecated `$screen-phone` as of v3.0.1
329 $screen-phone:               $screen-xs-min !default;
331 // Small screen / tablet
332 //** Deprecated `$screen-sm` as of v3.0.1
333 $screen-sm:                  768px !default;
334 $screen-sm-min:              $screen-sm !default;
335 //** Deprecated `$screen-tablet` as of v3.0.1
336 $screen-tablet:              $screen-sm-min !default;
338 // Medium screen / desktop
339 //** Deprecated `$screen-md` as of v3.0.1
340 $screen-md:                  992px !default;
341 $screen-md-min:              $screen-md !default;
342 //** Deprecated `$screen-desktop` as of v3.0.1
343 $screen-desktop:             $screen-md-min !default;
345 // Large screen / wide desktop
346 //** Deprecated `$screen-lg` as of v3.0.1
347 $screen-lg:                  1200px !default;
348 $screen-lg-min:              $screen-lg !default;
349 //** Deprecated `$screen-lg-desktop` as of v3.0.1
350 $screen-lg-desktop:          $screen-lg-min !default;
352 // So media queries don't overlap when required, provide a maximum
353 $screen-xs-max:              ($screen-sm-min - 1) !default;
354 $screen-sm-max:              ($screen-md-min - 1) !default;
355 $screen-md-max:              ($screen-lg-min - 1) !default;
358 //== Grid system
359 //
360 //## Define your custom responsive grid.
362 //** Number of columns in the grid.
363 $grid-columns:              12 !default;
364 //** Padding between columns. Gets divided in half for the left and right.
365 $grid-gutter-width:         30px !default;
366 // Navbar collapse
367 //** Point at which the navbar becomes uncollapsed.
368 $grid-float-breakpoint:     $screen-sm-min !default;
369 //** Point at which the navbar begins collapsing.
370 $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
373 //== Container sizes
374 //
375 //## Define the maximum width of `.container` for different screen sizes.
377 // Small screen / tablet
378 $container-tablet:             (720px + $grid-gutter-width) !default;
379 //** For `$screen-sm-min` and up.
380 $container-sm:                 $container-tablet !default;
382 // Medium screen / desktop
383 $container-desktop:            (940px + $grid-gutter-width) !default;
384 //** For `$screen-md-min` and up.
385 $container-md:                 $container-desktop !default;
387 // Large screen / wide desktop
388 $container-lg-desktop:      (1140px + $grid-gutter-width) !default;
389 //** For `$screen-lg-min` and up.
390 $container-lg:                 $container-lg-desktop !default;
393 //== Navbar
394 //
395 //##
397 // Basics of a navbar
398 $navbar-height:                    60px !default;
399 $navbar-margin-bottom:             $line-height-computed !default;
400 $navbar-border-radius:             $border-radius !default;
401 $navbar-padding-x:        floor(($grid-gutter-width / 2)) !default;
402 $navbar-padding-y:          (($navbar-height - $line-height-computed) / 2) !default;
403 $navbar-collapse-max-height:       340px !default;
405 $navbar-light-color:             #fff !default;
406 $navbar-light-bg:                $brand-primary !default;
407 $navbar-light-border:            transparent !default;
409 // Navbar links
410 $navbar-light-link-color:                #fff !default;
411 $navbar-light-link-hover-color:          $brand-success !default;
412 $navbar-light-link-hover-bg:             transparent !default;
413 $navbar-light-link-active-color:         #fff !default;
414 $navbar-light-link-active-bg:            darken($navbar-light-bg, 10%) !default;
415 $navbar-light-link-disabled-color:       #ccc !default;
416 $navbar-light-link-disabled-bg:          transparent !default;
418 // Navbar brand label
419 $navbar-light-brand-color:               $navbar-light-link-color !default;
420 $navbar-light-brand-hover-color:         $navbar-light-link-hover-color !default;
421 $navbar-light-brand-hover-bg:            transparent !default;
423 // Navbar toggle
424 $navbar-light-toggle-hover-bg:           darken($navbar-light-bg, 10%) !default;
425 $navbar-light-toggle-icon-bar-bg:        #fff !default;
426 $navbar-light-toggle-border-color:       darken($navbar-light-bg, 10%) !default;
429 //=== Inverted navbar
430 // Reset inverted navbar basics
431 $navbar-dark-color:                      #fff !default;
432 $navbar-dark-bg:                         $brand-success !default;
433 $navbar-dark-border:                     transparent !default;
435 // Inverted navbar links
436 $navbar-dark-link-color:                 #fff !default;
437 $navbar-dark-link-hover-color:           $brand-primary !default;
438 $navbar-dark-link-hover-bg:              transparent !default;
439 $navbar-dark-link-active-color:          #fff !default;
440 $navbar-dark-link-active-bg:             darken($navbar-dark-bg, 5%) !default;
441 $navbar-dark-link-disabled-color:        #ccc !default;
442 $navbar-dark-link-disabled-bg:           transparent !default;
444 // Inverted navbar brand label
445 $navbar-dark-brand-color:                $navbar-dark-link-color !default;
446 $navbar-dark-brand-hover-color:          $navbar-dark-link-hover-color !default;
447 $navbar-dark-brand-hover-bg:             transparent !default;
449 // Inverted navbar toggle
450 $navbar-dark-toggle-hover-bg:            darken($navbar-dark-bg, 10%) !default;
451 $navbar-dark-toggle-icon-bar-bg:         #fff !default;
452 $navbar-dark-toggle-border-color:        darken($navbar-dark-bg, 10%) !default;
455 //== Navs
456 //
457 //##
459 //=== Shared nav styles
460 $nav-link-padding:                          10px 15px !default;
461 $nav-link-hover-bg:                         $gray-lighter !default;
463 $nav-disabled-link-color:                   $gray-light !default;
464 $nav-disabled-link-hover-color:             $gray-light !default;
466 //== Tabs
467 $nav-tabs-border-color:                     $gray-lighter !default;
469 $nav-tabs-link-hover-border-color:          $gray-lighter !default;
471 $nav-tabs-active-link-hover-bg:             $body-bg !default;
472 $nav-tabs-active-link-hover-color:          $brand-primary !default;
473 $nav-tabs-active-link-hover-border-color:   $gray-lighter !default;
475 $nav-tabs-justified-link-border-color:            $gray-lighter !default;
476 $nav-tabs-justified-active-link-border-color:     $body-bg !default;
478 //== Pills
479 $nav-pills-border-radius:                   $border-radius !default;
480 $nav-pills-active-link-hover-bg:            $component-active-bg !default;
481 $nav-pills-active-link-hover-color:         $component-active-color !default;
484 //== Pagination
485 //
486 //##
488 $pagination-color:                     #fff !default;
489 $pagination-bg:                        $brand-success !default;
490 $pagination-border:                    transparent !default;
492 $pagination-border-color: $pagination-border;
494 $pagination-hover-color:               #fff !default;
495 $pagination-hover-bg:                  darken($brand-success, 15%) !default;
496 $pagination-hover-border:              transparent !default;
498 $pagination-active-color:              #fff !default;
499 $pagination-active-bg:                 darken($brand-success, 15%) !default;
500 $pagination-active-border:             transparent !default;
502 $pagination-disabled-color:            $gray-lighter !default;
503 $pagination-disabled-bg:               lighten($brand-success, 15%) !default;
504 $pagination-disabled-border:           transparent !default;
507 //== Pager
508 //
509 //##
511 $pager-bg:                             $pagination-bg !default;
512 $pager-border:                         $pagination-border !default;
513 $pager-border-radius:                  15px !default;
515 $pager-hover-bg:                       $pagination-hover-bg !default;
517 $pager-active-bg:                      $pagination-active-bg !default;
518 $pager-active-color:                   $pagination-active-color !default;
520 $pager-disabled-color:                 #fff !default;
523 //== Jumbotron
524 //
525 //##
527 $jumbotron-padding:              30px !default;
528 $jumbotron-color:                inherit !default;
529 $jumbotron-bg:                   $gray-lighter !default;
530 $jumbotron-heading-color:        inherit !default;
531 $jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
532 $jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
535 //== Form states and alerts
536 //
537 //## Define colors for form feedback states and, by default, alerts.
539 $state-success-text:             #fff !default;
540 $state-success-bg:               $brand-success !default;
541 $state-success-border:           $brand-success !default;
543 $state-info-text:                #fff !default;
544 $state-info-bg:                  $brand-info !default;
545 $state-info-border:              $brand-info !default;
547 $state-warning-text:             #fff !default;
548 $state-warning-bg:               $brand-warning !default;
549 $state-warning-border:           $brand-warning !default;
551 $state-danger-text:              #fff !default;
552 $state-danger-bg:                $brand-danger !default;
553 $state-danger-border:            $brand-danger !default;
556 //== Tooltips
557 //
558 //##
560 //** Tooltip max width
561 $tooltip-max-width:           200px !default;
562 //** Tooltip text color
563 $tooltip-color:               #fff !default;
564 //** Tooltip background color
565 $tooltip-bg:                  #000 !default;
566 $tooltip-opacity:             .9 !default;
568 //** Tooltip arrow width
569 $tooltip-arrow-width:         5px !default;
570 //** Tooltip arrow color
571 $tooltip-arrow-color:         $tooltip-bg !default;
574 //== Popovers
575 //
576 //##
578 //** Popover body background color
579 $popover-bg:                          #fff !default;
580 //** Popover maximum width
581 $popover-max-width:                   276px !default;
582 //** Popover border color
583 $popover-border-color:                rgba(0,0,0,.2) !default;
584 //** Popover fallback border color
585 $popover-fallback-border-color:       #ccc !default;
587 //** Popover title background color
588 $popover-title-bg:                    darken($popover-bg, 3%) !default;
590 //** Popover arrow width
591 $popover-arrow-width:                 10px !default;
592 //** Popover arrow color
593 $popover-arrow-color:                 $popover-bg !default;
595 //** Popover outer arrow width
596 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
597 //** Popover outer arrow color
598 $popover-arrow-outer-color:           fadein($popover-border-color, 5%) !default;
599 //** Popover outer arrow fallback color
600 $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
603 //== Labels
604 //
605 //##
607 //** Default label background color
608 $tag-default-bg:            $btn-default-bg !default;
609 //** Primary label background color
610 $tag-primary-bg:            $brand-primary !default;
611 //** Success label background color
612 $tag-success-bg:            $brand-success !default;
613 //** Info label background color
614 $tag-info-bg:               $brand-info !default;
615 //** Warning label background color
616 $tag-warning-bg:            $brand-warning !default;
617 //** Danger label background color
618 $tag-danger-bg:             $brand-danger !default;
620 //** Default label text color
621 $tag-color:                 #fff !default;
622 //** Default text color of a linked label
623 $tag-link-hover-color:      #fff !default;
626 //== Modals
627 //
628 //##
630 //** Padding applied to the modal body
631 $modal-inner-padding:         20px !default;
633 //** Padding applied to the modal title
634 $modal-title-padding:         15px !default;
635 //** Modal title line-height
636 $modal-title-line-height:     $line-height-base !default;
638 //** Background color of modal content area
639 $modal-content-bg:                             #fff !default;
640 //** Modal content border color
641 $modal-content-border-color:                   rgba(0,0,0,.2) !default;
642 //** Modal content border color **for IE8**
643 $modal-content-fallback-border-color:          #999 !default;
645 //** Modal backdrop background color
646 $modal-backdrop-bg:           #000 !default;
647 //** Modal backdrop opacity
648 $modal-backdrop-opacity:      .5 !default;
649 //** Modal header border color
650 $modal-header-border-color:   #e5e5e5 !default;
651 //** Modal footer border color
652 $modal-footer-border-color:   $modal-header-border-color !default;
654 $modal-lg:                    900px !default;
655 $modal-md:                    600px !default;
656 $modal-sm:                    300px !default;
659 //== Alerts
660 //
661 //## Define alert colors, border radius, and padding.
663 $alert-padding:               15px !default;
664 $alert-border-radius:         $border-radius !default;
665 $alert-link-font-weight:      bold !default;
667 $alert-success-bg:            $state-success-bg !default;
668 $alert-success-text:          $state-success-text !default;
669 $alert-success-border:        $state-success-border !default;
671 $alert-info-bg:               $state-info-bg !default;
672 $alert-info-text:             $state-info-text !default;
673 $alert-info-border:           $state-info-border !default;
675 $alert-warning-bg:            $state-warning-bg !default;
676 $alert-warning-text:          $state-warning-text !default;
677 $alert-warning-border:        $state-warning-border !default;
679 $alert-danger-bg:             $state-danger-bg !default;
680 $alert-danger-text:           $state-danger-text !default;
681 $alert-danger-border:         $state-danger-border !default;
684 //== Progress bars
685 //
686 //##
688 //** Background color of the whole progress component
689 $progress-bg:                 $gray-lighter !default;
690 //** Progress bar text color
691 $progress-bar-color:          #fff !default;
692 //** Variable for setting rounded corners on progress bar.
693 $progress-border-radius:      $border-radius !default;
695 //** Default progress bar color
696 $progress-bar-bg:             $brand-primary !default;
697 //** Success progress bar color
698 $progress-bar-success-bg:     $brand-success !default;
699 //** Warning progress bar color
700 $progress-bar-warning-bg:     $brand-warning !default;
701 //** Danger progress bar color
702 $progress-bar-danger-bg:      $brand-danger !default;
703 //** Info progress bar color
704 $progress-bar-info-bg:        $brand-info !default;
707 //== List group
708 //
709 //##
711 //** Background color on `.list-group-item`
712 $list-group-bg:                 #fff !default;
713 //** `.list-group-item` border color
714 $list-group-border:             $gray-lighter !default;
715 //** List group border radius
716 $list-group-border-radius:      $border-radius !default;
718 //** Background color of single list items on hover
719 $list-group-hover-bg:           $gray-lighter !default;
720 //** Text color of active list items
721 $list-group-active-color:       $component-active-color !default;
722 //** Background color of active list items
723 $list-group-active-bg:          $component-active-bg !default;
724 //** Border color of active list elements
725 $list-group-active-border:      $list-group-active-bg !default;
726 //** Text color for content within active list items
727 $list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
729 //** Text color of disabled list items
730 $list-group-disabled-color:      $gray-light !default;
731 //** Background color of disabled list items
732 $list-group-disabled-bg:         $gray-lighter !default;
733 //** Text color for content within disabled list items
734 $list-group-disabled-text-color: $list-group-disabled-color !default;
736 $list-group-link-color:         #555 !default;
737 $list-group-link-hover-color:   $list-group-link-color !default;
738 $list-group-link-heading-color: #333 !default;
741 //== Panels
742 //
743 //##
745 $card-bg:                    #fff !default;
746 $card-body-padding:          15px !default;
747 $card-heading-padding:       10px 15px !default;
748 $card-footer-padding:        $card-heading-padding !default;
749 $card-border-radius:         $border-radius !default;
751 //** Border color for elements within panels
752 $card-inner-border:          $gray-lighter !default;
753 $card-footer-bg:             $gray-lighter !default;
755 $card-default-text:          $text-color !default;
756 $card-default-border:        $gray-lighter !default;
757 $card-default-heading-bg:    $gray-lighter !default;
759 $card-primary-text:          #fff !default;
760 $card-primary-border:        $brand-primary !default;
761 $card-primary-heading-bg:    $brand-primary !default;
763 $card-success-text:          $state-success-text !default;
764 $card-success-border:        $state-success-border !default;
765 $card-success-heading-bg:    $state-success-bg !default;
767 $card-info-text:             $state-info-text !default;
768 $card-info-border:           $state-info-border !default;
769 $card-info-heading-bg:       $state-info-bg !default;
771 $card-warning-text:          $state-warning-text !default;
772 $card-warning-border:        $state-warning-border !default;
773 $card-warning-heading-bg:    $state-warning-bg !default;
775 $card-danger-text:           $state-danger-text !default;
776 $card-danger-border:         $state-danger-border !default;
777 $card-danger-heading-bg:     $state-danger-bg !default;
780 //== Thumbnails
781 //
782 //##
784 //** Padding around the thumbnail image
785 $thumbnail-padding:           4px !default;
786 //** Thumbnail background color
787 $thumbnail-bg:                $body-bg !default;
788 //** Thumbnail border color
789 $thumbnail-border:            $gray-lighter !default;
790 //** Thumbnail border radius
791 $thumbnail-border-radius:     $border-radius !default;
793 //** Custom text color for thumbnail captions
794 $thumbnail-caption-color:     $text-color !default;
795 //** Padding around the thumbnail caption
796 $thumbnail-caption-padding:   9px !default;
799 //== Wells
800 //
801 //##
803 $well-bg:                     $gray-lighter !default;
804 $well-border:                 transparent !default;
807 //== Badges
808 //
809 //##
811 $badge-color:                 #fff !default;
812 //** Linked badge text color on hover
813 $badge-link-hover-color:      #fff !default;
814 $badge-bg:                    $brand-primary !default;
816 //** Badge text color in active nav link
817 $badge-active-color:          $brand-primary !default;
818 //** Badge background color in active nav link
819 $badge-active-bg:             #fff !default;
821 $badge-font-weight:           bold !default;
822 $badge-line-height:           1 !default;
823 $badge-border-radius:         10px !default;
826 //== Breadcrumbs
827 //
828 //##
830 $breadcrumb-padding-y:   8px !default;
831 $breadcrumb-padding-x: 15px !default;
832 //** Breadcrumb background color
833 $breadcrumb-bg:                 $gray-lighter !default;
834 //** Breadcrumb text color
835 $breadcrumb-color:              #ccc !default;
836 //** Text color of current page in the breadcrumb
837 $breadcrumb-active-color:       $gray !default;
838 //** Textual separator for between breadcrumb elements
839 $breadcrumb-separator:          "/" !default;
842 //== Carousel
843 //
844 //##
846 $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
848 $carousel-control-color:                      #fff !default;
849 $carousel-control-width:                      15% !default;
850 $carousel-control-opacity:                    .5 !default;
851 $carousel-control-font-size:                  20px !default;
853 $carousel-indicator-active-bg:                #fff !default;
854 $carousel-indicator-border-color:             #fff !default;
856 $carousel-caption-color:                      #fff !default;
859 //== Close
860 //
861 //##
863 $close-font-weight:           bold !default;
864 $close-color:                 #000 !default;
865 $close-text-shadow:           none !default;
868 //== Code
869 //
870 //##
872 $code-color:                  #c7254e !default;
873 $code-bg:                     #f9f2f4 !default;
875 $kbd-color:                   #fff !default;
876 $kbd-bg:                      #333 !default;
878 $pre-bg:                      $gray-lighter !default;
879 $pre-color:                   $gray-dark !default;
880 $pre-border-color:            #ccc !default;
881 $pre-scrollable-max-height:   340px !default;
884 //== Type
885 //
886 //##
888 //** Horizontal offset for forms and lists.
889 $component-offset-x: 180px !default;
890 //** Text muted color
891 $text-muted:                  $gray-light !default;
892 //** Abbreviations and acronyms border color
893 $abbr-border-color:           $gray-light !default;
894 //** Headings sm color
895 $headings-sm-color:        $gray-light !default;
896 //** Blockquote sm color
897 $blockquote-sm-color:      $gray-light !default;
898 //** Blockquote font size
899 $blockquote-font-size:        ($font-size-base * 1.25) !default;
900 //** Blockquote border color
901 $blockquote-border-color:     $gray-lighter !default;
902 //** Page header border color
903 $page-header-border-color:    transparent !default;
904 //** Width of x description list titles
905 $dl-x-offset:        $component-offset-x !default;
906 //** Point at which .dl-x becomes x
907 $dl-x-breakpoint:    $grid-float-breakpoint !default;
908 //** Horizontal line color.
909 $hr-border:                   $gray-lighter !default;
911 @import "moodle";
913 @mixin placeholder($text) {
914     placeholder: $text;
916 @mixin box-shadow($text) {
917     box-shadow: $text;
919 @mixin transform($transforms) {
920     transform: $transforms;
922 @mixin rotate ($deg) {
923     @include transform(rotate(#{$deg}deg));
925 @mixin scale($scale) {
926     @include transform(scale($scale));
928 @mixin translate ($x, $y) {
929     @include transform(translate($x, $y));
931 @mixin skew ($x, $y) {
932     @include transform(skew(#{$x}deg, #{$y}deg));
934 @mixin transform-origin ($origin) {
935     transform-origin: $origin;
937 // Flatly 3.3.7
938 // Bootswatch
939 // -----------------------------------------------------
941 $web-font-path: "https://fonts.googleapis.com/css?family=Lato:400,700,400italic" !default;
942 @import url($web-font-path);
944 // Navbar =====================================================================
946 .navbar {
947   border-width: 0;
949   &-default {
951     .badge {
952       background-color: #fff;
953       color: $navbar-light-bg;
954     }
955   }
957   &-inverse {
959     .badge {
960       background-color: #fff;
961       color: $navbar-dark-bg;
962     }
963   }
965   &-brand {
966     line-height: 1;
967   }
970 // Buttons ====================================================================
972 .btn {
973   border-width: 2px;
976 .btn:active {
977   @include box-shadow(none);
980 .btn-group.open .dropdown-toggle {
981   @include box-shadow(none);
984 // Typography =================================================================
986 .text-primary,
987 .text-primary:hover {
988   color: $brand-primary;
991 .text-success,
992 .text-success:hover {
993   color: $brand-success;
996 .text-danger,
997 .text-danger:hover {
998   color: $brand-danger;
1001 .text-warning,
1002 .text-warning:hover {
1003   color: $brand-warning;
1006 .text-info,
1007 .text-info:hover {
1008   color: $brand-info;
1011 // Tables =====================================================================
1013 table,
1014 .table {
1016   a:not(.btn) {
1017     text-decoration: underline;
1018   }
1020   .dropdown-menu a {
1021     text-decoration: none;
1022   }
1024   .success,
1025   .warning,
1026   .danger,
1027   .info {
1028     color: #fff;
1030     > th > a,
1031     > td > a,
1032     > a {
1033       color: #fff;
1034     }
1035   }
1037   > thead > tr > th,
1038   > tbody > tr > th,
1039   > tfoot > tr > th,
1040   > thead > tr > td,
1041   > tbody > tr > td,
1042   > tfoot > tr > td {
1043     border: none;
1044   }
1046   &-bordered > thead > tr > th,
1047   &-bordered > tbody > tr > th,
1048   &-bordered > tfoot > tr > th,
1049   &-bordered > thead > tr > td,
1050   &-bordered > tbody > tr > td,
1051   &-bordered > tfoot > tr > td {
1052     border: 1px solid $table-border-color;
1053   }
1056 // Forms ======================================================================
1058 .form-control,
1059 input {
1060   border-width: 2px;
1061   @include box-shadow(none);
1063   &:focus {
1064     @include box-shadow(none);
1065   }
1068 .has-warning {
1069   .help-block,
1070   .control-label,
1071   .radio,
1072   .checkbox,
1073   .radio-inline,
1074   .checkbox-inline,
1075   &.radio label,
1076   &.checkbox label,
1077   &.radio-inline label,
1078   &.checkbox-inline label,
1079   .form-control-feedback {
1080     color: $brand-warning;
1081   }
1083   .form-control,
1084   .form-control:focus {
1085     border: 2px solid $brand-warning;
1086   }
1088   .input-group-addon {
1089     border-color: $brand-warning;
1090   }
1093 .has-error {
1094   .help-block,
1095   .control-label,
1096   .radio,
1097   .checkbox,
1098   .radio-inline,
1099   .checkbox-inline,
1100   &.radio label,
1101   &.checkbox label,
1102   &.radio-inline label,
1103   &.checkbox-inline label,
1104   .form-control-feedback {
1105     color: $brand-danger;
1106   }
1108   .form-control,
1109   .form-control:focus {
1110     border: 2px solid $brand-danger;
1111   }
1113   .input-group-addon {
1114     border-color: $brand-danger;
1115   }
1118 .has-success {
1119   .help-block,
1120   .control-label,
1121   .radio,
1122   .checkbox,
1123   .radio-inline,
1124   .checkbox-inline,
1125   &.radio label,
1126   &.checkbox label,
1127   &.radio-inline label,
1128   &.checkbox-inline label,
1129   .form-control-feedback {
1130     color: $brand-success;
1131   }
1133   .form-control,
1134   .form-control:focus {
1135     border: 2px solid $brand-success;
1136   }
1138   .input-group-addon {
1139     border-color: $brand-success;
1140   }
1143 // Navs =======================================================================
1145 .nav {
1146   .open > a,
1147   .open > a:hover,
1148   .open > a:focus {
1149     border-color: transparent;
1150   }
1153 .pager {
1154   a,
1155   a:hover {
1156     color: #fff;
1157   }
1159   .disabled {
1160     &>a,
1161     &>a:hover,
1162     &>a:focus,
1163     &>span {
1164       background-color: $pagination-disabled-bg;
1165     }
1166   }
1169 // Indicators =================================================================
1171 .close {
1172   color: #fff;
1173   text-decoration: none;
1174   opacity: 0.4;
1176   &:hover,
1177   &:focus {
1178     color: #fff;
1179     opacity: 1;
1180   }
1183 .alert {
1185   .alert-link {
1186     color: #fff;
1187     text-decoration: underline;
1188   }
1191 // Progress bars ==============================================================
1193 .progress {
1194   height: 10px;
1195   @include box-shadow(none);
1196   .progress-bar {
1197     font-size: 10px;
1198     line-height: 10px;
1199   }
1202 // Containers =================================================================
1204 .well {
1205   @include box-shadow(none);
1208 a.list-group-item {
1210   &.active,
1211   &.active:hover,
1212   &.active:focus {
1213     border-color: $list-group-border;
1214   }
1216   &-success {
1217     &.active {
1218       background-color: $state-success-bg;
1219     }
1221     &.active:hover,
1222     &.active:focus {
1223       background-color: darken($state-success-bg, 5%);
1224     }
1225   }
1227   &-warning {
1228     &.active {
1229       background-color: $state-warning-bg;
1230     }
1231     
1232     &.active:hover,
1233     &.active:focus {
1234       background-color: darken($state-warning-bg, 5%);
1235     }
1236   }
1238   &-danger {
1239     &.active {
1240       background-color: $state-danger-bg;
1241     }
1242     
1243     &.active:hover,
1244     &.active:focus {
1245       background-color: darken($state-danger-bg, 5%);
1246     }
1247   }
1250 .panel {
1251   &-default {
1252     .close {
1253       color: $text-color;
1254     }
1255   }
1258 .modal {
1259   .close {
1260     color: $text-color;
1261   }
1264 .popover {
1265   color: $text-color;