scaffolding.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. //
  2. // Scaffolding
  3. // --------------------------------------------------
  4. // Reset the box-sizing
  5. //
  6. // Heads up! This reset may cause conflicts with some third-party widgets.
  7. // For recommendations on resolving such conflicts, see
  8. // https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
  9. * {
  10. .box-sizing(border-box);
  11. }
  12. *:before,
  13. *:after {
  14. .box-sizing(border-box);
  15. }
  16. // Body reset
  17. html {
  18. font-size: 10px;
  19. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20. }
  21. body {
  22. font-family: @font-family-base;
  23. font-size: @font-size-base;
  24. line-height: @line-height-base;
  25. color: @text-color;
  26. background-color: @body-bg;
  27. }
  28. // Reset fonts for relevant elements
  29. input,
  30. button,
  31. select,
  32. textarea {
  33. font-family: inherit;
  34. font-size: inherit;
  35. line-height: inherit;
  36. }
  37. // Links
  38. a {
  39. color: @link-color;
  40. text-decoration: none;
  41. &:hover,
  42. &:focus {
  43. color: @link-hover-color;
  44. text-decoration: @link-hover-decoration;
  45. }
  46. &:focus {
  47. .tab-focus();
  48. }
  49. }
  50. // Figures
  51. //
  52. // We reset this here because previously Normalize had no `figure` margins. This
  53. // ensures we don't break anyone's use of the element.
  54. figure {
  55. margin: 0;
  56. }
  57. // Images
  58. img {
  59. vertical-align: middle;
  60. }
  61. // Responsive images (ensure images don't scale beyond their parents)
  62. .img-responsive {
  63. .img-responsive();
  64. }
  65. // Rounded corners
  66. .img-rounded {
  67. border-radius: @border-radius-large;
  68. }
  69. // Image thumbnails
  70. //
  71. // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
  72. .img-thumbnail {
  73. padding: @thumbnail-padding;
  74. line-height: @line-height-base;
  75. background-color: @thumbnail-bg;
  76. border: 1px solid @thumbnail-border;
  77. border-radius: @thumbnail-border-radius;
  78. .transition(all .2s ease-in-out);
  79. // Keep them at most 100% wide
  80. .img-responsive(inline-block);
  81. }
  82. // Perfect circle
  83. .img-circle {
  84. border-radius: 50%; // set radius in percents
  85. }
  86. // Horizontal rules
  87. hr {
  88. margin-top: @line-height-computed;
  89. margin-bottom: @line-height-computed;
  90. border: 0;
  91. border-top: 1px solid @hr-border;
  92. }
  93. // Only display content to screen readers
  94. //
  95. // See: https://a11yproject.com/posts/how-to-hide-content
  96. .sr-only {
  97. position: absolute;
  98. width: 1px;
  99. height: 1px;
  100. padding: 0;
  101. margin: -1px;
  102. overflow: hidden;
  103. clip: rect(0, 0, 0, 0);
  104. border: 0;
  105. }
  106. // Use in conjunction with .sr-only to only display content when it's focused.
  107. // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
  108. // Credit: HTML5 Boilerplate
  109. .sr-only-focusable {
  110. &:active,
  111. &:focus {
  112. position: static;
  113. width: auto;
  114. height: auto;
  115. margin: 0;
  116. overflow: visible;
  117. clip: auto;
  118. }
  119. }
  120. // iOS "clickable elements" fix for role="button"
  121. //
  122. // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
  123. // for traditionally non-focusable elements with role="button"
  124. // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
  125. [role="button"] {
  126. cursor: pointer;
  127. }