bootswatch.less 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. // Lumen 3.1.1
  2. // Bootswatch
  3. // -----------------------------------------------------
  4. @import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
  5. .shadow (@width: 4px) {
  6. border-width: 0 1px @width 1px;
  7. }
  8. // Navbar =====================================================================
  9. .navbar {
  10. .shadow();
  11. }
  12. // Buttons ====================================================================
  13. .btn {
  14. padding: 8px @padding-base-horizontal 7px;
  15. .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. .box-shadow(none);
  27. }
  28. &-lg,
  29. &-group-lg > .btn {
  30. padding: 14px @padding-large-horizontal 13px;
  31. line-height: 15px;
  32. }
  33. &-sm,
  34. &-group-sm > .btn {
  35. padding: 4px @padding-small-horizontal;
  36. }
  37. &-xs,
  38. &-group-xs > .btn {
  39. padding: @padding-xs-vertical @padding-xs-horizontal;
  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. .box-shadow(none);
  79. }
  80. }
  81. // Typography =================================================================
  82. .text-primary,
  83. .text-primary:hover {
  84. color: @brand-primary;
  85. }
  86. .text-success,
  87. .text-success:hover {
  88. color: @brand-success;
  89. }
  90. .text-danger,
  91. .text-danger:hover {
  92. color: @brand-danger;
  93. }
  94. .text-warning,
  95. .text-warning:hover {
  96. color: @brand-warning;
  97. }
  98. .text-info,
  99. .text-info:hover {
  100. color: @brand-info;
  101. }
  102. // Tables =====================================================================
  103. table,
  104. .table {
  105. a {
  106. text-decoration: underline;
  107. }
  108. .success,
  109. .warning,
  110. .danger,
  111. .info {
  112. color: #fff;
  113. a {
  114. color: #fff;
  115. }
  116. }
  117. > thead > tr > th,
  118. > tbody > tr > th,
  119. > tfoot > tr > th,
  120. > thead > tr > td,
  121. > tbody > tr > td,
  122. > tfoot > tr > td {
  123. border-color: transparent;
  124. }
  125. }
  126. // Forms ======================================================================
  127. .form-control {
  128. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  129. }
  130. label {
  131. font-weight: normal;
  132. }
  133. .has-warning {
  134. .help-block,
  135. .control-label {
  136. color: @brand-warning;
  137. }
  138. .form-control,
  139. .form-control:focus {
  140. border: 1px solid @brand-warning;
  141. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  142. }
  143. }
  144. .has-error {
  145. .help-block,
  146. .control-label {
  147. color: @brand-danger;
  148. }
  149. .form-control,
  150. .form-control:focus {
  151. border: 1px solid @brand-danger;
  152. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  153. }
  154. }
  155. .has-success {
  156. .help-block,
  157. .control-label {
  158. color: @brand-success;
  159. }
  160. .form-control,
  161. .form-control:focus {
  162. border: 1px solid @brand-success;
  163. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.075));
  164. }
  165. }
  166. // Navs =======================================================================
  167. .nav {
  168. .open > a,
  169. .open > a:hover,
  170. .open > a:focus {
  171. border-color: transparent;
  172. }
  173. }
  174. .nav-tabs {
  175. > li > a {
  176. margin-top: 6px;
  177. border-color: @navbar-default-border;
  178. color: @gray-dark;
  179. .transition(all 0.2s ease-in-out);
  180. }
  181. > li > a:hover,
  182. > li > a:focus,
  183. > li.active > a,
  184. > li.active > a:hover,
  185. > li.active > a:focus,
  186. .open > a,
  187. .open > a:hover,
  188. .open > a:focus {
  189. padding-top: @padding-large-vertical + 3px;
  190. padding-bottom: @padding-large-vertical + 3px;
  191. margin-top: 0;
  192. }
  193. .open > a,
  194. .open > a:hover,
  195. .open > a:focus {
  196. border-color: @navbar-default-border;
  197. }
  198. > li.disabled > a:hover,
  199. > li.disabled > a:focus {
  200. padding-top: @padding-large-vertical;
  201. padding-bottom: @padding-large-vertical;
  202. margin-top: 6px;
  203. }
  204. }
  205. .dropdown-menu {
  206. margin-top: 0;
  207. .shadow();
  208. border-top-width: 1px;
  209. .box-shadow(none);
  210. }
  211. .breadcrumb {
  212. border-color: darken(@breadcrumb-bg, 5%);
  213. border-style: solid;
  214. .shadow();
  215. }
  216. .pagination,
  217. .pager {
  218. > li > a,
  219. > li > span {
  220. .shadow();
  221. color: @pagination-color;
  222. font-size: 12px;
  223. font-weight: bold;
  224. text-transform: uppercase;
  225. &:hover {
  226. margin-top: 1px;
  227. border-bottom-width: 3px;
  228. }
  229. &:active {
  230. margin-top: 2px;
  231. border-bottom-width: 2px;
  232. }
  233. }
  234. > .disabled > a,
  235. > .disabled > span {
  236. &:hover {
  237. margin-top: 0;
  238. .shadow();
  239. }
  240. &:active {
  241. margin-top: 0;
  242. .shadow();
  243. }
  244. }
  245. }
  246. // Indicators =================================================================
  247. .alert {
  248. .shadow();
  249. a,
  250. .alert-link {
  251. font-weight: normal;
  252. color: #fff;
  253. text-decoration: underline;
  254. }
  255. }
  256. .label {
  257. font-weight: normal;
  258. }
  259. // Progress bars ==============================================================
  260. .progress {
  261. border: 1px solid @navbar-default-border;
  262. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.1));
  263. &-bar {
  264. .box-shadow(inset 0 -4px 0 rgba(0, 0, 0, 0.15));
  265. }
  266. }
  267. // Containers =================================================================
  268. .well {
  269. border: 1px solid @navbar-default-border;
  270. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.05));
  271. }
  272. .jumbotron {
  273. border: 1px solid @navbar-default-border;
  274. .box-shadow(inset 0 2px 0 rgba(0, 0, 0, 0.05));
  275. }
  276. .panel {
  277. border: 1px solid @navbar-default-border;
  278. .box-shadow(0 4px 0 rgba(0, 0, 0, 0.15));
  279. }