_window.scss (7511B)
1 /** 2 * Creates the base structure of an Ext.Window 3 * @member Ext.window.Window 4 */ 5 @mixin extjs-window { 6 .#{$prefix}window { 7 outline: none; 8 overflow: hidden; 9 10 .#{$prefix}window-wrap { 11 position: relative; 12 } 13 } 14 15 .#{$prefix}window-body { 16 position: relative; 17 border-style: $window-body-border-style; 18 overflow: hidden; 19 } 20 21 //maximized window 22 .#{$prefix}window-maximized { 23 .#{$prefix}window-wrap { 24 .#{$prefix}window-header { 25 @include important-no-border-radius; 26 } 27 } 28 } 29 30 .#{$prefix}window-header-top { 31 margin-bottom: -2px; 32 } 33 .#{$prefix}window-header-body-horizontal { 34 margin-top: -1px; 35 } 36 37 .#{$prefix}window-header-bottom { 38 margin-top: -1px; 39 margin-bottom: -1px; 40 } 41 42 .#{$prefix}window-header-left { 43 margin-right: -1px; 44 } 45 46 .#{$prefix}window-header-right { 47 margin-left: -1px; 48 } 49 50 .#{$prefix}window-header-vertical { 51 .#{$prefix}surface { 52 padding-left: 1px; 53 } 54 } 55 56 // collapsed window header styles 57 .#{$prefix}window-collapsed { 58 .#{$prefix}window-header-vertical { 59 @include border-radius(5px); 60 } 61 .#{$prefix}window-header-horizontal { 62 @include border-radius(5px); 63 } 64 65 // Padding changes for collapsed headers. 66 .#{$prefix}window-header-left { 67 padding-right: 5px !important; 68 margin-right: 0; 69 } 70 71 .#{$prefix}window-header-right { 72 padding-left: 5px !important; 73 margin-left: 0; 74 } 75 76 .#{$prefix}window-header-top { 77 padding-bottom: 5px !important; 78 margin-bottom: -1px; 79 } 80 81 .#{$prefix}window-header-bottom { 82 padding-top: 5px !important; 83 margin-top: 0; 84 } 85 } 86 87 .#{$prefix}window-header-left, 88 .#{$prefix}window-header-right { 89 .#{$prefix}vml-base { 90 left: -3px !important; 91 } 92 } 93 94 .#{$prefix}opera, 95 .#{$prefix}strict .#{$prefix}ie9 { 96 .#{$prefix}window-header-vertical { 97 .#{$prefix}surface { 98 padding-left: 2px; 99 } 100 } 101 } 102 103 .#{$prefix}window-header-text-container { 104 overflow: hidden; 105 -o-text-overflow: ellipsis; 106 text-overflow: ellipsis; 107 } 108 109 .#{$prefix}window-header-text { 110 @include no-select; 111 white-space: nowrap; 112 } 113 114 @include extjs-window-ui( 115 'default', 116 117 $ui-border-radius: $window-border-radius, 118 $ui-border-color: $window-border-color, 119 $ui-inner-border-color: $window-inner-border-color, 120 121 $ui-header-color: $window-header-color, 122 123 $ui-body-border-color: $window-body-border-color, 124 $ui-body-background-color: $window-body-background-color, 125 $ui-body-color: $window-body-color, 126 127 $ui-background-color: $window-background-color 128 ); 129 130 .#{$prefix}window-body-plain { 131 background: transparent; 132 } 133 } 134 135 /** 136 * Creates a visual theme for an Ext.Panel 137 * @member Ext.window.Window 138 */ 139 @mixin extjs-window-ui( 140 $ui-label, 141 142 $ui-padding: null, 143 $ui-border-radius: null, 144 $ui-border-color: null, 145 $ui-inner-border-color: null, 146 147 $ui-header-color: null, 148 $ui-header-font-size: $window-header-font-size, 149 $ui-header-font-weight: $window-header-font-weight, 150 151 $ui-body-border-color: null, 152 $ui-body-background-color: null, 153 $ui-body-color: null, 154 155 $ui-background-color: null 156 ){ 157 $ui-header-text-height: $window-header-line-height; 158 159 .#{$prefix}window-#{$ui-label} { 160 @if $ui-border-color != null { border-color: $ui-border-color; } 161 @if $ui-border-radius != null { @include border-radius($ui-border-radius); } 162 163 @if $ui-inner-border-color != null { @include inner-border($window-inner-border-width, $ui-inner-border-color); } 164 } 165 166 @if $ui-border-radius != null { 167 @include x-frame( 168 'window', 169 $ui-label, 170 171 $border-radius: $ui-border-radius, 172 $border-width: $window-border-width, 173 $padding: $ui-padding, 174 $background-color: $ui-background-color 175 ); 176 } 177 178 .#{$prefix}window-body-#{$ui-label} { 179 @if $ui-body-border-color !=null { 180 border-color: $ui-body-border-color; 181 border-width: $window-body-border-width; 182 } 183 184 @if $ui-body-background-color != null { background: $ui-body-background-color; } 185 @if $ui-body-color != null { color: $ui-body-color; } 186 } 187 188 .#{$prefix}window-header-#{$ui-label} { 189 @if $ui-header-font-size != null { font-size: $ui-header-font-size; } 190 @if $ui-border-color != null { border-color: $ui-border-color; } 191 zoom:1; 192 } 193 194 .#{$prefix}window-header-text-#{$ui-label} { 195 @if $ui-header-color != null { color: $ui-header-color; } 196 @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; } 197 198 line-height: $ui-header-text-height; 199 200 font-family: $font-family; 201 font-size: $ui-header-font-size; 202 } 203 204 @if $ui-border-radius != null { 205 @include x-frame('window-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, top($window-border-width) right($window-border-width) 0 left($window-border-width), 4px 5px 0, $ui-background-color); 206 @include x-frame('window-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, top($window-border-width) right($window-border-width) bottom($window-border-width) 0, 5px 4px 5px 0, $ui-background-color); 207 @include x-frame('window-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), 0 right($window-border-width) bottom($window-border-width) left($window-border-width), 0 5px 4px, $ui-background-color); 208 @include x-frame('window-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), top($window-border-width) 0 bottom($window-border-width) left($window-border-width), 5px 0px 5px 4px, $ui-background-color); 209 210 // collapsed window header styles 211 @include x-frame('window-header', '#{$ui-label}-collapsed-top', $ui-border-radius, $window-border-width, 4px 5px 4px, $ui-background-color); 212 @include x-frame('window-header', '#{$ui-label}-collapsed-right', $ui-border-radius, $window-border-width, 5px 4px, $ui-background-color); 213 @include x-frame('window-header', '#{$ui-label}-collapsed-bottom', $ui-border-radius, $window-border-width, 4px 5px 4px, $ui-background-color); 214 @include x-frame('window-header', '#{$ui-label}-collapsed-left', $ui-border-radius, $window-border-width, 5px 4px, $ui-background-color); 215 } 216 217 .#{$prefix}window-header-#{$ui-label}-top { 218 @include inner-border(1px 1px 0, $ui-inner-border-color); 219 } 220 221 .#{$prefix}window-header-#{$ui-label}-right { 222 @include inner-border(1px 1px 1px 0, $ui-inner-border-color); 223 } 224 225 .#{$prefix}window-header-#{$ui-label}-bottom { 226 @include inner-border(0px 1px 1px, $ui-inner-border-color); 227 } 228 229 .#{$prefix}window-header-#{$ui-label}-left { 230 @include inner-border(1px 0 1px 1px, $ui-inner-border-color); 231 } 232 }