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