Breadcrumb.scss 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. $breadcrumb-button-cmp-cls: dynamic('breadcrumb-');
  2. $breadcrumb-button-cmp-ui: dynamic('default');
  3. $breadcrumb-base-color: dynamic($base-color);
  4. $breadcrumb-glyph-color: dynamic(#f0f0f0);
  5. $breadcrumb-folder-glyph-color: dynamic($breadcrumb-glyph-color);
  6. $breadcrumb-leaf-glyph-color: dynamic($breadcrumb-glyph-color);
  7. $breadcrumb-split-border-width: dynamic(1px);
  8. $breadcrumb-button-spacing: dynamic(3px);
  9. $button-breadcrumb-color: dynamic($button-default-color);
  10. $button-breadcrumb-color-over: dynamic($button-default-color-over);
  11. $button-breadcrumb-color-focus: dynamic($button-default-color-focus);
  12. $button-breadcrumb-color-focus-over: dynamic($button-default-color-focus-over);
  13. $button-breadcrumb-color-pressed: dynamic($button-default-color-pressed);
  14. $button-breadcrumb-color-pressed-over: dynamic($button-default-color-pressed-over);
  15. $button-breadcrumb-color-focus-pressed: dynamic($button-default-color-focus-pressed);
  16. $button-breadcrumb-color-disabled: dynamic($button-default-color-disabled);
  17. $button-breadcrumb-background-color: dynamic(transparent);
  18. $button-breadcrumb-background-color-over: dynamic(#aeaeae);
  19. $button-breadcrumb-background-color-focus: dynamic($button-default-background-color-focus);
  20. $button-breadcrumb-background-color-pressed: dynamic(#e6e6e6);
  21. $button-breadcrumb-background-color-pressed-over: dynamic($button-default-background-color-pressed-over);
  22. $button-breadcrumb-background-color-focus-over: dynamic($button-default-background-color-focus);
  23. $button-breadcrumb-background-color-focus-pressed: dynamic($button-default-background-color-focus-pressed);
  24. $button-breadcrumb-background-color-disabled: dynamic(transparent);
  25. $button-breadcrumb-focus-over-border-width: dynamic($button-default-focus-over-border-width);
  26. $button-breadcrumb-focus-over-border-color: dynamic($button-default-focus-over-border-color);
  27. $button-breadcrumb-opacity-disabled: dynamic($button-toolbar-opacity-disabled);
  28. @mixin extjs-breadcrumb-graphite-ui (
  29. $ui: null,
  30. $color: null,
  31. $color-over: null,
  32. $color-focus: null,
  33. $color-focus-over: null,
  34. $color-pressed: null,
  35. $color-pressed-over: null,
  36. $color-focus-pressed: null,
  37. $background-color: null,
  38. $background-color-over: null,
  39. $background-color-focus: null,
  40. $background-color-focus-over: null,
  41. $background-color-pressed: null,
  42. $background-color-pressed-over: null,
  43. $background-color-focus-pressed: null,
  44. $inner-border-width-focus-over: null,
  45. $inner-border-color-focus-over: null,
  46. $opacity-disabled: null
  47. ) {
  48. $button-ui: '#{$ui}-small';
  49. .#{$prefix}breadcrumb-btn.#{$prefix}btn-#{$button-ui} {
  50. background-color: $background-color;
  51. .#{$prefix}btn-wrap-#{$button-ui} {
  52. &.#{$prefix}btn-arrow:after {
  53. background: none !important;
  54. @include font-icon($breadcrumb-arrow-glyph, $pseudo: false);
  55. }
  56. &.#{$prefix}btn-arrow:after,
  57. &.#{$prefix}btn-split:after {
  58. color: $color;
  59. }
  60. .#{$prefix}btn-inner-#{$button-ui} {
  61. color: $color;
  62. }
  63. .#{$prefix}btn-icon-el-#{$button-ui} {
  64. color: $color;
  65. }
  66. }
  67. &.#{$prefix}btn-over {
  68. background-color: $background-color-over;
  69. .#{$prefix}btn-wrap-#{$button-ui} {
  70. &.#{$prefix}btn-arrow:after,
  71. &.#{$prefix}btn-split:after {
  72. color: $color-over;
  73. }
  74. .#{$prefix}btn-inner-#{$button-ui} {
  75. color: $color-over;
  76. }
  77. .#{$prefix}btn-icon-el-#{$button-ui} {
  78. color: $color-over;
  79. }
  80. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  81. content: none;
  82. }
  83. }
  84. }
  85. &.#{$prefix}btn-pressed,
  86. &.#{$prefix}btn-menu-active {
  87. background-color: $background-color-pressed;
  88. .#{$prefix}btn-wrap-#{$button-ui} {
  89. &.#{$prefix}btn-arrow:after {
  90. background: none !important;
  91. @include font-icon($breadcrumb-arrow-expanded-glyph, $pseudo: false);
  92. }
  93. &.#{$prefix}btn-arrow:after,
  94. &.#{$prefix}btn-split:after {
  95. color: $color-pressed;
  96. }
  97. .#{$prefix}btn-inner-#{$button-ui} {
  98. color: $color-pressed;
  99. }
  100. .#{$prefix}btn-icon-el-#{$button-ui} {
  101. color: $color-pressed;
  102. }
  103. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  104. content: none;
  105. }
  106. }
  107. &.#{$prefix}btn-over {
  108. background-color: $background-color-pressed-over;
  109. .#{$prefix}btn-wrap-#{$button-ui} {
  110. &.#{$prefix}btn-arrow:after,
  111. &.#{$prefix}btn-split:after {
  112. color: $color-pressed-over;
  113. }
  114. .#{$prefix}btn-inner-#{$button-ui} {
  115. color: $color-pressed-over;
  116. }
  117. .#{$prefix}btn-icon-el-#{$button-ui} {
  118. color: $color-pressed-over;
  119. }
  120. }
  121. }
  122. }
  123. // TODO Breadcrumb buttons are not supposed to have their arrow el focused
  124. .#{$prefix}keyboard-mode &.#{$prefix}btn-focus,
  125. .#{$prefix}keyboard-mode &.#{$prefix}arrow-focus {
  126. background-color: $background-color-focus;
  127. .#{$prefix}btn-wrap-#{$button-ui} {
  128. &.#{$prefix}btn-arrow:after,
  129. &.#{$prefix}btn-split:after {
  130. color: $color-focus;
  131. }
  132. .#{$prefix}btn-inner-#{$button-ui} {
  133. color: $color-focus;
  134. }
  135. .#{$prefix}btn-icon-el-#{$button-ui} {
  136. color: $color-focus;
  137. }
  138. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  139. content: none;
  140. }
  141. }
  142. &.#{$prefix}btn-over {
  143. background-color: $background-color-focus-over;
  144. @include inner-border($inner-border-width-focus-over, $inner-border-color-focus-over);
  145. .#{$prefix}btn-wrap-#{$button-ui} {
  146. &.#{$prefix}btn-arrow:after,
  147. &.#{$prefix}btn-split:after {
  148. color: $color-focus-over;
  149. }
  150. .#{$prefix}btn-inner-#{$button-ui} {
  151. color: $color-focus-over;
  152. }
  153. .#{$prefix}btn-icon-el-#{$button-ui} {
  154. color: $color-focus-over;
  155. }
  156. }
  157. }
  158. &.#{$prefix}btn-pressed,
  159. &.#{$prefix}btn-menu-active {
  160. background-color: $background-color-focus-pressed;
  161. .#{$prefix}btn-wrap-#{$button-ui} {
  162. &.#{$prefix}btn-arrow:after,
  163. &.#{$prefix}btn-split:after {
  164. color: $color-focus-pressed;
  165. }
  166. .#{$prefix}btn-inner-#{$button-ui} {
  167. color: $color-focus-pressed;
  168. }
  169. .#{$prefix}btn-icon-el-#{$button-ui} {
  170. color: $color-focus-pressed;
  171. }
  172. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  173. content: none;
  174. }
  175. }
  176. &.#{$prefix}btn-over {
  177. background-color: $background-color-focus-pressed;
  178. .#{$prefix}btn-wrap-#{$button-ui} {
  179. &.#{$prefix}btn-arrow:after,
  180. &.#{$prefix}btn-split:after {
  181. color: $color-focus-pressed;
  182. }
  183. .#{$prefix}btn-inner-#{$button-ui} {
  184. color: $color-focus-pressed;
  185. }
  186. .#{$prefix}btn-icon-el-#{$button-ui} {
  187. color: $color-focus-pressed;
  188. }
  189. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  190. content: none;
  191. }
  192. }
  193. }
  194. }
  195. }
  196. &.#{$prefix}btn-disabled {
  197. background-color: rgba($background-color, $opacity-disabled);
  198. .#{$prefix}btn-wrap-#{$button-ui} {
  199. &.#{$prefix}btn-arrow:after,
  200. &.#{$prefix}btn-split:after {
  201. color: rgba($color, $opacity-disabled);
  202. }
  203. .#{$prefix}btn-inner-#{$button-ui} {
  204. color: rgba($color, $opacity-disabled);
  205. }
  206. .#{$prefix}btn-icon-el-#{$button-ui} {
  207. color: rgba($color, $opacity-disabled);
  208. }
  209. &.#{$prefix}btn-split .#{$prefix}btn-button:after {
  210. content: none;
  211. }
  212. }
  213. }
  214. }
  215. }