_window.scss 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. @mixin extjs-window {
  2. .#{$prefix}window {
  3. @extend .outline-none;
  4. }
  5. .#{$prefix}window-wrap {
  6. position: relative;
  7. }
  8. .#{$prefix}window-body {
  9. position: relative;
  10. overflow: hidden;
  11. // border-style: $window-body-border-style;
  12. }
  13. // Maximized window
  14. .#{$prefix}window-maximized {
  15. .#{$prefix}window-wrap {
  16. .#{$prefix}window-header {
  17. @include important-no-border-radius;
  18. }
  19. }
  20. }
  21. // Collapsed window header styles
  22. .#{$prefix}window-collapsed {
  23. .#{$prefix}window-header-vertical, .#{$prefix}window-header-horizontal {
  24. @include border-radius($window-border-radius);
  25. }
  26. // // Padding changes for collapsed headers.
  27. // .#{$prefix}window-header-left {
  28. // padding-right: $window-border-radius;
  29. // }
  30. // .#{$prefix}window-header-right {
  31. // padding-left: $window-border-radius;
  32. // }
  33. // .#{$prefix}window-header-top {
  34. // padding-bottom: $window-border-radius;
  35. // }
  36. // .#{$prefix}window-header-bottom {
  37. // padding-top: $window-border-radius;
  38. // }
  39. }
  40. .#{$prefix}window-header-left,
  41. .#{$prefix}window-header-right {
  42. .#{$prefix}vml-base {
  43. left: -3px !important;
  44. }
  45. }
  46. .#{$prefix}window-header-text {
  47. @extend .no-select;
  48. @extend .bigtext;
  49. white-space: nowrap;
  50. display: block;
  51. }
  52. .#{$prefix}window-body-plain {
  53. background: transparent;
  54. }
  55. .#{$prefix}window-header {
  56. .#{$prefix}window-header-body,
  57. .#{$prefix}window-header-body > .x-box-inner {
  58. overflow: visible;
  59. }
  60. }
  61. @include extjs-window-ui('default');
  62. }
  63. /**
  64. * @class Ext.Window
  65. * Used to create a visual theme for an Ext.Panel
  66. */
  67. @mixin extjs-window-ui(
  68. $ui-label,
  69. $ui-padding: null, // This was not set in @include above...
  70. $ui-border-radius: $window-border-radius,
  71. $ui-border-color: $window-border-color,
  72. $ui-inner-border-color: $window-inner-border-color,
  73. $ui-header-background-color: $window-base-color,
  74. $ui-header-color: $window-header-color,
  75. $ui-header-font-size: $window-header-font-size,
  76. $ui-header-font-weight: $window-header-font-weight,
  77. // $ui-body-border-color: $window-body-border-color,
  78. $ui-body-background-color: $window-body-background-color,
  79. $ui-body-color: $window-body-color,
  80. $ui-base-color: $window-base-color
  81. ){
  82. .#{$prefix}window-#{$ui-label} {
  83. border-color: $ui-border-color;
  84. @include border-radius($ui-border-radius);
  85. // @include background-image(linear-gradient(top, lighten($ui-base-color, 5%), darken($ui-base-color, 5%) 80px));
  86. // @if $include-panel-highlights {
  87. // @include inner-border($window-inner-border-width, $ui-inner-border-color);
  88. // }
  89. }
  90. // $ui-padding was never being set...
  91. @if $ui-border-radius != null {
  92. @include x-frame(
  93. 'window',
  94. $ui-label,
  95. $border-radius: $ui-border-radius,
  96. $border-width: $window-border-width,
  97. $padding: $ui-padding,
  98. $background-color: $ui-base-color
  99. );
  100. }
  101. // Window body
  102. .#{$prefix}window-body-#{$ui-label} {
  103. // border-color: $ui-body-border-color;
  104. // border-width: $window-body-border-width;
  105. background: $ui-body-background-color;
  106. color: $ui-body-color;
  107. }
  108. .#{$prefix}window-header-#{$ui-label} {
  109. border-color: $ui-border-color;
  110. padding: 8px 10px 8px 10px;
  111. @if ($include-window-highlights) {
  112. @include inset-by-background($ui-base-color);
  113. }
  114. // @tag iezoomhack
  115. @if $supports-gradients or $compile-all {
  116. @if $ui-header-background-color != null { @include background-image(linear-gradient(top, lighten($ui-header-background-color, 5%), $ui-header-background-color 100%)); }
  117. }
  118. }
  119. .#{$prefix}window-header-text-#{$ui-label} {
  120. color: $ui-header-color;
  121. font-weight: $ui-header-font-weight;
  122. line-height: 1.2em;
  123. font-size: $ui-header-font-size;
  124. }
  125. @if $ui-border-radius != null {
  126. .#{$prefix}window-header-#{$ui-label}-top {
  127. @include border-top-radius($ui-border-radius);
  128. }
  129. }
  130. @if $ui-border-radius != null {
  131. // @include x-frame('window-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $window-border-width, 5px 5px 0, $ui-base-color);
  132. // @include x-frame('window-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $window-border-width, 5px 5px 5px 0, $ui-base-color);
  133. // @include x-frame('window-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $window-border-width, 0 5px 5px, $ui-base-color);
  134. // @include x-frame('window-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $window-border-width, 5px 0px 5px 5px, $ui-base-color);
  135. }
  136. @if $include-panel-highlights {
  137. // So much crud for inner borders...
  138. // .#{$prefix}window-header-#{$ui-label}-top {
  139. // @include inner-border(1px 1px 0, $ui-inner-border-color);
  140. // }
  141. // .#{$prefix}window-header-#{$ui-label}-right {
  142. // @include inner-border(1px 1px 1px 0, $ui-inner-border-color);
  143. // }
  144. // .#{$prefix}window-header-#{$ui-label}-bottom {
  145. // @include inner-border(0px 1px 1px, $ui-inner-border-color);
  146. // }
  147. // .#{$prefix}window-header-#{$ui-label}-left {
  148. // @include inner-border(1px 0 1px 1px, $ui-inner-border-color);
  149. // }
  150. }
  151. }