bootswatch.less 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. /**
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. // Forked Cosmo 3.3.7
  20. // Bootswatch
  21. // -----------------------------------------------------
  22. // Navbar =====================================================================
  23. .navbar {
  24. border: none;
  25. li > a:focus {
  26. outline: 0;
  27. }
  28. &-inverse {
  29. .badge {
  30. background-color: @lightest;
  31. color: @brand-primary;
  32. }
  33. }
  34. .caret {
  35. display: inline-block;
  36. padding: 0 5px 18px 5px;
  37. }
  38. }
  39. .navbar-inverse {
  40. border: 3px solid @navbar-inverse-bg;
  41. }
  42. .navbar-inverse .navbar-nav > li > a:hover,
  43. .navbar-inverse .navbar-nav > li > a:focus,
  44. .navbar-inverse .navbar-nav > li.active > a {
  45. background: transparent;
  46. border-bottom: 3px solid @brand-primary;
  47. margin-bottom: -3px;
  48. }
  49. .navbar-inverse .navbar-nav > .active > a,
  50. .navbar-inverse .navbar-nav > .active > a:hover,
  51. .navbar-inverse .navbar-nav > .active > a:focus {
  52. background: transparent;
  53. }
  54. .navbar-nav > li > a {
  55. padding-top: 18px;
  56. }
  57. // Buttons ====================================================================
  58. .btn-default:hover {
  59. color: @gray-dark;
  60. background-color: @gray-bg;
  61. }
  62. .nav-tabs {
  63. .dropdown-toggle.btn,
  64. .btn-group.open .dropdown-toggle.btn {
  65. &,
  66. &:hover,
  67. &:active,
  68. &:focus {
  69. border-color: transparent;
  70. background-color: transparent;
  71. box-shadow: none;
  72. }
  73. }
  74. }
  75. .caret {
  76. border: none;
  77. color: @gray;
  78. &:hover {
  79. color: @gray-darker;
  80. }
  81. &:before {
  82. font-family: 'FontAwesome';
  83. font-size: @font-size-xs;
  84. content: '\f078';
  85. }
  86. }
  87. // Typography =================================================================
  88. body {
  89. -webkit-font-smoothing: antialiased;
  90. }
  91. .text-primary,
  92. .text-primary:hover {
  93. color: @brand-primary;
  94. }
  95. .text-success,
  96. .text-success:hover {
  97. color: @success;
  98. }
  99. .text-danger,
  100. .text-danger:hover {
  101. color: @brand-danger;
  102. }
  103. .text-warning,
  104. .text-warning:hover {
  105. color: @brand-warning;
  106. }
  107. .text-info,
  108. .text-info:hover {
  109. color: @brand-info;
  110. }
  111. // Tables =====================================================================
  112. table,
  113. .table {
  114. .dropdown-menu a {
  115. text-decoration: none;
  116. }
  117. .success,
  118. .warning,
  119. .danger,
  120. .info {
  121. color: @lightest;
  122. a {
  123. color: @lightest;
  124. }
  125. .btn-default {
  126. color: @gray;
  127. }
  128. }
  129. }
  130. // Forms ======================================================================
  131. .has-warning {
  132. .help-block,
  133. .control-label,
  134. .radio,
  135. .checkbox,
  136. .radio-inline,
  137. .checkbox-inline,
  138. &.radio label,
  139. &.checkbox label,
  140. &.radio-inline label,
  141. &.checkbox-inline label,
  142. .form-control-feedback {
  143. color: @brand-warning;
  144. }
  145. .form-control,
  146. .form-control:focus,
  147. .input-group-addon {
  148. border: 1px solid @brand-warning;
  149. }
  150. }
  151. .has-error {
  152. .help-block,
  153. .control-label,
  154. .radio,
  155. .checkbox,
  156. .radio-inline,
  157. .checkbox-inline,
  158. &.radio label,
  159. &.checkbox label,
  160. &.radio-inline label,
  161. &.checkbox-inline label,
  162. .form-control-feedback {
  163. color: @brand-danger;
  164. }
  165. .form-control,
  166. .form-control:focus,
  167. .input-group-addon {
  168. border: 1px solid @brand-danger;
  169. }
  170. }
  171. .has-success {
  172. .help-block,
  173. .control-label,
  174. .radio,
  175. .checkbox,
  176. .radio-inline,
  177. .checkbox-inline,
  178. &.radio label,
  179. &.checkbox label,
  180. &.radio-inline label,
  181. &.checkbox-inline label,
  182. .form-control-feedback {
  183. color: @brand-success;
  184. }
  185. .form-control,
  186. .form-control:focus,
  187. .input-group-addon {
  188. border: 1px solid @brand-success;
  189. }
  190. }
  191. // Navs =======================================================================
  192. .nav-pills {
  193. & > li > a {
  194. border-radius: @border-radius-normal;
  195. }
  196. }
  197. .dropdown-menu {
  198. & > li > a:hover,
  199. & > li > a:focus {
  200. background-image: none;
  201. }
  202. }
  203. // Indicators =================================================================
  204. .close {
  205. text-decoration: none;
  206. text-shadow: none;
  207. opacity: 0.4;
  208. &:hover,
  209. &:focus {
  210. opacity: 1;
  211. }
  212. }
  213. .alert {
  214. border: none;
  215. }
  216. .alert-link {
  217. text-decoration: underline;
  218. }
  219. .alert-info .alert-link {
  220. color: @alert-info-text;
  221. }
  222. .alert-danger .alert-link {
  223. color: @alert-danger-text;
  224. }
  225. .alert-warning .alert-link {
  226. color: @alert-warning-text;
  227. }
  228. .alert-success .alert-link {
  229. color: @alert-success-text;
  230. }
  231. .label {
  232. border-radius: @border-radius-normal;
  233. }
  234. label {
  235. font-weight: @font-weight-normal;
  236. }
  237. // Progress bars ==============================================================
  238. .progress {
  239. height: 14px;
  240. .box-shadow(none);
  241. .progress-bar {
  242. font-size: @font-size-s;
  243. line-height: @line-height-tight;
  244. padding-top: 1px;
  245. }
  246. }
  247. // Containers =================================================================
  248. .panel {
  249. border: none;
  250. &-heading,
  251. &-footer {
  252. border-top-right-radius: 0;
  253. border-top-left-radius: 0;
  254. }
  255. &-default {
  256. .panel-heading {
  257. padding: 15px 15px 0 15px;
  258. background-color: transparent;
  259. }
  260. .panel-title {
  261. color: @text-color;
  262. padding-bottom: 5px;
  263. border-bottom: 1px solid @gray-light;
  264. h1,
  265. h2,
  266. h3,
  267. h4,
  268. h5,
  269. h6 {
  270. margin: 10px 0 0 0;
  271. font-weight: @font-weight-bold;
  272. }
  273. }
  274. .close {
  275. color: @text-color;
  276. }
  277. }
  278. &-primary {
  279. .panel-heading {
  280. padding: 15px 15px 0 15px;
  281. background-color: transparent;
  282. }
  283. .panel-title {
  284. color: @text-color;
  285. padding-bottom: 5px;
  286. border-bottom: 1px solid @gray-light;
  287. h1,
  288. h2,
  289. h3,
  290. h4,
  291. h5,
  292. h6 {
  293. margin: 10px 0 0 0;
  294. font-weight: @font-weight-bold;
  295. }
  296. }
  297. .close {
  298. color: @text-color;
  299. }
  300. }
  301. }
  302. .panel-title-large {
  303. font-size: 24px;
  304. }
  305. a.list-group-item {
  306. &-success {
  307. &.active {
  308. background-color: @state-success-bg;
  309. }
  310. &.active:hover,
  311. &.active:focus {
  312. background-color: darken(@state-success-bg, 5%);
  313. }
  314. }
  315. &-warning {
  316. &.active {
  317. background-color: @state-warning-bg;
  318. }
  319. &.active:hover,
  320. &.active:focus {
  321. background-color: darken(@state-warning-bg, 5%);
  322. }
  323. }
  324. &-danger {
  325. &.active {
  326. background-color: @state-danger-bg;
  327. }
  328. &.active:hover,
  329. &.active:focus {
  330. background-color: darken(@state-danger-bg, 5%);
  331. }
  332. }
  333. }
  334. .modal {
  335. .close {
  336. color: @text-color;
  337. }
  338. }
  339. .popover {
  340. color: @text-color;
  341. }
  342. // Tabs ==============================================================
  343. .nav-tabs > li > a {
  344. border-top: 3px solid transparent;
  345. }
  346. .nav-tabs > li.active > a,
  347. .nav-tabs > li.active > a:hover,
  348. .nav-tabs > li.active > a:focus {
  349. background-color: @lightest;
  350. font-weight: @font-weight-bold;
  351. border-top: 3px solid @brand-primary;
  352. }
  353. // Tables ==============================================================
  354. .table {
  355. .info {
  356. color: @state-info-text;
  357. }
  358. .danger {
  359. color: @state-danger-text;
  360. }
  361. .warning {
  362. color: @state-warning-text;
  363. }
  364. .success {
  365. color: @state-success-text;
  366. }
  367. }
  368. // Utils ==============================================================
  369. hr {
  370. margin: 10px 0;
  371. }
  372. // generate space-n classes for vertical spacing
  373. .space-loop(@counter) when (@counter > 0) {
  374. .space-loop((@counter - 1)); // next iteration
  375. .space-@{counter} {
  376. margin-bottom: (10px * @counter); // code for each iteration
  377. }
  378. }
  379. .space-loop(6);
  380. a {
  381. cursor: pointer;
  382. }