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

[Resolved : Styling <select> by changing less variables in Luma theme… #15734

Conversation

hitesh-wagento
Copy link
Contributor

Have "select" elements with the styles you set in _theme.less

Description

Fixed Issues (if relevant)

  1. magento/magento2#Styling <select> by changing less variables in Luma theme doesn't work as expected #15608 : Issue title Styling select by changing less variables in Luma theme doesn't work as expected

Manual testing scenarios

  1. In Custom/theme/web/css/source/_theme.less set less variables:
    @select__background: rgba(255, 255, 255, 0.15);
    @select__border: 2px dashed blue;
    @select__height: 50px;
    @select__padding: 15px 40px 15px 15px;
    @select__background-clip: border-box;
  2. Compile less

Contribution checklist

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds on Travis CI are green)

@magento-engcom-team magento-engcom-team added Partner: Wagento Pull Request is created by partner Wagento partners-contribution Pull Request is created by Magento Partner Area: Lib/Frontend labels Jun 4, 2018
background-size: 30px 60px;
border: 1px solid @border-color__base;
Copy link
Contributor

Choose a reason for hiding this comment

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

Where are the @select__border and other variables defined / used?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's define in lib/web/css/source/lib/variables/_forms.less

Copy link
Contributor

Choose a reason for hiding this comment

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

But I do not (directly) see its usage anywhere. I'm speaking about the newly added variables.

Copy link
Contributor Author

@hitesh-wagento hitesh-wagento Jun 4, 2018

Choose a reason for hiding this comment

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

I didn't created/added any new variables. all variables are in lib/web/css/source/lib/variables/_forms.less I have just moved _forms.less CSS in _theme.less so we can change select CSS without using !important

Copy link
Contributor

Choose a reason for hiding this comment

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

Ah, found them =) @{@{_type}__background} and so on.

Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry, just want to check the inheritance and usage of the variables to understand the issue better and detect similar issues.

@magento-engcom-team
Copy link
Contributor

Hi @hitesh-wagento. Thank you for your contribution.
Changes from your Pull Request will be available with the upcoming 2.2.6 release.

Please, consider to port this solution to 2.3 release line.
You may use Porting tool to port commits automatically.

@hitesh-wagento hitesh-wagento deleted the styling-select-changing-less branch September 6, 2018 07:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Lib/Frontend Partner: Wagento Pull Request is created by partner Wagento partners-contribution Pull Request is created by Magento Partner Progress: accept Release Line: 2.2
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants