evolve_styleguide 0.0.1

data/app/assets/stylesheets/evolve_styleguide/_flashes.scss

@@ -0,0 +1,59 @@
+$flash-red:     #ec232a;
+$flash-yellow:  #edebcd;
+$flash-blue:    #6cc6e5;
+$flash-green:   #66cc99;
+
+.flash{
+
+  position: relative;
+  background: $flash-blue;
+  color: $white;
+  padding: 1.2rem;
+  border-top:     solid 1px darken($flash-blue, 15%);
+  border-bottom:  solid 1px darken($flash-blue, 15%);
+
+  &.dismissable{
+    padding-right: 4em;
+  }
+  button.flash-dismiss{
+
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -22px;
+    padding: 0;
+    width: 44px;
+    height: 44px;
+    color: $white;
+    background: none;
+    @include box-shadow(0, 0, 0, rgba(0,0,0,0));
+
+    i{
+      margin: 0;
+      top: 0;
+    }
+
+  }
+
+  &.warning{
+    background: $flash-yellow;
+    color: $black;
+    border-color: darken($flash-yellow, 15%);
+
+    button.flash-dismiss{
+      color: $black;
+    }
+
+  }
+
+  &.alert{
+    background: $flash-red;
+    border-color: darken($flash-red, 15%);
+  }
+
+  &.success{
+    background: $flash-green;
+    border-color: darken($flash-green, 15%);
+  }
+
+}

data/app/assets/stylesheets/evolve_styleguide/_forms.scss

@@ -0,0 +1,293 @@
+// vars
+$formFontSize:    1.1rem;
+$formIconPadding: 36px;
+
+form{
+
+}
+input, textarea{
+  display: block;
+  width: 100%;
+  background: $white;
+  border: solid 1px $gray-light;
+  border-radius: 3px;
+  padding: 0.75rem;
+}
+
+.field{
+  margin: 0 0 $spacing-small*2 0;
+  position: relative;
+}
+.field p{
+  color: $gray;
+}
+
+/** Labels **/
+.field label{
+
+  display: inline-block;
+  margin-bottom: $spacing-small/2;
+  font-size: 1.125em;
+  color: $gray;
+
+  .label-description{
+    float: right;
+    font-size: 14px;
+    margin-top: 4px;
+  }
+
+}
+
+select{
+  width: 100%;
+}
+
+/** Inputs **/
+.field input[type="text"],
+.field input[type="email"],
+.field input[type="password"]{
+  display: block;
+  @include rounded(3px);
+  padding: $spacing-small;
+  font-size: $formFontSize;
+  color: $black;
+  width: 100%;
+  outline-color: $red;
+}
+div.input{
+
+  position: relative;
+
+  input{
+
+  }
+
+}
+
+input[type="checkbox"],
+input[type="radio"]{
+  width: auto;
+  display: inline-block;
+}
+.field input[type="checkbox"]{
+  margin-left: $spacing-small;
+}
+
+//hide defaults until initialized
+.field.selectize{
+
+  select{
+    height: 44px;
+    width: 100%;
+    border: solid 1px $white;
+    visibility: hidden;
+  }
+
+}
+
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input{
+  font-size: $formFontSize;
+  line-height: 22px; //small, stupid hack, but it works
+}
+
+.selectize-input{
+  border: solid 1px $gray-light;
+  padding: $spacing-small;
+  @include box-shadow(0,0,0,rgba(0,0,0,0));
+}
+
+.selectize-control {
+
+  .selectize-input{
+
+    @include rounded(3px);
+
+    input{
+      padding: 0;
+      outline: none;
+      border: none;
+      display: inline-block;
+    }
+
+  }
+
+  &.multi {
+
+    .selectize-input {
+
+      &.has-items {
+        padding: $spacing-small;
+        @include calc(padding-bottom, $spacing-small - $spacing-small/2);
+      }
+
+      &.disabled [data-value] {
+
+        color: #999;
+        text-shadow: none;
+        background: none;
+        @include box-shadow(none);
+
+        &,
+          .remove {
+          border-color: #e6e6e6;
+        }
+
+        .remove {
+          background: none;
+        }
+
+      }
+
+      [data-value] {
+
+        @include rounded(3px);
+        background: #f2f2f2;
+        border: solid 1px #aaa;
+        display: inline-block;
+        margin-right: $spacing-small/2;
+        margin-bottom: $spacing-small/2;
+        padding: 2px 5px;
+
+        &.active {
+          background: #29abe2;
+          color: $white;
+          border: solid 1px darken(#29abe2, 10%);
+        }
+
+      }
+
+    }
+
+  }
+
+  &.single {
+
+    .selectize-input {
+
+      background: $white;
+
+      [data-value],
+      input {
+        display: inline-block;
+      }
+
+    }
+
+  }
+
+}
+
+.selectize-dropdown {
+
+  position: absolute;
+  z-index: 100;
+  background: $white;
+  border: solid 1px $gray-light;
+  border-top: none;
+
+  [data-selectable],
+  .optgroup-header{
+    padding: 12px 16px;
+  }
+
+  .active{
+    background: #e8e8e8;
+    color: $black;
+  }
+
+  .optgroup-header {
+    padding-top: 20px + 2px;
+    font-weight: bold;
+    font-size: .85em;
+  }
+
+  .optgroup {
+
+    border-top: 1px solid $gray;
+
+    &:first-child {
+      border-top: 0 none;
+    }
+
+  }
+
+}
+.selectize-dropdown-content{
+  max-height: 310px;
+  overflow-y: auto;
+}
+
+header.form_header{
+
+  padding-top: $spacing-small*2;
+
+  h1{
+    float: left;
+  }
+  a.btn{
+    float: right;
+    margin-top: 1.5em;
+  }
+
+}
+
+// New/edit event forms
+.new_event_form{
+
+  background: $white;
+  @include rounded(3px);
+  padding: $spacing-small;
+
+  @media #{$screen680} {
+
+    padding: $spacing-large;
+
+  }
+
+}
+
+// Rails form errors
+.field_with_errors{
+
+  label{
+    color: $red;
+  }
+  input{
+    border: solid 2px $red;
+  }
+
+}
+#error_explanation{
+
+  margin-bottom: $spacing-small;
+  @include rounded(3px);
+  border: solid 2px $red;
+
+  h2{
+    background: $red;
+    margin: 0;
+    padding: 10px;
+    color: $white;
+    font-size: 1em;
+  }
+  ul{
+    padding-left: $spacing-small*2;
+    color: darken($red, 20%);
+  }
+  li{
+
+  }
+
+  @media #{$screen680} {
+
+    margin-bottom: $spacing-large;
+
+    ul{
+      padding-left: $spacing-large*2;
+    }
+
+  }
+
+}

data/app/assets/stylesheets/evolve_styleguide/_grid.scss

@@ -0,0 +1,68 @@
+// Simple Grid
+$marginSize: 2%;
+$colCount: 12;
+
+.wrap{
+
+  margin: 0 auto;
+  padding: 0 $spacing-small;
+
+  &:after{
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  @media #{$screen680} {
+    padding: 0 $spacing-large;
+  }
+
+}
+
+.wrap500{
+
+  max-width: 500px+($spacing-small*2);
+
+  @media #{$screen680} {
+    max-width: 500px+($spacing-large*2);
+  }
+
+}
+
+.wrap800{
+
+  max-width: 800px+($spacing-small*2);
+
+  @media #{$screen680} {
+    max-width: 800px+($spacing-large*2);
+  }
+
+}
+
+.row{
+
+  margin-top: $marginSize;
+
+  &:after{
+    display: table;
+    content: "";
+    clear: both;
+  }
+
+}
+
+.col{
+
+  float: left;
+  display: block;
+  margin-right: $marginSize;
+  margin-bottom: $marginSize;
+
+  &.last{
+    margin-right: 0;
+  }
+
+}
+
+// This will output each widht spacing value!
+@include gridGen($colCount, $marginSize, col);

data/app/assets/stylesheets/evolve_styleguide/_images.scss

@@ -0,0 +1,25 @@
+.avatar{
+
+  display: block;
+
+  &.small{
+    width: 18px;
+    height: 18px;
+  }
+  &.bordered.small{
+
+    width: 22px;
+    height: 22px;
+    border: solid 2px $white;
+
+    &.pending{ border-color:$gray-light; }
+    &.declined{ border-color:$red; }
+    &.maybe{ border-color:$orange; }
+    &.accepted{ border-color:$green; }
+
+  }
+  &.circle{
+    @include rounded(50%);
+  }
+
+}