4e3d857c02f0d49b19d6dd7ebc6c63673d8b7476
[Packages/TYPO3.CMS.git] / Build / Resources / Public / Sass / variables / _main.scss
1 //
2 // Global Variables
3 // ================
4 // Note: Need to be loaded after all LESS files are included to override variables defined before.
5 // Note: Use relative paths
6 //
7
8 //
9 // Paths
10 // =====
11 //
12 $path-build: "../../..";
13 $path-bower: "#{$path-build}/bower_components";
14 $path-root: "../../../../../..";
15 $path-sysext: "#{$path-root}/typo3/sysext";
16
17 //
18 // Share Font
19 // ==========
20 //
21 $share-font-path: "#{$path-sysext}/backend/Resources/Public/Fonts/Share";
22
23 //
24 // FontAwesome
25 // ===========
26 //
27 $fa-font-path: "#{$path-sysext}/backend/Resources/Public/Fonts/FontAwesome";
28
29 //
30 // Bootstrap
31 // =========
32 //
33
34 // Colors
35 $gray-darker: rgb(30, 30, 30);
36 $gray-dark: rgb(90, 90, 90);
37 $gray: rgb(115, 115, 115);
38 $gray-light: rgb(215, 215, 215);
39 $gray-lighter: rgb(245, 245, 245);
40 $brand-primary: #0078e6;
41 $brand-success: #79a548;
42 $brand-info: #6daae0;
43 $brand-warning: #e8a33d;
44 $brand-danger: #c83c3c;
45 $brand-notice: #333;
46
47 // Scaffolding
48 $body-bg: #fff;
49 $text-color: #000;
50 $link-color: #212424;
51 $link-hover-color: #000;
52
53 // Typography
54 $font-family-sans-serif: Verdana, Arial, Helvetica, sans-serif;
55 $font-size-base: 12px;
56 $font-size-large: ceil(($font-size-base * 1.25)); // ~15px
57 $font-size-small: 11px; // ~11px
58 $font-size-h1: floor(($font-size-base * 2.3));
59 $font-size-h2: floor(($font-size-base * 1.6));
60 $font-size-h3: ceil(($font-size-base * 1.35));
61 $font-size-h4: ceil(($font-size-base * 1.2));
62 $line-height-base: 1.5;
63
64 // Screen Dimensions
65 $screen-xs: 480px;
66 $screen-xs-min: $screen-xs;
67 $screen-phone: $screen-xs-min;
68 $screen-sm: 768px;
69 $screen-sm-min: $screen-sm;
70 $screen-tablet: $screen-sm-min;
71 $screen-md: 992px;
72 $screen-md-min: $screen-md;
73 $screen-desktop: $screen-md-min;
74 $screen-lg: 1200px;
75 $screen-lg-min: $screen-lg;
76 $screen-lg-desktop: $screen-lg-min;
77 $screen-xs-max: ($screen-sm-min - 1);
78 $screen-sm-max: ($screen-md-min - 1);
79 $screen-md-max: ($screen-lg-min - 1);
80
81 // Components
82 $padding-base-vertical: 6px;
83 $padding-base-horizontal: 6px;
84 $padding-large-vertical: 12px;
85 $padding-large-horizontal: 12px;
86 $padding-small-vertical: 4px;
87 $padding-small-horizontal: 4px;
88 $padding-xs-vertical: 2px;
89 $padding-xs-horizontal: 4px;
90 $line-height-large: 1.3333333;
91 $line-height-small: 1.5;
92 $border-radius-base: 2px;
93 $border-radius-large: 2px;
94 $border-radius-small: 2px;
95
96 // Tables
97 $table-cell-padding: 6px;
98 $table-condensed-cell-padding: 6px;
99 $table-bg: #fafafa;
100 $table-bg-accent: darken($table-bg, 1%);
101 $table-bg-hover: darken($table-bg, 5%);
102 $table-bg-active: $table-bg-hover;
103 $table-border-color: #ccc;
104
105 // Buttons
106 $btn-font-weight: normal;
107 $btn-default-color: #333;
108 $btn-default-bg: #eee;
109 $btn-default-border: #bbb;
110 $btn-primary-color: #fff !default;
111 $btn-primary-bg: $brand-primary !default;
112 $btn-primary-border: darken($btn-primary-bg, 5%) !default;
113
114 // Forms
115 $input-bg: #fefefe;
116 $input-color: #333;
117 $input-border: #bbb;
118 $input-border-focus: #aaa;
119 $input-color-placeholder: $gray-light;
120 $input-color-disabled: $gray;
121 $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 1.6) + 2);
122
123 // Navbar
124 $navbar-height: 45px;
125 $navbar-default-bg: #f8f8f8;
126 $navbar-default-link-hover-bg: darken($navbar-default-bg, 5%);
127 $navbar-default-link-active-bg: darken($navbar-default-bg, 10%);
128 $navbar-default-link-disabled-bg: darken($navbar-default-bg, 15%);
129 $navbar-inverse-color: #999;
130 $navbar-inverse-bg: #111;
131 $navbar-inverse-border: none;
132 $navbar-inverse-link-color: #ddd;
133 $navbar-inverse-link-bg: lighten($navbar-inverse-bg, 7.5%);  // TYPO3 SPECIFIC
134 $navbar-inverse-link-hover-color: rgb(200, 200, 200);
135 $navbar-inverse-link-hover-bg: rgb(50, 50, 50);
136 $navbar-inverse-link-active-color: #fff;
137 $navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;
138 $navbar-inverse-link-disabled-color: darken($navbar-inverse-color, 30%);
139 $navbar-inverse-link-disabled-bg: darken($navbar-inverse-bg, 20%);
140
141 // Navs
142 $nav-open-link-hover-color: #fff;
143 $nav-link-padding: 6px 12px;
144 $nav-disabled-link-hover-color: $gray-dark;
145
146 // Tabs
147 $nav-tabs-border-color: #ccc;
148 $nav-tabs-link-hover-bg: darken(#fafafa, 10%);
149 $nav-tabs-link-hover-border-color: $gray-light;
150 $nav-tabs-active-link-bg: #fafafa;
151 $nav-tabs-active-link-hover-bg: $body-bg;
152 $nav-tabs-active-link-hover-color: #000;
153 $nav-tabs-active-link-hover-border-color: #ccc;
154 $nav-tabs-active-link-hover-bg: darken(#fafafa, 5%);
155 $nav-tabs-justified-link-border-color: #ccc;
156 $nav-tabs-justified-active-link-border-color: $nav-tabs-border-color;
157
158 // Form states and alerts
159 $state-success-text: $brand-success;
160 $state-success-bg: lighten($brand-success, 35%);
161 $state-success-border: $brand-success;
162 $state-info-text: $brand-info;
163 $state-info-bg: lighten($brand-info, 30%);
164 $state-info-border: $brand-info;
165 $state-warning-text: $brand-warning;
166 $state-warning-bg: lighten($brand-warning, 35%);
167 $state-warning-border: $brand-warning;
168 $state-danger-text: $brand-danger;
169 $state-danger-bg: lighten($brand-danger, 35%);
170 $state-danger-border: $brand-danger;
171 $state-notice-text: rgb(160, 160, 160);                            // TYPO3 SPECIFIC
172 $state-notice-bg: lighten(rgb(160, 160, 160), 35%);              // TYPO3 SPECIFIC
173 $state-notice-border: rgb(160, 160, 160);                            // TYPO3 SPECIFIC
174
175 // Tooltips
176 $tooltip-bg: #333;
177 $tooltip-opacity: 1;
178 $tooltip-arrow-width: 3px;
179
180 // Alerts
181 $alert-padding: 11px;
182 $alert-border-radius: 2px;
183 $alert-link-font-weight: bold;
184 $alert-success-bg: $brand-success;
185 $alert-success-text: #fff;
186 $alert-success-border: transparent;
187 $alert-info-bg: $brand-info;
188 $alert-info-text: #fff;
189 $alert-info-border: transparent;
190 $alert-warning-bg: $brand-warning;
191 $alert-warning-text: #fff;
192 $alert-warning-border: transparent;
193 $alert-danger-bg: $brand-danger;
194 $alert-danger-text: #fff;
195 $alert-danger-border: transparent;
196 $alert-notice-bg: $brand-notice;                // TYPO3 SPECIFIC
197 $alert-notice-text: #fff;                         // TYPO3 SPECIFIC
198 $alert-notice-border: transparent;                  // TYPO3 SPECIFIC
199
200 // Panels
201 $panel-default-border: #ccc;
202 $panel-default-heading-bg: #ddd;
203
204 // Wells
205 $well-bg: #fafafa;
206 $well-border: #ccc;
207
208 // Badges
209 $badge-bg: $gray;
210
211 // Type
212 $text-muted: lighten($text-color, 45%);
213 $headings-small-color: $gray;
214 $dl-horizontal-offset: 90px;
215 $hr-border: #7a7a7a;
216
217 // Modal
218 $zindex-modal: 5000;
219
220 // Dropdown
221 $dropdown-bg: #292929;
222 $dropdown-color: #fff;                   // TYPO3 SPECIFIC
223 $dropdown-border: rgba(0, 0, 0, 0.15);
224 $dropdown-fallback-border: #ccc;
225 $dropdown-divider-bg: #424242;
226 $dropdown-link-color: #fff;
227 $dropdown-link-hover-color: #fff;
228 $dropdown-link-hover-bg: #424242;
229 $dropdown-link-active-color: #fff;
230 $dropdown-link-active-bg: #424242;
231 $dropdown-link-disabled-color: $gray-light;
232 $dropdown-header-color: $gray-light;
233 $dropdown-caret-color: #000;
234
235 // Datetime Picker
236 $bs-datetimepicker-timepicker-font-size: $font-size-base;
237 $bs-datetimepicker-active-bg: $btn-primary-bg;
238 $bs-datetimepicker-active-color: $btn-primary-color;
239 $bs-datetimepicker-border-radius: 0;
240 $bs-datetimepicker-btn-hover-bg: lighten($dropdown-bg, 10%);
241 $bs-datetimepicker-disabled-color: $text-muted;
242 $bs-datetimepicker-alternate-color: lighten($bs-datetimepicker-disabled-color, 10%);
243 $bs-datetimepicker-secondary-border-color: $dropdown-bg;
244 $bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2);
245 $bs-datetimepicker-primary-border-color: $dropdown-bg;
246 $bs-datetimepicker-text-shadow: none;
247
248 // Overwrite Progress bar background color
249 $progress-bg: #dedede;