typography.sass 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @import "../utilities/mixins"
  2. =typography-size($target:'')
  3. @each $size in $sizes
  4. $i: index($sizes, $size)
  5. .is-size-#{$i}#{if($target == '', '', '-' + $target)}
  6. font-size: $size !important
  7. +typography-size()
  8. +mobile
  9. +typography-size('mobile')
  10. +tablet
  11. +typography-size('tablet')
  12. +touch
  13. +typography-size('touch')
  14. +desktop
  15. +typography-size('desktop')
  16. +widescreen
  17. +typography-size('widescreen')
  18. +fullhd
  19. +typography-size('fullhd')
  20. $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
  21. @each $alignment, $text-align in $alignments
  22. .has-text-#{$alignment}
  23. text-align: #{$text-align} !important
  24. @each $alignment, $text-align in $alignments
  25. +mobile
  26. .has-text-#{$alignment}-mobile
  27. text-align: #{$text-align} !important
  28. +tablet
  29. .has-text-#{$alignment}-tablet
  30. text-align: #{$text-align} !important
  31. +tablet-only
  32. .has-text-#{$alignment}-tablet-only
  33. text-align: #{$text-align} !important
  34. +touch
  35. .has-text-#{$alignment}-touch
  36. text-align: #{$text-align} !important
  37. +desktop
  38. .has-text-#{$alignment}-desktop
  39. text-align: #{$text-align} !important
  40. +desktop-only
  41. .has-text-#{$alignment}-desktop-only
  42. text-align: #{$text-align} !important
  43. +widescreen
  44. .has-text-#{$alignment}-widescreen
  45. text-align: #{$text-align} !important
  46. +widescreen-only
  47. .has-text-#{$alignment}-widescreen-only
  48. text-align: #{$text-align} !important
  49. +fullhd
  50. .has-text-#{$alignment}-fullhd
  51. text-align: #{$text-align} !important
  52. .is-capitalized
  53. text-transform: capitalize !important
  54. .is-lowercase
  55. text-transform: lowercase !important
  56. .is-uppercase
  57. text-transform: uppercase !important
  58. .is-italic
  59. font-style: italic !important
  60. .has-text-weight-light
  61. font-weight: $weight-light !important
  62. .has-text-weight-normal
  63. font-weight: $weight-normal !important
  64. .has-text-weight-medium
  65. font-weight: $weight-medium !important
  66. .has-text-weight-semibold
  67. font-weight: $weight-semibold !important
  68. .has-text-weight-bold
  69. font-weight: $weight-bold !important
  70. .is-family-primary
  71. font-family: $family-primary !important
  72. .is-family-secondary
  73. font-family: $family-secondary !important
  74. .is-family-sans-serif
  75. font-family: $family-sans-serif !important
  76. .is-family-monospace
  77. font-family: $family-monospace !important
  78. .is-family-code
  79. font-family: $family-code !important