RubyGems - nfg_ui - Versions diffs - 0.11.18 → 0.12.0 - Mend

nfg_ui 0.11.18 → 0.12.0

Files changed (61) hide show

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss CHANGED Viewed

@@ -7,7 +7,7 @@
   &::after {
     position: absolute;
     top: 0;
-    left: 12px;
+    left: ($spacer * .5);
     bottom: 0;
     z-index: 0;
     border-left: $border-width solid $border-color;
@@ -19,7 +19,7 @@
   }
   .activity-icon {
     position: absolute;
-    top: 2px;
+    top: 0;
     left: 0;
     display: block;
     width: $spacer;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss CHANGED Viewed

@@ -1,13 +1,14 @@
 // Setting a common height for the builder header and nav
-$builder-header-height: ($spacer * 3);
-$builder-header-padding: ($spacer * .5);
-$builder-nav-height: ($spacer * 4.5);
-$builder-nav-padding: $spacer;
+$builder-header-height: ($spacer * 2.25);
+$builder-header-padding: ($spacer * .25) ($spacer * .5);
+$builder-nav-height: ($spacer * 3.25);
+$builder-nav-padding: ($spacer * .75) ($spacer * .5);
 $builder-options-padding: $spacer;
-$builder-preview-padding: ($spacer * 2);
+$builder-preview-padding: ($spacer * 1.5);
 // Put on the <body> to help with correct scrolling within builder-wrap and builder-options
 .builder-layout {
+  background-color: $white;
   @include media-breakpoint-up(lg) {
     height: 100%;
     > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
@@ -19,7 +20,7 @@ $builder-preview-padding: ($spacer * 2);
   padding: $builder-header-padding;
   width: 100%;
   min-height: $builder-header-height;
-  background-color: $dark;
+  background-color: $blue-700;
   z-index: $zindex-fixed;
   @include media-breakpoint-up(lg) {
     position: fixed;
@@ -27,6 +28,7 @@ $builder-preview-padding: ($spacer * 2);
     left: 0;
     right: 0;
   }
+  .text-muted { color: $blue-200 !important; }
 }
 .builder-header-fixed-bottom {
   position: fixed;
@@ -51,9 +53,9 @@ $builder-preview-padding: ($spacer * 2);
 .builder-nav-sm {
   position: fixed;
   bottom: 0;
-  padding: ($builder-nav-padding * .5);
+  padding: $builder-header-padding;
   min-height: $builder-header-height;
-  background-color: $dark;
+  background-color: $blue-700;
   @include media-breakpoint-up(lg) { display: none; }
 }
@@ -80,7 +82,6 @@ $builder-preview-padding: ($spacer * 2);
   }
 }
 .builder-preview {
-  background-color: $body-bg;
   padding: $builder-preview-padding ($builder-preview-padding / 2);
   @include media-breakpoint-up(lg) {
     float: left;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_gallery.scss CHANGED Viewed

@@ -23,7 +23,7 @@
       transition: $transition-fade;
       opacity: 0;
       z-index: 10;
-      @include hover { opacity: 1; }
+      @include hover { opacity: $modal-backdrop-opacity; }
       > .card-gallery-img-overlay-text {
         position: absolute;
         top: 50%;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss CHANGED Viewed

@@ -1,8 +1,8 @@
 // Status indicator on campaigns index
 .status-indicator {
   position: absolute;
-  top: -($font-size-base * .5);
-  right: -($font-size-base * .5);
+  top: -($spacer * .5);
+  right: -($spacer * .5);
   display: block;
   z-index: 100;
   font-size: $font-size-base;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss CHANGED Viewed

@@ -8,5 +8,6 @@
     margin-left: -($grid-gutter-width / 2);
     border-right: none;
     border-left: none;
+    border-radius: 0;
   }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss CHANGED Viewed

@@ -6,15 +6,15 @@
 // Color system
 $white:    #fff;
-$gray-100: #f7f7f7;
-$gray-200: #e5e5e5;
-$gray-300: #d8d8d8;
-// $gray-400: #ced4da !default; // not used in our theme
-// $gray-500: #adb5bd !default; // not used in our theme
-$gray-600: #959595;
-// $gray-700: #495057 !default; // not used in our theme
-$gray-800: #4d4d4d;
-// $gray-900: #212529 !default; // not used in our theme
+$gray-100: #F3F6F8;
+$gray-200: #E2E7EA;
+$gray-300: #C9CED1;
+$gray-400: #B3BABD; // not used in our theme
+$gray-500: #9BA3A6;
+$gray-600: #70787C;
+$gray-700: #5B6367; // not used in our theme
+$gray-800: #313A3E;
+$gray-900: #1D262B;
 $black:    #000;
 // $grays: () !default;
@@ -42,7 +42,7 @@ $red:     #ff6d33;
 $orange:  #ffaa00;
 // $yellow:  #ffc107 !default; // not used in our theme
 $green:   #59bf22;
-$teal:    #60c6cf; // legacy color -- not used in our theme
+// $teal:    #60c6cf; // not used in our theme
 // $cyan:    #17a2b8 !default; // not used in our theme
 // $colors: () !default;
@@ -66,6 +66,20 @@ $teal:    #60c6cf; // legacy color -- not used in our theme
 //   $colors
 // );
+// Blue (primary) scale
+$blue-100: #d3eefb;
+$blue-200: #a8def7;
+$blue-300: #7ccdf3;
+$blue-400: #51bdef;
+$blue-500: #1e8abc;
+$blue-600: #16678d;
+$blue-700: #135676;
+$blue-800: #0f455e;
+$blue-900: #0b3446;
+$blue-1000: #07222f;
 $primary:       $blue !default; // need !default for $primary to work properly (override) in entity_branding
 // $secondary:     $gray-600 !default;
 $success:       $green;
@@ -91,6 +105,7 @@ $danger:        $red;
 //   $theme-colors
 // );
 // Set a specific jump point for requesting color jumps
 // $theme-color-interval:      8% !default;
@@ -127,20 +142,21 @@ $enable-validation-icons:                     false;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
-$spacer: 2.4rem;
-// $spacers: () !default;
+$spacer: 3.2rem;
+$spacers: ();
 // stylelint-disable-next-line scss/dollar-variable-default
-// $spacers: map-merge(
-//   (
-//     0: 0,
-//     1: ($spacer * .25),
-//     2: ($spacer * .5),
-//     3: $spacer,
-//     4: ($spacer * 1.5),
-//     5: ($spacer * 3)
-//   ),
-//   $spacers
-// );
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.25),
+    5: ($spacer * 2),
+    6: ($spacer * 3)
+  ),
+  $spacers
+);
 // This variable affects the `.h-*` and `.w-*` classes.
 // $sizes: () !default;
@@ -188,13 +204,14 @@ $paragraph-margin-bottom:   $spacer;
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
-// $grid-breakpoints: (
-//   xs: 0,
-//   sm: 576px,
-//   md: 768px,
-//   lg: 992px,
-//   xl: 1200px
-// ) !default;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
 // @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 // @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
@@ -204,12 +221,13 @@ $paragraph-margin-bottom:   $spacer;
 //
 // Define the maximum width of `.container` for different screen sizes.
-// $container-max-widths: (
-//   sm: 540px,
-//   md: 720px,
-//   lg: 960px,
-//   xl: 1140px
-// ) !default;
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+);
 // @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -226,21 +244,21 @@ $grid-gutter-width:           $spacer;
 //
 // Define common padding and border radius sizes and more.
-$line-height-lg:              1.8;
+$line-height-lg:              1.2;
 $line-height-sm:              1;
 $border-width:                1px;
 $border-color:                $gray-300;
-$border-radius:               .3rem;
-$border-radius-lg:            .3rem;
-$border-radius-sm:            .3rem;
+$border-radius:               .4rem;
+$border-radius-lg:            .8rem;
+$border-radius-sm:            .2rem;
 // $rounded-pill:                50rem !default;
-$box-shadow-sm:               0 2px 5px transparentize($black, 0.7);
-$box-shadow:                  0 10px 30px transparentize($black, 0.9);
-$box-shadow-lg:               0 15px 50px 0 transparentize($black, 0.85);
+$box-shadow-sm:               0 4px 18px transparentize($gray-900, 0.8);
+$box-shadow:                  0 8px 24px 3px transparentize($gray-900, 0.8);
+$box-shadow-lg:               0 12px 30px 8px transparentize($gray-900, 0.75);
 $component-active-color:      $white;
 $component-active-bg:         $primary;
@@ -290,7 +308,7 @@ $font-weight-bold:            600;
 // $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5;
-$h1-font-size:                ($font-size-base * 2.25);
+$h1-font-size:                ($font-size-base * 2.5);
 // $h2-font-size:                $font-size-base * 2 !default;
 // $h3-font-size:                $font-size-base * 1.75 !default;
 // $h4-font-size:                $font-size-base * 1.5 !default;
@@ -303,18 +321,18 @@ $headings-font-weight:        $font-weight-bold;
 $headings-line-height:        1.2;
 // $headings-color:              null !default;
-// $display1-size:               6rem !default;
-// $display2-size:               5.5rem !default;
-// $display3-size:               4.5rem !default;
-$display4-size:               ($font-size-base * .875);
+$display1-size:               9.6rem;
+$display2-size:               8.0rem;
+$display3-size:               6.4rem;
+$display4-size:               $font-size-base;
-// $display1-weight:             300 !default;
-// $display2-weight:             300 !default;
-// $display3-weight:             300 !default;
+$display1-weight:             $font-weight-bold;
+$display2-weight:             $font-weight-bold;
+$display3-weight:             $font-weight-bold;
 $display4-weight:             $font-weight-bold;
 // $display-line-height:         $headings-line-height !default;
-$lead-font-size:              ($font-size-base * 1.5);
+$lead-font-size:              ($font-size-base * 1.125);
 $lead-font-weight:            $font-weight-normal;
 // $small-font-size:             80% !default;
@@ -382,23 +400,23 @@ $table-dark-color:            theme-color("light");
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-$input-btn-padding-y:         .5rem;
-$input-btn-padding-x:         ($spacer * .5);
+$input-btn-padding-y:         .7rem;
+$input-btn-padding-x:         ($spacer * .25) + ($spacer * .125);
 // $input-btn-font-family:       null !default;
 // $input-btn-font-size:         $font-size-base !default;
 // $input-btn-line-height:       $line-height-base !default;
-$input-btn-focus-width:       0;
-// $input-btn-focus-color:       rgba($component-active-bg, .25) !default;
-$input-btn-focus-box-shadow:  none;
+$input-btn-focus-width:       ($spacer * .125);
+$input-btn-focus-color:       transparentize($primary, 0.8);
+// $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 $input-btn-padding-y-sm:      .4rem;
 $input-btn-padding-x-sm:      ($spacer * .25);
 // $input-btn-font-size-sm:      $font-size-sm !default;
 // $input-btn-line-height-sm:    $line-height-sm !default;
-$input-btn-padding-y-lg:      .5rem;
-$input-btn-padding-x-lg:      ($spacer * .75);
+$input-btn-padding-y-lg:      1.5rem;
+$input-btn-padding-x-lg:      ($spacer * .75) - ($spacer * .125);
 // $input-btn-font-size-lg:      $font-size-lg !default;
 // $input-btn-line-height-lg:    $line-height-lg !default;
@@ -409,26 +427,26 @@ $input-btn-padding-x-lg:      ($spacer * .75);
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
-// $btn-padding-y:               $input-btn-padding-y !default;
-// $btn-padding-x:               $input-btn-padding-x !default;
+$btn-padding-y:               ($input-btn-padding-y + .1rem);
+$btn-padding-x:               ($spacer * .5);
 // $btn-font-family:             $input-btn-font-family !default;
 // $btn-font-size:               $input-btn-font-size !default;
 // $btn-line-height:             $input-btn-line-height !default;
-// $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-y-sm:            ($input-btn-padding-y-sm + .1rem);
 // $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
 // $btn-font-size-sm:            $input-btn-font-size-sm !default;
 // $btn-line-height-sm:          $input-btn-line-height-sm !default;
-// $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-// $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-padding-y-lg:            ($input-btn-padding-y-lg + .1rem);
+$btn-padding-x-lg:            ($spacer * .75);
 // $btn-font-size-lg:            $input-btn-font-size-lg !default;
 // $btn-line-height-lg:          $input-btn-line-height-lg !default;
-// $btn-border-width:            $input-btn-border-width !default;
+$btn-border-width:            0;
 $btn-font-weight:             $font-weight-bold;
-$btn-box-shadow:              none;
+$btn-box-shadow:              inset transparentize($black, 0.9) 0px -2px 0px 0px;
 // $btn-focus-width:             $input-btn-focus-width !default;
 // $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
 // $btn-disabled-opacity:        .65 !default;
@@ -485,7 +503,7 @@ $input-focus-border-color:              $primary;
 // $input-focus-width:                     $input-btn-focus-width !default;
 // $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
-$input-placeholder-color:               $text-muted;
+$input-placeholder-color:               $gray-300;
 // $input-plaintext-color:                 $body-color !default;
 // $input-height-border:                   $input-border-width * 2 !default;
@@ -518,10 +536,10 @@ $form-group-margin-bottom:              $spacer;
 // $custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-$custom-control-gutter:                 ($spacer * .5);
+$custom-control-gutter:                 ($spacer * .375);
 $custom-control-spacer-x:               $spacer;
-$custom-control-indicator-size:         ($spacer * .75);
+$custom-control-indicator-size:         ($spacer * .625);
 $custom-control-indicator-bg:           $white;
 $custom-control-indicator-bg-size:      70% 70%;
@@ -558,9 +576,9 @@ $custom-control-indicator-focus-box-shadow:     none;
 // $custom-radio-indicator-border-radius:          50% !default;
 // $custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-switch-width:                           ($spacer * 2);
+$custom-switch-width:                           ($spacer * 1.5);
 // $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
-$custom-switch-indicator-size:                  $spacer;
+$custom-switch-indicator-size:                  ($spacer * .75);
 // $custom-select-padding-y:           $input-btn-padding-y !default;
 // $custom-select-padding-x:           $input-btn-padding-x !default;
@@ -570,7 +588,7 @@ $custom-switch-indicator-size:                  $spacer;
 $custom-select-indicator-padding:   $spacer; // Extra padding to account for the presence of the background-image based indicator
 // $custom-select-font-weight:         $input-font-weight !default;
 // $custom-select-line-height:         $input-line-height !default;
-$custom-select-color:               $primary;
+$custom-select-color:               $body-color;
 // $custom-select-disabled-color:      $gray-600 !default;
 // $custom-select-bg:                  $input-bg !default;
 // $custom-select-disabled-bg:         $gray-200 !default;
@@ -689,11 +707,11 @@ $form-validation-states: map-merge(
 // Navs
 $nav-link-padding-y:                ($spacer * .5);
-$nav-link-padding-x:                $spacer;
+$nav-link-padding-x:                ($spacer * .75);
 $nav-link-disabled-color:           $text-muted;
 $nav-tabs-border-color:             $border-color;
-$nav-tabs-border-width:             3px;
+$nav-tabs-border-width:             4px;
 $nav-tabs-border-radius:            0;
 $nav-tabs-link-hover-border-color:  $primary;
 $nav-tabs-link-active-color:        $body-color;
@@ -702,7 +720,7 @@ $nav-tabs-link-active-border-color: $primary;
 $nav-pills-border-radius:           0;
 $nav-pills-link-active-color:       $white;
-$nav-pills-link-active-bg:          darken(#006D9D, 10%);
+$nav-pills-link-active-bg:          $blue-800;
 $nav-divider-color:                 $border-color;
 $nav-divider-margin-y:              0;
@@ -721,14 +739,14 @@ $navbar-nav-link-padding-x:         ($spacer * .5);
 // $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 // $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
-$navbar-toggler-padding-y:          ($spacer * .25);
-$navbar-toggler-padding-x:          ($spacer * .5);
+$navbar-toggler-padding-y:          ($spacer * .125);
+$navbar-toggler-padding-x:          ($spacer * .25);
 // $navbar-toggler-font-size:          $font-size-lg !default;
 // $navbar-toggler-border-radius:      $btn-border-radius !default;
-$navbar-dark-color:                 #9a9a9a; // LEGACY
-$navbar-dark-hover-color:           #b9b9b9; // LEGACY
-$navbar-dark-active-color:          #cccccc; // LEGACY
+$navbar-dark-color:                 $gray-300;
+$navbar-dark-hover-color:           $white;
+$navbar-dark-active-color:          $white;
 // $navbar-dark-disabled-color:        rgba($white, .25) !default;
 // $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
 // $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
@@ -751,17 +769,18 @@ $navbar-light-disabled-color:       $text-muted;
 // Dropdown menu container and contents.
 // $dropdown-min-width:                10rem !default;
-$dropdown-padding-y:                0;
-$dropdown-spacer:                   ($spacer * .25);
+$dropdown-padding-x:                ($spacer * .25);
+$dropdown-padding-y:                ($spacer * .25);
+$dropdown-spacer:                   ($spacer * .125);
 // $dropdown-bg:                       $white !default;
 // $dropdown-font-size:                $font-size-base !default;
 // $dropdown-color:                    $body-color !default;
 $dropdown-border-color:             transparent;
-// $dropdown-border-radius:            $border-radius !default;
+$dropdown-border-radius:            $border-radius-lg;
 $dropdown-border-width:             0px;
-// $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-inner-border-radius:      $border-radius;
 $dropdown-divider-bg:               $border-color;
-// $dropdown-divider-margin-y:         $nav-divider-margin-y !default;
+$dropdown-divider-margin-y:         ($spacer * .25);
 $dropdown-box-shadow:               $box-shadow-sm;
 $dropdown-link-color:               $body-color;
@@ -814,13 +833,13 @@ $pagination-disabled-border-color:  $border-color;
 $jumbotron-padding:                 $spacer;
 // $jumbotron-color:                   null !default;
-$jumbotron-bg:                      $body-bg;
+$jumbotron-bg:                      $white;
 // Cards
-$card-spacer-y:                     $spacer;
-$card-spacer-x:                     $spacer;
+$card-spacer-y:                     ($spacer * .75);
+$card-spacer-x:                     ($spacer * .75);
 $card-border-width:                 $border-width;
 // $card-border-radius:                $border-radius !default;
 $card-border-color:                 $border-color;
@@ -843,9 +862,9 @@ $card-img-overlay-padding:          ($spacer * .5);
 // Tooltips
 // $tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 300px;
+$tooltip-max-width:                 320px;
 // $tooltip-color:                     $white !default;
-$tooltip-bg:                        transparentize($black, 0.1);
+$tooltip-bg:                        $gray-800;
 // $tooltip-border-radius:             $border-radius !default;
 // $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 ($spacer * .25);
@@ -939,25 +958,25 @@ $modal-title-line-height:           inherit;
 // $modal-content-color:               null !default;
 // $modal-content-bg:                  $white !default;
 $modal-content-border-color:        $border-color;
-// $modal-content-border-width:        $border-width !default;
+$modal-content-border-width:        0;
 // $modal-content-border-radius:       $border-radius-lg !default;
-// $modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
-// $modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
+$modal-content-box-shadow-xs:       $box-shadow;
+$modal-content-box-shadow-sm-up:    $box-shadow;
-$modal-backdrop-bg:                 transparentize($black, 0.1);
-$modal-backdrop-opacity:            .9;
+$modal-backdrop-bg:                 $gray-900;
+$modal-backdrop-opacity:            .8;
 $modal-header-border-color:         $border-color;
 // $modal-footer-border-color:         $modal-header-border-color !default;
-// $modal-header-border-width:         $modal-content-border-width !default;
-// $modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            $spacer;
+$modal-header-border-width:         $border-width;
+$modal-footer-border-width:         0;
+$modal-header-padding-y:            ($spacer * .75);
 $modal-header-padding-x:            $spacer;
 // $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 // $modal-xl:                          1140px !default;
 $modal-lg:                          900px;
-$modal-md:                          600px;
-// $modal-sm:                          300px !default;
+$modal-md:                          640px;
+$modal-sm:                          320px;
 // $modal-fade-transform:              translate(0, -50px) !default;
 // $modal-show-transform:              none !default;
@@ -968,8 +987,8 @@ $modal-md:                          600px;
 //
 // Define alert colors, border radius, and padding.
-$alert-padding-y:                   $spacer;
-$alert-padding-x:                   $spacer;
+$alert-padding-y:                   ($spacer * .5);
+$alert-padding-x:                   ($spacer * .5);
 $alert-margin-bottom:               $spacer;
 // $alert-border-radius:               $border-radius !default;
 // $alert-link-font-weight:            $font-weight-bold !default;
@@ -1037,15 +1056,15 @@ $figure-caption-color:              $text-muted;
 // Breadcrumbs
-// $breadcrumb-padding-y:              .75rem !default;
-// $breadcrumb-padding-x:              1rem !default;
-// $breadcrumb-item-padding:           .5rem !default;
+$breadcrumb-padding-y:              0;
+$breadcrumb-padding-x:              0;
+$breadcrumb-item-padding:           ($spacer * .25);
-// $breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-margin-bottom:          $spacer;
-// $breadcrumb-bg:                     $gray-200 !default;
-// $breadcrumb-divider-color:          $gray-600 !default;
-// $breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-bg:                     transparent;
+$breadcrumb-divider-color:          $border-color;
+$breadcrumb-active-color:           $text-muted;
 // $breadcrumb-divider:                quote("/") !default;
 // $breadcrumb-border-radius:          $border-radius !default;