_text.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. // stylelint-disable declaration-no-important
  2. //
  3. // Text
  4. //
  5. .text-monospace {
  6. font-family: $font-family-monospace !important;
  7. }
  8. // Alignment
  9. .text-justify {
  10. text-align: justify !important;
  11. }
  12. .text-wrap {
  13. white-space: normal !important;
  14. }
  15. .text-nowrap {
  16. white-space: nowrap !important;
  17. }
  18. .text-truncate {
  19. @include text-truncate();
  20. }
  21. // Responsive alignment
  22. @each $breakpoint in map-keys($grid-breakpoints) {
  23. @include media-breakpoint-up($breakpoint) {
  24. $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  25. .text#{$infix}-left {
  26. text-align: left !important;
  27. }
  28. .text#{$infix}-right {
  29. text-align: right !important;
  30. }
  31. .text#{$infix}-center {
  32. text-align: center !important;
  33. }
  34. }
  35. }
  36. // Transformation
  37. .text-lowercase {
  38. text-transform: lowercase !important;
  39. }
  40. .text-uppercase {
  41. text-transform: uppercase !important;
  42. }
  43. .text-capitalize {
  44. text-transform: capitalize !important;
  45. }
  46. // Weight and italics
  47. .font-weight-light {
  48. font-weight: $font-weight-light !important;
  49. }
  50. .font-weight-lighter {
  51. font-weight: $font-weight-lighter !important;
  52. }
  53. .font-weight-normal {
  54. font-weight: $font-weight-normal !important;
  55. }
  56. .font-weight-bold {
  57. font-weight: $font-weight-bold !important;
  58. }
  59. .font-weight-bolder {
  60. font-weight: $font-weight-bolder !important;
  61. }
  62. .font-italic {
  63. font-style: italic !important;
  64. }
  65. // Contextual colors
  66. .text-white {
  67. color: $white !important;
  68. }
  69. @each $color, $value in $theme-colors {
  70. @include text-emphasis-variant('.text-#{$color}', $value, true);
  71. }
  72. .text-body {
  73. color: $body-color !important;
  74. }
  75. .text-muted {
  76. color: $text-muted !important;
  77. }
  78. .text-black-50 {
  79. color: rgba($black, 0.5) !important;
  80. }
  81. .text-white-50 {
  82. color: rgba($white, 0.5) !important;
  83. }
  84. // Misc
  85. .text-hide {
  86. @include text-hide($ignore-warning: true);
  87. }
  88. .text-decoration-none {
  89. text-decoration: none !important;
  90. }
  91. .text-break {
  92. word-break: break-word !important; // IE & < Edge 18
  93. overflow-wrap: break-word !important;
  94. }
  95. // Reset
  96. .text-reset {
  97. color: inherit !important;
  98. }