button-group.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @use 'sass:map';
  2. @use 'common/var' as *;
  3. @use 'mixins/mixins' as *;
  4. @use 'mixins/utils' as *;
  5. @include b(button-group) {
  6. @include utils-clearfix;
  7. display: inline-block;
  8. vertical-align: middle;
  9. & > .#{$namespace}-button {
  10. float: left;
  11. position: relative;
  12. & + .#{$namespace}-button {
  13. margin-left: 0;
  14. }
  15. &:first-child {
  16. border-top-right-radius: 0;
  17. border-bottom-right-radius: 0;
  18. }
  19. &:last-child {
  20. border-top-left-radius: 0;
  21. border-bottom-left-radius: 0;
  22. }
  23. &:first-child:last-child {
  24. border-top-right-radius: map.get($button-border-radius, 'default');
  25. border-bottom-right-radius: map.get($button-border-radius, 'default');
  26. border-top-left-radius: map.get($button-border-radius, 'default');
  27. border-bottom-left-radius: map.get($button-border-radius, 'default');
  28. &.is-round {
  29. border-radius: getCssVar('border-radius', 'round');
  30. }
  31. &.is-circle {
  32. border-radius: 50%;
  33. }
  34. }
  35. &:not(:first-child):not(:last-child) {
  36. border-radius: 0;
  37. }
  38. &:not(:last-child) {
  39. margin-right: -1px;
  40. }
  41. &:hover,
  42. &:focus,
  43. &:active {
  44. z-index: 1;
  45. }
  46. @include when(active) {
  47. z-index: 1;
  48. }
  49. }
  50. & > .#{$namespace}-dropdown {
  51. & > .#{$namespace}-button {
  52. border-top-left-radius: 0;
  53. border-bottom-left-radius: 0;
  54. border-left-color: getCssVar('button', 'divide-border-color');
  55. }
  56. }
  57. @each $type in (primary, success, warning, danger, info) {
  58. .#{$namespace}-button--#{$type} {
  59. &:first-child {
  60. border-right-color: getCssVar('button', 'divide-border-color');
  61. }
  62. &:last-child {
  63. border-left-color: getCssVar('button', 'divide-border-color');
  64. }
  65. &:not(:first-child):not(:last-child) {
  66. border-left-color: getCssVar('button', 'divide-border-color');
  67. border-right-color: getCssVar('button', 'divide-border-color');
  68. }
  69. }
  70. }
  71. }