Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(NcCheckboxRadioSwitch): adjust to new design #5923

Closed

Conversation

marcoambrosini
Copy link
Contributor

@marcoambrosini marcoambrosini commented Aug 5, 2024

🖼️ Screenshots

🏚️ Before 🏡 After
Screenshot 2024-08-05 at 18 16 03 Screenshot 2024-08-05 at 18 17 31

Fixes #5875

Signed-off-by: Marco Ambrosini <[email protected]>
Signed-off-by: Marco Ambrosini <[email protected]>
@marcoambrosini marcoambrosini self-assigned this Aug 5, 2024
@marcoambrosini marcoambrosini added enhancement New feature or request 3. to review Waiting for reviews design Design, UX, interface and interaction design labels Aug 5, 2024
@marcoambrosini
Copy link
Contributor Author

@ reviewers the switch component is still 44px tall and I can't find out why.. .Do you have any ideas?

@ShGKme ShGKme added bug Something isn't working and removed enhancement New feature or request labels Aug 5, 2024
@ShGKme ShGKme added this to the 8.16.1 milestone Aug 5, 2024
@ShGKme ShGKme changed the title Feat/update checkboxradioswitch component fix(NcCheckboxRadioSwitch): adjust to new design Aug 5, 2024
// keep inner border width in mind
$border-radius-outer: calc($border-radius + 2px);

&--button-variant.checkbox-radio-switch {
background-color: var(--color-main-background);
border: 2px solid var(--color-border-maxcontrast);
border: 1px solid var(--color-border-maxcontrast);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the variable with fallback instead

@@ -682,13 +682,13 @@ export default {
color: var(--color-primary-element-light);
}

$border-radius: calc(var(--default-clickable-area) / 2);
$border-radius: var(--border-radius-element);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing fallback

@@ -198,7 +198,7 @@ export default {
gap: 4px;
user-select: none;
min-height: var(--default-clickable-area);
border-radius: var(--default-clickable-area);
border-radius: var(--border-radius-element);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing fallback

@ShGKme
Copy link
Contributor

ShGKme commented Aug 19, 2024

Sorry, I forgot about this PR when did #5974

But border width change is still actual, I only fixed border-radius

@susnux susnux modified the milestones: 8.16.1, 8.17.0 Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working design Design, UX, interface and interaction design
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Wrong radiuses for radio switch component
3 participants