sass/tres/base.scss in tres-0.1.2 vs sass/tres/base.scss in tres-0.1.4

@@ -1,131 +1,169 @@
-@import 'font-awesome';
+// Tres base grid and grid related settings
+// ========================================
 
-// Quick FontAwesome fix so icons push the sentence
-// a bit to the right
+@import 'mixins';
+
+// Resets
+
+// Quick FontAwesome fix so icons push the sentence a bit to the right
 [class^="icon-"]:before { margin-right : .5rem }
+input[class^="icon-"] {
+  position: relative;
 
-* { 
-  margin             : 0; 
-  padding            : 0; 
-  outline            : 0; 
-  border             : 0; 
-  -webkit-box-sizing : border-box 
+  &:before {
+    @include translate(0, -50%);
+    position: absolute;
+    top: 50%
+  }
 }
 
-ul    { list-style : none }
+* {
+  margin             : 0;
+  padding            : 0;
+  outline            : 0;
+  border             : 0;
+  -webkit-box-sizing : border-box;
+  box-sizing: border-box;
+}
+
+ul { list-style : none }
 input, button, textarea { font-size : 100% }
 
-html { height : 100%; min-height : 420px; font-size : 62.5%; overflow-x : hidden  }
-html, body { height : 99.9% }
+// ---
+
+$spacing: .5rem;
+
+// Structural settings for getting screens to use the whole vertical space.
+
+html {
+  min-height: 420px;
+  min-width: 100%;
+  font-size : 62.5%;
+}
+html, body { overflow: hidden; width: 100%; height: 100% }
 body {
-  font-size   : 1.5rem;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   line-height : 2.3rem;
-  width       : 100%;
   -webkit-perspective      : 800;
   -webkit-text-size-adjust : none;
   -webkit-transform-style  : preserve-3d;
-  -webkit-user-select      : none;
+  -webkit-user-select      : none
 }
 
+// ---
+
 // A base section unit. Think of this as a "screen".
-body > section {
-  display        : block;
-  position       : absolute;
-  padding        : 1.6rem 0;
+.screen {
+  -webkit-transition      : all 0.25s ease-out;
+  -webkit-transform-style : preserve-3d;
+  -webkit-transform       : translate3d(100%,0%,0);
+  position       : fixed;
   top            : 0;
+  right          : 0;
+  bottom         : 0;
   left           : 0;
-  width          : 100%;
   opacity        : 0;
   overflow       : auto;
-  overflow-x     : hidden;
   pointer-events : none;
-  -webkit-transition      : all 0.25s ease-in-out;
-  -webkit-transform-style : preserve-3d;
-  -webkit-transform       : translate3d(100%,0%,0);
-  &>*:not(header) {
-    margin-left   : 1rem !important;
-    margin-right  : 1rem !important;
-  }
+
   &.current {
     opacity        : 1;
     pointer-events : auto;
     -webkit-transform : translate3d(0%,0%, 0)
   }
+
+  &.modal { z-index: 1000 }
 }
 
-// Floating header, header stuffs
-body > section > header {
+// ---
+
+// Headers
+
+.screen > header {
+  position   : fixed;
+  top        : 0;
+  right      : 0;
+  left       : 0;
   margin     : 0;
   text-align : center;
-  &.fixed {
-    position : fixed;
-    top      : 0;
-    left     : 0;
-    width    : 100%;
-    z-index  : 10000
-  }
-  & + * { margin-top : 4.6rem !important }
+  overflow   : hidden;
+  z-index    : 100;
+
+  & + .content { top : 60px }
+
+  & > * { margin: $spacing*2 0 }
   h1 {
-    font-size   : 1.9rem;
-    margin      : 0.9rem 0;
+    font-size   : 1.6rem;
+    margin      : 1.1rem 0;
     white-space : nowrap
   }
-  a {
-    position        : absolute;
-    font-size       : 1.9rem;
-    margin-top      : 0.9rem;
+  &>a, &>button {
+    position: absolute;
+    top             : 0;
+    width           : 2.9rem;
+    font-size       : 2.1rem;
     text-decoration : none;
-    &.left  { left  : 1.6rem }
-    &.right { right : 1.6rem }
+
+
+    &.left  { left: $spacing }
+    &.right { right: $spacing }
   }
+  menu {
+    @extend .spans-horizontally;
+    a, button {
+      font-size: 2.3rem
+    }
+  }
 }
 
+// ---
+
+// Screen content
+
+.screen > .content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+// ---
+
 // Type margins and sizes
-body > section {
+.screen {
   h1 { font-size: 2.9rem; margin-bottom : 1.6rem }
   h2 { font-size: 2.6rem; margin: 1.3rem 0 }
-  p, input, textarea, button, li { font-size : 1.8rem }
-  p { margin : 0.9rem 0 }
+  p, input, textarea, button, li { font-size : 1.3rem }
+  p { margin : 1.1rem 0 }
 }
 
+// ---
+
+// Default form settings
+
 form {
   margin : 1.3rem 0;
-  label { 
+  input:not([type="checkbox"]), textarea {
     display     : block;
-    margin      : 0.25em 0;
-    font-weight : bold;
-  }
-  input, textarea { 
-    display     : block;
     padding     : 0.9rem;
     width       : 100%;
     font-family : inherit;
   }
-}
-
-ul.common {
-  li {
-    padding : 0.9rem;
+  input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem
   }
+  input[type="checkbox"] + label {
+    display: inline-block;
+    margin-left: $spacing;
+  }
 }
 
-// Rules for opting-in
-.t-centered { text-align : center }
-.t-padded-top { padding-top : 5rem }
-.t-left-align { text-align : left }
-h1.t-bigger { font-size : 3.9rem }
-
-
-#notifications {
-  position : fixed; 
-  right    : 0;
-  bottom   : 0;
-  left     : 0;
-  li {
-    display     : none;
-    padding     : 0.6rem 1rem;
-    font-weight : bold;
-    font-size   : 1.6rem;
-    &:before { margin-right : 1rem }
-  }
-}
\ No newline at end of file
+// ---