_utilities.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. //
  2. // Floats
  3. //
  4. .clearfix {
  5. @include clearfix();
  6. }
  7. .center-block {
  8. @include center-block();
  9. }
  10. .pull-right {
  11. @include pull-right();
  12. }
  13. .pull-left {
  14. @include pull-left();
  15. }
  16. //
  17. // Screenreaders
  18. //
  19. .sr-only {
  20. @include sr-only();
  21. }
  22. .sr-only-focusable {
  23. @include sr-only-focusable();
  24. }
  25. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  26. [hidden] {
  27. display: none !important;
  28. }
  29. .invisible {
  30. visibility: hidden;
  31. }
  32. .text-hide {
  33. @include text-hide();
  34. }
  35. //
  36. // Text
  37. //
  38. // Alignment
  39. .text-left { text-align: left; }
  40. .text-right { text-align: right; }
  41. .text-center { text-align: center; }
  42. .text-justify { text-align: justify; }
  43. .text-nowrap { white-space: nowrap; }
  44. .text-truncate { @include text-truncate; }
  45. // Responsive alignment
  46. .text-xs-left { text-align: left; }
  47. .text-xs-right { text-align: right; }
  48. .text-xs-center { text-align: center; }
  49. @include media-breakpoint-up(sm) {
  50. .text-sm-left { text-align: left; }
  51. .text-sm-right { text-align: right; }
  52. .text-sm-center { text-align: center; }
  53. }
  54. @include media-breakpoint-up(md) {
  55. .text-md-left { text-align: left; }
  56. .text-md-right { text-align: right; }
  57. .text-md-center { text-align: center; }
  58. }
  59. @include media-breakpoint-up(lg) {
  60. .text-lg-left { text-align: left; }
  61. .text-lg-right { text-align: right; }
  62. .text-lg-center { text-align: center; }
  63. }
  64. @include media-breakpoint-up(xl) {
  65. .text-xl-left { text-align: left; }
  66. .text-xl-right { text-align: right; }
  67. .text-xl-center { text-align: center; }
  68. }
  69. // Transformation
  70. .text-lowercase { text-transform: lowercase; }
  71. .text-uppercase { text-transform: uppercase; }
  72. .text-capitalize { text-transform: capitalize; }
  73. // Contextual colors
  74. .text-muted {
  75. color: $text-muted;
  76. }
  77. @include text-emphasis-variant('.text-primary', $brand-primary);
  78. @include text-emphasis-variant('.text-success', $brand-success);
  79. @include text-emphasis-variant('.text-info', $brand-info);
  80. @include text-emphasis-variant('.text-warning', $brand-warning);
  81. @include text-emphasis-variant('.text-danger', $brand-danger);
  82. // Contextual backgrounds
  83. // For now we'll leave these alongside the text classes until v4 when we can
  84. // safely shift things around (per SemVer rules).
  85. // Inverse
  86. // Todo: redo this as a proper class
  87. .bg-inverse {
  88. color: $gray-lighter;
  89. background-color: $gray-dark;
  90. }
  91. .bg-faded {
  92. background-color: $gray-lightest;
  93. }
  94. @include bg-variant('.bg-primary', $brand-primary);
  95. @include bg-variant('.bg-success', $brand-success);
  96. @include bg-variant('.bg-info', $brand-info);
  97. @include bg-variant('.bg-warning', $brand-warning);
  98. @include bg-variant('.bg-danger', $brand-danger);