Advanced styles customization #235
Conversation
… $wz-label-color-hover
…nneeded layouts and indicator styles by redefining $wz-layouts and $wz-indicator-styles.
… indicators when the configured border-color is null
There was a problem hiding this comment.
Sorry for my late review.
Thanks for making some improvements to the color data structures! I like your approach but I have some questions and change requests which I added as comments.
Please bear with some of my more silly questions. I'm not that knowledgeable with SCSS, therefore I've added some questions about parts of the code that I don't (fully) understand.
That's good. I think it is essential to make the code understandable to the project maintainer at the very least :-) I have added a lot of comments. Please review. |
There was a problem hiding this comment.
In addition to the following comments I have two requests:
- the
READMEfile needs to be changed to reflect the changes done in this PR - your introduced variables start with
$wz-...I guesswzstands for wizard right? Wouldn't it be better and more in line with our other definitions if the variables start with$aw(i.e. archwizard)?
src/css/archwizard.scss
Outdated
|
|
||
| // Color definitions | ||
| // | ||
| // This is a mapping from indicator style and wizard step state to colors. |
There was a problem hiding this comment.
This as in the color definitions?
There was a problem hiding this comment.
In 6202716 I squashed the two lines into
// Color definitions - a mapping from indicator style and wizard step state to colors.
This way it is more concise.
I just followed the convention I saw in *.less files where variables had $wz-... prefix as well. I agree that '$aw' is more appropriate. Let's rename. Also, I would rename 'dots' to 'circles'. |
There was a problem hiding this comment.
I just followed the convention I saw in *.less files where variables had $wz-... prefix as well.
I agree that '$aw' is more appropriate. Let's rename.
The styles are really old. In addition in the first version of the wizard I used the styles from https://github.com/angular-wizard/angular-wizard/ so it is quite possible that the names are from there.
Also, I would rename 'dots' to 'circles'.
Good idea!
I'll test the PR later today.
I think I prefer to add this PR to a new major release (i.e. 6.0.0) because it can lead to breaking changes for users with custom styles. @earshinov what do you suggest?
Yes, I think this change is worth a new major version. |
* Update style customization demo on the 'Free navigation mode' page for the 'advanced-styles-customization' branch of angular-archwizard * Add "Wizard with single step" demo page Discussion: madoar/angular-archwizard#235 (comment) * Adjust custom styles for wz- prefix renamed into aw- * 'Custom global SCSS' demo (experimental) * Split the single-step example into two, one for horizontal and one for vertical layout * Merge single-step examples into a single group in the sidebar * Add an elaborate description to the 'Custom SCSS' demo page
Hello @madoar ,
It is usually considered a good practice of visual design to restrict colors used in the application UI to a limited subset which might be called a palette or a theme. In some cases, such theme lists not only base colors, but also their shades from light to dark to be used in different parts of the UI.
Version 5.0.0 of angular-archwizard exposes SCSS variables which can be used for customizing base colors of the wizard. However, things like using
darken(…, 10%)to derive a hover color from a base color are still hard coded and hard for a library user to override.This PR extends angular-archwizard's style customization support. Instead of a small number of variables controlling base colors (
$wz-color-default, …,$wz-color-editing) it exposes a complex$wz-colorsstructure that completely defines a color scheme to be used for navbar indicators, including colors for hovered state.As an auxiliary change, the updated
*.scssfile also exposes$wz-layoutsand$wz-indicator-stylesvariables. Library users can override these to exclude unused layouts and indicator style and thus optimize CSS output size.Notes: