25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

194 satır
3.8KB

  1. /*!
  2. * bsStepper v1.7.0 (https://github.com/Johann-S/bs-stepper)
  3. * Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
  4. * Licensed under MIT (https://github.com/Johann-S/bs-stepper/blob/master/LICENSE)
  5. */
  6. .bs-stepper .step-trigger {
  7. display: -ms-inline-flexbox;
  8. display: inline-flex;
  9. -ms-flex-wrap: wrap;
  10. flex-wrap: wrap;
  11. -ms-flex-align: center;
  12. align-items: center;
  13. -ms-flex-pack: center;
  14. justify-content: center;
  15. padding: 20px;
  16. font-size: 1rem;
  17. font-weight: 700;
  18. line-height: 1.5;
  19. color: #6c757d;
  20. text-align: center;
  21. text-decoration: none;
  22. white-space: nowrap;
  23. vertical-align: middle;
  24. -webkit-user-select: none;
  25. -moz-user-select: none;
  26. -ms-user-select: none;
  27. user-select: none;
  28. background-color: transparent;
  29. border: none;
  30. border-radius: .25rem;
  31. transition: background-color .15s ease-out, color .15s ease-out;
  32. }
  33. .bs-stepper .step-trigger:not(:disabled):not(.disabled) {
  34. cursor: pointer;
  35. }
  36. .bs-stepper .step-trigger:disabled,
  37. .bs-stepper .step-trigger.disabled {
  38. pointer-events: none;
  39. opacity: .65;
  40. }
  41. .bs-stepper .step-trigger:focus {
  42. color: #007bff;
  43. outline: none;
  44. }
  45. .bs-stepper .step-trigger:hover {
  46. text-decoration: none;
  47. background-color: rgba(0, 0, 0, .06);
  48. }
  49. @media (max-width: 520px) {
  50. .bs-stepper .step-trigger {
  51. -ms-flex-direction: column;
  52. flex-direction: column;
  53. padding: 10px;
  54. }
  55. }
  56. .bs-stepper-label {
  57. display: inline-block;
  58. margin: .25rem;
  59. }
  60. .bs-stepper-header {
  61. display: -ms-flexbox;
  62. display: flex;
  63. -ms-flex-align: center;
  64. align-items: center;
  65. }
  66. @media (max-width: 520px) {
  67. .bs-stepper-header {
  68. margin: 0 -10px;
  69. text-align: center;
  70. }
  71. }
  72. .bs-stepper-line,
  73. .bs-stepper .line {
  74. -ms-flex: 1 0 32px;
  75. flex: 1 0 32px;
  76. min-width: 1px;
  77. min-height: 1px;
  78. margin: auto;
  79. background-color: rgba(0, 0, 0, .12);
  80. }
  81. @media (max-width: 400px) {
  82. .bs-stepper-line,
  83. .bs-stepper .line {
  84. -ms-flex-preferred-size: 20px;
  85. flex-basis: 20px;
  86. }
  87. }
  88. .bs-stepper-circle {
  89. display: -ms-inline-flexbox;
  90. display: inline-flex;
  91. -ms-flex-line-pack: center;
  92. align-content: center;
  93. -ms-flex-pack: center;
  94. justify-content: center;
  95. width: 2em;
  96. height: 2em;
  97. padding: .5em 0;
  98. margin: .25rem;
  99. line-height: 1em;
  100. color: #fff;
  101. background-color: #6c757d;
  102. border-radius: 1em;
  103. }
  104. .active .bs-stepper-circle {
  105. background-color: #007bff;
  106. }
  107. .bs-stepper-content {
  108. padding: 0 20px 20px;
  109. }
  110. @media (max-width: 520px) {
  111. .bs-stepper-content {
  112. padding: 0;
  113. }
  114. }
  115. .bs-stepper.vertical {
  116. display: -ms-flexbox;
  117. display: flex;
  118. }
  119. .bs-stepper.vertical .bs-stepper-header {
  120. -ms-flex-direction: column;
  121. flex-direction: column;
  122. -ms-flex-align: stretch;
  123. align-items: stretch;
  124. margin: 0;
  125. }
  126. .bs-stepper.vertical .bs-stepper-pane,
  127. .bs-stepper.vertical .content {
  128. display: block;
  129. }
  130. .bs-stepper.vertical .bs-stepper-pane:not(.fade),
  131. .bs-stepper.vertical .content:not(.fade) {
  132. display: block;
  133. visibility: hidden;
  134. }
  135. .bs-stepper-pane:not(.fade),
  136. .bs-stepper .content:not(.fade) {
  137. display: none;
  138. }
  139. .bs-stepper .content.fade,
  140. .bs-stepper-pane.fade {
  141. visibility: hidden;
  142. transition-duration: .3s;
  143. transition-property: opacity;
  144. }
  145. .bs-stepper-pane.fade.active,
  146. .bs-stepper .content.fade.active {
  147. visibility: visible;
  148. opacity: 1;
  149. }
  150. .bs-stepper-pane.active:not(.fade),
  151. .bs-stepper .content.active:not(.fade) {
  152. display: block;
  153. visibility: visible;
  154. }
  155. .bs-stepper-pane.dstepper-block,
  156. .bs-stepper .content.dstepper-block {
  157. display: block;
  158. }
  159. .bs-stepper:not(.vertical) .bs-stepper-pane.dstepper-none,
  160. .bs-stepper:not(.vertical) .content.dstepper-none {
  161. display: none;
  162. }
  163. .vertical .bs-stepper-pane.fade.dstepper-none,
  164. .vertical .content.fade.dstepper-none {
  165. visibility: hidden;
  166. }
  167. /*# sourceMappingURL=bs-stepper.css.map */