arrow.style.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. /*:root {
  2. --main-color: #EE0033;
  3. --background-color-1: #eef5fb;
  4. --star-color: #ffc911;
  5. }*/
  6. /*:root {
  7. --main-color: #F36F21;
  8. --background-color-1: #eef5fb;
  9. --star-color: #ffc911;
  10. }*/
  11. :root {
  12. --main-color: #FF3211;
  13. --background-color-1: #eef5fb;
  14. --star-color: #ffc911;
  15. }
  16. .arrow {
  17. /* position: absolute;
  18. top: 0px;
  19. right: 25px;
  20. transform: translate(-50%,-50%);*/
  21. /*margin-top: 40px;*/
  22. width: 50px;
  23. padding-left: 20px;
  24. }
  25. .arrow span {
  26. display: block;
  27. width: 15px;
  28. height: 15px;
  29. border-bottom: 5px solid #06A8FF;
  30. border-right: 5px solid #06A8FF;
  31. transform: rotate(45deg);
  32. margin: -10px;
  33. animation: animate 2s infinite;
  34. }
  35. .arrow span:nth-child(2) {
  36. animation-delay: -0.2s;
  37. }
  38. .arrow span:nth-child(3) {
  39. animation-delay: -0.4s;
  40. }
  41. @keyframes animate {
  42. 0% {
  43. opacity: 0;
  44. transform: rotate(45deg) translate(-20px,-20px);
  45. }
  46. 50% {
  47. opacity: 1;
  48. }
  49. 100% {
  50. opacity: 0;
  51. transform: rotate(45deg) translate(20px,20px);
  52. }
  53. }
  54. .arrow-rotate {
  55. transform: rotate(180deg);
  56. right: 30px;
  57. }
  58. .collapsible {
  59. background-color: #fff;
  60. color: #FF3211;
  61. cursor: pointer !important;
  62. padding: 4px 20px !important;
  63. width: 100%;
  64. border: none;
  65. text-align: left;
  66. outline: none !important;
  67. font-size: 24px;
  68. font-weight: bold;
  69. font-family: "Nunito", sans-serif;
  70. }
  71. .collapsible-active, .collapsible:hover {
  72. /*background-color: #555;*/
  73. }
  74. .collapsible:after {
  75. content: url('../img/expand.png');
  76. color: white;
  77. font-weight: bold;
  78. float: right;
  79. margin-left: 5px;
  80. position: relative !important;
  81. padding: 0 !important;
  82. margin: 0 !important;
  83. opacity: 1 !important;
  84. background-color: transparent !important;
  85. }
  86. .collapsible-active:after {
  87. content: url('../img/collapse.png');
  88. position: relative !important;
  89. opacity: 1 !important;
  90. background-color: transparent !important;
  91. }
  92. .collapsible-content {
  93. font-family: "Nunito", sans-serif;
  94. border-bottom: 1px solid #E7E7E7;
  95. padding: 0px 18px;
  96. max-height: 1px;
  97. overflow: hidden;
  98. transition: max-height 0.2s ease-out;
  99. background-color: #fff;
  100. }