Topbar nits: dropdown triangle color not changing & search field "clear button" cut off

[Kinsbane]

First, thanks for this awesome tool! I'm really loving it.

I wanna change the colors of my topbar to a lighter flavor, and while I've had success with 99% of it, I can't seem to change the color of the little triangle for the dropdown menu link. The only place I can see in the .less files to change this is within patterns.less, on or around line 223 - 237:

.dropdown-toggle:after {
  color: @blue;
  width: 0;
  height: 0;
  display: inline-block;
  content: "↓";
  text-indent: -99999px;
  vertical-align: top;
  margin-top: 8px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid @white;
}

I noticed that there is the text-indent value - and when I removed it, the text ↓ showed up, in blue. But where is the little triangle coming from? I would also like, if possible, to change the color of this element when hovered / clicked on (eg, when the menu drops down).

I also noticed, in Chrome, the little circle-x to clear the value from the input field if you have a search box in the topbar is cut off on the right half - not sure if this is due to Chrome or something in the CSS.

Edit: My apologies, it wasn't clear how to tag this issue with topbar...

Thanks again for a great resource!!

[fat]

The arrows are created by smashing borders together. Here's an article on the technique: http://jonrohan.me/guide/css/creating-triangles-in-css/

cheers!

[fat]

what little x are you talking about?

[Kinsbane]

Shoot! My apologies, I forgot to elaborate on that. I realized just now that the behavior I was referencing was due to WebKit's handling of an INPUT whose type is set to "search", which is how I have the search box in my topbar currently configured. When an INPUT of type "search" has a user-inputted value, there is a white X in a gray circle that appears to allow the user to conveniently clear their search query from the input field.

Here is a screenshot of this "cut-off" behavior I'm seeing with how inputs are styled with types of "search":
http://i.imgur.com/kVlC0.png

And thanks for the info on that smashing borders technique - never knew about that one!

[fat]

no problem. We'll take a look at the x thing as soon as possible

[mdo]

@Kinsbane can you confirm these problems still exist?

[Kinsbane]

Hi Mark,

I have not yet updated to the latest Bootstrap, but let me setup a test with the latest and I will reply back!

[Kinsbane]

Hi Mark,

I downloaded v1.4.0-38 and tested an input with type of "search" in the top bar using the "container-app.html" example and can confirm the WebKit-provided "query-clear" x button still has its right half cut off when text is entered by the user.

Thanks!

[mdo]

First part of this is fixed in 2.0-wip—the dropdown arrow changes color with the appropriate hover/active states.

The second part, the x being cut off, appears to be a bug with Webkit. It doesn't respect the padding on a search input and appropriately move the x over. I'll keep digging into that, but for now you'll have to reset the padding to 4px all around for this to work.

Going to close this out and investigate the x thing more at a later date.