1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 09:56:51 +01:00

use some <button>

This commit is contained in:
Matthias Kretschmann 2014-07-13 01:58:31 +02:00
parent 1461062168
commit 4559f4cf8e
4 changed files with 26 additions and 12 deletions

View File

@ -9,7 +9,7 @@
</header> </header>
<nav role="navigation" class="nav-main"> <nav role="navigation" class="nav-main">
<a class="menu-btn icon icon-list" href="#"></a> <button type="button" class="menu-btn icon icon-list"></button>
<div class="nav-popover hide"> <div class="nav-popover hide">
<a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a> <a class="nav-link goodies icon icon-gift" href="/goodies/">goodies</a>
<a class="nav-link photos icon icon-pictures" href="/photos/">photos</a> <a class="nav-link photos icon icon-pictures" href="/photos/">photos</a>
@ -20,10 +20,10 @@
</nav> </nav>
<section class="site-search"> <section class="site-search">
<a class="search-btn icon icon-search" href="#"></a> <button type="button" class="search-btn icon icon-search"></button>
<div class="search-area"> <div class="search-area">
<input type="search" class="form-control input-search search-field" placeholder="Search everything"> <input type="search" class="form-control input-search search-field" placeholder="Search everything">
<a class="search-close close" href="#">&times;</a> <button class="close search-close">&times;</button>
</div> </div>
</section> </section>

View File

@ -4,6 +4,19 @@
// Buttons // Buttons
// //
// Reset default button element
button
padding: 0
cursor: pointer
background: transparent
border: 0
-webkit-appearance: none
&:active
background: $link-color
transition: none
text-shadow: none
.btn .btn
@extend .textcenter @extend .textcenter
display: inline-block display: inline-block
@ -147,14 +160,15 @@
@extend .textcenter @extend .textcenter
width: 16px width: 16px
height: 16px height: 16px
line-height: 12px line-height: 1
font-size: 16px font-size: $font-size-small
padding: 0
border-radius: 16px border-radius: 16px
display: block display: block
background: $brand-grey-light background: $brand-grey-light
color: #fff color: #fff
&:hover &:hover,
&:focus
background: $link-color-hover background: $link-color-hover
color: #fff color: #fff
cursor: pointer

View File

@ -23,10 +23,6 @@
transition: none transition: none
color: #fff color: #fff
.search-btn
right: 50px
padding: .65em .85em
// Main Navigation // Main Navigation
///////////////////////////////////// /////////////////////////////////////

View File

@ -4,6 +4,10 @@
// Search // Search
// //
.search-btn
right: 50px
padding: .65em .85em
.site-search .site-search
margin-right: 4% margin-right: 4%