I found a couple of minor issues in css styling for views exposed filter.

Add styling for reset filter:

/* Blue Button */
input#edit-preview,
input#edit-next,
input#preview-submit,
input#edit-reset,
input[type="submit"][id^="edit-return"] {
cursor: pointer;
border-radius: 0;
border: none;
padding: 6px 10px;
margin-bottom: 1em;
margin-right: 1em;/* LTR */
color: #fff;
text-align: center;
font-weight: normal;
font-size: 1.077em;
font-family: "Lucida Grande",Verdana,sans-serif;
background: #0074BD;
}

input#edit-preview:hover,
input#edit-next:hover,
input#edit-reset:hover,
input#preview-submit:hover,
input[type="submit"][id^="edit-return"]:hover {
background: #004c99;
border-radius: 0;
border: none;
color: #fff;
}

input#edit-preview:active,
input#edit-next:active,
input#edit-reset:active,
input#preview-submit:active,
input[type="submit"][id^="edit-return"]:active {
box-shadow: 0 2px 2px rgba(0,0,0,0.75) inset;
background: #333;
border-radius: 0;
border: none;
color: #fff;
}

Clear both for submit button syntax error
.views-exposed-widget .views-submit-button{
clear: both;
}
should be
.views-exposed-widget.views-submit-button{
clear: both;
}

Also i would sugest this code in mobile.css

.views-exposed-form .views-exposed-widget.views-submit-button,
.views-exposed-form .views-exposed-widget.views-reset-button {
width:auto;
}

Thanks for a great theme!

Comments

hkirsman’s picture

So the fix colors reset to blue and moves the buttons below form elements:
Fix that rodpal suggested.

Based on what I see on admin/content page:
admin/content page
I would not color reset button to blue. And there allready is a blue button in that section - Update preview.

Now what about the buttons below form elements. In all other core themes they are on the same line. Here's Bartik's example:
Views exposed filters in Bartik
I like it. Takes less space for example.

So instead I would fix margin-top:

.views-exposed-form .views-exposed-widget .form-submit {
  margin-top: 2.429em; /* 34px */
}

Result:
New fix

And the current problem-> solution by rodpal with mobile is this:
Mobile issue

But instead adding:

.views-exposed-form .views-exposed-widget.views-submit-button,
.views-exposed-form .views-exposed-widget.views-reset-button {
  width:auto;
}

I would remove:

.views-exposed-form .views-exposed-widget {
  width: 100%;
}

Results:
Mobile fix

If there's room, elements will align on the same line.

I'll add 2 separate patches in next comment.

hkirsman’s picture

ANDiTKO’s picture

Status: Active » Closed (fixed)

Patch committed.

Thanks @hkirsman and @rodpal!