evolve_styleguide 0.0.1

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

@@ -0,0 +1,391 @@
+/*
+
+Types of buttons:
+
+  1. Simple (iOS style) text button
+  2. Icon-based button
+  3. Large, bordered button
+  4. Large, filled button with bottom border (3D)
+
+  These can all be either <a> or <button> elements.
+
+*/
+
+a.btn,
+input.btn,
+button{
+
+  //reset to be the same
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+
+  //set default button styles. Applied when no extra classes are set
+  &.default{
+
+    border: solid 1px $black;
+    padding: 0.5rem 0.85rem;
+    font-size: 1.4rem;
+
+    &.gray{
+      color: $gray-dark;
+      border-color: $gray-dark;
+    }
+
+    &:disabled{
+      color: $gray !important;
+      border-color: $gray !important;
+    }
+
+  }
+
+  //add modifiers
+  &.full-width{
+    display: block;
+    width: 100%;
+  }
+
+  &.small{
+    font-size: 1em;
+  }
+  &.x-small{
+    font-size: 0.825em;
+    padding: 0.3rem 0.75rem;
+  }
+
+  &.rounded{
+    @include rounded(3px);
+  }
+
+  &.centered{
+    text-align: center;
+  }
+
+  /** ACTION **/
+  &.action{
+
+    background: none;
+    border: solid 1px $black;
+    color: $black;
+    padding: 0.5em 2.1em;
+    font-size: 1.125em;
+    @include rounded(3px);
+
+    //set hover/active states for action buttons
+    &:hover{
+      
+    }
+    &:active{
+      
+    }
+    &:disabled{
+      
+    }
+
+    //set alt colors
+    &.red{
+      
+      background: $red;
+      color: $white;
+      border-color: darken($red, 10%);
+
+      &:hover{
+        
+      }
+      &:active{
+        
+      }
+      &:disabled{
+        
+      }
+    }
+    &.green{
+      
+      &:hover{
+        
+      }
+      &:active{
+        
+      }
+      &:disabled{
+        
+      }
+    }
+
+  }
+
+  /** ICON **/
+  &.icon{
+
+    font-size: 1.75em;
+    padding: 0.5em;
+
+    i{
+      display: block;
+      width: 1em;
+      height: 1em;
+    }
+
+  }
+
+  /** SIMPLE TEXT **/
+  &.simple{
+
+    &.red{
+      color: $red;
+    }
+    &.blue{
+      color: $blue;
+    }
+    &.black{
+      color: $black;
+    }
+    &.gray{
+      color: $gray-dark;
+    }
+
+    &:disabled{
+      color: $gray-light;
+    }
+
+  }
+
+  /** CIRCLE **/
+  &.circle{
+
+    width: 44px;
+    height: 44px;
+    overflow: hidden;
+    position: relative;
+    margin: 0;
+
+    svg{
+      width: 30px;
+      height: 30px;
+      border: solid 2px $black;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      padding: 6px;
+      @include transform( translateX(-50%) translateY(-50%) );
+      @include rounded(50%);
+    }
+
+    &.pending svg{ fill:$gray; border-color: $gray; }
+    &.decline svg{ fill:$red; border-color: $red; }
+    &.maybe svg{ fill:$orange; border-color: $orange; }
+    &.accept svg{ fill:$green; border-color: $green; }
+
+    // Set current state
+    &:hover,
+    &.current{
+
+      &.pending svg{ fill:$white; background-color: $gray; }
+      &.decline svg{ fill:$white; background-color: $red; }
+      &.maybe svg{ fill:$white; background-color: $orange; }
+      &.accept svg{ fill:$white; background-color: $green; }
+
+    }
+
+    &:disabled{
+
+      cursor: default;
+
+    }
+
+    @media #{$screen680} {
+
+      width: 40px;
+      height: 40px;
+
+      svg{
+        width: 40px;
+        height: 40px;
+        padding: 8px;
+      }
+
+    }
+
+  }
+
+}
+
+// FILTER BAR/TABS
+.filter-bar{
+
+  height: $header-height-mobile;
+
+  .filter-selection{
+
+    display: block;
+    height: $header-height-mobile;
+    padding: 10px 14px 10px 10px;
+    cursor: pointer;
+
+    svg{
+      width: 20px;
+      height: 20px;
+      position: relative;
+      top: 4px;
+      margin-right: 3px;
+    }
+    .current-filter{
+      font-size: 1.125em;
+    }
+
+  }
+
+  ul.tabs{
+
+    display: none;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    position: absolute;
+    top: $header-height-mobile;
+    left: 0;
+    right: 0;
+    font-size: 1.125em;
+    border-top: solid 1px $black;
+    z-index: 9999;
+
+    li{
+      display: block;
+    }
+    a, button{
+      display: block;
+      padding: 8px 14px;
+      width: 100%;
+      text-align: left;
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    height: $header-height;
+
+    .filter-selection{
+
+      display: none;
+
+      svg{
+
+      }
+      .current-filter{
+        
+      }
+
+    }
+
+    ul.tabs{
+
+      display: block;
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      border: none;
+      z-index: auto;
+
+      &:after{
+        content: "";
+        display: table;
+        clear: both;
+      }
+
+      li{
+        float: left;
+        margin-right: 2px;
+      }
+      a, button{
+        width: auto;
+        padding: 0px 28px;
+        height: $header-height;
+      }
+
+    }
+
+  }
+
+}
+header.app-header .filter-bar{
+
+  .filter-selection:hover{
+
+    background: darken($red, 15%);
+
+  }
+
+  ul.tabs{
+
+    background: $red;
+    border-top-color: darken($red, 15%);
+
+    a, button{
+
+      color: $white;
+
+    }
+
+    li.active,
+    li:hover a,
+    li:hover button{
+      background: darken($red, 15%);
+    }
+
+  }
+
+}
+
+// Stand-alone tab buttons
+header.app-header{
+
+  a.tab,
+  button.tab{
+
+    height: $header-height-mobile;
+    font-size: 1.125em;
+    padding: 15px;
+
+    span{
+      display: none;
+    }
+    svg{
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover{
+      background-color: darken($red, 15%);
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    a.tab,
+    button.tab{
+      
+      height: $header-height;
+      padding: 16px;
+
+      span{
+        display: inline-block;
+        margin-right: 8px;
+      }
+      svg{
+        position: relative;
+        top: 2px;
+      }
+
+    }
+
+  }
+
+}

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

@@ -0,0 +1,21 @@
+// Base Colors
+.red{ color: $red; }
+.green{ color: $green; }
+.orange{ color: $orange; }
+.blue{ color: $blue; }
+.gray-light{ color: $gray-light; }
+.gray{ color: $gray; }
+.gray-dark{ color: $gray-dark; }
+.black{ color: $black; }
+
+
+.background-red{ background-color: $red; color: $white; }
+.background-green{ background-color: $green; color: $white; }
+.background-orange{ background-color: $orange; color: $white; }
+.background-blue{ background-color: $blue; color: $white; }
+
+.background-gray-light{ background-color: $gray-light; }
+.background-gray{ background-color: $gray; color: $white; }
+.background-gray-mid{ background-color: $gray-mid; color: $white; }
+.background-gray-dark{ background-color: $gray-dark; color: $white; }
+.background-black{ background-color: $black; color: $white; }

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

@@ -0,0 +1,164 @@
+/***********************************************
+Comments
+***********************************************/
+.feed{
+
+  background: $white;
+
+  > h3{
+    margin: 0 0 $event_padding/2 0;
+  }
+
+}
+
+ol.comments{
+
+  margin: 2rem 0 0 0;
+  padding: 0;
+  list-style-type: none;
+
+  li{
+
+    display: block;
+    margin-bottom: 2rem;
+
+    span{
+
+    }
+    p{
+
+    }
+    img{
+      display: inline-block;
+      position: relative;
+      top: 2px;
+      margin-right: 0.5em;
+    }
+    .comment_info{
+
+    }
+    .username{
+      font-weight: 600;
+      font-size: 1em;
+      margin-right: 0.25em;
+    }
+    .time{
+      font-size: 0.85em;
+      color: $gray-dark;
+    }
+    .comment_text{
+
+      margin-top: 0.5em;
+      padding-left: 1.75em;
+
+      *:first-child{ margin-top: 0; }
+      *:last-child{ margin-bottom: 0; }
+
+    }
+    .update_message{
+      margin: 0;
+    }
+
+  }
+  li.comment{
+
+  }
+  li.sep{
+
+    text-align: center;
+    position: relative;
+    height: 100%;
+
+    &:before{
+      display: block;
+      content: "";
+      width: 100%;
+      height: 0px;
+      border-top: dashed 2px $gray-light;
+      position: absolute;
+      top: 50%;
+      @include transform( translateY(-50%) );
+      z-index: 0;
+    }
+
+    span{
+      background-origin: border-box;
+      background-image: url(../img/sep.png);
+      background-size: 100% 100%;
+      display: inline-block;
+      padding: 0.65em 0.75em;
+      position: relative;
+      z-index: 10;
+      font-size: 0.85em;
+      color: $gray;
+      }
+
+  }
+  li.update{
+
+  }
+
+  .green{
+    color: $green;
+  }
+  .red{
+    color: $red;
+  }
+
+}
+
+// Comment Previews
+.comment-preview{
+
+  border-top: solid 1px $gray-light;
+  padding: 10px;
+
+  &:after{
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .avatar{
+    display: block;
+    position: relative;
+    float: left;
+    margin-right: 10px;
+  }
+  p{
+    margin: 0;
+    font-size: 0.85em;
+    display: block;
+    float: left;
+    @include calc( max-width, "100% - 32px - 75px" ); /* 100% - avatar width (+ margin) - timestamp width (+ margin) */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  span{
+    display: block;
+    font-size: 0.8em;
+    color: $gray-mid;
+    float: right;
+    width: 56px;
+  }
+
+  @media #{$screen680} {
+
+    padding: $spacing-large;
+
+    .avatar{}
+    h3{
+      font-size: 1.25em;
+      margin: 0 $spacing-large/4;
+    }
+    span{
+      font-size: 1em;
+    }
+    p{
+      font-size: 1em;
+    }
+
+  }
+
+}