picnic-rails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a86cb01f356b013b4a2f1a54756597bee0356184
+  data.tar.gz: 1d89abc54771a7b675f53c4144d017d90a526728
+SHA512:
+  metadata.gz: 74878182cf38e13d2aa730b724d5b516a2fc9401b105fb2d7a8ae450936804e153218c345f377b34eb9860b5fcc51f5b775e53a1cef9f710ed9db0f6b09651cc
+  data.tar.gz: 184c4df6e70df72162215819e0976ce6bb5f6eb04c6e7b5a7f8c8f8362e96aba6d676ab9a94bc39f8a7e56c65f64f2dbb3b4d00c6e3cc9e3e38fd50bff4aaa7b

data/README.md

@@ -0,0 +1,74 @@
+# Picnic for Rails
+
+## Installation
+
+`picnic-rails` is easy to drop into Rails with the asset pipeline.
+
+In your Gemfile you need to add the `picnic-rails` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
+
+```ruby
+gem 'picnic-rails'
+```
+
+It is also recommended to use [Autoprefixer](https://github.com/ai/autoprefixer-rails) with Picnic
+to add browser vendor prefixes automatically. Simply add the gem:
+
+```ruby
+gem 'autoprefixer-rails'
+```
+
+`bundle install` and restart your server to make the files available through the pipeline.
+
+Import Picnic styles in `app/assets/stylesheets/application.css.scss`:
+
+```scss
+@import 'picinc';
+```
+
+Make sure the file has `.css.scss` extension (or `.css.sass` for Sass syntax). If you have just generated a new Rails app,
+it may come with a `.css` file instead. If this file exists, it will be served instead of Sass, so remove it:
+
+```console
+$ rm app/assets/stylesheets/application.css
+```
+
+Do not use `//= require` in Sass or your other stylesheets will not be [able to access][antirequire] the Picinc variables.
+
+
+* [picinc.scss](/app/assets/stylesheets/picnic.scss) - main project Sass file, imports Picnic and variables.
+
+```scss
+@import 'picinc/variables';
+@import 'picinc/checkbox';
+@import 'picinc/select';
+```
+
+### Configuration
+
+#### Sass
+
+#### Sass: Autoprefixer
+
+Using [Autoprefixer][autoprefixer] with Picnic is recommended.
+[Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from [Can I Use](http://caniuse.com/).
+
+
+## Usage
+
+### Sass
+
+The full list of Picinc variables can be found [here](/app/assets/stylesheets/picnic/_variables.scss). You can override these by simply redefining the variable before the `@import` directive, e.g.:
+
+```scss
+$picnic-deep: true;
+$picnic-tablet-width: 750px;
+$picnic-laptop-width: 1200px;
+$picnic-success: green;
+
+@import 'picinc';
+```
+
+## You're in good company
+
+[picinc](https://github.com/picnicss/picnic)
+[autoprefixer](https://github.com/ai/autoprefixer)

data/app/assets/stylesheets/picnic/_button.scss

@@ -0,0 +1,108 @@
+/* BUTTONS */
+.button,
+a.button:visited,
+.toggle input + * {
+    user-select: none;
+    border: none;
+    box-sizing: content-box;
+    display: inline-block;
+    font-size: 1em;
+    height: $picnic-text-height;
+    line-height: $picnic-text-height;
+    text-decoration: none;
+    vertical-align: middle;
+    background: $picnic-primary;
+    color: $picnic-white;
+    border-radius: $picnic-radius;
+    cursor: pointer;
+    transition: $picnic-transition-fast;
+    margin: $picnic-margin;
+    padding: $picnic-padding $picnic-padding * 3;
+
+    @if $picnic-deep == true {
+        height: $picnic-text-height - .2em;
+        line-height: $picnic-text-height;
+        padding: $picnic-padding $picnic-padding * 3 $picnic-padding + .2em;
+        margin: $picnic-margin $picnic-margin $picnic-margin;
+        box-shadow: inset 0 -.2em $picnic-dark-overlay;
+    }
+}
+
+
+
+/* Interactivity */
+.button:hover,
+.button:focus,
+.toggle:hover input + *,
+.toggle input:focus + * {
+    color: $picnic-white;
+    transition: all .1s ease;
+    box-shadow: inset 0 0 0 100em $picnic-soft-dark-overlay;
+
+    @if $picnic-deep == true {
+        margin: $picnic-margin + .1em $picnic-margin $picnic-margin;
+        padding: $picnic-padding $picnic-padding * 3 $picnic-padding + .1em;
+        box-shadow: inset 0 -.1em $picnic-dark-overlay;
+    }
+}
+
+.button:active,
+.toggle input:active + *,
+.toggle input:checked + * {
+    box-shadow: inset 0 0 0 100em $picnic-dark-overlay;
+
+    @if $picnic-deep == true {
+        margin: $picnic-margin + .2em $picnic-margin $picnic-margin;
+        padding: $picnic-padding $picnic-padding * 3;
+        box-shadow: inset 0 .1em .1em $picnic-dark-overlay;
+    }
+}
+
+
+
+/* Toggle button */
+.toggle input {
+    opacity: 0;
+    z-index: -10;
+    position: absolute;
+}
+
+
+
+/* Colors */
+.button.success,
+.button.success:visited,
+.toggle.success input + * {
+    background: $picnic-success;
+}
+
+.button.warning,
+a.button.warning:visited,
+.toggle.warning input + * {
+    background: $picnic-warning;
+}
+
+.button.error,
+a.button.error:visited,
+.toggle.error input + * {
+    background: $picnic-error;
+}
+
+.button.dull,
+a.button.dull:visited,
+.toggle.dull input + * {
+    background: $picnic-dull;
+}
+
+
+
+/* This allows for the invasiveness (default styling) */
+@if $picnic-invasive == true {
+    button,
+    input[type='submit'],
+    input[type='button'],
+    input[type='image'],
+    input[type='reset'] {
+        @extend .button;
+    }
+}

data/app/assets/stylesheets/picnic/_checkbox.scss

@@ -0,0 +1,48 @@
+.checkbox {
+    position: relative;
+    display: inline-block;
+    min-width: 1em;
+    min-height: 1.25em;
+    line-height: 1em;
+    margin: .2em 0 -.2em;
+    outline: 0px none;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+/* Match the element following input */
+.checkbox input + * {
+    vertical-align: super;
+}
+
+.checkbox input + *:before {
+    /* Tick */
+    content: "\2714";
+    position: absolute;
+    border-radius: $picnic-radius;
+    top: .1em;
+    line-height: .8em;
+    width: 1.1em;
+    height: 1.1em;
+    font-size: .8em;
+    padding: .1em;
+    left: $picnic-margin;
+    text-align: center;
+    background: $picnic-white;
+    color: transparent;
+    border: $picnic-border;
+    box-sizing: border-box;
+}
+
+.checkbox input:focus + *:before,
+.checkbox input:hover + *:before {
+    border: 1px solid $picnic-aqua;
+}
+
+.checkbox input {
+    opacity: 0;
+}
+
+.checkbox input:checked + *:before {
+    color: $picnic-light-black;
+}

data/app/assets/stylesheets/picnic/_generic.scss

@@ -0,0 +1,49 @@
+/* Delete the outline when links are active */
+body {
+    color: $picnic-black;
+    font-size: 1.1em;
+    line-height: $picnic-text-height;
+}
+
+/* Hide the default focus effect */
+:focus {
+    outline: none;
+}
+
+h1 {
+    line-height: $picnic-text-height;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: $picnic-padding * 3 0 $picnic-padding * 2;
+}
+
+li {
+    margin: 0 0 $picnic-margin;
+}
+
+
+
+/* The <pre> doesn't have a nice style from Normalize.css */
+pre {
+    text-align: left;
+    border: $picnic-soft-dark-overlay;
+    background: rgba(0,0,0,.05);
+    padding: .3em;
+}
+code {
+    background: #EEE;
+    padding: 3px 5px;
+    font-size: .8em;
+}
+blockquote {
+    padding: 0 0 0 1em;
+    margin: 0 0 0 .1em;
+    box-shadow: inset 5px 0px $picnic-dark-overlay;
+}
+
+/* Nice fontello trick from Ronen Ackerman ( http://stackoverflow.com/a/17561467 ) */
+i[class^="icon-"]:before,i[class*=" icon-"]:before {
+    margin: 0;
+}

data/app/assets/stylesheets/picnic/_grids.scss

@@ -0,0 +1,163 @@
+.row {
+    position: relative;
+    display: block;
+    overflow: auto;
+}
+
+[class*="full"],[class*="half"],[class*="third"],[class*="fourth"],[class*="fifth"],[class*="sixth"] {
+    box-sizing: border-box;
+    float: left;
+    padding-left: 0;
+    padding-right: 0;
+    min-height: 1px;
+}
+
+.none {
+    display: none;
+}
+
+.full {
+    width: 100%;
+}
+
+.half {
+    width: 50%;
+}
+
+.third {
+    width: 33.333%;
+}
+
+.two-third {
+    width: 66.666%;
+}
+
+.fourth {
+    width: 25%;
+}
+
+.three-fourth {
+    width: 75%;
+}
+
+.fifth {
+    width: 20%;
+}
+
+.two-fifth {
+    width: 40%;
+}
+
+.three-fifth {
+    width: 60%;
+}
+
+.four-fifth {
+    width: 80%;
+}
+
+.sixth {
+    width: 16.666%;
+}
+
+/* Responsive grids: tablet+ */
+@media all and (min-width: $picnic-tablet-width) {
+    .m-none {
+        display: none;
+    }
+
+    .m-full {
+        width: 100%;
+    }
+
+    .m-half {
+        width: 50%;
+    }
+
+    .m-third {
+        width: 33.333%;
+    }
+
+    .m-two-third {
+        width: 66.666%;
+    }
+
+    .m-fourth {
+        width: 25%;
+    }
+
+    .m-three-fourth {
+        width: 75%;
+    }
+
+    .m-fifth {
+        width: 20%;
+    }
+
+    .m-two-fifth {
+        width: 40%;
+    }
+
+    .m-three-fifth {
+        width: 60%;
+    }
+
+    .m-four-fifth {
+        width: 80%;
+    }
+
+    .m-sixth {
+        width: 16.666%;
+    }
+}
+
+/* Responsive grids: laptop+ */
+@media all and (min-width: $picnic-laptop-width) {
+    .l-none {
+        display: none;
+    }
+
+    .l-full {
+        width: 100%;
+    }
+
+    .l-half {
+        width: 50%;
+    }
+
+    .l-third {
+        width: 33.333%;
+    }
+
+    .l-two-third {
+        width: 66.666%;
+    }
+
+    .l-fourth {
+        width: 25%;
+    }
+
+    .l-three-fourth {
+        width: 75%;
+    }
+
+    .l-fifth {
+        width: 20%;
+    }
+
+    .l-two-fifth {
+        width: 40%;
+    }
+
+    .l-three-fifth {
+        width: 60%;
+    }
+
+    .l-four-fifth {
+        width: 80%;
+    }
+
+    .l-sixth {
+        width: 16.666%;
+    }
+}

data/app/assets/stylesheets/picnic/_input.scss

@@ -0,0 +1,46 @@
+/* Browser treats unknow type as "text", so we'll do the same */
+input {
+    line-height: $picnic-text-height;
+    margin: $picnic-margin;
+    padding: $picnic-padding-text;
+    border: $picnic-border;
+    border-radius: $picnic-radius;
+    transition: $picnic-transition-slow;
+}
+
+input[type=file],
+input[type=color] {
+    padding: $picnic-padding;
+    cursor: pointer;
+}
+
+input:focus,
+input[type=file]:hover,
+input[type=color]:hover,
+input:invalid:focus,
+.select select:focus,
+.select select:hover {
+    border-color: $picnic-light-primary;
+    transition: $picnic-transition-slow;
+
+    @if $picnic-deep == true {
+        box-shadow: .1em .1em 0 $picnic-dark-overlay;
+    }
+}
+
+/* Validation */
+input:invalid {
+    border-color: $picnic-warning;
+    box-shadow: none;
+}
+
+input:focus:invalid {
+    border-color: $picnic-error;
+}
+
+/* Reset the style for those that we actually know */
+input[type=radio]:focus,
+input[type=checkbox]:focus {
+    box-shadow: none;
+    border-color: initial;
+}

data/app/assets/stylesheets/picnic/_link.scss

@@ -0,0 +1,4 @@
+a, a:hover, a:active, a:visited {
+    color: $picnic-primary;
+    text-decoration: none;
+}

data/app/assets/stylesheets/picnic/_nav.scss

@@ -0,0 +1,177 @@
+nav {
+    width: 100%;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    background: #FFF;
+    box-shadow: 0 0 .6em $picnic-dark-overlay;
+    z-index: 10;
+    transition: all .3s ease;
+}
+
+nav.transparent {
+    box-shadow: none;
+    background: none;
+}
+
+nav.transparent a,
+nav.transparent a:visited {
+    color: $picnic-white;
+}
+
+nav a,
+nav a:visited {
+    color: $picnic-black;
+    display: inline-block;
+    font-size: 1em;
+    height: 2em;
+    line-height: 2em;
+    padding: .5em .6em;
+}
+
+nav a:hover {
+    color: $picnic-black;
+    box-shadow: inset 0 -.2em 0 #7fdbff;
+}
+
+nav a.button,
+nav a.button:hover {
+    color: $picnic-white;
+    line-height: 1.4em;
+}
+
+nav .main,
+nav .menu {
+    margin: 0 .5em;
+}
+
+nav .main {
+    font-weight: 700;
+    float: left;
+    max-width: 50%;
+    white-space: nowrap;
+}
+
+
+nav .main img {
+    height: 2em;
+}
+
+nav .menu {
+    float: right;
+}
+
+.burgercheck,.burgermenu {
+    display: none;
+    cursor: pointer;
+}
+
+.burgermenu {
+    display: inline-block;
+    position: relative;
+    height: .8em;
+    width: .4em;
+    margin: .35em;
+    display: none;
+}
+
+.burgermenu:before,.burgermenu:after {
+    display: none;
+    content: " ";
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-style: solid;
+    border-color: #333;
+    border-width: .14em 0;
+}
+
+.burgermenu:after {
+    top: 50%;
+    margin-top: -.07em;
+}
+
+@media all and (max-width: 960px) {
+    [class*="icon-"]:before,[class*=" icon-"]:before {
+        display: none;
+    }
+}
+
+@media all and (max-width: $picnic-tablet-width) {
+    [class*="icon-"]:before {
+        display: inline-block;
+    }
+
+    .burgercheck ~ label:before,.burgercheck ~ label:after {
+        display: block;
+    }
+
+    .burgercheck ~ label {
+        position: fixed;
+        top: 0;
+        right: 0;
+        display: inline-block;
+        font-size: 2em;
+        line-height: 1.5em;
+        padding-right: .5em;
+        text-align: right;
+        transition: all .3s ease;
+        /* Avoid the burger menu to display while hiding */
+        transition: display 0s ease .3s;
+    }
+
+    .burgercheck:checked ~ label:before,.burgercheck:checked ~ label:after {
+        display: none;
+    }
+
+    .burgercheck:checked ~ label {
+        margin: 0;
+        right: 70%;
+        width: 30%;
+        height: 100%;
+        transition: all .3s ease;
+        background: rgba(255,255,255,.7);
+    }
+
+    nav .menu {
+        position: fixed;
+        width: 70%;
+        height: 100%;
+        right: -70%;
+        top: 0;
+        margin-right: 0;
+        background: $picnic-white;
+        box-shadow: 0 0 .6em $picnic-dark-overlay;
+        overflow: auto;
+        transition: all .3s ease;
+    }
+
+    .burgercheck:checked ~ .menu {
+        right: 0;
+        transition: all .3s ease;
+    }
+
+    nav .menu a {
+        display: block;
+        text-align: left;
+    }
+
+    nav .menu .button {
+        margin: .5em;
+        float: left;
+        clear: left;
+    }
+
+    nav .menu .button:hover {
+        margin: .6em .5em .5em;
+    }
+
+    nav .menu .button:active {
+        margin: .7em .5em .5em;
+    }
+
+    .transparent .menu {
+        color: $picnic-black;
+    }
+}

data/app/assets/stylesheets/picnic/_normalize.scss

@@ -0,0 +1,426 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+

data/app/assets/stylesheets/picnic/_radio.scss

@@ -0,0 +1,46 @@
+.radio {
+    position: relative;
+    display: inline-block;
+    min-width: 1em;
+    min-height: 1.25em;
+    line-height: 1em;
+    margin: .2em 0 -.2em;
+    outline: 0px none;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+/* Match the element following input */
+.radio input + * {
+    vertical-align: super;
+}
+
+/* Not to repeat them */
+.radio input + *:before {
+    content: "";
+    position: absolute;
+    border: 3px solid $picnic-white;
+    border-radius: 100em;
+    margin: .1em 0;
+    top: 0;
+    line-height: .8;
+    width: .8em;
+    height: .8em;
+    left: $picnic-margin;
+    background: $picnic-white;
+    box-shadow: 0 0 0 1px $picnic-dark-overlay;
+    box-sizing: border-box;
+}
+
+.radio input {
+    opacity: 0;
+}
+
+.radio input:focus + *:before,
+.radio input:hover + *:before {
+    box-shadow: 0 0 0 1px $picnic-aqua;
+}
+
+.radio input:checked + *:before {
+    background: $picnic-light-black;
+}

data/app/assets/stylesheets/picnic/_select.scss

@@ -0,0 +1,46 @@
+.select {
+    display: inline-block;
+    position: relative;
+    border: 1px solid rgba(0,0,0,.3);
+    border-radius: $picnic-radius;
+}
+
+.select:after {
+    padding: 1.2% 0 0 0;
+    background: $picnic-white;
+    content: "\25BC";
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 2.3em;
+    pointer-events: none;
+    font-size: .8em;
+    line-height:2.3em;
+    text-align: center;
+    border-radius: $picnic-radius;
+}
+
+.select select {
+    padding:0.23em 0 0.23em 0.23em;
+    background: none;
+    //vendor prefixes required, see:
+    //https://github.com/postcss/autoprefixer#why-doesnt-autoprefixer-support-appearance
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    min-width: 14em;
+    border-radius: $picnic-radius;
+    cursor: pointer;
+}
+
+.select select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $picnic-black;
+}
+
+.select select option {
+    padding: .2em .5em;
+}

data/app/assets/stylesheets/picnic/_table.scss

@@ -0,0 +1,34 @@
+table {
+    text-align: left;
+}
+
+td,th {
+    padding: $picnic-padding 2.4em $picnic-padding $picnic-padding * 2;
+}
+
+th {
+    font-weight: 900;
+    color: $picnic-white;
+    background-color: $picnic-primary;
+}
+
+.success th {
+    background-color: $picnic-success;
+}
+
+.warning th {
+    background-color: $picnic-warning;
+}
+
+.error th {
+    background-color: $picnic-error;
+}
+
+.dull th {
+    background-color: $picnic-dull;
+}
+
+
+tr:nth-child(even) {
+    background: rgba(0,0,0,.05);
+}

data/app/assets/stylesheets/picnic/_variables.scss

@@ -0,0 +1,39 @@
+/* Style by default the <button>, <input type="submit">, etc? */
+/* Not fully implemented */
+$picnic-invasive: true !default;
+
+/* Make buttons and other things slightly 3d */
+$picnic-deep: true !default;
+
+/* Media query breakpoints */
+$picnic-tablet-width: 750px !default;
+$picnic-laptop-width: 1200px !default;
+
+/* Default element styles */
+$picnic-radius: .2em !default;
+$picnic-margin: .3em !default;
+$picnic-padding: .3em !default;
+$picnic-text-height: 1.5em !default;
+$picnic-padding-text: $picnic-padding $picnic-padding * 1.5 + .2em !default;
+
+/* Define the transitions */
+$picnic-transition-fast: all .1s ease !default;
+$picnic-transition-slow: all .3s ease !default;
+
+/* Colors */
+$picnic-white: #FFF !default;
+$picnic-black: #333 !default;
+$picnic-light-black: #555 !default;
+$picnic-primary: #0074D9 !default;
+$picnic-light-primary: #7FDBFF !default;
+$picnic-success: #2ecc40 !default;
+$picnic-warning: #FF851B !default;
+$picnic-error: #FF4136 !default;
+$picnic-dull: #AAA !default;
+$picnic-aqua: #7fdbff !default;
+$picnic-dark-overlay: rgba(0, 0, 0, .3) !default;
+$picnic-soft-dark-overlay: rgba(0, 0, 0, .1) !default;
+$picnic-clear-overlay: rgba(255, 255, 255, .3) !default;
+
+/* Border */
+$picnic-border: 1px solid $picnic-dark-overlay !default;

data/app/assets/stylesheets/picnic.scss

@@ -0,0 +1,12 @@
+@import 'picnic/normalize';
+@import 'picnic/variables';
+@import 'picnic/generic';
+@import 'picnic/link';
+@import 'picnic/button';
+@import 'picnic/table';
+@import 'picnic/grids';
+@import 'picnic/nav';
+@import 'picnic/input';
+@import 'picnic/select';
+@import 'picnic/checkbox';
+@import 'picnic/radio';

data/lib/picnic-rails/version.rb

@@ -0,0 +1,5 @@
+module Picnic
+  module Rails
+    VERSION = '0.0.1'
+  end
+end

data/lib/picnic-rails.rb

@@ -0,0 +1,6 @@
+module Picnic
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

metadata

@@ -0,0 +1,62 @@
+--- !ruby/object:Gem::Specification
+name: picnic-rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Alex Galushka
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-05 00:00:00.000000000 Z
+dependencies: []
+description: Unpack your meal and get coding. An invasive CSS library to get your
+  style started.
+email:
+- galulex@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/assets/stylesheets/picnic.scss
+- app/assets/stylesheets/picnic/_button.scss
+- app/assets/stylesheets/picnic/_checkbox.scss
+- app/assets/stylesheets/picnic/_generic.scss
+- app/assets/stylesheets/picnic/_grids.scss
+- app/assets/stylesheets/picnic/_input.scss
+- app/assets/stylesheets/picnic/_link.scss
+- app/assets/stylesheets/picnic/_nav.scss
+- app/assets/stylesheets/picnic/_normalize.scss
+- app/assets/stylesheets/picnic/_radio.scss
+- app/assets/stylesheets/picnic/_select.scss
+- app/assets/stylesheets/picnic/_table.scss
+- app/assets/stylesheets/picnic/_variables.scss
+- lib/picnic-rails.rb
+- lib/picnic-rails/version.rb
+homepage: http://picnicss.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Picnic CSS for Rails
+test_files: []
+has_rdoc: