slabs-rails 1.0.0

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

@@ -0,0 +1,134 @@
+/* HEADER NAVBAR */
+$header-no: 2;
+
+.header-#{$header-no}{
+
+  position: relative;;
+
+  margin-bottom: 0px;
+
+  .item{
+
+    $block-height: 130px;
+
+    padding-top: $block-height;
+    padding-bottom: $block-height;
+    height: 610px;
+    background: 50% 50% no-repeat;
+    color: $white;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    background-position: 50% 50%;
+
+    background: radial-gradient(circle at 60% 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    background-position: 50%;
+    display: table;
+
+    .jumbotron{
+      margin: 0px;
+      padding-top: 90px;
+      padding-bottom: 90px;
+      vertical-align: middle;
+      background-color: transparent;
+
+      h1{
+        font-weight: 300;
+        @include media-breakpoint-up(md) {
+          font-size: 3.5em;
+        }
+        @include media-breakpoint-down(md) {
+          font-size: 3.0em;
+        }
+        @include media-breakpoint-down(sm) {
+          font-size: 2.6em;
+        }
+      }
+      p {
+        font-family: $font-family-sans-serif;
+        font-weight: 300;
+        font-size: 24px;
+
+        @include media-breakpoint-up(md) {
+          font-size: 2.0em;
+        }
+        @include media-breakpoint-down(md) {
+          font-size: 1.6em;
+        }
+        @include media-breakpoint-down(sm) {
+          font-size: 1.4em;
+        }
+      }
+
+      @include media-breakpoint-down(sm) {
+        text-align:center;
+      }
+    }
+
+
+    @include media-breakpoint-down(md) {
+      height: 500px;
+    }
+    @include media-breakpoint-down(xs) {
+      height: 400px;
+      padding: 20px;
+    }
+  }
+
+  .slick-dots{
+    bottom: 20px;
+    li{
+      width: 8px;
+      .slick-active {
+        button:before{
+          opacity: 1.0;
+        }
+      }
+      & button:before{
+        color: #FFFFFF;
+        font-size: 25px;
+        opacity: .5;
+      }
+    }
+  }
+
+
+  .slick-dots li.slick-active button:before {
+    color: #FFFFFF;
+    opacity: 1.0;
+  }
+
+  .slick_next, .slick_prev{
+    z-index: 9999;
+    font-size: 45px;
+    position: absolute;
+    top: 50%;
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    padding: 0;
+    cursor: pointer;
+    color: #FFFFFF;
+    border: none;
+    outline: none;
+
+    @include media-breakpoint-down(md) {
+      display: none !important;
+    }
+
+  }
+  .slick_next{
+    right: 25px;
+  }
+
+  .slick_prev{
+    left: 25px;
+  }
+
+}

data/assets/stylesheets/slabs/mixins/_backgrounds.scss

@@ -0,0 +1,12 @@
+/////////////////
+// BK Imgs
+////////////////
+
+@mixin background-img-cover($img-url, $height: inherit) {
+  background-image:url($img-url);
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    height: $height;
+}

data/assets/stylesheets/slabs/mixins/_breakpoints.scss

@@ -0,0 +1,108 @@
+//
+// Extracted from Bootstrap 4 _breackpoints.scss
+//
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 34rem, md: 45rem)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
+//    34rem
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
+//    44.9rem
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1, null);
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($name, $breakpoints) {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-up($lower, $breakpoints) {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// @mixin responsive-slctr ($slctr, $default, $sld, $sd, $st, $sm){
+//     @include media-breakpoint-up(lg) {
+//         #{$slctr}: $sld;
+//     }
+//     @include desktop {
+//         #{$slctr}: $sd;
+//     }
+//     @include media-breakpoint-down(md) {
+//         #{$slctr}: $st;
+//     }
+//     @include media-breakpoint-down(sm) {
+//         #{$slctr}: $sm;
+//     }
+//     @include default {
+//         #{$slctr}: $default;
+//     }
+//     #{$slctr}: $default;
+// }

data/assets/stylesheets/slabs/mixins/_buttons.scss

@@ -0,0 +1,28 @@
+/////////////////
+// BUTTONS GENERATOR
+////////////////
+
+@mixin generate-btn($colorsList) {
+  @each $color in $colorList {
+    .btn.btn-#{nth($color,1)} {
+      color: #FFFFFF;
+      background-color: nth($color,2);
+      border-color: nth($color,2);
+      &:hover{
+        color: #FFFFFF;
+        background-color: darken( nth($color,2), 10% );
+      }
+    }
+    .btn.btn-outline.btn-#{nth($color,1)}{
+        color: nth($color,2);
+      &:hover{
+        @if nth($color,1) != 'white'{
+          color: #FFFFFF;
+        } @else {
+          color: #333333;
+        }
+        background-color: nth($color,2);
+      }
+    }
+  }
+}

data/assets/stylesheets/slabs/mixins/_transitions.scss

@@ -0,0 +1,128 @@
+////////////////////////
+// ANIMATIONS IN CC3
+////////////////////////
+
+// Basics
+// linear | ease | ease-in | ease-out | ease-in-out
+@mixin animation-timing-function ($animation) {
+  -webkit-animation-timing-function: $animation;
+  -moz-animation-timing-function: $animation;
+  -o-animation-timing-function: $animation;
+  -ms-animation-timing-function: $animation;
+  animation-timing-function: $animation;
+}
+// name
+@mixin animation-name ($animation-name) {
+  -webkit-animation-name: $animation-name;
+  -moz-animation-name: $animation-name;
+  -o-animation-name: $animation-name;
+  -ms-animation-name: $animation-name;
+  animation-name: $animation-name;
+}
+// 1 | 2 | .. | infinite
+@mixin animation-iterations ($iterations: 1) {
+  -webkit-animation-iteration-count: $iterations;
+  -moz-animation-iteration-count: $iterations;
+  -o-animation-iteration-count: $iterations;
+  -ms-animation-iteration-count: $iterations;
+  animation-iteration-count: $iterations;
+}
+
+// none | forwards | backwards | both
+@mixin animation-fill-mode ($mode) {
+  -webkit-animation-fill-mode: $mode;
+  -moz-animation-fill-mode: $mode;
+  -o-animation-fill-mode: $mode;
+  -ms-animation-fill-mode: $mode;
+  animation-fill-mode: $mode;
+}
+// seconds
+@mixin animation-duration ($animation-duration) {
+  -webkit-animation-duration: $animation-duration;
+  -moz-animation-duration: $animation-duration;
+  -o-animation-duration: $animation-duration;
+  -ms-animation-duration: $animation-duration;
+  animation-duration: $animation-duration;
+}
+
+//////////////////
+// FADE IN
+//////////////////
+@-webkit-keyframes fade-in { from { opacity:0; } to { opacity:1;} }
+@-moz-keyframes  fade-in { from { opacity:0; } to { opacity:1; } }
+@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
+
+@mixin fade-in ($animation-duration, $animation: ease-in, $mode: forwards) {
+  opacity:0;
+  @include animation-name(fade-in);
+  @include animation-timing-function($animation);
+  @include animation-iterations;
+  @include animation-fill-mode($mode);
+  @include animation-duration($animation-duration);
+}
+
+////////////////////
+// BOUNCE IN
+////////////////////
+@-webkit-keyframes bounce-in {
+  0%    { -webkit-transform: scale(.3); opacity: 0; }
+  40%   { -webkit-transform: scale(1); opacity: 1; }
+  60%   { -webkit-transform: scale(.95);}
+  100%  { -webkit-transform: scale(1); }
+}
+
+@-moz-keyframes bounce-in {
+  0%    { -moz-transform: scale(.3); opacity: 0; }
+  40%   { -moz-transform: scale(1); opacity: 1; }
+  60%   { -moz-transform: scale(.95);}
+  100%  { -moz-transform: scale(1); }
+}
+
+@-ms-keyframes bounce-in {
+  0%    { -ms-transform: scale(.3); opacity: 0; }
+  40%   { -ms-transform: scale(1); opacity: 1; }
+  60%   { -ms-transform: scale(.95);}
+  100%  { -ms-transform: scale(1); }
+}
+
+@-o-keyframes bounce-in {
+  0%    { -o-transform: scale(.3); opacity: 0; }
+  40%   { -o-transform: scale(1); opacity: 1; }
+  60%   { -o-transform: scale(.95); }
+  100%  { -o-transform: scale(1); }
+}
+
+@keyframes bounce-in {
+  0%    { transform: scale(.3); opacity: 0; }
+  40%   { transform: scale(1); opacity: 1; }
+  60%   { transform: scale(.95); }
+  100%  { transform: scale(1); }
+}
+
+@mixin bounce-in ($animation-duration, $animation: linear) {
+  @include animation-name(bounce-in);
+  @include animation-duration($animation-duration);
+}
+
+
+////////////////////////
+// TRANSITIONS IN CC3
+////////////////////////
+@mixin transition-duration ($duration) {
+  -webkit-transition-duration: $duration;
+  -moz-transition-duration: $duration;
+  -o-transition-duration: $duration;
+  -ms-transition-duration: $duration;
+  transition-duration: $duration;
+}
+
+////////////////////////
+// TRANFROM IN CC3
+////////////////////////
+@mixin transform ($x,$y) {
+  -webkit-transform: translate($x,$y);
+  -moz-transform: translate($x,$y);
+  -o-transform: translate($x,$y);
+  -ms-transform: translate($x,$y);
+  transform: translate($x,$y);
+}

data/assets/stylesheets/slabs/people/_people-1.scss

@@ -0,0 +1,52 @@
+/* CONTENT */
+.people-1{
+  padding: 30px 0px 20px;
+  .header{
+    margin-bottom: 35px;
+    h1,h2,h3{
+      font-weight: 400;
+    }
+    p{
+      font-weight: 300;
+      font-size: 20px;
+    }
+  }
+  .person {
+    margin: 15px 0px 0px;
+    .picture {
+      width: 90px;
+      float: left;
+      img {
+        border-radius: 50%;
+        height:75px;
+        width: 75px;
+      }
+    }
+    .information {
+      width: auto;
+      overflow: hidden;
+      font-size: 14px;
+    }
+    .name {
+      // font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 20px;
+      color: inherit;
+      margin: 0px 0px 9px;
+    }
+    .divider {
+      width: 70px;
+      height: 1px;
+      margin: 0px 0px 10px;
+      background-color: #CCCCCC;
+    }
+    p{
+      margin-bottom: 0px;
+    }
+    em {
+      color: #4f5962;
+    }
+    i{
+      font-size: 15px;
+    }
+  }
+}