si_core_styles 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ffb4d1eee8cbe630fcb5c4b5debe280f0d8cf69c
+  data.tar.gz: 4c4f077ff60edb5194020157b19aac6bb5547742
+SHA512:
+  metadata.gz: c47dfc42c17134fffb1fc7de54b351b8e4a5d5a514a4467a461190dbf591120e1a254b5d133945f80e32e8d987a218950532402c133e7fc7be4bfe112ac03bcd
+  data.tar.gz: 6dce7940aba79f6a8219447a577565a1bade350549d0838a660e0b951d1ddb9c965b57a000779a5e3a4e277370e7b4e4349997d060d4d3f2c35b353ad12f8aec

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in si_core_styles.gemspec
+gemspec
+compass

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Paul Northup
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# SiCoreStyles
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+gem "si_core_styles", :git => "git@github.com:paulnorthup/si_core_styles.git"
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install si_core_styles
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/si_core_styles.rb

@@ -0,0 +1,9 @@
+require "si_core_styles/version"
+require "compass"
+
+base_directory = File.join(File.dirname(__FILE__))
+Compass::Frameworks.register('si_core_styles', :path => base_directory)
+
+module SiCoreStyles
+  # Your code goes here...
+end

data/lib/si_core_styles/version.rb

@@ -0,0 +1,3 @@
+module SiCoreStyles
+  VERSION = "0.0.1"
+end

data/lib/stylesheets/_si_core_styles.sass

@@ -0,0 +1 @@
+// This is your framework's main stylesheet. Use it to import all default modules.

data/lib/stylesheets/modules/_mixins.scss

@@ -0,0 +1,443 @@
+/* TODO
+  buttons: add conditional box shadows on buttons for dark backgrounds
+  toggles: rework mixin to account for a light or dark version
+  menus: rework mixin to accept args for background, border colors
+*/
+
+// Helper Mixins
+@mixin centering {
+  margin-left: auto;
+  margin-right: auto;
+  width: 1050px;
+}
+@mixin grayscale-image {
+  filter:  url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
+  filter: gray; /* IE5+ */
+  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
+}
+@mixin greyscale-image {
+  filter:  url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
+  filter: gray; /* IE5+ */
+  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
+}
+@mixin circular-image {
+  @include border-radius( 100% );
+}
+@mixin dark-background {
+  h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, blockquote {
+    color: $white;
+  }
+}
+
+// Typography
+@mixin headline {
+  font-family: 'Open Sans Condensed', sans-serif;
+  font-weight: 700;
+  color: $color-text-headline;
+}
+@mixin dividing-headline ($line-color, $background-color) {
+  font-family: 'Open Sans', sans-serif;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 1px;
+  border-bottom: solid 1px $line-color;
+  /* adjust font size */
+  @include adjust-font-size-to( $h5-font-size );
+  /* pull the border up*/
+  height: 0.9em; 
+  /* push the paragraph down */
+  margin-bottom: 1.4em;
+  /* line cover */
+  &:first-line{
+    background-color: $background-color;
+    padding-left: 4em;
+   }
+  /* additional padding */
+  &:before,
+  &:after{
+   content: '\00a0 \00a0 \00a0 \00a0 \00a0 \00a0'; 
+  } 
+}
+@mixin hero-text {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  color: $color-text-headline;
+  @include adjust-font-size-to( $hero-font-size );
+}
+@mixin lead-text {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  color: $color-text-headline;
+  line-height: 1.3333 * $base-line-height;
+  font-size: $lead-font-size;
+}
+// Forms
+@mixin text-input {
+  @include border-radius;
+  border: none;
+  @include box-shadow( 0 1px 1px $black inset );
+  background: $off-white;
+  color: $grey;
+  padding: 0.75em 1.25em;
+}
+
+// Buttons
+@mixin button-primary {
+  @include transition(none);
+  font-size: $btn-font-size;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight:700;
+  color: $btn-primary-text;
+  padding: 0.7em 4em 0.75em;
+  display: inline-block;
+  border-radius: $default-border-radius;
+  background: $btn-primary-gradient-bottom;
+  @include background-image( $btn-primary-background );
+  border-bottom: 3px solid $btn-primary-border;
+  border-top: 3px solid $btn-primary-gradient-top;
+  border-right: none;
+  border-left: none;
+  &:after {
+    content: "\2192";
+    position: absolute;
+    margin-left: 20px;
+  }
+  &:hover {
+    background: $btn-primary-background-hover;
+    border-top: 3px solid $btn-primary-background-hover;
+  }
+  &:active {
+    border-top: 3px solid $btn-primary-border;
+    border-bottom: 3px solid $btn-primary-gradient-bottom;
+    @include background-image( $btn-primary-background-active );
+  }
+}
+
+@mixin button-secondary {
+  font-size: $btn-font-size;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight:700;
+  padding: 0.7em 4em 0.75em;
+  color: $btn-secondary-text;
+  display: inline-block;
+  border-radius: $default-border-radius;
+  background: $btn-secondary-background;
+  border: 1px solid $btn-secondary-border;
+  &:hover {
+    border: 1px solid $btn-secondary-border-hover;
+  }
+  &:active {
+    background: $btn-secondary-background-active;
+  }
+}
+@mixin button-strong {
+  @include transition(none);
+  font-size: $btn-font-size;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight:700;
+  color: $btn-strong-text;
+  padding: 0.7em 4em 0.75em;
+  display: inline-block;
+  border-radius: $default-border-radius;
+  background: $btn-strong-gradient-bottom;
+  @include background-image( $btn-strong-background );
+  border-bottom: 3px solid $btn-strong-border;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  &:hover {
+    background: $btn-strong-background-hover;
+  }
+  &:active {
+    border-bottom: none;
+    border-top: 3px solid $btn-strong-border-active;
+    @include background-image( $btn-strong-background-active );
+  }
+}
+
+@mixin button-disabled {
+  font-size: $btn-font-size;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight:700;
+  color: $btn-disabled-text;
+  padding: 1em 4em;
+  display: inline-block;
+  border-radius: $default-border-radius;
+  background: $btn-disabled-gradient-bottom;
+  @include background-image( $btn-disabled-background );
+  border-bottom: 3px solid $btn-disabled-border;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+}
+
+
+// Toggle Links
+@mixin toggle-links-light { // apply to <ul> element
+  display: inline-block;
+  @include border-radius;
+  overflow: hidden;
+  @include horizontal-list;
+  li {
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+    text-align: center;
+    border-bottom: 1px solid $tl-border;
+    border-top: 1px solid $white;
+  }
+  a {
+    width: 190px;
+    height: 55px;
+    @include background-image( $tl-background );
+    padding: 1em 0.25em;
+    display: table-cell;
+    vertical-align: middle;
+    text-decoration: none;
+    color: $white;
+    border-left: 1px solid $tl-link-border;
+    border-right: 1px solid transparent;
+    &:hover {
+      @include background-image( $tl-background-hover );
+    }
+    &:active, &.active {
+      @include background-image( $tl-background-active );
+      border-left: 1px solid $tl-link-border-active;
+      border-right: 1px solid $tl-link-border-active;
+    }
+  }
+  li:first-child a {
+    border-left:1px solid transparent;
+  }
+}
+
+@mixin toggle-links-dark{ // apply to <ul> element
+  display: inline-block;
+  @include border-radius;
+  overflow: hidden;
+  @include horizontal-list;
+  li {
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+    text-align: center;
+    border-bottom: 1px solid $tl-dark-border;
+    border-top: 1px solid hsla(205,12%,41%,1);
+  }
+  a {
+    width: 190px;
+    height: 55px;
+    @include background-image( $tl-dark-background );
+    padding: 1em 0.25em;
+    display: table-cell;
+    vertical-align: middle;
+    text-decoration: none;
+    color: $white;
+    border-left: 1px solid $tl-dark-link-border;
+    border-right: 1px solid transparent;
+    &:hover {
+      @include background-image( $tl-dark-background-hover );
+    }
+    &:active, &.active {
+      @include background-image( $tl-dark-background-active );
+      border-left: 1px solid $tl-dark-link-border-active;
+      border-right: 1px solid $tl-dark-link-border-active;
+    }
+  }
+  li:first-child a {
+    border-left:1px solid transparent;
+  }
+}
+
+// Menu Items
+
+@mixin button( $text-color, $background-color, $hover-text-color, $hover-background-color ) {
+  color: $text-color;
+  @include transition();
+  @include border-radius;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  @include adjust-font-size-to( 0.75 * $base-font-size );
+  line-height: 2.5em;
+  display: block;
+  padding: 0 0.75em;
+  font-weight: 700;
+  background: $background-color;
+  &.active, &.active-trail, &:hover {
+    color: $hover-text-color;
+    background: $hover-background-color;
+    text-decoration: none;
+  }
+}
+
+@mixin vertical-menu {
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+  ul {
+    margin: 1em 0;
+    padding: 0 ;
+    @include no-bullets;
+    li {
+      margin:0 0 0.5em 0;
+      padding:0;
+      a {
+        @include button( $grey, $white, $grey, $off-white );
+      }
+    }
+  }
+}
+
+@mixin horizontal-menu {
+  ul {
+    margin: 1em 0;
+    padding: 0;
+    text-align: right;
+    li {
+      margin:0;
+      padding:0;
+      vertical-align: top;
+      display: inline-block;
+      overflow: visible;
+      width: 160px;
+      text-align: center;
+      &.is-expanded ul {
+        display: none;
+      }
+      &.expanded {
+        a.dropdown:after {
+          content: " \25BC";
+          font-size: 8px;
+          color: $color-text-link;
+          position: relative;
+          top: -2px;
+          left: 2px;
+        }
+      }
+      a {
+        @include button( $grey, $off-white, $grey, $white );
+        border: 1px solid $off-white;
+        &:hover, &.active, &.active-trail {
+          border: 1px solid $off-white-dark;
+        }
+      }
+      ul {
+        padding: 0;
+        text-align: center;
+        @include border-radius;
+        border: 5px solid hsla(197,13%,89%,1);
+        background: $white;
+        width: 200px;
+        position: absolute;
+        margin-left: -30px;
+        margin-top: 15px;
+        z-index: 10;
+        &:after, &:before {
+          bottom: 100%;
+          border: solid transparent;
+          content: " ";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+        }
+        &:after {
+          border-color: rgba(255, 255, 255, 0);
+          border-bottom-color: #ffffff;
+          border-width: 14px;
+          left: 50%;
+          margin-left: -14px;
+        }
+        &:before {
+          border-color: rgba(223, 229, 231, 0);
+          border-bottom-color: #DFE5E7;
+          border-width: 22px;
+          left: 50%;
+          margin-left: -22px;
+          @include border-radius;
+        }
+        li {
+          display: block;
+          width: auto;
+          border-top: 1px solid $off-white;
+          &:first-child {
+            border-top: none;
+          }
+          a {
+            @include button( $grey, $white, $grey, $off-white );
+            @include border-radius(0px);
+            border: none;
+            text-transform: capitalize;
+            font-weight: 400;
+            letter-spacing: 0;
+            padding: 10px 0;
+            &:hover, &.active, &.active-trail {
+              border: none;
+            }
+            &:active {
+              background: darken( $off-white, 10% );
+            }
+          }
+        }
+      }
+    }
+  }
+}
+// Mixins from Drupal Defaults
+// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+  }
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  clip: auto;
+  height: auto;
+  width: auto;
+  overflow: auto;
+}
+
+@mixin element-focusable {
+  @include element-invisible;
+
+  &:active,
+  &:focus {
+    @include element-invisible-off;
+  }
+}
+
+// The word "Unpublished" displayed underneath unpublished nodes and comments.
+@mixin unpublished-div {
+  height: 0;
+  overflow: visible;
+  color: #d8d8d8;
+  font-size: 75px;
+  line-height: 1;
+  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  word-wrap: break-word; // A very nice CSS3 property
+
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    .lt-ie8 &>* {
+      position: relative; // Otherwise these elements will appear below the "Unpublished" text.
+    }
+  }
+}