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.

293 lines
5.8 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:
  44. opacity 0.1s ease,
  45. color 0.1s ease,
  46. box-shadow 0.1s ease
  47. ;
  48. -moz-transition:
  49. opacity 0.1s ease,
  50. color 0.1s ease,
  51. box-shadow 0.1s ease
  52. ;
  53. -o-transition:
  54. opacity 0.1s ease,
  55. color 0.1s ease,
  56. box-shadow 0.1s ease
  57. ;
  58. -ms-transition:
  59. opacity 0.1s ease,
  60. color 0.1s ease,
  61. box-shadow 0.1s ease
  62. ;
  63. transition:
  64. opacity 0.1s ease,
  65. color 0.1s ease,
  66. box-shadow 0.1s ease
  67. ;
  68. }
  69. /*******************************
  70. Group
  71. *******************************/
  72. .ui.steps {
  73. cursor: pointer;
  74. display: inline-block;
  75. font-size: 0em;
  76. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  77. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  78. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  79. line-height: 1;
  80. -webkit-box-sizing: border-box;
  81. -moz-box-sizing: border-box;
  82. -ms-box-sizing: border-box;
  83. box-sizing: border-box;
  84. -moz-border-radius: 0.3125rem;
  85. -webkit-border-radius: 0.3125rem;
  86. border-radius: 0.3125rem;
  87. }
  88. .ui.steps .step:first-child {
  89. padding-right: 1.35em;
  90. -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
  91. -moz-border-radius: 0em 0.3125em 0.3125em 0em;
  92. border-radius: 0em 0.3125em 0.3125em 0em;
  93. }
  94. .ui.steps .step:last-child {
  95. -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
  96. -moz-border-radius: 0.3125em 0em 0em 0.3125em;
  97. border-radius: 0.3125em 0em 0em 0.3125em;
  98. }
  99. .ui.steps .step:only-child {
  100. -webkit-border-radius: 0.3125em;
  101. -moz-border-radius: 0.3125em;
  102. border-radius: 0.3125em;
  103. }
  104. .ui.steps .step:last-child {
  105. margin-left: 0em;
  106. }
  107. .ui.steps .step:last-child:after {
  108. display: none;
  109. }
  110. /*******************************
  111. States
  112. *******************************/
  113. /* Hover */
  114. .ui.step:hover,
  115. .ui.step.hover {
  116. background-color: #F7F7F7;
  117. color: rgba(0, 0, 0, 0.8);
  118. }
  119. .ui.steps .step.hover:after,
  120. .ui.steps .step:hover:after,
  121. .ui.step:hover,
  122. .ui.step.hover::after {
  123. border-right-color: #F7F7F7;
  124. }
  125. /* Hover */
  126. .ui.steps .step.down,
  127. .ui.steps .step:active,
  128. .ui.step.down,
  129. .ui.step:active {
  130. background-color: #F0F0F0;
  131. }
  132. .ui.steps .step.down:after,
  133. .ui.steps .step:active:after,
  134. .ui.steps.down::after,
  135. .ui.steps:active::after {
  136. border-right-color: #F0F0F0;
  137. }
  138. /* Active */
  139. .ui.steps .step.active,
  140. .ui.active.step {
  141. cursor: auto;
  142. background-color: #555555;
  143. color: #FFFFFF;
  144. font-weight: bold;
  145. }
  146. .ui.steps .step.active:after,
  147. .ui.active.steps:after {
  148. border-right-color: #555555;
  149. }
  150. /* Disabled */
  151. .ui.steps .disabled.step,
  152. .ui.disabled.step {
  153. cursor: auto;
  154. background-color: #FFFFFF;
  155. color: #CBCBCB;
  156. }
  157. .ui.disabled.step:after {
  158. border: none;
  159. background-color: #FFFFFF;
  160. top: 0.42em;
  161. left: -1em;
  162. width: 2.15em;
  163. height: 2.15em;
  164. -webkit-transform: rotate(-45deg);
  165. -moz-transform: rotate(-45deg);
  166. -o-transform: rotate(-45deg);
  167. -ms-transform: rotate(-45deg);
  168. transform: rotate(-45deg);
  169. -webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  170. -moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  171. box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
  172. }
  173. /*******************************
  174. Variations
  175. *******************************/
  176. /* Attached */
  177. .attached.ui.steps {
  178. margin: 0em;
  179. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  180. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  181. border-radius: 0.3125em 0.3125em 0em 0em;
  182. }
  183. .attached.ui.steps .step:first-child {
  184. -webkit-border-radius: 0em 0.3125em 0em 0em;
  185. -moz-border-radius: 0em 0.3125em 0em 0em;
  186. border-radius: 0em 0.3125em 0em 0em;
  187. }
  188. .attached.ui.steps .step:last-child {
  189. -webkit-border-radius: 0.3125em 0em 0em 0em;
  190. -moz-border-radius: 0.3125em 0em 0em 0em;
  191. border-radius: 0.3125em 0em 0em 0em;
  192. }
  193. /* Bottom Side */
  194. .bottom.attached.ui.steps {
  195. margin-top: -1px;
  196. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  197. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  198. border-radius: 0em 0em 0.3125em 0.3125em;
  199. }
  200. .bottom.attached.ui.steps .step:first-child {
  201. -webkit-border-radius: 0em 0em 0.3125em 0em;
  202. -moz-border-radius: 0em 0em 0.3125em 0em;
  203. border-radius: 0em 0em 0.3125em 0em;
  204. }
  205. .bottom.attached.ui.steps .step:last-child {
  206. -webkit-border-radius: 0em 0em 0em 0.3125em;
  207. -moz-border-radius: 0em 0em 0em 0.3125em;
  208. border-radius: 0em 0em 0em 0.3125em;
  209. }
  210. /* Evenly divided */
  211. .ui.one.steps,
  212. .ui.two.steps,
  213. .ui.three.steps,
  214. .ui.four.steps,
  215. .ui.five.steps,
  216. .ui.six.steps,
  217. .ui.seven.steps,
  218. .ui.eight.steps {
  219. display: block;
  220. }
  221. .ui.one.steps > .step {
  222. width: 100%;
  223. }
  224. .ui.two.steps > .step {
  225. width: 50%;
  226. }
  227. .ui.three.steps > .step {
  228. width: 33.333%;
  229. }
  230. .ui.four.steps > .step {
  231. width: 25%;
  232. }
  233. .ui.five.steps > .step {
  234. width: 20%;
  235. }
  236. .ui.six.steps > .step {
  237. width: 16.666%;
  238. }
  239. .ui.seven.steps > .step {
  240. width: 14.285%;
  241. }
  242. .ui.eight.steps > .step {
  243. width: 12.500%;
  244. }
  245. /*******************************
  246. Sizes
  247. *******************************/
  248. .ui.small.step,
  249. .ui.small.steps .step {
  250. font-size: 0.8rem;
  251. }
  252. .ui.step,
  253. .ui.steps .step {
  254. font-size: 1rem;
  255. }
  256. .ui.large.step,
  257. .ui.large.steps .step {
  258. font-size: 1.25rem;
  259. }