Revert "[TASK] Migrate to ExtJS 4: Migrate Backend Base Components"
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / extjs / 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-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: $tabbar-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-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
153                     background-repeat: repeat-x;
154                 }
155             }
156         }
157     }
158 }