cloudrider 0.1.0

data/generica/app/varissets/javascripts/templates/components/table-booths.emblem.erb

@@ -0,0 +1,71 @@
+<% case booth_style %>
+<% when :contact_form %>
+.business-cards-side.small-12.large-6.columns
+  .row
+    .small-12.columns
+      h2.capitalize.align-right
+        tr-span en="our team"
+  .row
+    each contact in contacts
+      .small-12.medium-6.columns
+        .business-card.panel.radius
+          .text-right
+            .name.capitalize= contact.personName
+            .job= contact.employeeTitle
+
+          .text-left
+            .info
+              span.bold.capitalize.colon
+                tr-span en="email"
+              span.prespace= contact.email
+            .info
+              span.bold.capitalize.colon
+                tr-span en="phone"
+              span.prespace= contact.phoneNumber
+
+    else
+      .small-12.medium-6.columns
+        .business-card.panel.radius
+          .text-right
+            .name
+              i.fa.fa-cog.fa-spin
+              span.capitalize.prespace 
+                tr-span en="loading employees"
+            .job
+              tr-span en="or perhaps no employees have been listed"
+
+.contact-form-side.small-12.large-6.columns
+  .row
+    .small-12.columns
+      h2.capitalize.white.align-left
+        tr-span en="contact us"
+      form
+        label
+          .capitalize.white
+            span.asterisk
+            tr-span en="your company"
+          input type="text" placeholder="ex. Jack Smith"
+
+        label
+          .capitalize.white
+            span.asterisk
+            tr-span en="company email"
+          input type="email" placeholder="ex. jsmith@gmail.com"
+
+        label
+          .capitalize.white
+            span.asterisk
+            tr-span en="subject"
+          input type="text"
+          
+        label
+          .capitalize.white
+            span.asterisk
+            tr-span en="message"
+          textarea
+
+        .button-forms
+          button class="button expand"
+            span.capitalize 
+              tr-span en="submit"
+<% end %>

data/generica/app/varissets/javascripts/templates/index.emblem.erb

@@ -0,0 +1,11 @@
+hero-splash
+
+<% if products_first? %>
+products-showcase id="products" products=model.products
+introductory-lobby id="about"
+<% else %>
+introductory-lobby id="about"
+products-showcase id="products" products=model.products
+<% end %>
+
+table-booths id="contacts" contacts=model.employees

data/generica/app/varissets/stylesheets/apiv1/_application.css.scss.erb

@@ -0,0 +1,66 @@
+@import 'apiv1/components/site-nav';
+@import 'apiv1/components/files-field';
+@import 'apiv1/components/type-ahead';
+@import 'apiv1/components/cookie-splash';
+@import 'apiv1/components/search-and-filter';
+@import 'apiv1/components/tree-taxon-wrapper';
+@import 'apiv1/components/select-locale';
+@import 'apiv1/components/hero-splash';
+@import 'apiv1/components/introductory-lobby';
+@import 'apiv1/components/products-showcase';
+@import 'apiv1/components/table-booths';
+@import 'apiv1/components/site-footer';
+@import 'apiv1/components/flash-message';
+@import 'apiv1/components/promise-button';
+@import 'apiv1/components/block-grid-pictures';
+@import 'apiv1/components/fancy-paginator';
+@import "apiv1/modals/login";
+
+body {
+  background: {
+    color: <%= body_background_color %>;
+  }
+  overflow-x: hidden;
+}
+
+.site-content {
+  @include display-flex;
+  @include justify-content(space-between);
+  @include flex-direction(column);
+  min-height: 100%;
+}
+
+#fixed-bottom {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+}
+
+.modal-background {
+  display: none;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background: {
+    color: <%= modal_background_color %>;
+  }
+}
+
+.modal-vertical-container {
+  height: 100%;
+  width: 100%;
+  @include display-flex;
+  @include flex-direction(column);
+  @include justify-content(center);
+}
+
+.modal-horizontal-container {
+  height: 100%;
+  width: 100%;
+  @include display-flex;
+  @include flex-direction(row);
+  @include justify-content(center);
+}

data/generica/app/varissets/stylesheets/apiv1/components/_cookie-splash.css.scss.erb

@@ -0,0 +1,61 @@
+.cookie-splash {
+<% case splash_style %>
+<% when :wechat %>
+  padding-bottom: 25px;
+  .standard-container {
+    @include display-flex;
+    @include justify-content(center);
+    @include flex-direction(row);
+    width: 100%;
+  }
+  .splash-background::before {
+    display: block;
+    content: " ";
+    width: 100%;
+    height: 125px;
+    background: {
+      image: <%= background_image_url %>;
+      size: <%= background_image_size %>;
+      position: <%= background_image_position %>;
+      repeat: no-repeat;
+    }
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+    left: 0px;
+    @include filter(blur(5px));
+  }
+  .splash-background {
+    position: relative; 
+    height: 125px;
+  }
+  .page-intro {
+    width: $row-width;
+    @include display-flex;
+    @include align-items(flex-end);
+    @include justify-content(flex-end);
+    @include flex-direction(row);
+  }
+  .active-page-title {
+    text-align: right;
+    margin-bottom: -25px;
+    font-size: 1.35rem;
+  }
+  .product-icon {
+    max-height: 75px;
+  }
+  .cookiecrumbs {
+    width: $row-width;
+    font-size: 1.15rem;
+  }
+  .crumb {
+    padding-left: 15px;
+  }
+  .crumb:not(:last-child) {
+    &:after {
+      content: " / ";
+    }
+  }
+<% end %>
+}
+

data/generica/app/varissets/stylesheets/apiv1/components/_hero-splash.css.scss.erb

@@ -0,0 +1,42 @@
+.hero-splash {
+<% case hero_style %>
+<% when :static %>
+  .background-container {
+    @include display-flex;
+    @include justify-content(center);
+    @include flex-direction(column);
+    background: {
+      repeat: no-repeat;
+      size: cover;
+      // variable - hero-splash/*.jpg
+      image: <%= background_image_url %>;
+    }
+    // variable - *rem
+    min-height: <%= background_min_height %>;
+  }
+  .splash-tagline,
+  .splash-cta {
+    @include display-flex;
+    @include justify-content(center);
+    // variable depending upon average background color, use if bg image colors are spread apart enough
+    @include background-image(linear-gradient(to right, fade-out(<%= splash_cta_bgcolor %>, 0.4), fade-out(<%= splash_cta_bgcolor %>, 1)));
+  }
+  .splash-tagline {
+    padding-top: 10px;
+  }
+  .tagline-container,
+  .cta-container {
+    // tied to the other container width
+    // variable - *px
+    width: $row-width;
+  }
+  .companytag,
+  .pretag,
+  .posttag {
+    // variable - left, center, right
+    text-align: <%= tag_text_align %>;
+    // variable - invert color of albatross
+    color: <%= tag_text_color %>;
+  }
+<% end %>
+}

data/generica/app/varissets/stylesheets/apiv1/components/_introductory-lobby.css.scss.erb

@@ -0,0 +1,26 @@
+.introductory-lobby {
+<% case lobby_style %>
+<% when :center_plain %>
+  @include display-flex;
+  @include justify-content(center);
+  
+  .center-plain {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+  .container {
+    width: $row-width;
+  }
+  .about-title {
+    text-align: center;
+    text-transform: capitalize;
+    color: <%= title_text_color %>;
+  }
+  .about-abstract {
+    text-align: center;
+    padding: 15px;
+    color: <%= abstract_text_color %>;
+  }
+<% when :something_else %>
+<% end %>
+}

data/generica/app/varissets/stylesheets/apiv1/components/_product-display.css.scss.erb

@@ -0,0 +1,30 @@
+.product-display {
+<% case display_style %>
+<% when :media_one %>
+  .media-object {
+    padding-left: 15px;
+    @media #{$small-only} {
+      width: 100%;
+    }
+    @media #{$medium-up} {
+      width: 33%;
+    }
+  }
+  .media-texts {
+    padding-left: 15px;
+    @media #{$small-only} {
+      width: 100%;
+    }
+    @media #{$medium-up} {
+      width: 66%;
+    }
+  }
+  img.product-image {
+    min-height: 275px;
+  }
+  .product-title {
+    font-size: 2rem;
+    text-transform: capitalize;
+  }
+<% end %>
+}

data/generica/app/varissets/stylesheets/apiv1/components/_product-listing.css.scss.erb

@@ -0,0 +1,37 @@
+.product-listing {
+<% case listing_style %>
+<% when :simple %>
+  @include transition-property(background-color);
+  @include transition-duration(300ms);
+  @include transition-timing-function(ease-out);
+  background: {
+    color: #ccc;
+  }
+  &:hover {
+    background: {
+      color: #ddd;
+    }
+  }
+  .product-image {
+    max-width: 75px;
+    max-height: 75px;
+  }
+  .media-texts {
+    font-size: 1.45rem;
+    width: 100%;
+  }
+  .smaller-details {
+    font-size: 0.85rem;
+  }
+  .media-object {
+    margin-right: 15px;
+  }
+  .product-header {
+    @include display-flex;
+    @include flex-direction(row);
+    @include justify-content(flex-start);
+    @include align-items(center);
+    border-bottom: 1px solid #bbb;
+  }
+<% end %>
+}

data/generica/app/varissets/stylesheets/apiv1/components/_products-catalog.css.scss.erb

@@ -0,0 +1,5 @@
+.products-catalog {
+<% case catalog_style %>
+<% when :plain %>
+<% end %> 
+}

data/generica/app/varissets/stylesheets/apiv1/components/_products-showcase.css.scss.erb

@@ -0,0 +1,39 @@
+.products-showcase {
+<% case showcase_style %>
+<% when :big_media %>
+  .contained-media-one {
+    padding-top: 5rem;
+    border-top: 2px solid #777;
+  }
+  .product-container {
+    @include display-flex;
+    @include justify-content(center);
+  }
+  .product-row {
+    width: $row-width;
+  }
+  .container-row {
+    @include display-flex;
+    @include align-items(flex-end);
+    @include align-content(flex-end);
+    @include flex-direction(row);
+    @include flex-wrap(wrap-reverse);
+  }
+  .product-post-note {
+    @include display-flex;
+    @include justify-content(center);
+    @include flex-direction(column);
+    background: {
+      image: <%= post_note_background_url %>;
+      size: <%= post_note_background_size %>;
+      position: <%= post_note_background_position %>;
+    }
+    min-height: 30rem;
+  }
+  .after-thought {
+    text-align: center;
+    font-weight: bolder;
+    background-color: fade-out(#fff, 0.4);
+  }
+<% end %>
+}

data/generica/app/varissets/stylesheets/apiv1/components/_site-nav.css.scss.erb

@@ -0,0 +1,213 @@
+<% case nav_style %>
+<% when :left %>
+//# ruby
+$canvas-menu-bg-color: #666;
+$menu-bar-icon-color: fade-out(#fff, 0.7);
+$nav-button-text-align: center;
+$button-horizontal-padding: 15px;
+$button-vertical-padding: 25px;
+$button-font-size: 1.25rem;
+$button-border-bottom: 1px solid darken($canvas-menu-bg-color, 10%);
+$button-default-color: #e7e7e7;
+$button-active-color: #008cba;
+$button-active-font-color: #fff;
+$button-hover-color: darken(#008cba, 10%);
+$button-hover-font-color: #fff;
+$button-font-color: invert($button-default-color);
+$canvas-menu-bg-image: url(hero-splash/seaweed.png);
+//# end
+.application-container {
+  @include display-flex;
+  @include justify-content(flex-start);
+  @include transition-property(left);
+  @include transition-duration(0.3s);
+  @include transition-timing-function(ease);
+  position: absolute;
+  top: 0px;
+  height: 100%;
+  @media #{$small-only} {
+    width: 150%;
+  }
+  @media #{$medium-only} { 
+    width: 125%;
+  }
+  @media #{$large-up} {
+    width: 100%;
+    left: 0px;
+  }
+}
+.shifted {
+  @media #{$medium-only} {
+    left: -25%;
+  }
+  @media #{$small-only} {
+    left: -50%;
+  }
+}
+#canvas-menu-left {
+  @media #{$small-only} {
+    width: 50%;
+  }
+  @media #{$medium-only} {
+    width: 25%;
+  }
+  @media #{$large-up} {
+    width: 15%;
+  }
+  height: 100%;
+  background: {
+    color: $canvas-menu-bg-color;
+    image: $canvas-menu-bg-image;
+    position: left bottom;
+    size: contain;
+    repeat: no-repeat;
+  }
+}
+#page-wrapper {
+  width: 100%;
+  @media #{$large-up} {
+    width: 85%;
+  }
+  height: 100%;
+  overflow-y: auto;
+}
+.small-time-header {
+  position: absolute;
+  padding: 15px;
+  background-color: $menu-bar-icon-color;
+}
+.site-nav {
+  .nav-button {
+    width: 100%;
+    text-align: $nav-button-text-align;
+  }
+  .side-nav {
+    @include transition-property(background-color);
+    @include transition-duration(300ms);
+    @include transition-timing-function(ease-out);
+    margin-bottom: 0px;
+    padding-left: $button-horizontal-padding;
+    padding-right: $button-horizontal-padding;
+    padding-top: $button-vertical-padding;
+    padding-bottom: $button-vertical-padding;
+    font-size: $button-font-size;
+    color: $button-font-color;
+    border-bottom: $button-border-bottom;
+    background-color: $button-default-color;
+    &.active {
+      background-color: $button-active-color;
+      color: $button-active-font-color;
+    }
+    &:hover {
+      background-color: $button-hover-color;
+      color: $button-hover-font-color;
+    }
+  }
+}
+<% when :top %>
+//# ruby
+$standard-container-height: 75px;
+$menu-tab-width: 125px;
+$company-title-font-size: 1.35rem;
+$nav-bar-bg-color: fade-out(#444, 0.25);
+$tab-vertical-padding: 15px;
+$tab-horizontal-padding: 15px;
+$tab-border: 1px solid #666;
+$title-font-color: #eee;
+$tab-font-default-color: #333;
+$tab-bg-default-color: #e7e7e7;
+$tab-bg-active-color: #008cba;
+$tab-font-active-color: #fff;
+$tab-bg-hover-color: darken(#008cba, 10%);
+$tab-font-hover-color: invert($tab-bg-default-color);
+//# end
+.application-container,
+#canvas-menu-top,
+#page-wrapper {
+  position: absolute;
+}
+.application-container,
+#canvas-menu-top {
+  top: 0px;
+}
+.application-container,
+#page-wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+#page-wrapper {
+  padding-top: $standard-container-height;
+  overflow-y: auto;
+}
+
+nav.site-nav {
+  position: fixed;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  @include display-flex;
+  @include justify-content(center);
+  background: {
+    color: $nav-bar-bg-color;
+  }
+  .possible-container {
+    @include display-flex;
+    @include justify-content(space-between);
+    width: $row-width;
+    height: $standard-container-height;
+  }
+  .options-menu {
+    @include display-flex;
+    @include justify-content(flex-end);
+    @include align-items(stretch);
+    width: 80%;
+    height: 100%;
+  }
+  .title-area {
+    // padding-top: $tab-vertical-padding;
+    // padding-bottom: $tab-vertical-padding;
+    @include display-flex;
+    @include flex-direction(column);
+    @include justify-content(center);
+    padding-left: $tab-horizontal-padding;
+    font-size: $company-title-font-size;
+    color: $title-font-color;
+    width: 20%;
+    height: 100%;
+  }
+  .menu-tab {
+    // padding-top: $tab-vertical-padding;
+    // padding-bottom: $tab-vertical-padding;
+    @include display-flex;
+    @include flex-direction(column);
+    @include justify-content(center);
+    @include align-items(center);
+    @include transition-property(background-color);
+    @include transition-duration(300ms);
+    @include transition-timing-function(ease-out);
+    font-size: $company-title-font-size;
+    width: $menu-tab-width;
+    border-left: $tab-border;
+    color: $tab-font-default-color;
+    background: {
+      color: $tab-bg-default-color;
+    }
+    .menu-nav {
+      text-align: center;
+    }
+    &:last-child {
+      border-right: $tab-border;
+    }
+    &.active {
+      background-color: $tab-bg-active-color;
+      color: $tab-font-active-color;
+    }
+    &:hover {
+      background-color: $tab-bg-hover-color;
+      color: $tab-font-hover-color;
+    }
+  }
+}
+<% end %>