]>
Commit | Line | Data |
---|---|---|
1 | /*\r | |
2 | Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r | |
3 | For licensing, see LICENSE.md or http://ckeditor.com/license\r | |
4 | */\r | |
5 | \r | |
6 | /*\r | |
7 | richcombo.css (part of editor.css)\r | |
8 | =================================\r | |
9 | \r | |
10 | This file holds the style set of the "Rich Combo" widget which is commonly used\r | |
11 | in the toolbar. It doesn't, however, styles the panel that is displayed when\r | |
12 | clicking on the combo, which is instead styled by panel.css.\r | |
13 | \r | |
14 | The visual representation of a rich combo widget looks as follows:\r | |
15 | \r | |
16 | +-- .cke_combo----------------------------------------------------------------------+\r | |
17 | | +-- .cke_combo_label --+ +-- .cke_combo_button ---------------------------------+ |\r | |
18 | | | | | +-- .cke_combo_text --+ +-- .cke_combo_open -------+ | |\r | |
19 | | | | | | | | +-- .cke_combo_arrow --+ | | |\r | |
20 | | | | | | | | | | | | |\r | |
21 | | | | | | | | +----------------------+ | | |\r | |
22 | | | | | +---------------------+ +--------------------------+ | |\r | |
23 | | +----------------------+ +------------------------------------------------------+ |\r | |
24 | +-----------------------------------------------------------------------------------+\r | |
25 | */\r | |
26 | \r | |
27 | /* The box that hold the entire combo widget */\r | |
28 | .cke_combo\r | |
29 | {\r | |
30 | display: inline-block;\r | |
31 | float: left;\r | |
32 | }\r | |
33 | \r | |
34 | .cke_rtl .cke_combo\r | |
35 | {\r | |
36 | float: right;\r | |
37 | }\r | |
38 | \r | |
39 | .cke_hc .cke_combo\r | |
40 | {\r | |
41 | margin-top: -2px;\r | |
42 | }\r | |
43 | \r | |
44 | /* The label of the combo widget. It is invisible by default, yet\r | |
45 | it's important for semantics and accessibility. */\r | |
46 | .cke_combo_label\r | |
47 | {\r | |
48 | display: none;\r | |
49 | float: left;\r | |
50 | line-height: 26px;\r | |
51 | vertical-align: top;\r | |
52 | margin-right: 5px;\r | |
53 | }\r | |
54 | \r | |
55 | .cke_rtl .cke_combo_label\r | |
56 | {\r | |
57 | float: right;\r | |
58 | margin-left: 5px;\r | |
59 | margin-right: 0;\r | |
60 | }\r | |
61 | \r | |
62 | /* The container for combo text and arrow. */\r | |
63 | a.cke_combo_button\r | |
64 | {\r | |
65 | cursor: default;\r | |
66 | display: inline-block;\r | |
67 | float: left;\r | |
68 | margin: 0 6px 5px 0;\r | |
69 | \r | |
70 | border: 1px solid #a6a6a6;\r | |
71 | border-bottom-color: #979797;\r | |
72 | \r | |
73 | border-radius: 3px;\r | |
74 | \r | |
75 | box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.15) inset, 0 1px 0 rgba(255,255,255,.15) inset;\r | |
76 | \r | |
77 | background: #e4e4e4;\r | |
78 | background-image: linear-gradient(to bottom, #ffffff, #e4e4e4);\r | |
79 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#ffffff', endColorstr='#e4e4e4');\r | |
80 | }\r | |
81 | \r | |
82 | /* Different states of the container. */\r | |
83 | .cke_combo_off a.cke_combo_button:hover,\r | |
84 | .cke_combo_off a.cke_combo_button:focus\r | |
85 | {\r | |
86 | background: #ccc;\r | |
87 | background-image: linear-gradient(to bottom, #f2f2f2, #ccc);\r | |
88 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');\r | |
89 | \r | |
90 | outline: none;\r | |
91 | }\r | |
92 | \r | |
93 | .cke_combo_off a.cke_combo_button:active,\r | |
94 | .cke_combo_on a.cke_combo_button\r | |
95 | {\r | |
96 | border: 1px solid #777;\r | |
97 | \r | |
98 | box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.6) inset;\r | |
99 | \r | |
100 | background: #b5b5b5;\r | |
101 | background-image: linear-gradient(to bottom, #aaa, #cacaca);\r | |
102 | filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#aaaaaa', endColorstr='#cacaca');\r | |
103 | }\r | |
104 | \r | |
105 | .cke_combo_on a.cke_combo_button:hover,\r | |
106 | .cke_combo_on a.cke_combo_button:focus,\r | |
107 | .cke_combo_on a.cke_combo_button:active\r | |
108 | {\r | |
109 | box-shadow: 0 1px 6px rgba(0,0,0,.7) inset, 0 1px 0 rgba(0,0,0,.2);\r | |
110 | }\r | |
111 | \r | |
112 | .cke_rtl .cke_combo_button\r | |
113 | {\r | |
114 | float: right;\r | |
115 | margin-left: 5px;\r | |
116 | margin-right: 0;\r | |
117 | }\r | |
118 | \r | |
119 | .cke_hc a.cke_combo_button\r | |
120 | {\r | |
121 | padding: 3px;\r | |
122 | }\r | |
123 | \r | |
124 | .cke_hc .cke_combo_on a.cke_combo_button,\r | |
125 | .cke_hc .cke_combo_off a.cke_combo_button:hover,\r | |
126 | .cke_hc .cke_combo_off a.cke_combo_button:focus,\r | |
127 | .cke_hc .cke_combo_off a.cke_combo_button:active\r | |
128 | {\r | |
129 | border-width: 3px;\r | |
130 | padding: 1px;\r | |
131 | }\r | |
132 | \r | |
133 | /* The label that shows the current value of the rich combo.\r | |
134 | By default, it holds the name of the property.\r | |
135 | See: .cke_combo_inlinelabel */\r | |
136 | .cke_combo_text\r | |
137 | {\r | |
138 | line-height: 26px;\r | |
139 | padding-left: 10px;\r | |
140 | text-overflow: ellipsis;\r | |
141 | overflow: hidden;\r | |
142 | float: left;\r | |
143 | cursor: default;\r | |
144 | color: #474747;\r | |
145 | text-shadow: 0 1px 0 rgba(255,255,255,.5);\r | |
146 | width: 60px;\r | |
147 | }\r | |
148 | \r | |
149 | .cke_rtl .cke_combo_text\r | |
150 | {\r | |
151 | float: right;\r | |
152 | text-align: right;\r | |
153 | padding-left: 0;\r | |
154 | padding-right: 10px;\r | |
155 | }\r | |
156 | \r | |
157 | .cke_hc .cke_combo_text\r | |
158 | {\r | |
159 | line-height: 18px;\r | |
160 | font-size: 12px;\r | |
161 | }\r | |
162 | \r | |
163 | /* The handler which opens the panel of rich combo properties.\r | |
164 | It holds an arrow as a visual indicator. */\r | |
165 | .cke_combo_open\r | |
166 | {\r | |
167 | cursor: default;\r | |
168 | display: inline-block;\r | |
169 | font-size: 0;\r | |
170 | height: 19px;\r | |
171 | line-height: 17px;\r | |
172 | margin: 1px 7px 1px;\r | |
173 | width: 5px;\r | |
174 | }\r | |
175 | \r | |
176 | .cke_hc .cke_combo_open\r | |
177 | {\r | |
178 | height: 12px;\r | |
179 | }\r | |
180 | \r | |
181 | /* The arrow which is displayed inside of the .cke_combo_open handler. */\r | |
182 | .cke_combo_arrow\r | |
183 | {\r | |
184 | cursor: default;\r | |
185 | margin: 11px 0 0;\r | |
186 | float: left;\r | |
187 | \r | |
188 | /* Pure CSS Arrow */\r | |
189 | height: 0;\r | |
190 | width: 0;\r | |
191 | font-size: 0;\r | |
192 | border-left: 3px solid transparent;\r | |
193 | border-right: 3px solid transparent;\r | |
194 | border-top: 3px solid #474747;\r | |
195 | }\r | |
196 | \r | |
197 | .cke_hc .cke_combo_arrow\r | |
198 | {\r | |
199 | font-size: 10px;\r | |
200 | width: auto;\r | |
201 | border: 0;\r | |
202 | margin-top: 3px;\r | |
203 | }\r | |
204 | \r | |
205 | /* Disabled combo button styles. */\r | |
206 | .cke_combo_disabled .cke_combo_inlinelabel,\r | |
207 | .cke_combo_disabled .cke_combo_open\r | |
208 | {\r | |
209 | opacity: 0.3;\r | |
210 | }\r |