a zip code crypto-currency system good for red ONLY

app.scss 8.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. // Globals
  2. // --------------------------------------------------
  3. @import "../../themes/ionic.globals";
  4. @import "../../themes/ionic.mixins";
  5. // Normalize
  6. // --------------------------------------------------
  7. @import "../../themes/normalize";
  8. // Util
  9. // --------------------------------------------------
  10. @import "../../themes/util";
  11. // App
  12. // --------------------------------------------------
  13. // All font sizes use rem units
  14. // By default, 1rem equals 10px. For example, 1.4rem === 14px
  15. // $font-size-root value, which is on the <html> element
  16. // is what can scale all fonts
  17. /// @prop - Font size of the root html
  18. $font-size-root: 62.5% !default;
  19. /// @prop - Font weight of all headings
  20. $headings-font-weight: 500 !default;
  21. /// @prop - Line height of all headings
  22. $headings-line-height: 1.2 !default;
  23. /// @prop - Font size of heading level 1
  24. $h1-font-size: 2.6rem !default;
  25. /// @prop - Font size of heading level 2
  26. $h2-font-size: 2.4rem !default;
  27. /// @prop - Font size of heading level 3
  28. $h3-font-size: 2.2rem !default;
  29. /// @prop - Font size of heading level 4
  30. $h4-font-size: 2rem !default;
  31. /// @prop - Font size of heading level 5
  32. $h5-font-size: 1.8rem !default;
  33. /// @prop - Font size of heading level 6
  34. $h6-font-size: 1.6rem !default;
  35. // Responsive Utilities
  36. // --------------------------------------------------
  37. /// @prop - Whether to include all of the responsive utility attributes
  38. $include-responsive-utilities: true !default;
  39. /// @prop - Whether to include all of the responsive text alignment attributes
  40. $include-text-alignment-utilities: $include-responsive-utilities !default;
  41. /// @prop - Whether to include all of the responsive text transform attributes
  42. $include-text-transform-utilities: $include-responsive-utilities !default;
  43. /// @prop - Whether to include all of the responsive float attributes
  44. $include-float-element-utilities: $include-responsive-utilities !default;
  45. // Screen Breakpoints
  46. // --------------------------------------------------
  47. /// @prop - The minimum dimensions at which your layout will change,
  48. /// adapting to different screen sizes, for use in media queries
  49. $screen-breakpoints: (
  50. xs: 0,
  51. sm: 576px,
  52. md: 768px,
  53. lg: 992px,
  54. xl: 1200px
  55. ) !default;
  56. // App Structure
  57. // --------------------------------------------------
  58. * {
  59. box-sizing: border-box;
  60. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  61. -webkit-tap-highlight-color: transparent;
  62. -webkit-touch-callout: none;
  63. }
  64. html {
  65. width: 100%;
  66. height: 100%;
  67. font-size: $font-size-root;
  68. text-size-adjust: 100%;
  69. }
  70. body {
  71. @include margin(0);
  72. @include padding(0);
  73. position: fixed;
  74. overflow: hidden;
  75. width: 100%;
  76. max-width: 100%;
  77. height: 100%;
  78. max-height: 100%;
  79. -webkit-font-smoothing: antialiased;
  80. font-smoothing: antialiased;
  81. text-rendering: optimizeLegibility;
  82. -webkit-user-drag: none;
  83. -ms-content-zooming: none;
  84. touch-action: manipulation;
  85. word-wrap: break-word;
  86. text-size-adjust: none;
  87. user-select: none;
  88. }
  89. // App Typography
  90. // --------------------------------------------------
  91. a {
  92. background-color: transparent;
  93. }
  94. .enable-hover a:hover {
  95. opacity: .7;
  96. }
  97. h1,
  98. h2,
  99. h3,
  100. h4,
  101. h5,
  102. h6 {
  103. @include margin(1.6rem, null, 1rem, null);
  104. font-weight: $headings-font-weight;
  105. line-height: $headings-line-height;
  106. }
  107. [padding] {
  108. h1,
  109. h2,
  110. h3,
  111. h4,
  112. h5,
  113. h6 {
  114. &:first-child {
  115. @include margin(-.3rem, null, null, null);
  116. }
  117. }
  118. }
  119. h1 + h2,
  120. h1 + h3,
  121. h2 + h3 {
  122. @include margin(-.3rem, null, null, null);
  123. }
  124. h1 {
  125. @include margin(2rem, null, null, null);
  126. font-size: $h1-font-size;
  127. }
  128. h2 {
  129. @include margin(1.8rem, null, null, null);
  130. font-size: $h2-font-size;
  131. }
  132. h3 {
  133. font-size: $h3-font-size;
  134. }
  135. h4 {
  136. font-size: $h4-font-size;
  137. }
  138. h5 {
  139. font-size: $h5-font-size;
  140. }
  141. h6 {
  142. font-size: $h6-font-size;
  143. }
  144. small {
  145. font-size: 75%;
  146. }
  147. sub,
  148. sup {
  149. position: relative;
  150. font-size: 75%;
  151. line-height: 0;
  152. vertical-align: baseline;
  153. }
  154. sup {
  155. top: -.5em;
  156. }
  157. sub {
  158. bottom: -.25em;
  159. }
  160. // Nav Container Structure
  161. // --------------------------------------------------
  162. ion-app,
  163. ion-nav,
  164. ion-tab,
  165. ion-tabs,
  166. .app-root {
  167. @include position(0, null, null, 0);
  168. position: absolute;
  169. z-index: $z-index-page-container;
  170. display: block;
  171. width: 100%;
  172. height: 100%;
  173. }
  174. ion-nav,
  175. ion-tab,
  176. ion-tabs {
  177. overflow: hidden;
  178. }
  179. ion-tab {
  180. display: none;
  181. }
  182. ion-tab.show-tab {
  183. display: block;
  184. }
  185. ion-app,
  186. ion-nav,
  187. ion-tab,
  188. ion-tabs,
  189. .app-root,
  190. .ion-page {
  191. contain: strict;
  192. }
  193. // Page Container Structure
  194. // --------------------------------------------------
  195. .ion-page {
  196. @include position(0, null, null, 0);
  197. position: absolute;
  198. display: block;
  199. width: 100%;
  200. height: 100%;
  201. // do not show, but still render so we can get dimensions
  202. opacity: 0;
  203. }
  204. .ion-page.show-page {
  205. // show the page now that it's ready
  206. opacity: 1;
  207. }
  208. // Toolbar Container Structure
  209. // --------------------------------------------------
  210. ion-header {
  211. @include position(0, null, null, 0);
  212. position: absolute;
  213. z-index: $z-index-toolbar;
  214. display: block;
  215. width: 100%;
  216. }
  217. ion-footer {
  218. @include position(null, null, 0, 0);
  219. position: absolute;
  220. z-index: $z-index-toolbar;
  221. display: block;
  222. width: 100%;
  223. }
  224. // Misc
  225. // --------------------------------------------------
  226. [app-viewport],
  227. [overlay-portal],
  228. [nav-viewport],
  229. [tab-portal],
  230. .nav-decor {
  231. display: none;
  232. }
  233. // Text Alignment
  234. // --------------------------------------------------
  235. @if ($include-text-alignment-utilities == true) {
  236. // Creates text alignment attributes based on screen size
  237. @each $breakpoint in map-keys($screen-breakpoints) {
  238. $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
  239. @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
  240. // Provide `[text-{bp}]` attributes for aligning the text based
  241. // on the breakpoint
  242. [text#{$infix}-center] {
  243. @include text-align(center, !important);
  244. }
  245. [text#{$infix}-justify] {
  246. @include text-align(justify, !important);
  247. }
  248. [text#{$infix}-start] {
  249. @include text-align(start, !important);
  250. }
  251. [text#{$infix}-end] {
  252. @include text-align(end, !important);
  253. }
  254. [text#{$infix}-left] {
  255. @include text-align(left, !important);
  256. }
  257. [text#{$infix}-right] {
  258. @include text-align(right, !important);
  259. }
  260. [text#{$infix}-nowrap] {
  261. // scss-lint:disable ImportantRule
  262. white-space: nowrap !important;
  263. }
  264. [text#{$infix}-wrap] {
  265. // scss-lint:disable ImportantRule
  266. white-space: normal !important;
  267. }
  268. }
  269. }
  270. }
  271. // Text Transformation
  272. // --------------------------------------------------
  273. @if ($include-text-transform-utilities == true) {
  274. // Creates text transform attributes based on screen size
  275. @each $breakpoint in map-keys($screen-breakpoints) {
  276. $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
  277. @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
  278. // Provide `[text-{bp}]` attributes for transforming the text based
  279. // on the breakpoint
  280. [text#{$infix}-uppercase] {
  281. // scss-lint:disable ImportantRule
  282. text-transform: uppercase !important;
  283. }
  284. [text#{$infix}-lowercase] {
  285. // scss-lint:disable ImportantRule
  286. text-transform: lowercase !important;
  287. }
  288. [text#{$infix}-capitalize] {
  289. // scss-lint:disable ImportantRule
  290. text-transform: capitalize !important;
  291. }
  292. }
  293. }
  294. }
  295. // Float Elements
  296. // --------------------------------------------------
  297. @if ($include-float-element-utilities == true) {
  298. // Creates text transform attributes based on screen size
  299. @each $breakpoint in map-keys($screen-breakpoints) {
  300. $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
  301. @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
  302. // Provide `[float-{bp}]` attributes for floating the element based
  303. // on the breakpoint
  304. [float#{$infix}-left] {
  305. @include float(left, !important);
  306. }
  307. [float#{$infix}-right] {
  308. @include float(right, !important);
  309. }
  310. [float#{$infix}-start] {
  311. @include float(start, !important);
  312. }
  313. [float#{$infix}-end] {
  314. @include float(end, !important);
  315. }
  316. }
  317. }
  318. }