weekly release 3.2dev
[moodle.git] / theme / boost / scss / preset-default.scss
CommitLineData
5cb8ca86 1/* stylelint-disable color-hex-length */
d48dbde9
FM
2/**
3 * Default preset file.
4 *
5 * Use this space to customise variables, create mixins and override SCSS.
6 */
7
28762213 8// Colors
28762213
BR
9$gray-dark: #373a3c !default;
10$gray: #55595c !default;
11$gray-light: #818a91 !default;
12$gray-lighter: #eceeef !default;
13$gray-lightest: #f7f7f9 !default;
14
4a59602a
BR
15$brand-primary: #00acdf !default;
16$brand-success: #77b300 !default;
17$brand-info: #9954bb !default;
18$brand-warning: #ff8800 !default;
19$brand-danger: #ff4136 !default;
28762213
BR
20$brand-inverse: $gray-dark !default;
21
28762213 22// Spacing
28762213
BR
23$spacer: 1rem !default;
24$spacer-x: $spacer !default;
25$spacer-y: $spacer !default;
28762213
BR
26$border-width: 1px !default;
27
28762213 28// Body
4a59602a 29$body-bg: #f4f4f4 !default;
137c289a 30$body-color: #3a3a3a !default;
28762213
BR
31
32// Typography
4a59602a 33$font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif !default;
4a59602a 34$font-size-root: 14px !default;
28762213 35
28762213 36// Tables
28762213 37$table-bg: transparent !default;
8d923368
BR
38$table-bg-accent: #fafafa !default;
39$table-bg-hover: lighten($brand-primary, 55%) !default;
28762213 40$table-bg-active: $table-bg-hover !default;
137c289a 41$table-border-color: #f4f4f4 !default;
28762213
BR
42
43// Dropdowns
137c289a 44$dropdown-border-color: #e2e2e2 !default;
5cb8ca86 45$dropdown-link-color: rgba(0, 0, 0, .535) !default;
28762213
BR
46
47// Navbar
5cb8ca86 48$navbar-light-color: rgba(0, 0, 0, .535) !default;
4a59602a
BR
49$navbar-light-hover-color: $brand-primary !default;
50$navbar-light-active-color: $brand-primary !default;
28762213
BR
51
52// Cards
137c289a 53$card-border-radius: 0 !default;
5cb8ca86 54$card-border-color: rgba(238, 238, 238, 1) !default;
28762213
BR
55
56// Breadcrumbs
137c289a
FM
57$breadcrumb-bg: transparent !default;
58$breadcrumb-padding-x: 0 !default;
59$breadcrumb-divider: "/" !default;
60$breadcrumb-divider-rtl: "/" !default;
28762213 61
d48dbde9
FM
62// Import everything.
63@import "moodle";
64
137c289a
FM
65/**
66 * Navigation bar identity.
67 */
4a59602a
BR
68.navbar-light {
69 background-color: #fff;
137c289a
FM
70 border-bottom: $border-width solid #e5e5e5;
71
72 .container {
73 padding-left: 0;
74 padding-right: 0;
75 }
76
4a59602a 77 .navbar-brand {
137c289a
FM
78 padding-left: 1rem;
79 padding-right: 1rem;
80 margin-right: $spacer * 2;
4a59602a
BR
81 color: #fff;
82 background-color: $brand-primary;
83 @include hover-focus {
137c289a
FM
84 color: #fff;
85 }
86 &.has-logo {
87 color: $brand-primary;
88 background-color: transparent;
89 @include hover-focus {
90 color: $brand-primary;
91 }
4a59602a
BR
92 }
93 }
137c289a 94
4a59602a 95 .navbar-nav {
137c289a
FM
96 .nav-item + .nav-item {
97 margin-left: $spacer * 2;
98 }
4a59602a
BR
99 .nav-link {
100 font-size: $font-size-sm;
101 text-transform: uppercase;
102 letter-spacing: 1px;
103 }
104 }
105}
106
137c289a
FM
107/**
108 * Styling the dropdown menus.
109 */
4a59602a
BR
110.dropdown-menu {
111 font-size: 14px;
4a59602a 112 border-radius: 0;
4a59602a 113 .dropdown-item {
137c289a
FM
114 padding-top: 8px;
115 padding-bottom: 8px;
116 border-bottom: $border-width solid $dropdown-border-color;
4a59602a
BR
117 &:last-child {
118 border-bottom: 0;
119 }
120 }
137c289a
FM
121 .dropdown-divider {
122 display: none;
123 }
4a59602a
BR
124}
125
137c289a
FM
126/**
127 * User picture.
128 */
129.userpicture {
130 border-radius: 50%;
4a59602a
BR
131}
132
137c289a
FM
133/**
134 * For background in content areas.
135 */
771fe96b
BR
136#page.container-fluid {
137 padding: 0 (2 * $spacer);
138}
139
140#block-region-side-pre {
141 padding-left: 0;
142}
143
144#block-region-side-post {
145 padding-right: 0;
146}
147
137c289a
FM
148#page-header {
149 background-color: #fff;
150 border: $border-width solid $card-border-color;
151 margin-top: $spacer;
152 margin-bottom: $spacer;
153}
154
4a59602a
BR
155#region-main {
156 background-color: #fff;
137c289a 157 border: $border-width solid $card-border-color;
e1265d00
BR
158 padding-top: $spacer;
159 padding-bottom: $spacer;
4a59602a
BR
160}
161
137c289a
FM
162#page-footer {
163 color: #fff;
164 text-align: right;
165 background-color: #333;
166 border-top: none;
167}
168
169/**
170 * Login page.
171 */
4a59602a 172.pagelayout-login {
4553c8bd
BR
173 &.notloggedin {
174 #region-main {
175 background-color: transparent;
176 border: 0;
137c289a 177 padding: 0;
4553c8bd
BR
178 }
179 .login-wrapper {
180 background-color: #fff;
137c289a 181 border: $border-width solid $card-border-color;
4553c8bd 182 }
4a59602a 183 }
4553c8bd
BR
184 #notice {
185 text-align: center;
4a59602a
BR
186 }
187}
188
137c289a
FM
189/**
190 * Dashboard styling.
191 */
d1de864f 192#page-my-index {
137c289a
FM
193 #region-main {
194 background-color: transparent;
195 border: 0;
196 padding: 0;
197 }
198}
199
200/**
201 * Blocks.
202 */
4a59602a
BR
203.block-region .card-block {
204 .card-title {
205 padding-bottom: ($spacer/2);
8e62956e
BR
206 font-size: 1.143rem;
207 font-weight: 600;
208 text-transform: uppercase;
4a59602a
BR
209 }
210}
211
137c289a
FM
212/**
213 * Navigation.
214 */
4a59602a
BR
215.block_navigation,
216.block_settings {
217 .block_tree .tree_item {
218 margin: ($spacer/2) 0;
219 }
220}
221
137c289a
FM
222/**
223 * Style for content title.
224 */
225#region-main h2 {
226 border-bottom: $border-width solid $table-border-color;
8d923368
BR
227 padding-bottom: $spacer;
228 margin-bottom: $spacer;
229}
6e2aefd5 230
137c289a
FM
231/**
232 * Form styles.
233 */
6e2aefd5
BR
234
235.form-group {
236 margin-top: ($spacer/2);
237}
77f5a9b0 238
137c289a
FM
239.form-inline .form-group {
240 margin-top: 0;
77f5a9b0 241}