richcombo.css 5.1 KB

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