MDL-58889 boost: Make text and link colours AA compliant
[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-success:             #77b300 !default;
17 $brand-warning:             #ff8800 !default;
18 $brand-danger:              #ff4136 !default;
19 $brand-inverse:             $gray-dark !default;
20 $navbar-height:             50px !default;
22 // Spacing
23 $spacer:   1rem !default;
24 $spacer-x: $spacer !default;
25 $spacer-y: $spacer !default;
26 $border-width: 1px !default;
28 // Body
29 $body-bg:    #f4f4f4 !default;
30 $body-color: #262626 !default;
32 // Typography
33 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif !default;
34 $font-size-root: 14px !default;
36 // Tables
37 $table-bg:                      transparent !default;
38 $table-bg-accent:               #fafafa !default;
39 $table-bg-hover:                lighten($brand-primary, 55%) !default;
40 $table-bg-active:               $table-bg-hover !default;
41 $table-border-color:            #f4f4f4 !default;
43 // Dropdowns
44 $dropdown-border-color:          #e2e2e2 !default;
45 $dropdown-link-color:            $body-color;
47 // Navbar
48 $navbar-light-color:                rgba(0, 0, 0, .535) !default;
49 $navbar-light-hover-color:          $brand-primary !default;
50 $navbar-light-active-color:         $brand-primary !default;
52 // Cards
53 $card-border-radius:       0 !default;
54 $card-border-color:        rgba(238, 238, 238, 1) !default;
56 // Breadcrumbs
57 $breadcrumb-bg:                 transparent !default;
58 $breadcrumb-padding-x:          0 !default;
59 $breadcrumb-divider: "/" !default;
60 $breadcrumb-divider-rtl: "/" !default;
62 // Import everything.
63 @import "moodle";
65 /**
66  * Navigation bar identity.
67  */
68 .navbar-light {
69     background-color: #fff;
70     border-bottom: $border-width solid #e5e5e5;
72     .container {
73         padding-left: 0;
74         padding-right: 0;
75     }
77     .navbar-brand {
78         padding-left: 1rem;
79         padding-right: 1rem;
80         margin-right: $spacer * 2;
81         color: #fff;
82         background-color: $brand-primary;
83         @include hover-focus {
84             color: #fff;
85         }
86         &.has-logo {
87             color: $brand-primary;
88             background-color: transparent;
89             @include hover-focus {
90                 color: $brand-primary;
91             }
92         }
93     }
95     .navbar-nav {
96         .nav-item + .nav-item {
97             margin-left: $spacer * 2;
98         }
99         .nav-link {
100             font-size: $font-size-sm;
101             text-transform: uppercase;
102             letter-spacing: 1px;
103         }
104     }
107 /**
108  * Styling the dropdown menus.
109  */
110 .dropdown-menu {
111     font-size: 14px;
112     border-radius: 0;
113     .dropdown-item {
114         padding-top: 8px;
115         padding-bottom: 8px;
116         border-bottom: $border-width solid $dropdown-border-color;
117         &:last-child {
118             border-bottom: 0;
119         }
120     }
121     .dropdown-divider {
122         display: none;
123     }
126 /**
127  * User picture.
128  */
129 .userpicture {
130     border-radius: 50%;
133 /**
134  * For background in content areas.
135  */
136 #page.container-fluid {
137     padding: 0 (2 * $spacer);
140 #block-region-side-pre {
141     padding-left: 0;
144 /**
145  * Dashboard styling.
146  */
147 #page-my-index {
148     #region-main {
149         background-color: transparent;
150         border: 0;
151         padding: 0;
152     }
155 /**
156  * Blocks.
157  */
158 .block-region .card-block {
159     .card-title {
160         padding-bottom: ($spacer/2);
161         font-size: 1.143rem;
162         font-weight: 600;
163         text-transform: uppercase;
164     }
167 /**
168  * Navigation.
169  */
170 .block_navigation,
171 .block_settings {
172     .block_tree .tree_item {
173         margin: ($spacer/2) 0;
174     }
177 /**
178  * Form styles.
179  */
181 .form-group {
182     margin-top: ($spacer/2);
185 .form-inline .form-group {
186     margin-top: 0;