bass.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. /*! Basscss | http://basscss.com | MIT License */
  2. .h1{ font-size: 2rem }
  3. .h2{ font-size: 1.5rem }
  4. .h3{ font-size: 1.25rem }
  5. .h4{ font-size: 1rem }
  6. .h5{ font-size: .875rem }
  7. .h6{ font-size: .75rem }
  8. .font-family-inherit{ font-family:inherit }
  9. .font-size-inherit{ font-size:inherit }
  10. .text-decoration-none{ text-decoration:none }
  11. .bold{ font-weight: bold; font-weight: bold }
  12. .regular{ font-weight:normal }
  13. .italic{ font-style:italic }
  14. .caps{ text-transform:uppercase; letter-spacing: .2em; }
  15. .left-align{ text-align:left }
  16. .center{ text-align:center }
  17. .right-align{ text-align:right }
  18. .justify{ text-align:justify }
  19. .nowrap{ white-space:nowrap }
  20. .break-word{ word-wrap:break-word }
  21. .line-height-1{ line-height: 1 }
  22. .line-height-2{ line-height: 1.125 }
  23. .line-height-3{ line-height: 1.25 }
  24. .line-height-4{ line-height: 1.5 }
  25. .list-style-none{ list-style:none }
  26. .underline{ text-decoration:underline }
  27. .truncate{
  28. max-width:100%;
  29. overflow:hidden;
  30. text-overflow:ellipsis;
  31. white-space:nowrap;
  32. }
  33. .list-reset{
  34. list-style:none;
  35. padding-left:0;
  36. }
  37. .inline{ display:inline }
  38. .block{ display:block }
  39. .inline-block{ display:inline-block }
  40. .table{ display:table }
  41. .table-cell{ display:table-cell }
  42. .overflow-hidden{ overflow:hidden }
  43. .overflow-scroll{ overflow:scroll }
  44. .overflow-auto{ overflow:auto }
  45. .clearfix:before,
  46. .clearfix:after{
  47. content:" ";
  48. display:table
  49. }
  50. .clearfix:after{ clear:both }
  51. .left{ float:left }
  52. .right{ float:right }
  53. .fit{ max-width:100% }
  54. .max-width-1{ max-width: 24rem }
  55. .max-width-2{ max-width: 32rem }
  56. .max-width-3{ max-width: 48rem }
  57. .max-width-4{ max-width: 64rem }
  58. .border-box{ box-sizing:border-box }
  59. .align-baseline{ vertical-align:baseline }
  60. .align-top{ vertical-align:top }
  61. .align-middle{ vertical-align:middle }
  62. .align-bottom{ vertical-align:bottom }
  63. .m0{ margin:0 }
  64. .mt0{ margin-top:0 }
  65. .mr0{ margin-right:0 }
  66. .mb0{ margin-bottom:0 }
  67. .ml0{ margin-left:0 }
  68. .mx0{ margin-left:0; margin-right:0 }
  69. .my0{ margin-top:0; margin-bottom:0 }
  70. .m1{ margin: .5rem }
  71. .mt1{ margin-top: .5rem }
  72. .mr1{ margin-right: .5rem }
  73. .mb1{ margin-bottom: .5rem }
  74. .ml1{ margin-left: .5rem }
  75. .mx1{ margin-left: .5rem; margin-right: .5rem }
  76. .my1{ margin-top: .5rem; margin-bottom: .5rem }
  77. .m2{ margin: 1rem }
  78. .mt2{ margin-top: 1rem }
  79. .mr2{ margin-right: 1rem }
  80. .mb2{ margin-bottom: 1rem }
  81. .ml2{ margin-left: 1rem }
  82. .mx2{ margin-left: 1rem; margin-right: 1rem }
  83. .my2{ margin-top: 1rem; margin-bottom: 1rem }
  84. .m3{ margin: 2rem }
  85. .mt3{ margin-top: 2rem }
  86. .mr3{ margin-right: 2rem }
  87. .mb3{ margin-bottom: 2rem }
  88. .ml3{ margin-left: 2rem }
  89. .mx3{ margin-left: 2rem; margin-right: 2rem }
  90. .my3{ margin-top: 2rem; margin-bottom: 2rem }
  91. .m4{ margin: 4rem }
  92. .mt4{ margin-top: 4rem }
  93. .mr4{ margin-right: 4rem }
  94. .mb4{ margin-bottom: 4rem }
  95. .ml4{ margin-left: 4rem }
  96. .mx4{ margin-left: 4rem; margin-right: 4rem }
  97. .my4{ margin-top: 4rem; margin-bottom: 4rem }
  98. .mxn1{ margin-left: -.5rem; margin-right: -.5rem; }
  99. .mxn2{ margin-left: -1rem; margin-right: -1rem; }
  100. .mxn3{ margin-left: -2rem; margin-right: -2rem; }
  101. .mxn4{ margin-left: -4rem; margin-right: -4rem; }
  102. .ml-auto{ margin-left:auto }
  103. .mr-auto{ margin-right:auto }
  104. .mx-auto{ margin-left:auto; margin-right:auto; }
  105. .p0{ padding:0 }
  106. .pt0{ padding-top:0 }
  107. .pr0{ padding-right:0 }
  108. .pb0{ padding-bottom:0 }
  109. .pl0{ padding-left:0 }
  110. .px0{ padding-left:0; padding-right:0 }
  111. .py0{ padding-top:0; padding-bottom:0 }
  112. .p1{ padding: .5rem }
  113. .pt1{ padding-top: .5rem }
  114. .pr1{ padding-right: .5rem }
  115. .pb1{ padding-bottom: .5rem }
  116. .pl1{ padding-left: .5rem }
  117. .py1{ padding-top: .5rem; padding-bottom: .5rem }
  118. .px1{ padding-left: .5rem; padding-right: .5rem }
  119. .p2{ padding: 1rem }
  120. .pt2{ padding-top: 1rem }
  121. .pr2{ padding-right: 1rem }
  122. .pb2{ padding-bottom: 1rem }
  123. .pl2{ padding-left: 1rem }
  124. .py2{ padding-top: 1rem; padding-bottom: 1rem }
  125. .px2{ padding-left: 1rem; padding-right: 1rem }
  126. .p3{ padding: 2rem }
  127. .pt3{ padding-top: 2rem }
  128. .pr3{ padding-right: 2rem }
  129. .pb3{ padding-bottom: 2rem }
  130. .pl3{ padding-left: 2rem }
  131. .py3{ padding-top: 2rem; padding-bottom: 2rem }
  132. .px3{ padding-left: 2rem; padding-right: 2rem }
  133. .p4{ padding: 4rem }
  134. .pt4{ padding-top: 4rem }
  135. .pr4{ padding-right: 4rem }
  136. .pb4{ padding-bottom: 4rem }
  137. .pl4{ padding-left: 4rem }
  138. .py4{ padding-top: 4rem; padding-bottom: 4rem }
  139. .px4{ padding-left: 4rem; padding-right: 4rem }
  140. .col{
  141. float:left;
  142. box-sizing:border-box;
  143. }
  144. .col-right{
  145. float:right;
  146. box-sizing:border-box;
  147. }
  148. .col-1{
  149. width:8.33333%;
  150. }
  151. .col-2{
  152. width:16.66667%;
  153. }
  154. .col-3{
  155. width:25%;
  156. }
  157. .col-4{
  158. width:33.33333%;
  159. }
  160. .col-5{
  161. width:41.66667%;
  162. }
  163. .col-6{
  164. width:50%;
  165. }
  166. .col-7{
  167. width:58.33333%;
  168. }
  169. .col-8{
  170. width:66.66667%;
  171. }
  172. .col-9{
  173. width:75%;
  174. }
  175. .col-10{
  176. width:83.33333%;
  177. }
  178. .col-11{
  179. width:91.66667%;
  180. }
  181. .col-12{
  182. width:100%;
  183. }
  184. @media (min-width: 40em){
  185. .sm-col{
  186. float:left;
  187. box-sizing:border-box;
  188. }
  189. .sm-col-right{
  190. float:right;
  191. box-sizing:border-box;
  192. }
  193. .sm-col-1{
  194. width:8.33333%;
  195. }
  196. .sm-col-2{
  197. width:16.66667%;
  198. }
  199. .sm-col-3{
  200. width:25%;
  201. }
  202. .sm-col-4{
  203. width:33.33333%;
  204. }
  205. .sm-col-5{
  206. width:41.66667%;
  207. }
  208. .sm-col-6{
  209. width:50%;
  210. }
  211. .sm-col-7{
  212. width:58.33333%;
  213. }
  214. .sm-col-8{
  215. width:66.66667%;
  216. }
  217. .sm-col-9{
  218. width:75%;
  219. }
  220. .sm-col-10{
  221. width:83.33333%;
  222. }
  223. .sm-col-11{
  224. width:91.66667%;
  225. }
  226. .sm-col-12{
  227. width:100%;
  228. }
  229. }
  230. @media (min-width: 52em){
  231. .md-col{
  232. float:left;
  233. box-sizing:border-box;
  234. }
  235. .md-col-right{
  236. float:right;
  237. box-sizing:border-box;
  238. }
  239. .md-col-1{
  240. width:8.33333%;
  241. }
  242. .md-col-2{
  243. width:16.66667%;
  244. }
  245. .md-col-3{
  246. width:25%;
  247. }
  248. .md-col-4{
  249. width:33.33333%;
  250. }
  251. .md-col-5{
  252. width:41.66667%;
  253. }
  254. .md-col-6{
  255. width:50%;
  256. }
  257. .md-col-7{
  258. width:58.33333%;
  259. }
  260. .md-col-8{
  261. width:66.66667%;
  262. }
  263. .md-col-9{
  264. width:75%;
  265. }
  266. .md-col-10{
  267. width:83.33333%;
  268. }
  269. .md-col-11{
  270. width:91.66667%;
  271. }
  272. .md-col-12{
  273. width:100%;
  274. }
  275. }
  276. @media (min-width: 64em){
  277. .lg-col{
  278. float:left;
  279. box-sizing:border-box;
  280. }
  281. .lg-col-right{
  282. float:right;
  283. box-sizing:border-box;
  284. }
  285. .lg-col-1{
  286. width:8.33333%;
  287. }
  288. .lg-col-2{
  289. width:16.66667%;
  290. }
  291. .lg-col-3{
  292. width:25%;
  293. }
  294. .lg-col-4{
  295. width:33.33333%;
  296. }
  297. .lg-col-5{
  298. width:41.66667%;
  299. }
  300. .lg-col-6{
  301. width:50%;
  302. }
  303. .lg-col-7{
  304. width:58.33333%;
  305. }
  306. .lg-col-8{
  307. width:66.66667%;
  308. }
  309. .lg-col-9{
  310. width:75%;
  311. }
  312. .lg-col-10{
  313. width:83.33333%;
  314. }
  315. .lg-col-11{
  316. width:91.66667%;
  317. }
  318. .lg-col-12{
  319. width:100%;
  320. }
  321. }
  322. .flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  323. @media (min-width: 40em){
  324. .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  325. }
  326. @media (min-width: 52em){
  327. .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  328. }
  329. @media (min-width: 64em){
  330. .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  331. }
  332. .flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
  333. .flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }
  334. .items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start }
  335. .items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end }
  336. .items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center }
  337. .items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline }
  338. .items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch }
  339. .self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start }
  340. .self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end }
  341. .self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center }
  342. .self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline }
  343. .self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch }
  344. .justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start }
  345. .justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end }
  346. .justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center }
  347. .justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between }
  348. .justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around }
  349. .content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start }
  350. .content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end }
  351. .content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center }
  352. .content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between }
  353. .content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around }
  354. .content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch }
  355. .flex-auto{
  356. -webkit-box-flex:1;
  357. -webkit-flex:1 1 auto;
  358. -ms-flex:1 1 auto;
  359. flex:1 1 auto;
  360. min-width:0;
  361. min-height:0;
  362. }
  363. .flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none }
  364. .order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 }
  365. .order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 }
  366. .order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 }
  367. .order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 }
  368. .order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 }
  369. .relative{ position:relative }
  370. .absolute{ position:absolute }
  371. .fixed{ position:fixed }
  372. .top-0{ top:0 }
  373. .right-0{ right:0 }
  374. .bottom-0{ bottom:0 }
  375. .left-0{ left:0 }
  376. .z1{ z-index: 1 }
  377. .z2{ z-index: 2 }
  378. .z3{ z-index: 3 }
  379. .z4{ z-index: 4 }
  380. .border{
  381. border-style:solid;
  382. border-width: 1px;
  383. }
  384. .border-top{
  385. border-top-style:solid;
  386. border-top-width: 1px;
  387. }
  388. .border-right{
  389. border-right-style:solid;
  390. border-right-width: 1px;
  391. }
  392. .border-bottom{
  393. border-bottom-style:solid;
  394. border-bottom-width: 1px;
  395. }
  396. .border-left{
  397. border-left-style:solid;
  398. border-left-width: 1px;
  399. }
  400. .border-none{ border:0 }
  401. .rounded{ border-radius: 3px }
  402. .circle{ border-radius:50% }
  403. .rounded-top{ border-radius: 3px 3px 0 0 }
  404. .rounded-right{ border-radius: 0 3px 3px 0 }
  405. .rounded-bottom{ border-radius: 0 0 3px 3px }
  406. .rounded-left{ border-radius: 3px 0 0 3px }
  407. .not-rounded{ border-radius:0 }
  408. .hide{
  409. position:absolute !important;
  410. height:1px;
  411. width:1px;
  412. overflow:hidden;
  413. clip:rect(1px, 1px, 1px, 1px);
  414. }
  415. @media (max-width: 40em){
  416. .xs-hide{ display:none !important }
  417. }
  418. @media (min-width: 40em) and (max-width: 52em){
  419. .sm-hide{ display:none !important }
  420. }
  421. @media (min-width: 52em) and (max-width: 64em){
  422. .md-hide{ display:none !important }
  423. }
  424. @media (min-width: 64em){
  425. .lg-hide{ display:none !important }
  426. }
  427. .display-none{ display:none !important }