resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss

   1 @mixin extjs-btn-group {
   2     .#{$prefix}btn-group {
   3         position: relative;
   4         overflow: hidden;
   5     }
   6
   7     .#{$prefix}btn-group-body {
   8         position: relative;
   9         zoom: 1;
  10         padding: $btn-group-padding;
  11         .#{$prefix}table-layout-cell {
  12             vertical-align: top;
  13         }
  14     }
  15
  16     .#{$prefix}btn-group-header-text {
  17         white-space: nowrap;
  18     }
  19
  20     @include extjs-btn-group-ui('default');
  21 }
  22
  23 /**
  24  * @mixin extjs-btn-group-ui
  25  * @class Ext.ButtonGroup
  26  */
  27 @mixin extjs-btn-group-ui(
  28     $ui-label,
  29     $ui-base-color: null,
  30
  31     // background
  32     $ui-background-color: $btn-group-background-color,
  33
  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
  40     //header
  41     $ui-header-background-color: $btn-group-header-background-color,
  42     $ui-header-font: $btn-group-header-font,
  43     $ui-header-color: $btn-group-header-color
  44 ){
  45     @include x-frame(
  46         'btn-group',
  47         $ui: '#{$ui-label}-framed',
  48
  49         /* Radius, width, padding and background-color */
  50         $border-radius: $ui-border-radius,
  51         $border-width: $ui-border-width,
  52         $padding: $btn-group-padding,
  53         $background-color: $ui-background-color
  54     );
  55
  56     .#{$prefix}btn-group-#{$ui-label}-framed {
  57         border-color: $ui-border-color;
  58         @include inner-border(
  59             $width: $btn-group-inner-border-width,
  60             $color: $ui-inner-border-color
  61         );
  62     }
  63
  64     .#{$prefix}btn-group-header-#{$ui-label}-framed {
  65         margin: $btn-group-header-margin;
  66     }
  67
  68     .#{$prefix}btn-group-header-body-#{$ui-label}-framed {
  69         padding: $btn-group-header-padding;
  70
  71         background: $ui-header-background-color;
  72
  73         @include border-top-radius($ui-border-radius);
  74     }
  75
  76     .#{$prefix}btn-group-header-text-#{$ui-label}-framed {
  77         font: $ui-header-font;
  78         color: $ui-header-color;
  79     }
  80 }