tinymce-rails 4.4.3 → 4.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/source/tinymce/tinymce.js +2044 -391
  3. data/lib/tinymce/rails/version.rb +2 -2
  4. data/vendor/assets/javascripts/tinymce/jquery.tinymce.js +1 -1
  5. data/vendor/assets/javascripts/tinymce/plugins/advlist/plugin.js +1 -1
  6. data/vendor/assets/javascripts/tinymce/plugins/anchor/plugin.js +1 -1
  7. data/vendor/assets/javascripts/tinymce/plugins/autolink/plugin.js +1 -1
  8. data/vendor/assets/javascripts/tinymce/plugins/autoresize/plugin.js +1 -1
  9. data/vendor/assets/javascripts/tinymce/plugins/autosave/plugin.js +1 -1
  10. data/vendor/assets/javascripts/tinymce/plugins/charmap/plugin.js +1 -1
  11. data/vendor/assets/javascripts/tinymce/plugins/codesample/plugin.dev.js +141 -0
  12. data/vendor/assets/javascripts/tinymce/plugins/codesample/plugin.js +1 -1
  13. data/vendor/assets/javascripts/tinymce/plugins/contextmenu/plugin.js +1 -1
  14. data/vendor/assets/javascripts/tinymce/plugins/fullpage/plugin.js +1 -1
  15. data/vendor/assets/javascripts/tinymce/plugins/fullscreen/plugin.js +1 -1
  16. data/vendor/assets/javascripts/tinymce/plugins/image/plugin.js +1 -1
  17. data/vendor/assets/javascripts/tinymce/plugins/imagetools/plugin.js +1 -1
  18. data/vendor/assets/javascripts/tinymce/plugins/importcss/plugin.js +1 -1
  19. data/vendor/assets/javascripts/tinymce/plugins/insertdatetime/plugin.js +1 -1
  20. data/vendor/assets/javascripts/tinymce/plugins/legacyoutput/plugin.js +1 -1
  21. data/vendor/assets/javascripts/tinymce/plugins/link/plugin.js +1 -1
  22. data/vendor/assets/javascripts/tinymce/plugins/lists/plugin.js +1 -1
  23. data/vendor/assets/javascripts/tinymce/plugins/media/plugin.js +1 -1
  24. data/vendor/assets/javascripts/tinymce/plugins/nonbreaking/plugin.js +1 -1
  25. data/vendor/assets/javascripts/tinymce/plugins/noneditable/plugin.js +1 -1
  26. data/vendor/assets/javascripts/tinymce/plugins/pagebreak/plugin.js +1 -1
  27. data/vendor/assets/javascripts/tinymce/plugins/paste/plugin.dev.js +143 -0
  28. data/vendor/assets/javascripts/tinymce/plugins/paste/plugin.js +1 -1
  29. data/vendor/assets/javascripts/tinymce/plugins/preview/plugin.js +1 -1
  30. data/vendor/assets/javascripts/tinymce/plugins/save/plugin.js +1 -1
  31. data/vendor/assets/javascripts/tinymce/plugins/searchreplace/plugin.js +1 -1
  32. data/vendor/assets/javascripts/tinymce/plugins/spellchecker/plugin.dev.js +139 -0
  33. data/vendor/assets/javascripts/tinymce/plugins/spellchecker/plugin.js +1 -1
  34. data/vendor/assets/javascripts/tinymce/plugins/tabfocus/plugin.js +1 -1
  35. data/vendor/assets/javascripts/tinymce/plugins/table/plugin.dev.js +143 -0
  36. data/vendor/assets/javascripts/tinymce/plugins/table/plugin.js +2 -2
  37. data/vendor/assets/javascripts/tinymce/plugins/template/plugin.js +1 -1
  38. data/vendor/assets/javascripts/tinymce/plugins/textpattern/plugin.js +1 -1
  39. data/vendor/assets/javascripts/tinymce/plugins/toc/plugin.js +1 -0
  40. data/vendor/assets/javascripts/tinymce/plugins/visualchars/plugin.js +1 -1
  41. data/vendor/assets/javascripts/tinymce/plugins/wordcount/plugin.js +1 -1
  42. data/vendor/assets/javascripts/tinymce/skins/lightgray/AbsoluteLayout.less +17 -0
  43. data/vendor/assets/javascripts/tinymce/skins/lightgray/Animations.less +10 -0
  44. data/vendor/assets/javascripts/tinymce/skins/lightgray/Arrows.less +115 -0
  45. data/vendor/assets/javascripts/tinymce/skins/lightgray/Button.less +175 -0
  46. data/vendor/assets/javascripts/tinymce/skins/lightgray/ButtonGroup.less +71 -0
  47. data/vendor/assets/javascripts/tinymce/skins/lightgray/Checkbox.less +49 -0
  48. data/vendor/assets/javascripts/tinymce/skins/lightgray/ColorBox.less +6 -0
  49. data/vendor/assets/javascripts/tinymce/skins/lightgray/ColorButton.less +72 -0
  50. data/vendor/assets/javascripts/tinymce/skins/lightgray/ColorPicker.less +80 -0
  51. data/vendor/assets/javascripts/tinymce/skins/lightgray/ComboBox.less +97 -0
  52. data/vendor/assets/javascripts/tinymce/skins/lightgray/Container.less +9 -0
  53. data/vendor/assets/javascripts/tinymce/skins/lightgray/Content.Inline.less +4 -0
  54. data/vendor/assets/javascripts/tinymce/skins/lightgray/Content.Objects.less +178 -0
  55. data/vendor/assets/javascripts/tinymce/skins/lightgray/Content.less +27 -0
  56. data/vendor/assets/javascripts/tinymce/skins/lightgray/CropRect.less +62 -0
  57. data/vendor/assets/javascripts/tinymce/skins/lightgray/FieldSet.less +15 -0
  58. data/vendor/assets/javascripts/tinymce/skins/lightgray/FitLayout.less +9 -0
  59. data/vendor/assets/javascripts/tinymce/skins/lightgray/FloatPanel.less +69 -0
  60. data/vendor/assets/javascripts/tinymce/skins/lightgray/FlowLayout.less +36 -0
  61. data/vendor/assets/javascripts/tinymce/skins/lightgray/Icons.Ie7.less +136 -0
  62. data/vendor/assets/javascripts/tinymce/skins/lightgray/Icons.less +182 -0
  63. data/vendor/assets/javascripts/tinymce/skins/lightgray/Iframe.less +6 -0
  64. data/vendor/assets/javascripts/tinymce/skins/lightgray/ImagePanel.less +25 -0
  65. data/vendor/assets/javascripts/tinymce/skins/lightgray/InfoBox.less +71 -0
  66. data/vendor/assets/javascripts/tinymce/skins/lightgray/Label.less +38 -0
  67. data/vendor/assets/javascripts/tinymce/skins/lightgray/ListBox.less +26 -0
  68. data/vendor/assets/javascripts/tinymce/skins/lightgray/Menu.less +34 -0
  69. data/vendor/assets/javascripts/tinymce/skins/lightgray/MenuBar.less +32 -0
  70. data/vendor/assets/javascripts/tinymce/skins/lightgray/MenuButton.less +34 -0
  71. data/vendor/assets/javascripts/tinymce/skins/lightgray/MenuItem.less +176 -0
  72. data/vendor/assets/javascripts/tinymce/skins/lightgray/Mixins.less +54 -0
  73. data/vendor/assets/javascripts/tinymce/skins/lightgray/Notification.less +142 -0
  74. data/vendor/assets/javascripts/tinymce/skins/lightgray/Panel.less +7 -0
  75. data/vendor/assets/javascripts/tinymce/skins/lightgray/Path.less +45 -0
  76. data/vendor/assets/javascripts/tinymce/skins/lightgray/Progress.less +34 -0
  77. data/vendor/assets/javascripts/tinymce/skins/lightgray/Radio.less +1 -0
  78. data/vendor/assets/javascripts/tinymce/skins/lightgray/Reset.less +32 -0
  79. data/vendor/assets/javascripts/tinymce/skins/lightgray/ResizeHandle.less +18 -0
  80. data/vendor/assets/javascripts/tinymce/skins/lightgray/Scrollable.less +44 -0
  81. data/vendor/assets/javascripts/tinymce/skins/lightgray/SelectBox.less +6 -0
  82. data/vendor/assets/javascripts/tinymce/skins/lightgray/Sidebar.less +49 -0
  83. data/vendor/assets/javascripts/tinymce/skins/lightgray/Slider.less +33 -0
  84. data/vendor/assets/javascripts/tinymce/skins/lightgray/Spacer.less +5 -0
  85. data/vendor/assets/javascripts/tinymce/skins/lightgray/SplitButton.less +49 -0
  86. data/vendor/assets/javascripts/tinymce/skins/lightgray/StackLayout.less +5 -0
  87. data/vendor/assets/javascripts/tinymce/skins/lightgray/TabPanel.less +44 -0
  88. data/vendor/assets/javascripts/tinymce/skins/lightgray/TextBox.less +41 -0
  89. data/vendor/assets/javascripts/tinymce/skins/lightgray/Throbber.less +19 -0
  90. data/vendor/assets/javascripts/tinymce/skins/lightgray/TinyMCE.less +159 -0
  91. data/vendor/assets/javascripts/tinymce/skins/lightgray/ToolTip.less +133 -0
  92. data/vendor/assets/javascripts/tinymce/skins/lightgray/Variables.less +218 -0
  93. data/vendor/assets/javascripts/tinymce/skins/lightgray/Window.less +127 -0
  94. data/vendor/assets/javascripts/tinymce/skins/lightgray/content.inline.min.css +1 -1
  95. data/vendor/assets/javascripts/tinymce/skins/lightgray/content.min.css +1 -1
  96. data/vendor/assets/javascripts/tinymce/skins/lightgray/fonts/tinymce.eot +0 -0
  97. data/vendor/assets/javascripts/tinymce/skins/lightgray/fonts/tinymce.svg +2 -0
  98. data/vendor/assets/javascripts/tinymce/skins/lightgray/fonts/tinymce.ttf +0 -0
  99. data/vendor/assets/javascripts/tinymce/skins/lightgray/fonts/tinymce.woff +0 -0
  100. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.dev.less +48 -0
  101. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.ie7.dev.less +47 -0
  102. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.ie7.less +2777 -0
  103. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.ie7.min.css +1 -1
  104. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.less +2874 -0
  105. data/vendor/assets/javascripts/tinymce/skins/lightgray/skin.min.css +1 -1
  106. data/vendor/assets/javascripts/tinymce/themes/inlite/theme.js +1 -1
  107. data/vendor/assets/javascripts/tinymce/themes/modern/theme.js +1 -1
  108. data/vendor/assets/javascripts/tinymce/tinymce.js +14 -14
  109. metadata +65 -4
  110. data/vendor/assets/javascripts/tinymce/plugins/media/moxieplayer.swf +0 -0
@@ -0,0 +1,2777 @@
1
+
2
+ // Variables
3
+ // Syntax: <control>-(<sub control>)-<bg|border|text>-(<state>)-(<extra>);
4
+ // Example: @btn-primary-bg-hover-hlight;
5
+
6
+ @prefix: mce;
7
+
8
+ // Default font
9
+ @font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10
+ @font-size: 14px;
11
+ @line-height: 20px;
12
+ @has-gradients: false;
13
+ @has-radius: false;
14
+ @has-boxshadow: false;
15
+ @has-button-borders: false;
16
+
17
+ // Text colors
18
+ @text: #333;
19
+ @text-inverse: white;
20
+ @text-disabled: #aaa;
21
+ @text-shadow: 0 1px 1px hsla(hue(@text-inverse), saturation(@text-inverse), lightness(@text-inverse), 0.75);
22
+ @text-error: #b94a48;
23
+ @text-warning: #c09853;
24
+ @text-success: #468847;
25
+
26
+ // Button
27
+ @btn-text: @text;
28
+ @btn-text-shadow: none;
29
+ @btn-border-top: transparent;
30
+ @btn-border-right: transparent;
31
+ @btn-border-bottom: transparent;
32
+ @btn-border-left: transparent;
33
+ @btn-caret-border: @btn-text;
34
+ @btn-text-disabled: @text-disabled;
35
+ @btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
36
+ @btn-box-shadow-active: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
37
+ @btn-box-disabled-opacity: 0.4;
38
+ @btn-bg: white;
39
+ @btn-bg-hlight: #D9D9D9;
40
+ @btn-bg-hover: darken(@btn-bg, 5%);
41
+ @btn-bg-hlight-hover: darken(@btn-bg-hlight, 5%);
42
+ @btn-border-hover: darken(@btn-bg, 20%);
43
+ @btn-border-active: darken(@btn-bg, 20%);
44
+ @btn-padding: 4px 8px;
45
+
46
+ @btn-primary-bg: #2980b9;
47
+ @btn-primary-bg-hlight: #3498db;
48
+ @btn-primary-bg-hover: darken(@btn-primary-bg, 5%);
49
+ @btn-primary-bg-hover-hlight: darken(@btn-primary-bg-hlight, 5%);
50
+ @btn-primary-text: #fff;
51
+ @btn-primary-text-shadow: none;
52
+ @btn-primary-border-top: mix(@btn-border-top, @btn-primary-bg, 50%);
53
+ @btn-primary-border-right: mix(@btn-border-right, @btn-primary-bg, 50%);
54
+ @btn-primary-border-bottom: mix(@btn-border-bottom, @btn-primary-bg, 50%);
55
+ @btn-primary-border-left: mix(@btn-border-left, @btn-primary-bg, 50%);
56
+ @btn-primary-border: transparent;
57
+ @btn-primary-border-hover: transparent;
58
+
59
+ // Button group
60
+ @btn-group-border-width: 1px;
61
+
62
+ // Menu
63
+ @menuitem-text: @text;
64
+ @menu-bg: #fff;
65
+ @menu-margin: -1px 0 0;
66
+ @menu-border: rgba(0, 0, 0, 0.2);
67
+ @menubar-border: mix(@panel-border, @panel-bg, 60%);
68
+ @menuitem-text-inverse: @text-inverse;
69
+ @menubar-bg-active: darken(@btn-bg, 10%);
70
+ @menuitem-bg-hover: #0081C2;
71
+ @menuitem-bg-selected: #2980b9;
72
+ @menuitem-bg-selected-hlight: #3498db;
73
+ @menuitem-bg-disabled: #CCC;
74
+ @menuitem-caret: @menuitem-text;
75
+ @menuitem-caret-selected: @menuitem-text-inverse;
76
+ @menuitem-separator-top: transparent;
77
+ @menuitem-separator-bottom: rgba(0,0,0,0.1);
78
+ @menuitem-bg-active: #3498db;
79
+ @menuitem-text-active: @text-inverse;
80
+ @menuitem-preview-border-active: #aaa;
81
+ @menubar-menubtn-text: #333;
82
+
83
+ // Panel
84
+ @panel-border: rgba(0,0,0,.2);
85
+ @panel-bg: #FDFDFD;
86
+ @panel-bg-hlight: #DDD;
87
+
88
+ // Tabs
89
+ @tab-border: #c5c5c5;
90
+ @tab-bg: #ffffff;
91
+ @tab-bg-hover: #FDFDFD;
92
+ @tab-bg-active: #FDFDFD;
93
+ @tabs-bg: #FFF;
94
+
95
+ // Tooltip
96
+ @tooltip-bg: #000;
97
+ @tooltip-text: white;
98
+ @tooltip-font-size: 11px;
99
+
100
+ // Notification
101
+ @notification-font-size: 14px;
102
+ @notification-bg: #F0F0F0;
103
+ @notification-border: #CCCCCC;
104
+ @notification-text: #333333;
105
+ @notification-success-bg: #dff0d8;
106
+ @notification-success-border: #d6e9c6;
107
+ @notification-success-text: #3c763d;
108
+ @notification-info-bg: #d9edf7;
109
+ @notification-info-border: #779ECB;
110
+ @notification-info-text: #31708f;
111
+ @notification-warning-bg: #fcf8e3;
112
+ @notification-warning-border: #faebcc;
113
+ @notification-warning-text: #8a6d3b;
114
+ @notification-error-bg: #f2dede;
115
+ @notification-error-border: #ebccd1;
116
+ @notification-error-text: #a94442;
117
+
118
+ // Infobox
119
+ @infobox-bg: @notification-bg;
120
+ @infobox-border: @notification-border;
121
+ @infobox-text: @notification-text;
122
+ @infobox-success-bg: @notification-success-bg;
123
+ @infobox-success-border: @notification-success-border;
124
+ @infobox-success-text: @notification-success-text;
125
+ @infobox-info-bg: @notification-info-bg;
126
+ @infobox-info-border: @notification-info-border;
127
+ @infobox-info-text: @notification-info-text;
128
+ @infobox-warning-bg: @notification-warning-bg;
129
+ @infobox-warning-border: @notification-warning-border;
130
+ @infobox-warning-text: @notification-warning-text;
131
+ @infobox-error-bg: @notification-error-bg;
132
+ @infobox-error-border: @notification-error-border;
133
+ @infobox-error-text: @notification-error-text;
134
+
135
+ // Window
136
+ @window-border: #c5c5c5;
137
+ @window-head-border: @window-border;
138
+ @window-head-close: mix(@text, @window-bg, 60%);
139
+ @window-head-close-hover: mix(@text, @window-bg, 40%);
140
+ @window-foot-border: @window-border;
141
+ @window-foot-bg: @window-bg;
142
+ @window-fullscreen-bg: #FFF;
143
+ @window-modalblock-bg: #000;
144
+ @window-modalblock-opacity: 0.3;
145
+ @window-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
146
+ @window-bg: #FFF;
147
+ @window-title-font-size: 20px;
148
+
149
+ // Popover
150
+ @popover-bg: @window-bg;
151
+ @popover-arrow-width: 10px;
152
+ @popover-arrow: @window-bg;
153
+ @popover-arrow-outer-width: @popover-arrow-width + 1;
154
+ @popover-arrow-outer: rgba(0, 0, 0, 0.25);
155
+
156
+ // Floatpanel
157
+ @floatpanel-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
158
+
159
+ // Checkbox
160
+ @checkbox-bg: @btn-bg;
161
+ @checkbox-bg-hlight: @btn-bg-hlight;
162
+ @checkbox-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
163
+ @checkbox-border: #c5c5c5;
164
+ @checkbox-border-focus: rgba(82, 168, 236, .8);
165
+
166
+ // Path
167
+ @path-text: @text;
168
+ @path-bg-focus: #666;
169
+ @path-text-focus: #fff;
170
+
171
+ // Textbox
172
+ @textbox-text-placeholder: #aaa;
173
+ @textbox-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
174
+ @textbox-bg: #fff;
175
+ @textbox-border: #c5c5c5;
176
+ @textbox-border-focus: #3498db;
177
+
178
+ // Selectbox
179
+ @selectbox-bg: @textbox-bg;
180
+ @selectbox-border: @textbox-border;
181
+
182
+ // Throbber
183
+ @throbber-bg: #fff url('img/loader.gif') no-repeat center center;
184
+
185
+ // Combobox
186
+ @combobox-border: @textbox-border;
187
+ @combobox-error-text: @text-error;
188
+ @combobox-warning-text: @text-warning;
189
+ @combobox-success-text: @text-success;
190
+
191
+ // Colorpicker
192
+ @colorpicker-border: @textbox-border;
193
+ @colorpicker-hue-bg: #fff;
194
+ @colorpicker-hue-border: #333;
195
+
196
+ // Grid
197
+ @grid-bg-active: @menuitem-bg-active;
198
+ @grid-border-active: @menuitem-bg-active;
199
+ @grid-border: #d6d6d6;
200
+
201
+ // Misc
202
+ @colorbtn-backcolor-bg: #BBB;
203
+ @iframe-border: @panel-border;
204
+
205
+ // Slider
206
+ @slider-border: #AAA;
207
+ @slider-bg: #EEE;
208
+ @slider-handle-border: #BBB;
209
+ @slider-handle-bg: #DDD;
210
+ @slider-handle-bg-focus: #BBB;
211
+
212
+ // Progress
213
+ @progress-border: #ccc;
214
+ @progress-bar-bg: #dfdfdf;
215
+ @progress-bar-bg-hlight: #cccccc;
216
+ @progress-text: @text;
217
+
218
+ // Flow layout
219
+ @flow-layout-spacing: 2px;
220
+
221
+
222
+ // Reset
223
+
224
+ .@{prefix}-container, .@{prefix}-container *, .@{prefix}-widget, .@{prefix}-widget *, .@{prefix}-reset {
225
+ margin: 0; padding: 0; border: 0; outline: 0;
226
+ vertical-align: top; background: transparent;
227
+ text-decoration: none; color: @text;
228
+ font-family: @font-family;
229
+ font-size: @font-size; text-shadow: none; float: none;
230
+ position: static; width: auto; height: auto;
231
+ white-space: nowrap; cursor: inherit;
232
+ -webkit-tap-highlight-color: transparent;
233
+ line-height: normal; font-weight: normal;
234
+ text-align: left;
235
+ -moz-box-sizing: content-box;
236
+ -webkit-box-sizing: content-box;
237
+ box-sizing: content-box;
238
+ direction: ltr;
239
+ max-width: none;
240
+ }
241
+
242
+ .@{prefix}-widget button {
243
+ -moz-box-sizing: border-box;
244
+ -webkit-box-sizing: border-box;
245
+ box-sizing: border-box;
246
+ }
247
+
248
+ .@{prefix}-container *[unselectable] {
249
+ -moz-user-select: none;
250
+ -webkit-user-select: none;
251
+ -o-user-select: none;
252
+ user-select: none;
253
+ }
254
+
255
+
256
+ // Mixins
257
+
258
+ .opacity(@opacity) {
259
+ opacity: @opacity;
260
+ @opacityie: @opacity * 100;
261
+ filter: ~"alpha(opacity=@{opacityie})";
262
+ zoom: 1;
263
+ }
264
+
265
+ .vertical-gradient(@startColor, @endColor) when (@has-gradients = true) {
266
+ background-color: mix(@startColor, @endColor, 60%);
267
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
268
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
269
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
270
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
271
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
272
+ background-repeat: repeat-x;
273
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", argb(@startColor), argb(@endColor)));
274
+ zoom: 1;
275
+ }
276
+
277
+ .vertical-gradient(@startColor, @endColor) when (@has-gradients = false) {
278
+ background-color: mix(@startColor, @endColor, 60%);
279
+ }
280
+
281
+ .border-radius(@radius) when (@has-radius = true) {
282
+ -webkit-border-radius: @radius;
283
+ -moz-border-radius: @radius;
284
+ border-radius: @radius;
285
+ }
286
+
287
+ .box-shadow(@shadowA, @shadowB:X, ...) when (@has-boxshadow = true) {
288
+ // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
289
+ @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
290
+ -webkit-box-shadow: @props;
291
+ -moz-box-shadow: @props;
292
+ box-shadow: @props;
293
+ }
294
+
295
+ .transition(@transition) {
296
+ -webkit-transition: @transition;
297
+ transition: @transition;
298
+ }
299
+
300
+ .inline-block() {
301
+ display: inline-block;
302
+ *display: inline;
303
+ *zoom: 1;
304
+ }
305
+
306
+ .reset-gradient() {
307
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
308
+ background: transparent;
309
+ }
310
+
311
+
312
+ // Animations
313
+
314
+ .@{prefix}-fade {
315
+ opacity: 0;
316
+ .transition(opacity .15s linear);
317
+
318
+ &.@{prefix}-in {
319
+ opacity: 1;
320
+ }
321
+ }
322
+
323
+
324
+ .@{prefix}-tinymce {
325
+ // Avoid FOUC
326
+ visibility: inherit !important;
327
+ position: relative;
328
+ }
329
+
330
+ .@{prefix}-fullscreen {
331
+ border: 0; padding: 0; margin: 0;
332
+ overflow: hidden;
333
+ height: 100%;
334
+ z-index: 100;
335
+ }
336
+
337
+ div.@{prefix}-fullscreen {
338
+ position: fixed;
339
+ top: 0; left: 0;
340
+ width: 100%;
341
+ height: auto;
342
+ }
343
+
344
+ .@{prefix}-tinymce {
345
+ display: block;
346
+ .border-radius(2px);
347
+ }
348
+
349
+ .@{prefix}-wordcount {
350
+ position: absolute;
351
+ top: 0;
352
+ right: 0;
353
+ padding: 8px;
354
+ }
355
+
356
+ div.@{prefix}-edit-area {
357
+ background: #FFF;
358
+ filter: none;
359
+ }
360
+
361
+ .@{prefix}-statusbar {
362
+ position: relative;
363
+ }
364
+
365
+ .@{prefix}-statusbar .@{prefix}-container-body {
366
+ position: relative;
367
+ }
368
+
369
+ .@{prefix}-fullscreen .@{prefix}-resizehandle {
370
+ display: none;
371
+ }
372
+
373
+ // Charmap
374
+
375
+ .@{prefix}-charmap {
376
+ border-collapse: collapse;
377
+ }
378
+
379
+ .@{prefix}-charmap td {
380
+ cursor: default;
381
+ border: 1px solid @panel-border;
382
+ width: 20px;
383
+ height: 20px;
384
+ line-height: 20px;
385
+ text-align: center;
386
+ vertical-align: middle;
387
+ padding: 2px;
388
+ }
389
+
390
+ .@{prefix}-charmap td div {
391
+ text-align: center;
392
+ }
393
+
394
+ .@{prefix}-charmap td:hover {
395
+ background: @btn-bg-hlight;
396
+ }
397
+
398
+ .@{prefix}-grid td.@{prefix}-grid-cell div {
399
+ border: 1px solid @grid-border;
400
+ width: 15px; height: 15px;
401
+ margin: 0px;
402
+ cursor: pointer;
403
+
404
+ &:focus {
405
+ border-color: @grid-border-active;
406
+ }
407
+
408
+ &[disabled] {
409
+ cursor: not-allowed;
410
+ }
411
+ }
412
+
413
+ .@{prefix}-grid {
414
+ border-spacing: 2px;
415
+ border-collapse: separate;
416
+
417
+ a {
418
+ display: block;
419
+ border: 1px solid transparent;
420
+
421
+ &:hover, &:focus {
422
+ border-color: @grid-border-active;
423
+ }
424
+ }
425
+ }
426
+
427
+ .@{prefix}-grid-border {
428
+ margin: 0 4px 0 4px;
429
+
430
+ a {
431
+ border-color: @grid-border;
432
+ width: 13px; height: 13px;
433
+ }
434
+
435
+ a:hover, a.@{prefix}-active {
436
+ border-color: @grid-border-active;
437
+ background: @grid-bg-active;
438
+ }
439
+ }
440
+
441
+ .@{prefix}-text-center {
442
+ text-align: center;
443
+ }
444
+
445
+ div.@{prefix}-tinymce-inline {
446
+ width: 100%;
447
+ .box-shadow(none);
448
+ }
449
+
450
+ .@{prefix}-colorbtn-trans div {
451
+ text-align: center;
452
+ vertical-align: middle;
453
+ font-weight: bold;
454
+ font-size: 20px;
455
+ line-height: 16px;
456
+ color: mix(@text, #fff, 70%);
457
+ }
458
+
459
+ .@{prefix}-monospace {
460
+ font-family: "Courier New", Courier, monospace;
461
+ }
462
+
463
+ // Reduce double margins between toolbar rows
464
+
465
+ .@{prefix}-toolbar-grp when (@has-button-borders = false) {
466
+ padding: @flow-layout-spacing 0;
467
+ }
468
+
469
+ .@{prefix}-toolbar-grp when (@has-button-borders = true) {
470
+ padding-bottom: 2px;
471
+ }
472
+
473
+ .@{prefix}-toolbar-grp .@{prefix}-flow-layout-item {
474
+ margin-bottom: 0;
475
+ }
476
+
477
+ // RTL
478
+
479
+ .@{prefix}-rtl .@{prefix}-wordcount {
480
+ left: 0;
481
+ right: auto;
482
+ }
483
+
484
+
485
+ // CropRect
486
+
487
+ .@{prefix}-croprect-container {
488
+ position: absolute;
489
+ top: 0;
490
+ left: 0;
491
+ }
492
+
493
+ .@{prefix}-croprect-handle {
494
+ position: absolute;
495
+ top: 0; left: 0;
496
+ width: 20px; height: 20px;
497
+ border: 2px solid white;
498
+ }
499
+
500
+ .@{prefix}-croprect-handle-nw {
501
+ border-width: 2px 0 0 2px;
502
+ margin: -2px 0 0 -2px;
503
+ cursor: nw-resize;
504
+ top: 100px; left: 100px;
505
+ }
506
+
507
+ .@{prefix}-croprect-handle-ne {
508
+ border-width: 2px 2px 0 0;
509
+ margin: -2px 0 0 -20px;
510
+ cursor: ne-resize;
511
+ top: 100px; left: 200px;
512
+ }
513
+
514
+ .@{prefix}-croprect-handle-sw {
515
+ border-width: 0 0 2px 2px;
516
+ margin: -20px 2px 0 -2px;
517
+ cursor: sw-resize;
518
+ top: 200px; left: 100px;
519
+ }
520
+
521
+ .@{prefix}-croprect-handle-se {
522
+ border-width: 0 2px 2px 0;
523
+ margin: -20px 0 0 -20px;
524
+ cursor: se-resize;
525
+ top: 200px; left: 200px;
526
+ }
527
+
528
+ .@{prefix}-croprect-handle-move {
529
+ position: absolute;
530
+ cursor: move;
531
+ border: 0;
532
+ }
533
+
534
+ .@{prefix}-croprect-block {
535
+ .opacity(@window-modalblock-opacity);
536
+ position: absolute;
537
+ background: black;
538
+ }
539
+
540
+ .@{prefix}-croprect-handle:focus {
541
+ border-color: @textbox-border-focus;
542
+ }
543
+
544
+ .@{prefix}-croprect-handle-move:focus {
545
+ outline: 1px solid @textbox-border-focus;
546
+ }
547
+
548
+
549
+ // ImagePanel
550
+
551
+ .@{prefix}-imagepanel {
552
+ overflow: auto;
553
+ background: black;
554
+ }
555
+
556
+ .@{prefix}-imagepanel-bg {
557
+ position: absolute;
558
+ background: url('data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==');
559
+ }
560
+
561
+ .@{prefix}-imagepanel img {
562
+ position: absolute;
563
+ }
564
+
565
+ .@{prefix}-imagetool.@{prefix}-btn .@{prefix}-ico {
566
+ display: block;
567
+ width: 20px;
568
+ height: 20px;
569
+ text-align: center;
570
+ line-height: 20px;
571
+ font-size: 20px;
572
+ padding: 5px;
573
+ }
574
+
575
+
576
+ // Arrows
577
+
578
+ .@{prefix}-arrow-up {
579
+ margin-top: 12px;
580
+ }
581
+
582
+ .@{prefix}-arrow-down {
583
+ margin-top: -12px;
584
+ }
585
+
586
+ .@{prefix}-arrow:before,
587
+ .@{prefix}-arrow:after {
588
+ position: absolute;
589
+ left: 50%;
590
+ display: block;
591
+ width: 0;
592
+ height: 0;
593
+ border-style: solid;
594
+ border-color: transparent;
595
+ content: "";
596
+ }
597
+
598
+ .@{prefix}-arrow.@{prefix}-arrow-up:before {
599
+ top: -9px;
600
+ border-bottom-color: @panel-border;
601
+ border-width: 0 9px 9px;
602
+ margin-left: -9px;
603
+ }
604
+
605
+ .@{prefix}-arrow.@{prefix}-arrow-down:before {
606
+ bottom: -9px;
607
+ border-top-color: @panel-border;
608
+ border-width: 9px 9px 0;
609
+ margin-left: -9px;
610
+ }
611
+
612
+ .@{prefix}-arrow.@{prefix}-arrow-up:after {
613
+ top: -8px;
614
+ border-bottom-color: mix(@panel-bg, @panel-bg-hlight, 60%);
615
+ border-width: 0 8px 8px;
616
+ margin-left: -8px;
617
+ }
618
+
619
+ .@{prefix}-arrow.@{prefix}-arrow-down:after {
620
+ bottom: -8px;
621
+ border-top-color: mix(@panel-bg, @panel-bg-hlight, 60%);
622
+ border-width: 8px 8px 0;
623
+ margin-left: -8px;
624
+ }
625
+
626
+ .@{prefix}-arrow.@{prefix}-arrow-left:before,
627
+ .@{prefix}-arrow.@{prefix}-arrow-left:after {
628
+ margin: 0;
629
+ }
630
+
631
+ .@{prefix}-arrow.@{prefix}-arrow-left:before {
632
+ left: 8px;
633
+ }
634
+ .@{prefix}-arrow.@{prefix}-arrow-left:after {
635
+ left: 9px;
636
+ }
637
+
638
+ .@{prefix}-arrow.@{prefix}-arrow-right:before,
639
+ .@{prefix}-arrow.@{prefix}-arrow-right:after {
640
+ left: auto;
641
+ margin: 0;
642
+ }
643
+
644
+ .@{prefix}-arrow.@{prefix}-arrow-right:before {
645
+ right: 8px;
646
+ }
647
+
648
+ .@{prefix}-arrow.@{prefix}-arrow-right:after {
649
+ right: 9px;
650
+ }
651
+
652
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-left:before {
653
+ left: -9px;
654
+ top: 50%;
655
+ border-right-color: @panel-border;
656
+ border-width: 9px 9px 9px 0;
657
+ margin-top: -9px;
658
+ }
659
+
660
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-left:after {
661
+ left: -8px;
662
+ top: 50%;
663
+ border-right-color: mix(@panel-bg, @panel-bg-hlight, 60%);
664
+ border-width: 8px 8px 8px 0;
665
+ margin-top: -8px;
666
+ }
667
+
668
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-left {
669
+ margin-left: 12px;
670
+ }
671
+
672
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-right:before {
673
+ right: -9px;
674
+ top: 50%;
675
+ border-left-color: @panel-border;
676
+ border-width: 9px 0 9px 9px;
677
+ margin-top: -9px;
678
+ }
679
+
680
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-right:after {
681
+ right: -8px;
682
+ top: 50%;
683
+ border-left-color: mix(@panel-bg, @panel-bg-hlight, 60%);
684
+ border-width: 8px 0 8px 8px;
685
+ margin-top: -8px;
686
+ }
687
+
688
+ .@{prefix}-arrow.@{prefix}-arrow-center.@{prefix}-arrow.@{prefix}-arrow-right {
689
+ margin-left: -14px;
690
+ }
691
+
692
+
693
+ // Container
694
+
695
+ .@{prefix}-container, .@{prefix}-container-body {
696
+ display: block;
697
+ }
698
+
699
+ .@{prefix}-autoscroll {
700
+ overflow: hidden;
701
+ }
702
+
703
+
704
+ // Scrollbar
705
+
706
+ .@{prefix}-scrollbar {
707
+ position: absolute;
708
+ width: 7px;
709
+ height: 100%;
710
+ top: 2px;
711
+ right: 2px;
712
+ .opacity(0.4);
713
+ }
714
+
715
+ .@{prefix}-scrollbar-h {
716
+ top: auto;
717
+ right: auto;
718
+ left: 2px;
719
+ bottom: 2px;
720
+ width: 100%;
721
+ height: 7px;
722
+ }
723
+
724
+ .@{prefix}-scrollbar-thumb {
725
+ position: absolute;
726
+ background-color: #000;
727
+ border: 1px solid #888;
728
+ border-color: rgba(85, 85, 85, .6);
729
+ width: 5px;
730
+ height: 100%;
731
+ .border-radius(7px);
732
+ }
733
+
734
+ .@{prefix}-scrollbar-h .@{prefix}-scrollbar-thumb {
735
+ width: 100%;
736
+ height: 5px;
737
+ }
738
+
739
+ .@{prefix}-scrollbar:hover, .@{prefix}-scrollbar.@{prefix}-active {
740
+ background-color: #AAA;
741
+ .opacity(0.6);
742
+ .border-radius(7px);
743
+ }
744
+
745
+ .@{prefix}-scroll {
746
+ position: relative;
747
+ }
748
+
749
+
750
+ // Panel
751
+
752
+ .@{prefix}-panel {
753
+ border: 0 solid mix(rgb(red(@panel-border), green(@panel-border), blue(@panel-border)), @panel-bg, 20%);
754
+ border: 0 solid @panel-border;
755
+ .vertical-gradient(@panel-bg, @panel-bg-hlight);
756
+ }
757
+
758
+
759
+ // FloatPanel
760
+
761
+ .@{prefix}-floatpanel {
762
+ position: absolute;
763
+ .box-shadow(@floatpanel-box-shadow);
764
+ }
765
+
766
+ .@{prefix}-floatpanel.@{prefix}-fixed {
767
+ position: fixed;
768
+ }
769
+
770
+ // Popover panel
771
+
772
+ .@{prefix}-floatpanel .@{prefix}-arrow,
773
+ .@{prefix}-floatpanel .@{prefix}-arrow:after {
774
+ position: absolute;
775
+ display: block;
776
+ width: 0;
777
+ height: 0;
778
+ border-color: transparent;
779
+ border-style: solid;
780
+ }
781
+
782
+ .@{prefix}-floatpanel .@{prefix}-arrow {
783
+ border-width: @popover-arrow-outer-width;
784
+ }
785
+
786
+ .@{prefix}-floatpanel .@{prefix}-arrow:after {
787
+ border-width: @popover-arrow-width;
788
+ content: "";
789
+ }
790
+
791
+ .@{prefix}-floatpanel.@{prefix}-popover {
792
+ .reset-gradient();
793
+ .border-radius(6px);
794
+ .box-shadow(@floatpanel-box-shadow);
795
+ top: 0;
796
+ left: 0;
797
+ background: @popover-bg;
798
+ border: 1px solid @panel-border;
799
+ border: 1px solid @popover-arrow-outer;
800
+
801
+ &.@{prefix}-bottom {
802
+ margin-top: @popover-arrow-width;
803
+ *margin-top: 0;
804
+
805
+ & > .@{prefix}-arrow {
806
+ left: 50%;
807
+ margin-left: -@popover-arrow-outer-width;
808
+ border-top-width: 0;
809
+ border-bottom-color: @panel-border;
810
+ border-bottom-color: @popover-arrow-outer;
811
+ top: -@popover-arrow-outer-width;
812
+
813
+ &:after {
814
+ top: 1px;
815
+ margin-left: -@popover-arrow-width;
816
+ border-top-width: 0;
817
+ border-bottom-color: @popover-arrow;
818
+ }
819
+ }
820
+
821
+ &.@{prefix}-start { margin-left: -22px; }
822
+ &.@{prefix}-start > .@{prefix}-arrow { left: 20px; }
823
+
824
+ &.@{prefix}-end { margin-left: 22px; }
825
+ &.@{prefix}-end > .@{prefix}-arrow { right: 10px; left: auto; }
826
+ }
827
+ }
828
+
829
+ // Window
830
+
831
+ .@{prefix}-fullscreen {
832
+ border: 0; padding: 0; margin: 0;
833
+ overflow: hidden;
834
+ height: 100%;
835
+ }
836
+
837
+ div.@{prefix}-fullscreen {
838
+ position: fixed;
839
+ top: 0; left: 0;
840
+ }
841
+
842
+ #@{prefix}-modal-block {
843
+ .opacity(0);
844
+ position: fixed;
845
+ left: 0; top: 0;
846
+ width: 100%; height: 100%;
847
+ background: @window-modalblock-bg;
848
+ }
849
+
850
+ #@{prefix}-modal-block.@{prefix}-in {
851
+ .opacity(@window-modalblock-opacity);
852
+ }
853
+
854
+ .@{prefix}-window-move {
855
+ cursor: move;
856
+ }
857
+
858
+ .@{prefix}-window {
859
+ .border-radius(6px);
860
+ .box-shadow(@window-box-shadow);
861
+ .reset-gradient();
862
+ background: @window-bg;
863
+ position: fixed;
864
+ top: 0; left: 0;
865
+ opacity: 0;
866
+ transform: scale(0.1);
867
+ transition: transform 100ms ease-in, opacity 150ms ease-in;
868
+ }
869
+
870
+ .@{prefix}-window.@{prefix}-in {
871
+ transform: scale(1);
872
+ opacity: 1;
873
+ }
874
+
875
+ .@{prefix}-window-head {
876
+ padding: 9px 15px;
877
+ border-bottom: 1px solid @window-head-border;
878
+ position: relative;
879
+ }
880
+
881
+ .@{prefix}-window-head .@{prefix}-close {
882
+ position: absolute;
883
+ right: 0;
884
+ top: 0;
885
+ height: 38px;
886
+ width: 38px;
887
+ text-align: center;
888
+ cursor: pointer;
889
+
890
+ i {
891
+ color: @window-head-close;
892
+ }
893
+ }
894
+
895
+ .@{prefix}-close:hover i {
896
+ color: @window-head-close-hover;
897
+ }
898
+
899
+ .@{prefix}-window-head .@{prefix}-title {
900
+ line-height: 20px;
901
+ font-size: @window-title-font-size;
902
+ font-weight: bold;
903
+ text-rendering: optimizelegibility;
904
+ padding-right: 20px;
905
+ }
906
+
907
+ .@{prefix}-window .@{prefix}-container-body {
908
+ display: block;
909
+ }
910
+
911
+ .@{prefix}-foot {
912
+ display: block;
913
+ background-color: @window-foot-bg;
914
+ border-top: 1px solid @window-foot-border;
915
+ .border-radius(0 0 6px 6px);
916
+ }
917
+
918
+ .@{prefix}-window-head .@{prefix}-dragh {
919
+ position: absolute;
920
+ top: 0; left: 0;
921
+ cursor: move;
922
+ width: 90%;
923
+ height: 100%;
924
+ }
925
+
926
+ .@{prefix}-window iframe {
927
+ width: 100%;
928
+ height: 100%;
929
+ }
930
+
931
+ .@{prefix}-window.@{prefix}-fullscreen, .@{prefix}-window.@{prefix}-fullscreen .@{prefix}-foot {
932
+ .border-radius(0);
933
+ }
934
+
935
+ .@{prefix}-window-body .@{prefix}-listbox {
936
+ border-color: @btn-border-hover;
937
+ }
938
+
939
+ // RTL
940
+
941
+ .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-close {
942
+ position: absolute;
943
+ right: auto;
944
+ left: 15px;
945
+ }
946
+
947
+ .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-dragh {
948
+ left: auto;
949
+ right: 0;
950
+ }
951
+
952
+ .@{prefix}-rtl .@{prefix}-window-head .@{prefix}-title {
953
+ direction: rtl;
954
+ text-align: right;
955
+ }
956
+
957
+
958
+ // Tooltip
959
+
960
+ .@{prefix}-tooltip {
961
+ position: absolute;
962
+ padding: 5px;
963
+ .opacity(0.8);
964
+ }
965
+
966
+ .@{prefix}-tooltip-inner {
967
+ font-size: @tooltip-font-size;
968
+ background-color: @tooltip-bg;
969
+ color: @tooltip-text;
970
+ max-width: 200px;
971
+ padding: 5px 8px 4px 8px;
972
+ text-align: center;
973
+ white-space: normal;
974
+ }
975
+
976
+ .@{prefix}-tooltip-inner {
977
+ .border-radius(3px);
978
+ }
979
+
980
+ .@{prefix}-tooltip-inner {
981
+ .box-shadow(0 0 5px @tooltip-bg);
982
+ }
983
+
984
+ .@{prefix}-tooltip-arrow {
985
+ position: absolute;
986
+ width: 0;
987
+ height: 0;
988
+ line-height: 0;
989
+ border: 5px dashed @tooltip-bg;
990
+ }
991
+
992
+ .@{prefix}-tooltip-arrow-n {
993
+ border-bottom-color: @tooltip-bg;
994
+ }
995
+
996
+ .@{prefix}-tooltip-arrow-s {
997
+ border-top-color: @tooltip-bg;
998
+ }
999
+
1000
+ .@{prefix}-tooltip-arrow-e {
1001
+ border-left-color: @tooltip-bg;
1002
+ }
1003
+
1004
+ .@{prefix}-tooltip-arrow-w {
1005
+ border-right-color: @tooltip-bg;
1006
+ }
1007
+
1008
+ .@{prefix}-tooltip-nw, .@{prefix}-tooltip-sw {
1009
+ margin-left: -14px;
1010
+ }
1011
+
1012
+ .@{prefix}-tooltip-ne, .@{prefix}-tooltip-se {
1013
+ margin-left: 14px;
1014
+ }
1015
+
1016
+ .@{prefix}-tooltip-n .@{prefix}-tooltip-arrow {
1017
+ top: 0px;
1018
+ left: 50%;
1019
+ margin-left: -5px;
1020
+ border-bottom-style: solid;
1021
+ border-top: none;
1022
+ border-left-color: transparent;
1023
+ border-right-color: transparent;
1024
+ }
1025
+
1026
+ .@{prefix}-tooltip-nw .@{prefix}-tooltip-arrow {
1027
+ top: 0;
1028
+ left: 10px;
1029
+ border-bottom-style: solid;
1030
+ border-top: none;
1031
+ border-left-color: transparent;
1032
+ border-right-color: transparent;
1033
+ }
1034
+
1035
+ .@{prefix}-tooltip-ne .@{prefix}-tooltip-arrow {
1036
+ top: 0;
1037
+ right: 10px;
1038
+ border-bottom-style: solid;
1039
+ border-top: none;
1040
+ border-left-color: transparent;
1041
+ border-right-color: transparent;
1042
+ }
1043
+
1044
+ .@{prefix}-tooltip-s .@{prefix}-tooltip-arrow {
1045
+ bottom: 0;
1046
+ left: 50%;
1047
+ margin-left: -5px;
1048
+ border-top-style: solid;
1049
+ border-bottom: none;
1050
+ border-left-color: transparent;
1051
+ border-right-color: transparent;
1052
+ }
1053
+
1054
+ .@{prefix}-tooltip-sw .@{prefix}-tooltip-arrow {
1055
+ bottom: 0;
1056
+ left: 10px;
1057
+ border-top-style: solid;
1058
+ border-bottom: none;
1059
+ border-left-color: transparent;
1060
+ border-right-color: transparent;
1061
+ }
1062
+
1063
+ .@{prefix}-tooltip-se .@{prefix}-tooltip-arrow {
1064
+ bottom: 0;
1065
+ right: 10px;
1066
+ border-top-style: solid;
1067
+ border-bottom: none;
1068
+ border-left-color: transparent;
1069
+ border-right-color: transparent;
1070
+ }
1071
+
1072
+ .@{prefix}-tooltip-e .@{prefix}-tooltip-arrow {
1073
+ right: 0;
1074
+ top: 50%;
1075
+ margin-top: -5px;
1076
+ border-left-style: solid;
1077
+ border-right: none;
1078
+ border-top-color: transparent;
1079
+ border-bottom-color: transparent;
1080
+ }
1081
+
1082
+ .@{prefix}-tooltip-w .@{prefix}-tooltip-arrow {
1083
+ left: 0;
1084
+ top: 50%;
1085
+ margin-top: -5px;
1086
+ border-right-style: solid;
1087
+ border-left: none;
1088
+ border-top-color: transparent;
1089
+ border-bottom-color: transparent;
1090
+ }
1091
+
1092
+
1093
+ // Progress
1094
+
1095
+ .@{prefix}-progress {
1096
+ display: inline-block;
1097
+ position: relative;
1098
+ height: 20px;
1099
+ }
1100
+
1101
+ .@{prefix}-progress .@{prefix}-bar-container {
1102
+ display: inline-block;
1103
+ width: 100px;
1104
+ height: 100%;
1105
+ margin-right: 8px;
1106
+ border: 1px solid @progress-border;
1107
+ overflow: hidden;
1108
+ .border-radius(4px);
1109
+ }
1110
+
1111
+ .@{prefix}-progress .@{prefix}-text {
1112
+ display: inline-block;
1113
+ margin-top: auto;
1114
+ margin-bottom: auto;
1115
+ font-size: 14px;
1116
+ width: 40px;
1117
+ color: @progress-text;
1118
+ }
1119
+
1120
+ .@{prefix}-bar {
1121
+ display: block;
1122
+ width: 0%;
1123
+ height: 100%;
1124
+ .vertical-gradient(@progress-bar-bg, @progress-bar-bg-hlight);
1125
+ .transition(width .2s ease);
1126
+ }
1127
+
1128
+
1129
+ // notification
1130
+
1131
+ .@{prefix}-notification {
1132
+ position: absolute;
1133
+ background-color: @notification-bg;
1134
+ padding: 5px;
1135
+ margin-top: 5px;
1136
+ border-width: 1px;
1137
+ border-style: solid;
1138
+ border-color: @notification-border;
1139
+ transition: transform 100ms ease-in, opacity 150ms ease-in;
1140
+ opacity: 0;
1141
+ }
1142
+
1143
+ .@{prefix}-notification.@{prefix}-in {
1144
+ opacity: 1;
1145
+ }
1146
+
1147
+ .@{prefix}-notification-success {
1148
+ background-color: @notification-success-bg;
1149
+ border-color: @notification-success-border;
1150
+ }
1151
+
1152
+ .@{prefix}-notification-info {
1153
+ background-color: @notification-info-bg;
1154
+ border-color: @notification-info-border;
1155
+ }
1156
+
1157
+ .@{prefix}-notification-warning {
1158
+ background-color: @notification-warning-bg;
1159
+ border-color: @notification-warning-border;
1160
+ }
1161
+
1162
+ .@{prefix}-notification-error {
1163
+ background-color: @notification-error-bg;
1164
+ border-color: @notification-error-border;
1165
+ }
1166
+
1167
+ .@{prefix}-notification.@{prefix}-has-close {
1168
+ padding-right: 15px;
1169
+ }
1170
+
1171
+ .@{prefix}-notification .@{prefix}-ico {
1172
+ margin-top: 5px;
1173
+ }
1174
+
1175
+ .@{prefix}-notification-inner {
1176
+ display: inline-block;
1177
+ font-size: @notification-font-size;
1178
+ margin: 5px 8px 4px 8px;
1179
+ text-align: center;
1180
+ white-space: normal;
1181
+ color: @notification-info-text;
1182
+ }
1183
+
1184
+ .@{prefix}-notification-inner a {
1185
+ text-decoration: underline;
1186
+ cursor: pointer;
1187
+ }
1188
+
1189
+ .@{prefix}-notification .@{prefix}-progress {
1190
+ margin-right: 8px;
1191
+ }
1192
+
1193
+ .@{prefix}-notification .@{prefix}-progress .@{prefix}-text {
1194
+ margin-top: 5px;
1195
+ }
1196
+
1197
+ .@{prefix}-notification *, .@{prefix}-notification .@{prefix}-progress .@{prefix}-text {
1198
+ color: @notification-text;
1199
+ }
1200
+
1201
+ .@{prefix}-notification .@{prefix}-progress .@{prefix}-bar-container {
1202
+ border-color: @notification-border;
1203
+ }
1204
+
1205
+ .@{prefix}-notification .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
1206
+ background-color: @notification-text;
1207
+ }
1208
+
1209
+ .@{prefix}-notification-success *, .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-text {
1210
+ color: @notification-success-text;
1211
+ }
1212
+
1213
+ .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-bar-container {
1214
+ border-color: @notification-success-border;
1215
+ }
1216
+
1217
+ .@{prefix}-notification-success .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
1218
+ background-color: @notification-success-text;
1219
+ }
1220
+
1221
+ .@{prefix}-notification-info *, .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-text {
1222
+ color: @notification-info-text;
1223
+ }
1224
+
1225
+ .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-bar-container {
1226
+ border-color: @notification-info-border;
1227
+ }
1228
+
1229
+ .@{prefix}-notification-info .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
1230
+ background-color: @notification-info-text;
1231
+ }
1232
+
1233
+ .@{prefix}-notification-warning *, .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-text {
1234
+ color: @notification-warning-text;
1235
+ }
1236
+
1237
+ .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-bar-container {
1238
+ border-color: @notification-warning-border;
1239
+ }
1240
+
1241
+ .@{prefix}-notification-warning .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
1242
+ background-color: @notification-warning-text;
1243
+ }
1244
+
1245
+ .@{prefix}-notification-error *, .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-text {
1246
+ color: @notification-error-text;
1247
+ }
1248
+
1249
+ .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-bar-container {
1250
+ border-color: @notification-error-border;
1251
+ }
1252
+
1253
+ .@{prefix}-notification-error .@{prefix}-progress .@{prefix}-bar-container .@{prefix}-bar {
1254
+ background-color: @notification-error-text;
1255
+ }
1256
+
1257
+ .@{prefix}-notification .@{prefix}-close {
1258
+ position: absolute;
1259
+ top: 6px;
1260
+ right: 8px;
1261
+ font-size: 20px;
1262
+ font-weight: bold;
1263
+ line-height: 20px;
1264
+ color: @window-head-close;
1265
+ cursor: pointer;
1266
+
1267
+ // IE7
1268
+ height: 20px;
1269
+ overflow: hidden;
1270
+ }
1271
+
1272
+ // AbsoluteLayout
1273
+
1274
+ .@{prefix}-abs-layout {
1275
+ position: relative;
1276
+ }
1277
+
1278
+ body .@{prefix}-abs-layout-item, .@{prefix}-abs-end {
1279
+ position: absolute;
1280
+ }
1281
+
1282
+ .@{prefix}-abs-end {
1283
+ width: 1px; height: 1px;
1284
+ }
1285
+
1286
+ .@{prefix}-container-body.@{prefix}-abs-layout {
1287
+ overflow: hidden;
1288
+ }
1289
+
1290
+
1291
+ // Button
1292
+
1293
+ .@{prefix}-btn {
1294
+ border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
1295
+ border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
1296
+ position: relative;
1297
+ text-shadow: @text-shadow;
1298
+
1299
+ .inline-block();
1300
+ .border-radius(3px);
1301
+ .box-shadow(@btn-box-shadow);
1302
+ .vertical-gradient(@btn-bg, @btn-bg-hlight);
1303
+
1304
+ &:hover, &:focus {
1305
+ color: @btn-text;
1306
+ .vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
1307
+ border-color: @btn-border-hover;
1308
+ }
1309
+
1310
+ &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
1311
+ cursor: default;
1312
+ .box-shadow(none);
1313
+ .opacity(@btn-box-disabled-opacity);
1314
+ }
1315
+
1316
+ &.@{prefix}-active, &.@{prefix}-active:hover {
1317
+ .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
1318
+ .box-shadow(@btn-box-shadow-active);
1319
+ border-color: darken(@btn-bg, 20%);
1320
+ }
1321
+
1322
+ &:active {
1323
+ .vertical-gradient(darken(@btn-bg, 7%), darken(@btn-bg-hlight, 5%));
1324
+ .box-shadow(@btn-box-shadow-active);
1325
+ border-color: @btn-border-active;
1326
+
1327
+ }
1328
+ }
1329
+
1330
+ .@{prefix}-btn button {
1331
+ padding: @btn-padding;
1332
+ font-size: @font-size;
1333
+ line-height: @line-height;
1334
+ *line-height: @line-height - 4px;
1335
+ cursor: pointer;
1336
+ color: @btn-text;
1337
+ text-align: center;
1338
+
1339
+ // Fixes for default inner padding of button
1340
+ overflow: visible; // IE7
1341
+ -webkit-appearance: none; // WebKit
1342
+ &::-moz-focus-inner { // Gecko
1343
+ border: 0;
1344
+ padding: 0;
1345
+ }
1346
+ }
1347
+
1348
+ .@{prefix}-btn i {
1349
+ text-shadow: 1px 1px @btn-text-shadow;
1350
+ }
1351
+
1352
+ .@{prefix}-primary.@{prefix}-btn-has-text {
1353
+ min-width: 50px;
1354
+ }
1355
+
1356
+ .@{prefix}-primary {
1357
+ color: @btn-primary-text;
1358
+ border: 1px solid transparent;
1359
+ border-color: @btn-primary-border;
1360
+ .vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
1361
+
1362
+ &:hover, &:focus {
1363
+ .vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
1364
+ border-color: @btn-primary-border-hover;
1365
+ }
1366
+
1367
+ &.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
1368
+ cursor: default;
1369
+ .box-shadow(none);
1370
+ .opacity(@btn-box-disabled-opacity);
1371
+ }
1372
+
1373
+ &.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
1374
+ .vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
1375
+ .box-shadow(@btn-box-shadow-active);
1376
+ }
1377
+ }
1378
+
1379
+ .@{prefix}-primary button, .@{prefix}-primary button i {
1380
+ color: @btn-primary-text;
1381
+ text-shadow: 1px 1px @btn-primary-text-shadow;
1382
+ }
1383
+
1384
+ .@{prefix}-btn .@{prefix}-txt {
1385
+ font-size: inherit;
1386
+ line-height: inherit;
1387
+ color: inherit;
1388
+ }
1389
+
1390
+ .@{prefix}-btn-large button {
1391
+ padding: 9px 14px;
1392
+ font-size: @font-size + 2px;
1393
+ line-height: normal;
1394
+ .border-radius(5px);
1395
+ }
1396
+
1397
+ .@{prefix}-btn-large i {
1398
+ margin-top: 2px;
1399
+ }
1400
+
1401
+ .@{prefix}-btn-small button {
1402
+ padding: 1px 5px;
1403
+ font-size: @font-size - 2px;
1404
+ *padding-bottom: 2px;
1405
+ }
1406
+
1407
+ .@{prefix}-btn-small i {
1408
+ line-height: 20px;
1409
+ vertical-align: top;
1410
+ *line-height: 18px;
1411
+ }
1412
+
1413
+ .@{prefix}-btn .@{prefix}-caret {
1414
+ margin-top: 8px;
1415
+ margin-left: 0;
1416
+ }
1417
+
1418
+ .@{prefix}-btn-small .@{prefix}-caret {
1419
+ margin-top: 8px;
1420
+ margin-left: 0;
1421
+ }
1422
+
1423
+ .@{prefix}-caret {
1424
+ .inline-block();
1425
+ width: 0; height: 0;
1426
+ vertical-align: top;
1427
+ border-top: 4px solid @btn-caret-border;
1428
+ border-right: 4px solid transparent;
1429
+ border-left: 4px solid transparent;
1430
+ content: "";
1431
+ }
1432
+
1433
+ .@{prefix}-disabled .@{prefix}-caret {
1434
+ border-top-color: @text-disabled;
1435
+ }
1436
+
1437
+ .@{prefix}-caret.@{prefix}-up {
1438
+ border-bottom: 4px solid @btn-caret-border;
1439
+ border-top: 0;
1440
+ }
1441
+
1442
+ .@{prefix}-btn-flat {
1443
+ border: 0;
1444
+ background: transparent;
1445
+ .border-radius(0);
1446
+ .box-shadow(none);
1447
+ filter: none;
1448
+ }
1449
+
1450
+ .@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {
1451
+ border: 0;
1452
+ background: @menubar-bg-active;
1453
+ filter: none;
1454
+ .box-shadow(none);
1455
+ }
1456
+
1457
+ .@{prefix}-btn-has-text .@{prefix}-ico {
1458
+ padding-right: 5px;
1459
+ }
1460
+
1461
+ // RTL
1462
+
1463
+ .@{prefix}-rtl .@{prefix}-btn button {
1464
+ direction: rtl;
1465
+ }
1466
+
1467
+
1468
+ // ButtonGroup
1469
+
1470
+ .btn-group-border-left(@border-color) when (@has-button-borders = true) {
1471
+ border-left: 1px solid @border-color;
1472
+ }
1473
+
1474
+ .btn-group-border-right(@border-color) when (@has-button-borders = true) {
1475
+ border-right: 1px solid @border-color;
1476
+ }
1477
+
1478
+
1479
+ .@{prefix}-btn-group .@{prefix}-btn {
1480
+ border-width: @btn-group-border-width;
1481
+ margin: 0;
1482
+ .border-radius(0);
1483
+ margin-left: @flow-layout-spacing;
1484
+ }
1485
+
1486
+ .@{prefix}-btn-group .@{prefix}-btn when (@has-button-borders = true) {
1487
+ border-left-width: 0;
1488
+ border-right-width: 0;
1489
+ margin-left: 0;
1490
+ }
1491
+
1492
+ .@{prefix}-btn-group:not(:first-child) when (@has-button-borders = true) {
1493
+ padding-left: 1px;
1494
+ margin-left: 1px;
1495
+ }
1496
+
1497
+ .@{prefix}-btn-group:not(:first-child) when (@has-button-borders = false) {
1498
+ border-left: 1px solid darken(@btn-bg, 15%);
1499
+ padding-left: @flow-layout-spacing + 1px;
1500
+ margin-left: @flow-layout-spacing + 1px;
1501
+ }
1502
+
1503
+ .@{prefix}-btn-group .@{prefix}-first {
1504
+ .border-radius(3px 0 0 3px);
1505
+ .btn-group-border-left(@btn-border-left);
1506
+ margin-left: 0;
1507
+ }
1508
+
1509
+ .@{prefix}-btn-group .@{prefix}-last {
1510
+ .border-radius(0 3px 3px 0);
1511
+ .btn-group-border-right(@btn-border-right);
1512
+ }
1513
+
1514
+ .@{prefix}-btn-group .@{prefix}-first.@{prefix}-last {
1515
+ .border-radius(3px);
1516
+ }
1517
+
1518
+ .@{prefix}-btn-group .@{prefix}-btn.@{prefix}-flow-layout-item {
1519
+ margin: 0;
1520
+ }
1521
+
1522
+ // RTL
1523
+
1524
+ .@{prefix}-rtl .@{prefix}-btn-group .@{prefix}-btn {
1525
+ margin-left: 0;
1526
+ margin-right: @flow-layout-spacing;
1527
+ }
1528
+
1529
+ .@{prefix}-rtl .@{prefix}-btn-group .@{prefix}-first {
1530
+ margin-right: 0;
1531
+ }
1532
+
1533
+ .@{prefix}-rtl .@{prefix}-btn-group:not(:first-child) {
1534
+ border-left: none;
1535
+ border-right:1px solid darken(@btn-bg, 15%);
1536
+ padding-right: @flow-layout-spacing + 2px;
1537
+ margin-right: @flow-layout-spacing + 2px;
1538
+ }
1539
+
1540
+
1541
+ // Checkbox
1542
+
1543
+ .@{prefix}-checkbox {
1544
+ cursor: pointer;
1545
+ }
1546
+
1547
+ i.@{prefix}-i-checkbox {
1548
+ margin: 0 3px 0 0;
1549
+ border: 1px solid @checkbox-border;
1550
+ .border-radius(3px);
1551
+ .box-shadow(@checkbox-box-shadow);
1552
+ .vertical-gradient(@checkbox-bg, @checkbox-bg-hlight);
1553
+ text-indent: -10em;
1554
+ *font-size: 0;
1555
+ *line-height: 0;
1556
+ *text-indent: 0;
1557
+ overflow: hidden;
1558
+ }
1559
+
1560
+ .@{prefix}-checked i.@{prefix}-i-checkbox {
1561
+ color: @btn-text;
1562
+ font-size: 16px;
1563
+ line-height: 16px;
1564
+ text-indent: 0;
1565
+ }
1566
+
1567
+ .@{prefix}-checkbox:focus i.@{prefix}-i-checkbox, .@{prefix}-checkbox.@{prefix}-focus i.@{prefix}-i-checkbox {
1568
+ border: 1px solid @checkbox-border-focus;
1569
+ .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@checkbox-border-focus, 15%));
1570
+ }
1571
+
1572
+ .@{prefix}-checkbox.@{prefix}-disabled .@{prefix}-label, .@{prefix}-checkbox.@{prefix}-disabled i.@{prefix}-i-checkbox {
1573
+ color: mix(@text, @panel-bg, 40%);
1574
+ }
1575
+
1576
+ .@{prefix}-checkbox .@{prefix}-label {
1577
+ vertical-align: middle;
1578
+ }
1579
+
1580
+ // RTL
1581
+
1582
+ .@{prefix}-rtl .@{prefix}-checkbox {
1583
+ direction: rtl;
1584
+ text-align: right;
1585
+ }
1586
+
1587
+ .@{prefix}-rtl i.@{prefix}-i-checkbox {
1588
+ margin: 0 0 0 3px;
1589
+ }
1590
+
1591
+
1592
+ // ComboBox
1593
+
1594
+ .@{prefix}-combobox {
1595
+ position: relative;
1596
+ .inline-block();
1597
+ .border-radius(3px);
1598
+ .box-shadow(@textbox-box-shadow);
1599
+ *height: 32px;
1600
+ }
1601
+
1602
+ .@{prefix}-combobox input {
1603
+ border: 1px solid @textbox-border;
1604
+ border-right-color: @combobox-border;
1605
+ height: 28px;
1606
+ }
1607
+
1608
+ .@{prefix}-combobox.@{prefix}-disabled input {
1609
+ color: mix(@text, @textbox-bg, 40%);
1610
+ }
1611
+
1612
+ .@{prefix}-combobox.@{prefix}-has-open input {
1613
+ .border-radius(4px 0 0 4px);
1614
+ }
1615
+
1616
+ .@{prefix}-combobox .@{prefix}-btn {
1617
+ border: 1px solid @textbox-border;
1618
+ border-left: 0;
1619
+ .border-radius(0 4px 4px 0);
1620
+ margin: 0;
1621
+ }
1622
+
1623
+ .@{prefix}-combobox button {
1624
+ padding-right: 8px;
1625
+ padding-left: 8px;
1626
+ }
1627
+
1628
+ .@{prefix}-combobox.@{prefix}-disabled .@{prefix}-btn button {
1629
+ cursor: default;
1630
+ .box-shadow(none);
1631
+ .opacity(@btn-box-disabled-opacity);
1632
+ }
1633
+
1634
+ .@{prefix}-combobox .@{prefix}-status {
1635
+ position: absolute;
1636
+ right: 2px;
1637
+ top: 50%;
1638
+ line-height: 16px;
1639
+ margin-top: -8px;
1640
+ font-size: 12px;
1641
+ width: 15px;
1642
+ height: 15px;
1643
+ text-align: center;
1644
+ cursor: pointer;
1645
+ }
1646
+
1647
+ .@{prefix}-combobox.@{prefix}-has-status input {
1648
+ padding-right: 20px;
1649
+ }
1650
+
1651
+ .@{prefix}-combobox.@{prefix}-has-open .@{prefix}-status {
1652
+ right: 37px;
1653
+ }
1654
+
1655
+ .@{prefix}-combobox .@{prefix}-status.@{prefix}-i-warning {
1656
+ color: @combobox-warning-text;
1657
+ }
1658
+
1659
+ .@{prefix}-combobox .@{prefix}-status.@{prefix}-i-checkmark {
1660
+ color: @combobox-success-text;
1661
+ }
1662
+
1663
+ .@{prefix}-menu.@{prefix}-combobox-menu {
1664
+ border-top: 0;
1665
+ margin-top: 0;
1666
+ max-height: 200px;
1667
+
1668
+ .@{prefix}-menu-item {
1669
+ padding: 4px 6px 4px 4px;
1670
+ font-size: 11px;
1671
+ }
1672
+
1673
+ .@{prefix}-menu-item-sep {
1674
+ padding: 0;
1675
+ }
1676
+
1677
+ .@{prefix}-text {
1678
+ font-size: 11px;
1679
+ }
1680
+
1681
+ .@{prefix}-menu-item-link, .@{prefix}-menu-item-link b {
1682
+ font-size: 11px;
1683
+ }
1684
+
1685
+ .@{prefix}-text b {
1686
+ font-size: 11px;
1687
+ }
1688
+ }
1689
+
1690
+
1691
+ // ColorBox
1692
+
1693
+ .@{prefix}-colorbox i {
1694
+ border: 1px solid @textbox-border;
1695
+ width: 14px; height: 14px;
1696
+ }
1697
+
1698
+
1699
+ // ColorButton
1700
+
1701
+ .@{prefix}-colorbutton .@{prefix}-ico {
1702
+ position: relative;
1703
+ }
1704
+
1705
+ .@{prefix}-colorbutton-grid {
1706
+ margin: 4px;
1707
+ }
1708
+
1709
+ .@{prefix}-colorbutton button {
1710
+ padding-right: 6px;
1711
+ padding-left: 6px;
1712
+ }
1713
+
1714
+ .@{prefix}-colorbutton .@{prefix}-preview {
1715
+ padding-right: 3px;
1716
+ display: block;
1717
+ position: absolute;
1718
+ left: 50%;
1719
+ top: 50%;
1720
+ margin-left: -17px;
1721
+ margin-top: 7px;
1722
+ background: gray;
1723
+ width: 13px;
1724
+ height: 2px;
1725
+ overflow: hidden;
1726
+ }
1727
+
1728
+ .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {
1729
+ margin-left: -16px;
1730
+ padding-right: 0;
1731
+ width: 16px;
1732
+ }
1733
+
1734
+ .@{prefix}-colorbutton .@{prefix}-open {
1735
+ padding-left: 4px;
1736
+ padding-right: 4px;
1737
+ border-left: 1px solid transparent;
1738
+ }
1739
+
1740
+ .@{prefix}-colorbutton:hover .@{prefix}-open {
1741
+ border-color: darken(@btn-bg, 20%);
1742
+ }
1743
+
1744
+ .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-open {
1745
+ padding: 0 3px 0 3px;
1746
+ }
1747
+
1748
+ // RTL
1749
+
1750
+ .@{prefix}-rtl .@{prefix}-colorbutton {
1751
+ direction: rtl;
1752
+ }
1753
+
1754
+ .@{prefix}-rtl .@{prefix}-colorbutton .@{prefix}-preview {
1755
+ margin-left: 0;
1756
+ padding-right: 0;
1757
+ padding-left: 3px;
1758
+ }
1759
+
1760
+ .@{prefix}-rtl .@{prefix}-colorbutton.@{prefix}-btn-small .@{prefix}-preview {
1761
+ margin-left: 0;
1762
+ padding-right: 0;
1763
+ padding-left: 2px;
1764
+ }
1765
+
1766
+ .@{prefix}-rtl .@{prefix}-colorbutton .@{prefix}-open {
1767
+ padding-left: 4px;
1768
+ padding-right: 4px;
1769
+ border-left: 0;
1770
+ }
1771
+
1772
+
1773
+ // ColorPicker
1774
+
1775
+ .@{prefix}-colorpicker {
1776
+ position: relative;
1777
+ width: 250px;
1778
+ height: 220px;
1779
+ }
1780
+
1781
+ .@{prefix}-colorpicker-sv {
1782
+ position: absolute;
1783
+ top: 0; left: 0;
1784
+ width: 90%;
1785
+ height: 100%;
1786
+ border: 1px solid @colorpicker-border;
1787
+ cursor: crosshair;
1788
+ overflow: hidden;
1789
+ }
1790
+
1791
+ .@{prefix}-colorpicker-h-chunk {
1792
+ width: 100%;
1793
+ }
1794
+
1795
+ .@{prefix}-colorpicker-overlay1, .@{prefix}-colorpicker-overlay2 {
1796
+ width: 100%;
1797
+ height: 100%;
1798
+ position: absolute;
1799
+ top: 0;
1800
+ left: 0;
1801
+ }
1802
+
1803
+ .@{prefix}-colorpicker-overlay1 {
1804
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff');
1805
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";
1806
+ background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
1807
+ }
1808
+
1809
+ .@{prefix}-colorpicker-overlay2 {
1810
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000');
1811
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";
1812
+ background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
1813
+ }
1814
+
1815
+ .@{prefix}-colorpicker-selector1 {
1816
+ background: none;
1817
+ position: absolute;
1818
+ width: 12px;
1819
+ height: 12px;
1820
+ margin: -8px 0 0 -8px;
1821
+ border: 1px solid black;
1822
+ border-radius: 50%;
1823
+ }
1824
+
1825
+ .@{prefix}-colorpicker-selector2 {
1826
+ position: absolute;
1827
+ width: 10px;
1828
+ height: 10px;
1829
+ border: 1px solid white;
1830
+ border-radius: 50%;
1831
+ }
1832
+
1833
+ .@{prefix}-colorpicker-h {
1834
+ position: absolute;
1835
+ top: 0; right: 0;
1836
+ width: 6.5%;
1837
+ height: 100%;
1838
+ border: 1px solid @colorpicker-border;
1839
+ cursor: crosshair;
1840
+ }
1841
+
1842
+ .@{prefix}-colorpicker-h-marker {
1843
+ margin-top: -4px;
1844
+ position: absolute;
1845
+ top: 0;
1846
+ left: -1px;
1847
+ width: 100%;
1848
+ border: 1px solid @colorpicker-hue-border;
1849
+ background: @colorpicker-hue-bg;
1850
+ height: 4px;
1851
+ z-index: 100;
1852
+ }
1853
+
1854
+
1855
+ // Path
1856
+
1857
+ .@{prefix}-path {
1858
+ .inline-block();
1859
+ padding: 8px;
1860
+ white-space: normal;
1861
+ }
1862
+
1863
+ .@{prefix}-path .@{prefix}-txt {
1864
+ display: inline-block;
1865
+ padding-right: 3px;
1866
+ }
1867
+
1868
+ .@{prefix}-path .@{prefix}-path-body {
1869
+ display: inline-block;
1870
+ }
1871
+
1872
+ .@{prefix}-path-item {
1873
+ .inline-block();
1874
+ cursor: pointer;
1875
+ color: @path-text;
1876
+ }
1877
+
1878
+ .@{prefix}-path-item:hover {
1879
+ text-decoration: underline;
1880
+ }
1881
+
1882
+ .@{prefix}-path-item:focus {
1883
+ background: @path-bg-focus;
1884
+ color: @path-text-focus;
1885
+ }
1886
+
1887
+ .@{prefix}-path .@{prefix}-divider {
1888
+ display: inline;
1889
+ }
1890
+
1891
+ .@{prefix}-disabled .@{prefix}-path-item {
1892
+ color: @text-disabled;
1893
+ }
1894
+
1895
+ // RTL
1896
+
1897
+ .@{prefix}-rtl .@{prefix}-path {
1898
+ direction: rtl;
1899
+ }
1900
+
1901
+
1902
+ // FieldSet
1903
+
1904
+ .@{prefix}-fieldset {
1905
+ border: 0 solid #9E9E9E;
1906
+ .border-radius(3px);
1907
+ }
1908
+
1909
+ .@{prefix}-fieldset > .@{prefix}-container-body {
1910
+ margin-top: -15px;
1911
+ }
1912
+
1913
+ .@{prefix}-fieldset-title {
1914
+ margin-left: 5px;
1915
+ padding: 0 5px 0 5px;
1916
+ }
1917
+
1918
+ // FitLayout
1919
+
1920
+ .@{prefix}-fit-layout {
1921
+ .inline-block();
1922
+ }
1923
+
1924
+ .@{prefix}-fit-layout-item {
1925
+ position: absolute;
1926
+ }
1927
+
1928
+
1929
+ // FlowLayout
1930
+
1931
+ .@{prefix}-flow-layout-item {
1932
+ .inline-block();
1933
+ }
1934
+
1935
+ .@{prefix}-flow-layout-item {
1936
+ margin: @flow-layout-spacing 0 @flow-layout-spacing @flow-layout-spacing;
1937
+ }
1938
+
1939
+ .@{prefix}-flow-layout-item.@{prefix}-last {
1940
+ margin-right: @flow-layout-spacing;
1941
+ }
1942
+
1943
+ .@{prefix}-flow-layout {
1944
+ white-space: normal;
1945
+ }
1946
+
1947
+ .@{prefix}-tinymce-inline .@{prefix}-flow-layout {
1948
+ white-space: nowrap;
1949
+ }
1950
+
1951
+ // RTL
1952
+
1953
+ .@{prefix}-rtl .@{prefix}-flow-layout {
1954
+ text-align: right;
1955
+ direction: rtl;
1956
+ }
1957
+
1958
+ .@{prefix}-rtl .@{prefix}-flow-layout-item {
1959
+ margin: @flow-layout-spacing @flow-layout-spacing @flow-layout-spacing 0;
1960
+ }
1961
+
1962
+ .@{prefix}-rtl .@{prefix}-flow-layout-item.@{prefix}-last {
1963
+ margin-left: @flow-layout-spacing;
1964
+ }
1965
+
1966
+
1967
+ // Iframe
1968
+
1969
+ .@{prefix}-iframe {
1970
+ border: 0 solid @iframe-border;
1971
+ width: 100%; height: 100%;
1972
+ }
1973
+
1974
+
1975
+ // InfoBox
1976
+
1977
+ .@{prefix}-infobox {
1978
+ .inline-block();
1979
+ text-shadow: @text-shadow;
1980
+ overflow: hidden;
1981
+ border: 1px solid red;
1982
+
1983
+ div {
1984
+ display: block;
1985
+ margin: 5px;
1986
+
1987
+ button {
1988
+ position: absolute;
1989
+ top: 50%; right: 4px;
1990
+ cursor: pointer;
1991
+ margin-top: -8px;
1992
+ display: none;
1993
+ }
1994
+
1995
+ button:focus {
1996
+ outline: 2px solid @btn-border-hover;
1997
+ }
1998
+ }
1999
+ }
2000
+
2001
+ .@{prefix}-infobox.@{prefix}-has-help {
2002
+ div {
2003
+ margin-right: 25px;
2004
+ }
2005
+
2006
+ button {
2007
+ display: block;
2008
+ }
2009
+ }
2010
+
2011
+ .@{prefix}-infobox.@{prefix}-success {
2012
+ background: @infobox-success-bg;
2013
+ border-color: @infobox-success-border;
2014
+
2015
+ div {
2016
+ color: @infobox-success-text;
2017
+ }
2018
+ }
2019
+
2020
+ .@{prefix}-infobox.@{prefix}-warning {
2021
+ background: @infobox-warning-bg;
2022
+ border-color: @infobox-warning-border;
2023
+
2024
+ div {
2025
+ color: @infobox-warning-text;
2026
+ }
2027
+ }
2028
+
2029
+ .@{prefix}-infobox.@{prefix}-error {
2030
+ background: @infobox-error-bg;
2031
+ border-color: @infobox-error-border;
2032
+
2033
+ div {
2034
+ color: @infobox-error-text;
2035
+ }
2036
+ }
2037
+
2038
+ // RTL
2039
+
2040
+ .@{prefix}-rtl .@{prefix}-infobox {
2041
+ div {
2042
+ text-align: right;
2043
+ direction: rtl;
2044
+ }
2045
+ }
2046
+
2047
+
2048
+ // Label
2049
+
2050
+ .@{prefix}-label {
2051
+ .inline-block();
2052
+ text-shadow: @text-shadow;
2053
+ overflow: hidden;
2054
+ }
2055
+
2056
+ .@{prefix}-label.@{prefix}-autoscroll {
2057
+ overflow: auto;
2058
+ }
2059
+
2060
+ .@{prefix}-label.@{prefix}-disabled {
2061
+ color: @text-disabled;
2062
+ }
2063
+
2064
+ .@{prefix}-label.@{prefix}-multiline {
2065
+ white-space: pre-wrap;
2066
+ }
2067
+
2068
+ .@{prefix}-label.@{prefix}-success {
2069
+ color: @text-success;
2070
+ }
2071
+
2072
+ .@{prefix}-label.@{prefix}-warning {
2073
+ color: @text-warning;
2074
+ }
2075
+
2076
+ .@{prefix}-label.@{prefix}-error {
2077
+ color: @text-error;
2078
+ }
2079
+
2080
+ // RTL
2081
+
2082
+ .@{prefix}-rtl .@{prefix}-label {
2083
+ text-align: right;
2084
+ direction: rtl;
2085
+ }
2086
+
2087
+
2088
+ /* MenuBar */
2089
+
2090
+ .@{prefix}-menubar .@{prefix}-menubtn {
2091
+ border-color: transparent;
2092
+ background: transparent;
2093
+ .border-radius(0);
2094
+ .box-shadow(none);
2095
+ filter: none;
2096
+ }
2097
+
2098
+ .@{prefix}-menubar .@{prefix}-menubtn button {
2099
+ color: @menubar-menubtn-text;
2100
+ }
2101
+
2102
+ .@{prefix}-menubar {
2103
+ border: 1px solid @menubar-border;
2104
+ }
2105
+
2106
+ .@{prefix}-menubar .@{prefix}-menubtn button span {
2107
+ color: @text;
2108
+ }
2109
+
2110
+ .@{prefix}-menubar .@{prefix}-caret {
2111
+ border-top-color: @text;
2112
+ }
2113
+
2114
+ .@{prefix}-menubar .@{prefix}-menubtn:hover, .@{prefix}-menubar .@{prefix}-menubtn.@{prefix}-active, .@{prefix}-menubar .@{prefix}-menubtn:focus {
2115
+ border-color: darken(@btn-bg, 20%);
2116
+ background: @menu-bg;
2117
+ filter: none;
2118
+ .box-shadow(none);
2119
+ }
2120
+
2121
+
2122
+ /* MenuButton */
2123
+
2124
+ .@{prefix}-menubtn button {
2125
+ color: @btn-text;
2126
+ //margin-right: 2px;
2127
+ //line-height: @line-height;
2128
+ //*line-height: @line-height - 4px;
2129
+ }
2130
+
2131
+ .@{prefix}-menubtn.@{prefix}-btn-small span {
2132
+ font-size: @font-size - 2px;
2133
+ }
2134
+
2135
+ .@{prefix}-menubtn.@{prefix}-fixed-width span {
2136
+ display: inline-block;
2137
+ overflow-x: hidden;
2138
+ text-overflow: ellipsis;
2139
+ width: 90px;
2140
+ }
2141
+
2142
+ .@{prefix}-menubtn.@{prefix}-fixed-width.@{prefix}-btn-small span {
2143
+ width: 70px;
2144
+ }
2145
+
2146
+ .@{prefix}-menubtn .@{prefix}-caret {
2147
+ *margin-top: 6px;
2148
+ }
2149
+
2150
+ // RTL
2151
+
2152
+ .@{prefix}-rtl .@{prefix}-menubtn button {
2153
+ direction: rtl;
2154
+ text-align: right;
2155
+ }
2156
+
2157
+
2158
+ // MenuItem
2159
+
2160
+ .@{prefix}-menu-item {
2161
+ display: block;
2162
+ padding: 6px 15px 6px 12px;
2163
+ clear: both;
2164
+ font-weight: normal;
2165
+ line-height: 20px;
2166
+ color: @menuitem-text;
2167
+ white-space: nowrap;
2168
+ cursor: pointer;
2169
+ line-height: normal;
2170
+ border-left: 4px solid transparent;
2171
+ margin-bottom: 1px;
2172
+ }
2173
+
2174
+ .@{prefix}-menu-item .@{prefix}-ico, .@{prefix}-menu-item .@{prefix}-text {
2175
+ color: @menuitem-text;
2176
+ }
2177
+
2178
+ .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-ico {
2179
+ color: mix(@menuitem-text, @menu-bg, 40%);
2180
+ }
2181
+
2182
+ .@{prefix}-menu-item:hover .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-text, .@{prefix}-menu-item:focus .@{prefix}-text {
2183
+ color: @menuitem-text-inverse;
2184
+ }
2185
+
2186
+ .@{prefix}-menu-item:hover .@{prefix}-ico, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-ico, .@{prefix}-menu-item:focus .@{prefix}-ico {
2187
+ color: @menuitem-text-inverse;
2188
+ }
2189
+
2190
+ .@{prefix}-menu-item.@{prefix}-disabled:hover {
2191
+ background: @menuitem-bg-disabled;
2192
+ }
2193
+
2194
+ .@{prefix}-menu-shortcut {
2195
+ display: inline-block;
2196
+ color: mix(@menuitem-text, @menu-bg, 40%);
2197
+ }
2198
+
2199
+ .@{prefix}-menu-shortcut {
2200
+ .inline-block();
2201
+ padding: 0 15px 0 20px;
2202
+ }
2203
+
2204
+ .@{prefix}-menu-item:hover .@{prefix}-menu-shortcut, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-menu-shortcut, .@{prefix}-menu-item:focus .@{prefix}-menu-shortcut {
2205
+ color: @menuitem-text-inverse;
2206
+ }
2207
+
2208
+ .@{prefix}-menu-item .@{prefix}-caret {
2209
+ margin-top: 4px;
2210
+ *margin-top: 3px;
2211
+ margin-right: 6px;
2212
+ border-top: 4px solid transparent;
2213
+ border-bottom: 4px solid transparent;
2214
+ border-left: 4px solid @menuitem-caret;
2215
+ }
2216
+
2217
+ .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-menu-item:hover .@{prefix}-caret {
2218
+ border-left-color: @menuitem-caret-selected;
2219
+ }
2220
+
2221
+ .@{prefix}-menu-align .@{prefix}-menu-shortcut {
2222
+ *margin-top: -2px;
2223
+ }
2224
+
2225
+ .@{prefix}-menu-align .@{prefix}-menu-shortcut, .@{prefix}-menu-align .@{prefix}-caret {
2226
+ position: absolute;
2227
+ right: 0;
2228
+ }
2229
+
2230
+ .@{prefix}-menu-item.@{prefix}-active i {
2231
+ visibility: visible;
2232
+ }
2233
+
2234
+ .@{prefix}-menu-item-normal.@{prefix}-active {
2235
+ background-color: @menuitem-bg-active;
2236
+ }
2237
+
2238
+ .@{prefix}-menu-item-preview.@{prefix}-active {
2239
+ border-left: 5px solid @menuitem-preview-border-active;
2240
+ }
2241
+
2242
+ .@{prefix}-menu-item-normal.@{prefix}-active .@{prefix}-text {
2243
+ color: @menuitem-text-active;
2244
+ }
2245
+
2246
+ .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-ico {
2247
+ color: @menuitem-text-inverse;
2248
+ }
2249
+
2250
+ .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-ico {
2251
+ color: @menuitem-text-inverse;
2252
+ }
2253
+
2254
+ .@{prefix}-menu-item:hover, .@{prefix}-menu-item.@{prefix}-selected, .@{prefix}-menu-item:focus {
2255
+ text-decoration: none;
2256
+ color: @menuitem-text-inverse;
2257
+ .vertical-gradient(@menuitem-bg-selected, @menuitem-bg-selected-hlight);
2258
+ }
2259
+
2260
+ .@{prefix}-menu-item-link {
2261
+ color: #093;
2262
+ overflow: hidden;
2263
+ text-overflow: ellipsis;
2264
+ white-space: nowrap;
2265
+
2266
+ b {
2267
+ color: #093;
2268
+ }
2269
+ }
2270
+
2271
+ .@{prefix}-menu-item-ellipsis {
2272
+ display: block;
2273
+ text-overflow: ellipsis;
2274
+ white-space: nowrap;
2275
+ overflow: hidden;
2276
+ }
2277
+
2278
+ .@{prefix}-menu-item:hover *, .@{prefix}-menu-item.@{prefix}-selected *, .@{prefix}-menu-item:focus * {
2279
+ color: @menuitem-text-inverse;
2280
+ }
2281
+
2282
+ div.@{prefix}-menu .@{prefix}-menu-item-sep, .@{prefix}-menu-item-sep:hover {
2283
+ border: 0;
2284
+ padding: 0;
2285
+ height: 1px;
2286
+ margin: 9px 1px;
2287
+ overflow: hidden;
2288
+ background: @menuitem-separator-top;
2289
+ border-bottom: 1px solid @menuitem-separator-bottom;
2290
+ cursor: default;
2291
+ filter: none;
2292
+ }
2293
+
2294
+ div.@{prefix}-menu .@{prefix}-menu-item b {
2295
+ font-weight: bold;
2296
+ }
2297
+
2298
+ .@{prefix}-menu-item-indent-1 { padding-left: 20px; }
2299
+ .@{prefix}-menu-item-indent-2 { padding-left: 35px; }
2300
+ .@{prefix}-menu-item-indent-2 { padding-left: 35px; }
2301
+ .@{prefix}-menu-item-indent-3 { padding-left: 40px; }
2302
+ .@{prefix}-menu-item-indent-4 { padding-left: 45px; }
2303
+ .@{prefix}-menu-item-indent-5 { padding-left: 50px; }
2304
+ .@{prefix}-menu-item-indent-6 { padding-left: 55px; }
2305
+
2306
+ // RTL
2307
+
2308
+ .@{prefix}-menu.@{prefix}-rtl {
2309
+ direction: rtl;
2310
+ }
2311
+
2312
+ .@{prefix}-rtl .@{prefix}-menu-item {
2313
+ text-align: right;
2314
+ direction: rtl;
2315
+ padding: 6px 12px 6px 15px;
2316
+ }
2317
+
2318
+ .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-menu-shortcut, .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-caret {
2319
+ right: auto;
2320
+ left: 0;
2321
+ }
2322
+
2323
+ .@{prefix}-rtl .@{prefix}-menu-item .@{prefix}-caret {
2324
+ margin-left: 6px;
2325
+ margin-right: 0;
2326
+ border-right: 4px solid @menuitem-caret;
2327
+ border-left: 0;
2328
+ }
2329
+
2330
+ .@{prefix}-rtl .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:hover .@{prefix}-caret {
2331
+ border-left-color: transparent;
2332
+ border-right-color: @menuitem-caret-selected;
2333
+ }
2334
+
2335
+
2336
+ // Throbber
2337
+
2338
+ .@{prefix}-throbber {
2339
+ position: absolute;
2340
+ top: 0; left: 0;
2341
+ width: 100%; height: 100%;
2342
+ .opacity(0.6);
2343
+ background: @throbber-bg;
2344
+ }
2345
+
2346
+ .@{prefix}-throbber-inline {
2347
+ position: static;
2348
+ height: 50px;
2349
+ }
2350
+
2351
+ .@{prefix}-menu .@{prefix}-throbber-inline {
2352
+ height: 25px;
2353
+ background-size: contain;
2354
+ }
2355
+
2356
+
2357
+ // Menu
2358
+
2359
+ .@{prefix}-menu {
2360
+ position: absolute;
2361
+ left: 0; top: 0;
2362
+ .reset-gradient();
2363
+ z-index: 1000;
2364
+ padding: 5px 0 5px 0;
2365
+ margin: @menu-margin;
2366
+ min-width: 160px;
2367
+ background: @menu-bg;
2368
+ border: 1px solid mix(rgb(red(@menu-border), green(@menu-border), blue(@menu-border)), @panel-bg, round(alpha(@menu-border) * 200));
2369
+ border: 1px solid @menu-border;
2370
+ z-index: 1002;
2371
+ .border-radius(6px);
2372
+ .box-shadow(0 5px 10px rgba(0,0,0,.2));
2373
+ max-height: 400px;
2374
+ overflow: auto;
2375
+ overflow-x: hidden;
2376
+ }
2377
+
2378
+ .@{prefix}-menu i {
2379
+ display: none;
2380
+ }
2381
+
2382
+ .@{prefix}-menu-has-icons i {
2383
+ display: inline-block;
2384
+ *display: inline;
2385
+ }
2386
+
2387
+ .@{prefix}-menu-sub-tr-tl { margin: -6px 0 0 -1px; }
2388
+ .@{prefix}-menu-sub-br-bl { margin: 6px 0 0 -1px; }
2389
+ .@{prefix}-menu-sub-tl-tr { margin: -6px 0 0 1px; }
2390
+ .@{prefix}-menu-sub-bl-br { margin: 6px 0 0 1px; }
2391
+
2392
+
2393
+ // ListBox
2394
+
2395
+ .@{prefix}-listbox button {
2396
+ text-align: left;
2397
+ padding-right: 20px;
2398
+ position: relative;
2399
+ }
2400
+
2401
+ .@{prefix}-listbox .@{prefix}-caret {
2402
+ position: absolute;
2403
+ margin-top: -2px;
2404
+ right: 8px;
2405
+ top: 50%;
2406
+ }
2407
+
2408
+ // RTL
2409
+
2410
+ .@{prefix}-rtl .@{prefix}-listbox .@{prefix}-caret {
2411
+ right: auto;
2412
+ left: 8px;
2413
+ }
2414
+
2415
+ .@{prefix}-rtl .@{prefix}-listbox button {
2416
+ padding-right: 10px;
2417
+ padding-left: 20px;
2418
+ }
2419
+
2420
+
2421
+ // Radio - not implemented yet
2422
+
2423
+
2424
+ .@{prefix}-container-body .@{prefix}-resizehandle {
2425
+ position: absolute;
2426
+ right: 0;
2427
+ bottom: 0;
2428
+ width: 16px;
2429
+ height: 16px;
2430
+ visibility: visible;
2431
+ cursor: s-resize;
2432
+ margin: 0;
2433
+ }
2434
+
2435
+ .@{prefix}-container-body .@{prefix}-resizehandle-both {
2436
+ cursor: se-resize;
2437
+ }
2438
+
2439
+ i.@{prefix}-i-resize {
2440
+ color: @text;
2441
+ }
2442
+
2443
+
2444
+ // SelectBox
2445
+
2446
+ .@{prefix}-selectbox {
2447
+ background: @selectbox-bg;
2448
+ border: 1px solid @selectbox-border;
2449
+ }
2450
+
2451
+
2452
+ // Slider
2453
+
2454
+ .@{prefix}-slider {
2455
+ .border-radius(3px);
2456
+ border: 1px solid @slider-border;
2457
+ background: @slider-bg;
2458
+ width: 100px;
2459
+ height: 10px;
2460
+ position: relative;
2461
+ display: block;
2462
+ }
2463
+
2464
+ .@{prefix}-slider.@{prefix}-vertical {
2465
+ width: 10px;
2466
+ height: 100px;
2467
+ }
2468
+
2469
+ .@{prefix}-slider-handle {
2470
+ .border-radius(3px);
2471
+ border: 1px solid @slider-handle-border;
2472
+ background: @slider-handle-bg;
2473
+ display: block;
2474
+ width: 13px;
2475
+ height: 13px;
2476
+ position: absolute;
2477
+ top: 0; left: 0;
2478
+ margin-left: -1px;
2479
+ margin-top: -2px;
2480
+ }
2481
+
2482
+ .@{prefix}-slider-handle:focus {
2483
+ background: @slider-handle-bg-focus;
2484
+ }
2485
+
2486
+
2487
+ // Spacer
2488
+
2489
+ .@{prefix}-spacer {
2490
+ visibility: hidden;
2491
+ }
2492
+
2493
+
2494
+ // SplitButton
2495
+
2496
+ .@{prefix}-splitbtn .@{prefix}-open {
2497
+ border-left: 1px solid transparent;
2498
+ }
2499
+
2500
+ .@{prefix}-splitbtn:hover .@{prefix}-open {
2501
+ border-left-color: darken(@btn-bg, 20%);
2502
+ }
2503
+
2504
+ .@{prefix}-splitbtn button when (@has-button-borders = false) {
2505
+ padding-right: 6px;
2506
+ padding-left: 6px;
2507
+ }
2508
+
2509
+ .@{prefix}-splitbtn button when (@has-button-borders = true) {
2510
+ padding-right: 4px;
2511
+ padding-left: 8px;
2512
+ }
2513
+
2514
+ .@{prefix}-splitbtn .@{prefix}-open {
2515
+ padding-right: 4px;
2516
+ padding-left: 4px;
2517
+ }
2518
+
2519
+ .@{prefix}-splitbtn .@{prefix}-open.@{prefix}-active {
2520
+ .vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
2521
+ outline: 1px solid darken(@btn-bg, 20%);
2522
+ }
2523
+
2524
+ .@{prefix}-splitbtn.@{prefix}-btn-small .@{prefix}-open {
2525
+ padding: 0 3px 0 3px;
2526
+ }
2527
+
2528
+ // RTL
2529
+
2530
+ .@{prefix}-rtl .@{prefix}-splitbtn {
2531
+ direction: rtl;
2532
+ text-align: right;
2533
+ }
2534
+
2535
+ .@{prefix}-rtl .@{prefix}-splitbtn button {
2536
+ padding-right: 4px;
2537
+ padding-left: 4px;
2538
+ }
2539
+
2540
+ .@{prefix}-rtl .@{prefix}-splitbtn .@{prefix}-open {
2541
+ border-left: 0;
2542
+ }
2543
+
2544
+
2545
+ // StackLayout
2546
+
2547
+ .@{prefix}-stack-layout-item {
2548
+ display: block;
2549
+ }
2550
+
2551
+
2552
+ // TabPanel
2553
+
2554
+ .@{prefix}-tabs {
2555
+ display: block;
2556
+ border-bottom: 1px solid @tab-border;
2557
+ }
2558
+
2559
+ .@{prefix}-tabs,
2560
+ .@{prefix}-tabs + .@{prefix}-container-body {
2561
+ background: @tabs-bg;
2562
+ }
2563
+
2564
+ .@{prefix}-tab {
2565
+ .inline-block();
2566
+ border: 1px solid @tab-border;
2567
+ border-width: 0 1px 0 0;
2568
+ background: @tab-bg;
2569
+ padding: 8px;
2570
+ text-shadow: @text-shadow;
2571
+ height: 13px;
2572
+ cursor: pointer;
2573
+ }
2574
+
2575
+ .@{prefix}-tab:hover {
2576
+ background: @tab-bg-hover;
2577
+ }
2578
+
2579
+ .@{prefix}-tab.@{prefix}-active {
2580
+ background: @tab-bg-active;
2581
+ border-bottom-color: transparent;
2582
+ margin-bottom: -1px;
2583
+ height: 14px;
2584
+ }
2585
+
2586
+ // RTL
2587
+
2588
+ .@{prefix}-rtl .@{prefix}-tabs {
2589
+ text-align: right;
2590
+ direction: rtl;
2591
+ }
2592
+
2593
+ .@{prefix}-rtl .@{prefix}-tab {
2594
+ border-width: 0 0 0 1px;
2595
+ }
2596
+
2597
+
2598
+ // TextBox
2599
+
2600
+ .@{prefix}-textbox {
2601
+ background: @textbox-bg;
2602
+ border: 1px solid @textbox-border;
2603
+ .border-radius(3px);
2604
+ .box-shadow(@textbox-box-shadow);
2605
+ display: inline-block;
2606
+ .transition(~"border linear .2s, box-shadow linear .2s");
2607
+ height: 28px;
2608
+ resize: none;
2609
+ padding: 0 4px 0 4px;
2610
+ white-space: pre-wrap;
2611
+ *white-space: pre;
2612
+ color: @text;
2613
+ }
2614
+
2615
+ .@{prefix}-textbox:focus, .@{prefix}-textbox.@{prefix}-focus {
2616
+ border-color: @textbox-border-focus;
2617
+ .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fadeout(@textbox-border-focus, 15%));
2618
+ }
2619
+
2620
+ .@{prefix}-placeholder .@{prefix}-textbox {
2621
+ color: @textbox-text-placeholder;
2622
+ }
2623
+
2624
+ .@{prefix}-textbox.@{prefix}-multiline {
2625
+ padding: 4px;
2626
+ height: auto;
2627
+ }
2628
+
2629
+ .@{prefix}-textbox.@{prefix}-disabled {
2630
+ color: mix(@text, @textbox-bg, 40%);
2631
+ }
2632
+
2633
+ // RTL
2634
+
2635
+ .@{prefix}-rtl .@{prefix}-textbox {
2636
+ text-align: right;
2637
+ direction: rtl;
2638
+ }
2639
+
2640
+
2641
+ /* Icons IE7 */
2642
+
2643
+ @font-face {
2644
+ font-family: 'tinymce';
2645
+ src:url('fonts/tinymce.eot');
2646
+ src:url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),
2647
+ url('fonts/tinymce.woff') format('woff'),
2648
+ url('fonts/tinymce.ttf') format('truetype'),
2649
+ url('fonts/tinymce.svg#tinymce') format('svg');
2650
+ font-weight: normal;
2651
+ font-style: normal;
2652
+ }
2653
+
2654
+ @font-face {
2655
+ font-family: 'tinymce-small';
2656
+ src:url('fonts/tinymce-small.eot');
2657
+ src:url('fonts/tinymce-small.eot?#iefix') format('embedded-opentype'),
2658
+ url('fonts/tinymce-small.woff') format('woff'),
2659
+ url('fonts/tinymce-small.ttf') format('truetype'),
2660
+ url('fonts/tinymce-small.svg#tinymce') format('svg');
2661
+ font-weight: normal;
2662
+ font-style: normal;
2663
+ }
2664
+
2665
+ @iconSize: 16px;
2666
+
2667
+ .@{prefix}-ico {
2668
+ font-family: 'tinymce';
2669
+ font-style: normal;
2670
+ font-weight: normal;
2671
+ font-size: @iconSize;
2672
+ line-height: 16px;
2673
+ vertical-align: text-top;
2674
+ -webkit-font-smoothing: antialiased;
2675
+
2676
+ display: inline-block;
2677
+ background: transparent center center;
2678
+ width: 16px;
2679
+ height: 16px;
2680
+ color: @btn-text;
2681
+ -ie7-icon: ' ';
2682
+ }
2683
+
2684
+ .@{prefix}-btn-small .@{prefix}-ico {
2685
+ font-family: 'tinymce-small';
2686
+ }
2687
+
2688
+ // .@{prefix}-i-checkbox needs to have zoom overridden since it's set by the gradient mixin
2689
+ .@{prefix}-ico, i.@{prefix}-i-checkbox {
2690
+ zoom: ~"expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = this.currentStyle['-ie7-icon'].substr(1, 1) + '&nbsp;')";
2691
+ }
2692
+
2693
+ .@{prefix}-i-save { -ie7-icon: "\e000"; }
2694
+ .@{prefix}-i-newdocument { -ie7-icon: "\e001"; }
2695
+ .@{prefix}-i-fullpage { -ie7-icon: "\e002"; }
2696
+ .@{prefix}-i-alignleft { -ie7-icon: "\e003"; }
2697
+ .@{prefix}-i-aligncenter { -ie7-icon: "\e004"; }
2698
+ .@{prefix}-i-alignright { -ie7-icon: "\e005"; }
2699
+ .@{prefix}-i-alignjustify { -ie7-icon: "\e006"; }
2700
+ .@{prefix}-i-alignnone { -ie7-icon: "\e003"; }
2701
+ .@{prefix}-i-cut { -ie7-icon: "\e007"; }
2702
+ .@{prefix}-i-paste { -ie7-icon: "\e008"; }
2703
+ .@{prefix}-i-searchreplace { -ie7-icon: "\e009"; }
2704
+ .@{prefix}-i-bullist { -ie7-icon: "\e00a"; }
2705
+ .@{prefix}-i-numlist { -ie7-icon: "\e00b"; }
2706
+ .@{prefix}-i-indent { -ie7-icon: "\e00c"; }
2707
+ .@{prefix}-i-outdent { -ie7-icon: "\e00d"; }
2708
+ .@{prefix}-i-blockquote { -ie7-icon: "\e00e"; }
2709
+ .@{prefix}-i-undo { -ie7-icon: "\e00f"; }
2710
+ .@{prefix}-i-redo { -ie7-icon: "\e010"; }
2711
+ .@{prefix}-i-link { -ie7-icon: "\e011"; }
2712
+ .@{prefix}-i-unlink { -ie7-icon: "\e012"; }
2713
+ .@{prefix}-i-anchor { -ie7-icon: "\e013"; }
2714
+ .@{prefix}-i-image { -ie7-icon: "\e014"; }
2715
+ .@{prefix}-i-media { -ie7-icon: "\e015"; }
2716
+ .@{prefix}-i-help { -ie7-icon: "\e016"; }
2717
+ .@{prefix}-i-code { -ie7-icon: "\e017"; }
2718
+ .@{prefix}-i-insertdatetime { -ie7-icon: "\e018"; }
2719
+ .@{prefix}-i-preview { -ie7-icon: "\e019"; }
2720
+ .@{prefix}-i-forecolor { -ie7-icon: "\e01a"; }
2721
+ .@{prefix}-i-backcolor { -ie7-icon: "\e01a"; }
2722
+ .@{prefix}-i-table { -ie7-icon: "\e01b"; }
2723
+ .@{prefix}-i-hr { -ie7-icon: "\e01c"; }
2724
+ .@{prefix}-i-removeformat { -ie7-icon: "\e01d"; }
2725
+ .@{prefix}-i-subscript { -ie7-icon: "\e01e"; }
2726
+ .@{prefix}-i-superscript { -ie7-icon: "\e01f"; }
2727
+ .@{prefix}-i-charmap { -ie7-icon: "\e020"; }
2728
+ .@{prefix}-i-emoticons { -ie7-icon: "\e021"; }
2729
+ .@{prefix}-i-print { -ie7-icon: "\e022"; }
2730
+ .@{prefix}-i-fullscreen { -ie7-icon: "\e023"; }
2731
+ .@{prefix}-i-spellchecker { -ie7-icon: "\e024"; }
2732
+ .@{prefix}-i-nonbreaking { -ie7-icon: "\e025"; }
2733
+ .@{prefix}-i-template { -ie7-icon: "\e026"; }
2734
+ .@{prefix}-i-pagebreak { -ie7-icon: "\e027"; }
2735
+ .@{prefix}-i-restoredraft { -ie7-icon: "\e028"; }
2736
+ .@{prefix}-i-untitled { -ie7-icon: "\e029"; }
2737
+ .@{prefix}-i-bold { -ie7-icon: "\e02a"; }
2738
+ .@{prefix}-i-italic { -ie7-icon: "\e02b"; }
2739
+ .@{prefix}-i-underline { -ie7-icon: "\e02c"; }
2740
+ .@{prefix}-i-strikethrough { -ie7-icon: "\e02d"; }
2741
+ .@{prefix}-i-visualchars { -ie7-icon: "\e02e"; }
2742
+ .@{prefix}-i-ltr { -ie7-icon: "\e02f"; }
2743
+ .@{prefix}-i-rtl { -ie7-icon: "\e030"; }
2744
+ .@{prefix}-i-copy { -ie7-icon: "\e031"; }
2745
+ .@{prefix}-i-resize { -ie7-icon: "\e032"; }
2746
+ .@{prefix}-i-browse { -ie7-icon: "\e034"; }
2747
+ .@{prefix}-i-pastetext { -ie7-icon: "\e035"; }
2748
+ .@{prefix}-i-rotateleft { -ie7-icon: "\eaa8"; }
2749
+ .@{prefix}-i-rotateright { -ie7-icon: "\eaa9"; }
2750
+ .@{prefix}-i-crop { -ie7-icon: "\ee78"; }
2751
+ .@{prefix}-i-editimage { -ie7-icon: "\e914"; }
2752
+ .@{prefix}-i-options { -ie7-icon: "\ec6a"; }
2753
+ .@{prefix}-i-flipv { -ie7-icon: "\eaaa"; }
2754
+ .@{prefix}-i-fliph { -ie7-icon: "\eaac"; }
2755
+ .@{prefix}-i-zoomin { -ie7-icon: "\eb35"; }
2756
+ .@{prefix}-i-zoomout { -ie7-icon: "\eb36"; }
2757
+ .@{prefix}-i-sun { -ie7-icon: "\eccc"; }
2758
+ .@{prefix}-i-moon { -ie7-icon: "\eccd"; }
2759
+ .@{prefix}-i-arrowleft { -ie7-icon: "\edc0"; }
2760
+ .@{prefix}-i-arrowright { -ie7-icon: "\edb8"; }
2761
+ .@{prefix}-i-drop { -ie7-icon: "\e934"; }
2762
+ .@{prefix}-i-contrast { -ie7-icon: "\ecd4"; }
2763
+ .@{prefix}-i-sharpen { -ie7-icon: "\eba7"; }
2764
+ .@{prefix}-i-palette { -ie7-icon: "\e92a"; }
2765
+ .@{prefix}-i-resize2 { -ie7-icon: "\edf9"; }
2766
+ .@{prefix}-i-orientation { -ie7-icon: "\e601"; }
2767
+ .@{prefix}-i-invert { -ie7-icon: "\e602"; }
2768
+ .@{prefix}-i-gamma { -ie7-icon: "\e600"; }
2769
+ .@{prefix}-i-remove { -ie7-icon: "\ed6a"; }
2770
+ .@{prefix}-i-codesample { -ie7-icon: "\e603"; }
2771
+ .@{prefix}-i-checkbox, .@{prefix}-i-selected {
2772
+ -ie7-icon: "\e033";
2773
+ }
2774
+
2775
+ .@{prefix}-i-selected { visibility: hidden; }
2776
+ .@{prefix}-i-backcolor { background: #BBB; }
2777
+