nesta-contentfocus-extensions 0.0.1 → 0.0.2

data/assets/stylesheets/contentfocus/_progress_bar.scss

@@ -0,0 +1,92 @@
+.progress-bar {
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-background-color: white !default;
+  $base-border-radius: 3px !default;
+  $base-accent-color: #477DCA !default;
+  $base-link-color: $base-accent-color !default;
+  //////////////////////////////////////////////////////////////////////////////////
+
+  $progress-border-color: $base-border-color !default;
+  $progress-border: 1px solid $progress-border-color;
+  $progress-meter-border-color: $base-accent-color !default;
+  $progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
+  $progress-meter-color: $progress-meter-border-color;
+  $progress-background: darken($base-background-color, 5) !default;
+  $progress-animation-duration: 0.7s;
+  $progress-height: 30px;
+
+  background-color: $progress-background;
+  border: $progress-border;
+  box-shadow: inset 0 0 3px 0 rgba(darken($progress-background, 50%), 0.15);
+  border-radius: $base-border-radius;
+  height: $progress-height;
+  margin: 0 auto;
+  padding: 2px;
+  width: 100%;
+
+  > span.meter {
+    @include animation(progress $progress-animation-duration linear infinite);
+    @include box-sizing(border-box);
+    background-color: $progress-meter-color;
+    @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
+                                                      transparent 25%,
+                                                      transparent 50%,
+                                                      rgba(255,255,255, 0.15) 50%,
+                                                      rgba(255,255,255, 0.15) 75%,
+                                                      transparent 75%));
+    background-size: 40px 40px;
+    background-repeat: repeat-x;
+    border: $progress-meter-border;
+    border-radius: $base-border-radius / 1.5;
+    display: block;
+    height: 100%;
+    width: 0%;
+  }
+}
+
+@-webkit-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-moz-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-ms-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@-o-keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0px 0px;
+  }
+  100% {
+    background-position: 40px 0px;
+  }
+}
+

data/assets/stylesheets/contentfocus/_variables.scss

@@ -0,0 +1,84 @@
+@import "neat-helpers";
+
+// Typography
+$base-font-family: freight-text-pro, Merriweather, Georgia, Cambria, 'Times New Roman', Times, serif;
+$heading-font-family: jaf-bernino-sans, 'Open Sans' 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
+$navigation-font-family: ff-meta-web-pro, $heading-font-family;
+
+// Font sizes
+$base-font-size: 22px;
+$heading-font-size: $base-font-size * 1.64;
+
+// Line height
+$base-line-height: $base-font-size * 1.5;
+$heading-line-height: $heading-font-size * 1.15;
+
+// Other typesetting hints
+$heading-letter-spacing: -2px*(23/32);
+
+// Other sizes
+$base-spacing: $base-line-height;
+$small-spacing: $base-spacing / 2;
+$base-z-index: 0;
+
+// Colors
+$success-color: #c1fca9;
+$notice-color: #a7d4f9;
+$error-color: #ffabb6;
+$alert-color: #ffe7ab;
+$base-accent-color: #262626;
+$action-color: #5cd02e;
+$base-button-color: $action-color;
+$hover-button-color: lighten($base-button-color, 10%);
+
+// Font colors
+$base-font-color: rgba(0, 0, 0, 0.8);
+$link-color: rgb(77, 204, 75);
+
+// Borders
+$base-border-radius: 5px;
+$base-border-color: lighten($base-font-color, 75%);
+$base-border: 1px solid $base-border-color;
+
+// Background colors
+$base-background-color: #fafafa;
+$secondary-background-color: tint($base-background-color, 75%);
+
+// Containers
+$max-width: 100%;
+
+// Screens
+$medium-screen: 600px;
+$large-screen: 900px;
+$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);
+
+// Forms
+$form-font-family: $base-font-family;
+$form-font-size: $base-font-size;
+$form-border-radius: $base-border-radius;
+$form-border-color: $base-border-color;
+$form-border-color-hover: darken($form-border-color, 10);
+$form-border-color-focus: adjust-color($action-color, $lightness: -5%);
+$form-box-shadow: inset 0 1px rgba(#000, 0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;
+
+// Navigation
+$navigation-background-color: #262626;
+$navigation-color: rgba(255,255,255,0.7);
+
+// Hero
+$hero-color: $base-font-color;
+$hero-base-background-color: #fff;
+
+// Progress bar
+$progress-background-color: #9de381;
+$progress-border-color: #62cf33;
+$progress-meter-border-color: darken($progress-background-color, 20%);
+$progress-meter-border: 1px solid darken($progress-meter-border-color, 15%);
+$progress-meter-color: $progress-meter-border-color;
+$progress-background: lighten($progress-background-color, 20%);

data/assets/stylesheets/neat/_neat-helpers.scss

@@ -0,0 +1,8 @@
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
+@import "settings/disable-warnings";

data/assets/stylesheets/neat/_neat.scss

@@ -0,0 +1,23 @@
+// Neat 1.7.2
+// http://neat.bourbon.io
+// Copyright 2012-2015 thoughtbot, inc.
+// MIT License
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/box-sizing";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";
+@import "grid/display-context";
+@import "grid/direction-context";

data/assets/stylesheets/neat/functions/_new-breakpoint.scss

@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
+///
+/// @param {List} $query
+///   A list of media query features and values. Each `$feature` should have a corresponding `$value`.
+///
+///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
+///
+///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
+///
+/// @param {Number (unitless)} $total-columns [$grid-columns]
+///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
+///
+/// @example scss - Usage
+///   $mobile: new-breakpoint(max-width 480px 4);
+///
+///   .element {
+///     @include media($mobile) {
+///       @include span-columns(4);
+///     }
+///   }
+///
+/// @example css - CSS Output
+///   @media screen and (max-width: 480px) {
+///     .element {
+///       display: block;
+///       float: left;
+///       margin-right: 7.42297%;
+///       width: 100%;
+///     }
+///     .element:last-child {
+///       margin-right: 0;
+///     }
+///   }
+
+@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
+  @if length($query) == 1 {
+    $query: $default-feature nth($query, 1) $total-columns;
+  } @else if is-even(length($query)) {
+    $query: append($query, $total-columns);
+  }
+
+  @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
+  }
+
+  @return $query;
+}

data/assets/stylesheets/neat/functions/_private.scss

@@ -0,0 +1,114 @@
+// Not function for Libsass compatibility
+// https://github.com/sass/libsass/issues/368
+@function is-not($value) {
+  @return if($value, false, true);
+}
+
+// Checks if a number is even
+@function is-even($int) {
+  @return $int % 2 == 0;
+}
+
+// Checks if an element belongs to a list or not
+@function belongs-to($tested-item, $list) {
+  @return is-not(not-belongs-to($tested-item, $list));
+}
+
+@function not-belongs-to($tested-item, $list) {
+  @return is-not(index($list, $tested-item));
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @return belongs-to(table, $query)
+       or belongs-to(block, $query)
+       or belongs-to(inline-block, $query)
+       or belongs-to(inline, $query);
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  } @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @return $grid-columns;
+}
+
+@function container-shift($shift: $shift) {
+  $parent-columns: $grid-columns !default !global;
+
+  @if length($shift) == 3 {
+    $container-columns: nth($shift, 3);
+    @return $container-columns;
+  } @else if length($shift) == 2 {
+    $container-columns: nth($shift, 2);
+    @return $container-columns;
+  }
+
+  @return $parent-columns;
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: transparent;
+
+  $column-width: flex-grid(1, $grid-columns);
+  $gutter-width: flex-gutter($grid-columns);
+  $column-offset: $column-width;
+
+  $values: ($transparent 0, $color 0);
+
+  @for $i from 1 to $grid-columns*2 {
+    @if is-even($i) {
+      $values: append($values, $transparent $column-offset, comma);
+      $values: append($values, $color $column-offset, comma);
+      $column-offset: $column-offset + $column-width;
+    } @else {
+      $values: append($values, $color $column-offset, comma);
+      $values: append($values, $transparent $column-offset, comma);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: null;
+
+  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: null;
+
+  @if to-upper-case($layout) == "LTR" {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == "left" {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}

data/assets/stylesheets/neat/grid/_box-sizing.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@if $border-box-sizing == true {
+  html { // http://bit.ly/1qk2tVR
+    box-sizing: border-box;
+  }
+
+  * {
+    &,
+    &::after,
+    &::before {
+      box-sizing: inherit;
+    }
+  }
+}

data/assets/stylesheets/neat/grid/_direction-context.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+/// Changes the direction property used by other mixins called in the code block argument.
+///
+/// @param {String} $direction [left-to-right]
+///   Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
+///
+/// @example scss - Usage
+///   @include direction-context(right-to-left) {
+///    .right-to-left-block {
+///      @include span-columns(6);
+///     }
+///   }
+///
+/// @example css - CSS Output
+///   .right-to-left-block {
+///     float: right;
+///      ...
+///   }
+
+@mixin direction-context($direction: left-to-right) {
+  $scope-direction: $layout-direction;
+
+  @if to-lower-case($direction) == "left-to-right" {
+    $layout-direction: LTR !global;
+  } @else if to-lower-case($direction) == "right-to-left" {
+    $layout-direction: RTL !global;
+  }
+
+  @content;
+
+  $layout-direction: $scope-direction !global;
+}

data/assets/stylesheets/neat/grid/_display-context.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+/// Changes the display property used by other mixins called in the code block argument.
+///
+/// @param {String} $display [block]
+///   Display value to be used within the block. Can be `table` or `block`.
+///
+/// @example scss
+///   @include display-context(table) {
+///    .display-table {
+///      @include span-columns(6);
+///     }
+///   }
+///
+/// @example css
+///   .display-table {
+///      display: table-cell;
+///      ...
+///   }
+
+@mixin display-context($display: block) {
+  $scope-display: $container-display-table;
+  $container-display-table: $display == table !global;
+
+  @content;
+
+  $container-display-table: $scope-display !global;
+}