Skip to content
Permalink
Browse files

fix(path): add focus and reorder active styles (#2974)

* fix(path): add focus and reorder active styles

* fix(path): add slds-is-focused class

* fix(path): scope to slds-is-complete

* feat(path): reuse active styling
  • Loading branch information...
engai committed Jan 31, 2018
1 parent 399da9c commit f197b4ade5dcbae4c642ccacc3da2ccf37452f79
Showing with 37 additions and 28 deletions.
  1. +36 −27 ui/components/path/base/_index.scss
  2. +1 −1 ui/components/path/tokens/background-color.yml
@@ -149,33 +149,6 @@
}
}

/**
* @summary Creates the active stage of the sales path
*
* @selector .slds-is-active
* @restrict .slds-path__item
* @notes This class must be placed on the item programatically when the guidance section is activated
*/
.slds-is-active {
background-color: $color-background-path-active;

.slds-path__link {
color: $color-text-inverse;
}

&:hover {
background-color: $color-background-path-active-hover;

+ .slds-path__item:before {
background-color: $color-background-path-active-hover;
}
}

+ .slds-path__item:before {
background-color: $color-background-path-active;
}
}

/**
* @summary Creates success stage of the path
*
@@ -233,6 +206,42 @@
}
}

/**
* @summary Creates the active stage of the sales path
*
* @selector .slds-is-active
* @restrict .slds-path__item
* @notes This class must be placed on the item programatically when the guidance section is activated
*/
.slds-is-active,
.slds-is-complete.slds-is-focused {
background-color: $color-background-path-active;

.slds-path__stage {
transform: translateY(-50%) rotateX(-180deg);
}

.slds-path__title {
transform: rotateX(0deg);
}

.slds-path__link {
color: $color-text-inverse;
}

&:hover {
background-color: $color-background-path-active-hover;

+ .slds-path__item:before {
background-color: $color-background-path-active-hover;
}
}

+ .slds-path__item:before {
background-color: $color-background-path-active;
}
}

/**
* @summary Creates the current stage of the path
*
@@ -18,7 +18,7 @@ props:
comment: The hover background color for Salespath stages that are complete.
COLOR_BACKGROUND_PATH_ACTIVE:
value: '{!DEEP_COVE}'
comment: The background color for Salespath stages that are complete.
comment: The background color for Salespath stages that are active.
COLOR_BACKGROUND_PATH_ACTIVE_HOVER:
value: '{!BISCAY}'
comment: The hovered background color for Salespath stages that are complete.

0 comments on commit f197b4a

Please sign in to comment.
You can’t perform that action at this time.