wcc-styles 2.2.3 → 3.0.0.beta1

data/lib/assets/stylesheets/wcc/styles/materials/molecules/_progress-bar.scss

@@ -0,0 +1,62 @@
+/* ==========================================================================
+   Progress Bar.scss
+   ========================================================================== */
+
+// the progress bar element shows a user where they are in a series of
+// transactional steps. an example would be when registering for an event,
+// the user will need to login, answer questions, provide payment, then complete
+
+// container
+.progress-bar-block {
+  margin: -2rem -2rem 3rem;
+}
+
+// progress items container, on a ul
+.progress-bar {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+
+  // progress items, on a li
+  .progress-point {
+    color: rgba($black, .3);
+    text-align: center;
+    padding: 1rem 0;
+    display: inline-block;
+    flex-grow: 1;
+    border-bottom: 2px solid $green; // by default we show the active bar color
+    position: relative;
+
+    // circle element
+    &:after {
+      content: '';
+      display: block;
+      width: 7px;
+      height: 7px;
+      background-color: $green; // by default we show the active bar color
+      border-radius: $global-rounded;
+
+      position: absolute;
+      bottom: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    // the activated step
+    &.active {
+      color: rgba($black, .7);
+
+      // targets all progress points after the .active point
+      // all items after .active are show in gray
+      ~ .progress-point {
+        border-color: $gray-1;
+
+        &:after {
+          background-color: $gray-1;
+        }
+      }
+    }
+  }
+}
+

data/lib/assets/stylesheets/wcc/styles/{snippets → materials/molecules}/_top_nav.scss

@@ -1,7 +1,14 @@
 /*===========================================
-  Header Styles
+  Top Nav
 ============================================*/
 
+// *TODO--need to move away from styling `header` element as
+// main nav for all app screens. The `header` doesn't necessarily
+// describe site navigation, and there can be multiple `header`s on a page
+// more on the header element: http://html5doctor.com/the-header-element/
+// *BACKWARDS-INCOMPATIBLE--once we drop the `header` element styles will
+// not target past apps, the .top-nav class will need to be added
+.top-nav,
 header {
   width: 100%;
   background-color: white;
@@ -11,6 +18,7 @@ header {
   font-weight: 300;
   padding: 0px 30px;
   z-index: 1000;
+  margin-bottom: 5rem;
 
   .logo-holder {
     display: inline-block;

data/lib/assets/stylesheets/wcc/styles/materials/organisms/_sheets.scss

@@ -0,0 +1,60 @@
+// Sheets.scss
+
+// Sheet
+// -----------------
+// sheets are areas that contain content. Sheets are versatile 
+// and can be used for content emphasis. Sheets have a header, 
+// content, and footer. Each are optional, though allow for 
+// extra custimization.
+.sheet {
+  background-color: $white;
+  padding: $spacing-default;
+  margin-bottom: $spacing-default;
+}
+
+// Sheet Header
+// ------------
+.sheet-header {
+  text-align: center;
+  margin-bottom: 3rem;
+
+  .sheet-title {
+    font-size: 26px;
+    line-height: 1;
+    margin: 1.5rem 0;
+  }
+
+  hr {
+    max-width: 4rem;
+    border-width: 3px;
+  }
+}
+
+.sheet-description {
+  margin: $spacing-default auto;
+  max-width: 24em;
+  text-align: center;
+}
+
+// Sheet Callout
+// -------------
+.sheet-callout {
+  background-color: #efefef;
+  margin: $spacing-default -$spacing-default;
+  padding: $spacing-default;
+}
+
+// Sheet Content
+// -------------
+.sheet-content {
+  margin: $spacing-default 0;
+}
+
+// Sheet Footer
+// ------------
+.sheet-footer {
+  text-align: center;
+  margin-top: $spacing-default;
+
+  @include clearfix();
+}

data/lib/assets/stylesheets/wcc/styles/materials/pages/_auth.scss

@@ -0,0 +1,12 @@
+// Auth.scss
+// -----------------------
+// contains specific styles for all auth pages
+// includes Register, Login, Password Reset, etc
+
+#auth {
+  @include background-image(#26272c, image-url("wcc/styles/bg/mountain-valley.jpg"), no-repeat, center center, cover);
+
+  .sheet {
+    margin: 15rem 0;
+  }
+}

data/lib/assets/stylesheets/wcc/styles/materials/templates/_transactional.scss

@@ -0,0 +1,44 @@
+// ==========================================================================
+// Transaction Template
+// ==========================================================================
+
+
+.transactional-page {
+  background-color: $body-bg;
+  position: relative;
+  
+  // on transactional pages we include a faux header bg
+  &:before {
+    content: ' ';
+    display: block;
+    width: 100%;
+    height: 24rem;
+    background: $gradient-blue;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  
+  .sheet {
+    border-radius: 3px;
+    margin-bottom: 3rem;
+  }
+}
+
+.persistent-block {
+  text-align: center;
+  width: 80%;
+  position: absolute;
+  top: -11.5rem; // this is a magic number for proper placement
+  z-index: 9999;
+
+  .persistent-title {
+    margin: 0;
+  }
+
+  .persistent-meta {
+    color: #959595;
+  }
+}

data/lib/assets/stylesheets/wcc/styles/modules/_mixins.scss

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   Mixins.scss
+   ========================================================================== */
+
+
+
+// Breakpoint Mixin
+// ----------------
+// writing out CSS media queries by hand is a pain,
+// to write awesome media queries simply @include this mixin
+// Example:
+//  @include breakpoint($small) {
+//    write your code here 
+//  }
+@mixin breakpoint($val) {
+  @media #{$val} {
+    @content;
+  }
+}
+
+
+
+// TODO: sort this out
+// this is temp
+@mixin primary-font {
+  font-family: 'Open Sans', sans-serif;
+}
+
+@mixin secondary-font {
+  font-family: 'Droid Serif', serif;
+}
+
+@mixin secondary-font-black {
+  font-family: 'Droid Serif', serif;
+}
+
+
+
+
+//*TODO-sort this out, used somewhere...
+@mixin button-theme($button-color) {
+
+  border-color: $button-color;
+  background-color: $button-color;
+
+  &:hover {
+     background-color: darken($button-color, 6%);
+  }
+
+  &:active {
+     background-color: darken($button-color, 6%);
+  }
+
+  &.ghost {
+    background-color: transparent;
+    border: 2px solid $button-color;
+    color: $button-color;
+  }
+}
+
+
+// Clearfix Mixin
+// --------------
+// You can @include clearfix(); on any element
+// to clear floats and such. Why not @extend?
+// Because @extend doesn't work inside of media
+// queries and will eventually bite you in the butt
+@mixin clearfix() {
+  & {
+    *zoom: 1;
+  }
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Clearfix Class
+// --------------
+// here ya go, if you really want to add a .clearfix
+// class in the markup you can, but it's always better
+// to pass something like this symantically with Sass
+.clearfix {
+  @include clearfix();
+}
+
+
+// Content Shadow
+// --------------
+// to add a box shadow with depth to a content block, pass
+// this mixin to an element, like this @include content-shadow(2)
+// where the parameter number is the shadow depth you want to add
+@mixin content-shadow($depth) {
+  box-shadow: 0 (1px * $depth) (4px * $depth) rgba(#1d1e1f, 0.1);
+}
+
+
+// Background Image
+// ----------------
+// a simple straight forward mixin for adding a background image
+// to an element without having to write all lines of bg code
+@mixin background-image( $bg-color, $bg-image, $bg-repeat, $bg-position, $bg-size ) {
+  background-color: $bg-color;
+  background-image: $bg-image;
+  background-repeat: $bg-repeat;
+  background-position: $bg-position;
+  background-size: $bg-size;
+}

data/lib/assets/stylesheets/wcc/styles/modules/_vars.scss

@@ -0,0 +1,204 @@
+/* ==========================================================================
+   Variables.scss
+   ========================================================================== */
+
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Colors
+//   2. Typography
+//   3. Globals
+//   4. Breakpoints
+//   5. Media Queries
+//   6. Buttons
+//   7. Content
+//  -----------------------------
+
+
+
+
+// ==========================================================================
+// 1. Colors
+// ==========================================================================
+
+
+$red: #962D27;
+$orange: #EB7F4C;
+$dark-orange: darken($orange, 2%);
+$yellow: #EBD15C;
+$green: #00e581;
+$blue: #377CAD;
+$pink: #FF3366;
+
+$neutral1: #F6F5F3;
+$neutral2: darken($neutral1, 2%);
+$neutral3: darken($neutral2, 2%);
+$neutral4: darken($neutral3, 2%);
+$neutral5: darken($neutral4, 2%);
+$neutral6: darken($neutral5, 2%);
+$neutral7: darken($neutral6, 2%);
+$neutral8: darken($neutral7, 2%);
+$neutral9: darken($neutral8, 2%);
+$neutral10: darken($neutral9, 2%);
+
+$lightest-grey: #D9D9D9;
+$light-grey: #999999;
+$medium-grey: #595959;
+$dark-grey: #393939;
+
+$text: #292929;
+$light-text: #a6a6a6;
+
+
+
+$white: #fff;
+$gray-1: #e5e5e5;
+$gray-2: #ccc;
+$gray-3: #bfbfbf;
+$gray-4: #999;
+$gray-5: #7f7f7f;
+$gray-6: #666;
+$gray-7: #4c4c4c;
+$gray-8: #333;
+$gray-9: #191919;
+$black: #000;
+
+$body-bg: #f4f9f9;
+
+$gradient-blue: linear-gradient(to top right,#257491,#008b86);
+
+
+// ==========================================================================
+// 2. Typography
+// ==========================================================================
+
+/*
+$serif-font: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+$sans-font: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$icon-font: "Ionicons";
+
+$body-font-family: $serif-font;
+
+$header-font-family: $sans-font;
+$header-font-weight: 700;
+$header-font-style: normal;
+$header-color: $black;
+$header-line-height: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-text-rendering: optimizeLegibility;
+
+$h1-size: 1.8rem;
+$h2-size: 1.6rem;
+$h3-size: 1.4rem;
+$h4-size: 1.2rem;
+$h5-size: 1rem;
+$h6-size: .8rem;
+
+$header-small-font-color: rgba($header-color, .4);
+$paragraph-font-size: 1rem;
+$paragraph-lineheight: 1.6;
+$paragraph-margin: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$paragraph-anchor-color: $primary-color;
+
+$small-font-size: 80%;
+
+$blockquote-color: $gray-5;
+$blockquote-padding: 2rem;
+$blockquote-border: 4px solid $primary-color;
+
+
+
+
+// ==========================================================================
+// 3. Globals
+// ==========================================================================
+
+
+$global-font-size: 100%;
+$global-lineheight: 1.5;
+$global-letter-spacing: .03em;
+
+$body-bg: $white;
+$body-antialiased: true;
+
+$global-width: rem-calc(1200);
+
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+
+
+
+$global-transition: .2s all linear;
+$global-text-rendering: optimizeLegibility;
+
+*/
+
+$global-radius: 4px;
+$global-rounded: 999px;
+
+
+// ==========================================================================
+// 4. Breakpoints
+// ==========================================================================
+
+
+// Edit the breakpoints to your liking
+// When writing Sass, always use varibles with breakpoints if possible
+$small-breakpoint   : 0; // should stay at zero
+$medium-breakpoint  : 640px;
+$large-breakpoint   : 1024px;
+$xlarge-breakpoint  : 1200px;
+$xxlarge-breakpoint : 1440px;
+
+
+
+
+// ==========================================================================
+// 5. Media Queries
+// ==========================================================================
+
+
+// Set to true for debugging message
+// See debugging message code in partials/_utilities.scss
+$show-query: false;
+
+// Set media query breakpoints to be used with @mixin breakpoint()
+// See @mixin breakpoint() specifics in modules/_mixins.scss
+$small        :  (min-width: $small-breakpoint);
+$small-only   :  (min-width: $small-breakpoint) and (max-width: $medium-breakpoint);
+$small-down   :  (max-width: $medium-breakpoint);
+
+$medium       :  (min-width: $medium-breakpoint);
+$medium-only  :  (min-width: $medium-breakpoint) and (max-width: $large-breakpoint);
+$medium-down  :  (max-width: $large-breakpoint);
+
+$large        :  (min-width: $large-breakpoint);
+$large-only   :  (min-width: $large-breakpoint) and (max-width: $xlarge-breakpoint);
+$large-down   :  (max-width: $xlarge-breakpoint);
+
+$xlarge       :  (min-width: $xlarge-breakpoint);
+$xlarge-only  :  (min-width: $xlarge-breakpoint) and (max-width: $xxlarge-breakpoint);
+$xlarge-down  :  (max-width: $xxlarge-breakpoint);
+
+$xxlarge      :  (min-width: $xxlarge-breakpoint);
+
+
+// ==========================================================================
+// 6. Buttons
+// ==========================================================================
+
+
+
+// ==========================================================================
+// 7. Content
+// ==========================================================================
+
+$spacing-small: 1rem;
+$spacing-default: 2rem;
+$spacing-medium: 3rem;
+$spacing-large: 4rem;

data/lib/assets/stylesheets/wcc/styles.scss

@@ -1,2 +1,112 @@
-@import "styles/base";
-@import "styles/extensions/all";
+/**
+ * 
+ * Watermark Pattern Library
+ * ==========================================================================
+ *
+ * patterns.watermark.org
+ * https://rubygems.org/gems/wcc-styles
+ *
+ */
+
+
+// third party imports
+@import url(//fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:300,400,600,700);
+@import "compass/layout/stretching";
+@import "compass";
+
+
+
+
+// ==========================================================================
+// 1. Modules
+// ==========================================================================
+//
+// modules are reserved for sass code that do not output CSS. 
+// For example, mixin declarations, functions, and variables.
+@import "styles/modules/vars";
+@import "styles/modules/mixins";
+
+
+
+
+// ==========================================================================
+// 2. Base
+// ==========================================================================
+//
+// code related to the basic general structure; this can include 
+// a grid system, browser reset, global generalities
+@import "styles/base/base";
+@import "styles/base/normalize";
+@import "styles/base/grid";
+
+@import "styles/base/utilities/box-shadow";
+@import "styles/base/utilities/breakpoint-debugger";
+
+
+
+
+// ==========================================================================
+// 3. Materials
+// ==========================================================================
+//
+// materials are the building blocks all all web design
+// materials are categorized as Atoms, Molecules, Organisms,
+// and Pages. for more info and a deeper understanding of 
+// the principles of Atomic design, read Brad Frost's book:
+// http://atomicdesign.bradfrost.com/table-of-contents/
+
+//
+// 3.1 Atoms
+// ==========================================================================
+@import "styles/materials/atoms/typography";
+@import "styles/materials/atoms/anchor.scss";
+@import "styles/materials/atoms/icon.scss";
+@import "styles/materials/atoms/buttons";
+@import "styles/materials/atoms/tables";
+@import "styles/materials/atoms/forms";
+@import "styles/materials/atoms/labels";
+@import "styles/materials/atoms/datetimepicker";
+@import "styles/materials/atoms/elements";
+@import "styles/materials/atoms/wells";
+
+//
+// 3.2 Molecules
+// ==========================================================================
+@import "styles/materials/molecules/pagination";
+@import "styles/materials/molecules/navs";
+@import "styles/materials/molecules/top_nav";
+@import "styles/materials/molecules/alerts";
+@import "styles/materials/molecules/progress-bar";
+@import "styles/materials/molecules/event-receipt";
+
+//
+// 3.3 Organisms
+// ==========================================================================
+@import "styles/materials/organisms/sidebar_slideout";
+@import "styles/materials/organisms/sheets";
+
+//
+// 3.4 Templates
+// ==========================================================================
+@import "styles/materials/templates/transactional";
+
+//
+// 3.5 Pages
+// ==========================================================================
+@import "styles/materials/pages/auth";
+@import "styles/materials/pages/admin";
+
+
+
+
+// ==========================================================================
+// 4. Vendor
+// ==========================================================================
+//
+// code directly from third party vendors. ideally vendor
+// code would never be directly edited, only overwritten
+// so the code could be updated or patched in the future
+@import "styles/vendor/icons";
+@import "styles/vendor/custom_selects";
+@import "styles/vendor/custom_file_inputs";
+@import "styles/vendor/selectize";

data/lib/wcc/styles/version.rb

@@ -1,5 +1,5 @@
 module WCC
   module Styles
-    VERSION = "2.2.3"
+    VERSION = "3.0.0.beta1"
   end
 end