_panel.scss (19424B)
1 /** 2 * Create the base structure of an Ext.Panel 3 * @member Ext.panel.Panel 4 */ 5 @mixin extjs-panel { 6 .#{$prefix}panel, 7 .#{$prefix}plain { 8 overflow: hidden; 9 position: relative; 10 } 11 12 @if $include-ie { 13 // Workaround for disappearing right edge in IE6 14 .#{$prefix}ie { 15 .#{$prefix}panel-header, 16 .#{$prefix}panel-header-tl, 17 .#{$prefix}panel-header-tc, 18 .#{$prefix}panel-header-tr, 19 .#{$prefix}panel-header-ml, 20 .#{$prefix}panel-header-mc, 21 .#{$prefix}panel-header-mr, 22 .#{$prefix}panel-header-bl, 23 .#{$prefix}panel-header-bc, 24 .#{$prefix}panel-header-br { 25 zoom: 1; 26 } 27 } 28 // Fix for IE8 clipping. EXTJSIV-1553 29 .#{$prefix}ie8 { 30 td.#{$prefix}frame-mc { 31 vertical-align: top; 32 } 33 } 34 } 35 36 //panel header 37 .#{$prefix}panel-header-horizontal { 38 padding: $panel-header-padding; 39 } 40 .#{$prefix}panel-header-vertical { 41 padding: $panel-header-vertical-padding; 42 } 43 44 .#{$prefix}panel-header-icon, 45 .#{$prefix}window-header-icon { 46 width: $panel-header-icon-width; 47 height: $panel-header-icon-height; 48 background-repeat:no-repeat; 49 background-position:0 0; 50 vertical-align:middle; 51 margin-right:4px; 52 } 53 54 .#{$prefix}vertical { 55 .#{$prefix}panel-header-icon, 56 .#{$prefix}window-header-icon { 57 margin: 0 0 4px; 58 } 59 } 60 61 .#{$prefix}panel-header-draggable, 62 .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text, 63 .#{$prefix}window-header-draggable, 64 .#{$prefix}window-header-draggable .#{$prefix}window-header-text{ 65 cursor: move; 66 } 67 68 // A ghost is just a Panel. The only extra it needs is opacity. 69 // TODO: Make opacity a variable 70 .#{$prefix}panel-ghost, .#{$prefix}window-ghost { 71 @include opacity(0.65); 72 cursor: move; 73 } 74 75 .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal { 76 .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body { 77 width: 100%; 78 } 79 } 80 81 .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical { 82 .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body { 83 height: 100%; 84 } 85 } 86 87 .#{$prefix}panel-header-text-container { 88 overflow: hidden; 89 -o-text-overflow: ellipsis; 90 text-overflow: ellipsis; 91 } 92 93 .#{$prefix}panel-header-text { 94 @include no-select; 95 white-space: nowrap; 96 } 97 98 .#{$prefix}panel-header-left, 99 .#{$prefix}panel-header-right { 100 .#{$prefix}vml-base { 101 left: -3px !important; 102 } 103 } 104 105 //panel body 106 .#{$prefix}panel-body { 107 overflow: hidden; 108 position: relative; 109 110 font-size: $panel-body-font-size; 111 } 112 113 .#{$prefix}panel-header-vertical { 114 .#{$prefix}surface { 115 padding-left: 1px; 116 } 117 } 118 119 .#{$prefix}opera, 120 .#{$prefix}strict .#{$prefix}ie9 { 121 .#{$prefix}panel-header-vertical { 122 .#{$prefix}surface { 123 padding-left: 2px; 124 } 125 } 126 } 127 128 .#{$prefix}panel-collapsed { 129 .#{$prefix}panel-header-collapsed-border-top { 130 border-bottom-width: $panel-header-border-width !important; 131 } 132 .#{$prefix}panel-header-collapsed-border-right { 133 border-left-width: $panel-header-border-width !important; 134 } 135 .#{$prefix}panel-header-collapsed-border-bottom { 136 border-top-width: $panel-header-border-width !important; 137 } 138 .#{$prefix}panel-header-collapsed-border-left { 139 border-right-width: $panel-header-border-width !important; 140 } 141 } 142 143 @if not $supports-gradients or $compile-all { 144 .#{$prefix}nlg .#{$prefix}panel-header-vertical { 145 .#{$prefix}frame-mc { 146 background-repeat: repeat-y; 147 } 148 } 149 } 150 151 @if $include-panel-uis == true { 152 @include extjs-panel-ui( 153 'default', 154 155 $ui-base-color: $panel-base-color, 156 $ui-border-width: $panel-border-width, 157 $ui-border-color: $panel-border-color, 158 $ui-border-radius: $panel-border-radius, 159 160 $ui-header-color: $panel-header-color, 161 $ui-header-font-size: $panel-header-font-size, 162 $ui-header-font-weight: $panel-header-font-weight, 163 $ui-header-border-color: $panel-header-border-color, 164 $ui-header-background-color: $panel-header-background-color, 165 $ui-header-background-gradient: $panel-header-background-gradient, 166 167 $ui-body-color: $panel-body-color, 168 $ui-body-border-color: $panel-body-border-color, 169 $ui-body-border-width: 1px, 170 $ui-body-background-color: $panel-body-background-color 171 ); 172 173 @include extjs-panel-ui( 174 'default-framed', 175 176 $ui-base-color: $panel-base-color, 177 $ui-border-width: $panel-frame-border-width, 178 $ui-border-color: $panel-frame-border-color, 179 $ui-border-radius: $panel-frame-border-radius, 180 181 $ui-header-color: $panel-header-color, 182 $ui-header-font-size: $panel-header-font-size, 183 $ui-header-font-weight: $panel-header-font-weight, 184 $ui-header-border-color: $panel-frame-border-color, 185 $ui-header-background-color: $panel-header-background-color, 186 $ui-header-background-gradient: $panel-header-background-gradient, 187 188 $ui-body-color: $panel-body-color, 189 $ui-body-border-color: $panel-body-border-color, 190 $ui-body-border-width: 0, 191 $ui-body-background-color: $panel-frame-background-color, 192 $ui-image-label-with-border-radius: 'default' 193 ); 194 } 195 196 .#{$prefix}panel-header-plain, 197 .#{$prefix}panel-body-plain { 198 border: 0; 199 padding: 0; 200 } 201 } 202 203 /** 204 * Creates a visual theme for an Ext.Panel 205 * @member Ext.panel.Panel 206 */ 207 @mixin extjs-panel-ui( 208 $ui-label, 209 210 $ui-base-color: null, 211 212 $ui-border-color: null, 213 $ui-border-radius: null, 214 $ui-border-width: 0, 215 216 $ui-header-color: null, 217 $ui-header-font-family: $panel-header-font-family, 218 $ui-header-font-size: $panel-header-font-size, 219 $ui-header-font-weight: $panel-header-font-weight, 220 $ui-header-line-height: $panel-header-line-height, 221 $ui-header-border-color: $ui-border-color, 222 $ui-header-background-color: null, 223 $ui-header-background-gradient: matte, 224 $ui-header-inner-border-color: null, 225 226 $ui-body-color: null, 227 $ui-body-border-color: null, 228 $ui-body-border-width: null, 229 $ui-body-border-style: solid, 230 $ui-body-background-color: null, 231 $ui-body-font-size: null, 232 $ui-body-font-weight: null, 233 // optional image label to use when background header images are required (no linear-gradient), 234 // but border-radius is supported (no framing els) e.g. IE9. 235 $ui-image-label-with-border-radius: null 236 ){ 237 @if $ui-base-color != null { 238 @if $ui-border-color == null { $ui-border-color: $ui-base-color; } 239 240 @if $ui-header-color == null { $ui-header-color: #fff; } 241 @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); } 242 } 243 244 @if $ui-header-inner-border-color == null and $ui-header-background-color != null { 245 $ui-header-inner-border-color: lighten($ui-header-background-color, 10); 246 } 247 248 .#{$prefix}panel-#{$ui-label} { 249 @if $ui-border-color != null { border-color: $ui-border-color; } 250 } 251 252 // header 253 .#{$prefix}panel-header-#{$ui-label} { 254 @if $ui-header-font-size != null { font-size: $ui-header-font-size; } 255 256 @if $ui-header-border-color != null { 257 border-color: $ui-header-border-color; 258 border-width: $panel-header-border-width; 259 border-style: $panel-header-border-style; 260 } 261 262 @if $supports-gradients or $compile-all { 263 @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); } 264 265 @if $panel-header-inner-border and $ui-header-inner-border-color != null { 266 @include inner-border( 267 $width: $panel-header-inner-border-width, 268 $color: $ui-header-inner-border-color 269 ); 270 } 271 } 272 } 273 274 // header background images 275 @if $ui-header-background-color != null and $ui-header-background-gradient != null { 276 @if not $supports-gradients or $compile-all { 277 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top { 278 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif'); 279 } 280 281 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom { 282 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif'); 283 } 284 285 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left { 286 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif'); 287 } 288 289 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right { 290 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif'); 291 } 292 293 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right { 294 background-position: top right; 295 } 296 297 .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom { 298 background-position: bottom left; 299 } 300 301 @if $ui-border-radius != null { 302 .#{$prefix}nbr { 303 // If framing elements are used to achieve rounded corners remove the background image from the header element since the framing elements 304 // already have the background image, and a background image on the main header element bleeds through the corner framing elements. 305 .#{$prefix}panel-header-#{$ui-label} { 306 background-image: none; 307 } 308 } 309 } 310 311 312 @if $ui-image-label-with-border-radius != null { 313 // IE9 strict, Opera < 11.10, and Safari 3 are the only currently supported browsers that support border-radius, but do not support linear-gradient. 314 .#{$prefix}strict .#{$prefix}ie9, 315 .#{$prefix}nlg.#{$prefix}opera, 316 .#{$prefix}nlg.#{$prefix}safari { 317 .#{$prefix}panel-header-#{$ui-label}-top { 318 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-top-bg.gif'); 319 } 320 321 .#{$prefix}panel-header-#{$ui-label}-bottom { 322 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-bottom-bg.gif'); 323 } 324 325 .#{$prefix}panel-header-#{$ui-label}-left { 326 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-left-bg.gif'); 327 } 328 329 .#{$prefix}panel-header-#{$ui-label}-right { 330 background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-right-bg.gif'); 331 } 332 } 333 } 334 } 335 } 336 337 // header text 338 .#{$prefix}panel-header-text-#{$ui-label} { 339 @if $ui-header-color != null { color: $ui-header-color; } 340 341 @if $ui-header-font-size != null { font-size: $ui-header-font-size; } 342 @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; } 343 @if $ui-header-font-family != null { font-family: $ui-header-font-family; } 344 @if $ui-header-line-height != null { line-height: $ui-header-line-height; } 345 } 346 347 // body 348 .#{$prefix}panel-body-#{$ui-label} { 349 @if $ui-body-background-color != null { background: $ui-body-background-color; } 350 @if $ui-body-border-color != null { border-color: $ui-body-border-color; } 351 @if $ui-body-color != null { color: $ui-body-color; } 352 @if $ui-body-font-size != null { font-size: $ui-body-font-size; } 353 @if $ui-body-font-weight != null { font-size: $ui-body-font-weight; } 354 355 @if $ui-body-border-width != null { 356 border-width: $ui-body-border-width; 357 @if $ui-body-border-style != null { border-style: $ui-body-border-style; } 358 } 359 } 360 361 .#{$prefix}panel-collapsed { 362 .#{$prefix}window-header-#{$ui-label}, 363 .#{$prefix}panel-header-#{$ui-label} { 364 @if $ui-body-border-color != null { border-color: $ui-body-border-color; } 365 } 366 } 367 368 .#{$prefix}panel-header-#{$ui-label}-vertical { 369 @if $ui-body-border-color != null { border-color: $ui-body-border-color; } 370 } 371 372 @if $ui-base-color != null { 373 @if $supports-gradients or $compile-all { 374 .#{$prefix}panel-header-#{$ui-label}-left, 375 .#{$prefix}panel-header-#{$ui-label}-right { 376 @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right); 377 } 378 } 379 } 380 381 @if $ui-border-radius != null { 382 @include x-frame( 383 'panel', 384 $ui: '#{$ui-label}', 385 386 /* Radius, width, padding and background-color */ 387 $border-radius : $ui-border-radius, 388 $border-width : $ui-border-width, 389 $padding : $panel-frame-padding, 390 $background-color: $ui-body-background-color 391 ); 392 393 394 @include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, top($ui-border-width) right($ui-border-width) 0 left($ui-border-width), $panel-header-padding, $ui-header-background-color, $ui-header-background-gradient); 395 @include x-frame('panel-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, top($ui-border-width) right($ui-border-width) bottom($ui-border-width) 0, $panel-header-vertical-padding, $ui-header-background-color, $ui-header-background-gradient, false, right); 396 @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), 0 right($ui-border-width) bottom($ui-border-width) left($ui-border-width), $panel-header-padding, $ui-header-background-color, $ui-header-background-gradient); 397 @include x-frame('panel-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), top($ui-border-width) 0 bottom($ui-border-width) left($ui-border-width), $panel-header-vertical-padding, $ui-header-background-color, $ui-header-background-gradient, false, right); 398 399 .#{$prefix}panel-header-#{$ui-label}-top { 400 @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color); 401 } 402 403 .#{$prefix}panel-header-#{$ui-label}-right { 404 @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color); 405 } 406 407 .#{$prefix}panel-header-#{$ui-label}-bottom { 408 @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color); 409 } 410 411 .#{$prefix}panel-header-#{$ui-label}-left { 412 @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color); 413 } 414 } @else { 415 .#{$prefix}panel-collapsed { 416 .#{$prefix}panel-header-#{$ui-label}-top { 417 @include border-bottom-radius($ui-border-radius); 418 } 419 420 .#{$prefix}panel-header-#{$ui-label}-right { 421 @include border-left-radius($ui-border-radius); 422 } 423 424 .#{$prefix}panel-header-#{$ui-label}-bottom { 425 @include border-top-radius($ui-border-radius); 426 } 427 428 .#{$prefix}panel-header-#{$ui-label}-left { 429 @include border-right-radius($ui-border-radius); 430 } 431 } 432 433 434 .#{$prefix}panel-header-#{$ui-label}-top { 435 @include inner-border(1px 0 0 0, $ui-header-inner-border-color); 436 } 437 438 .#{$prefix}panel-header-#{$ui-label}-right { 439 @include inner-border(0 1px 0 0, $ui-header-inner-border-color); 440 } 441 442 .#{$prefix}panel-header-#{$ui-label}-bottom { 443 @include inner-border(0 0 1px, $ui-header-inner-border-color); 444 } 445 446 .#{$prefix}panel-header-#{$ui-label}-left { 447 @include inner-border(0 0 0 1px, $ui-header-inner-border-color); 448 } 449 } 450 451 @if $ui-border-radius != null { 452 .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top { 453 border-bottom-width: 1px !important; 454 } 455 456 .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right { 457 border-left-width: 1px !important; 458 } 459 460 .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom { 461 border-top-width: 1px !important; 462 } 463 464 .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left { 465 border-right-width: 1px !important; 466 } 467 468 .#{$prefix}panel-header-#{$ui-label}-collapsed { 469 @include border-radius($ui-border-radius); 470 } 471 472 @include x-frame('panel-header', '#{$ui-label}-collapsed-top', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, $panel-header-padding, $ui-header-background-color, $ui-header-background-gradient); 473 @include x-frame('panel-header', '#{$ui-label}-collapsed-right', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, $panel-header-vertical-padding, $ui-header-background-color, $ui-header-background-gradient, false, right); 474 @include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, $panel-header-padding, $ui-header-background-color, $ui-header-background-gradient); 475 @include x-frame('panel-header', '#{$ui-label}-collapsed-left', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, $panel-header-vertical-padding, $ui-header-background-color, $ui-header-background-gradient, false, right); 476 } 477 478 //background positioning of images 479 .#{$prefix}panel-header-#{$ui-label}-right-tc, 480 .#{$prefix}panel-header-#{$ui-label}-right-mc, 481 .#{$prefix}panel-header-#{$ui-label}-right-bc { 482 background-position: right 0; 483 } 484 485 .#{$prefix}panel-header-#{$ui-label}-bottom-tc, 486 .#{$prefix}panel-header-#{$ui-label}-bottom-mc, 487 .#{$prefix}panel-header-#{$ui-label}-bottom-bc { 488 background-position: 0 bottom; 489 } 490 }