_checks-radios.scss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /*************************
  2. * Check and Radio Items *
  3. *************************/
  4. // draw regular check and radio items using our PNG assets
  5. // all assets are rendered from assets.svg. never add pngs directly
  6. // unchecked
  7. @each $s,$un in ('','-unchecked'),
  8. (':hover', '-unchecked-hover'),
  9. (':active', '-unchecked-active'),
  10. (':backdrop', '-unchecked'),
  11. (':disabled', '-unchecked'),
  12. (':disabled:backdrop', '-unchecked') {
  13. check#{$s}{
  14. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")));
  15. -gtk-icon-shadow: none;
  16. }
  17. radio#{$s}{
  18. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")), -gtk-scaled(url("../assets/radio#{$un}.png"),url("../assets/radio#{$un}@2.png")));
  19. -gtk-icon-shadow: none;
  20. }
  21. }
  22. // checked
  23. @each $s,$ch in (':checked', '-checked'),
  24. (':checked:hover', '-checked-hover'),
  25. (':checked:active', '-checked-active'),
  26. (':checked:backdrop', '-checked'),
  27. (':checked:disabled', '-checked'),
  28. (':checked:disabled:backdrop', '-checked') {
  29. check#{$s}{
  30. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")));
  31. -gtk-icon-shadow: none;
  32. }
  33. radio#{$s}{
  34. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")), -gtk-scaled(url("../assets/radio#{$ch}.png"),url("../assets/radio#{$ch}@2.png")));
  35. -gtk-icon-shadow: none;
  36. }
  37. }
  38. // mixed
  39. @each $s,$mx in (':indeterminate', '-mixed'),
  40. (':indeterminate:hover', '-mixed-hover'),
  41. (':indeterminate:active', '-mixed-active'),
  42. (':indeterminate:backdrop', '-mixed'),
  43. (':indeterminate:disabled', '-mixed-insensitive'),
  44. (':indeterminate:disabled:backdrop', '-mixed-insensitive') {
  45. check#{$s}{
  46. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/checkbox#{$mx}.png"),url("../assets/checkbox#{$mx}@2.png")));
  47. -gtk-icon-shadow: none;
  48. }
  49. radio#{$s}{
  50. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")), -gtk-scaled(url("../assets/radio#{$mx}.png"),url("../assets/radio#{$mx}@2.png")));
  51. -gtk-icon-shadow: none;
  52. }
  53. }
  54. // unchecked:selected
  55. @each $s,$un in (':selected','-unchecked'),
  56. (':hover:selected', '-unchecked'),
  57. (':active:selected', '-unchecked'),
  58. (':backdrop:selected', '-unchecked'),
  59. (':disabled:selected', '-unchecked'),
  60. (':disabled:backdrop:selected', '-unchecked') {
  61. check#{$s}{
  62. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")), -gtk-scaled(url("../assets/checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png")));
  63. -gtk-icon-shadow: none;
  64. }
  65. radio#{$s}{
  66. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$un}.png"),url("../assets/selected-radio#{$un}@2.png")));
  67. -gtk-icon-shadow: none;
  68. }
  69. }
  70. // checked:selected
  71. @each $s,$ch in (':checked:selected', '-checked'),
  72. (':checked:hover:selected', '-checked'),
  73. (':checked:active:selected', '-checked'),
  74. (':checked:backdrop:selected', '-checked'),
  75. (':checked:disabled:selected', '-checked'),
  76. (':checked:disabled:backdrop:selected', '-checked') {
  77. check#{$s}{
  78. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")), -gtk-scaled(url("../assets/checkbox#{$ch}.png"),url("../assets/checkbox#{$ch}@2.png")));
  79. -gtk-icon-shadow: none;
  80. }
  81. radio#{$s}{
  82. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$ch}.png"),url("../assets/selected-radio#{$ch}@2.png")));
  83. -gtk-icon-shadow: none;
  84. }
  85. }
  86. // mixed:selected
  87. @each $s,$mx in (':indeterminate:selected', '-mixed'),
  88. (':indeterminate:hover:selected', '-mixed'),
  89. (':indeterminate:active:selected', '-mixed'),
  90. (':indeterminate:backdrop:selected', '-mixed'),
  91. (':indeterminate:disabled:selected', '-mixed'),
  92. (':indeterminate:disabled:backdrop:selected', '-mixed') {
  93. check#{$s}{
  94. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-checkbox#{$mx}.png"),url("../assets/selected-checkbox#{$mx}@2.png")));
  95. -gtk-icon-shadow: none;
  96. }
  97. radio#{$s}{
  98. -gtk-icon-source: if($variant == 'light', -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")), -gtk-scaled(url("../assets/selected-radio#{$mx}.png"),url("../assets/selected-radio#{$mx}@2.png")));
  99. -gtk-icon-shadow: none;
  100. }
  101. }
  102. // selection-mode unchecked
  103. @each $s,$un in ('','-unchecked'),
  104. (':hover', '-unchecked-hover'),
  105. (':active', '-unchecked-active'),
  106. (':backdrop', '-unchecked-backdrop'),
  107. (':disabled', '-unchecked-insensitive'),
  108. (':disabled:backdrop', '-unchecked-backdrop-insensitive') {
  109. .view.content-view check#{$s},
  110. .view.content-view.check#{$s}{
  111. -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-checkbox#{$un}.png"),url("../assets/checkbox#{$un}@2.png"));
  112. -gtk-icon-shadow: none;
  113. }
  114. .view.content-view radio#{$s},
  115. .view.content-view.radio#{$s}{
  116. -gtk-icon-source: -gtk-scaled(url("../assets/selection-mode-radio#{$un}.png"),url("../assets/radio#{$un}@2.png"));
  117. -gtk-icon-shadow: none;
  118. }
  119. }
  120. checkbutton.text-button, radiobutton.text-button {
  121. // this is for a nice focus on check and radios text
  122. padding: 2px 0;
  123. outline-offset: 0;
  124. label:not(:only-child) {
  125. &:first-child { margin-left: 4px; }
  126. &:last-child { margin-right: 4px; }
  127. }
  128. }
  129. check,
  130. radio {
  131. margin: 0 4px;
  132. min-height: 16px;
  133. min-width: 16px;
  134. border: none;
  135. menu menuitem & {
  136. margin: 0; // this is a workaround for a menu check/radio size allocation issue
  137. &, &:hover, &:disabled { //FIXME use button reset mixin
  138. min-height: 14px;
  139. min-width: 14px;
  140. background-image: none;
  141. background-color: transparent;
  142. box-shadow: none;
  143. -gtk-icon-shadow: none;
  144. color: inherit;
  145. border-color: currentColor;
  146. animation: none;
  147. }
  148. }
  149. }