UDS-1970: feat(unity-bootstrap-theme): added mixin to expand clickable area #1564
Conversation
|
Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1564/index.html |
| position: absolute; | ||
| min-width: $min-width; | ||
| min-height: $min-height; | ||
| z-index: -1; |
There was a problem hiding this comment.
Since we are using ::before, the text will naturally have a higher z-index, since it comes after ::before and we should not use z-index:-1 since this will push the ::before content behind an element with position: relative and will prevent the clickable-area from working
| inset: 0; | ||
| margin: auto; | ||
| } | ||
| } |
There was a problem hiding this comment.
&::before {
content: "";
position: absolute;
min-width: $min-width; // is not needed, but doesn't hurt
min-height: $min-height;
// z-index: -1;
inset: 0;
margin: auto;
right: min(0px, calc(50% - #{$min-width} / 2));
left: min(0px, calc(50% - #{$min-width} / 2));
background-color: #f002; // visual testing only
}
The code above equally expands the clickable area in all directions, The only issue is the overlap with the 1 character buttons, but I think this is an extreme scenario
| } | ||
|
|
||
| // Extra styles that don't have bootstrap variables to override | ||
| .btn { |
There was a problem hiding this comment.
I the solution needs to be on the .btn class since buttons are responsive and regular buttons inherit a small class with a narrow viewport.
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| min-width: $min-width; |
There was a problem hiding this comment.
Setting min-width only increases the clickable area in one direction
|
Hi @scott-williams-az @davidornelas11 |
davidornelas11
dismissed
scott-williams-az’s stale review
Changes addressed
added mixin to expand clickable area for btn
UDS-1970
Description
Checklist
Important Reminders
Links