MDL-59884 themes: add styles for overlay loading
[moodle.git] / theme / boost / scss / preset / default.scss
1 /* stylelint-disable color-hex-length */
2 /**
3  * Default preset file.
4  *
5  * Use this space to customise variables, create mixins and override SCSS.
6  */
8 // Colors
9 $gray-dark:                 #373a3c !default;
10 $gray:                      #55595c !default;
11 $gray-light:                #818a91 !default;
12 $gray-lighter:              #eceeef !default;
13 $gray-lightest:             #f7f7f9 !default;
15 $brand-primary:             #1177d1 !default;
16 $brand-info:                #ad53b2 !default;
17 $brand-success:             #77b300 !default;
18 $brand-warning:             #ff8800 !default;
19 $brand-danger:              #ff4136 !default;
20 $brand-inverse:             $gray-dark !default;
21 $navbar-height:             50px !default;
23 // Spacing
24 $spacer:   1rem !default;
25 $spacer-x: $spacer !default;
26 $spacer-y: $spacer !default;
27 $border-width: 1px !default;
29 // Body
30 $body-bg:    #f4f4f4 !default;
31 $body-color: #262626 !default;
33 // Typography
34 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif !default;
35 $font-size-root: 14px !default;
37 // Tables
38 $table-bg:                      transparent !default;
39 $table-bg-accent:               #fafafa !default;
40 $table-bg-hover:                lighten($brand-primary, 55%) !default;
41 $table-bg-active:               $table-bg-hover !default;
42 $table-border-color:            #f4f4f4 !default;
44 // Dropdowns
45 $dropdown-border-color:          #e2e2e2 !default;
46 $dropdown-link-color:            $body-color;
48 // Navbar
49 $navbar-light-color:                rgba(0, 0, 0, .535) !default;
50 $navbar-light-hover-color:          $brand-primary !default;
51 $navbar-light-active-color:         $brand-primary !default;
53 // Cards
54 $card-border-radius:       0 !default;
55 $card-border-color:        rgba(238, 238, 238, 1) !default;
57 // Breadcrumbs
58 $breadcrumb-bg:                 transparent !default;
59 $breadcrumb-padding-x:          0 !default;
60 $breadcrumb-divider: "/" !default;
61 $breadcrumb-divider-rtl: "/" !default;
63 // Import everything.
64 @import "moodle";
66 /**
67  * Navigation bar identity.
68  */
69 .navbar-light {
70     background-color: #fff;
71     border-bottom: $border-width solid #e5e5e5;
73     .container {
74         padding-left: 0;
75         padding-right: 0;
76     }
78     .navbar-brand {
79         padding-left: 1rem;
80         padding-right: 1rem;
81         margin-right: $spacer * 2;
82         color: #fff;
83         background-color: $brand-primary;
84         @include hover-focus {
85             color: #fff;
86         }
87         &.has-logo {
88             color: $brand-primary;
89             background-color: transparent;
90             @include hover-focus {
91                 color: $brand-primary;
92             }
93         }
94     }
96     .navbar-nav {
97         .nav-item + .nav-item {
98             margin-left: $spacer * 2;
99         }
100         .nav-link {
101             font-size: $font-size-sm;
102             text-transform: uppercase;
103             letter-spacing: 1px;
104         }
105     }
108 /**
109  * Styling the dropdown menus.
110  */
111 .dropdown-menu {
112     font-size: 14px;
113     border-radius: 0;
114     .dropdown-item {
115         padding-top: 8px;
116         padding-bottom: 8px;
117         border-bottom: $border-width solid $dropdown-border-color;
118         &:last-child {
119             border-bottom: 0;
120         }
121     }
122     .dropdown-divider {
123         display: none;
124     }
127 /**
128  * User picture.
129  */
130 .userpicture {
131     border-radius: 50%;
134 /**
135  * For background in content areas.
136  */
137 #page.container-fluid {
138     padding: 0 (2 * $spacer);
141 #block-region-side-pre {
142     padding-left: 0;
145 /**
146  * Dashboard styling.
147  */
148 #page-my-index {
149     #region-main {
150         background-color: transparent;
151         border: 0;
152         padding: 0;
153     }
156 /**
157  * Blocks.
158  */
159 .block-region .card-block {
160     .card-title {
161         padding-bottom: ($spacer/2);
162         font-size: 1.143rem;
163         font-weight: 600;
164         text-transform: uppercase;
165     }
168 /**
169  * Navigation.
170  */
171 .block_navigation,
172 .block_settings {
173     .block_tree .tree_item {
174         margin: ($spacer/2) 0;
175     }
178 /**
179  * Form styles.
180  */
182 .form-group {
183     margin-top: ($spacer/2);
186 .form-inline .form-group {
187     margin-top: 0;