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.

139 lines
4.5 KiB

2 years ago
  1. /*!
  2. * Waves v0.6.5
  3. * http://fian.my.id/Waves
  4. *
  5. * Copyright 2014 Alfiana E. Sibuea and other contributors
  6. * Released under the MIT license
  7. * https://github.com/fians/Waves/blob/master/LICENSE
  8. */
  9. .waves-effect {
  10. position: relative;
  11. cursor: pointer;
  12. display: inline-block;
  13. overflow: hidden;
  14. -webkit-user-select: none;
  15. -moz-user-select: none;
  16. -ms-user-select: none;
  17. user-select: none;
  18. -webkit-tap-highlight-color: transparent;
  19. -webkit-transition: all 0.3s ease-out;
  20. -moz-transition: all 0.3s ease-out;
  21. -o-transition: all 0.3s ease-out;
  22. transition: all 0.3s ease-out;
  23. }
  24. .waves-effect .waves-ripple {
  25. position: absolute;
  26. border-radius: 50%;
  27. width: 100px;
  28. height: 100px;
  29. margin-top: -50px;
  30. margin-left: -50px;
  31. opacity: 0;
  32. background: rgba(0, 0, 0, 0.2);
  33. background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  34. background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  35. background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  36. background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  37. -webkit-transition: all 0.5s ease-out;
  38. -moz-transition: all 0.5s ease-out;
  39. -o-transition: all 0.5s ease-out;
  40. transition: all 0.5s ease-out;
  41. -webkit-transition-property: -webkit-transform, opacity;
  42. -moz-transition-property: -moz-transform, opacity;
  43. -o-transition-property: -o-transform, opacity;
  44. transition-property: transform, opacity;
  45. -webkit-transform: scale(0);
  46. -moz-transform: scale(0);
  47. -ms-transform: scale(0);
  48. -o-transform: scale(0);
  49. transform: scale(0);
  50. pointer-events: none;
  51. }
  52. .waves-effect.waves-light .waves-ripple {
  53. background: rgba(255, 255, 255, 0.4);
  54. background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  55. background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  56. background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  57. background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  58. }
  59. .waves-effect.waves-classic .waves-ripple {
  60. background: rgba(0, 0, 0, 0.2);
  61. }
  62. .waves-effect.waves-classic.waves-light .waves-ripple {
  63. background: rgba(255, 255, 255, 0.4);
  64. }
  65. .waves-notransition {
  66. -webkit-transition: none !important;
  67. -moz-transition: none !important;
  68. -o-transition: none !important;
  69. transition: none !important;
  70. }
  71. .waves-button,
  72. .waves-circle {
  73. -webkit-transform: translateZ(0);
  74. -moz-transform: translateZ(0);
  75. -ms-transform: translateZ(0);
  76. -o-transform: translateZ(0);
  77. transform: translateZ(0);
  78. -webkit-mask-image: -webkit-radial-gradient(circle, #ffffff 100%, #000000 100%);
  79. }
  80. .waves-button,
  81. .waves-button:hover,
  82. .waves-button:visited,
  83. .waves-button-input {
  84. white-space: nowrap;
  85. vertical-align: middle;
  86. cursor: pointer;
  87. border: none;
  88. outline: none;
  89. color: inherit;
  90. background-color: rgba(0, 0, 0, 0);
  91. font-size: 1em;
  92. line-height: 1em;
  93. text-align: center;
  94. text-decoration: none;
  95. z-index: 1;
  96. }
  97. .waves-button {
  98. padding: 0.85em 1.1em;
  99. border-radius: 0.2em;
  100. }
  101. .waves-button-input {
  102. margin: 0;
  103. padding: 0.85em 1.1em;
  104. }
  105. .waves-input-wrapper {
  106. border-radius: 0.2em;
  107. vertical-align: bottom;
  108. }
  109. .waves-input-wrapper.waves-button {
  110. padding: 0;
  111. }
  112. .waves-input-wrapper .waves-button-input {
  113. position: relative;
  114. top: 0;
  115. left: 0;
  116. z-index: 1;
  117. }
  118. .waves-circle {
  119. text-align: center;
  120. width: 2.5em;
  121. height: 2.5em;
  122. line-height: 2.5em;
  123. border-radius: 50%;
  124. }
  125. .waves-float {
  126. -webkit-mask-image: none;
  127. -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  128. box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  129. }
  130. .waves-float:active {
  131. -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  132. box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  133. }
  134. .waves-block {
  135. display: block;
  136. }
  137. /* Firefox Bug: link not triggered */
  138. a.waves-effect .waves-ripple {
  139. z-index: -1;
  140. }