e2e.shared.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. .snapshot body {
  2. /* crop an exact size */
  3. max-height: 700px !important;
  4. }
  5. .snapshot .scroll-content {
  6. /* disable scrollbars */
  7. overflow: hidden !important;
  8. }
  9. .snapshot ::-webkit-scrollbar {
  10. display: none;
  11. }
  12. .snapshot *,
  13. .snapshot *:before,
  14. .snapshot *:after {
  15. /* do not allow css animations during snapshot */
  16. -webkit-transition-duration: 0ms !important;
  17. transition-duration: 0ms !important;
  18. }
  19. .snapshot .button-effect {
  20. display: none !important;
  21. }
  22. /* hack to create tall scrollable areas for testing using <div f></div> */
  23. div[f] {
  24. display: block;
  25. margin: 15px auto;
  26. max-width: 150px;
  27. height: 150px;
  28. background: blue;
  29. }
  30. div[f]:last-of-type {
  31. background: red;
  32. }
  33. ion-tab:nth-of-type(2) div[f],
  34. .green div[f] {
  35. background: green;
  36. max-width: 250px;
  37. height: 100px;
  38. }
  39. ion-tab:nth-of-type(3) div[f],
  40. .yellow div[f] {
  41. background: yellow;
  42. width: 100px;
  43. height: 50px;
  44. }
  45. /********************
  46. e2e-stacked-tabbars
  47. *********************/
  48. .e2e-stacked-tabbars ion-tabs {
  49. margin-bottom: 20px;
  50. }
  51. .e2e-stacked-tabbars ion-tabs,
  52. .e2e-stacked-tabbars ion-tabs .tabbar {
  53. position: relative;
  54. top: auto;
  55. height: auto;
  56. visibility: visible;
  57. opacity: 1;
  58. }
  59. /********************
  60. e2e-loading
  61. *********************/
  62. .e2e-loading {
  63. position: absolute;
  64. width: 100%;
  65. height: 100%;
  66. }
  67. .e2e-loading .fixed-spinner svg {
  68. animation: none;
  69. }
  70. .e2e-loading .custom-spinner-container {
  71. position: relative;
  72. display: inline-block;
  73. box-sizing: border-box;
  74. }
  75. .e2e-loading .custom-spinner-box {
  76. position: relative;
  77. box-sizing: border-box;
  78. border: 4px solid #000;
  79. width: 60px;
  80. height: 60px;
  81. animation: spin 3s infinite linear;
  82. }
  83. .e2e-loading .custom-spinner-box:before {
  84. content: '';
  85. position: absolute;
  86. top: 50%;
  87. left: 50%;
  88. transform: translate(-50%, -50%);
  89. box-sizing: border-box;
  90. border: 4px solid #000;
  91. width: 40px;
  92. height: 40px;
  93. animation: pulse 1.5s infinite ease;
  94. }
  95. .e2e-loading .wp .custom-spinner-box,
  96. .e2e-loading .wp .custom-spinner-box:before {
  97. border-color: #fff;
  98. }
  99. @-webkit-keyframes pulse {
  100. 50% {
  101. border-width: 20px;
  102. }
  103. }
  104. @keyframes pulse {
  105. 50% {
  106. border-width: 20px;
  107. }
  108. }
  109. @-webkit-keyframes spin {
  110. 100% {
  111. -webkit-transform: rotate(360deg);
  112. transform: rotate(360deg);
  113. }
  114. }
  115. @keyframes spin {
  116. 100% {
  117. -webkit-transform: rotate(360deg);
  118. transform: rotate(360deg);
  119. }
  120. }
  121. /********************
  122. e2e-popover
  123. *********************/
  124. e2e-popover-basic .text-to-change div {
  125. margin: 10px auto;
  126. }
  127. e2e-popover-basic ion-row,
  128. e2e-popover-basic ion-col {
  129. padding: 0;
  130. }
  131. e2e-popover-basic .text-button {
  132. padding-left: 0;
  133. text-align: center;
  134. min-height: 20px;
  135. line-height: 18px;
  136. }
  137. e2e-popover-basic .text-button .item-inner {
  138. padding-right: 0;
  139. }
  140. e2e-popover-basic .text-smaller {
  141. font-size: 12px;
  142. }
  143. .popover-ios e2e-popover-basic .text-smaller {
  144. border-right: 1px solid #c8c7cc;
  145. }
  146. .popover-md e2e-popover-basic .text-smaller {
  147. border-right: 1px solid #dedede;
  148. }
  149. e2e-popover-basic .text-larger {
  150. font-size: 16px;
  151. }
  152. e2e-popover-basic .row-dots {
  153. text-align: center;
  154. }
  155. .popover-ios e2e-popover-basic .row-dots {
  156. border-bottom: 1px solid #c8c7cc;
  157. }
  158. .popover-md e2e-popover-basic .row-dots {
  159. border-bottom: 1px solid #dedede;
  160. }
  161. e2e-popover-basic .dot-ios {
  162. border: 1px solid #c8c7cc;
  163. }
  164. e2e-popover-basic .dot-md {
  165. border: 1px solid #dedede;
  166. }
  167. e2e-popover-basic .dot-wp {
  168. border: 2px solid #ccc;
  169. }
  170. .hairlines e2e-popover-basic .text-smaller,
  171. .hairlines e2e-popover-basic .row-dots,
  172. .hairlines e2e-popover-basic .dot {
  173. border-width: 0.55px;
  174. }
  175. e2e-popover-basic .row-dots .dot {
  176. height: 30px;
  177. width: 30px;
  178. border-radius: 50%;
  179. margin: 10px auto;
  180. position: relative;
  181. }
  182. e2e-popover-basic .dot-white {
  183. background-color: rgb(255,255,255);
  184. }
  185. e2e-popover-basic .dot-tan {
  186. background-color: rgb(249,241,228);
  187. }
  188. e2e-popover-basic .dot-grey {
  189. background-color: rgb(76,75,80);
  190. }
  191. e2e-popover-basic .dot-black {
  192. background-color: rgb(0,0,0);
  193. }
  194. e2e-popover-basic .dot.selected {
  195. border-width: 2px;
  196. border-color: #327eff;
  197. }
  198. e2e-popover-basic .text-athelas {
  199. font-family: "Athelas";
  200. }
  201. e2e-popover-basic .text-charter {
  202. font-family: "Charter";
  203. }
  204. e2e-popover-basic .text-iowan {
  205. font-family: "Iowan";
  206. }
  207. e2e-popover-basic .text-palatino {
  208. font-family: "Palatino";
  209. }
  210. e2e-popover-basic .text-san-francisco {
  211. font-family: "San Francisco";
  212. }
  213. e2e-popover-basic .text-seravek {
  214. font-family: "Seravek";
  215. }
  216. e2e-popover-basic .text-times-new-roman {
  217. font-family: "Times New Roman";
  218. }
  219. .rainbow-content {
  220. background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  221. }