<h1 class="heading-level-1 mw-730 mx-auto mb-md">Form Elements</h1>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Buttons</h2>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Regular</h3>
<div class="mw-730 mx-auto">
<a href="#" class="button-default">Default</a>
<button href="#" class="button-default" disabled>Disabled</button>
<a href="#" class="button-small">Default</a>
<a href="#" class="button-small selected">Select</a>
<button href="#" class="button-small" disabled>Disabled</button>
<a href="#">Link</a>
<hr>
</div>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Grouped</h3>
<div class="mw-730 mx-auto">
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group single">
<div class="button-group-title">Studietakt</div>
<button href="#" class="button-small" data-active="false">100%</button>
<button href="#" class="button-small" data-active="false">75%</button>
<button href="#" class="button-small" data-active="false">50%</button>
<button href="#" class="button-small" data-active="false">25%</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<hr>
</div>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Dropdown</h2>
<div class="mw-730 mx-auto">
<div class="row">
<div class="col-6">
<div class="dropdown">
<button class="button-dropdown" type="button" id="dropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Välj ditt område<span class="fas fa-caret-down float-right"></span></button>
<div class="dropdown-menu" aria-labelledby="dropDown">
<a href="#" class="dropdown-item">Härnösand</a>
<a href="#" class="dropdown-item">Sundsvall</a>
<a href="#" class="dropdown-item">Östersund</a>
</div>
</div>
</div>
<div class="col-6">
<form class="searchbar-container">
<input class="button-dropdown" type="text" name="search" id="search" placeholder="Sök bland alla program och kurser"><button class="button-search" type="submit"><span
class="fas fa-search"></span></button>
</form>
</div>
</div>
<hr>
</div>
<h1 class="heading-level-1 mw-730 mx-auto mb-md">{{ text }}</h1>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Buttons</h2>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Regular</h3>
<div class="mw-730 mx-auto">
<a href="#" class="button-default">Default</a>
<button href="#" class="button-default" disabled>Disabled</button>
<a href="#" class="button-small">Default</a>
<a href="#" class="button-small selected">Select</a>
<button href="#" class="button-small" disabled>Disabled</button>
<a href="#">Link</a>
<hr>
</div>
<h3 class="heading-level-3 mw-730 mx-auto mb-md">Grouped</h3>
<div class="mw-730 mx-auto">
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group single">
<div class="button-group-title">Studietakt</div>
<button href="#" class="button-small" data-active="false">100%</button>
<button href="#" class="button-small" data-active="false">75%</button>
<button href="#" class="button-small" data-active="false">50%</button>
<button href="#" class="button-small" data-active="false">25%</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<div class="button-group multiple">
<div class="button-group-title">Utbildningstyp</div>
<button href="#" class="button-small" data-active="false">Program</button>
<button href="#" class="button-small" data-active="false">Kurs</button>
</div>
<hr>
</div>
<h2 class="heading-level-2 mw-730 mx-auto mb-md">Dropdown</h2>
<div class="mw-730 mx-auto">
<div class="row">
<div class="col-6">
<div class="dropdown">
<button class="button-dropdown" type="button" id="dropDown" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Välj ditt område<span class="fas fa-caret-down float-right"></span></button>
<div class="dropdown-menu" aria-labelledby="dropDown">
<a href="#" class="dropdown-item">Härnösand</a>
<a href="#" class="dropdown-item">Sundsvall</a>
<a href="#" class="dropdown-item">Östersund</a>
</div>
</div>
</div>
<div class="col-6">
<form class="searchbar-container">
<input class="button-dropdown" type="text" name="search" id="search"
placeholder="Sök bland alla program och kurser"><button class="button-search" type="submit"><span
class="fas fa-search"></span></button>
</form>
</div>
</div>
<hr>
</div>
{
"text": "Form Elements"
}
$('.button-group button').on('click', function () {
if ($(this).parent().hasClass('multiple')) {
$(this).toggleClass('selected');
$(this).attr('data-active', $(this).attr('data-active') == 'true' ? 'false' : 'true');
} else if ($(this).parent().hasClass('single')) {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected').attr('data-active', 'false');
} else {
$(this).siblings().removeClass('selected').attr('data-active', 'false');
$(this).addClass('selected').attr('data-active', 'true');
}
}
});
h1.title {
max-width: 730px;
margin: 0 0 $md-space 0;
}