_override-bootstrap.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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. position: fixed;
  101. width: 100%;
  102. padding-right: 0 !important;
  103. }
  104. .modal-content {
  105. box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
  106. }
  107. .modal-header {
  108. border-bottom: 1px solid #e5e5e5;
  109. }
  110. .modal-footer {
  111. border-top: 1px solid #e5e5e5;
  112. }
  113. // When fading in the modal, animate it to slide down
  114. .modal.fade .modal-dialog {
  115. @include transition($modal-transition);
  116. transform: $modal-fade-transform;
  117. }
  118. .modal.show .modal-dialog {
  119. transform: $modal-show-transform;
  120. }
  121. // When trying to close, animate focus to scale
  122. .modal.modal-static .modal-dialog {
  123. transform: $modal-scale-transform;
  124. }
  125. // col-form-label (substitute for control-label of bootstrap3)
  126. .col-form-label {
  127. text-align: right;
  128. }
  129. // label
  130. label {
  131. // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
  132. :not(.with-no-font-weight) {
  133. font-weight: 700;
  134. }
  135. }
  136. // disabled button (reproduction from bootstrap3.)
  137. // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
  138. .btn.disabled,
  139. .btn[disabled],
  140. fieldset[disabled] .btn {
  141. cursor: not-allowed;
  142. }
  143. // progress bar
  144. .progress {
  145. margin-bottom: 18px;
  146. overflow: hidden;
  147. }
  148. .text-break {
  149. word-break: break-word;
  150. overflow-wrap: break-word;
  151. }
  152. }