base.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. //
  2. // Base styles
  3. // --------------------------------------------------
  4. // Use box sizing on all the things!
  5. * {
  6. -webkit-box-sizing: border-box;
  7. -moz-box-sizing: border-box;
  8. box-sizing: border-box;
  9. }
  10. // We fix position the body and scroll `.content`.
  11. body {
  12. position: fixed;
  13. top: 0;
  14. right: 0;
  15. bottom: 0;
  16. left: 0;
  17. font-family: $font-family-default;
  18. font-size: $font-size-default;
  19. line-height: $line-height-default;
  20. color: #000;
  21. background-color: #fff;
  22. }
  23. // Universal link styling
  24. a {
  25. color: $primary-color;
  26. text-decoration: none;
  27. -webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.
  28. &:active {
  29. color: darken($primary-color, 10%);
  30. }
  31. }
  32. // Wrapper to be used around all content not in .bar-title and .bar-tab
  33. .content {
  34. position: absolute;
  35. top: 0;
  36. right: 0;
  37. bottom: 0;
  38. left: 0;
  39. overflow: auto;
  40. background-color: #fff;
  41. -webkit-overflow-scrolling: touch;
  42. }
  43. // Hack to force all relatively and absolutely positioned elements still render while scrolling
  44. // Note: This is a bug for "-webkit-overflow-scrolling: touch"
  45. .content > * {
  46. @include transform(translateZ(0));
  47. }
  48. // Pad top/bottom of content so it doesn't hide behind bars.
  49. // Note: For these to work, content must come after both bars in the markup
  50. .bar-nav ~ .content {
  51. padding-top: $bar-base-height;
  52. }
  53. .bar-header-secondary ~ .content {
  54. padding-top: ($bar-base-height*2);
  55. }
  56. // Footer bar padding
  57. .bar-footer ~ .content {
  58. padding-bottom: $bar-base-height;
  59. }
  60. .bar-footer-secondary ~ .content {
  61. padding-bottom: ($bar-base-height*2);
  62. }
  63. // Tab bar padding
  64. .bar-tab ~ .content {
  65. padding-bottom: $bar-tab-height;
  66. }
  67. .bar-footer-secondary-tab ~ .content {
  68. padding-bottom: ($bar-tab-height+$bar-base-height);
  69. }
  70. // Utility classes
  71. .content-padded {
  72. margin: $bar-side-spacing;
  73. }
  74. .pull-left {
  75. float: left;
  76. }
  77. .pull-right {
  78. float: right;
  79. }
  80. .clearfix {
  81. @include clearfix();
  82. }