_counters.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /* Counter style 03 */
  2. .counter-style-03 {
  3. .feature-box {
  4. i{
  5. @include prefix(transition, 0.4s, webkit);
  6. }
  7. &:hover {
  8. i{
  9. @include prefix(transform, translateY(-7px), webkit);
  10. }
  11. }
  12. }
  13. }
  14. /* Counter style 04 */
  15. .counter-style-04 {
  16. .vertical-counter {
  17. &:after {
  18. content: attr(data-text);
  19. display: inline-block;
  20. margin-left: 3px;
  21. word-break: normal;
  22. }
  23. }
  24. }
  25. /* Counter style 06 */
  26. .counter-style-06 {
  27. .feature-box-content {
  28. .counter-title {
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. width: 100%;
  33. @include prefix(transform, translate(-50%, -50%), webkit);
  34. }
  35. &:after {
  36. content: '';
  37. display: block;
  38. height: 40%;
  39. right:0;
  40. top:50%;
  41. width: 1px;
  42. position: absolute;
  43. @include prefix(transform, translateY(-50%), webkit);
  44. background-color: var(--extra-medium-gray);
  45. }
  46. }
  47. .feature-box {
  48. &:last-child {
  49. .feature-box-content {
  50. &:after {
  51. display:none;
  52. }
  53. }
  54. }
  55. }
  56. }
  57. /* Counter style 07 */
  58. .counter-style-07 {
  59. .vertical-counter-number {
  60. z-index: 1;
  61. }
  62. }
  63. /* Vertical counter */
  64. .vertical-counter-number {
  65. overflow: hidden;
  66. width: 100%;
  67. height: auto;
  68. ul {
  69. text-align: center;
  70. margin: 0;
  71. padding: 0;
  72. list-style: none;
  73. will-change: transform;
  74. @include prefix(transform, translateY(0), webkit);
  75. }
  76. }