_helpers.scss 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. // SIZES
  2. // -----------------------------------------------------------------------------
  3. .text-xs {
  4. @include font-size( 10 );
  5. }
  6. .text-sm {
  7. @include font-size( 13 );
  8. }
  9. .text-md {
  10. @include font-size( 16 );
  11. }
  12. .text-lg {
  13. @include font-size( 19 );
  14. }
  15. .text-xl {
  16. @include font-size( 22 );
  17. }
  18. // STATES
  19. // -----------------------------------------------------------------------------
  20. .text-muted {
  21. color: $color-muted !important;
  22. }
  23. html.dark {
  24. .text-muted {
  25. color: darken( $dark-default-text, 20% ) !important;
  26. }
  27. }
  28. @each $color in $colors-list {
  29. .text-#{nth($color,1)} {
  30. color: #{nth($color,2)} !important;
  31. }
  32. }
  33. @each $color in $colors-list {
  34. .text-#{nth($color,1)}-inverse {
  35. color: #{nth($color,3)} !important;
  36. }
  37. }
  38. // WEIGHTS
  39. // -----------------------------------------------------------------------------
  40. /* weights */
  41. .text-light {
  42. font-weight: $font-weight-light;
  43. }
  44. .text-normal {
  45. font-weight: $font-weight-normal;
  46. }
  47. .text-semibold {
  48. font-weight: $font-weight-semibold;
  49. }
  50. .text-bold {
  51. font-weight: $font-weight-bold;
  52. }
  53. // TEXT OTHERS
  54. // -----------------------------------------------------------------------------
  55. .text-uppercase {
  56. text-transform: uppercase;
  57. }
  58. .text-lowercase {
  59. text-transform: lowercase;
  60. }
  61. .text-capitalize {
  62. text-transform: capitalize;
  63. }
  64. // BORDERS
  65. // -----------------------------------------------------------------------------
  66. .rounded {
  67. border-radius: $border-radius;
  68. }
  69. .b-thin {
  70. border-width: $border-thin;
  71. }
  72. .b-normal {
  73. border-width: $border-normal;
  74. }
  75. .b-thick {
  76. border-width: $border-thick;
  77. }
  78. // SPACEMENTS
  79. // -----------------------------------------------------------------------------
  80. /* Spacements */
  81. /* spacement top & bottom */
  82. .m-none {
  83. margin: 0 !important;
  84. }
  85. .m-auto {
  86. margin: 0 auto !important;
  87. }
  88. .m-xs {
  89. margin: $spacement-xs !important;
  90. }
  91. .m-sm {
  92. margin: $spacement-sm !important;
  93. }
  94. .m-md {
  95. margin: $spacement-md !important;
  96. }
  97. .m-lg {
  98. margin: $spacement-lg !important;
  99. }
  100. .m-xl {
  101. margin: $spacement-xl !important;
  102. }
  103. .m-xlg {
  104. margin: $spacement-xlg !important;
  105. }
  106. /* spacement top */
  107. .mt-none {
  108. margin-top: 0 !important;
  109. }
  110. .mt-xs {
  111. margin-top: $spacement-xs !important;
  112. }
  113. .mt-sm {
  114. margin-top: $spacement-sm !important;
  115. }
  116. .mt-md {
  117. margin-top: $spacement-md !important;
  118. }
  119. .mt-lg {
  120. margin-top: $spacement-lg !important;
  121. }
  122. .mt-xl {
  123. margin-top: $spacement-xl !important;
  124. }
  125. .mt-xlg {
  126. margin-top: $spacement-xlg !important;
  127. }
  128. /* spacement bottom */
  129. .mb-none {
  130. margin-bottom: 0 !important;
  131. }
  132. .mb-xs {
  133. margin-bottom: $spacement-xs !important;
  134. }
  135. .mb-sm {
  136. margin-bottom: $spacement-sm !important;
  137. }
  138. .mb-md {
  139. margin-bottom: $spacement-md !important;
  140. }
  141. .mb-lg {
  142. margin-bottom: $spacement-lg !important;
  143. }
  144. .mb-xl {
  145. margin-bottom: $spacement-xl !important;
  146. }
  147. .mb-xlg {
  148. margin-bottom: $spacement-xlg !important;
  149. }
  150. /* spacement left */
  151. .mr-none {
  152. margin-left: 0 !important;
  153. }
  154. .ml-xs {
  155. margin-left: $spacement-xs !important;
  156. }
  157. .ml-sm {
  158. margin-left: $spacement-sm !important;
  159. }
  160. .ml-md {
  161. margin-left: $spacement-md !important;
  162. }
  163. .ml-lg {
  164. margin-left: $spacement-lg !important;
  165. }
  166. .ml-xl {
  167. margin-left: $spacement-xl !important;
  168. }
  169. .ml-xlg {
  170. margin-left: $spacement-xlg !important;
  171. }
  172. /* spacement right */
  173. .mr-none {
  174. margin-right: 0 !important;
  175. }
  176. .mr-xs {
  177. margin-right: $spacement-xs !important;
  178. }
  179. .mr-sm {
  180. margin-right: $spacement-sm !important;
  181. }
  182. .mr-md {
  183. margin-right: $spacement-md !important;
  184. }
  185. .mr-lg {
  186. margin-right: $spacement-lg !important;
  187. }
  188. .mr-xl {
  189. margin-right: $spacement-xl !important;
  190. }
  191. .mr-xlg {
  192. margin-right: $spacement-xlg !important;
  193. }
  194. /* Spacement Padding */
  195. .p-none {
  196. padding: 0 !important;
  197. }
  198. .p-xs {
  199. padding: $spacement-xs !important;
  200. }
  201. .p-sm {
  202. padding: $spacement-sm !important;
  203. }
  204. .p-md {
  205. padding: $spacement-md !important;
  206. }
  207. .p-lg {
  208. padding: $spacement-lg !important;
  209. }
  210. .p-xl {
  211. padding: $spacement-xl !important;
  212. }
  213. .p-xlg {
  214. padding: $spacement-xlg !important;
  215. }
  216. /* spacement top */
  217. .pt-none {
  218. padding-top: 0 !important;
  219. }
  220. .pt-xs {
  221. padding-top: $spacement-xs !important;
  222. }
  223. .pt-sm {
  224. padding-top: $spacement-sm !important;
  225. }
  226. .pt-md {
  227. padding-top: $spacement-md !important;
  228. }
  229. .pt-lg {
  230. padding-top: $spacement-lg !important;
  231. }
  232. .pt-xl {
  233. padding-top: $spacement-xl !important;
  234. }
  235. .pt-xlg {
  236. padding-top: $spacement-xlg !important;
  237. }
  238. /* spacement bottom */
  239. .pb-none {
  240. padding-bottom: 0 !important;
  241. }
  242. .pb-xs {
  243. padding-bottom: $spacement-xs !important;
  244. }
  245. .pb-sm {
  246. padding-bottom: $spacement-sm !important;
  247. }
  248. .pb-md {
  249. padding-bottom: $spacement-md !important;
  250. }
  251. .pb-lg {
  252. padding-bottom: $spacement-lg !important;
  253. }
  254. .pb-xl {
  255. padding-bottom: $spacement-xl !important;
  256. }
  257. .pb-xlg {
  258. padding-bottom: $spacement-xlg !important;
  259. }
  260. /* spacement left */
  261. .pr-none {
  262. padding-left: 0 !important;
  263. }
  264. .pl-xs {
  265. padding-left: $spacement-xs !important;
  266. }
  267. .pl-sm {
  268. padding-left: $spacement-sm !important;
  269. }
  270. .pl-md {
  271. padding-left: $spacement-md !important;
  272. }
  273. .pl-lg {
  274. padding-left: $spacement-lg !important;
  275. }
  276. .pl-xl {
  277. padding-left: $spacement-xl !important;
  278. }
  279. .pl-xlg {
  280. padding-left: $spacement-xlg !important;
  281. }
  282. /* spacement right */
  283. .pr-none {
  284. padding-right: 0 !important;
  285. }
  286. .pr-xs {
  287. padding-right: $spacement-xs !important;
  288. }
  289. .pr-sm {
  290. padding-right: $spacement-sm !important;
  291. }
  292. .pr-md {
  293. padding-right: $spacement-md !important;
  294. }
  295. .pr-lg {
  296. padding-right: $spacement-lg !important;
  297. }
  298. .pr-xl {
  299. padding-right: $spacement-xl !important;
  300. }
  301. .pr-xlg {
  302. padding-right: $spacement-xlg !important;
  303. }
  304. // HELPERS
  305. // -----------------------------------------------------------------------------
  306. .ib {
  307. display: inline-block;
  308. vertical-align: top;
  309. }
  310. .va-middle {
  311. vertical-align: middle;
  312. }
  313. .ws-nowrap {
  314. white-space: nowrap;
  315. }
  316. .ws-normal {
  317. white-space: normal;
  318. }
  319. // BG STATES
  320. // -----------------------------------------------------------------------------
  321. .bg-default {
  322. background: $color-default;
  323. color: $color-default-inverse;
  324. }
  325. @each $color in $colors-list {
  326. .bg-#{nth($color,1)} {
  327. background: #{nth($color,2)};
  328. color: #{nth($color,3)};
  329. }
  330. }