demos.shared.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. /*
  2. Scrollbar
  3. */
  4. body.has-scrollbar .scroll-content {
  5. margin-right: -15px;
  6. }
  7. body.has-scrollbar ion-menu .scroll-content {
  8. margin-right: 0;
  9. }
  10. /*
  11. Popover
  12. */
  13. page-api-radio-popover ion-row,
  14. page-api-radio-popover ion-col {
  15. padding: 0;
  16. }
  17. .popover-text-button {
  18. padding-left: 0;
  19. text-align: center;
  20. min-height: 20px;
  21. line-height: 18px;
  22. }
  23. .popover-text-button .item-inner {
  24. padding-right: 0;
  25. }
  26. .popover-text-smaller {
  27. font-size: 12px;
  28. }
  29. .popover-text-larger {
  30. font-size: 16px;
  31. }
  32. .popover-row-dots {
  33. text-align: center;
  34. }
  35. .popover-dot {
  36. height: 30px;
  37. width: 30px;
  38. border-radius: 50%;
  39. margin: 10px auto;
  40. position: relative;
  41. }
  42. .popover-dot-white {
  43. background-color: rgb(255,255,255);
  44. }
  45. .popover-dot-tan {
  46. background-color: rgb(249,241,228);
  47. }
  48. .popover-dot-grey {
  49. background-color: rgb(76,75,80);
  50. }
  51. .popover-dot-black {
  52. background-color: rgb(0,0,0);
  53. }
  54. .ios .popover-dot.selected,
  55. .md .popover-dot.selected,
  56. .wp .popover-dot.selected {
  57. border-width: 2px;
  58. border-color: #327eff;
  59. }
  60. .popover-text-athelas {
  61. font-family: "Athelas";
  62. }
  63. .popover-text-charter {
  64. font-family: "Charter";
  65. }
  66. .popover-text-iowan {
  67. font-family: "Iowan";
  68. }
  69. .popover-text-palatino {
  70. font-family: "Palatino";
  71. }
  72. .popover-text-san-francisco {
  73. font-family: "San Francisco";
  74. }
  75. .popover-text-seravek {
  76. font-family: "Seravek";
  77. }
  78. .popover-text-times-new-roman {
  79. font-family: "Times New Roman";
  80. }
  81. /*
  82. iOS Popover
  83. */
  84. .ios .popover-text-smaller {
  85. border-right: 1px solid #c8c7cc;
  86. }
  87. .ios .popover-row-dots {
  88. border-bottom: 1px solid #c8c7cc;
  89. }
  90. .ios .popover-dot {
  91. border: 1px solid #c8c7cc;
  92. }
  93. .hairlines .popover-text-smaller,
  94. .hairlines .popover-row-dots,
  95. .hairlines .popover-dot {
  96. border-width: 0.55px;
  97. }
  98. /*
  99. Material Design Popover
  100. */
  101. .md .popover-text-smaller {
  102. border-right: 1px solid #dedede;
  103. }
  104. .md .popover-row-dots {
  105. border-bottom: 1px solid #dedede;
  106. }
  107. .md .popover-dot {
  108. border: 1px solid #dedede;
  109. }
  110. /*
  111. Windows Popover
  112. */
  113. .wp .popover-dot {
  114. border: 2px solid #ccc;
  115. }
  116. /*
  117. Loading Custom Component
  118. */
  119. .loading-custom-spinner-container {
  120. position: relative;
  121. display: inline-block;
  122. box-sizing: border-box;
  123. width: 100%;
  124. margin-bottom: 20px;
  125. }
  126. .loading-custom-spinner-box {
  127. margin: 0 auto;
  128. position: relative;
  129. box-sizing: border-box;
  130. border: 4px solid #000;
  131. width: 60px;
  132. height: 60px;
  133. animation: spin 3s infinite linear;
  134. }
  135. .loading-custom-spinner-box:before {
  136. content: '';
  137. position: absolute;
  138. top: 50%;
  139. left: 50%;
  140. transform: translate(-50%, -50%);
  141. box-sizing: border-box;
  142. border: 4px solid #000;
  143. width: 40px;
  144. height: 40px;
  145. animation: pulse 1.5s infinite ease;
  146. }
  147. /*
  148. Windows Loading Custom Component
  149. */
  150. .wp .loading-custom-spinner-box,
  151. .wp .loading-custom-spinner-box:before {
  152. border-color: #fff;
  153. }
  154. /*
  155. Loading Custom Component Keyframes
  156. */
  157. @-webkit-keyframes pulse {
  158. 50% {
  159. border-width: 20px;
  160. }
  161. }
  162. @keyframes pulse {
  163. 50% {
  164. border-width: 20px;
  165. }
  166. }
  167. @-webkit-keyframes spin {
  168. 100% {
  169. -webkit-transform: rotate(360deg);
  170. transform: rotate(360deg);
  171. }
  172. }
  173. @keyframes spin {
  174. 100% {
  175. -webkit-transform: rotate(360deg);
  176. transform: rotate(360deg);
  177. }
  178. }
  179. /*
  180. Tabs Only
  181. */
  182. ion-tabs[tabs-only]:first-child {
  183. margin-top: 20px;
  184. }
  185. ion-tabs[tabs-only] {
  186. margin-bottom: 20px;
  187. contain: none;
  188. }
  189. ion-tabs[tabs-only],
  190. ion-tabs[tabs-only] .tabbar {
  191. position: relative;
  192. top: auto;
  193. height: auto;
  194. visibility: visible;
  195. opacity: 1;
  196. }