Exclude or overwrite CSS rules for buttons

Flow
1

Hi all,

I just tried the new Valo theme and its abilities. Man I’m impressed.
So thanks a bunch to Jouni and his magic spells. :slight_smile:

After that I tried to implement valo in an example app, but I couldn’t solve a problem I stumbled upon:
I have a layout container with some buttons within. These buttons shouldn’t look the same as the rest of the application, I need them to be borderless in all states with just a bar/border on the bottom when focused.

For reference I tried the following:

.test-navigation .v-button{
      background: $v-background;
      border: none;
      @include box-shadow(none);
      &:hover {
          background: $v-background;
          background-color: $v-background-color;
          font-weight: $v-font-weight+200;
      }
      &:focus, &.highlight {
          border: none;
          border-radius: 0;
          border-bottom: 2px solid $v-focus-color;
          @include box-shadow(none);          
      }
  }

For some reason the focused button still has some colored lines on the left and right side of the button.
Does someone has an idea to fix this?

2

Add that, see if it helps. :slight_smile:

&:focus:after {
  @include box-shadow(none);
}
3

Yeah that’s it. Thanks a bunch.

4

Hi
That’s amazing, I had a similar problem: I needed an “icon-only”-button without borders. So

button.addStyleName(ValoTheme.BUTTON_BORDERLESS); button.addStyleName(ValoTheme.BUTTON_ICON_ONLY); was almost everything I needed, except the border/frame around the icon when the button has focus. I tried nearly everything, but all I needed after I found this thread was

.v-button-borderless:focus:after { @include box-shadow(none); } That’s very nice and I’m really happy, but could anyone explain this? I’d like to understand these (s)css-things :slight_smile:

5

Hey Johannes,

There is a box-shadow on the :after pseudo-element when the component is focused. It might not be the most obvious or first place you’d look, but yeah… Most browsers offer some kind of “DOM/stylesheet inspector”. I recommend using that if you want to familiarize yourself with Valo.

You can also, at least in Chrome, enable/toggle an element’s active, hover, focus and visited states - allowing you to roam free and inspect the applied styles.