_splitter.scss.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js">@mixin extjs-splitter {
  19. .#{$prefix}splitter {
  20. .#{$prefix}collapse-el {
  21. position: absolute;
  22. cursor: pointer;
  23. background-color: transparent;
  24. background-repeat: no-repeat !important;
  25. }
  26. }
  27. .#{$prefix}layout-split-left,
  28. .#{$prefix}layout-split-right {
  29. top: 50%;
  30. margin-top: -17px;
  31. width: 5px;
  32. height: 35px;
  33. }
  34. .#{$prefix}layout-split-top,
  35. .#{$prefix}layout-split-bottom {
  36. left: 50%;
  37. width: 35px;
  38. height: 5px;
  39. margin-left: -17px;
  40. }
  41. .#{$prefix}layout-split-left {
  42. background: no-repeat top right;
  43. background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
  44. }
  45. .#{$prefix}layout-split-right {
  46. background: no-repeat top left;
  47. background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
  48. }
  49. .#{$prefix}layout-split-top {
  50. background: no-repeat top left;
  51. background-image: theme-background-image($theme-name, 'util/splitter/mini-top.gif');
  52. }
  53. .#{$prefix}layout-split-bottom {
  54. background: no-repeat top left;
  55. background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
  56. }
  57. .#{$prefix}splitter-collapsed {
  58. .#{$prefix}layout-split-left {
  59. background: no-repeat top left;
  60. background-image: theme-background-image($theme-name, 'util/splitter/mini-right.gif');
  61. }
  62. .#{$prefix}layout-split-right {
  63. background: no-repeat top right;
  64. background-image: theme-background-image($theme-name, 'util/splitter/mini-left.gif');
  65. }
  66. .#{$prefix}layout-split-top {
  67. background: no-repeat top left;
  68. background-image: theme-background-image($theme-name, 'util/splitter/mini-bottom.gif');
  69. }
  70. .#{$prefix}layout-split-bottom {
  71. background: no-repeat top left;
  72. background-image: theme-background-image($theme-name, 'util/splitter/mini-top.gif');
  73. }
  74. }
  75. .#{$prefix}splitter-horizontal {
  76. cursor: e-resize;
  77. cursor: row-resize;
  78. font-size:1px;
  79. }
  80. .#{$prefix}splitter-vertical {
  81. cursor: e-resize;
  82. cursor: col-resize;
  83. font-size:1px;
  84. }
  85. .#{$prefix}splitter-collapsed, .#{$prefix}splitter-horizontal-noresize, .#{$prefix}splitter-vertical-noresize {
  86. cursor: default;
  87. }
  88. .#{$prefix}splitter-active {
  89. z-index: 4;
  90. font-size:1px;
  91. background-color: rgb(180, 180, 180);
  92. @include opacity(0.8);
  93. }
  94. .#{$prefix}splitter-active {
  95. .#{$prefix}collapse-el {
  96. @include opacity(0.3);
  97. }
  98. }
  99. .#{$prefix}proxy-el {
  100. position: absolute;
  101. background: rgb(180, 180, 180);
  102. @include opacity(0.8);
  103. }
  104. }</pre>
  105. </body>
  106. </html>