slicer.scss 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. //
  2. // Copyright (c) 2013. Sencha Inc.
  3. //
  4. $slicer-gen: map_create() !default;
  5. $slicer-map: map_create() !default;
  6. $slicer-map-size: 0 !default;
  7. @function sliceit($cls, $kind, $path, $extension) {
  8. $url: theme-background-image($path, $extension, true);
  9. @if $url != none {
  10. $op: $kind + ':' + $url;
  11. $slice: add-slice($cls, $op);
  12. }
  13. @return $url;
  14. }
  15. @function add-slice($cls, $op) {
  16. $cls: quote($cls);
  17. $slices: map_get($slicer-map, $cls);
  18. @if $slices == '' {
  19. $slices: unquote($op);
  20. $slicer-map-size: $slicer-map-size + 1;
  21. } @else {
  22. $slices: append($slices, unquote($op), comma);
  23. }
  24. @return map_put($slicer-map, $cls, $slices);
  25. }
  26. @function slicer-background-image($cls, $path, $extension: $slicer-image-extension) {
  27. @return sliceit($cls, 'bg', $path, $extension);
  28. }
  29. @function slicer-background-image-rtl($cls, $path, $extension: $slicer-image-extension) {
  30. @return sliceit($cls, 'bg-rtl', $path, $extension);
  31. }
  32. @function slicer-frame-background-image($cls, $path, $extension: $slicer-image-extension) {
  33. @return sliceit($cls, 'frame-bg', $path, $extension);
  34. }
  35. @function slicer-frame-background-image-rtl($cls, $path, $extension: $slicer-image-extension) {
  36. @return sliceit($cls, 'frame-bg-rtl', $path, $extension);
  37. }
  38. @function slicer-corner-sprite($cls, $path, $extension: $slicer-image-extension) {
  39. @return sliceit($cls, 'corners', $path, $extension);
  40. }
  41. @function slicer-corner-sprite-rtl($cls, $path, $extension: $slicer-image-extension) {
  42. @return sliceit($cls, 'corners-rtl', $path, $extension);
  43. }
  44. @function slicer-sides-sprite($cls, $path, $extension: $slicer-image-extension) {
  45. @return sliceit($cls, 'sides', $path, $extension);
  46. }
  47. @function slicer-sides-sprite-rtl($cls, $path, $extension: $slicer-image-extension) {
  48. @return sliceit($cls, 'sides-rtl', $path, $extension);
  49. }
  50. @function slicer-frame($cls, $frame-info) {
  51. @return add-slice($cls, 'frame:' + $frame-info);
  52. }
  53. @function slicer-background-stretch($cls, $stretch) {
  54. @return add-slice($cls, 'stretch:' + $stretch);
  55. }
  56. @mixin x-slicer($cls) {
  57. $cls: quote($cls);
  58. $slices: map_get($slicer-map, $cls);
  59. @if $slices != '' {
  60. // We don't need to use the $prefix for x-cmd-slicer and doing so would make it
  61. // difficult for Cmd to know what class to add...
  62. /*<if slicer>*/
  63. .x-cmd-slicer.#{$prefix}#{$cls}:before {
  64. display: none;
  65. // We need to override content when slicing:
  66. content: "x-slicer:#{$slices}" !important;
  67. }
  68. /*</if slicer>*/
  69. // add a comment line to ensure the end directive gets its own line
  70. /* */
  71. }
  72. }