cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/components/sidebars/_popular-search.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // -----------------------------------------
 // Components - Sidebars - popular search
 // -----------------------------------------
@@ -156,7 +154,7 @@ $popular-search-minus: #999 !default;
 
     > li::before {
       background-color: transparent;
-      color: $ic-brown;
+      color: $brown;
       content: counter(li);
       counter-increment: li;
       font-size: 18px;
@@ -208,17 +206,18 @@ $popular-search-minus: #999 !default;
   }
 
   .media-left {
-    @include ellipsis;
-
     line-height: 60px;
     margin-right: 0;
     margin-top: 0;
-    width: 41.7%;
+    width: 39%;
 
     a {
+      @include ellipsis;
+
       color: $popular-search-link;
       float: left;
       font-size: 16px;
+      width: 65%;
     }
   }
 
@@ -236,8 +235,6 @@ $popular-search-minus: #999 !default;
     }
 
     a {
-      @include ellipsis;
-
       display: block;
       width: 80px;
     }
@@ -254,30 +251,24 @@ $popular-search-minus: #999 !default;
     }
   }
 
-  .icon-arrow-up {
-    @include icon("\f176");
+  .icon-arrow-up::before {
+    @include icon-util("\f176", "FontAwesome");
 
-    &::before {
-      color: $popular-search-arrow-up;
-    }
+    color: $popular-search-arrow-up;
   }
 
-  .icon-arrow-down {
-    @include icon("\f175");
+  .icon-arrow-down::before {
+    @include icon-util("\f175", "FontAwesome");
 
-    &::before {
-      color: $popular-search-arrow-down;
-    }
+    color: $popular-search-arrow-down;
   }
 
-  .icon-minus {
-    @include icon("\f068");
+  .icon-minus::before {
+    @include icon-util("\f068", "FontAwesome");
 
-    &::before {
-      color: $popular-search-minus;
-      position: relative;
-      right: -2px;
-    }
+    color: $popular-search-minus;
+    position: relative;
+    right: -2px;
   }
 
   .icon-arrow-up,
@@ -328,3 +319,4 @@ $popular-search-minus: #999 !default;
     }
   }
 }
+

data/app/assets/stylesheets/components/sidebars/_recipes-collect.scss

@@ -25,7 +25,7 @@ name: 05_recipes_collect
 </div>
 */
 
-$recipes-collect-icon: $orange !default;
+$recipes-collect-icon: $orange-red !default;
 
 .recipes-collect {
   li {
@@ -39,9 +39,11 @@ $recipes-collect-icon: $orange !default;
   }
 
   a {
-    @include icon-b("\f0a9");
+    color: $brown;
 
     &::after {
+      @include icon-util("\f0a9", "FontAwesome");
+
       color: $recipes-collect-icon;
       line-height: 19px;
       margin-left: 0;
@@ -50,3 +52,4 @@ $recipes-collect-icon: $orange !default;
     }
   }
 }
+

data/app/assets/stylesheets/components/sidebars/_sidebar-basic.scss

@@ -4,11 +4,11 @@
 // default sidebar widget basic style
 
 $sidebar-title: #aa0000 !default;
-$sidebar-link: #5c4544 !default;
+$sidebar-link: $brown !default;
 $sidebar-link-hover: #ac8c85 !default;
 $title-link-to-more-text: #888 !default;
-$title-link-to-more-icon: $ic-brown !default;
-$title-link-to-more-hover: $orange !default;
+$title-link-to-more-icon: $brown !default;
+$title-link-to-more-hover: $orange-red !default;
 
 .widget {
   padding-left: 11px;
@@ -34,15 +34,6 @@ $title-link-to-more-hover: $orange !default;
     &:last-child {
       padding-bottom: 0;
     }
-
-    a {
-      color: $sidebar-link;
-      display: block;
-
-      &:hover {
-        color: $sidebar-link-hover;
-      }
-    }
   }
 }
 
@@ -56,12 +47,12 @@ $title-link-to-more-hover: $orange !default;
 }
 
 .link-to-more {
-  @include icon-b("\f0a9");
-
   color: $title-link-to-more-text;
   font-size: 14px;
 
   &::after {
+    @include icon-util("\f0a9", "FontAwesome");
+
     color: $title-link-to-more-icon;
   }
 

data/app/assets/stylesheets/components/sidebars/_tv-more-recipes.scss

@@ -57,7 +57,7 @@ name: 11_tv_more_recipes
 </div>
 */
 
-$more-recipes-title: $ic-brown !default;
+$more-recipes-title: $brown !default;
 
 .more-recipes {
   img {
@@ -65,8 +65,8 @@ $more-recipes-title: $ic-brown !default;
   }
 
   .title {
-    border-bottom: 1px solid $ic-brown;
-    color: $ic-brown;
+    border-bottom: 1px solid $brown;
+    color: $brown;
     font-size: 16px;
     margin-top: 0;
     padding-bottom: 10px;
@@ -98,4 +98,3 @@ $more-recipes-title: $ic-brown !default;
   }
 }
 
-

data/app/assets/stylesheets/components/sidebars/_tv-popular-tags.scss

@@ -29,13 +29,13 @@ name: 12_tv_popular_tags
 */
 
 $tag-link: #8c8783 !default;
-$tag-link-bg: #efede8 !default;
-$tag-link-hover: $ic-brown !default;
+$tag-link-bg: $light-gray !default;
+$tag-link-hover: $brown !default;
 
 .popular-tags {
   .title {
-    border-bottom: 1px solid $ic-brown;
-    color: $ic-brown;
+    border-bottom: 1px solid $brown;
+    color: $brown;
     font-size: 16px;
     margin-top: 0;
     padding-bottom: 10px;
@@ -76,4 +76,3 @@ $tag-link-hover: $ic-brown !default;
 	}
 }
 
-

data/app/assets/stylesheets/components/users/_fav-list.scss

@@ -1,7 +1,5 @@
-@import "compass/typography/text/ellipsis";
-
 // --------------------------------
-// User sidebar widgets - fav list
+// Components - User - fav list
 // --------------------------------
 
 /*doc
@@ -59,10 +57,10 @@ name: 02_fav_list
 $accordion-list-bg: $white !default;
 $accordion-list-title: #efede8 !default;
 $accordion-list-link: #777 !default;
-$accordion-list-link-active: $ic-brown !default;
+$accordion-list-link-active: $brown !default;
 $accordion-list-link-hover-text: $white !default;
-$accordion-list-border: #ebe5e1 !default;
-$accordion-list-button: $ic-brown !default;
+$accordion-list-border: $basic-border !default;
+$accordion-list-button: $brown !default;
 
 .accordion-list {
   .navbar-collapse {
@@ -146,8 +144,6 @@ $accordion-list-button: $ic-brown !default;
   }
 
   button {
-    @include icon-b("\f0dd");
-
     color: $accordion-list-button;
     margin: 0;
     padding: 10px 15px;
@@ -155,6 +151,8 @@ $accordion-list-button: $ic-brown !default;
     width: 100%;
 
     &::after {
+      @include icon-util("\f0dd", "FontAwesome");
+
       font-size: 20px;
       height: 20px;
       margin-left: 0;

data/app/assets/stylesheets/components/users/_user-stats.scss

@@ -89,22 +89,22 @@ name: 01_user_stats
 
 $users-stats-tabs-border: $basic-bg !default;
 $users-stats-tabs-link: #aaa !default;
-$users-stats-tabs-link-hover: $ic-brown !default;
-$users-stats-tabs-small-title: $ic-brown !default;
+$users-stats-tabs-link-hover: $brown !default;
+$users-stats-tabs-small-title: $brown !default;
 $users-author-box-text: #888 !default;
-$users-author-text: $ic-brown !default;
+$users-author-text: $brown !default;
 $users-desc-title-bg: $basic-bg !default;
-$users-desc-title: $ic-brown !default;
-$users-desc-link: $orange !default;
-$users-user-url-link: $orange !default;
+$users-desc-title: $brown !default;
+$users-desc-link: $brown-light10 !default;
 $users-author-box-recipes-border: #dadada !default;
-$users-author-box-recipes-link-hover: $ic-brown !default;
+$users-author-box-recipes-link-hover: $brown !default;
 $users-author-box-recipes-item-count: #9b9b9b !default;
-$users-author-box-recipes-item-name: $ic-brown !default;
+$users-author-box-recipes-item-name: $brown !default;
 
 .stats-tabs {
   border-top: 1px solid $users-stats-tabs-border;
   padding-bottom: 15px;
+  padding-left: 0;
   padding-top: 20px;
   text-align: center;
 
@@ -113,28 +113,30 @@ $users-author-box-recipes-item-name: $ic-brown !default;
     display: inline-block;
     min-width: 20%;
     padding: 0;
-
-    a {
-      color: $users-stats-tabs-link;
-      display: block;
-      font-size: 24px;
-
-      &:hover {
-        color: $users-stats-tabs-link-hover;
-        text-decoration: none;
-      }
-    }
   }
 
-  a > span {
-    &:nth-child(2) {
-      font-size: 24px;
-      text-align: center;
+  a {
+    color: $users-stats-tabs-link;
+    display: block;
+    font-size: 24px;
+
+    &:hover {
+      color: $users-stats-tabs-link-hover;
+      text-decoration: none;
     }
 
-    &:nth-child(1) {
+    > span {
       color: $users-stats-tabs-small-title;
       font-size: 14px;
+
+      span {
+        color: $users-stats-tabs-link;
+        font-size: 24px;
+
+        &:hover {
+          color: $users-stats-tabs-link-hover;
+        }
+      }
     }
   }
 
@@ -185,6 +187,8 @@ $users-author-box-recipes-item-name: $ic-brown !default;
     word-wrap: break-word;
 
     > div {
+      color: $brown-light10;
+      font-weight: 300;
       padding-left: 15px;
       padding-right: 15px;
     }
@@ -221,7 +225,7 @@ $users-author-box-recipes-item-name: $ic-brown !default;
   }
 
   a {
-    color: $users-user-url-link;
+    color: $users-desc-link;
   }
 }
 

data/app/assets/stylesheets/helpers/_mixin-badge.scss

@@ -2,19 +2,20 @@
 // Mixin - badge
 // --------------------------------
 @mixin badge($content, $bg-color) {
-  &:after {
+  &::after {
     background-color: $bg-color;
     border-radius: 4px;
+    color: $white;
     content: $content;
-    color: #fff;
     display: inline-block;
     font-size: 11px;
     font-weight: normal;
     line-height: 1;
-    min-width: 10px;
     margin-left: 5px;
+    min-width: 10px;
     padding: 3px 6px 1px;
     position: relative;
     top: -1px;
   }
 }
+

data/app/assets/stylesheets/helpers/_mixin-ellipsis.scss

@@ -0,0 +1,39 @@
+// --------------------------------
+// Mixin - ellipsis
+// --------------------------------
+@mixin ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+// Usage Notice:
+// $max-height - max-height property value. required
+// parameter to limit text in non-webkit browser.
+// Be careful with overriding properties.
+// Strongly recommended to include this mixin after all properties
+// to prevent overriding of display property:
+// .my block {
+//   display: block;
+//   ...
+//   @include ellipsis(2em, 2);
+// }
+// Example of usage:
+// @include ellipsis(2em, 2);
+
+@mixin ellipsis-multiline($max-height, $lines: 2) {
+  // Fallback for non-webkit browsers.
+  // Fallback does not render ellipsis.
+  overflow: hidden;
+  max-height: $max-height;
+  // Webkit solution for multiline ellipsis
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  // Solution for Opera
+  text-overflow: -o-ellipsis-lastline;
+}
+

data/app/assets/stylesheets/helpers/_mixin-flex.scss

@@ -0,0 +1,247 @@
+// -----------------------------------------
+// Mixin - flex
+// -----------------------------------------
+// Placeholder(%) selectors for who rather @extend
+
+// Flexbox Containers
+// display: flex | inline-flex
+@mixin flexbox {
+  display: -moz-flex;
+  display: -ms-flexbox;  // IE10
+  display: -webkit-box;
+  display: -webkit-flex; // safari / ios
+  display: flex;
+}
+
+%flexbox { @include flexbox; }
+
+@mixin inline-flex {
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+// -----------------------------------------
+
+// Flexbox Direction
+// values: row | row-reverse | column | column-reverse
+// default: row
+@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -moz-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// shorter version:
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+// ----------------------------------------
+
+// Flexbox Wrap
+// values: nowrap | wrap | wrap-reverse
+// default: nowrap
+// no webkit box fallback
+@mixin flex-wrap($value: nowrap) {
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+// ---------------------------------------
+
+// Flexbox Flow (shorthand)
+// values: <flex-direction> | <flex-wrap>
+// default: row nowrap
+// no webkit box fallback
+@mixin flex-flow($values: row nowrap) {
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  -webkit-flex-flow: $values;
+  flex-flow: $values;
+}
+
+// ---------------------------------------
+
+// Flexbox Order
+// default: 0
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -moz-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+// --------------------------------------
+
+// Flexbox Grow
+// default: 0
+// negative numbers are invalid
+@mixin flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}
+
+// -------------------------------------
+
+// Flexbox Shrink
+// default: 1
+// negative numbers are invalid
+@mixin flex-shrink($int: 1) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+}
+
+// ------------------------------------
+
+// Flexbox Basis
+// values: Like "width"
+// default: auto
+// negative numbers are invalid
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+}
+
+// -----------------------------------
+
+// Flexbox "Flex" (shorthand)
+// values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// default: See individual properties (1 1 0)
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+  // set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // box-flex only supports a flex-grow value so grab the
+  // first item in the list and just return that
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+  -webkit-box-flex: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -moz-box-flex: $fg-boxflex;
+  -moz-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+// -----------------------------------
+
+// Flexbox Justify Content
+// values: flex-start | flex-end | center | space-between | space-around
+// default: flex-start
+// note: 'space-*' values not supported in older syntaxes
+@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+
+// shorter version:
+@mixin flex-just($args...) { @include justify-content($args...); }
+
+// -----------------------------------
+
+// Flexbox Align Items
+// values: flex-start | flex-end | center | baseline | stretch
+// default: stretch
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+// -----------------------------------
+
+// Flexbox Align Self
+// values: auto | flex-start | flex-end | center | baseline | stretch
+// default: auto
+// no webkit box fallback
+@mixin align-self($value: auto) {
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+// ----------------------------------
+
+// Flexbox Align Content
+// values: flex-start | flex-end | center | space-between | space-around | stretch
+// default: stretch
+// no webkit box fallback
+// note: this property has no effect when the flexbox has only a single line
+@mixin align-content($value: stretch) {
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+

data/app/assets/stylesheets/helpers/_mixin-icons.scss

@@ -1,30 +1,18 @@
 // --------------------------------
 // Mixin - icons
 // --------------------------------
-// use font-awesome / icon-font
-@mixin basic-icon($icon) {
+// use icon in psuedo class such as ::before or ::after
+@mixin icon-util($icon, $font) {
   content: $icon;
   display: inline-block;
-  font-family: FontAwesome;
+  font-family: $font;
+  font-size: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-weight: normal;
   height: 14px;
   line-height: 1;
   width: 14px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-@mixin icon($icon) {
-  &:before {
-    @include basic-icon($icon);
-    margin-right: 5px;
-  }
-}
-
-@mixin icon-b($icon) {
-  &:after {
-    @include basic-icon($icon);
-    margin-left: 5px;
-  }
-}