slabs-rails 1.0.0

data/assets/stylesheets/_slabs-mincer.scss

@@ -0,0 +1,18 @@
+// Mincer asset helper functions
+// Reference - https://github.com/twbs/bootstrap-sass
+//
+// This must be imported into a .css.ejs.scss file.
+// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.
+
+
+@function slabs-font-path($path) {
+  // do something like following
+  // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>"
+  // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>"
+  // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>"
+  @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";
+}
+
+@function slabs-image-path($file) {
+  @return "<%- asset_path('#{$file}') %>";
+}

data/assets/stylesheets/_slabs-sprockets.scss

@@ -0,0 +1,5 @@
+// Reference - https://github.com/twbs/bootstrap-sass
+
+@function slabs-image-path($path) {
+  @return image-path($path);
+}

data/assets/stylesheets/_slabs.scss

@@ -0,0 +1,40 @@
+// Variables & Mixins
+@import "slabs/variables";
+@import "slabs/mixins";
+
+@import "slabs/backgrounds";
+@import "slabs/buttons";
+@import "slabs/wells";
+@import "slabs/sweet_hacks";
+@import "slabs/typo";
+
+/* Commons */
+@import "slabs/commons/headers";
+@import "slabs/commons/slick";
+@import "slabs/commons/ekko-lightbox";
+
+/* Header Slabs */
+@import "slabs/headers/header-1";
+@import "slabs/headers/header-2";
+
+/* Content Slabs */
+@import "slabs/contents/content-1";
+@import "slabs/contents/content-2";
+@import "slabs/contents/content-3";
+@import "slabs/contents/content-4";
+@import "slabs/contents/content-5";
+@import "slabs/contents/content-6";
+@import "slabs/contents/content-7";
+@import "slabs/contents/content-8";
+@import "slabs/contents/content-9";
+@import "slabs/contents/content-10";
+@import "slabs/contents/content-11";
+@import "slabs/contents/content-12";
+@import "slabs/contents/content-13";
+
+/* Footer Slabs */
+@import "slabs/footers/footer-1";
+@import "slabs/footers/footer-2";
+
+/* People slabs */
+@import "slabs/people/people-1";

data/assets/stylesheets/slabs/_backgrounds.scss

@@ -0,0 +1,5 @@
+@each $color in $colorList{
+  .bkg-#{nth($color,1)} {
+    background-color: nth($color,2);
+  }
+}

data/assets/stylesheets/slabs/_buttons.scss

@@ -0,0 +1,25 @@
+@include generate-btn($socialColorList);
+@include generate-btn($colorList);
+
+.btn.btn-outline{
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.btn.btn-rounded{
+  border-radius: 15px;
+}
+
+.btn.btn-xlg{
+  padding:8px 15px;
+  font-size:1.6em;
+}
+
+.btn.btn-xxlg{
+  padding:10px 35px;
+  font-size:1.8em;
+}
+
+.btn.btn-xxxlg{
+  padding:10px 50px;
+  font-size:2em;
+}

data/assets/stylesheets/slabs/_mixins.scss

@@ -0,0 +1,7 @@
+//////////////
+// MIXINS
+//////////////
+
+@import "mixins/backgrounds";
+@import "mixins/buttons";
+@import "mixins/breakpoints";

data/assets/stylesheets/slabs/_sweet_hacks.scss

@@ -0,0 +1,19 @@
+////////////////////////
+// SWEET HACKS
+////////////////////////
+
+.vcenter {
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+  margin-right:-4px;
+}
+
+.vertical-center{
+  display: table;
+  width:100%;
+  & > div {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}

data/assets/stylesheets/slabs/_typo.scss

@@ -0,0 +1,27 @@
+////////////////////////
+// TYPOGRAPHY
+////////////////////////
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+}
+
+////////////////////////
+// OTHERS
+////////////////////////
+
+@each $color in $colorList{
+  .text-#{nth($color,1)} {
+    color: nth($color,2);
+  }
+}
+
+.text-upcase{
+  text-transform:uppercase;
+}
+
+.text-downcase{
+  text-transform:lowercase;
+}

data/assets/stylesheets/slabs/_variables.scss

@@ -0,0 +1,114 @@
+////////////////////////
+// Colors
+////////////////////////
+
+// Basic colors
+$white: #FFFFFF;
+$black: #333333;
+$dark: #2a2a2a;
+$green: #65c31f;
+$red: #c7254e;
+$yellow: #ffc821;
+
+$blue: #428bca;
+$blue-magic: #1FA3F4;
+$blue-dark: #4679BD;
+
+$gray-ultra-lighter: #f9f9f9;;
+$gray-lighter: #F6F6F6;
+$gray-light: #E4E4E4;
+$gray: #CCCCCC;
+$gray-lm: #999999;
+$gray-med: #606060;
+$gray-dark: #323232;
+
+// Flat UI colors
+$turquoise: #1ABC9C;
+$green-sea: #16A085;
+$emerald: #2ECC71;
+$nephritis: #27AE60;
+$peter-river: #3498DB;
+$belize-hole: #2980B9;
+$amethyst: #9B59B6;
+$wisteria: #8E44AD;
+$wet-asphalt: #34495E;
+$midnight-blue: #2C3E50;
+$sun-flower: #F1C40F;
+$orange: #F39C12;
+$carrot: #E67E22;
+$pumpkin: #D35400;
+$alizarin: #E74C3C;
+$pomegranate: #C0392B;
+$clouds: #ECF0F1;
+$silver: #BDC3C7;
+$concrete: #95A5A6;
+$asbestos:  #7F8C8D;
+
+// Social colors
+$fb-color: #3b5998;
+$twitter-color: #55acee;
+$gplus-color: #d34836;
+$linkedin-color: #0073B1;
+
+// List of colors
+$colorList:(
+  "white" $white,
+  "black" $black,
+  "dark" $dark,
+  "turquoise" $turquoise,
+  "green-sea" $green-sea,
+  "emerald" $emerald,
+  "nephritis" $nephritis,
+  "peter-river" $peter-river,
+  "belize-hole" $belize-hole,
+  "amethyst"  $amethyst,
+  "wisteria"  $wisteria,
+  "wet-asphalt" $wet-asphalt,
+  "midnight-blue" $midnight-blue,
+  "sun-flower"  $sun-flower,
+  "orange"  $orange,
+  "carrot"  $carrot,
+  "pumpkin" $pumpkin,
+  "alizarin"  $alizarin,
+  "pomegranate" $pomegranate,
+  "clouds"  $clouds,
+  "silver"  $silver,
+  "concrete"  $concrete,
+  "asbestos" $asbestos
+);
+
+$socialColorList:(
+  "facbeook" $fb-color,
+  "twitter" $twitter-color,
+  "google-plux" $gplus-color,
+  "linkedin" $linkedin-color
+);
+
+
+////////////////////////
+// Grid breakpoints
+////////////////////////
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 480px,
+  // Medium screen / tablet
+  md: 767px,
+  // Large screen / desktop
+  lg: 991px,
+  // Extra large screen / wide desktop
+  xl: 1200px
+) !default;
+
+////////////////////////
+// TYPOGRAPHY
+////////////////////////
+
+$font-family-sans-serif:  "Roboto","Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$headings-font-family: $font-family-sans-serif;
+$headings-font-weight: 500;

data/assets/stylesheets/slabs/_wells.scss

@@ -0,0 +1,9 @@
+.well {
+  &.well-default {
+    background-color: #FFFFFF;
+  }
+  & > .divider {
+    margin: 10px -20px;
+    border-top: 1px solid #e4e4e4;
+  }
+}

data/assets/stylesheets/slabs/commons/_headers.scss

@@ -0,0 +1,37 @@
+.navbar.navbar-transparent {
+  background: rgb(68, 68, 68); //IE
+  background: rgba(0, 0, 0, 0.0); //NON-IE
+  border-color: rgb(68, 68, 68); //IE
+  border-color: rgba(0, 0, 0, 0.0); //NON-IE
+  -webkit-transition: all 0.6s ease-out;
+  -moz-transition: all 0.6s ease-out;
+  -o-transition: all 0.6s ease-out;
+  -ms-transition: all 0.6s ease-out;
+  transition: all 0.6s ease-out;
+
+  .navbar-nav>li>a {
+    color: #337ab7;
+  }
+
+  &.scrolled{
+    background-color: $white;
+    .navbar-nav>li>a {
+      color: #337ab7;
+    }
+  }
+
+}
+
+.navbar-inverse.navbar-transparent {
+
+  &.scrolled{
+    background-color: $black;
+    .navbar-nav>li>a {
+      color: #9d9d9d;
+      &:hover{
+        color: #FFFFFF;
+      }
+    }
+  }
+
+}

data/assets/stylesheets/slabs/commons/ekko-lightbox.scss

@@ -0,0 +1,127 @@
+/*!
+ * Lightbox for Bootstrap 3 by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */
+
+.ekko-lightbox-container {
+  position: relative;
+}
+
+.ekko-lightbox-nav-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+}
+
+.ekko-lightbox-nav-overlay a {
+  z-index: 100;
+  display: block;
+  width: 49%;
+  height: 100%;
+  font-size: 30px;
+  color: #fff;
+  text-shadow: 2px 2px 4px #000;
+  opacity: 0;
+  filter: dropshadow(color=#000000, offx=2, offy=2);
+  -webkit-transition: opacity 0.5s;
+     -moz-transition: opacity 0.5s;
+       -o-transition: opacity 0.5s;
+          transition: opacity 0.5s;
+}
+
+.ekko-lightbox-nav-overlay a:empty {
+  width: 49%;
+}
+
+.ekko-lightbox a:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+
+.ekko-lightbox .glyphicon-chevron-left {
+  left: 0;
+  float: left;
+  padding-left: 15px;
+  text-align: left;
+}
+
+.ekko-lightbox .glyphicon-chevron-right {
+  right: 0;
+  float: right;
+  padding-right: 15px;
+  text-align: right;
+}
+
+.ekko-lightbox .modal-footer {
+  text-align: left;
+}
+
+// Dark theme
+.modal-backdrop.in {
+    -webkit-opacity: 0.95;
+    -moz-opacity: 0.95;
+    opacity: 0.95;
+    background-color: #333333;
+}
+.ekko-lightbox .modal-content {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    border: none;
+    background-color: transparent;
+}
+
+.ekko-lightbox .close{
+  font-size: 30px;
+}
+
+.ekko-lightbox .modal-header {
+    border: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+.ekko-lightbox .modal-header .close {
+    -webkit-opacity: 0.5;
+    -moz-opacity: 0.5;
+    opacity: 0.5;
+    color: #fff;
+    text-shadow: 0;
+    font-weight: 100;
+    margin-top: 5px;
+}
+.ekko-lightbox .modal-header .close:hover {
+    -webkit-opacity: 1;
+    -moz-opacity: 1;
+    opacity: 1;
+}
+.ekko-lightbox .modal-header h4.modal-title {
+    font-weight: 100;
+    color: #fff;
+    padding: 0;
+}
+.ekko-lightbox .modal-body {
+    padding: 0;
+}
+.ekko-lightbox .modal-footer {
+    -webkit-opacity: 0.9;
+    -moz-opacity: 0.9;
+    opacity: 0.9;
+    border: 0;
+    color: #fff;
+    font-weight: 100;
+    padding: 0;
+}
+.ekko-lightbox-nav-overlay a {
+    -webkit-opacity: 0.9;
+    -moz-opacity: 0.9;
+    opacity: 0.9;
+    text-shadow: none;
+}