Zurb фундамент ввода верхней панели поиска

Question

Я использую zurb фундамент 4. создать верхнюю панель с поисковой формой в то же самое:

<nav class="top-bar"> 
    <ul class="title-area"> 
    <li class="name"> 
    <h1><a href="#">Title</a></h1> 
    </li> 
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
</ul> 

<section class="top-bar-section"> 
    <!-- Left Nav Section --> 
    <ul class="left"> 
    <li class="has-form"> 
     <form> 
     <div class="row collapse" > 
      <div class="small-10 columns"> 
      <input type="text"> 
      </div> 
      <div class="small-2 columns"> 
      <a href="#" class="alert button">S</a> 
      </div> 
     </div> 
     </form> 
    </li> 
    </ul> 

    <!-- Right Nav Section --> 
    <ul class="right"> 
    <li class="divider"></li> 
    <li class="has-dropdown"><a href="#">Drop1</a> 
     <ul class="dropdown"> 
     <li><a href="#">Dropdown Level 3a</a></li> 
     <li><a href="#">Dropdown Level 3b</a></li> 
     <li><a href="#">Dropdown Level 3c</a></li> 
     </ul> 
    </li> 
    <li class="divider"></li> 
    <li class="has-dropdown"><a href="#">Drop2</a> 
     <ul class="dropdown"> 
     <li><a href="#">Dropdown Level 3a</a></li> 
     <li><a href="#">Dropdown Level 3b</a></li> 
     <li><a href="#">Dropdown Level 3c</a></li> 
     </ul> 
    </li> 
    </ul> 
</section> 

мне нужно увеличить размер в поиск без потери оперативности. Кто-нибудь знает, как я могу это сделать?

http://cl.ly/image/1a412p3M3e1J

Answer 1

Если вы используете SASS, просто изменить:

input { height: $topbar-input-height } 

To:

input { height: $topbar-height } 

Если вы используете CSS, измените строку с:

.top-bar input { height: 2.45em; } 

До:

.top-bar input { height: 45px; } 

Следуйте аналогичным процедурам, если вы хотите изменить ширину.

Answer 2

Я большой поклонник CDN, поэтому редактирование файлов Foundation не является вариантом.

Вот обходной путь, который работает для меня:

.top-bar input { 
    height: auto !important; 
    padding-top: .35rem !important; 
    padding-bottom: .35rem !important; 
}