slabs-rails 1.0.0

data/assets/stylesheets/slabs/contents/_content-2.scss

@@ -0,0 +1,11 @@
+/* CONTENT */
+.content-2{
+  padding: 15px 0;
+  h1{
+    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 300;
+  }
+  .info-wrapper{
+    padding: 15px 0;
+  }
+}

data/assets/stylesheets/slabs/contents/_content-3.scss

@@ -0,0 +1,23 @@
+/* CONTENT */
+.content-3{
+  position: relative;
+  text-align: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #FCF8E3;
+  font-size: 26px;
+  font-weight: 300;
+
+  .btn{
+    margin-left: 30px;
+    @include media-breakpoint-down(md) {
+      margin-top: 10px;
+      margin-left: 0px;
+    }
+  }
+  span{
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+  }
+}

data/assets/stylesheets/slabs/contents/_content-4.scss

@@ -0,0 +1,54 @@
+/* CONTENT */
+.content-4{
+  $block-height: 20px;
+  padding-top: $block-height;
+  padding-bottom: $block-height;
+
+  @include media-breakpoint-up(md) {
+    h1 { font-size: 3.0em; }
+    h2 { font-size: 2.0em; }
+  }
+
+  @include media-breakpoint-down(md) {
+    h1 { font-size: 2.6em; }
+    h2 { font-size: 1.6em; }
+  }
+
+  @include media-breakpoint-down(sm) {
+    h1 { font-size: 2.4em; }
+    h2 { font-size: 1.4em; }
+  }
+
+  h1, h2 {
+    text-align: center;
+  }
+
+  h2 {
+    color: $gray-med;
+    font-weight: normal;
+  }
+
+  .content-wrapper{
+    margin-top: 25px;
+    display: table;
+  }
+
+  .content, .media{
+    display: table-cell;
+    vertical-align: middle;
+    float: none;
+
+    @include media-breakpoint-down(sm){
+      margin-bottom: 15px;
+      display: block;
+      float: left;
+      text-align: center;
+    }
+  }
+
+  .media{
+    margin-top: 0px;
+    img { width:100%; }
+  }
+
+}

data/assets/stylesheets/slabs/contents/_content-5.scss

@@ -0,0 +1,27 @@
+/* CONTENT */
+.content-5{
+  $block-height: 45px;
+  padding-top: $block-height;
+  padding-bottom: $block-height;
+
+  p{
+    margin-top: 35px;
+    margin-bottom: 15px;
+    line-height: 1.6em;
+  }
+
+  @include media-breakpoint-up(md) {
+    h3 { font-size: 2.6em; }
+    p  { font-size: 1.3em; }
+  }
+
+  @include media-breakpoint-down(md) {
+    h3 { font-size: 2.2em; }
+    p  { font-size: 1.2em; }
+  }
+
+  @include media-breakpoint-down(sm) {
+    h3 { font-size: 1.8em; }
+    p  { font-size: 1.1em; }
+  }
+}

data/assets/stylesheets/slabs/contents/_content-6.scss

@@ -0,0 +1,63 @@
+/* CONTENT */
+.content-6{
+
+  $block-height: 130px;
+  position:relative;
+
+  height: 610px;
+  width: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+
+  color: $white;
+
+  .framed{
+    padding: 35px 10px;
+    border: 4px solid #FFF;
+    margin: 0 30px;
+    @include media-breakpoint-down(sm) {
+      margin: 0 5px;
+    }
+  }
+  .framed-sm{
+    padding: 15px 10px;
+    border: 4px solid #FFF;
+    margin: 0 30px;
+    @include media-breakpoint-down(sm) {
+      margin: 0 5px;
+    }
+  }
+
+  .jumbotron{
+    margin-bottom: 0px;
+    text-align: center;
+
+      h1{
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+    background-color: transparent;
+
+    @include media-breakpoint-up(md) {
+      h1 { font-size: 3.5em; }
+      p  { font-size: 2.0em; }
+    }
+
+    @include media-breakpoint-down(md) {
+      h1 { font-size: 3.0em; }
+      p  { font-size: 1.6em; }
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding: 0px;
+      h1 { font-size: 2.6em; }
+      p  { font-size: 1.4em; }
+    }
+
+  }
+
+  @include media-breakpoint-down(sm) {
+    height: 550px;
+  }
+}

data/assets/stylesheets/slabs/contents/_content-7.scss

@@ -0,0 +1,71 @@
+/* CONTENT */
+.content-7{
+
+  $steps-size: 30px;
+  $steps-line-size: 2px;
+
+  padding: 20px 10px 20px;
+  h1,h2,h3{
+    text-align: center;
+    color: #B0BABF;
+    line-height: 1.1;
+    margin-left: -2px;
+    margin-top: 10px;
+    margin-bottom: 30px;
+  }
+  .progress-steps {
+    margin-bottom: 35px;
+    overflow: hidden;
+    counter-reset: step;
+    text-align: center;
+    float: left;
+    padding: 0px;
+    width: 100%;
+    li{
+      list-style-type: none;
+      font-size: 13px;
+      float: left;
+      position: relative;
+    }
+    li:after {
+      content: '';
+      width: 100%;
+      height: $steps-line-size;
+      background: #f3f5f5;
+      position: absolute;
+      left: -50%;
+      top: ($steps-size / 2) - $steps-line-size;
+      z-index: -1; /*put it behind the numbers*/
+    }
+    li.on:before, .progress-steps li.on:after {
+    background: #8BC5EB;
+    color: #FFF;
+    font-weight: bold;
+    }
+    li:before {
+      content: counter(step);
+      counter-increment: step;
+      width: $steps-size;
+      line-height: $steps-size;
+      display: block;
+      font-size: 12px;
+      background: #F3F5F5;
+      border-radius: 50%;
+      margin: 0 auto 5px auto;
+    }
+    li:first-child:after {
+    content: none;
+    }
+
+    @each $step-columns in (3,4,5){
+      $unit: (100%  / $step-columns);
+      &.step-#{$step-columns}{
+        li{width: $unit}
+      }
+    }
+
+
+  }
+
+
+}

data/assets/stylesheets/slabs/contents/_content-8.scss

@@ -0,0 +1,22 @@
+/* CONTENT */
+.content-8 {
+  $block-height: 45px;
+  padding-top: $block-height;
+  padding-bottom: $block-height;
+
+  p{
+    line-height: 1.6em;
+  }
+
+  @include media-breakpoint-up(md) {
+    p { font-size: 2.0em; }
+  }
+
+  @include media-breakpoint-down(md) {
+    p  { font-size: 1.8em; }
+  }
+
+  @include media-breakpoint-down(sm) {
+    p  { font-size: 1.6em; }
+  }
+}

data/assets/stylesheets/slabs/contents/_content-9.scss

@@ -0,0 +1,46 @@
+/* CONTENT */
+.content-9{
+
+  $block-height: 130px;
+  position:relative;
+
+  height: 500px;
+  width: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+
+  color: $white;
+
+  .jumbotron{
+    margin-bottom: 0px;
+    text-align: center;
+
+      h1{
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+    background-color: transparent;
+
+    @include media-breakpoint-up(md) {
+      h1 { font-size: 3.5em; }
+      p  { font-size: 2.0em; }
+    }
+
+    @include media-breakpoint-down(md) {
+      h1 { font-size: 3.0em; }
+      p  { font-size: 1.6em; }
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding: 0px;
+      h1 { font-size: 2.6em; }
+      p  { font-size: 1.4em; }
+    }
+
+  }
+
+  @include media-breakpoint-down(sm) {
+    height: 550px;
+  }
+}

data/assets/stylesheets/slabs/footers/_footer-1.scss

@@ -0,0 +1,60 @@
+/* FOOTER */
+$footer-no: 1;
+
+.footer-#{$footer-no}{
+  padding-top: 35px;
+  padding-bottom: 35px;
+  color: #FFF;
+
+  a{color: #FFF;}
+
+  ul{
+    padding-left: 20px;
+    margin-bottom: 25px;
+  }
+  li{
+    margin-bottom: 5px;
+    font-size: 14px;
+  }
+
+  .header{
+    border-bottom: 1px solid #FFF;
+    margin-bottom: 10px;
+    h3, h4, h5{
+      margin-top: 0px;
+    }
+  }
+  .footer-brand{
+    @include media-breakpoint-down(sm) {
+      display: block;
+      padding-bottom: 20px;
+      padding-left: 20px;
+    }
+  }
+  .love{
+    margin-top: 80px;
+    border-top: 1px dashed #F0F2F5;
+    position: relative;
+    text-align: center;
+
+    .message-wrapper{
+      width: 400px;
+      margin: 0px auto;
+      padding: 0px 5px;
+      position: relative;
+      top: -18px;
+
+      @include media-breakpoint-down(sm) {
+        width: 100%;
+      }
+    }
+    p{
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+
+    @include media-breakpoint-down(sm) {
+      margin-top: 30px;
+    }
+  }
+}

data/assets/stylesheets/slabs/footers/_footer-2.scss

@@ -0,0 +1,29 @@
+/* FOOTER */
+$footer-no: 2;
+
+.footer-#{$footer-no}{
+  padding-top: 35px;
+  padding-bottom: 35px;
+  color: #FFF;
+
+  a{color: #FFF;}
+
+  ul{
+    margin-bottom: 35px;
+  }
+  li{
+    margin-bottom: 10px;
+    font-size: 16px;
+  }
+
+  .header{
+    margin-bottom: 20px;
+    color: $silver;
+    h3, h4, h5{
+      margin-top: 0px;
+    }
+  }
+  .copyright-n-stuff{
+    font-size: 16px;
+  }
+}

data/assets/stylesheets/slabs/headers/_header-1.scss

@@ -0,0 +1,97 @@
+/* HEADER NAVBAR */
+$nav-h: 60px;
+$header-no: 1;
+
+.header-#{$header-no}{
+  .navbar{
+    $border-height: 2px;
+    margin-bottom:0px;
+    height: $nav-h + $border-height;
+    border: 0px;
+    border-radius: 0px;
+
+
+    .navbar-brand  {
+      font-size: 24px;
+      line-height: 30px;
+    }
+    .navbar-brand {
+      @include media-breakpoint-down(sm) {
+        padding-right: 0px;
+        padding-left: 0px;
+      }
+      color: $white;
+    }
+
+    .navbar-header{
+      height: $nav-h;
+    }
+
+  }
+  .navbar-nav > li > a {
+    @include media-breakpoint-down(sm) {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: $white;
+    font-size: 16px;
+    &:hover{
+      color: $silver;
+    }
+  }
+  .navbar, .navbar-default .navbar-collapse {
+    background-color: $midnight-blue;
+    color: $white;
+    z-index: 1;
+  }
+}
+
+/* SUBHEADER CONTENT */
+.subheader-#{$header-no}{
+  $block-height: 130px;
+  position:relative;
+
+  padding-top: $block-height;
+  padding-bottom: $block-height;
+
+  height: 610px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+
+  color: $white;
+
+  .background{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    padding-top: $block-height;
+    padding-bottom: $block-height;
+  }
+  .jumbotron{
+    text-align: center;
+    @include media-breakpoint-down(sm) {
+      h1{ margin-bottom: 25px;}
+    }
+    background-color: transparent;
+
+    @include media-breakpoint-up(md) {
+      h1 { font-size: 3.5em }
+      p  { font-size: 2.0em }
+    }
+
+    @include media-breakpoint-down(md) {
+      h1 { font-size: 3.0em }
+      p  { font-size: 1.6em }
+    }
+
+    @include media-breakpoint-down(sm) {
+      h1 { font-size: 2.6em }
+      p  { font-size: 1.4em }
+    }
+  }
+}