Exclude or overwrite CSS rules for buttons

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?

Add that, see if it helps. :slight_smile:

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

Yeah that’s it. Thanks a bunch.

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:

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.