[VK] Updated User-details component with some essential style and classes #585
Conversation
| } | ||
| &__last-name { | ||
| padding-right: 10px; | ||
| padding-left: 5px; //added padding left to first name |
There was a problem hiding this comment.
I don't think we need all the comments
There was a problem hiding this comment.
Sorry to butt in, but could we stick to using the 8px unit spacing? :) so the equivalent would be:
padding-right: 8px padding-left: 4px
| } | ||
| &__first-name, | ||
| &__last-name { | ||
| color: #004b83; // default text color |
There was a problem hiding this comment.
This seems superfluous given it should inherit the color from line 17?
|
|
||
| &__logout { | ||
| &:hover { | ||
| color: #fff; | ||
| background-color: #183642; // background-color is not coming from enhanced on hover |
There was a problem hiding this comment.
The hover state background color is applied in enhances.scss for .c-user-details__link.
The core scss file doesn't need all of the rules, it is intended to contain just basic styling.
| } | ||
|
|
||
| display: block; | ||
| font-size: $small-font-size; | ||
| line-height: 1.76; // added Line-height | ||
| letter-spacing: 0.14px; // added letter-spacing |
There was a problem hiding this comment.
I'm not sure about these rules being here, is this maybe some styling that you need for overriding some of your application scss?
We do have something in the SN brand context, $context--line-height-base:
| &:hover, | ||
| &:focus { | ||
| text-decoration: underline; // text underline on hover | ||
| } |
There was a problem hiding this comment.
Did you add this for a specific browser? I had thought the default browser styling for the button element was sufficient
| @@ -26,6 +33,8 @@ | |||
| &__content-item { | |||
| padding: 0 12px; | |||
| font-size: 12px; | |||
| line-height: 1.76; // added Line-height | |||
There was a problem hiding this comment.
| line-height: 1.76; // added Line-height | |
| line-height: $context--line-height-base; |
This will require importing following scss
@import '@springernature/brand-context/springernature/scss/10-settings/colors/default';
|
Will follow up with Jon about spacing |
Added some font related styles.
one class added to first name span in HBS file to update style for that.