workarea-haven_theme 1.3.0

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_facet.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #SWATCH-FACET
+\*------------------------------------*/
+
+/**
+ * Each `.swatch-facet` also receives an ID modifier class, in order to offer
+ * more granular control over the component, if needed. Since this is a
+ * dynamically generated value, they are not listed here.
+ */
+
+$swatch-facet-height: 16px !default;
+$swatch-facet-width:  16px !default;
+$swatch-facet-white-border: 1px solid $border-color;
+
+
+.swatch-facet {
+    display: inline-block;
+    margin: 0 ($spacing-unit * 2) 0 $spacing-unit;
+    width: $swatch-facet-width;
+    height: $swatch-facet-height;
+    text-decoration: none;
+    vertical-align: baseline;
+}
+
+.swatch-facet--hex {}
+.swatch-facet--image {}
+
+.swatch-facet--empty {
+    .applied-filters & {
+        margin: 0;
+        width: $spacing-unit;
+    }
+}
+
+.swatch-facet--white {
+    border: $swatch-facet-white-border;
+}

data/app/assets/stylesheets/workarea/storefront/swatches/components/_swatch_options.scss

@@ -0,0 +1,79 @@
+/*------------------------------------*\
+    #SWATCH-OPTIONS
+\*------------------------------------*/
+
+$swatch-options-outline: 1px solid $border-color !default;
+$swatch-options-selected-outline:  1px solid $highlight-color !default;
+$swatch-options-swatch-size: 44px !default;
+$swatch-options-swatch-size-small: 16px !default;
+$swatch-options-swatch-size-small-wide: 24px !default;
+$swatch-options-swatch-margin-top: 12px !default;
+
+$swatch-options-swatch-truncated-color: $link-color !default;
+$swatch-options-swatch-truncated-background-color: $background-color-component !default;
+
+
+.swatch-options {}
+
+.swatch-options--small {
+    display: inline-block;
+}
+
+    .swatch-options__label {
+        margin: 0;
+    }
+
+    .swatch-options__group {
+        @extend %inline-list;
+    }
+
+        .swatch-options__swatch {
+            position: relative;
+            margin: 0 $spacing-unit $spacing-unit 0;
+            width: $swatch-options-swatch-size;
+            height: $swatch-options-swatch-size;
+            outline: $swatch-options-outline;
+
+            .swatch-options--small & {
+                margin-top: $swatch-options-swatch-margin-top;
+                margin-bottom: 0;
+                width:  $swatch-options-swatch-size-small;
+                height: $swatch-options-swatch-size-small;
+
+                @include respond-to($medium-breakpoint) {
+                    width: $swatch-options-swatch-size-small-wide;
+                    height: $swatch-options-swatch-size-small-wide;
+                }
+            }
+        }
+
+        .swatch-options__swatch--selected {
+            outline: $swatch-options-selected-outline;
+        }
+
+        .swatch-options__swatch--truncated {
+            color: $swatch-options-swatch-truncated-color;
+            text-align: center;
+            background-color: $swatch-options-swatch-truncated-background-color;
+
+            .swatch-options--small & {
+                line-height: $swatch-options-swatch-size-small;
+
+                @include respond-to($medium-breakpoint) {
+                    line-height: $swatch-options-swatch-size-small-wide;
+                }
+            }
+        }
+
+            .swatch-options__swatch-button,
+            .swatch-options__swatch-button-image,
+            .swatch-options__swatch-button-text {
+                display: block;
+                position: absolute;
+                top:    0;
+                right:  0;
+                bottom: 0;
+                left:   0;
+            }
+
+            .swatch-options__swatch-name {}

data/app/assets/stylesheets/workarea/storefront/theme/_style_guide.scss

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #STYLE-GUIDE
+\*------------------------------------*/
+
+/*
+ * This file extends the style_guide.scss component from Workarea storefront
+ */
+
+.style-guide__color-swatch--white-alpha-50 { background: $white-alpha-50; }

data/app/assets/stylesheets/workarea/storefront/theme_config/color_schemes/_haven_color_scheme.scss

@@ -0,0 +1,276 @@
+/*------------------------------------*\
+    #HAVEN-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file. Using color name variables outside of this file may
+ * cause errors when changing color scheme.
+ */
+
+$blue:                              #0116ac !default;
+$yellow:                            #e7ca00 !default;
+$red:                               #ff404a !default;
+$green:                             #42cc81 !default;
+
+$white:                             #ffffff !default;
+$black:                             #000000 !default;
+
+$black-alpha-15:                    rgba($black, 0.15) !default;
+$black-alpha-50:                    rgba($black, 0.50) !default;
+
+$white-alpha-50:                    rgba($white, 0.50) !default;
+
+$transparent:                       transparent !default;
+
+/**
+ * Theme colors
+ */
+
+$gray: #7c7a94 !default;
+$medium-gray: #c1c2d0 !default;
+$light-gray: #eaedf3 !default;
+
+$midnight: #0c102c !default;
+$purple-blue: #3e36d9 !default;
+$dark-purple-blue: #3029ad !default;
+$highlighter: #fff93d !default;
+
+/**
+ * Styleguide color box modifiers for theme colors
+ */
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--medium-gray { background: $medium-gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--midnight { background: $midnight; }
+.color-box__swatch--purple-blue { background: $purple-blue; }
+.color-box__swatch--dark-purple-blue { background: $dark-purple-blue; }
+.color-box__swatch--highlighter { background: $highlighter; }
+
+
+/**
+ * FUNCTIONAL COLOR VARIABLES
+ */
+
+// Generic
+$primary-color: $purple-blue !default;
+$primary-color-dark: $dark-purple-blue !default;
+
+$background-color: $white !default;
+$background-color-component: $white !default;
+$background-color-alternate: $light-gray !default;
+$page-aside-background-color: $background-color-alternate !default;
+
+$border-color: $light-gray !default;
+$highlight-color: $highlighter !default;
+$overlay-shadow-color: rgba($black, 0.8) !default;
+$ui-dialog-titlebar-bg-color: $gray !default;
+
+// Breadcrumbs
+$breadcrumbs-divider-color: $border-color !default;
+$breadcrumbs-color: $gray !default;
+$breadcrumbs-arrow-color: $medium-gray !default;
+
+// Site header colors
+$header-background-color: $white !default;
+$header-border-color: $border-color !default;
+$header-icon-color: $gray !default;
+$header-icon-color-hover: $primary-color !default;
+$header-icon-color-cart: $white !default;
+$header-cart-background-color: $primary-color !default;
+$header-cart-count-color: $white !default;
+$header-cart-count-background-color: $primary-color-dark !default;
+$utility-nav-background-color: $background-color-alternate !default;
+$utility-nav-heading-color: $primary-color !default;
+
+// Navigation colors
+$primary-nav-background-color: $background-color !default;
+$primary-nav-border-color: $border-color !default;
+$primary-nav-links-color: $midnight !default;
+$primary-nav-links-color-hover: $midnight !default;
+$primary-nav-link-hover-border-color: $highlighter !default;
+$primary-nav-dropdown-links: $midnight !default;
+$primary-nav-dropdown-links-hover: $purple-blue !default;
+
+$mobile-nav-bg-color: $background-color !default;
+$mobile-nav-links: $midnight !default;
+$mobile-nav-close-button-color: $white !default;
+$mobile-nav-back-button-color: $primary-color !default;
+$mobile-nav-back-button-bg-color: $background-color-alternate !default;
+
+// Secondary navigation colors
+$secondary-nav-link-selected-color: $purple-blue !default;
+$secondary-nav-link-color: $black !default;
+$secondary-nav-background-color: $white !default;
+
+// Search colors
+$search-overlay-background-color: $overlay-shadow-color !default;
+$search-color: $white !default;
+$search-input-border-color: $white !default;
+$search-item-color: $black !default;
+$search-item-background-color: $white !default;
+$search-item-border-color: $gray !default;
+$search-item-content-result-background-color: $transparent !default;
+$search-item-content-result-color: $white !default;
+
+// Footer colors
+$footer-background-color: $midnight !default;
+$footer-color: $white !default;
+$footer-border-color: rgba($white, 0.3) !default;
+$footer-link-color: $white !default;
+$footer-link-color-hover: $highlighter !default;
+
+$footer-icon-color: $midnight !default;
+$footer-icon-color-hover: $primary-color !default;
+
+// Email signup colors
+$email-signup-value-border-color: $highlighter !default;
+$email-signup-label-color: $white !default;
+$email-signup-button-bg-color: $transparent !default;
+$email-signup-button-icon-color: $highlighter !default;
+$email-signup-button-icon-color-hover: $highlighter !default;
+
+// Typography colors
+$font-color: $midnight !default;
+$font-color-light: $gray !default;
+$font-color-inverted: $white !default;
+$heading-color: $midnight !default;
+$product-name-color: $heading-color !default;
+
+// Links & Buttons
+$link-color: $primary-color !default;
+$link-color-hover: $primary-color-dark !default;
+$button-color: $white !default;
+$button-background-color: $primary-color !default;
+$button-background-color-hover: $primary-color-dark !default;
+$button-border-color: $transparent !default;
+
+$button-secondary-color: $midnight !default;
+$button-secondary-background-color: $transparent !default;
+$button-secondary-background-color-hover: $white !default;
+$button-secondary-border-color: $primary-color !default;
+$button-secondary-border-color-disabled: $white !default;
+
+$button-secondary-color-alt: $white !default;
+$button-secondary-border-color-alt: $white !default;
+
+$button-disabled-color: $white !default;
+$button-disabled-background-color: $medium-gray !default;
+
+// Inputs
+$label-color: $midnight !default;
+$input-color: $midnight !default;
+$placeholder-color: $midnight !default;
+$input-background-color: $background-color-alternate !default;
+$input-border-color: $medium-gray !default;
+$input-border-color-focus: $primary-color !default;
+$input-disabled-color: rgba($input-color, 0.18) !default;
+$input-disabled-background-color: $input-background-color !default;
+$input-icon-color: $medium-gray !default;
+
+$input-radio-color: $white !default;
+$input-radio-border-color: $gray !default;
+$input-radio-fill-color: $primary-color !default;
+$input-radio-background-color: $white !default;
+
+$input-checkbox-color: $white !default;
+$input-checkbox-border-color: $gray !default;
+$input-checkbox-fill-color: $primary-color !default;
+
+$quantity-control-background-color: $background-color-component !default;
+$quantity-control-button-color: $primary-color !default;
+$quantity-control-button-background-color: $background-color-alternate !default;
+$quantity-control-border-color: $border-color !default;
+
+$select-menu-bg-color: $white !default;
+
+$valid-color: $green !default;
+$invalid-color: $red !default;
+$focus-ring-color: $primary-color !default;
+
+// Browse page colors
+$category-count-color: $gray !default;
+$product-summary-background-color: $background-color-component !default;
+$product-summary-background-color-hover: rgba($background-color-alternate, 0.5) !default;
+$product-summary-border-color: $border-color !default;
+$product-summary-name-color: $black !default;
+
+// Browse page filters
+$result-filters-text-color: $black !default;
+$result-filters-text-color-hover: $link-color-hover !default;
+$result-filters-count-background-color: $white !default;
+$result-filters-count-text-color: $medium-gray !default;
+$result-filters-selected-background-color: $white !default;
+$result-filters-selected-color-hover: $black !default;
+$result-filters-icon-background-color: $black !default;
+$result-filters-view-more-text-color: $purple-blue !default;
+$result-filters-view-more-text-color-hover: $purple-blue !default;
+$result-filters-applied-background-color: lighten($background-color-alternate, 1%) !default;
+
+// Mobile Filters
+$mobile-filters-heading-color: $purple-blue !default;
+$mobile-filters-overlay-color: $black-alpha-50 !default;
+$mobile-filters-background-color: $background-color-alternate !default;
+$mobile-filters-sort-background-color: $white !default;
+
+// Badge Colors
+$badge-color: $white;
+$badge-background-color: $primary-color;
+$badge-new-background-color: #fdb635;
+$badge-sale-background-color: #e50461;
+$badge-best-seller-background-color: #21c0af;
+
+// Cart page colors
+$cart-item-count-color: $gray !default;
+
+// Product list item colors
+$product-list-item-options-color: $gray !default;
+
+$product-detail-container-tab-border-color: $white !default;
+
+// Product price colors
+$product-price-color: $black !default;
+$product-price-sale-color: $red !default;
+$product-price-discount-color: $red !default;
+
+// Checkout colors
+$checkout-summary-section-border-color: $medium-gray !default;
+$checkout-progress-color: $medium-gray !default;
+$checkout-progress-active-color: $primary-color !default;
+$checkout-progress-completed-color: $primary-color !default;
+$checkout-progress-step-color: $medium-gray !default;
+$checkout-progress-step-background-color: $gray !default;
+$checkout-progress-step-number-color: $white !default;
+$checkout-progress-step-divider-color: $medium-gray !default;
+
+$checkout-conifrmation-checkmark-background-color: $primary-color !default;
+$checkout-conifrmation-checkmark-icon-color: $white !default;
+
+// Content block colors
+$divider-content-block-color: $medium-gray !default;
+$recommendations-background-color: $light-gray !default;
+
+// Reviews
+$rating-star-color: $yellow !default;
+$rating-star-color-empty: $gray !default;
+
+//Blog
+$blog-entry-tag-color: $white !default;
+$blog-entry-tag-background-color: $primary-color !default;
+
+// Social Icons
+$social-icon-color: $primary-color !default;
+$social-icon-color-hover: $white !default;
+$social-icon-background: $white !default;
+$social-icon-background-hover: $primary-color !default;
+$social-icon-border-color: $primary-color !default;
+$social-icon-border-color-hover: $white !default;
+
+// Slider
+$slider-dots-color: $link-color !default;
+$slider-dots-bg-color: $background-color !default;
+$slider-nav-color: $medium-gray !default;
+$slider-nav-color-alt: $primary-color !default;
+$slider-nav-bg-color: transparent !default;
+$slider-active-color: $link-color !default;

data/app/assets/stylesheets/workarea/storefront/theme_config/color_schemes/_lagoon_color_scheme.scss

@@ -0,0 +1,279 @@
+/*------------------------------------*\
+    #LAGOON-COLOR-SCHEME
+\*------------------------------------*/
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables at
+ * the bottom of this file. Using color name variables outside of this file may
+ * cause errors when changing color scheme.
+ */
+
+$blue:                              #0116ac !default;
+$yellow:                            #e7ca00 !default;
+$red:                               #ff404a !default;
+$green:                             #42cc81 !default;
+
+$white:                             #ffffff !default;
+$black:                             #000000 !default;
+
+$black-alpha-15:                    rgba($black, 0.15) !default;
+$black-alpha-50:                    rgba($black, 0.50) !default;
+
+$white-alpha-50:                    rgba($white, 0.50) !default;
+
+$transparent:                       transparent !default;
+
+/**
+ * Theme colors
+ */
+
+$gray: #1b1b1e !default;
+$medium-gray: #6d676e !default;
+$light-gray: #adaaad !default;
+
+$darkest-teal: #0b452f !default;
+$dark-teal: #33755c !default;
+$teal: #7ba696 !default;
+$light-teal: #aac6bb !default;
+$lightest-teal: #dae5e1 !default;
+
+
+/**
+ * Styleguide color box modifiers for theme colors
+ */
+.color-box__swatch--gray { background: $gray; }
+.color-box__swatch--medium-gray { background: $medium-gray; }
+.color-box__swatch--light-gray { background: $light-gray; }
+.color-box__swatch--darkest-teal { background: $darkest-teal; }
+.color-box__swatch--dark-teal { background: $dark-teal; }
+.color-box__swatch--teal { background: $teal; }
+.color-box__swatch--light-teal { background: $light-teal; }
+.color-box__swatch--lightest-teal { background: $lightest-teal; }
+
+
+/**
+ * FUNCTIONAL COLOR VARIABLES
+ */
+
+// Generic
+$primary-color: $teal !default;
+$primary-color-dark: $dark-teal !default;
+
+$background-color: $white !default;
+$background-color-component: $white !default;
+$background-color-alternate: $lightest-teal !default;
+$page-aside-background-color: $background-color-alternate !default;
+
+$border-color: $light-gray !default;
+$highlight-color: $primary-color !default;
+$overlay-shadow-color: rgba($black, 0.8) !default;
+$ui-dialog-titlebar-bg-color: $background-color !default;
+
+// Breadcrumbs
+$breadcrumbs-divider-color: $border-color !default;
+$breadcrumbs-color: $darkest-teal !default;
+$breadcrumbs-arrow-color: $teal !default;
+
+// Site header colors
+$header-background-color: $white !default;
+$header-border-color: $gray !default;
+$header-icon-color: $medium-gray !default;
+$header-icon-color-hover: $primary-color !default;
+$header-icon-color-cart: $white !default;
+$header-cart-background-color: $primary-color !default;
+$header-cart-count-color: $white !default;
+$header-cart-count-background-color: $primary-color-dark !default;
+$utility-nav-background-color: $background-color-alternate !default;
+$utility-nav-heading-color: $primary-color !default;
+
+// Navigation colors
+$primary-nav-background-color: $background-color !default;
+$primary-nav-border-color: $border-color !default;
+$primary-nav-links-color: $darkest-teal !default;
+$primary-nav-links-color-hover: $dark-teal !default;
+$primary-nav-link-hover-border-color: $teal !default;
+$primary-nav-dropdown-links: $darkest-teal !default;
+$primary-nav-dropdown-links-hover: $dark-teal !default;
+
+$mobile-nav-bg-color: $background-color !default;
+$mobile-nav-links: $darkest-teal !default;
+$mobile-nav-close-button-color: $white !default;
+$mobile-nav-back-button-color: $darkest-teal !default;
+$mobile-nav-back-button-bg-color: $background-color-alternate !default;
+
+// Secondary navigation colors
+$secondary-nav-link-selected-color: $teal !default;
+$secondary-nav-link-color: $black !default;
+$secondary-nav-background-color: $white !default;
+
+// Search colors
+$search-overlay-background-color: $overlay-shadow-color !default;
+$search-color: $white !default;
+$search-input-border-color: $white !default;
+$search-item-color: $black !default;
+$search-item-background-color: $white !default;
+$search-item-border-color: $medium-gray !default;
+$search-item-content-result-background-color: $transparent !default;
+$search-item-content-result-color: $white !default;
+
+// Footer colors
+$footer-background-color: $lightest-teal !default;
+$footer-color: $black !default;
+$footer-border-color: rgba($white, 0.3) !default;
+$footer-link-color: $dark-teal !default;
+$footer-link-color-hover: $darkest-teal !default;
+
+$footer-icon-color: $dark-teal !default;
+$footer-icon-color-hover: $darkest-teal !default;
+
+// Email signup colors
+$email-signup-value-border-color: $black !default;
+$email-signup-label-color: $black !default;
+$email-signup-button-bg-color: $transparent !default;
+$email-signup-button-icon-color: $dark-teal !default;
+$email-signup-button-icon-color-hover: $darkest-teal !default;
+
+// Typography colors
+$font-color: $black !default;
+$font-color-light: $medium-gray !default;
+$font-color-inverted: $white !default;
+$heading-color: $black !default;
+$product-name-color: $heading-color !default;
+
+// Links & Buttons
+$link-color: $primary-color !default;
+$link-color-hover: $primary-color-dark !default;
+$button-color: $white !default;
+$button-background-color: $primary-color !default;
+$button-background-color-hover: $primary-color-dark !default;
+$button-border-color: $transparent !default;
+
+$button-secondary-color: $dark-teal !default;
+$button-secondary-background-color: $transparent !default;
+$button-secondary-background-color-hover: $white !default;
+$button-secondary-border-color: $primary-color !default;
+$button-secondary-border-color-disabled: $white !default;
+
+$button-secondary-color-alt: $white !default;
+$button-secondary-border-color-alt: $white !default;
+
+$button-disabled-color: $white !default;
+$button-disabled-background-color: $medium-gray !default;
+
+// Inputs
+$label-color: $black !default;
+$input-color: $black !default;
+$placeholder-color: $black !default;
+$input-background-color: lighten($background-color-alternate, 10%) !default;
+$input-border-color: $border-color !default;
+$input-border-color-focus: $primary-color !default;
+$input-disabled-color: rgba($input-color, 0.18) !default;
+$input-disabled-background-color: $input-background-color !default;
+$input-icon-color: $medium-gray !default;
+
+$input-radio-color: $white !default;
+$input-radio-border-color: $gray !default;
+$input-radio-fill-color: $primary-color !default;
+$input-radio-background-color: $white !default;
+
+$input-checkbox-color: $white !default;
+$input-checkbox-border-color: $gray !default;
+$input-checkbox-fill-color: $primary-color !default;
+
+$quantity-control-background-color: $background-color-component !default;
+$quantity-control-button-color: $white !default;
+$quantity-control-button-background-color: $primary-color !default;
+$quantity-control-border-color: $primary-color !default;
+
+$select-menu-bg-color: $white !default;
+
+$valid-color: $green !default;
+$invalid-color: $red !default;
+$focus-ring-color: $primary-color !default;
+
+// Browse page colors
+$category-count-color: $light-teal !default;
+$product-summary-background-color: $background-color-component !default;
+$product-summary-background-color-hover: rgba($background-color-alternate, 0.5) !default;
+$product-summary-border-color: $border-color !default;
+$product-summary-name-color: $black !default;
+
+// Browse page filters
+$result-filters-text-color: $black !default;
+$result-filters-text-color-hover: $white !default;
+$result-filters-count-background-color: $white !default;
+$result-filters-count-text-color: $medium-gray !default;
+$result-filters-selected-background-color: $white !default;
+$result-filters-selected-color-hover: $darkest-teal !default;
+$result-filters-icon-background-color: $black !default;
+$result-filters-view-more-text-color: $black !default;
+$result-filters-view-more-text-color-hover: $white !default;
+$result-filters-applied-background-color: lighten($background-color-alternate, 1%) !default;
+
+// Mobile Filters
+$mobile-filters-heading-color: $dark-teal !default;
+$mobile-filters-overlay-color: $black-alpha-50 !default;
+$mobile-filters-background-color: $background-color-alternate !default;
+$mobile-filters-sort-background-color: $white !default;
+
+// Badge Colors
+$badge-color: $white;
+$badge-background-color: $primary-color;
+$badge-new-background-color: #fdb635;
+$badge-sale-background-color: #e50461;
+$badge-best-seller-background-color: #21c0af;
+
+// Cart page colors
+$cart-item-count-color: $gray !default;
+
+// Product list item colors
+$product-list-item-options-color: $gray !default;
+
+$product-detail-container-tab-border-color: $white !default;
+
+// Product price colors
+$product-price-color: $black !default;
+$product-price-sale-color: $red !default;
+$product-price-discount-color: $red !default;
+
+// Checkout colors
+$checkout-summary-section-border-color: $medium-gray !default;
+$checkout-progress-color: $medium-gray !default;
+$checkout-progress-active-color: $primary-color !default;
+$checkout-progress-completed-color: $primary-color !default;
+$checkout-progress-step-color: $medium-gray !default;
+$checkout-progress-step-background-color: $gray !default;
+$checkout-progress-step-number-color: $white !default;
+$checkout-progress-step-divider-color: $medium-gray !default;
+
+$checkout-conifrmation-checkmark-background-color: $primary-color !default;
+$checkout-conifrmation-checkmark-icon-color: $white !default;
+
+// Content block colors
+$divider-content-block-color: $medium-gray !default;
+$recommendations-background-color: $background-color-alternate !default;
+
+// Reviews
+$rating-star-color: $yellow !default;
+$rating-star-color-empty: $light-gray !default;
+
+//Blog
+$blog-entry-tag-color: $white !default;
+$blog-entry-tag-background-color: $primary-color !default;
+
+// Social Icons
+$social-icon-color: $primary-color !default;
+$social-icon-color-hover: $white !default;
+$social-icon-background: $white !default;
+$social-icon-background-hover: $primary-color !default;
+$social-icon-border-color: $primary-color !default;
+$social-icon-border-color-hover: $white !default;
+
+// Slider
+$slider-dots-color: $link-color !default;
+$slider-dots-bg-color: $background-color !default;
+$slider-nav-color: $medium-gray !default;
+$slider-nav-color-alt: $primary-color !default;
+$slider-nav-bg-color: transparent !default;
+$slider-active-color: $link-color !default;