_override-bootstrap.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. // increase specificity with ':root' for GROWI theming
  2. :root {
  3. font-size: $font-size-root;
  4. > body {
  5. font-family: $font-family-sans-serif;
  6. }
  7. * {
  8. outline: none !important;
  9. }
  10. .container,
  11. .container-sm,
  12. .container-md,
  13. .container-lg,
  14. .container-xl,
  15. .container-fluid {
  16. // default: 15px
  17. // padding-right: 15px;
  18. // padding-left: 15px;
  19. @include media-breakpoint-down(xs) {
  20. padding-right: 10px;
  21. padding-left: 10px;
  22. }
  23. @include media-breakpoint-up(md) {
  24. padding-right: 30px;
  25. padding-left: 30px;
  26. }
  27. }
  28. h1 {
  29. font-size: 36px;
  30. line-height: 48px;
  31. }
  32. h2 {
  33. font-size: 24px;
  34. line-height: 36px;
  35. }
  36. h3 {
  37. font-size: 21px;
  38. line-height: 30px;
  39. }
  40. h4 {
  41. font-size: 18px;
  42. line-height: 22px;
  43. }
  44. h5 {
  45. font-size: 16px;
  46. line-height: 18px;
  47. }
  48. h6 {
  49. font-size: 12px;
  50. line-height: 14px;
  51. }
  52. // Navs
  53. .nav-tabs {
  54. .nav-item {
  55. margin-right: 0.15rem;
  56. a.active {
  57. cursor: default;
  58. }
  59. }
  60. }
  61. // Custom Control
  62. .custom-control {
  63. .custom-control-input,
  64. .custom-control-input + .custom-control-label {
  65. cursor: pointer;
  66. }
  67. }
  68. // card (substitute panel of bootstrap3)
  69. .card {
  70. margin-bottom: 20px;
  71. }
  72. .card-header {
  73. font-weight: 700;
  74. text-transform: none;
  75. }
  76. .card-header:first-child {
  77. }
  78. // Well (substitute Well of bootstrap3)
  79. .card.well {
  80. min-height: 20px;
  81. padding: $card-spacer-y $card-spacer-x;
  82. }
  83. // Dropdowns
  84. .dropdown-toggle {
  85. &.btn.disabled {
  86. pointer-events: auto;
  87. cursor: not-allowed;
  88. }
  89. // hide caret
  90. &.dropdown-toggle-no-caret::after {
  91. content: none;
  92. }
  93. }
  94. // Badges
  95. .badge {
  96. @extend .badge-pill;
  97. }
  98. //Modals
  99. .modal-open {
  100. width: 100%;
  101. padding-right: 0 !important;
  102. }
  103. .modal-content {
  104. box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
  105. }
  106. .modal-header {
  107. border-bottom: 1px solid #e5e5e5;
  108. }
  109. .modal-footer {
  110. border-top: 1px solid #e5e5e5;
  111. }
  112. // When fading in the modal, animate it to slide down
  113. .modal.fade .modal-dialog {
  114. @include transition($modal-transition);
  115. transform: $modal-fade-transform;
  116. }
  117. .modal.show .modal-dialog {
  118. transform: $modal-show-transform;
  119. }
  120. // When trying to close, animate focus to scale
  121. .modal.modal-static .modal-dialog {
  122. transform: $modal-scale-transform;
  123. }
  124. // col-form-label (substitute for control-label of bootstrap3)
  125. .col-form-label {
  126. text-align: right;
  127. }
  128. // label
  129. label {
  130. // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
  131. :not(.with-no-font-weight) {
  132. font-weight: 700;
  133. }
  134. }
  135. // disabled button (reproduction from bootstrap3.)
  136. // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
  137. .btn.disabled,
  138. .btn[disabled],
  139. fieldset[disabled] .btn {
  140. cursor: not-allowed;
  141. }
  142. // progress bar
  143. .progress {
  144. margin-bottom: 18px;
  145. overflow: hidden;
  146. }
  147. .text-break {
  148. word-break: break-word;
  149. overflow-wrap: break-word;
  150. }
  151. }