wcc-styles 0.1.0

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

@@ -0,0 +1,28 @@
+// Color variables (SASS Only) - Managed in  /sass/variables/_colors.scss
+
+$red: #962D27;
+$orange: #EB7F4C;
+$dark-orange: darken($orange, 2%);
+$yellow: #EBD15C;
+$green: #53BD67;
+$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;

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

@@ -0,0 +1,14 @@
+@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%);
+  }
+
+}

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

@@ -0,0 +1,382 @@
+// Typography variables (SASS Only) - Managed in  /sass/variables/_typography.scss
+
+@import "colors";
+
+@import url(//fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:300,400,600,700);
+
+//Variables
+$font-size: 100 !default;
+$font-base: 16 * ($font-size/100) !default;
+$line-height: 1.5;
+$measure: $font-base * $line-height;
+
+
+// styles for all headings, in the style of @csswizardry
+%hN {
+  text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
+  line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
+  margin-top: 0;
+}
+
+@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;
+}
+
+small {
+  font-size: 85%;
+}
+
+cite {
+  font-style: normal;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: inherit;
+  font-weight: 500;
+  color: inherit;
+  margin: 0 0 10px 0;
+  padding: 0;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small,
+.h1 small,
+.h2 small,
+.h3 small,
+.h4 small,
+.h5 small,
+.h6 small,
+h1 .small,
+h2 .small,
+h3 .small,
+h4 .small,
+h5 .small,
+h6 .small,
+.h1 .small,
+.h2 .small,
+.h3 .small,
+.h4 .small,
+.h5 .small,
+.h6 .small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999999;
+}
+
+h1 small,
+.h1 small,
+h2 small,
+.h2 small,
+h3 small,
+.h3 small,
+h1 .small,
+.h1 .small,
+h2 .small,
+.h2 .small,
+h3 .small,
+.h3 .small {
+  font-size: 65%;
+}
+
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h4 small,
+.h4 small,
+h5 small,
+.h5 small,
+h6 small,
+.h6 small,
+h4 .small,
+.h4 .small,
+h5 .small,
+.h5 .small,
+h6 .small,
+.h6 .small {
+  font-size: 75%;
+}
+h1,
+.h1 { font-size: 36px; }
+
+h2,
+.h2 { font-size: 30px; }
+
+h3,
+.h3 { font-size: 24px; }
+
+h4,
+.h4 { font-size: 18px; font-weight: 800; }
+
+h5,
+.h5 { font-size: 14px; font-weight: 800; }
+
+h6,
+.h6 {
+  font-size: 12px;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $neutral2;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+}
+
+.lead {
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 200;
+  line-height: 1.4;
+}
+
+@media (min-width: 70px) {
+  .lead {
+    font-size: 21px;
+  }
+}
+small, .small { font-size: 85%; }
+
+cite { font-style: normal; }
+
+.text-left { text-align: left; }
+
+.text-right { text-align: right; }
+
+.text-center { text-align: center; }
+
+.text-justify { text-align: justify; }
+
+.text-muted { color: $light-text; }
+
+.text-primary { color: $text; }
+a.text-primary:hover { color: darken($text, 4%); }
+
+.text-success { color: $green; }
+a.text-success:hover { color: darken($green, 4%); }
+
+.text-warning { color: $orange; }
+a.text-warning:hover { color: darken($orange, 4%); }
+
+.text-danger { color: $red; }
+a.text-danger:hover { color: darken($red, 4%); }
+
+/*===========================================
+  List Styles
+============================================*/
+
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+  margin-bottom: 0;
+}
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+  margin-left: -5px;
+}
+.list-inline > li {
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+dl {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+dt,
+dd {
+  line-height: 1.42857143;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0;
+}
+@media (min-width: 70px) {
+  .dl-horizontal dt {
+    float: left;
+    width: 160px;
+    clear: left;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-horizontal dd {
+    margin-left: 180px;
+  }
+}
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted #999999;
+}
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+/*===========================================
+  Code HTML Styles
+============================================*/
+
+code,
+kbd,
+pre,
+samp {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  white-space: nowrap;
+  border-radius: 2px;
+}
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #ffffff;
+  background-color: #333333;
+  border-radius: 2px;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: #333333;
+  background-color: #f5f5f5;
+  border: 1px solid $neutral4;
+  border-radius: 2px;
+}
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+}
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
+/*===========================================
+  Blockquote Styles
+============================================*/
+
+blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  font-size: 17.5px;
+  border-left: 5px solid #eeeeee;
+}
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
+  margin-bottom: 0;
+}
+blockquote footer,
+blockquote small,
+blockquote .small {
+  display: block;
+  font-size: 80%;
+  line-height: 1.42857143;
+  color: #999999;
+}
+blockquote footer:before,
+blockquote small:before,
+blockquote .small:before {
+  content: '\2014 \00A0';
+}
+.blockquote-reverse,
+blockquote.pull-right {
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid #eeeeee;
+  border-left: 0;
+  text-align: right;
+}
+.blockquote-reverse footer:before,
+blockquote.pull-right footer:before,
+.blockquote-reverse small:before,
+blockquote.pull-right small:before,
+.blockquote-reverse .small:before,
+blockquote.pull-right .small:before {
+  content: '';
+}
+.blockquote-reverse footer:after,
+blockquote.pull-right footer:after,
+.blockquote-reverse small:after,
+blockquote.pull-right small:after,
+.blockquote-reverse .small:after,
+blockquote.pull-right .small:after {
+  content: '\00A0 \2014';
+}
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+address {
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: 1.42857143;
+}

data/lib/wcc/styles.rb

@@ -0,0 +1,16 @@
+module WCC
+  module Styles
+    PROJECT_ROOT = File.expand_path(File.join(__FILE__, "..", "..", ".."))
+  end
+end
+
+if defined?(Rails)
+  require 'coffee-rails'
+  require 'compass-rails'
+  require 'font-awesome-rails'
+  require 'rails-assets-selectize'
+  require 'rails-assets-dropzone'
+  require 'rails-assets-moment'
+  require 'rails-assets-datetimepicker'
+  require 'wcc/styles/engine'
+end

data/lib/wcc/styles/engine.rb

@@ -0,0 +1,32 @@
+module WCC
+  module Styles
+    class Engine < Rails::Railtie
+      initializer 'wcc.styles.append_assets_path', group: :all do |app|
+        app.config.assets.paths.unshift(*[
+          asset_paths("lib/assets"),
+          asset_paths("vendor/assets"),
+        ].flatten)
+      end
+
+      initializer 'wcc.styles.simple_form_watermark', group: :all do |app|
+        require 'wcc/styles/simple_form' if defined?(SimpleForm)
+      end
+
+      initializer 'wcc.styles.add_locales' do |app|
+        config.i18n.railties_load_path.concat(Dir[project_path("config/locales/*.yml")])
+      end
+
+      private
+
+      def asset_paths(root)
+        %w(images javascripts stylesheets).collect do |type|
+          project_path(File.join(root, type))
+        end
+      end
+
+      def project_path(relative_path)
+        File.join(WCC::Styles::PROJECT_ROOT, relative_path)
+      end
+    end
+  end
+end