_button-bar.scss 1.6 KB

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