_bars.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. // Bars
  2. .bar {
  3. background: $bg-color-dark;
  4. border-radius: $border-radius;
  5. display: flex;
  6. flex-wrap: nowrap;
  7. height: $unit-4;
  8. width: 100%;
  9. &.bar-sm {
  10. height: $unit-1;
  11. }
  12. // TODO: attr() support
  13. .bar-item {
  14. background: $primary-color;
  15. color: $light-color;
  16. display: block;
  17. font-size: $font-size-sm;
  18. flex-shrink: 0;
  19. line-height: $unit-4;
  20. height: 100%;
  21. position: relative;
  22. text-align: center;
  23. width: 0;
  24. &:first-child {
  25. border-bottom-left-radius: $border-radius;
  26. border-top-left-radius: $border-radius;
  27. }
  28. &:last-child {
  29. border-bottom-right-radius: $border-radius;
  30. border-top-right-radius: $border-radius;
  31. flex-shrink: 1;
  32. }
  33. }
  34. }
  35. // Slider bar
  36. .bar-slider {
  37. height: $border-width-lg;
  38. margin: $layout-spacing 0;
  39. position: relative;
  40. .bar-item {
  41. left: 0;
  42. padding: 0;
  43. position: absolute;
  44. &:not(:last-child):first-child {
  45. background: $bg-color-dark;
  46. z-index: $zindex-0;
  47. }
  48. }
  49. .bar-slider-btn {
  50. background: $primary-color;
  51. border: 0;
  52. border-radius: 50%;
  53. height: $unit-3;
  54. padding: 0;
  55. position: absolute;
  56. right: 0;
  57. top: 50%;
  58. transform: translate(50%, -50%);
  59. width: $unit-3;
  60. &:active {
  61. box-shadow: 0 0 0 .1rem $primary-color;
  62. }
  63. }
  64. }