1
 2/**
 3 * Button Bar
 4 * --------------------------------------------------
 5 */
 6
 7.button-bar {
 8  @include display-flex();
 9  @include flex(1);
10  width: 100%;
11
12  &.button-bar-inline {
13    display: block;
14    width: auto;
15
16    @include clearfix();
17
18    > .button {
19      width: auto;
20      display: inline-block;
21      float: left;
22    }
23  }
24
25  &.bar-light > .button {
26    border-color: $button-light-border;
27  }
28  &.bar-stable > .button {
29    border-color: $button-stable-border;
30  }
31  &.bar-positive > .button {
32    border-color: $button-positive-border;
33  }
34  &.bar-calm > .button {
35    border-color: $button-calm-border;
36  }
37  &.bar-assertive > .button {
38    border-color: $button-assertive-border;
39  }
40  &.bar-balanced > .button {
41    border-color: $button-balanced-border;
42  }
43  &.bar-energized > .button {
44    border-color: $button-energized-border;
45  }
46  &.bar-royal > .button {
47    border-color: $button-royal-border;
48  }
49  &.bar-dark > .button {
50    border-color: $button-dark-border;
51  }
52}
53
54.button-bar > .button {
55  @include flex(1);
56  display: block;
57
58  overflow: hidden;
59
60  padding: 0 16px;
61
62  width: 0;
63
64  border-width: 1px 0px 1px 1px;
65  border-radius: 0;
66  text-align: center;
67  text-overflow: ellipsis;
68  white-space: nowrap;
69
70  &:before,
71  .icon:before {
72    line-height: 44px;
73  }
74
75  &:first-child {
76    border-radius: $button-border-radius 0px 0px $button-border-radius;
77  }
78  &:last-child {
79    border-right-width: 1px;
80    border-radius: 0px $button-border-radius $button-border-radius 0px;
81  }
82  &:only-child {
83    border-radius: $button-border-radius;
84  }
85}
86
87.button-bar > .button-small {
88  &:before,
89  .icon:before {
90    line-height: 28px;
91  }
92}