app.reset.less 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631
  1. // reset
  2. html {
  3. background-color: @body-bg;
  4. }
  5. body {
  6. font-family: @font-family-base;
  7. font-size: @font-size-base;
  8. color: @text-color;
  9. background-color: transparent;
  10. -webkit-font-smoothing: antialiased;
  11. line-height: @line-height-base;
  12. }
  13. *:focus {
  14. outline: 0 !important;
  15. }
  16. .h1, .h2, .h3, .h4, .h5, .h6{
  17. margin: 0;
  18. }
  19. // Links
  20. // -------------------------
  21. a {
  22. color: @link-color;
  23. text-decoration: none;
  24. cursor: pointer;
  25. }
  26. a:hover,
  27. a:focus {
  28. color: @link-hover-color;
  29. text-decoration: none;
  30. }
  31. label{font-weight: normal;}
  32. small, .small{font-size: @font-size-sm;}
  33. .badge, .label{font-weight: bold; text-shadow: 0 1px 0 rgba(0, 0, 0, .2)}
  34. .badge.bg-light, .label.bg-light{text-shadow:none;}
  35. .badge{
  36. background-color: @badge-bg;
  37. &.up{
  38. position: relative;
  39. top: -10px;
  40. padding:3px 6px;
  41. margin-left: -10px;
  42. }
  43. }
  44. .badge-sm{
  45. font-size: 85%;
  46. padding: 2px 5px !important;
  47. }
  48. .label-sm{
  49. padding-top: 0;
  50. padding-bottom: 1px;
  51. }
  52. .badge-white {
  53. background-color: transparent;
  54. border: 1px solid rgba(255,255,255,0.35);
  55. padding: 2px 6px;
  56. }
  57. .badge-empty {
  58. background-color: transparent;
  59. border: 1px solid rgba(0,0,0,0.15);
  60. color: inherit;
  61. }
  62. blockquote{
  63. border-color: @border-color;
  64. }
  65. .caret-white{
  66. border-top-color: #fff;
  67. border-top-color: rgba(255,255,255,.65);
  68. a:hover & {
  69. border-top-color: #fff;
  70. }
  71. }
  72. .thumbnail{
  73. border-color: @border-color;
  74. }
  75. .progress{
  76. background-color: @brand-light;
  77. }
  78. .progress-xxs{
  79. height: 2px
  80. }
  81. .progress-xs{
  82. height: 6px
  83. }
  84. .progress-sm{
  85. height: 12px;
  86. .progress-bar{
  87. font-size: 10px;
  88. line-height: 1em;
  89. }
  90. }
  91. .progress, .progress-bar{
  92. .box-shadow(none);
  93. }
  94. .progress-bar-primary{
  95. background-color: @brand-primary;
  96. }
  97. .progress-bar-info{
  98. background-color: @brand-info;
  99. }
  100. .progress-bar-success{
  101. background-color: @brand-success;
  102. }
  103. .progress-bar-warning{
  104. background-color: @brand-warning;
  105. }
  106. .progress-bar-danger{
  107. background-color: @brand-danger;
  108. }
  109. .progress-bar-black{
  110. background-color: @brand-black;
  111. }
  112. .progress-bar-white{
  113. background-color: #fff;
  114. }
  115. .accordion-group,
  116. .accordion-inner{
  117. border-color: @border-color;
  118. border-radius: @border-radius-base;
  119. }
  120. .alert{
  121. font-size: @font-size-sm;
  122. box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  123. .close i{
  124. font-size: 12px;
  125. font-weight: normal;
  126. display: block;
  127. }
  128. }
  129. .form-control{
  130. border-color: @input-border;
  131. border-radius: @input-border-radius;
  132. &,
  133. &:focus {
  134. .box-shadow(none);
  135. }
  136. &:focus{
  137. border-color: @input-border-focus;
  138. }
  139. }
  140. .form-horizontal{
  141. .control-label.text-left{
  142. text-align: left;
  143. }
  144. }
  145. .form-control-spin{
  146. position: absolute;
  147. z-index: 2;
  148. right: 10px;
  149. top: 50%;
  150. margin-top: -7px;
  151. }
  152. .input-lg{
  153. height: 45px;
  154. }
  155. .input-group-addon{
  156. border-color: @input-border;
  157. background-color: @brand-light;
  158. }
  159. .list-group{
  160. border-radius: @border-radius-base;
  161. &.no-radius {
  162. .list-group-item{
  163. border-radius: 0 !important;
  164. }
  165. }
  166. &.no-borders {
  167. .list-group-item{
  168. border: none;
  169. }
  170. }
  171. &.no-border{
  172. .list-group-item{
  173. border-width: 1px 0;
  174. }
  175. }
  176. &.no-bg{
  177. .list-group-item{
  178. background-color: transparent;
  179. }
  180. }
  181. }
  182. .list-group-item{
  183. border-color: @list-group-item-border;
  184. padding-right: 15px;
  185. a&{
  186. &:hover,
  187. &:focus,
  188. &.hover{
  189. background-color: @list-group-item-hover;
  190. }
  191. }
  192. &.media {
  193. margin-top: 0;
  194. }
  195. &.active {
  196. color: #fff;
  197. border-color: @list-group-active-color !important;
  198. background-color: @list-group-active-color !important;
  199. .text-muted{
  200. color: lighten(@list-group-active-color, 30%) !important;
  201. }
  202. a{
  203. color: #fff;
  204. }
  205. }
  206. &.focus{
  207. background-color: @list-group-item-focus !important;
  208. }
  209. &.select{
  210. position: relative;
  211. z-index: 1;
  212. background-color: @list-group-select-color !important;
  213. border-color: darken( @list-group-select-color , 5%);
  214. }
  215. .list-group-alt & {
  216. &:nth-child(2n+2){
  217. background-color: rgba(0,0,0,0.02) !important;
  218. }
  219. }
  220. .list-group-lg & {
  221. padding-top: 15px;
  222. padding-bottom: 15px;
  223. }
  224. .list-group-sm & {
  225. padding: 6px 10px;
  226. }
  227. .list-group-sp & {
  228. margin-bottom: 5px;
  229. border-radius: 3px;
  230. }
  231. > .badge{
  232. margin-right: 0;
  233. }
  234. > .fa-chevron-right {
  235. float: right;
  236. margin-top: 4px;
  237. margin-right: -5px;
  238. & + .badge{
  239. margin-right: 5px;
  240. }
  241. }
  242. }
  243. .nav-pills{
  244. &.no-radius {
  245. > li{
  246. > a {
  247. border-radius: 0;
  248. }
  249. }
  250. }
  251. > li{
  252. &.active {
  253. > a{
  254. color: #fff !important;
  255. background-color: @brand-info;
  256. &:hover,
  257. &:active{
  258. background-color: darken(@brand-info, 5%);
  259. }
  260. }
  261. }
  262. }
  263. }
  264. .nav{
  265. > li{
  266. > a{
  267. &:hover,
  268. &:focus{
  269. background-color: @nav-bg;
  270. }
  271. }
  272. }
  273. &.nav-lg{
  274. > li > a{
  275. padding: 20px 20px;
  276. }
  277. }
  278. &.nav-md{
  279. > li > a{
  280. padding: 15px 15px;
  281. }
  282. }
  283. &.nav-sm{
  284. > li > a{
  285. padding: 6px 12px;
  286. }
  287. }
  288. &.nav-xs{
  289. > li > a{
  290. padding: 4px 10px;
  291. }
  292. }
  293. &.nav-xxs{
  294. > li > a{
  295. padding: 1px 10px;
  296. }
  297. }
  298. &.nav-rounded{
  299. > li > a{
  300. border-radius: 20px;
  301. }
  302. }
  303. .open{
  304. > a{
  305. &,
  306. &:hover,
  307. &:focus{
  308. background-color: @nav-bg;
  309. }
  310. }
  311. }
  312. }
  313. .nav-tabs{
  314. border-color: @border-color;
  315. > li{
  316. > a{
  317. border-radius: @panel-border-radius @panel-border-radius 0 0;
  318. border-bottom-color: @border-color;
  319. }
  320. &:hover > a,
  321. &.active > a,
  322. &.active > a:hover{
  323. border-color: @border-color;
  324. }
  325. &.active > a{
  326. border-bottom-color: #fff !important;
  327. }
  328. }
  329. .nav-tabs-alt & {
  330. &.nav-justified{
  331. > li{
  332. display: table-cell;
  333. width: 1%;
  334. }
  335. }
  336. > li{
  337. > a {
  338. border-radius: 0;
  339. border-color: transparent !important;
  340. background: transparent !important;
  341. border-bottom-color: @border-color !important;
  342. }
  343. &.active{
  344. > a {
  345. border-bottom-color: @brand-info !important;
  346. }
  347. }
  348. }
  349. }
  350. }
  351. .tab-container{
  352. margin-bottom: 15px;
  353. .tab-content{
  354. padding:15px;
  355. background-color: #fff;
  356. border: 1px solid @border-color;
  357. border-top-width: 0;
  358. border-radius: 0 0 @panel-border-radius @panel-border-radius;
  359. }
  360. }
  361. .pagination{
  362. > li{
  363. > a{
  364. border-color: @border-color;
  365. &:hover,
  366. &:focus{
  367. border-color: @border-color;
  368. background-color: @brand-light;
  369. }
  370. }
  371. }
  372. }
  373. .panel{
  374. border-radius: @panel-border-radius;
  375. .accordion-toggle{
  376. font-size: 14px;
  377. display: block;
  378. cursor: pointer;
  379. }
  380. .list-group-item{
  381. border-color: @panel-list-group-border;
  382. }
  383. &.no-borders{
  384. border-width: 0;
  385. .panel-heading,
  386. .panel-footer{
  387. border-width: 0;
  388. }
  389. }
  390. }
  391. .panel-heading{
  392. .panel-default &{
  393. background-color: @panel-heading-bg;
  394. }
  395. border-radius: @panel-border-radius @panel-border-radius 0 0;
  396. &.no-border{
  397. margin:-1px -1px 0 -1px;
  398. border: none;
  399. }
  400. .nav{
  401. margin: -10px -15px;
  402. }
  403. .list-group{
  404. background: transparent;
  405. }
  406. }
  407. .panel-footer{
  408. border-color: @panel-heading-border;
  409. border-radius: 0 0 @panel-border-radius @panel-border-radius;
  410. background-color: @panel-footer-bg;
  411. }
  412. .panel-default{
  413. border-color: @panel-border;
  414. > .panel-heading,
  415. > .panel-footer {
  416. border-color: @panel-heading-border;
  417. }
  418. }
  419. .panel-group .panel-heading + .panel-collapse .panel-body{
  420. border-top: 1px solid #eaedef;
  421. }
  422. .table{
  423. > tbody,
  424. > tfoot {
  425. > tr {
  426. > td {
  427. padding:8px 15px;
  428. border-top: 1px solid @table-border-color;
  429. }
  430. }
  431. }
  432. > thead > tr > th{
  433. padding:8px 15px;
  434. border-bottom: 1px solid @table-border-color;
  435. }
  436. }
  437. .table-bordered{
  438. border-color: @table-border-color;
  439. > tbody{
  440. > tr{
  441. > td{
  442. border-color: @table-border-color;
  443. }
  444. }
  445. }
  446. > thead > tr > th{
  447. border-color: @table-border-color;
  448. }
  449. }
  450. .table-striped{
  451. > tbody {
  452. > tr{
  453. &:nth-child(odd){
  454. > td,
  455. > th{
  456. background-color: @table-striped-color;
  457. }
  458. }
  459. }
  460. }
  461. > thead {
  462. > th{
  463. background-color: @table-striped-color;
  464. border-right: 1px solid @table-border-color;
  465. &:last-child{
  466. border-right: none
  467. }
  468. }
  469. }
  470. }
  471. .well, pre {
  472. background-color: @brand-light;
  473. border-color: @border-color;
  474. }
  475. .dropdown-menu{
  476. border-radius: @border-radius-base;
  477. .box-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  478. border: 1px solid @border-color;
  479. border: 1px solid rgba(0, 0, 0, 0.1);
  480. &.pull-left{
  481. left:100%;
  482. }
  483. > .panel{
  484. border: none;
  485. margin: -5px 0;
  486. }
  487. > li > a{
  488. padding: 5px 15px;
  489. }
  490. > li > a:hover,
  491. > li > a:focus,
  492. > .active > a,
  493. > .active > a:hover,
  494. > .active > a:focus{
  495. background-image: none;
  496. filter:none;
  497. background-color: @brand-light !important;
  498. color: @link-hover-color;
  499. }
  500. }
  501. .dropdown-header{
  502. padding: 5px 15px;
  503. }
  504. .dropdown-submenu{
  505. position: relative;
  506. &:hover,
  507. &:focus{
  508. > a{
  509. background-color: @brand-light !important;
  510. color: @text-color;
  511. }
  512. > .dropdown-menu {
  513. display: block;
  514. }
  515. }
  516. &.pull-left{
  517. float: none !important;
  518. > .dropdown-menu{
  519. left: -100%;
  520. margin-left: 10px;
  521. }
  522. }
  523. .dropdown-menu{
  524. left:100%;
  525. top:0;
  526. margin-top: -6px;
  527. margin-left: -1px
  528. }
  529. .dropup & {
  530. > .dropdown-menu{
  531. top: auto;
  532. bottom: 0;
  533. }
  534. }
  535. }
  536. .btn-group > .btn{
  537. margin-left: -1px;
  538. }
  539. /*cols*/
  540. .col-lg-2-4 {
  541. position: relative;
  542. min-height: 1px;
  543. padding-left: 15px;
  544. padding-right: 15px;
  545. }
  546. .col-0{clear:left;}
  547. .row.no-gutter{
  548. margin-left: 0;
  549. margin-right: 0;
  550. }
  551. .no-gutter [class*="col"]{
  552. padding: 0;
  553. }
  554. .row-sm{
  555. margin-left: -10px;
  556. margin-right: -10px;
  557. > div{
  558. padding-left: 10px;
  559. padding-right: 10px;
  560. }
  561. }
  562. .modal-backdrop{
  563. background-color: @brand-dark;
  564. &.in{
  565. opacity: 0.8;
  566. filter: alpha(opacity=80);
  567. }
  568. }
  569. .modal-over{
  570. left: 0;
  571. right: 0;
  572. top: 0;
  573. bottom: 0;
  574. position: fixed;
  575. }
  576. .modal-center{
  577. position: absolute;
  578. left:50%;
  579. top:50%;
  580. }