resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss

   1 @mixin extjs-toolbar {
   2     .#{$prefix}toolbar {
   3         font-size: $toolbar-font-size;
   4
   5         border: 1px solid;
   6
   7         padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
   8
   9         .#{$prefix}form-item-label{
  10             font-size: $toolbar-font-size;
  11             line-height: 15px;
  12         }
  13
  14         .#{$prefix}toolbar-item {
  15             margin: 0 $toolbar-horizontal-spacing 0 0;
  16         }
  17
  18         .#{$prefix}toolbar-text {
  19             margin-left: 4px;
  20             margin-right: 6px;
  21             white-space: nowrap;
  22             color: $toolbar-text-color !important;
  23             line-height: $toolbar-text-line-height;
  24             font-family: $toolbar-text-font-family;
  25             font-size: $toolbar-text-font-size;
  26             font-weight: $toolbar-text-font-weight;
  27         }
  28
  29         .#{$prefix}toolbar-separator {
  30             display: block;
  31             font-size: 1px;
  32             overflow: hidden;
  33             cursor: default;
  34             border: 0;
  35         }
  36
  37         .#{$prefix}toolbar-separator-horizontal {
  38             margin: 0 3px 0 2px;
  39
  40             height: 14px;
  41             width: 0px;
  42
  43             border-left: 1px solid $toolbar-separator-color;
  44             border-right: 1px solid $toolbar-separator-highlight-color;
  45         }
  46     }
  47
  48     @if $include-ie {
  49         .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
  50             width: 2px;
  51         }
  52     }
  53
  54     .#{$prefix}toolbar-footer {
  55         background: transparent;
  56         border: 0px none;
  57         margin-top: 3px;
  58
  59         padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;
  60
  61         .#{$prefix}box-inner {
  62             border-width: 0;
  63         }
  64
  65         .#{$prefix}toolbar-item {
  66             margin: 0 $toolbar-footer-horizontal-spacing 0 0;
  67         }
  68     }
  69
  70     .#{$prefix}toolbar-vertical {
  71         padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
  72
  73         .#{$prefix}toolbar-item {
  74             margin: 0 0 $toolbar-horizontal-spacing 0;
  75         }
  76
  77         .#{$prefix}toolbar-text {
  78             margin-top: 4px;
  79             margin-bottom: 6px;
  80         }
  81
  82         .#{$prefix}toolbar-separator-vertical {
  83             margin: 2px 5px 3px 5px;
  84
  85             height: 0px;
  86             width: 10px;
  87             line-height: 0px;
  88
  89             border-top: 1px solid $toolbar-separator-color;
  90             border-bottom: 1px solid $toolbar-separator-highlight-color;
  91         }
  92     }
  93
  94     .#{$prefix}toolbar-scroller {
  95         padding-left: 0;
  96     }
  97
  98     .#{$prefix}toolbar-spacer {
  99         width: $toolbar-spacer-width;
 100     }
 101
 102     // Background for overflow button inserted by the Menu box overflow handler within a toolbar
 103     .#{$prefix}toolbar-more-icon {
 104         background-image: theme-background-image($theme-name, 'toolbar/more.gif') !important;
 105         background-position: 2px center !important;
 106         background-repeat: no-repeat;
 107     }
 108
 109     @include extjs-toolbar-ui(
 110         'default',
 111         $background-color: $toolbar-background-color,
 112         $background-gradient: $toolbar-background-gradient,
 113         $border-color: $toolbar-border-color
 114     );
 115
 116     //plain toolbars have no border
 117     //by default they get no color, so they are transparent. IE6 doesnt support transparent borders
 118     //so we must set the width to 0.
 119     .#{$prefix}toolbar-plain {
 120         border: 0;
 121     }
 122 }
 123
 124 /**
 125  * @mixin ext-toolbar-ui
 126  * @class Ext.toolbar.Toolbar
 127  * @param {String} $ui The name of the UI
 128  * @param {Color} $background-color The background color of the toolbar (defaults to transparent)
 129  * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
 130  * @param {Color} $border-color The border color of the toolbar (defaults to null)
 131  */
 132 @mixin extjs-toolbar-ui(
 133     $ui,
 134
 135     $background-color: transparent,
 136     $background-gradient: null,
 137
 138     $border-color: null
 139 ) {
 140     .#{$prefix}toolbar-#{$ui} {
 141         @if $border-color != null {
 142             border-color: $border-color;
 143         }
 144
 145         @include background-gradient($background-color, $background-gradient);
 146     }
 147
 148     @if not $supports-gradients or $compile-all {
 149         @if $background-gradient != null {
 150             .#{$prefix}nlg {
 151                 .#{$prefix}toolbar-#{$ui} {
 152                     background-image: theme-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
 153                     background-repeat: repeat-x;
 154                 }
 155             }
 156         }
 157     }
 158 }