/**
|
|
* <div class="bar">
|
|
* <div class="bar__start">
|
|
* </div>
|
|
* <div class="bar__main">
|
|
* </div>
|
|
* <div class="bar__end">
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://gitea.com/tentakelfabrik/plain-ui
|
|
*
|
|
*/
|
|
|
|
.bar {
|
|
display: flex;
|
|
|
|
min-height: 2.8em;
|
|
background-color: var(--background);
|
|
color: var(--text-contrast);
|
|
|
|
border: $border;
|
|
border-radius: $border-radius;
|
|
|
|
&__start {
|
|
justify-content: start;
|
|
}
|
|
|
|
&__main {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&__end {
|
|
justify-content: end;
|
|
}
|
|
|
|
&__start, &__main, &__end {
|
|
display: flex;
|
|
align-self: center;
|
|
margin-left: 0.75em;
|
|
|
|
&:last-child {
|
|
margin-right: 0.75em;
|
|
}
|
|
}
|
|
}
|