_bootswatch.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. // Lumen 3.3.4
  2. // Bootswatch
  3. // -----------------------------------------------------
  4. @import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
  5. @mixin shadow($width: 4px){
  6. border-width: 0 1px $width 1px;
  7. }
  8. // Navbar =====================================================================
  9. .navbar {
  10. @include shadow();
  11. }
  12. // Buttons ====================================================================
  13. .btn {
  14. padding: ($padding-base-vertical + 2) $padding-base-horizontal $padding-base-vertical;
  15. @include shadow();
  16. font-size: 12px;
  17. font-weight: bold;
  18. text-transform: uppercase;
  19. &:hover {
  20. margin-top: 1px;
  21. border-bottom-width: 3px;
  22. }
  23. &:active {
  24. margin-top: 2px;
  25. border-bottom-width: 2px;
  26. @include box-shadow(none);
  27. }
  28. &-lg,
  29. &-group-lg > .btn {
  30. padding: ($padding-large-vertical + 2) $padding-large-horizontal $padding-large-vertical;
  31. line-height: 15px;
  32. }
  33. &-sm,
  34. &-group-sm > .btn {
  35. padding: ($padding-small-vertical + 2) $padding-small-horizontal $padding-small-vertical;
  36. }
  37. &-xs,
  38. &-group-xs > .btn {
  39. padding: ($padding-xs-vertical + 2) $padding-xs-horizontal $padding-xs-vertical;
  40. }
  41. &-default:hover,
  42. &-default:focus,
  43. &-group.open .dropdown-toggle.btn-default {
  44. background-color: $btn-default-bg;
  45. border-color: $btn-default-border;
  46. }
  47. &-primary:hover,
  48. &-primary:focus,
  49. &-group.open .dropdown-toggle.btn-primary {
  50. background-color: $btn-primary-bg;
  51. border-color: $btn-primary-border;
  52. }
  53. &-success:hover,
  54. &-success:focus,
  55. &-group.open .dropdown-toggle.btn-success {
  56. background-color: $btn-success-bg;
  57. border-color: $btn-success-border;
  58. }
  59. &-info:hover,
  60. &-info:focus,
  61. &-group.open .dropdown-toggle.btn-info {
  62. background-color: $btn-info-bg;
  63. border-color: $btn-info-border;
  64. }
  65. &-warning:hover,
  66. &-warning:focus,
  67. &-group.open .dropdown-toggle.btn-warning {
  68. background-color: $btn-warning-bg;
  69. border-color: $btn-warning-border;
  70. }
  71. &-danger:hover,
  72. &-danger:focus,
  73. &-group.open .dropdown-toggle.btn-danger {
  74. background-color: $btn-danger-bg;
  75. border-color: $btn-danger-border;
  76. }
  77. &-group.open .dropdown-toggle {
  78. @include box-shadow(none);
  79. }
  80. }
  81. .navbar-btn {
  82. &:hover {
  83. margin-top: 8px
  84. }
  85. &:active {
  86. margin-top: 9px
  87. }
  88. &.btn-sm {
  89. &:hover {
  90. margin-top: 11px
  91. }
  92. &:active {
  93. margin-top: 12px
  94. }
  95. }
  96. &.btn-xs {
  97. &:hover {
  98. margin-top: 15px
  99. }
  100. &:active {
  101. margin-top: 16px
  102. }
  103. }
  104. }
  105. .btn-group-vertical {
  106. .btn + .btn {
  107. &:hover {
  108. border-top-width: 1px;
  109. }
  110. &:active {
  111. border-top-width: 2px;
  112. }
  113. }
  114. }
  115. // Typography =================================================================
  116. .text-primary,
  117. .text-primary:hover {
  118. color: $brand-primary;
  119. }
  120. .text-success,
  121. .text-success:hover {
  122. color: $brand-success;
  123. }
  124. .text-danger,
  125. .text-danger:hover {
  126. color: $brand-danger;
  127. }
  128. .text-warning,
  129. .text-warning:hover {
  130. color: $brand-warning;
  131. }
  132. .text-info,
  133. .text-info:hover {
  134. color: $brand-info;
  135. }
  136. // Tables =====================================================================
  137. table,
  138. .table {
  139. a:not(.btn) {
  140. text-decoration: underline;
  141. }
  142. .dropdown-menu a {
  143. text-decoration: none;
  144. }
  145. .success,
  146. .warning,
  147. .danger,
  148. .info {
  149. color: #fff;
  150. a:not(.btn) {
  151. color: #fff;
  152. }
  153. }
  154. > thead > tr > th,
  155. > tbody > tr > th,
  156. > tfoot > tr > th,
  157. > thead > tr > td,
  158. > tbody > tr > td,
  159. > tfoot > tr > td {
  160. border-color: transparent;
  161. }
  162. }
  163. // Forms ======================================================================
  164. .form-control {
  165. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  166. }
  167. label {
  168. font-weight: normal;
  169. }
  170. .has-warning {
  171. .help-block,
  172. .control-label,
  173. .form-control-feedback {
  174. color: $brand-warning;
  175. }
  176. .form-control,
  177. .form-control:focus {
  178. border: 1px solid $brand-warning;
  179. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  180. }
  181. .input-group-addon {
  182. border: 1px solid $brand-warning;
  183. }
  184. }
  185. .has-error {
  186. .help-block,
  187. .control-label,
  188. .form-control-feedback {
  189. color: $brand-danger;
  190. }
  191. .form-control,
  192. .form-control:focus {
  193. border: 1px solid $brand-danger;
  194. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  195. }
  196. .input-group-addon {
  197. border: 1px solid $brand-danger;
  198. }
  199. }
  200. .has-success {
  201. .help-block,
  202. .control-label,
  203. .form-control-feedback {
  204. color: $brand-success;
  205. }
  206. .form-control,
  207. .form-control:focus {
  208. border: 1px solid $brand-success;
  209. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  210. }
  211. .input-group-addon {
  212. border: 1px solid $brand-success;
  213. }
  214. }
  215. // Navs =======================================================================
  216. .nav {
  217. .open > a,
  218. .open > a:hover,
  219. .open > a:focus {
  220. border-color: transparent;
  221. }
  222. }
  223. .nav-tabs {
  224. > li > a {
  225. margin-top: 6px;
  226. border-color: $navbar-default-border;
  227. color: $gray-dark;
  228. @include transition(all 0.2s ease-in-out);
  229. }
  230. > li > a:hover,
  231. > li > a:focus,
  232. > li.active > a,
  233. > li.active > a:hover,
  234. > li.active > a:focus,
  235. .open > a,
  236. .open > a:hover,
  237. .open > a:focus {
  238. padding-bottom: ($padding-large-vertical + 3);
  239. margin-top: 0;
  240. }
  241. .open > a,
  242. .open > a:hover,
  243. .open > a:focus {
  244. border-color: $navbar-default-border;
  245. }
  246. > li.disabled > a:hover,
  247. > li.disabled > a:focus {
  248. padding-top: 10px;
  249. padding-bottom: 10px;
  250. margin-top: 6px;
  251. }
  252. &.nav-justified > li {
  253. vertical-align: bottom;
  254. }
  255. }
  256. .dropdown-menu {
  257. margin-top: 0;
  258. @include shadow();
  259. border-top-width: 1px;
  260. @include box-shadow(none);
  261. }
  262. .breadcrumb {
  263. border-color: darken($breadcrumb-bg, 5%);
  264. border-style: solid;
  265. @include shadow();
  266. }
  267. .pagination,
  268. .pager {
  269. > li > a,
  270. > li > span {
  271. position: relative;
  272. top: 0;
  273. @include shadow();
  274. color: $pagination-color;
  275. font-size: 12px;
  276. font-weight: bold;
  277. text-transform: uppercase;
  278. &:hover {
  279. top: 1px;
  280. border-bottom-width: 3px;
  281. }
  282. &:active {
  283. top: 2px;
  284. border-bottom-width: 2px;
  285. }
  286. }
  287. > .disabled > a,
  288. > .disabled > span {
  289. &:hover {
  290. top: 0;
  291. @include shadow();
  292. }
  293. &:active {
  294. top: 0;
  295. @include shadow();
  296. }
  297. }
  298. }
  299. .pager {
  300. > li > a,
  301. > li > span,
  302. > .disabled > a,
  303. > .disabled > span {
  304. &,
  305. &:hover,
  306. &:active {
  307. border-left-width: 2px;
  308. border-right-width: 2px;
  309. }
  310. }
  311. }
  312. // Indicators =================================================================
  313. .close {
  314. color: #fff;
  315. text-decoration: none;
  316. opacity: 0.4;
  317. &:hover,
  318. &:focus {
  319. color: #fff;
  320. opacity: 1;
  321. }
  322. }
  323. .alert {
  324. @include shadow();
  325. .alert-link {
  326. font-weight: normal;
  327. color: #fff;
  328. text-decoration: underline;
  329. }
  330. }
  331. .label {
  332. font-weight: normal;
  333. }
  334. // Progress bars ==============================================================
  335. .progress {
  336. border: 1px solid $navbar-default-border;
  337. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.1));
  338. &-bar {
  339. @include box-shadow(inset 0 -4px 0 rgba(0, 0, 0, 0.15));
  340. }
  341. }
  342. // Containers =================================================================
  343. .well {
  344. border: 1px solid $navbar-default-border;
  345. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.05));
  346. }
  347. a.list-group-item {
  348. &.active,
  349. &.active:hover,
  350. &.active:focus {
  351. border-color: $list-group-border;
  352. }
  353. &-success {
  354. &.active {
  355. background-color: $state-success-bg;
  356. }
  357. &.active:hover,
  358. &.active:focus {
  359. background-color: darken($state-success-bg, 5%);
  360. }
  361. }
  362. &-warning {
  363. &.active {
  364. background-color: $state-warning-bg;
  365. }
  366. &.active:hover,
  367. &.active:focus {
  368. background-color: darken($state-warning-bg, 5%);
  369. }
  370. }
  371. &-danger {
  372. &.active {
  373. background-color: $state-danger-bg;
  374. }
  375. &.active:hover,
  376. &.active:focus {
  377. background-color: darken($state-danger-bg, 5%);
  378. }
  379. }
  380. }
  381. .jumbotron {
  382. border: 1px solid $navbar-default-border;
  383. @include box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.05));
  384. }
  385. .panel {
  386. border: 1px solid $navbar-default-border;
  387. @include shadow();
  388. &-default {
  389. .close {
  390. color: $text-color;
  391. }
  392. }
  393. }
  394. .modal {
  395. .close {
  396. color: $text-color;
  397. }
  398. }
  399. .popover {
  400. color: $text-color;
  401. }