smock 0.1.115 → 0.1.116

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    smock (0.1.115)
+    smock (0.1.116)
       sass (= 3.2.19)
       thor (= 0.19.1)
 

data/app/assets/stylesheets/includes/_images.sass

@@ -1,5 +1,4 @@
 .image--blocked
-  +space(margin-bottom)
   display: block
 
 .avatar
@@ -51,4 +50,4 @@
     text-transform: uppercase
 
 .avatar--small
-  +space(min-height, 3)
+  +space(min-height, 3)

data/app/assets/stylesheets/includes/_space_helpers.sass

@@ -0,0 +1,8 @@
+.s-no-below
+  margin-bottom: 0
+
+.s-small-below
+  +space(margin-bottom)
+
+.s-medium-below
+  +space(margin-bottom, 2)

data/app/assets/stylesheets/includes/_typography.sass

@@ -27,6 +27,11 @@ a
   &:hover
     text-decoration: underline
 
+a.nav
+  text-decoration: none
+  &:hover
+    text-decoration: underline
+
 a.active
   font-weight: bold
 
@@ -61,3 +66,6 @@ cite
 
 .heading--normal-weight
   font-weight: normal
+
+.heading__inline
+  color: $gray

data/app/assets/stylesheets/includes/_typography_helpers.sass

@@ -0,0 +1,23 @@
+// 12px
+.th-size-small
+  +typecsset-font-size($small-font-size)
+
+// 14px
+.th-size-normal
+  +typecsset-font-size($base-font-size)
+
+// 18px
+.th-size-medium
+  +typecsset-font-size($first-font-size)
+
+// 26px
+.th-size-large
+  +typecsset-font-size($second-font-size)
+
+// 38px
+.th-size-xlarge
+  +typecsset-font-size($third-font-size)
+
+//48px
+.th-size-xxlarge
+  +typecsset-font-size($fourth-font-size)

data/app/assets/stylesheets/modules/_metric.sass

@@ -0,0 +1,7 @@
+.metric
+  +clearfix
+  color: $gray
+
+.metric__copy
+.metric__copy__stat
+.metric__copy__name

data/app/assets/stylesheets/modules/_profile.sass

@@ -23,13 +23,15 @@
   margin-bottom: 0
   height: auto
 
-.read__more
 .read__more--expanded
   display: none
   margin: 0
 
 .profile__review__quote
-  +space(margin, 1)
+  +space(margin-top)
+  +space(margin-left)
+  +space(margin-right)
+
   text-align: center
   blockquote
     margin-left: 0
@@ -62,4 +64,4 @@
 .profile__review__box:before
   border-top-color: $gray-lightest2
   border-width: 14px
-  margin-left: -14px
+  margin-left: -14px

data/app/assets/stylesheets/smock.sass

@@ -20,6 +20,8 @@
 @import "includes/forms"
 @import "includes/layouts"
 @import "includes/molecules"
+@import "includes/typography_helpers"
+@import "includes/space_helpers"
 
 @import "modules/am_grid"
 @import "modules/styleguide"
@@ -44,6 +46,7 @@
 @import "modules/stars"
 @import "modules/service_collection"
 @import "modules/tooltip"
+@import "modules/metric"
 
 html.vr
   background-image: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%)

data/examples/pages/profile.html

@@ -293,11 +293,9 @@
     <h3 class="no-margin">zlaws</h3>
     <p class="caption__secondary">London, United Kingdom<span>Joined March 2013</span></p>
     <div class="profile__bio__text read__more">
-<p>I'm pretty sure you might be picturing the person behind this profile sitting in front of his laptop with a cup of coffee or an iced-cold beverage while assisting clients (like you - hopefully) with their needs. </p>
-
-<p>I hope to work with you very soon - waiting for your order :)</p>
-
-<p>Chris</p>
+      <p>I'm pretty sure you might be picturing the person behind this profile sitting in front of his laptop with a cup of coffee or an iced-cold beverage while assisting clients (like you - hopefully) with their needs. </p>
+      <p>I hope to work with you very soon - waiting for your order :)</p>
+      <p>Chris</p>
     </div>
 
     <ul>
@@ -427,7 +425,7 @@
   </div>
 </section>
 
-  <section class="profile__review__quote">
+  <section class="profile__review__quote s-small-below">
     <blockquote class="profile__review__box">
       "We are very happy with his work. We didn't know exactly what we wanted for a logo,but he was very patient with us and delivered us a high quality product that we love. We recommend him highly and it was easy to work with him. "
     </blockquote>

data/examples/pages/service.html

@@ -11,9 +11,26 @@
   <title>Service Example - Envato Studio</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
 
   <link rel="stylesheet" href="../../smock.css" />
   <link rel="stylesheet" href="../../svg_images.css" />
+  <style>
+    /* required to avoid jumping */
+    #fixed-wrapper {
+      position: relative;
+    }
+
+    #fixed-sidebar {
+      position: absolute;
+      top: 0;
+    }
+
+    #fixed-sidebar.fixed {
+      position: fixed;
+      padding-top: 22px;
+    }
+  </style>
 </head>
 <body am-grid>
 
@@ -286,12 +303,255 @@
 
 <section class="l-container">
 
+  <h2 class="s-no-below th-size-large">Express Retouch &amp; Color Correction <span class="heading__inline">3 days with 4 revisions</span></h2>
+  <p><a href="#" class="nav">Design &amp; Graphics</a></p>
+
+  <section class="l-content">
+    <img class="image--blocked s-small-below" src="http://placehold.it/700x528" height="528" alt="Service Placeholder" />
+    <section class="s-no-below profile__review__quote">
+      <blockquote class="profile__review__box">
+        "Great work! Plan on having you do a flyer for my business here shortly as well. Great work, great communication."
+      </blockquote>
+      <strong>Adam Noonan</strong><span class="profile__review__purchase-count">has ordered 2 jobs</span>
+    </section>
+    <hr />
+    <article>
+      <div am-grid-col="l:1:9">
+        <i class="hot-icon__twitter--color--round metrics__icon"></i>
+      </div>
+      <div class="th-size-medium" am-grid-col="l:8:9" am-grid-row="l:end">
+        <h3 class="no-margin">Express Retouch &amp; Color Correction</h3>
+        <p>Donec id elit non mi porta gravida at eget metus. Cras justo odio,
+        dapibus ac facilisis in, egestas eget quam.</p>
+        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+        vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
+        ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies
+        vehicula ut id elit.</p>
+      </div>
+    </article>
+    <article class="s-small-below">
+      <div am-grid-col="l:1:9">
+        <i class="hot-icon__twitter--color--round metrics__icon"></i>
+      </div>
+      <div class="th-size-medium" am-grid-col="l:8:9" am-grid-row="l:end">
+        <h3 class="s-no-below">Briefing Details</h3>
+        <p>Consectetur dicta tempore pariatur praesentium tenetur? Voluptates
+          eum veniam tempore totam provident! Non qui laboriosam error esse
+          iusto? Illo beatae aspernatur sequi ducimus possimus, natus dicta
+          alias! Accusamus veniam excepturi?</p>
+      </div>
+    </article>
+
+    <div am-grid-col="l:9:9" class="s-medium-below">
+      <h3>311 Recommendations</h3>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 98%"></div></div>
+        Responsiveness
+      </div>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 96%"></div></div>
+        Communication
+      </div>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 95%"></div></div>
+        Quality
+      </div>
+    </div>
+
+    <img class="image--blocked s-medium-below" src="http://placehold.it/700x528" height="528" alt="Service Placeholder" />
+
+    <section class="s-medium-below profile__review__quote">
+      <blockquote class="profile__review__box">
+        "Great work! Plan on having you do a flyer for my business here shortly as well. Great work, great communication."
+      </blockquote>
+      <strong>Adam Noonan</strong><span class="profile__review__purchase-count">has ordered 2 jobs</span>
+    </section>
+
+    <img class="image--blocked s-no-below" src="http://placehold.it/700x528" height="528" alt="Service Placeholder" />
+    <hr />
+
+    <div am-grid-col="l:9:9" class="s-medium-below">
+      <h3>311 Recommendations</h3>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 98%"></div></div>
+        Responsiveness
+      </div>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 96%"></div></div>
+        Communication
+      </div>
+      <div am-grid-col="l:2:9">
+        <div class="hot-icon__star-off stars"><div class="stars stars--on hot-icon__star-on" style="width: 95%"></div></div>
+        Quality
+      </div>
+    </div>
+
+
+
+    <ul id="reviews" class="review__list" am-grid-col="l:9:9">
+      <li class="review">
+        <div am-grid-col="l:1:9">
+          <div class="avatar--small">
+            <img src="./provider_profile_page_files/60x60_user_avatar.png" class="avatar__image" width="60" height="60">
+          </div>
+        </div>
+        <div am-grid-col="l:8:9" am-grid-row="l:end">
+          <strong>webmaster1258</strong><span class="profile__review__purchase-count">has ordered 1 job</span>
+          <p class="no-margin">Perfect work. Excellent ideas and professional design.
+          I do recommend zlaws for your needs.
+
+          </p>
+          <p class="caption__secondary">September 2014</p>
+          <br>
+
+        </div>
+      </li>
+      <li class="review">
+        <div am-grid-col="l:1:9">
+          <div class="avatar--small">
+            <img src="./provider_profile_page_files/60x60_user_avatar.png" class="avatar__image" width="60" height="60">
+          </div>
+        </div>
+        <div am-grid-col="l:8:9" am-grid-row="l:end">
+          <strong>Anders89</strong><span class="profile__review__purchase-count">has ordered 3 jobs</span>
+          <p class="no-margin">Thx, good job ;)</p>
+          <p class="caption__secondary">September 2014</p>
+          <br>
+
+          <div am-grid-col="l:8:8">
+            <div am-grid-col="l:1:8">
+              <div class="avatar--small">
+                <img src="./provider_profile_page_files/thumbnail_profile-pic.jpg" class="avatar__image" width="60" height="60">
+              </div>
+            </div>
+            <div am-grid-col="l:7:8">
+              Reply from <strong>zlaws</strong>
+              <p class="no-margin">Great working with you :) </p>
+              <p class="caption__secondary">September 2014</p>
+              <br>
+            </div>
+          </div>
+
+        </div>
+      </li>
+      <li class="review">
+        <div am-grid-col="l:1:9">
+          <div class="avatar--small">
+            <img src="./provider_profile_page_files/60x60_user_avatar.png" class="avatar__image" width="60" height="60">
+          </div>
+        </div>
+        <div am-grid-col="l:8:9" am-grid-row="l:end">
+          <strong>carlosreloaded</strong><span class="profile__review__purchase-count">has ordered 2 jobs</span>
+          <p class="no-margin">Definetely recommended :)</p>
+          <p class="caption__secondary">September 2014</p>
+          <br>
+
+          <div am-grid-col="l:8:8">
+            <div am-grid-col="l:1:8">
+              <div class="avatar--small">
+                <img src="./provider_profile_page_files/thumbnail_profile-pic.jpg" class="avatar__image" width="60" height="60">
+              </div>
+            </div>
+            <div am-grid-col="l:7:8">
+              Reply from <strong>zlaws</strong>
+              <p class="no-margin">Always a pleasure working with Carlos on his requests. Great client and looking forward to work with you again mate.</p>
+              <p class="caption__secondary">September 2014</p>
+              <br>
+            </div>
+          </div>
+
+        </div>
+      </li>
+      <li class="review">
+        <div am-grid-col="l:1:9">
+          <div class="avatar--small">
+            <img src="./provider_profile_page_files/60x60_user_avatar.png" class="avatar__image" width="60" height="60">
+          </div>
+        </div>
+        <div am-grid-col="l:8:9" am-grid-row="l:end">
+          <strong>gioak76</strong><span class="profile__review__purchase-count">has ordered 3 jobs</span>
+          <p class="no-margin">Fantastic work as usual!</p>
+          <p class="caption__secondary">September 2014</p>
+          <br>
+
+        </div>
+      </li>
+    </ul>
+
+
+
+  </section> <!--  end .l-container -->
+
+  <section class="l-sidebar--right th-size-medium" id="fixed-wrapper">
+    <section id="fixed-sidebar">
+      <h3 class="th-size-xlarge">$375</h3>
+      <a href="#" class="button button--large s-small-below">Order Service</a>
+      <div class="metrics--inline s-medium-below">
+        <div class="metric s-small-below">
+          <div class="metric__icon" am-grid-col="l:1:3">
+            <i class="hot-icon__twitter--color--round metrics__icon"></i>
+          </div>
+          <div class="metric__copy" am-grid-col="l:2:3">
+            <div class="metric__copy__stat">100% (8/8)</div>
+            <div class="metric__copy__name">Recommended</div>
+          </div>
+        </div> <!-- end .metric -->
+        <div class="metric s-small-below">
+          <div class="metric__icon" am-grid-col="l:1:3">
+            <i class="hot-icon__twitter--color--round metrics__icon"></i>
+          </div>
+          <div class="metric__copy" am-grid-col="l:2:3">
+            <div class="metric__copy__stat">458</div>
+            <div class="metric__copy__name">Jobs Completed</div>
+          </div>
+        </div> <!-- end .metric -->
+      </div>
+      <hr class="s-small-below"/>
+      <div class="user-card">
+        <div class="avatar--medium" am-grid-col="l:2:3">
+          <img class="avatar__image" src="./provider_profile_page_files/medium_profile-pic.jpg" alt="Avatar" />
+        </div>
+        <div class="user-card__trust-bars" am-grid-col="l:1:3" am-grid-row="l:end">
+          <span class="th-size-small">Speed</span>
+          <div class="metrics__progress_bar"><span class="metrics__progress metrics__progress--red"></span></div>
+          <span class="th-size-small">Reliability</span>
+          <div class="metrics__progress_bar"><span class="metrics__progress metrics__progress--blue"></span></div>
+        </div>
+        <div class="avatar-caption">
+          <p class="avatar-caption__main">Brandbusters</p>
+          <p class="avatar-caption__secondary">Melbourne, Australia</p>
+        </div>
+      </div>
+    </section>
+  </section> <!-- end .l-sidebar-right -->
+</section>
+
 <div class="container">
   <footer class="sub-footer">
     <p>Copyright &copy; 2014 Envato Studio. All Rights Reserved</p>
     <a class="sub-footer__envato svg__envato-logo" href="http://envato.com">Envato</a>
   </footer>
 </div>
+<script>
+  $(document).ready(function () {
+    var top = $('#fixed-sidebar').offset().top - parseFloat($('#fixed-sidebar').css('marginTop').replace(/auto/, 0));
+    var top = top - 22;
+    $(window).scroll(function (event) {
+      // what the y position of the scroll is
+      var y = $(this).scrollTop();
 
+      // whether that's below the form
+      if (y >= top) {
+        console.log('should be fixed');
+        // if so, ad the fixed class
+        $('#fixed-sidebar').addClass('fixed');
+      } else {
+        console.log('should not be fixed');
+        // otherwise remove it
+        $('#fixed-sidebar').removeClass('fixed');
+      }
+    });
+  });
+</script>
 </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: smock
 version: !ruby/object:Gem::Version
-  version: 0.1.115
+  version: 0.1.116
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-10-14 00:00:00.000000000 Z
+date: 2014-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -133,9 +133,11 @@ files:
 - app/assets/stylesheets/includes/_layouts.sass
 - app/assets/stylesheets/includes/_mixins.sass
 - app/assets/stylesheets/includes/_molecules.sass
+- app/assets/stylesheets/includes/_space_helpers.sass
 - app/assets/stylesheets/includes/_svg_images.sass
 - app/assets/stylesheets/includes/_tooltip_settings.sass
 - app/assets/stylesheets/includes/_typography.sass
+- app/assets/stylesheets/includes/_typography_helpers.sass
 - app/assets/stylesheets/includes/_typography_settings.sass
 - app/assets/stylesheets/includes/icons.sass
 - app/assets/stylesheets/modules/_am_grid.sass
@@ -144,6 +146,7 @@ files:
 - app/assets/stylesheets/modules/_footer.sass
 - app/assets/stylesheets/modules/_header.sass
 - app/assets/stylesheets/modules/_hero.sass
+- app/assets/stylesheets/modules/_metric.sass
 - app/assets/stylesheets/modules/_metrics.sass
 - app/assets/stylesheets/modules/_nav.sass
 - app/assets/stylesheets/modules/_pagination.sass
@@ -423,7 +426,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2925940171168374056
+      hash: -3768958305098661865
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -432,7 +435,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2925940171168374056
+      hash: -3768958305098661865
 requirements: []
 rubyforge_project: smock
 rubygems_version: 1.8.21