up to sf 7

v1/assets/styles/pages/demo.scss

@@ -0,0 +1,136 @@
+
+body {
+  background: #F5F5F5;
+  font: 18px/1.5 sans-serif;
+}
+
+h1, h2 {
+  line-height: 1.2;
+  margin: 0 0 .5em;
+}
+
+h1 {
+  font-size: 36px;
+}
+
+h2 {
+  font-size: 21px;
+  margin-bottom: 1em;
+}
+
+p {
+  margin: 0 0 1em 0;
+}
+
+a {
+  color: $primary;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+code {
+  background: #F5F5F5;
+  max-width: 100px;
+  padding: 2px 6px;
+  word-wrap: break-word;
+}
+
+#wrapper {
+  background: #FFF;
+  margin: 1em auto;
+  //max-width: 800px;
+  width: 95%;
+}
+
+#container {
+  padding: 2em;
+}
+
+#homepage{
+  @extend .bigger-text;
+  h1 span {
+    display: block;
+    font-size: 75%;
+  }
+}
+.hint,
+.product-values-block{
+  @extend .bigger-text;
+  h2{
+    font-size: 5rem;
+  }
+}
+.bigger-text{
+  font-size: 2rem;
+  line-height: 3.5rem;
+}
+#icon-status, #icon-book {
+  float: left;
+  height: 64px;
+  margin-right: 1em;
+  margin-top: -4px;
+  width: 64px;
+}
+
+#icon-book {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  #wrapper {
+    //width: 80%;
+    margin: 2em auto;
+  }
+
+  #icon-book {
+    display: inline-block;
+  }
+
+  #status a, #next a {
+    display: block;
+  }
+
+  @-webkit-keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .sf-toolbar {
+    opacity: 0;
+    -webkit-animation: fade-in 1s .2s forwards;
+    animation: fade-in 1s .2s forwards;
+  }
+}
+
+.header-block{
+  background: $darkblue;
+  .btn-default{
+    color: $grey;
+  }
+  .btn{
+
+  span{
+    position: absolute;
+    right: 2.5em;
+    top: 1em;
+  }
+  }
+}
+#menu-dashboard .nav .logo-home.btn-default{
+  background: $darkblue;
+  height: 52px;
+  font-size: 1em;
+}