bootflat-rails 0.0.1 → 0.1.0

data/vendor/assets/stylesheets/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);
+    @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);
+	}
+}

data/vendor/assets/stylesheets/bootflat/_jumbotron.scss

@@ -0,0 +1,80 @@
+// Variables
+//------------------------------------------------------
+$jumbotron-font-color:            $darkgray-dark !default;
+
+$jumbotron-background-color:      $white !default;
+
+$jumbotron-radius:                4px;
+$jumbotron-shadow:                0 1px 2px rgba(0, 0, 0, .2) !default;
+
+
+// Exports
+//------------------------------------------------------
+
+@include exports("jumbotron") {
+
+  /**
+   * jumbotron
+   * --------------------------------------------------
+   */
+  .jumbotron {
+    margin-bottom: 20px;
+    padding: 0;
+    @include radius($type: border-radius, $value: $jumbotron-radius);
+    background-color: $jumbotron-background-color;
+    @include box-shadow($value: $jumbotron-shadow);
+
+    @at-root .container & {
+      @include radius($type: border-radius, $value: $jumbotron-radius);      
+    }
+
+    & > &-photo img {
+      @include radius($type: border-radius, $value: $jumbotron-radius $jumbotron-radius 0 0);       
+      width: 100%;
+    }
+
+    & &-contents {
+      padding: 20px;
+      color: $jumbotron-font-color;
+    }
+    & .carousel,
+    & .carousel-inner,
+    & .carousel-inner > .item.active img {
+      @include radius($type: border-radius, $value: $jumbotron-radius $jumbotron-radius 0 0); 
+    }
+    & .carousel-control.left {
+      @include radius($type: border-radius, $value: $jumbotron-radius 0 0 0);       
+    }
+    & .carousel-control.right {
+      @include radius($type: border-radius, $value: 0 $jumbotron-radius 0 0);       
+    }
+
+    & h1, & .h1,
+    & h2, & .h2 {
+      font-weight: 400;
+    }
+
+    & h1, & .h1 {
+      font-size: 28px;
+    }
+    & h2, & .h2 {
+      font-size: 24px;
+    }
+    & p {
+      font-size: 14px;
+    }
+
+    @media screen and (min-width: 768px) {
+      &,
+      .container & {
+        padding: 0;
+      }
+      & h1,
+      & .h1 {
+        font-size: 28px;
+      }
+    }
+  }
+}
+
+

data/vendor/assets/stylesheets/bootflat/_label_badge.scss

@@ -0,0 +1,65 @@
+// Variables
+//------------------------------------------------------
+$label-normal:                  $mediumgray-dark !default;
+$label-default:                 $white !default;
+$label-primary:                 $aqua-dark !default;
+$label-success:                 $grass-dark !default;
+$label-danger:                  $grapefruit-dark !default;
+$label-warning:                 $sunflower-dark !default;
+$label-info:                    $mint-dark !default;
+
+$label-default-font-color:      $darkgray-dark !default;
+
+// Exports
+//------------------------------------------------------
+
+@include exports("label-badge") {
+
+  /**
+   * labels and badges
+   * --------------------------------------------------
+   */
+  .label,
+  .badge {
+    background-color: $label-normal;
+  }
+
+  .label-default,
+  .badge-default {
+    border: 1px solid $button-normal;
+    background-color: $label-default;
+    color: $label-default-font-color;
+  }
+
+  .label-primary,
+  .badge-primary {
+    border-color: $label-primary;
+    background-color: $label-primary;
+  }
+
+  .label-success,
+  .badge-success {
+    border-color: $label-success;
+    background-color: $label-success;
+  }
+
+  .label-danger,
+  .badge-danger {
+    border-color: $label-danger;
+    background-color: $label-danger;
+  }
+
+  .label-warning,
+  .badge-warning {
+    border-color: $label-warning;
+    background-color: $label-warning;
+  }
+
+  .label-info,
+  .badge-info {
+    border-color: $label-info;
+    background-color: $label-info;
+  }
+}
+
+

data/vendor/assets/stylesheets/bootflat/_list.scss

@@ -0,0 +1,188 @@
+// Variables
+//------------------------------------------------------
+$list-primary:                                 $aqua-light !default;
+$list-info:                                    $mint-light !default;
+$list-warning:                                 $sunflower-light !default;
+$list-success:                                 $grass-light !default;
+$list-danger:                                  $grapefruit-light !default;
+
+$list-primary-hover:                           $aqua-dark !default;
+$list-info-hover:                              $mint-dark !default;
+$list-warning-hover:                           $sunflower-dark !default;
+$list-success-hover:                           $grass-dark !default;
+$list-danger-hover:                            $grapefruit-dark !default;
+
+$list-border-color:                            $lightgray-dark !default;
+$list-background-color:                        $white !default;
+$list-font-color:                              $darkgray-dark !default;
+$list-font-color-hover:                        $mediumgray-dark !default;
+
+$list-item-background-color:                   $lightgray-dark !default;
+
+$list-radius:                                  4px !default;
+$list-shadow:                                  0 1px 2px rgba(0, 0, 0, .2) !default;
+
+
+
+// Exports
+//------------------------------------------------------
+
+@include exports("list") {
+
+  /**
+   * list
+   * --------------------------------------------------
+   */
+  .list-group {
+    @include radius($type: border-radius, $value: $list-radius);
+    @include box-shadow($value: $list-shadow);
+    @at-root &-item {
+      border-color: transparent; 
+      border-top-color: $list-border-color;
+      &:first-child {
+        border-top: none;
+      }
+      @at-root &-heading {
+        color: $list-font-color;
+      }
+    }
+  }
+
+
+  a.list-group-item {
+    color: $list-font-color;
+
+    & .list-group-item-heading {
+      font-size: 16px;
+      color: $list-font-color;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $list-item-background-color;
+    }
+    &.active,
+    &.active:hover,
+    &.active:focus {
+      background-color: $list-primary;
+      border-color: $list-primary;
+    }
+    &.active .list-group-item-text,
+    &.active:hover .list-group-item-text,
+    &.active:focus .list-group-item-text {
+      color: $list-background-color;
+    }
+  }
+  .list-group-item-primary {
+    color: darken($list-primary, 10%);
+    border-color: $list-primary-hover transparent transparent transparent;
+    background-color: $list-primary;
+    &:first-child {
+      border-color: transparent;      
+    }
+    @at-root a.list-group-item-primary {
+      color: darken($list-primary, 30%);
+      &:hover,
+      &:focus {
+        color: $list-background-color;
+        background-color: $list-primary-hover;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        background-color: $list-primary-hover;
+        border-color: $list-primary transparent transparent transparent;
+      }
+    }
+  }
+  .list-group-item-success {
+    color: darken($list-success, 10%);
+    border-color: $list-success-hover transparent transparent transparent;
+    background-color: $list-success;
+    &:first-child {
+      border-color: transparent;      
+    }
+    @at-root a.list-group-item-success {
+      color: darken($list-success, 30%);
+      &:hover,
+      &:focus {
+        color: $list-background-color;
+        background-color: $list-success-hover;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        background-color: $list-success-hover;
+        border-color: $list-success transparent transparent transparent;
+      }
+    }
+  }
+  .list-group-item-warning {
+    color: darken($list-warning, 10%);
+    border-color: $list-warning-hover transparent transparent transparent;
+    background-color: $list-warning;
+    &:first-child {
+      border-color: transparent;      
+    }
+    @at-root a.list-group-item-warning {
+      color: darken($list-warning, 40%);
+      &:hover,
+      &:focus {
+        color: $list-background-color;
+        background-color: $list-warning-hover;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        background-color: $list-warning-hover;
+        border-color: $list-warning transparent transparent transparent;
+      }
+    }
+  }
+  .list-group-item-info {
+    color: darken($list-info, 10%);
+    border-color: $list-info-hover transparent transparent transparent;
+    background-color: $list-info;
+    &:first-child {
+      border-color: transparent;      
+    }
+    @at-root a.list-group-item-info {
+      color: darken($list-info, 30%);
+      &:hover,
+      &:focus {
+        color: $list-background-color;
+        background-color: $list-info-hover;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        background-color: $list-info-hover;
+        border-color: $list-info transparent transparent transparent;
+      }
+    }
+  }
+  .list-group-item-danger {
+    color: darken($list-danger, 10%);
+    border-color: $list-danger-hover transparent transparent transparent;
+    background-color: $list-danger;
+    &:first-child {
+      border-color: transparent;      
+    }
+    @at-root a.list-group-item-danger {
+      color: darken($list-danger, 30%);
+      &:hover,
+      &:focus {
+        color: $list-background-color;
+        background-color: $list-danger-hover;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        background-color: $list-danger-hover;
+        border-color: $list-danger transparent transparent transparent;
+      }
+    }
+  }
+}
+
+