Mixins

Componenten

Button Formulier Tekstvelden Errors Hamburger menu Tekst links

Overig

Losse mixins

Button

Standaard variabelen$button-padding-y: 			19px
$button-padding-x: 			30px
$button-radius: 				0
$button-icon-space: 		15px
$button-border-width: 		0
Button basis

Button

SCSS

HTML

@include button-base ($background, $color);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren
Button effect 1

Button

SCSS

HTML

@include button-effect-1 ($hover, $active, $color, $transition);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren
Button effect 2

Button

SCSS

HTML

@include button-effect-2 ($translate, $transition);

Kopiëren 
<a class="button">
     Button
     @include('fourdesign::icons.arrow-right,
        ['class' => 'button__icon'])
</a>
Kopiëren
Button effect 3

Button

SCSS

HTML

@include button-effect-3 ($background, $hover, $transition);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren
Button effect 4

Button

SCSS

HTML

@include button-effect-4 ($background, $hover, $transition);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren
Button effect 5

Button

SCSS

HTML

@include button-effect-5 ($background, $hover, $transition);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren
Button effect 6

Button

SCSS

HTML

@include button-effect-6 ($background, $hover, $transition);

Kopiëren 
<a class="button">
   Button
</a>
Kopiëren