MDL-55074 theme_boost: Navigation and blocks
[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:             #00acdf !default;
16 $brand-success:             #77b300 !default;
17 $brand-info:                #9954bb !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: #3a3a3a !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:            rgba(0, 0, 0, .535) !default;
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 #block-region-side-post {
146     padding-right: 0;
149 #page-header {
150     background-color: #fff;
151     border: $border-width solid $card-border-color;
152     margin-top: $spacer;
153     margin-bottom: $spacer;
156 #region-main {
157     background-color: #fff;
158     border: $border-width solid $card-border-color;
159     padding-top: $spacer;
160     padding-bottom: $spacer;
163 #page-footer {
164     color: #fff;
165     text-align: right;
166     background-color: #333;
167     border-top: none;
170 /**
171  * Dashboard styling.
172  */
173 #page-my-index {
174     #region-main {
175         background-color: transparent;
176         border: 0;
177         padding: 0;
178     }
181 /**
182  * Blocks.
183  */
184 .block-region .card-block {
185     .card-title {
186         padding-bottom: ($spacer/2);
187         font-size: 1.143rem;
188         font-weight: 600;
189         text-transform: uppercase;
190     }
193 /**
194  * Navigation.
195  */
196 .block_navigation,
197 .block_settings {
198     .block_tree .tree_item {
199         margin: ($spacer/2) 0;
200     }
203 /**
204  * Style for content title.
205  */
206 #region-main h2 {
207     border-bottom: $border-width solid $table-border-color;
208     padding-bottom: $spacer;
209     margin-bottom: $spacer;
212 /**
213  * Form styles.
214  */
216 .form-group {
217     margin-top: ($spacer/2);
220 .form-inline .form-group {
221     margin-top: 0;
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;
235 .open {
236   // Show the menu
237   > .dropdown-menu {
238     max-height: 2048px;
239     opacity: 100;
240   }