how to find core files of magento2 css

Question

I need to increase the width of search box in home page.

With the help of developer tools i have found that block-search (.block-search) class is reason for this and i have checked .block-search in my magento2 directory.

And i have found .block-search class in \pub\static\frontend\Magento\luma\en_US\css\styles-l.css for which i have changed the size and its working fine.

Now in the future to get updates for any css classes i may delete pub/static files. So how to find the core files reason for any css, so that even i delete pub/static files it won't get effected to my changes requirement

Answer 1

Most of css in Magento generated form less files. Css for stiles-l.css is generated base on app/design/frontend/Magento/blank/web/css/styles-l.less file.

See: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html for details

Answer 2

You will find that class in styles-l.less. If your build on top of the blank theme you can create a _theme.less file in your theme to apply this kind of styling change.