Refactor global CSS

[flekschas]

I notice that the search bar on the dashboard has a weird margin. It turned out to be caused by a global CSS rule.

Global CSS rules are very dangerous because they will effect everything across the whole page. It's often better to write class-based CSS rules and append classes to the elements that need it. The classes themselves can be pretty generic though.

In this case I am talking about: 88f36c6

input[type="text"], select{
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 3px;
  vertical-align: middle;
  width: 220px;
  border: 1px solid #ccc;
  background-color: #fff;
}

I would suggest transforming this into a class like so:

.myFancyInput {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 3px;
  vertical-align: middle;
  width: 220px;
  border: 1px solid #ccc;
  background-color: #fff;
}

I would quickly do this myself but unfortunately I don't know which element actually needs this styling.

Just as a reference here's the related commit: 88f36c6

[jkmarx]

These globals were added to offset the bootstrap3 css changes. The defaults should match bootstrap2 globals css. We can discuss more in the dev meeting as there will need to be a more uniform styling applied in general.

[flekschas]

Are all those commits related to global CSS rules?

[jkmarx]

Yes, they were related to this issue. That's why there were Referenced.