Getting started with schedules

[sukhwinder33445]

resolves #280

[flourish86]

This looks basically good already. I found some smaller issues, though.

1. The layout of the empty state notice is broken when becoming narrow. I'd probably opt for a flex box solution.

2. I find the timestamps for the scale pretty distracting, especially when the columns width becomes really narrow. We had this offline already and I see the points you made about the locale stuff. But can we probably try to decrease the line-height and fade the AM/PMs?

Something like this.

.timescale .timestamp {
   line-height: 1;
}

.timescale .timestamp > span:last-child {
    opacity: 0.5;
}

3. Can you adjust the background of the empty-state button container? It's a little too dark. I noticed, that I used a custom value. It's #d9d9d9 in the mockup, but with 25% opacity. Probably @gray-lighter would be close, but also with 25%. I think you can use fade(@gray-light, 25%).

4. Same for the "Add another …" Button. And the row header should be the same colors, please.
   

5. Not sure if it's addressed in a different issue, but the row header should be the same as the body row area, when highlighted.
   

[flourish86]

There's also something, that's not right here. Although there's enough space, the button and the hint element break.

[flourish86]

The "Add another rotation" version looks great.

In the empty state version, the content is not centered, though.

The base branch was changed.

[nilmerg]

Sorry, this touched so much irrelevant code parts I rewrote it from scratch in #359

Except the hover/highlight stuff, please open a separate PR for this.