PageRenderTime 67ms CodeModel.GetById 5ms app.highlight 55ms RepoModel.GetById 0ms app.codeStats 1ms

/sass/bootswatch/superhero/_bootswatch.scss

https://bitbucket.org/decore/my-svadba.ru
Sass | 596 lines | 456 code | 121 blank | 19 comment | 0 complexity | dbb8aaa024db3631555d5b7f3701b1ac MD5 | raw file
  1// Swatch: Superhero
  2// Version: 2.0.2
  3// -----------------------------------------------------
  4
  5// TYPOGRAPHY
  6// --------------------------------------------------
  7
  8@import url(https://fonts.googleapis.com/css?family=Oswald);
  9@import url(https://fonts.googleapis.com/css?family=Noticia+Text);
 10
 11h1, h2, h3, h4, h5, h6, legend, .navbar .brand,
 12.navbar .nav > li > a,
 13h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
 14	font-family: 'Oswald', sans-serif;
 15	color: $orange;
 16	text-shadow: -1px 1px 0 darken($orange, 30%);
 17}
 18
 19h1, h2, legend, .navbar .brand,
 20.navbar .nav > li > a {
 21	text-shadow: -2px 2px 0 darken($orange, 30%);
 22}
 23
 24h1 {
 25	line-height: 55px;
 26}
 27
 28// SCAFFOLDING
 29// --------------------------------------------------
 30
 31code, pre {
 32	background-color: lighten($blue, 8%);
 33	border: none;
 34	color: $textColor;
 35}
 36
 37.prettyprint {
 38	border: none;
 39	text-decoration: none;
 40}
 41
 42blockquote {
 43	border-left: 5px solid $blue;
 44}
 45
 46blockquote.pull-right {
 47	border-right: 5px solid $blue;
 48}
 49
 50// NAVBAR
 51// --------------------------------------------------
 52
 53.navbar .nav > li.active > a {
 54	color: $orange;
 55}
 56
 57.navbar .brand:hover,
 58.navbar .nav > li > a:hover,
 59.navbar .nav > li.active > a:hover,
 60.navbar .nav > li.dropdown.open > a,
 61.navbar .nav > li.dropdown.open > a:hover {
 62	position: relative;
 63	top: 1px;
 64	left: -1px;
 65	color: $orange;
 66	text-shadow: -1px 1px 0 darken($orange, 30%);
 67}
 68
 69.navbar .navbar-inner {
 70	@include box-shadow(none);
 71	background-image: none;
 72}
 73
 74.navbar .brand {
 75	padding: 25px 20px 15px;
 76	font-size: 30px;
 77}
 78
 79.navbar .nav > li > a {
 80	padding: 27px 20px 13px;
 81	line-height: 30px;
 82	font-size: 22px;
 83}
 84
 85.navbar-search {
 86	padding-top: 20px;
 87}
 88
 89.navbar-search .search-query {
 90	font-family: $baseFontFamily;
 91	font-size: $baseFontSize;
 92	line-height: $baseLineHeight;
 93	color: $textColor;
 94	background-color: $blue;
 95	@include box-shadow(none);
 96	border: none;
 97}
 98
 99.navbar .divider-vertical {
100	height: 70px;
101}
102
103.dropdown .caret {
104	margin-top: 14px;
105	opacity: 1;
106	border-left: 6px solid transparent;
107	border-right: 6px solid transparent;
108	border-top: 6px solid lighten($blue, 10%);
109}
110
111.navbar .nav .dropdown-toggle .caret,
112.navbar .nav .open.dropdown .caret,
113.nav-pills .dropdown .caret,
114.nav-pills .dropdown:hover .caret {
115	border-top-color: $textColor;
116}
117
118.navbar .dropdown-menu::before {
119	border: none;
120}
121
122.navbar .dropdown-menu::after {
123	left: 20px;
124	border-left: 7px solid transparent;
125	border-right: 7px solid transparent;
126	border-bottom: 7px solid lighten($blue, 10%);
127}
128
129.navbar [class^="icon-"], .navbar [class*=" icon-"] {
130	vertical-align: 20%;
131}
132
133.navbar .btn-navbar {
134	background-color: $blue;
135	border-color: transparent;
136}
137
138.navbar .nav-collapse.in {
139	background-color: $blue;
140	@include border-radius(4px);
141
142	li > a {
143		color: $textColor;
144	}
145
146	li > a:hover {
147		color: $textColor;
148		background-color: lighten($blue, 10%);
149	}
150}
151
152.navbar .nav-collapse.in > .nav > li > a {
153	color: $orange;
154
155	&:hover {
156		background-color: lighten($blue, 10%);
157	}
158}
159
160.subnav.subnav-fixed {
161	top: 70px;
162}
163
164div.subnav {
165	background-color: $blue;
166	background-image: none;
167	border: none;
168
169	.nav > li > a,
170	.nav > li.active > a {
171		border-left: none;
172		border-right: none;
173		color: $textColor;
174	}
175
176	.nav > li > a:hover,
177	.nav > li.active > a:hover {
178		background-color: lighten($blue, 10%);
179	}
180}
181
182div.subnav .nav > li + li > a {
183	border-top: 0px solid transparent;
184}
185
186div.subnav .nav > li:first-child > a,
187div.subnav .nav > li:first-child > a:hover,
188div.subnav .nav > li.active:first-child > a,
189div.subnav .nav > li.active:first-child > a:hover {
190	@include border-radius(4px 0 0 4px);
191}
192
193div.subnav .nav > li.active > a,
194div.subnav .nav > li.active > a:hover {
195	color: $white;
196	background-color: $orange;
197	background-image: none;
198	@include box-shadow(none);
199}
200
201div.subnav.subnav-fixed {
202	@include box-shadow(none);
203
204	.nav > li > a,
205	.nav > li.active > a,
206	.nav > li > a:hover,
207	.nav > li.active > a:hover {
208		border-color: transparent;
209		padding-left: 12px;
210		padding-right: 12px;
211		@include border-radius(0);
212	}
213
214
215	.nav > li > a:hover,
216	.nav > li.active > a:hover {
217		color: $white;
218	}
219}
220
221.dropdown-menu {
222
223	.divider {
224		border-bottom: none;
225		background-color: $blue;
226	}
227}
228
229@media (max-width: 768px) {
230	div.subnav .nav > li:first-child > a,
231	div.subnav .nav > li:first-child > a:hover,
232	div.subnav .nav > li.active:first-child > a,
233	div.subnav .nav > li.active:first-child > a:hover {
234		@include border-radius(4px 4px 0 0);
235	}
236
237	div.subnav .nav > li:last-child > a,
238	div.subnav .nav > li:last-child > a:hover,
239	div.subnav .nav > li.active:last-child > a,
240	div.subnav .nav > li.active:last-child > a:hover {
241		@include border-radius(0 0 4px 4px);
242	}
243
244}
245
246// TABLES
247// -----------------------------------------------------
248
249.table,
250.table-striped tbody > tr > td:first-child,
251.table-striped tbody > tr > td:last-child, {
252	@include border-radius(4px);
253}
254
255// BUTTONS
256// --------------------------------------------------
257
258.btn,
259.btn:hover {
260	text-shadow: none;
261	background-image: none;
262	@include box-shadow(-2px 2px 0 darken($white, 80%));
263	border: none;
264}
265
266.btn-warning {
267	background-color: $yellow;
268}
269
270.btn-primary, .btn-primary:hover {
271	@include box-shadow(-2px 2px 0 darken($btnPrimaryBackground, 30%));
272}
273
274.btn-warning, .btn-warning:hover {
275	@include box-shadow(-2px 2px 0 darken($yellow, 30%));
276}
277
278.btn-danger, .btn-danger:hover {
279	@include box-shadow(-2px 2px 0 darken(#ee5f5b, 30%));
280}
281
282.btn-success, .btn-success:hover {
283	@include box-shadow(-2px 2px 0 darken(#62c462, 30%));
284}
285
286.btn-info, .btn-info:hover {
287	@include box-shadow(-2px 2px 0 darken(#5bc0de, 40%));
288}
289
290.btn-inverse, .btn-inverse:hover {
291	@include box-shadow(-2px 2px 0 darken(#454545, 20%));
292}
293
294.btn.dropdown-toggle, .btn.dropdown-toggle:hover {
295	@include box-shadow(0 2px 0 darken($white, 80%));
296}
297
298.btn-primary.dropdown-toggle, .btn-primary.dropdown-toggle:hover {
299	@include box-shadow(0 2px 0 darken($btnPrimaryBackground, 30%));
300}
301
302.btn-warning.dropdown-toggle, .btn-warning.dropdown-toggle:hover {
303	@include box-shadow(0 2px 0 darken($yellow, 30%));
304}
305
306.btn-danger.dropdown-toggle, .btn-danger.dropdown-toggle:hover {
307	@include box-shadow(0 2px 0 darken(#ee5f5b, 30%));
308}
309
310.btn-success.dropdown-toggle, .btn-success.dropdown-toggle:hover {
311	@include box-shadow(0 2px 0 darken(#62c462, 30%));
312}
313
314.btn-info.dropdown-toggle, .btn-info.dropdown-toggle:hover {
315	@include box-shadow(0 2px 0 darken(#5bc0de, 40%));
316}
317
318.btn-inverse.dropdown-toggle, .btn-inverse.dropdown-toggle:hover {
319	@include box-shadow(0 2px 0 darken(#454545, 20%));
320}
321
322.btn.active,
323.btn:active {
324	position: relative;
325	top: 1px;
326	left: -1px;
327	@include box-shadow(-1px 1px 0 darken($white, 80%))
328}
329
330.btn.disabled,
331.btn.disabled.active,
332.btn.disabled:active,
333.btn[disabled] {
334	@include box-shadow(none);
335	text-shadow: none;
336	top: 0;
337	left: 0;
338}
339
340[class^="icon-"], [class*=" icon-"] {
341	vertical-align: -13%;
342}
343
344// NAVIGATION
345// --------------------------------------------------
346
347.nav .nav-header {
348	color: $linkColor;
349	text-shadow:none;
350}
351
352.nav-list {
353	padding: 0 15px;
354}
355
356.nav-list > li > a, .nav-list .nav-header {
357	text-shadow: none;
358	color: $textColor;
359}
360
361.nav-list .active > a, .nav-list .active > a:hover {
362	text-shadow: none;
363	color: $white;
364}
365
366.nav-list li > a:hover {
367	background-color: lighten($blue, 10%);
368}
369
370.nav-tabs, .nav-tabs.nav-stacked > li > a {
371	border-color: transparent;
372}
373
374.nav-tabs {
375	> li > a {
376		background-color: $blue;
377		color: $textColor;
378	}
379
380	li.active > a,
381	li.active > a:hover,
382	&.nav-stacked > li.active > a:hover {
383		color: $white;
384		background-color: $orange;
385		border-color: transparent;
386	}
387
388	li > a:hover,
389	&.nav-stacked > li > a:hover {
390		background-color: lighten($blue, 10%);
391		border-color: transparent;
392	}
393}
394
395.nav-pills > li > a {
396	color: $textColor;
397	background-color: $blue;
398}
399
400.nav-pills > li:hover > a {
401	background-color: lighten($blue, 10%);
402	border-color: transparent;
403}
404
405.nav-tabs .open .dropdown-toggle,
406.nav-pills .open .dropdown-toggle,
407.nav > .open.active > a:hover {
408	background-color: lighten($blue, 10%);
409	border-color: transparent;
410}
411
412.dropdown.open .dropdown-menu > li > a:hover,
413.dropdown.open .dropdown-menu > li.active > a:hover {
414	background-color: $orange;
415	color: $white;
416}
417
418.tabbable .nav-tabs,
419.tabbable .nav-tabs > li.active > a,
420.tabbable .nav-tabs > li > a:hover,
421.tabbable .nav-tabs > li.active > a:hover {
422	border-color: transparent;
423}
424
425.breadcrumb {
426	background-color: $blue;
427	background-image: none;
428	border: none;
429	@include box-shadow(none);
430
431	li {
432		text-shadow: none;
433	}
434
435	.divider {
436		color: $textColor;
437	}
438}
439
440.pagination ul {
441
442	background-color: $blue;
443	background-image: none;
444	border-color: transparent;
445
446	li > a {
447		border: none;
448		color: $textColor;
449	}
450
451	li.active > a,
452	li.active > a:hover {
453		background: $orange;
454		color: $white;
455	}
456
457	li > a:hover {
458		background: lighten($blue, 10%);
459	}
460
461	li.disabled > a,
462	li.disabled > a:hover {
463		background: darken($blue, 5%);
464	}
465}
466
467.pager a {
468	color: $textColor;
469	background-color: $blue;
470	border-color: transparent;
471
472	&:hover {
473		background: lighten($blue, 10%);
474	}
475}
476
477// FORMS
478// --------------------------------------------------
479
480input, button, select, textarea {
481	font-family: 'Noticia Text', serif;
482}
483
484legend {
485	border-bottom: none;
486}
487
488label {
489	color: $textColor;
490	line-height: 15px;
491}
492
493.help-block {
494	color: $textColor;
495	opacity: 0.6;
496}
497
498.form-actions {
499	background-color: transparent;
500	border-top: none;
501}
502
503.control-group.warning {
504  @include formFieldState(lighten($warningText, 10%), lighten($warningText, 10%), $warningBackground);
505}
506
507.control-group.error {
508  @include formFieldState(lighten($errorText, 10%), lighten($errorText, 10%), $errorBackground);
509}
510
511.control-group.success {
512  @include formFieldState(lighten($successText, 10%), lighten($successText, 10%), $successBackground);
513}
514
515// MISCELLANEOUS
516// --------------------------------------------------
517
518.page-header {
519	border-bottom: none;
520}
521
522footer.footer {
523	border-top: 1px solid darken($blueDark, 5%);
524}
525
526.well {
527	background-color: $blue;
528	border: none;
529	@include box-shadow(none);
530}
531
532.progress {
533	background-color: darken($blueDark, 5%);
534	background-image: none;
535	@include box-shadow(none);
536
537	.bar {
538		@include box-shadow(none);
539	}
540}
541
542.thumbnail {
543	border: none;
544	background: $blue;
545	@include border-radius(3px);
546}
547
548.label {
549	background-color: $blue;
550  	color: $textColor;
551}
552
553.label-important {
554	background-color: $errorText;
555}
556
557.label-warning {
558	background-color: $orange;
559}
560
561.label-success {
562	background-color: $successText;
563}
564
565.label-info {
566	background-color: $infoText;
567}
568
569.alert {
570  background-color: $blue;
571  border: none;
572  color: $textColor;
573  text-shadow: none;
574
575  a {
576  	color: lighten($orange, 12%);
577  }
578}
579
580.alert .alert-heading {
581	color: $orange;
582}
583
584.alert-success {
585  background-color: $successText;
586}
587
588.alert-danger,
589.alert-error {
590  background-color: $errorText;
591}
592
593.alert-info {
594  background-color: $infoText;
595}
596