idealsteps.styl 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. // Ideal Steps
  2. //---------------------------------------
  3. .idealsteps-step
  4. clearfix()
  5. .idealsteps-nav
  6. ui()
  7. overflow: hidden
  8. margin-bottom: 2em
  9. ul
  10. reset-box-model()
  11. list-style: none
  12. li
  13. float: left
  14. a
  15. position: relative
  16. float: left
  17. padding: 0 1.5em 0 2.75em
  18. height: 3.5em
  19. line-height: 3.5em
  20. text-decoration: none
  21. color: darken(ui-element, 50)
  22. background: ui-element
  23. transition: padding .2s ease-in-out
  24. &:focus
  25. outline: 0 // Firefox
  26. &:hover
  27. background: lighten(ui-element, 5)
  28. &:after
  29. border-left-color: lighten(ui-element, 5)
  30. &:after, &:before
  31. content: ""
  32. position: absolute
  33. z-index: 1
  34. top: 0
  35. right: -2em
  36. margin-right: 0
  37. margin-top: -.125em
  38. border-width: 2em 1em
  39. border-style: solid
  40. border-color: transparent
  41. border-left-color: ui-element
  42. &:before
  43. margin-right: -1px
  44. border-left-color: darken(ui-element, 20)
  45. li:first-child a
  46. padding-left: 1.75em
  47. li.idealsteps-step-active
  48. a
  49. padding-right: 3.5em
  50. background: white
  51. color: valid
  52. font-weight: bold
  53. &:after
  54. border-left-color: white
  55. .counter
  56. opacity: 1
  57. .counter
  58. opacity: 0
  59. position: absolute
  60. top: 50%
  61. right: 1em
  62. height: 20px
  63. width: 20px
  64. margin-top: -.75em
  65. line-height: 20px !important
  66. text-align: center
  67. line-height: 1
  68. color: invalid
  69. border: 1px solid invalid
  70. border-radius: 10em
  71. transition: opacity .2s ease-in-out
  72. &.zero
  73. color: valid
  74. border-color: valid