O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Search

Next, we'll style the Search field in the header. I want to ensure that the border on the input and the button match. We'll set it to the secondary color by default. The background color of the search button will also be this color with the icon being white. Then when the input or the button is hovered on or active we set the border color to be the primary theme color. The button background color will also change to the primary color. The icon will remain white:

// Search .search-bar { &-input, &-button { border: 1px solid get($theme, color, secondary); &:active, &:focus, &:hover { border: 1px solid get($theme, color, primary); } } &-button { background-color: get($theme, color, secondary); color: white; &:active, &:focus, &:hover { background-color: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required