Menu icon Foundation
Mixins for topbar color

Hi there, i was wondering if there´s a way to make mixins for topbar colors, like buttons. I´ve managed to make 9 different buttons color.

Using: @include button($bg:$whatevercoloryouwant), thanks to foundation this part was easy, the hover state works like a charm even in a button, because it takes the color and darken it by 10%.

I´m not an expert with sass yet, so any help would be really appreciated.
Thanks in advance

color topbar button hover

Hi there, i was wondering if there´s a way to make mixins for topbar colors, like buttons. I´ve managed to make 9 different buttons color.

Using: @include button($bg:$whatevercoloryouwant), thanks to foundation this part was easy, the hover state works like a charm even in a button, because it takes the color and darken it by 10%.

I´m not an expert with sass yet, so any help would be really appreciated.
Thanks in advance

Rafi Benkual over 4 years ago

To add button mixins to top-bar, you would edit the _top-bar.scss file

something like:

.custom-button {
    @include button(
    // $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
    $padding,
    // Background color. We can set $bg:false for a transparent background. Default: $primary-color.
    $bg,
    // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
    $radius,
    // We can set $full-width:true to remove side padding extend width. Default:false
    $full-width,
    // We can set $disabled:true to create a disabled transparent button. Default:false
    $disabled,
    // $is-input - <input>s and <button>s take on strange padding. We added this to help fix that. Default:false
    $is-input
  );
}

around line 680

Alejandro over 4 years ago

well, i´ve done something like this so far:
```SASS

$estado : hsl(206,64%,65%);//#6CADDF

.color-scheme-estado {
@include colour-scheme($estado, $estado, $estado);
a:hover{color:darken($estado, 20%)}
.btn-estado {
@include button-style($bg:$estado);
}
}
```

worked like a charm, but i need to make a custom top-bar, in fact 9 custom top-bars, with different colors each. That means making different hover states and so on, i don´t know if there´s a way around to make it in mixin or do i have to make it in CSS manually.

regards