evolve_styleguide 0.0.1

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

@@ -0,0 +1,42 @@
+// Sidebar
+#sidebar_wrap{
+
+  width: $sidebar-width;
+  position: fixed;
+  left: 0;
+  top: $header-height-mobile+2;
+  bottom: 0;
+
+  @media #{$screen680} {
+
+    top: $header-height+2;
+
+  }
+
+}
+#sidebar{
+
+  *:first-child{ margin-top: 0; }
+
+}
+#theme_switcher{
+  height: $switcher-height;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: $sidebar-width;
+}
+
+#content_wrap{
+
+  margin-left: $sidebar-width;
+  border-left: solid 1px #e2e2e2;
+  margin-top: $header-height-mobile+2;
+
+  @media #{$screen680} {
+
+    margin-top: $header-height+2;
+
+  }
+
+}

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

@@ -0,0 +1,199 @@
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+@mixin hoverActiveFocus() {
+  &:hover, &:active, &:focus {
+    @content;
+  }
+}
+
+/*********************
+GRID WIDTH
+*********************/
+@mixin gridGen($colCount, $marginSize, $slug){
+
+  @for $i from 1 through $colCount{
+
+    $singleUnit: (( 100% - ( $marginSize * ($colCount - 1) ) ) / $colCount) + $marginSize;
+    .#{$slug}-#{$i}{
+      width: ( $singleUnit * $i ) - $marginSize;
+    }
+
+  }
+
+}
+
+/*********************
+CALC
+*********************/
+@mixin calc($property, $expression) {
+  #{$property}: calc(#{$expression});
+  #{$property}: -webkit-calc(#{$expression});
+}
+
+/*********************
+FULLSCREEN
+*********************/
+@mixin absoluteFull($size){
+  position: absolute;
+  top: $size;
+  right: $size;
+  bottom: $size;
+  left: $size;
+}
+
+/*********************
+TRANSITION
+*********************/
+@mixin transition( $type: 'all', $duration: 0.15s, $ease: 'linear' ){
+  -moz-transition: $type $duration $ease;
+  -webkit-transition: $type $duration $ease;
+  -o-transition: $type $duration $ease;
+  transition: $type $duration $ease;
+}
+
+/*********************
+BORDER RADIUS
+*********************/
+@mixin border-radius( $tl, $tr, $br, $bl ) {
+  -moz-border-radius: $tl $tr $br $bl;
+  -webkit-border-radius: $tl $tr $br $bl;
+  -o-border-radius: $tl $tr $br $bl;
+  border-radius: $tl $tr $br $bl;
+}
+
+/*********************
+BORDER RADIUS - Even
+*********************/
+@mixin rounded($radius){
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+  -o-border-radius: $radius;
+  border-radius: $radius;
+}
+
+/*********************
+BOX SHADOW
+*********************/
+@mixin box-shadow( $xoffset: 0, $yoffset: 0, $spread: 0, $color: rgba(0,0,0,0.8) ) {
+  -moz-box-shadow: $xoffset $yoffset $spread $color;
+  -webkit-box-shadow: $xoffset $yoffset $spread $color;
+  -o-box-shadow: $xoffset $yoffset $spread $color;
+  box-shadow: $xoffset $yoffset $spread $color;
+}
+
+/*********************
+TRIANGLES
+*********************/
+@mixin triangle ( $direction, $size, $color ) {
+
+  width: 0;
+  height: 0;
+
+  @if $direction == 'right' {
+
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+
+  } @elseif $direction == 'down' {
+
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $color;
+
+  } @elseif $direction == 'left' {
+
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+
+  } @elseif $direction == 'up' {
+
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $color;
+
+  }
+}
+
+/*********************
+Background Size
+*********************/
+@mixin background-size( $size: '100%' ) {
+  -webkit-background-size: $size;
+  -moz-background-size: $size;
+  -o-background-size: $size;
+  background-size: $size;
+}
+
+/*********************
+Transform
+*********************/
+@mixin transform( $transform: '' ){
+  -webkit-transform: $transform;
+  -ms-transform: $transform;
+  transform: $transform;
+}
+
+/*********************
+CSS Gradient
+*********************/
+//Prefixes definition
+$webkit:true;
+$o:true;
+$moz:true;
+$w3:true;
+$ms:true;
+
+//Gradient Mixin
+@mixin gradient($mode,$direction,$from,$to,$oldDirection:null){
+
+  @if $webkit == true {
+    @if($oldDirection != null){
+      background-image: -webkit-gradient($mode, #{$oldDirection}, from($from),to($to));
+    }
+    background-image: -webkit-#{$mode}-gradient($direction, $from, $to);
+  }
+  @if $moz == true {
+    background-image: -moz-#{$mode}-gradient($direction, $from, $to);
+  }
+  @if $o == true {
+    background-image: -o-#{$mode}-gradient($direction, $from, $to);
+  }
+  @if $ms == true {
+    background-image: -ms-#{$mode}-gradient($direction, $from, $to);
+  }
+  @if $w3 == true {
+    background-image: #{$mode}-gradient($direction, $from, $to);
+  }
+}
+
+/*********************
+KEYFRAMES
+*********************/
+@mixin keyframes($animation_name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+/*********************
+ANIMATION
+*********************/
+@mixin animation($name, $duration, $ease, $delay) {
+  -webkit-animation: $name $duration $ease $delay;
+  -moz-animation: $name $duration $ease $delay;
+  animation: $name $duration $ease $delay;
+}

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

@@ -0,0 +1,445 @@
+// Navigation
+#section-navigation{
+
+  header.global-header{
+    //border: solid 1px $gray-light;
+  }
+
+}
+
+.align-left{ float: left; }
+.align-right{ float: right; }
+
+header{
+
+  .align-left,
+  .align-right{
+
+    max-width: 50%;
+
+    @media #{$screen680} {
+      max-width: 100%;
+    }
+
+  }
+
+}
+
+// Global Header
+header.global-header{
+
+  width: 100%;
+  background: $white;
+  height: $header-height-mobile+2;
+
+  &:after{
+    display: table;
+    content: "";
+    clear: both;
+  }
+
+  &.fixed{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+
+    & + #app{
+      margin-top: $header-height-mobile+2;
+    }
+  }
+
+  &.bordered{
+    border-bottom: solid 1px $gray-light;
+  }
+
+  @media #{$screen680} {
+
+    height: $header-height+2;
+
+    &.fixed{
+      
+      & + #app{
+        margin-top: $header-height+2;
+      }
+
+    }
+
+  }
+
+}
+
+.menu-button{
+
+  > button{
+
+    display: block;
+    position: relative;
+    width: 50px;
+    height: $header-height-mobile;
+
+    svg{
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      @include transform( translateX(-50%) translateY(-50%) );
+    }
+
+    &:hover,
+    &.current{
+      background: #f8f8f8;
+    }
+    &:active{
+      background: #e2e2e2;
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    > button{
+      height: $header-height;
+    }
+
+  }
+
+}
+
+.context-switcher{
+
+  float: left;
+
+  > button{
+
+    svg{
+      
+    }
+
+  }
+
+  .context-menu{
+
+    ul{
+
+    }
+    li{
+
+    }
+    a{
+
+    }
+
+  }
+
+}
+
+a.app-title{
+
+  text-decoration: none;
+  float: left;
+  height: $header-height-mobile;
+  vertical-align: middle;
+
+  img, span{
+    vertical-align: top;
+  }
+  img{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin: 10px 2px 10px 10px;
+  }
+  span{
+    display: inline-block;
+    font-size: 1.2em;
+    font-weight: 400;
+    color: $gray;
+    margin-top: 12px;
+    margin-right: 14px;
+  }
+
+  &:hover{
+
+    background: #f8f8f8;
+
+    img{
+      
+    }
+    span{
+      color: $black;
+    }
+  }
+
+  &.img-logo{
+
+    img{
+      height: 100%;
+      width: auto;
+      margin: 0;
+      padding: 0;
+      opacity: 1;
+      display: block;
+      max-width: 100%;
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    height: $header-height;
+
+    img{
+      width: 30px;
+      height: 40px;
+      margin-right: 14px;
+    }
+    span{
+      font-size: 1.5em;
+    }
+
+  }
+
+}
+
+.notification-center{
+
+  float: left;
+
+  button.new-notification{
+
+    svg{
+      
+    }
+
+  }
+
+  .notification-count{
+    background: $red;
+    color: $white;
+    display: block;
+    position: absolute;
+    @include rounded(10px);
+    font-size: 0.75em;
+    top: 6px;
+    right: 4px;
+    padding: 2px 6px;
+    text-align: center;
+    height: 20px;
+    min-width: 20px;
+  }
+
+}
+
+.app-settings{
+
+  float: left;
+  width: 60px;
+  height: 60px;
+  position: relative;
+
+  a.btn{
+
+    display: block;
+    width: 25px;
+    height: 25px;
+    color: $gray-dark;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    @include transform( translateX(-50%) translateY(-50%) );
+
+    svg{
+      width: 100%;
+      height: 100%;
+    }
+
+  }
+
+}
+
+.profile-menu{
+
+  float: left;
+  height: $header-height-mobile;
+
+  button.profile-dropdown{
+
+    position: relative;
+    padding: 0 10px;
+    height: $header-height-mobile;
+    width: auto;
+
+    .avatar{
+
+      display: block;
+      width: 30px;
+      height: 30px;
+      position: relative;
+
+      img{
+        display: block;
+        width: 100%;
+        height: 100%;
+        @include rounded(50%);
+      }
+      .user-status{
+
+        display: block;
+        border: solid 2px $white;
+        width: 14px;
+        height: 14px;
+        text-indent: -9999px;
+        @include rounded(50%);
+        position: absolute;
+        top: 50%;
+        left: -7px;
+        margin-top: -7px;
+
+        &.online{
+          background: $green;
+        }
+
+      }
+
+    }
+    svg{ display: none; }
+
+    &:hover{
+      background: #f8f8f8;
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    height: $header-height;
+
+    button.profile-dropdown{
+
+      height: $header-height;
+      padding: 0 40px 0 20px;
+
+      .avatar{
+        width: 40px;
+        height: 40px;
+      }
+
+      svg{
+        display: block;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        margin-top: -10px;
+        width: 20px;
+        height: 20px;
+        left: auto;
+        @include transform(none);
+      }
+
+    }
+
+  }
+
+}
+
+// Droppable Styles
+.droppable{
+
+  position: relative;
+
+  button.trigger{
+
+  }
+
+  &.drop-right .dropdown-menu{ right: 0; }
+  &.drop-left .dropdown-menu{ left: 0; }
+
+  .dropdown-menu{
+
+    display: none;
+    position: fixed;
+    top: $header-height-mobile+1;
+    width: 100%;
+    max-height: 400px;
+    overflow-y: auto;
+    background: $white;
+    z-index: 9999;
+    border: solid 1px $gray-light;
+
+    &.open{
+
+      display: block;
+
+    }
+
+  }
+
+  @media #{$screen680} {
+
+    .dropdown-menu{
+      top: $header-height+1;
+      width: 250px;
+      position: absolute;
+    }
+
+  }
+
+}
+
+.dropdown-menu ul.links{
+
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  li{
+
+    display: block;
+
+    &.bordered{
+
+      border-top: solid 1px $gray-light;
+      border-bottom: solid 1px $gray-light;
+
+      &:first-child{ border-top: none; }
+      &:last-child{ border-bottom: none; }
+
+    }
+
+  }
+  a{
+
+    display: block;
+    padding: 8px;
+    text-decoration: none;
+
+    &:hover{
+      background: #f8f8f8;
+    }
+
+  }
+
+}
+
+// App Header
+header.app-header{
+
+  background: $red;
+  color: $white;
+  position: relative;
+  margin-bottom: $spacing-small;
+
+  &:after{
+    display: table;
+    content: "";
+    clear: both;
+  }
+
+  @media #{$screen680} {
+    margin-bottom: $spacing-large;
+  }
+
+}