jekyll-bootflat 0.1.1

data/_sass/bootflat/_footer.scss

@@ -0,0 +1,82 @@
+// Variables
+//------------------------------------------------------
+$footer-background-color:            $darkgray-dark !default;
+$footer-menu-title-color:            $lightgray-dark !default;
+$footer-menu-item-color:             $mediumgray-dark !default;
+$footer-menu-item-color-hover:       $mediumgray-light !default;
+$footer-logo-color:                  $white !default;
+
+
+
+// Exports
+//------------------------------------------------------
+
+@include exports("footer") {
+
+  /**
+   * footer
+   * --------------------------------------------------
+   */
+
+  .footer {
+    padding: 40px 0;
+    background-color: $footer-background-color;
+
+    &-logo,
+    &-nav {
+      float: left;
+      padding: 0 20px;
+      width: 25%;
+    }
+    @media (max-width: 768px) {
+      &-logo {
+        margin-bottom: 20px;
+      }
+      &-logo,
+      &-nav {
+        float: none;
+        display: block;
+        width: 100%;
+      }
+    }
+    &-logo {
+      margin-top: -5px;
+      height: 32px;
+      line-height: 32px;
+
+      & img {
+        margin-right: 10px;
+      }
+      & a {
+        font-size: 20px;
+        font-weight: bold;
+        color: $footer-logo-color;
+      }
+      & a:hover,
+      & a:active {
+        text-decoration: none;
+      }
+    }
+    &-nav .nav-title {
+      margin-bottom: 15px;
+      color: $footer-menu-title-color;
+    }
+    &-nav .nav-item {
+      line-height: 28px;
+      & > a {
+        color: $footer-menu-item-color;
+      }
+      & > a:hover,
+      & > a:active {
+        color: $footer-menu-item-color-hover;
+        text-decoration: none;
+      }
+    }
+    &-copyright {
+      color: $footer-menu-item-color;
+    }
+  }
+
+}
+
+

data/_sass/bootflat/_form.scss

@@ -0,0 +1,212 @@
+// Variables
+//------------------------------------------------------
+$form-normal:                      $mediumgray-dark !default;
+$form-default:                     $white !default;
+$form-primary:                     $aqua-dark !default;
+$form-success:                     $grass-dark !default;
+$form-danger:                      $grapefruit-dark !default;
+$form-warning:                     $sunflower-dark !default;
+$form-info:                        $mint-dark !default;
+
+$message-success:                  $grass-dark !default;
+$message-danger:                   $grapefruit-dark !default;
+$message-warning:                  $sunflower-dark !default;
+
+$form-font-color:                  $darkgray-dark !default;
+$form-placeholder-font-color:      $lightgray-dark !default;
+
+$form-disabled-color:              $lightgray-dark !default;
+
+$search-query-value:               17px !default;
+
+$search-icon-width:                30px !default;
+$search-icon-line-height:          30px !default;          
+
+// Exports
+//------------------------------------------------------
+
+@include exports("form") {
+
+  /**
+   * form
+   * --------------------------------------------------
+   */
+  .form-control {
+      color: $form-font-color;
+      border-color: $form-normal;
+
+      &,
+      &:focus {
+          @include box-shadow($value: none);
+      }
+      &:focus {
+          border-color: $form-primary;
+      }
+      &::-moz-placeholder,
+      &:-ms-input-placeholder,
+      &::-webkit-input-placeholder {
+          color: $form-placeholder-font-color;
+      }
+
+      &.disabled, 
+      &[disabled] {
+          border-color: $form-disabled-color;
+          background-color: $form-disabled-color;
+      }
+  }
+
+  .input-group-btn {
+      & .btn + .btn {
+          border-width: 1px;
+          border-style: solid;
+          border-color: darken($form-normal, 7%);
+      }
+      & .btn + .btn.btn-default {
+          border-color: darken($form-default, 7%);
+      }
+      & .btn + .btn.btn-primary {
+          border-color: darken($form-primary, 7%);
+      }
+      & .btn + .btn.btn-info {
+          border-color: darken($form-info, 7%);
+      }
+      & .btn + .btn.btn-success {
+          border-color: darken($form-success, 7%);
+      }
+      & .btn + .btn.btn-warning {
+          border-color: darken($form-warning, 7%);
+      }
+      & .btn + .btn.btn-danger {
+          border-color: darken($form-danger, 7%);
+      }
+  }
+
+  .input-group-addon {
+      background-color: $form-normal;
+      border-color: darken($form-normal, 7%);
+      color: $form-default;
+
+      & .radio,
+      & .checkbox {
+          margin: -3px 0 -4px !important;
+      }
+  }
+
+  .form-search {
+      & .search-query,
+      & .search-query:first-child,
+      & .search-query:last-child {
+          padding: 0 $search-query-value;
+          @include radius($type: border-radius, $value: $search-query-value);
+      }
+      @at-root .input-group .form-control:last-child {
+          // padding: 0 $search-query-value 0 10px;
+          @include radius($type: border-top-left-radius, $value: 0);
+          @include radius($type: border-bottom-left-radius, $value: 0);
+      }
+      @at-root .input-group .form-control:first-child {
+          @include radius($type: border-top-right-radius, $value: 0);
+          @include radius($type: border-bottom-right-radius, $value: 0);
+      }
+      & .btn {
+          @include radius($type: border-radius, $value: $search-query-value);  
+      }
+  }
+
+  .search-only {
+      position: relative;
+      & .search-icon {
+          position: absolute;
+          top: 2px;
+          left: $search-query-value / 2;
+          width: $search-icon-width;
+          line-height: $search-icon-line-height;
+          text-align: center;
+          font-size: $search-query-value;
+          color: $form-placeholder-font-color;
+          z-index: 20;
+      }
+      & .form-control:last-child {
+         padding-left: $search-icon-width + 10;
+      }
+  }
+
+  .has-success {
+      & .help-block,
+      & .control-label,
+      & .radio,
+      & .checkbox,
+      & .radio-inline,
+      & .checkbox-inline {
+          color: $message-success;
+      }
+      & .form-control {
+          border-color: $message-success;
+          @include box-shadow($value: none);
+      }
+      & .form-control:focus {
+          border-color: $message-success;
+          @include box-shadow($value: none);
+      }
+      & .input-group-addon {
+          background-color: $message-success;
+          border-color: $message-success;
+      }
+      & .form-control-feedback {
+          color: $message-success;
+      }    
+  }
+  .has-warning {
+      & .help-block,
+      & .control-label,
+      & .radio,
+      & .checkbox,
+      & .radio-inline,
+      & .checkbox-inline {
+          color: $message-warning;
+      }
+      & .form-control {
+          border-color: $message-warning;
+          @include box-shadow($value: none);
+      }
+      & .form-control:focus {
+          border-color: $message-warning;
+          @include box-shadow($value: none);
+      }
+      & .input-group-addon {
+          background-color: $message-warning;
+          border-color: $message-warning;
+      }
+      & .form-control-feedback {
+          color: $message-warning;
+      }
+  }
+  .has-error {
+      & .help-block,
+      & .control-label,
+      & .radio,
+      & .checkbox,
+      & .radio-inline,
+      & .checkbox-inline {
+          color:  $message-danger;
+      }
+      & .form-control {
+          border-color:  $message-danger;
+          @include box-shadow($value: none);
+      }
+      & .form-control:focus {
+          border-color:  $message-danger;
+          @include box-shadow($value: none);
+      }
+      & .input-group-addon {
+          background-color:  $message-danger;
+          border-color:  $message-danger;
+      }
+      & .form-control-feedback {
+          color:  $message-danger;
+      }
+  }
+
+}
+
+

data/_sass/bootflat/_global.scss

@@ -0,0 +1,239 @@
+// Global Variables
+//------------------------------------------------------
+$modules:                     () !default;
+
+$experimental:                true !default;
+
+// prefix elements
+$prefix-webkit:               true !global;
+$prefix-moz:                  true !global;
+$prefix-spec:                 true !global;
+
+// color elements
+$white:                       #FFF !default;
+$black:                       #000 !default;
+
+$bluejeans-dark:              #4A89DC !default;
+$bluejeans-light:             #5D9CEC !default;
+
+$aqua-dark:                   #3BAFDA !default;
+$aqua-light:                  #4FC1E9 !default;
+
+$mint-dark:                   #37BC9B !default;
+$mint-light:                  #48CFAD !default;
+
+$grass-dark:                  #8CC152 !default;
+$grass-light:                 #A0D468 !default;
+
+$sunflower-dark:              #F6BB42 !default;
+$sunflower-light:             #FFCE54 !default;
+
+$bittersweet-dark:            #E9573F !default;
+$bittersweet-light:           #FC6E51 !default;
+
+$grapefruit-dark:             #DA4453 !default;
+$grapefruit-light:            #ED5565 !default;
+
+$lavender-dark:               #967ADC !default;
+$lavender-light:              #AC92EC !default;
+
+$pinkrose-dark:               #D770AD !default;
+$pinkrose-light:              #EC87C0 !default;
+
+$lightgray-dark:              #E6E9ED !default;
+$lightgray-light:             #F5F7FA !default;
+
+$mediumgray-dark:             #AAB2BD !default;
+$mediumgray-light:            #CCD1D9 !default;
+
+$darkgray-dark:               #434A54 !default;
+$darkgray-light:              #656D78 !default;
+
+// Global Mixins
+//------------------------------------------------------
+
+// We use this to loading scss files
+@mixin exports($name) {
+  @if index($modules, $name) {
+  } @else {
+    $modules: append($modules, $name) !global;
+    @content;
+  }
+}
+
+// We use this to do set opacity
+@mixin opacity($opacity:50, $filter: true) {
+	opacity: $opacity / 100;
+	@if $filter {
+		filter: alpha(opacity=$opacity);
+	}
+}
+
+// We use this to ellipsis text
+@mixin ellipsis($width: 100%) {
+  display: inline-block;
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// We use this to add across browser prefixes
+@mixin prefixer($property, $value, $prefixes: webkit moz spec) {
+	@if $experimental {
+		@each $prefix in $prefixes {
+			@if $prefix != spec {
+				@if $property == border-top-left-radius and $prefix == moz {
+					@if $prefix-moz {
+						-moz-border-radius-topleft: $value;
+					}
+				} @else if $property == border-top-right-radius and $prefix == moz {
+					@if $prefix-moz {
+						-moz-border-radius-topright: $value;
+					}
+				} @else if $property == border-bottom-right-radius and $prefix == moz {
+					@if $prefix-moz {
+						-moz-border-radius-bottomright: $value;
+					}
+				} @else if $property == border-bottom-left-radius and $prefix == moz {
+					@if $prefix-moz {
+						-moz-border-radius-bottomleft: $value;
+					}
+				} @else {
+					@if $prefix == webkit {
+					  @if $prefix-webkit {
+					    -webkit-#{$property}: $value;
+					  }
+					}
+					@if $prefix == moz {
+					  @if $prefix-moz {
+					    -moz-#{$property}: $value;
+					  }
+					}
+				}
+			} @else {
+			  @if $prefix-spec {
+			    #{$property}: $value;
+			  }
+			}
+		}
+	}
+}
+
+// We use this to add box-sizing across browser prefixes
+@mixin box-sizing($value: border-box) {
+	@include prefixer($property: box-sizing, $value: $value, $prefixes: webkit moz spec);
+}
+
+// We use this to control border radius.
+@mixin radius($type: border-radius, $value: $global-radius) {
+	@include prefixer($property: $type, $value: $value, $prefixes: webkit moz spec);
+}
+
+// We use this to control box shadow.
+@mixin box-shadow($value) {
+	@include prefixer($property: box-shadow, $value: $value, $prefixes: webkit moz spec);
+}
+// We use this to creat animation effect.
+// Examples:
+// @include keyframes(move-the-object) {
+//   0%   { left: 100px; }
+//   100% { left: 200px; }
+// }
+// .object-to-animate {
+//   @include animation(move-the-object .5s 1);
+// }
+@mixin animation ($value...) {
+	@include prefixer($property: animation, $value: $value, $prefixes: webkit moz spec);
+}
+// Individual Animation Properties
+@mixin animation-name ($value...) {
+  	@include prefixer($property: animation-name, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-duration ($value...) {
+  	@include prefixer($property: animation-duration, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-timing-function ($value...) {
+	// ease | linear | ease-in | ease-out | ease-in-out
+  	@include prefixer($property: animation-timing-function, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-iteration-count ($value...) {
+	// infinite | <number>
+  	@include prefixer($property: animation-iteration-count, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-direction ($value...) {
+  	@include prefixer($property: animation-direction, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-play-state ($value...) {
+	// running | paused
+  	@include prefixer($property: animation-play-state, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-delay ($value...) {
+  	@include prefixer($property: animation-delay, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin animation-fill-mode ($value...) {
+	// none | forwards | backwards | both
+  	@include prefixer($property: animation-fill-mode, $value: $value, $prefixes: webkit moz spec);
+}
+@mixin keyframes($name) {
+	$original-prefix-webkit:    $prefix-webkit;
+	$original-prefix-moz:       $prefix-moz;
+	$original-prefix-spec:      $prefix-spec;
+
+	@if $original-prefix-webkit {
+		@include disable-prefix();
+		$prefix-webkit: true !global;
+	    @-webkit-keyframes #{$name} {
+	      @content;
+	    }
+	}
+	@if $original-prefix-moz {
+		@include disable-prefix();
+		$prefix-moz: true !global;
+	    @-moz-keyframes #{$name} {
+	      @content;
+	    }
+	}
+	@if $original-prefix-spec {
+		@include disable-prefix();
+		$prefix-spec: true !global;
+	    @keyframes #{$name} {
+	      @content;
+	    }
+	}
+
+	$prefix-webkit:       $original-prefix-webkit !global;
+	$prefix-moz:          $original-prefix-moz !global;
+	$prefix-spec:         $original-prefix-spec !global;
+}
+
+// We use this to set transform.
+@mixin transform($value: none) {
+	//  none | <transform-function>
+  	@include prefixer($property: transform, $value: $value, $prefixes: webkit moz spec);
+}
+
+@mixin transform-origin($value: 50%) {
+	// x-axis - left | center | right  | length | %
+	// y-axis - top  | center | bottom | length | %
+	// z-axis -                          length
+  	@include prefixer($property: transform-origin, $value: $value, $prefixes: webkit moz spec);
+}
+
+@mixin transform-style ($value: flat) {
+  	@include prefixer($property: transform-style, $value: $value, $prefixes: webkit moz spec);
+}
+
+// We use this to set transition.
+// example: @include transition (all 2s ease-in-out);
+//          @include transition (opacity 1s ease-in 2s, width 2s ease-out);
+//          @include transition-property (transform, opacity);
+
+@mixin transition ($value...) {
+	@if length($value) >= 1 {
+	@include prefixer($property: transition, $value: $value, $prefixes: webkit moz spec);
+	} @else {
+	$value: all 0.15s ease-out 0s;
+		@include prefixer($property: transition, $value: $value, $prefixes: webkit moz spec);
+	}
+}