You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

239 lines
5.7 KiB

  1. /*
  2. * # Semantic - Steps
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Step
  13. *******************************/
  14. .ui.step,
  15. .ui.steps .step {
  16. display: inline-block;
  17. position: relative;
  18. padding: 1em 3em 1em 2em;
  19. vertical-align: top;
  20. background-color: #FFFFFF;
  21. color: #888888;
  22. -webkit-box-sizing: border-box;
  23. -moz-box-sizing: border-box;
  24. -ms-box-sizing: border-box;
  25. box-sizing: border-box;
  26. }
  27. .ui.step:after,
  28. .ui.steps .step:after {
  29. position: absolute;
  30. z-index: 2;
  31. content: '';
  32. top: 0em;
  33. left: -1.45em;
  34. border-bottom: 1.5em solid transparent;
  35. border-right: 1.5em solid #FFFFFF;
  36. border-top: 1.5em solid transparent;
  37. width: 0em;
  38. height: 0em;
  39. }
  40. .ui.step,
  41. .ui.steps .step,
  42. .ui.steps .step:after {
  43. -webkit-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  44. -moz-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  45. -o-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  46. -ms-transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  47. transition: opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  48. }
  49. /*******************************
  50. Group
  51. *******************************/
  52. .ui.steps {
  53. cursor: pointer;
  54. display: inline-block;
  55. font-size: 0em;
  56. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  57. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  58. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  59. line-height: 1;
  60. -webkit-box-sizing: border-box;
  61. -moz-box-sizing: border-box;
  62. -ms-box-sizing: border-box;
  63. box-sizing: border-box;
  64. -moz-border-radius: 0.3125rem;
  65. -webkit-border-radius: 0.3125rem;
  66. border-radius: 0.3125rem;
  67. }
  68. .ui.steps .step:first-child {
  69. padding-right: 1.35em;
  70. -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  71. -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  72. border-radius: 0em 0.3125em 0.3125em 0em;
  73. }
  74. .ui.steps .step:last-child {
  75. -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  76. -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  77. border-radius: 0.3125em 0em 0em 0.3125em;
  78. }
  79. .ui.steps .step:only-child {
  80. -webkit-border-radius: 0.3125em;
  81. -moz-border-radius: 0.3125em;
  82. border-radius: 0.3125em;
  83. }
  84. .ui.steps .step:last-child {
  85. margin-left: 0em;
  86. }
  87. .ui.steps .step:last-child:after {
  88. display: none;
  89. }
  90. /*******************************
  91. States
  92. *******************************/
  93. /* Hover */
  94. .ui.step:hover,
  95. .ui.step.hover {
  96. background-color: #F7F7F7;
  97. color: rgba(0, 0, 0, 0.8);
  98. }
  99. .ui.steps .step.hover:after,
  100. .ui.steps .step:hover:after,
  101. .ui.step:hover,
  102. .ui.step.hover::after {
  103. border-right-color: #F7F7F7;
  104. }
  105. /* Hover */
  106. .ui.steps .step.down,
  107. .ui.steps .step:active,
  108. .ui.step.down,
  109. .ui.step:active {
  110. background-color: #F0F0F0;
  111. }
  112. .ui.steps .step.down:after,
  113. .ui.steps .step:active:after,
  114. .ui.steps.down::after,
  115. .ui.steps:active::after {
  116. border-right-color: #F0F0F0;
  117. }
  118. /* Active */
  119. .ui.steps .step.active,
  120. .ui.active.step {
  121. cursor: auto;
  122. background-color: #555555;
  123. color: #FFFFFF;
  124. font-weight: bold;
  125. }
  126. .ui.steps .step.active:after,
  127. .ui.active.steps:after {
  128. border-right-color: #555555;
  129. }
  130. /* Disabled */
  131. .ui.steps .disabled.step,
  132. .ui.disabled.step {
  133. cursor: auto;
  134. background-color: #FFFFFF;
  135. color: #CBCBCB;
  136. }
  137. .ui.disabled.step:after {
  138. border: none;
  139. background-color: #FFFFFF;
  140. top: 0.42em;
  141. left: -1em;
  142. width: 2.15em;
  143. height: 2.15em;
  144. -webkit-transform: rotate(-45deg);
  145. -moz-transform: rotate(-45deg);
  146. -o-transform: rotate(-45deg);
  147. -ms-transform: rotate(-45deg);
  148. transform: rotate(-45deg);
  149. -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  150. -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  151. box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  152. }
  153. /*******************************
  154. Variations
  155. *******************************/
  156. /* Attached */
  157. .attached.ui.steps {
  158. margin: 0em;
  159. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  160. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  161. border-radius: 0.3125em 0.3125em 0em 0em;
  162. }
  163. .attached.ui.steps .step:first-child {
  164. -webkit-border-radius: 0em 0.3125em 0em 0em;
  165. -moz-border-radius: 0em 0.3125em 0em 0em;
  166. border-radius: 0em 0.3125em 0em 0em;
  167. }
  168. .attached.ui.steps .step:last-child {
  169. -webkit-border-radius: 0.3125em 0em 0em 0em;
  170. -moz-border-radius: 0.3125em 0em 0em 0em;
  171. border-radius: 0.3125em 0em 0em 0em;
  172. }
  173. /* Bottom Side */
  174. .bottom.attached.ui.steps {
  175. margin-top: -1px;
  176. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  177. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  178. border-radius: 0em 0em 0.3125em 0.3125em;
  179. }
  180. .bottom.attached.ui.steps .step:first-child {
  181. -webkit-border-radius: 0em 0em 0.3125em 0em;
  182. -moz-border-radius: 0em 0em 0.3125em 0em;
  183. border-radius: 0em 0em 0.3125em 0em;
  184. }
  185. .bottom.attached.ui.steps .step:last-child {
  186. -webkit-border-radius: 0em 0em 0em 0.3125em;
  187. -moz-border-radius: 0em 0em 0em 0.3125em;
  188. border-radius: 0em 0em 0em 0.3125em;
  189. }
  190. /* Evenly divided */
  191. .ui.one.steps,
  192. .ui.two.steps,
  193. .ui.three.steps,
  194. .ui.four.steps,
  195. .ui.five.steps,
  196. .ui.six.steps,
  197. .ui.seven.steps,
  198. .ui.eight.steps {
  199. display: block;
  200. }
  201. .ui.one.steps > .step {
  202. width: 100%;
  203. }
  204. .ui.two.steps > .step {
  205. width: 50%;
  206. }
  207. .ui.three.steps > .step {
  208. width: 33.333%;
  209. }
  210. .ui.four.steps > .step {
  211. width: 25%;
  212. }
  213. .ui.five.steps > .step {
  214. width: 20%;
  215. }
  216. .ui.six.steps > .step {
  217. width: 16.666%;
  218. }
  219. .ui.seven.steps > .step {
  220. width: 14.285%;
  221. }
  222. .ui.eight.steps > .step {
  223. width: 12.500%;
  224. }
  225. /*******************************
  226. Sizes
  227. *******************************/
  228. .ui.small.step,
  229. .ui.small.steps .step {
  230. font-size: 0.8rem;
  231. }
  232. .ui.step,
  233. .ui.steps .step {
  234. font-size: 1rem;
  235. }
  236. .ui.large.step,
  237. .ui.large.steps .step {
  238. font-size: 1.25rem;
  239. }