_sliding-box.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. @include respond-to('laptop') {
  2. .sliding-box {
  3. .sliding-box-item {
  4. width: 33.33% !important;
  5. margin-left: 0;
  6. margin-right: 0;
  7. padding: 0 15px;
  8. box-shadow: none;
  9. .sliding-box-content {
  10. width: 100% !important;
  11. left: 0 !important;
  12. position: relative;
  13. height: auto;
  14. }
  15. &.active {
  16. .sliding-box-content {
  17. border-radius: 0;
  18. }
  19. .sliding-box-img {
  20. border-radius: 0;
  21. }
  22. }
  23. }
  24. .sliding-box-img {
  25. width: 100% !important;
  26. border-radius: 0 !important;
  27. }
  28. }
  29. .sliding-box-style-01 {
  30. .sliding-box-item {
  31. .sliding-box-content {
  32. &:after {
  33. top: 0;
  34. opacity: 1;
  35. right: 50%;
  36. margin-top: -23px;
  37. border: solid transparent;
  38. border-bottom-color: var(--white);
  39. border-width: 12px;
  40. margin-right: -10px;
  41. }
  42. }
  43. }
  44. }
  45. .sliding-box-style-02 {
  46. .sliding-box-item {
  47. &.active {
  48. .content-hover {
  49. animation: fade 0s;
  50. }
  51. }
  52. }
  53. }
  54. }
  55. @include respond-to('tablet') {
  56. .sliding-box {
  57. justify-content: center;
  58. .sliding-box-item {
  59. width: 50% !important;
  60. }
  61. }
  62. }
  63. @include respond-to('phone-landscape') {
  64. .sliding-box {
  65. .sliding-box-item {
  66. width: 100% !important;
  67. padding:0;
  68. }
  69. }
  70. .sliding-box-style-03 {
  71. .number {
  72. bottom: -22px;
  73. }
  74. .sliding-box-item {
  75. padding-right: 15px;
  76. padding-left: 15px;
  77. }
  78. }
  79. }