_override-bootstrap.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. * {
  2. outline: none !important;
  3. }
  4. :root {
  5. font-size: $font-size-root;
  6. > body {
  7. font-family: $font-family-sans-serif;
  8. }
  9. }
  10. h1 {
  11. font-size: 36px;
  12. line-height: 48px;
  13. }
  14. h2 {
  15. font-size: 24px;
  16. line-height: 36px;
  17. }
  18. h3 {
  19. font-size: 21px;
  20. line-height: 30px;
  21. }
  22. h4 {
  23. font-size: 18px;
  24. line-height: 22px;
  25. }
  26. h5 {
  27. font-size: 16px;
  28. line-height: 18px;
  29. }
  30. h5 {
  31. font-size: 14px;
  32. line-height: 16px;
  33. }
  34. // Navs
  35. .nav-tabs {
  36. .nav-item {
  37. margin-right: 0.15rem;
  38. }
  39. }
  40. // card (substitute panel of bootstrap3)
  41. .card {
  42. margin-bottom: 20px;
  43. border-radius: $card-border-radius;
  44. }
  45. .card-header {
  46. font-weight: 700;
  47. text-transform: none;
  48. border-radius: $card-border-radius;
  49. }
  50. .card-header:first-child {
  51. border-radius: $card-border-radius;
  52. }
  53. // Well (substitute Well of bootstrap3)
  54. .card.well {
  55. min-height: 20px;
  56. padding: $card-spacer-y $card-spacer-x;
  57. border-radius: 3px;
  58. }
  59. // Dropdowns
  60. .dropdown {
  61. .dropdown-toggle.btn.disabled {
  62. cursor: not-allowed;
  63. }
  64. }
  65. // agile-admin style
  66. .dropdown-menu {
  67. padding-bottom: 8px;
  68. margin-top: 0px;
  69. border: 1px solid $border;
  70. border-radius: $radius;
  71. box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  72. }
  73. .dropdown-menu > li > a {
  74. width: 100%;
  75. padding: 9px 20px;
  76. }
  77. .dropdown-menu > li > a:focus,
  78. .dropdown-menu > li > a:hover {
  79. background: $extralight;
  80. }
  81. // btn-light (substitute for btn-default of bootstrap3) (agile-admin style)
  82. .btn-light,
  83. .btn-light.disabled {
  84. color: $bodytext;
  85. $this-color: $btn-default-bgcolor;
  86. background: $this-color;
  87. border: 1px solid $this-color;
  88. &:hover,
  89. &:focus,
  90. &.focus {
  91. color: $bodytext;
  92. background: $this-color;
  93. border: 1px solid $this-color;
  94. opacity: 0.8;
  95. }
  96. &:active &.active {
  97. box-shadow: none;
  98. }
  99. }
  100. .btn-light.btn-outline {
  101. background-color: transparent;
  102. &:hover,
  103. &:focus,
  104. &.focus {
  105. background: $btn-default-bgcolor;
  106. }
  107. }
  108. //Modals
  109. .modal-content {
  110. box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
  111. }
  112. .modal-header {
  113. border-bottom: 1px solid #e5e5e5;
  114. }
  115. .modal-footer {
  116. border-top: 1px solid #e5e5e5;
  117. }
  118. // col-form-label (substitute for control-label of bootstrap3)
  119. .col-form-label {
  120. text-align: right;
  121. }
  122. // label
  123. label {
  124. font-weight: 700;
  125. }
  126. // disabled button (reproduction from bootstrap3.)
  127. // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
  128. .btn.disabled,
  129. .btn[disabled],
  130. fieldset[disabled] .btn {
  131. cursor: not-allowed;
  132. }
  133. // input form (disabled box-shadow added in bootstrap4)
  134. .form-group .form-control {
  135. &:focus,
  136. &.focus {
  137. box-shadow: none;
  138. }
  139. }
  140. // progress bar
  141. .progress {
  142. margin-bottom: 18px;
  143. overflow: hidden;
  144. }