_btn-group.scss 2.3 KB

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