CheckItem.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. /**
  2. * @class Ext.menu.CheckItem
  3. */
  4. /**
  5. * @var {color}
  6. * Menu CheckItem text color
  7. */
  8. $menucheckitem-color: dynamic(null);
  9. /**
  10. * @var {color}
  11. * Menu CheckItem text color when active
  12. */
  13. $menucheckitem-active-color: dynamic(null);
  14. /**
  15. * @var {color}
  16. * Menu CheckItem text color when disabled
  17. */
  18. $menucheckitem-disabled-color: dynamic(null);
  19. /**
  20. * @var {color}
  21. * Menu CheckItem background-color
  22. */
  23. $menucheckitem-background-color: dynamic(null);
  24. /**
  25. * @var {color}
  26. * Menu CheckItem background-color when active
  27. */
  28. $menucheckitem-active-background-color: dynamic(null);
  29. /**
  30. * @var {color}
  31. * Menu CheckItem background-color when disabled
  32. */
  33. $menucheckitem-disabled-background-color: dynamic(null);
  34. /**
  35. * @var {string/number}
  36. * Menu CheckItem font-weight
  37. */
  38. $menucheckitem-font-weight: dynamic(null);
  39. /**
  40. * @var {number}
  41. * Menu CheckItem font-size
  42. */
  43. $menucheckitem-font-size: dynamic(null);
  44. /**
  45. * @var {number}
  46. * Menu CheckItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  47. */
  48. $menucheckitem-font-size-big: dynamic(null);
  49. /**
  50. * @var {string}
  51. * Menu CheckItem font-family
  52. */
  53. $menucheckitem-font-family: dynamic(null);
  54. /**
  55. * @var {number}
  56. * Menu CheckItem height
  57. */
  58. $menucheckitem-height: dynamic(null);
  59. /**
  60. * @var {number}
  61. * Menu CheckItem height in the {@link Global_CSS#$enable-big big} sizing scheme
  62. */
  63. $menucheckitem-height-big: dynamic(null);
  64. /**
  65. * @var {string}
  66. * Menu CheckItem cursor
  67. */
  68. $menucheckitem-cursor: dynamic(null);
  69. /**
  70. * @var {string}
  71. * Menu CheckItem cursor when disabled
  72. */
  73. $menucheckitem-disabled-cursor: dynamic(null);
  74. /**
  75. * @var {number}
  76. * Menu item outline-width when focused
  77. */
  78. $menucheckitem-focused-outline-width: dynamic(null);
  79. /**
  80. * @var {string}
  81. * Menu item outline-style when focused
  82. */
  83. $menucheckitem-focused-outline-style: dynamic(null);
  84. /**
  85. * @var {color}
  86. * Menu item outline-color when focused
  87. */
  88. $menucheckitem-focused-outline-color: dynamic(null);
  89. /**
  90. * @var {color}
  91. * Menu item outline-offset when focused
  92. */
  93. $menucheckitem-focused-outline-offset: dynamic(null);
  94. /**
  95. * @var {number}
  96. * The opacity of disabled {@link Ext.menu.Item Menu CheckItems}
  97. */
  98. $menucheckitem-disabled-opacity: dynamic(null);
  99. /**
  100. * @var {color}
  101. * Menu CheckItem icon color
  102. */
  103. $menucheckitem-icon-color: dynamic(null);
  104. /**
  105. * @var {color}
  106. * Menu CheckItem icon color when active
  107. */
  108. $menucheckitem-active-icon-color: dynamic(null);
  109. /**
  110. * @var {color}
  111. * Menu CheckItem icon color when disabled
  112. */
  113. $menucheckitem-disabled-icon-color: dynamic(null);
  114. /**
  115. * @var {number}
  116. * Menu CheckItem icon size
  117. */
  118. $menucheckitem-icon-size: dynamic(null);
  119. /**
  120. * @var {number}
  121. * Menu CheckItem icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  122. */
  123. $menucheckitem-icon-size-big: dynamic(null);
  124. /**
  125. * @var {number}
  126. * Menu CheckItem icon font-size
  127. */
  128. $menucheckitem-icon-font-size: dynamic(null);
  129. /**
  130. * @var {number}
  131. * Menu CheckItem icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  132. */
  133. $menucheckitem-icon-font-size-big: dynamic(null);
  134. /**
  135. * @var {string}
  136. * Menu CheckItem arrow icon
  137. */
  138. $menucheckitem-arrow-icon: dynamic(null);
  139. /**
  140. * @var {color}
  141. * Menu CheckItem arrow icon color
  142. */
  143. $menucheckitem-arrow-icon-color: dynamic($menucheckitem-icon-color);
  144. /**
  145. * @var {color}
  146. * Menu CheckItem arrow icon color when active
  147. */
  148. $menucheckitem-active-arrow-icon-color: dynamic($menucheckitem-active-icon-color);
  149. /**
  150. * @var {color}
  151. * Menu CheckItem arrow icon color when disabled
  152. */
  153. $menucheckitem-disabled-arrow-icon-color: dynamic($menucheckitem-disabled-icon-color);
  154. /**
  155. * @var {number}
  156. * Menu CheckItem arrow icon size
  157. */
  158. $menucheckitem-arrow-icon-size: dynamic($menucheckitem-icon-size);
  159. /**
  160. * @var {number}
  161. * Menu CheckItem arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  162. */
  163. $menucheckitem-arrow-icon-size-big: dynamic($menucheckitem-icon-size-big);
  164. /**
  165. * @var {number}
  166. * Menu CheckItem arrow icon font-size
  167. */
  168. $menucheckitem-arrow-icon-font-size: dynamic(null);
  169. /**
  170. * @var {number}
  171. * Menu CheckItem arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  172. */
  173. $menucheckitem-arrow-icon-font-size-big: dynamic(null);
  174. /**
  175. * @var {number/list}
  176. * Menu CheckItem arrow icon margin
  177. */
  178. $menucheckitem-arrow-icon-margin: dynamic(null);
  179. /**
  180. * @var {number/list}
  181. * Menu CheckItem arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
  182. */
  183. $menucheckitem-arrow-icon-margin-big: dynamic(null);
  184. /**
  185. * @var {string/list}
  186. * Menu CheckItem checkbox icon
  187. */
  188. $menucheckitem-checkbox-icon: dynamic($checkboxfield-checkbox-icon);
  189. /**
  190. * @var {string/list}
  191. * Menu CheckItem checkbox icon when checked
  192. */
  193. $menucheckitem-checked-checkbox-icon: dynamic($checkboxfield-checked-checkbox-icon);
  194. /**
  195. * @var {color}
  196. * Menu CheckItem checkbox color
  197. */
  198. $menucheckitem-checkbox-color: dynamic($menucheckitem-icon-color or $menuitem-icon-color);
  199. /**
  200. * @var {color}
  201. * Menu CheckItem checkbox color when active
  202. */
  203. $menucheckitem-active-checkbox-color: dynamic($menucheckitem-active-icon-color or $menuitem-active-icon-color);
  204. /**
  205. * @var {color}
  206. * Menu CheckItem checkbox color when disabled
  207. */
  208. $menucheckitem-disabled-checkbox-color: dynamic($menucheckitem-disabled-icon-color or $menuitem-disabled-icon-color);
  209. /**
  210. * @var {number}
  211. * Menu CheckItem checkbox size
  212. */
  213. $menucheckitem-checkbox-size: dynamic($checkboxfield-checkbox-size);
  214. /**
  215. * @var {number}
  216. * Menu CheckItem checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
  217. */
  218. $menucheckitem-checkbox-size-big: dynamic($checkboxfield-checkbox-size-big);
  219. /**
  220. * @var {number}
  221. * Menu CheckItem checkbox font size
  222. */
  223. $menucheckitem-checkbox-font-size: dynamic(null);
  224. /**
  225. * @var {number}
  226. * Menu CheckItem checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme
  227. */
  228. $menucheckitem-checkbox-font-size-big: dynamic(null);
  229. /**
  230. * Creates a visual theme for a Menu CheckItem.
  231. *
  232. * @param {string} $ui
  233. * The name of the UI being created. Can not included spaces or special punctuation
  234. * (used in CSS class names).
  235. *
  236. * @param {String} [$xtype=menucheckitem] (protected) The {@link Ext.Class#xtype} to use
  237. * in CSS selectors. For use by UI mixins of derived classes.
  238. *
  239. * @param {color} $color
  240. * Menu CheckItem text color
  241. *
  242. * @param {color} $active-color
  243. * Menu CheckItem text color when active
  244. *
  245. * @param {color} $disabled-color
  246. * Menu CheckItem text color when disabled
  247. *
  248. * @param {color} $background-color
  249. * Menu CheckItem background-color
  250. *
  251. * @param {color} $active-background-color
  252. * Menu CheckItem background-color when active
  253. *
  254. * @param {color} $disabled-background-color
  255. * Menu CheckItem background-color when disabled
  256. *
  257. * @param {string/number} $font-weight
  258. * Menu CheckItem font-weight
  259. *
  260. * @param {number} $font-size
  261. * Menu CheckItem font-size
  262. *
  263. * @param {number} $font-size-big
  264. * Menu CheckItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  265. *
  266. * @param {string} $font-family
  267. * Menu CheckItem font-family
  268. *
  269. * @param {number} $height
  270. * Menu CheckItem height
  271. *
  272. * @param {number} $height-big
  273. * Menu CheckItem height in the {@link Global_CSS#$enable-big big} sizing scheme
  274. *
  275. * @param {string} $cursor
  276. * Menu CheckItem cursor
  277. *
  278. * @param {string} $disabled-cursor
  279. * Menu CheckItem cursor when disabled
  280. *
  281. * @param {number} $focused-outline-width
  282. * Menu item outline-width when focused
  283. *
  284. * @param {string} $focused-outline-style
  285. * Menu item outline-style when focused
  286. *
  287. * @param {color} $focused-outline-color
  288. * Menu item outline-color when focused
  289. *
  290. * @param {color} $focused-outline-offset
  291. * Menu item outline-offset when focused
  292. *
  293. * @param {number} $disabled-opacity
  294. * The opacity of disabled {@link Ext.menu.Item Menu CheckItems}
  295. *
  296. * @param {color} $icon-color
  297. * Menu CheckItem icon color
  298. *
  299. * @param {color} $active-icon-color
  300. * Menu CheckItem icon color when active
  301. *
  302. * @param {color} $disabled-icon-color
  303. * Menu CheckItem icon color when disabled
  304. *
  305. * @param {number} $icon-size
  306. * Menu CheckItem icon size
  307. *
  308. * @param {number} $icon-size-big
  309. * Menu CheckItem icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  310. *
  311. * @param {number} $icon-font-size
  312. * Menu CheckItem icon font-size
  313. *
  314. * @param {number} $icon-font-size-big
  315. * Menu CheckItem icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  316. *
  317. * @param {string} $arrow-icon
  318. * Menu CheckItem arrow icon
  319. *
  320. * @param {color} $arrow-icon-color
  321. * Menu CheckItem arrow icon color
  322. *
  323. * @param {color} $active-arrow-icon-color
  324. * Menu CheckItem arrow icon color when active
  325. *
  326. * @param {color} $disabled-arrow-icon-color
  327. * Menu CheckItem arrow icon color when disabled
  328. *
  329. * @param {number} $arrow-icon-size
  330. * Menu CheckItem arrow icon size
  331. *
  332. * @param {number} $arrow-icon-size-big
  333. * Menu CheckItem arrow icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  334. *
  335. * @param {number} $arrow-icon-font-size
  336. * Menu CheckItem arrow icon font-size
  337. *
  338. * @param {number} $arrow-icon-font-size-big
  339. * Menu CheckItem arrow icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  340. *
  341. * @param {number/list} $arrow-icon-margin
  342. * Menu CheckItem arrow icon margin
  343. *
  344. * @param {number/list} $arrow-icon-margin-big
  345. * Menu CheckItem arrow icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
  346. *
  347. * @param {string/list} $checkbox-icon
  348. * Menu CheckItem checkbox icon
  349. *
  350. * @param {string/list} $checked-checkbox-icon
  351. * Menu CheckItem checkbox icon when checked
  352. *
  353. * @param {color} $checkbox-color
  354. * Menu CheckItem checkbox color
  355. *
  356. * @param {color} $active-checkbox-color
  357. * Menu CheckItem checkbox color when active
  358. *
  359. * @param {color} $disabled-checkbox-color
  360. * Menu CheckItem checkbox color when disabled
  361. *
  362. * @param {number} $checkbox-size
  363. * Menu CheckItem checkbox size
  364. *
  365. * @param {number} $checkbox-size-big
  366. * Menu CheckItem checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
  367. *
  368. * @param {number} $checkbox-font-size
  369. * Menu CheckItem checkbox font size
  370. *
  371. * @param {number} $checkbox-font-size-big
  372. * Menu CheckItem checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme
  373. */
  374. @mixin menucheckitem-ui(
  375. $ui: null,
  376. $xtype: menucheckitem,
  377. $color: null,
  378. $active-color: null,
  379. $disabled-color: null,
  380. $background-color: null,
  381. $active-background-color: null,
  382. $disabled-background-color: null,
  383. $font-weight: null,
  384. $font-size: null,
  385. $font-size-big: null,
  386. $font-family: null,
  387. $height: null,
  388. $height-big: null,
  389. $cursor: null,
  390. $disabled-cursor: null,
  391. $focused-outline-width: null,
  392. $focused-outline-style: null,
  393. $focused-outline-color: null,
  394. $focused-outline-offset: null,
  395. $disabled-opacity: null,
  396. $icon-color: null,
  397. $active-icon-color: null,
  398. $disabled-icon-color: null,
  399. $icon-size: null,
  400. $icon-size-big: null,
  401. $icon-font-size: null,
  402. $icon-font-size-big: null,
  403. $arrow-icon: null,
  404. $arrow-icon-color: null,
  405. $active-arrow-icon-color: null,
  406. $disabled-arrow-icon-color: null,
  407. $arrow-icon-size: null,
  408. $arrow-icon-size-big: null,
  409. $arrow-icon-font-size: null,
  410. $arrow-icon-font-size-big: null,
  411. $arrow-icon-margin: null,
  412. $arrow-icon-margin-big: null,
  413. $checkbox-icon: null,
  414. $checked-checkbox-icon: null,
  415. $checkbox-color: null,
  416. $active-checkbox-color: null,
  417. $disabled-checkbox-color: null,
  418. $checkbox-size: null,
  419. $checkbox-size-big: null,
  420. $checkbox-font-size: null,
  421. $checkbox-font-size-big: null
  422. ) {
  423. $ui-suffix: ui-suffix($ui);
  424. $arguments: intersect-arguments(menucheckitem-ui, menuitem-ui);
  425. @include menuitem-ui($arguments...);
  426. .#{$prefix}#{$xtype}#{$ui-suffix} {
  427. .#{$prefix}checkbox-icon-el {
  428. @include icon(
  429. $icon: $checkbox-icon,
  430. $color: $checkbox-color,
  431. $size: $checkbox-size,
  432. $size-big: $checkbox-size-big,
  433. $font-size: $checkbox-font-size,
  434. $font-size-big: $checkbox-font-size-big
  435. );
  436. }
  437. &.#{$prefix}checked {
  438. .#{$prefix}checkbox-icon-el {
  439. @include icon($checked-checkbox-icon);
  440. }
  441. }
  442. &.#{$prefix}active {
  443. .#{$prefix}checkbox-icon-el {
  444. color: $active-checkbox-color;
  445. }
  446. }
  447. &.#{$prefix}disabled {
  448. .#{$prefix}checkbox-icon-el {
  449. color: $disabled-checkbox-color;
  450. }
  451. }
  452. }
  453. }