_btn-group.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /**
  2. * Creates the base structure of a button group.
  3. * @member Ext.container.ButtonGroup
  4. */
  5. @mixin extjs-btn-group {
  6. .#{$prefix}btn-group {
  7. position: relative;
  8. overflow: hidden;
  9. }
  10. .#{$prefix}btn-group-body {
  11. position: relative;
  12. zoom: 1;
  13. padding: $btn-group-padding;
  14. .#{$prefix}table-layout-cell {
  15. vertical-align: top;
  16. }
  17. }
  18. .#{$prefix}btn-group-header-text {
  19. white-space: nowrap;
  20. }
  21. @include extjs-btn-group-ui('default');
  22. }
  23. /**
  24. * Creates a visual theme of a button group.
  25. * @member Ext.container.ButtonGroup
  26. */
  27. @mixin extjs-btn-group-ui(
  28. $ui-label,
  29. $ui-base-color: null,
  30. // background
  31. $ui-background-color: $btn-group-background-color,
  32. // borders
  33. $ui-border-color: $btn-group-border-color,
  34. $ui-border-width: $btn-group-border-width,
  35. $ui-border-radius: $btn-group-border-radius,
  36. $ui-inner-border-color: $btn-group-inner-border-color,
  37. //header
  38. $ui-header-background-color: $btn-group-header-background-color,
  39. $ui-header-font: $btn-group-header-font,
  40. $ui-header-color: $btn-group-header-color
  41. ){
  42. @include x-frame(
  43. 'btn-group',
  44. $ui: '#{$ui-label}-framed',
  45. /* Radius, width, padding and background-color */
  46. $border-radius: $ui-border-radius,
  47. $border-width: $ui-border-width,
  48. $padding: $btn-group-padding,
  49. $background-color: $ui-background-color
  50. );
  51. .#{$prefix}btn-group-#{$ui-label}-framed {
  52. border-color: $ui-border-color;
  53. @include inner-border(
  54. $width: $btn-group-inner-border-width,
  55. $color: $ui-inner-border-color
  56. );
  57. }
  58. .#{$prefix}btn-group-header-#{$ui-label}-framed {
  59. margin: $btn-group-header-margin;
  60. }
  61. .#{$prefix}btn-group-header-body-#{$ui-label}-framed {
  62. padding: $btn-group-header-padding;
  63. background: $ui-header-background-color;
  64. @include border-top-radius($ui-border-radius);
  65. }
  66. .#{$prefix}btn-group-header-text-#{$ui-label}-framed {
  67. font: $ui-header-font;
  68. color: $ui-header-color;
  69. }
  70. }