rebuild - breadcrumbs

FundingCircle · Jun 8, 2015 · e16e8d6 · e16e8d6
1 parent 5831237
commit e16e8d6
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 5 deletions.
diff --git a/dist/fonts/fc-icons.eot b/dist/fonts/fc-icons.eot
diff --git a/dist/fonts/fc-icons.ttf b/dist/fonts/fc-icons.ttf
diff --git a/dist/fonts/fc-icons.woff b/dist/fonts/fc-icons.woff
diff --git a/dist/sass/_mixins/css-properties.scss b/dist/sass/_mixins/css-properties.scss
@@ -151,6 +151,8 @@
 \* ---------------------------------------------------------------------- */
 
 @mixin opacity($opacity) {
+  // scss-lint:disable VendorPrefix
+
   opacity: $opacity;
 
   $opacityIE: $opacity * 100;
@@ -330,6 +332,8 @@
 \* ---------------------------------------------------------------------- */
 // scss-lint:disable VendorPrefix
 @mixin keyframes($animationName) {
+  // scss-lint:disable VendorPrefix
+
   @-webkit-keyframes $animationName {
     @content;
   }
@@ -348,6 +352,8 @@
 }
 
 @mixin animation($str) {
+  // scss-lint:disable VendorPrefix
+
   -webkit-animation: #{$str};
   -moz-animation: #{$str};
   -ms-animation: #{$str};

diff --git a/dist/sass/_variables/colors.scss b/dist/sass/_variables/colors.scss
@@ -86,6 +86,7 @@ $colorHighlightExternal: rgb(232, 232, 232);
 // Styleguide 4.4
 
 $colorBackgroundMain: rgb(255, 255, 255);
+$colorBackgroundBody: rgb(250, 250, 250);
 $colorBackground2: rgb(232, 232, 232);
 $colorBackground3: rgb(204, 204, 204);
 $colorBackground4: rgb(131,130,128);
@@ -156,4 +157,3 @@ $colorMessage: rgb(171, 51, 131);
 $formInputBackgroundMain: rgb(255,255,255);
 $formInputBorderMain: rgb(221,221,221);
 $tooltipBackground: rgb(255,255,255);
-
diff --git a/dist/sass/general/breadcrumbs.scss b/dist/sass/general/breadcrumbs.scss
@@ -0,0 +1,199 @@
+$breadcrumbsHeight: 42px;
+$stepsOffset: 9px;
+
+$arrowsAfterSize: ($breadcrumbsHeight + 2) / 2;
+$arrowsBeforeSize: $arrowsAfterSize + $stepsOffset;
+
+$tabletArrowsAfterSize: $arrowsAfterSize + 4;
+$tabletArrowsBeforeSize: $arrowsBeforeSize + 4;
+
+.breadcrumbs {
+  @include prefix(transition, none);
+  * {
+    @include prefix(transition, none);
+  }
+
+  list-style: none;
+  margin: rem(0 auto 2 auto);
+  padding: 0;
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  position: relative;
+  z-index: 2;
+
+  &_wrap,
+  &_wrap--last-step {
+    background: $colorBackgroundMain;
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 50%;
+      background: $colorBackground2;
+      display: block;
+    }
+  }
+
+  &_wrap--last-step:after {
+    display: none;
+  }
+
+  li {
+    display: table-cell;
+    width: 1%;
+    position: relative;
+    background: $colorBackgroundMain;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: $breadcrumbsHeight;
+    line-height: $breadcrumbsHeight;
+    padding-right: rem(1.7);
+    text-align: center;
+    color: $ColorBrand4;
+    @include font(0, false);
+
+    @include prefix(transition, none);
+
+    @include breakPoints(false, $bpMobilePortraitLarge) {
+      @include font(-1, false);
+      height: $breadcrumbsHeight + 2;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-top: $arrowsAfterSize solid transparent;
+      border-bottom: $arrowsAfterSize solid transparent;
+      border-left: $arrowsAfterSize solid $colorBackgroundMain;
+      position: absolute;
+      right: $stepsOffset;
+      top: 0;
+
+      @include breakPoints(false, $bpMobilePortraitLarge) {
+        border-top: $tabletArrowsAfterSize solid transparent;
+        border-bottom: $tabletArrowsAfterSize solid transparent;
+        border-left: $tabletArrowsAfterSize solid $colorBackgroundMain;
+      }
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-top: $arrowsBeforeSize solid transparent;
+      border-bottom: $arrowsBeforeSize solid transparent;
+      border-left: $arrowsBeforeSize solid $colorBackgroundBody;
+      position: absolute;
+      right: 0;
+      top: negative($stepsOffset);
+
+      @include breakPoints(false, $bpMobilePortraitLarge) {
+        border-top: $tabletArrowsBeforeSize solid transparent;
+        border-bottom: $tabletArrowsBeforeSize solid transparent;
+        border-left: $tabletArrowsBeforeSize solid $colorBackgroundBody;
+      }
+    }
+
+    &:last-child {
+      position: static;
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    &.is-active {
+      color: $colorFontDarkHard;
+
+      &:before {
+        border-top: $arrowsBeforeSize solid $colorBackground2;
+        border-bottom: $arrowsBeforeSize solid $colorBackground2;
+
+        @include breakPoints(false, $bpMobilePortraitLarge) {
+          border-top: $tabletArrowsBeforeSize solid $colorBackground2;
+          border-bottom: $tabletArrowsBeforeSize solid $colorBackground2;
+        }
+      }
+
+      .breadcrumbs_duration {
+        display: inline;
+
+        @include breakPoints(false, $bpTabletLandscapeWide) {
+          display: none;
+        }
+      }
+
+      &,
+      & ~ * {
+        .breadcrumbs_step {
+          border: 1px solid $colorFontDarkHard;
+          @include borderRadius(50, '%');
+          padding: 0 6px;
+          display: inline;
+
+          &:before {
+            display: none;
+          }
+        }
+      }
+
+      & ~ * {
+        background: $colorBackground2;
+        color: $colorFontLightHard;
+
+        &:after {
+          border-left-color: $colorBackground2;
+        }
+
+        .breadcrumbs_step {
+          border: 1px solid $colorFontLightHard;
+        }
+      }
+    }
+  }
+
+  &_step {
+    margin-right: 5px;
+    display: inline-block;
+    text-indent: -9001px;
+    border: 0;
+    width: 15px;
+
+    &:before {
+      text-indent: 0;
+      float: left;
+      @extend .fci-icon;
+      @extend .fci-tick;
+    }
+  }
+
+  &_title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 2;
+    text-transform: uppercase;
+
+    @include breakPoints(false, $bpMobilePortraitLarge) {
+      display: block;
+      position: relative;
+      line-height: 10px;
+      top: -10px;
+    }
+  }
+
+  &_duration {
+    display: none;
+    color: $colorFontLightHard;
+    font-style: italic;
+    margin-left: 5px;
+  }
+}
diff --git a/dist/sass/general/structure.scss b/dist/sass/general/structure.scss
@@ -16,7 +16,7 @@ body {
 
 body {
   font-family: $fontFamilyDefault;
-  background: rgb(250,250,250);
+  background: $colorBackgroundBody;
   color: $colorFontDarkHard;
 
 }
@@ -72,4 +72,3 @@ h5,
 h6 {
   margin: 0 0 1em;
 }
-
diff --git a/dist/sass/style.scss b/dist/sass/style.scss
@@ -491,6 +491,9 @@ $ie: false!default;
 // address lookup
 @import './general/address-lookup';
 
+// breadcrumbs
+@import './general/breadcrumbs';
+
 
 /* ---------------------------------------------------------------------- *\
   DYNAMIC LOADERS