nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/base-variables/_border-radius.sass

@@ -0,0 +1,27 @@
+// Border Radius
+
+$border-rad-lightest:     1px
+$border-rad-lighter:      2px
+$border-rad-light:        4px
+$border-rad-normal:       0
+$border-rad-heavy:        5px
+$border-rad-heavier:      6px
+$border-rad-heaviest:     7px
+$border-rad-mega:         1000px
+
+
+// Bootstrap
+$border-radius-base:      $border-rad-light
+$border-radius-large:     $border-rad-heavy
+$border-radius-small:     $border-rad-lighter
+$border-radius:           $border-rad-light
+$border-radius-lg:        $border-rad-heavy
+$border-radius-sm:        $border-rad-lighter
+
+
+$panel-border-radius:     $border-rad-light
+
+
+
+// Change to borders
+$border-color: $sky

data/sass-mixins/base-variables/_color-bootstrap.scss

@@ -0,0 +1,62 @@
+// BOOTSTRAP COLORS
+$gray:                      $gray-5;
+$gray-light:                $gray-3;
+$inverse:                   $white;
+$text-color:                $black;
+
+$gray-lightest:             $gray-2;
+
+
+// Brand colors
+$brand-primary:             $power-royal;
+$brand-secondary:           $gray-2; // Used all over...as accent...maybe background?
+$brand-success:             $power-green;
+$brand-warning:             $medium-yellow;
+$brand-danger:              $power-red;
+$brand-info:                $power-blue;
+
+
+$success-color:             $power-green;
+$success-bg-color:          $p-green-opacity-5;
+$danger-color:              $power-red;
+$danger-bg-color:           $p-red-opacity-5;
+$primary-color:             $power-royal;
+$primary-bg-color:          $p-royal-opacity-5;
+$info-color:                $power-navy;
+$info-color-alt:            $p-blue-opacity-8;
+$info-bg-color:             $p-blue-opacity-2;
+$warning-color:             $power-blue;
+$warning-bg-color:          $p-blue-opacity-5;
+
+
+
+// SPECIFIC UI
+$form-border-color:         $sky;
+$form-label-color:          #7F8FA4; // get from new blues
+$body-bg:                   $white;
+$text-color:                $gray-9;
+$link-color:                $power-navy;
+$link-hover-color:          $power-blue;
+$component-active-color:    $white;
+$component-active-bg:       $power-royal;
+
+
+
+
+
+// Type
+//
+//##
+
+//** Text muted color
+$text-muted:                  $gray-light;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light;
+//** Headings small color
+$headings-small-color:        mix($brand-primary, $inverse, 12%);
+//** Blockquote small color
+$blockquote-small-color:      inherit;
+//** Blockquote border color
+$blockquote-border-color:     mix($brand-primary, $inverse, 12%);
+//** Page header border color
+$page-header-border-color:    mix($brand-primary, $inverse, 12%);

data/sass-mixins/base-variables/_color-deprecated.scss

@@ -0,0 +1,26 @@
+// Do not use
+$dark-grey:        $gray-7;
+$dark-gray:        $dark-grey;
+$power-grey:       $gray-2;
+$power-gray:       $power-grey;
+$power-black:      $black;
+$ultralight-grey:  $gray-1;
+$ultralight-gray:  $ultralight-grey;
+$light-grey:       $gray-2;
+$light-gray:       $light-grey;
+$light-grey-alt:   $gray-3;
+$light-gray-alt:   $light-grey-alt;
+$medium-grey:      $gray-4;
+$medium-gray:      $medium-grey;
+$medium-dark-grey: $gray-5;
+$medium-dark-gray: $medium-dark-grey;
+$light-orange:     $light-yellow;
+$dark-yellow:      $dark-orange;
+$light-red:        $p-red-opacity-1;
+$medium-red:       $power-red;
+$dark-red:         $power-red;
+$lavender:         $light-blue;
+$dark-purple:      $medium-purple;
+$light-teal:       $power-blue;
+$dark-teal:        $medium-teal;
+$dark-blue:        $power-royal;

data/sass-mixins/base-variables/_color-ui-elements.scss

@@ -0,0 +1,20 @@
+// PULL BOOTSTRAP OVERRIDES
+// ************************************************
+// TALK ABOUT THESE
+// ************************************************
+
+
+
+// Should move closer to related SASS
+// These are bootstrap!
+// Update values to main
+
+// Move
+$header-color:                  $dark-blue;
+$title-color:                   $dark-blue;
+
+// Move to table
+$table-bg-color:                $light-grey;
+$table-bg-stripe-color:         $light-grey-alt;
+$table-bg-active-color:         $medium-blue;
+$table-bg-active-stripe-color:  $light-blue;

data/sass-mixins/base-variables/_colors-export.scss

@@ -0,0 +1,13 @@
+@import "colors";
+
+:export {
+
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($power-colors);
+  @include export-colors($interface-colors);
+  @include export-colors($opacity-colors);
+}

data/sass-mixins/base-variables/_colors-export.scss.flow

@@ -0,0 +1,92 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'black-opacity-1': string;
+  +'black-opacity-2': string;
+  +'black-opacity-3': string;
+  +'black-opacity-4': string;
+  +'black-opacity-5': string;
+  +'black-opacity-6': string;
+  +'black-opacity-7': string;
+  +'black-opacity-8': string;
+  +'black-opacity-9': string;
+  +'ink': string;
+  +'ink-dark': string;
+  +'ink-light': string;
+  +'ink-lighter': string;
+  +'ink-lightest': string;
+  +'p-blue-opacity-1': string;
+  +'p-blue-opacity-2': string;
+  +'p-blue-opacity-3': string;
+  +'p-blue-opacity-4': string;
+  +'p-blue-opacity-5': string;
+  +'p-blue-opacity-6': string;
+  +'p-blue-opacity-7': string;
+  +'p-blue-opacity-8': string;
+  +'p-blue-opacity-9': string;
+  +'p-gold-opacity-1': string;
+  +'p-gold-opacity-2': string;
+  +'p-gold-opacity-3': string;
+  +'p-gold-opacity-4': string;
+  +'p-gold-opacity-5': string;
+  +'p-gold-opacity-6': string;
+  +'p-gold-opacity-7': string;
+  +'p-gold-opacity-8': string;
+  +'p-gold-opacity-9': string;
+  +'p-green-opacity-1': string;
+  +'p-green-opacity-2': string;
+  +'p-green-opacity-3': string;
+  +'p-green-opacity-4': string;
+  +'p-green-opacity-5': string;
+  +'p-green-opacity-6': string;
+  +'p-green-opacity-7': string;
+  +'p-green-opacity-8': string;
+  +'p-green-opacity-9': string;
+  +'p-navy-opacity-1': string;
+  +'p-navy-opacity-2': string;
+  +'p-navy-opacity-3': string;
+  +'p-navy-opacity-4': string;
+  +'p-navy-opacity-5': string;
+  +'p-navy-opacity-6': string;
+  +'p-navy-opacity-7': string;
+  +'p-navy-opacity-8': string;
+  +'p-navy-opacity-9': string;
+  +'p-red-opacity-1': string;
+  +'p-red-opacity-2': string;
+  +'p-red-opacity-3': string;
+  +'p-red-opacity-4': string;
+  +'p-red-opacity-5': string;
+  +'p-red-opacity-6': string;
+  +'p-red-opacity-7': string;
+  +'p-red-opacity-8': string;
+  +'p-red-opacity-9': string;
+  +'p-royal-opacity-1': string;
+  +'p-royal-opacity-2': string;
+  +'p-royal-opacity-3': string;
+  +'p-royal-opacity-4': string;
+  +'p-royal-opacity-5': string;
+  +'p-royal-opacity-6': string;
+  +'p-royal-opacity-7': string;
+  +'p-royal-opacity-8': string;
+  +'p-royal-opacity-9': string;
+  +'power-blue': string;
+  +'power-gold': string;
+  +'power-green': string;
+  +'power-navy': string;
+  +'power-navy-darker': string;
+  +'power-red': string;
+  +'power-royal': string;
+  +'sky': string;
+  +'sky-dark': string;
+  +'sky-light': string;
+  +'sky-lighter': string;
+  +'white-opacity-1': string;
+  +'white-opacity-2': string;
+  +'white-opacity-3': string;
+  +'white-opacity-4': string;
+  +'white-opacity-5': string;
+  +'white-opacity-6': string;
+  +'white-opacity-7': string;
+  +'white-opacity-8': string;
+  +'white-opacity-9': string;
+|};

data/sass-mixins/base-variables/_colors.scss

@@ -0,0 +1,267 @@
+// Note @imports are not compiling for our ruby color docs. For now hard code imported mixins, functions, and variables
+// Examples
+// shade($white, 10%); // function
+// rgba($power-navy, $opacity-1); // variable
+
+
+// POWER COLORS
+$power-navy:        #004976;
+$power-navy-darker: #1F2B52;
+$power-gold:        #daaa00;
+$power-blue:        #00a3e0;
+$power-red:         #f9423a;
+$power-royal:       #0072ce;
+$power-green:       #00bf6f;
+
+$power-colors: (
+  power-navy: $power-navy,
+  power-navy-darker: $power-navy-darker,
+  power-gold: $power-gold,
+  power-blue: $power-blue,
+  power-red: $power-red,
+  power-royal: $power-royal,
+  power-green: $power-green
+);
+
+
+// GRAY COLORS
+$white: #ffffff;
+$gray-1: mix(#000, #ffffff, 5%);
+$gray-2: mix(#000, #ffffff, 10%);
+$gray-3: mix(#000, #ffffff, 20%);
+$gray-4: mix(#000, #ffffff, 30%);
+$gray-5: mix(#000, #ffffff, 40%);
+$gray-6: mix(#000, #ffffff, 50%);
+$gray-7: mix(#000, #ffffff, 60%);
+$gray-8: mix(#000, #ffffff, 70%);
+$gray-9: mix(#000, #ffffff, 80%);
+$black: #1A1A1A;
+
+$gray-colors: (
+  white: $white,
+  gray-1: $gray-1,
+  gray-2: $gray-2,
+  gray-3: $gray-3,
+  gray-4: $gray-4,
+  gray-5: $gray-5,
+  gray-6: $gray-6,
+  gray-7: $gray-7,
+  gray-8: $gray-8,
+  gray-9: $gray-9,
+  black: $black
+);
+
+
+// INTERFACE COLORS
+$sky-lighter:     #F9FAFB;
+$sky-light:       #F4F6F8;
+$sky:             #DFE3E8;
+$sky-dark:        #C4CDD5;
+$ink-lightest:    #919EAB;
+$ink-lighter:     #637381;
+$ink-light:       #454F5B;
+$ink:             #273142;
+$ink-dark:        #212B36;
+
+$interface-colors: (
+  sky-lighter:   $sky-lighter,
+  sky-light:     $sky-light,
+  sky:           $sky,
+  sky-dark:      $sky-dark,
+  ink-lightest:  $ink-lightest,
+  ink-lighter:   $ink-lighter,
+  ink-light:     $ink-light,
+  ink:           $ink,
+  ink-dark:      $ink-dark
+);
+
+
+// OPACITY COLOR VARIATIONS
+$p-navy-opacity-1: rgba($power-navy, .1);
+$p-navy-opacity-2: rgba($power-navy, .2);
+$p-navy-opacity-3: rgba($power-navy, .3);
+$p-navy-opacity-4: rgba($power-navy, .4);
+$p-navy-opacity-5: rgba($power-navy, .5);
+$p-navy-opacity-6: rgba($power-navy, .6);
+$p-navy-opacity-7: rgba($power-navy, .7);
+$p-navy-opacity-8: rgba($power-navy, .8);
+$p-navy-opacity-9: rgba($power-navy, .9);
+
+$p-gold-opacity-1: rgba($power-gold, .1);
+$p-gold-opacity-2: rgba($power-gold, .2);
+$p-gold-opacity-3: rgba($power-gold, .3);
+$p-gold-opacity-4: rgba($power-gold, .4);
+$p-gold-opacity-5: rgba($power-gold, .5);
+$p-gold-opacity-6: rgba($power-gold, .6);
+$p-gold-opacity-7: rgba($power-gold, .7);
+$p-gold-opacity-8: rgba($power-gold, .8);
+$p-gold-opacity-9: rgba($power-gold, .9);
+
+$p-blue-opacity-1: rgba($power-blue, .1);
+$p-blue-opacity-2: rgba($power-blue, .2);
+$p-blue-opacity-3: rgba($power-blue, .3);
+$p-blue-opacity-4: rgba($power-blue, .4);
+$p-blue-opacity-5: rgba($power-blue, .5);
+$p-blue-opacity-6: rgba($power-blue, .6);
+$p-blue-opacity-7: rgba($power-blue, .7);
+$p-blue-opacity-8: rgba($power-blue, .8);
+$p-blue-opacity-9: rgba($power-blue, .9);
+
+$p-red-opacity-1: rgba($power-red, .1);
+$p-red-opacity-2: rgba($power-red, .2);
+$p-red-opacity-3: rgba($power-red, .3);
+$p-red-opacity-4: rgba($power-red, .4);
+$p-red-opacity-5: rgba($power-red, .5);
+$p-red-opacity-6: rgba($power-red, .6);
+$p-red-opacity-7: rgba($power-red, .7);
+$p-red-opacity-8: rgba($power-red, .8);
+$p-red-opacity-9: rgba($power-red, .9);
+
+$p-royal-opacity-1: rgba($power-royal, .1);
+$p-royal-opacity-2: rgba($power-royal, .2);
+$p-royal-opacity-3: rgba($power-royal, .3);
+$p-royal-opacity-4: rgba($power-royal, .4);
+$p-royal-opacity-5: rgba($power-royal, .5);
+$p-royal-opacity-6: rgba($power-royal, .6);
+$p-royal-opacity-7: rgba($power-royal, .7);
+$p-royal-opacity-8: rgba($power-royal, .8);
+$p-royal-opacity-9: rgba($power-royal, .9);
+
+$p-green-opacity-1: rgba($power-green, .1);
+$p-green-opacity-2: rgba($power-green, .2);
+$p-green-opacity-3: rgba($power-green, .3);
+$p-green-opacity-4: rgba($power-green, .4);
+$p-green-opacity-5: rgba($power-green, .5);
+$p-green-opacity-6: rgba($power-green, .6);
+$p-green-opacity-7: rgba($power-green, .7);
+$p-green-opacity-8: rgba($power-green, .8);
+$p-green-opacity-9: rgba($power-green, .9);
+
+$white-opacity-1: rgba($white, .1);
+$white-opacity-2: rgba($white, .2);
+$white-opacity-3: rgba($white, .3);
+$white-opacity-4: rgba($white, .4);
+$white-opacity-5: rgba($white, .5);
+$white-opacity-6: rgba($white, .6);
+$white-opacity-7: rgba($white, .7);
+$white-opacity-8: rgba($white, .8);
+$white-opacity-9: rgba($white, .9);
+
+$black-opacity-1: rgba(#000, .1);
+$black-opacity-2: rgba(#000, .2);
+$black-opacity-3: rgba(#000, .3);
+$black-opacity-4: rgba(#000, .4);
+$black-opacity-5: rgba(#000, .5);
+$black-opacity-6: rgba(#000, .6);
+$black-opacity-7: rgba(#000, .7);
+$black-opacity-8: rgba(#000, .8);
+$black-opacity-9: rgba(#000, .9);
+
+$opacity-colors: (
+  p-navy-opacity-1: $p-navy-opacity-1,
+  p-navy-opacity-2: $p-navy-opacity-2,
+  p-navy-opacity-3: $p-navy-opacity-3,
+  p-navy-opacity-4: $p-navy-opacity-4,
+  p-navy-opacity-5: $p-navy-opacity-5,
+  p-navy-opacity-6: $p-navy-opacity-6,
+  p-navy-opacity-7: $p-navy-opacity-7,
+  p-navy-opacity-8: $p-navy-opacity-8,
+  p-navy-opacity-9: $p-navy-opacity-9,
+
+  p-gold-opacity-1: $p-gold-opacity-1,
+  p-gold-opacity-2: $p-gold-opacity-2,
+  p-gold-opacity-3: $p-gold-opacity-3,
+  p-gold-opacity-4: $p-gold-opacity-4,
+  p-gold-opacity-5: $p-gold-opacity-5,
+  p-gold-opacity-6: $p-gold-opacity-6,
+  p-gold-opacity-7: $p-gold-opacity-7,
+  p-gold-opacity-8: $p-gold-opacity-8,
+  p-gold-opacity-9: $p-gold-opacity-9,
+
+  p-blue-opacity-1: $p-blue-opacity-1,
+  p-blue-opacity-2: $p-blue-opacity-2,
+  p-blue-opacity-3: $p-blue-opacity-3,
+  p-blue-opacity-4: $p-blue-opacity-4,
+  p-blue-opacity-5: $p-blue-opacity-5,
+  p-blue-opacity-6: $p-blue-opacity-6,
+  p-blue-opacity-7: $p-blue-opacity-7,
+  p-blue-opacity-8: $p-blue-opacity-8,
+  p-blue-opacity-9: $p-blue-opacity-9,
+
+  p-red-opacity-1: $p-red-opacity-1,
+  p-red-opacity-2: $p-red-opacity-2,
+  p-red-opacity-3: $p-red-opacity-3,
+  p-red-opacity-4: $p-red-opacity-4,
+  p-red-opacity-5: $p-red-opacity-5,
+  p-red-opacity-6: $p-red-opacity-6,
+  p-red-opacity-7: $p-red-opacity-7,
+  p-red-opacity-8: $p-red-opacity-8,
+  p-red-opacity-9: $p-red-opacity-9,
+
+  p-royal-opacity-1: $p-royal-opacity-1,
+  p-royal-opacity-2: $p-royal-opacity-2,
+  p-royal-opacity-3: $p-royal-opacity-3,
+  p-royal-opacity-4: $p-royal-opacity-4,
+  p-royal-opacity-5: $p-royal-opacity-5,
+  p-royal-opacity-6: $p-royal-opacity-6,
+  p-royal-opacity-7: $p-royal-opacity-7,
+  p-royal-opacity-8: $p-royal-opacity-8,
+  p-royal-opacity-9: $p-royal-opacity-9,
+
+  p-green-opacity-1: $p-green-opacity-1,
+  p-green-opacity-2: $p-green-opacity-2,
+  p-green-opacity-3: $p-green-opacity-3,
+  p-green-opacity-4: $p-green-opacity-4,
+  p-green-opacity-5: $p-green-opacity-5,
+  p-green-opacity-6: $p-green-opacity-6,
+  p-green-opacity-7: $p-green-opacity-7,
+  p-green-opacity-8: $p-green-opacity-8,
+  p-green-opacity-9: $p-green-opacity-9,
+
+  white-opacity-1: $white-opacity-1,
+  white-opacity-2: $white-opacity-2,
+  white-opacity-3: $white-opacity-3,
+  white-opacity-4: $white-opacity-4,
+  white-opacity-5: $white-opacity-5,
+  white-opacity-6: $white-opacity-6,
+  white-opacity-7: $white-opacity-7,
+  white-opacity-8: $white-opacity-8,
+  white-opacity-9: $white-opacity-9,
+
+  black-opacity-1: $black-opacity-1,
+  black-opacity-2: $black-opacity-2,
+  black-opacity-3: $black-opacity-3,
+  black-opacity-4: $black-opacity-4,
+  black-opacity-5: $black-opacity-5,
+  black-opacity-6: $black-opacity-6,
+  black-opacity-7: $black-opacity-7,
+  black-opacity-8: $black-opacity-8,
+  black-opacity-9: $black-opacity-9
+);
+
+// Highlight Colors
+$light-yellow:      #fffcda;
+$medium-yellow:     #FFFF9E;
+$light-blue:        #F0F3F8;
+$highlight-colors: (light-blue: $light-blue, light-yellow: $light-yellow, medium-yellow: $medium-yellow);
+
+
+// Off Brand Colors
+$alex-yellow:       #f8eb30;
+$pine-green:        #27AE60;
+$online-green:      #2ecc71;
+$medium-blue:       mix($black, $light-blue, 10%);
+$dark-orange:       #FF7800;
+$light-purple:      #9b59b6;
+$medium-purple:     #8e44ad;
+$medium-teal:       #44C0C1;
+$off-brand-colors: (alex-yellow: $alex-yellow, pine-green: $pine-green, online-green: $online-green, medium-blue: $medium-blue, dark-orange: $dark-orange, light-purple: $light-purple, medium-purple: $medium-purple, medium-teal: $medium-teal);
+
+
+@import "color-deprecated";     // Set out to pasture
+
+// Move to general specific component sass or general bootstrap variables
+@import "color-bootstrap";      // Bootrtap Element Coloring
+// Move to general specific component sass or general bootstrap variables
+
+@import "color-ui-elements";    // Element Specific Coloring // Not sure we need this here CSS MODULES