0

Maybe I don't understand how to use mixin with sass, or how to work with the ones with bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass). But how can I do something like change the box-shadow on a class of input fields?

EDIT: Should clarify, in this example I'm trying to change the glow effect on an active input field when it is selected. By default it's blue.

For my project setup, I have it just like it says on the github page and have the gem in the Gemfile and then in a controller I have something like:

@import "bootstrap"
.testInput {
  /*(here I have put a variation of variables that I change to see 
  if I can do something with the mixin like $bordercolor: #000;*/
  @include formFieldState()
}

So maybe my understanding of how sass works is way off. I guess if I wanted to change the box-shadow for inputs I could just repeat the code in my own mixin but it was also just kind of a general question on if this kind of thing was possible with the other mixins as well.

Paolo
  • 20,112
  • 21
  • 72
  • 113
Doug
  • 1,316
  • 6
  • 19
  • 36

2 Answers2

0

You should put the things you want to change after the @include, instead of before. The last declaration wins with CSS so if you put them before the mixin, the mixin version will win.

See here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ for an advanced discussion of CSS precedence.

Nick Palmer
  • 2,589
  • 1
  • 25
  • 34
0

Did you look at the source to see what the formFieldState mixin does? It lives here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss#L159. It looks like this mixin is designed to be used within some type of container, most likely a form.

There are no variables controlling the default input:focus box-shadow (its declaration is here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_forms.scss#L126). You'll have to override it the old fashioned way.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • attempting to, but when I add a transition, with a box shadow bootstrap's settings override what I put in. I can't change anything on the input field. – Doug Dec 11 '12 at 04:15
  • Unless you provide some code and a clear picture of what you're trying to accomplish (you never mentioned transitions in the OP), I can't help you any further. – cimmanon Dec 11 '12 at 13:19