_base.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. @charset "UTF-8";
  2. @import "compass/css3/border-radius";
  3. @import "compass/css3/box";
  4. @import "compass/css3/box-shadow";
  5. @import "compass/css3/box-sizing";
  6. @import "compass/css3/images";
  7. @import "compass/css3/text-shadow";
  8. @import "compass/css3/background-size";
  9. @import "compass/css3/transform";
  10. @import "compass/css3/transition";
  11. @import "variables";
  12. @mixin font-smoothing($val: antialiased) {
  13. -webkit-font-smoothing: $val;
  14. -moz-font-smoothing: $val;
  15. -ms-font-smoothing: $val;
  16. -o-font-smoothing: $val;
  17. }
  18. @mixin flexbox {
  19. display: -webkit-box !important;
  20. display: -moz-box !important;
  21. display: -ms-box !important;
  22. display: -o-box !important;
  23. display: box !important;
  24. }
  25. @mixin flex-center-center {
  26. @include box-orient(vertical);
  27. @include box-align(center);
  28. @include box-pack(center);
  29. }
  30. @mixin flex-left-center {
  31. @include box-orient(vertical);
  32. @include box-align(left);
  33. @include box-pack(center);
  34. }
  35. @mixin flex-right-center {
  36. @include box-orient(vertical);
  37. @include box-align(end);
  38. @include box-pack(center);
  39. }
  40. /**
  41. * Base SlideDeck Styles
  42. */
  43. html {
  44. height: 100%;
  45. overflow: hidden;
  46. }
  47. body {
  48. margin: 0;
  49. padding: 0;
  50. opacity: 0;
  51. height: 100%;
  52. min-height: 740px;
  53. width: 100%;
  54. overflow: hidden;
  55. color: #fff;
  56. @include font-smoothing(antialiased);
  57. @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
  58. &.loaded {
  59. opacity: 1 !important;
  60. }
  61. }
  62. input, button {
  63. vertical-align: middle;
  64. }
  65. slides > slide[hidden] {
  66. display: none !important;
  67. }
  68. slides {
  69. width: 100%;
  70. height: 100%;
  71. position: absolute;
  72. left: 0;
  73. top: 0;
  74. @include transform(translate3d(0, 0, 0));
  75. @include perspective(1000);
  76. @include transform-style(preserve-3d);
  77. @include transition(opacity 800ms ease-in 100ms); // Add small delay to prevent jank.
  78. }
  79. slides > slide {
  80. display: block;
  81. position: absolute;
  82. overflow: hidden;
  83. left: 50%;
  84. top: 50%;
  85. @include box-sizing(border-box);
  86. }
  87. /* Slide styles */
  88. /*article.fill iframe {
  89. position: absolute;
  90. left: 0;
  91. top: 0;
  92. width: 100%;
  93. height: 100%;
  94. border: 0;
  95. margin: 0;
  96. @include border-radius(10px);
  97. z-index: -1;
  98. }
  99. slide.fill {
  100. background-repeat: no-repeat;
  101. @include background-size(cover);
  102. }
  103. slide.fill img {
  104. position: absolute;
  105. left: 0;
  106. top: 0;
  107. min-width: 100%;
  108. min-height: 100%;
  109. z-index: -1;
  110. }
  111. */