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