resources/themes/stylesheets/ext4/default/widgets/_panel.scss

   1 /**
   2   * @class Ext.Panel
   3   * Used to create the base structure of an Ext.Panel
   4   */
   5 @mixin extjs-panel {
   6     .#{$prefix}panel,
   7     .#{$prefix}plain {
   8         overflow: hidden;
   9         position: relative;
  10     }
  11
  12     // Workaround for disappearing right edge in IE6
  13      @if $include-ie {
  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     }
  29
  30     //panel header
  31     .#{$prefix}panel-header {
  32         padding: $panel-header-padding;
  33     }
  34
  35     .#{$prefix}panel-header-icon,
  36     .#{$prefix}window-header-icon {
  37         width:16px;
  38         height:16px;
  39         background-repeat:no-repeat;
  40         background-position:0 0;
  41         vertical-align:middle;
  42         margin-right:4px;
  43         margin-top:-1px;
  44         margin-bottom:-1px;
  45     }
  46
  47     .#{$prefix}panel-header-draggable,
  48     .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
  49     .#{$prefix}window-header-draggable,
  50     .#{$prefix}window-header-draggable .#{$prefix}window-header-text{
  51         cursor: move;
  52     }
  53
  54     // A ghost is just a Panel. The only extra it needs is opacity.
  55     // TODO: Make opacity a variable
  56     .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
  57         @include opacity(0.65);
  58         cursor: move;
  59     }
  60
  61     .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
  62         .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
  63             width: 100%;
  64         }
  65     }
  66
  67     .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
  68         .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
  69             height: 100%;
  70         }
  71     }
  72
  73     // Vertical headers must be inline blocks so that they acquire width from the content
  74     .#{$prefix}panel-header-vertical, .#{$prefix}panel-header-vertical .#{$prefix}panel-header-body,
  75     .#{$prefix}btn-group-header-vertical, .#{$prefix}btn-group-header-vertical .#{$prefix}btn-group-header-body,
  76     .#{$prefix}window-header-vertical, .#{$prefix}window-header-vertical .#{$prefix}window-header-body {
  77         display: -moz-inline-stack;
  78         display: inline-block;
  79     }
  80
  81     .#{$prefix}panel-header-text {
  82         @include no-select;
  83         white-space: nowrap;
  84     }
  85
  86     .#{$prefix}panel-header-left,
  87     .#{$prefix}panel-header-right {
  88         .#{$prefix}vml-base {
  89             left: -3px !important;
  90         }
  91     }
  92
  93     //panel body
  94     .#{$prefix}panel-body {
  95         overflow: hidden;
  96         position: relative;
  97     }
  98
  99     .#{$prefix}panel-header-vertical {
 100         .#{$prefix}surface {
 101             margin-top: 2px;
 102         }
 103     }
 104
 105     .#{$prefix}panel-header-plain-vertical {
 106         .#{$prefix}surface {
 107             margin-top: 0;
 108         }
 109     }
 110
 111
 112     .#{$prefix}panel-collapsed {
 113         .#{$prefix}panel-header-collapsed-border-top {
 114             border-bottom-width: $panel-header-border-width !important;
 115         }
 116         .#{$prefix}panel-header-collapsed-border-right {
 117             border-left-width: $panel-header-border-width !important;
 118         }
 119         .#{$prefix}panel-header-collapsed-border-bottom {
 120             border-top-width: $panel-header-border-width !important;
 121         }
 122         .#{$prefix}panel-header-collapsed-border-left {
 123             border-right-width: $panel-header-border-width !important;
 124         }
 125     }
 126
 127     @if not $supports-gradients or $compile-all {
 128         .#{$prefix}nlg .#{$prefix}panel-header-vertical {
 129             .#{$prefix}frame-mc {
 130                 background-repeat: repeat-y;
 131             }
 132         }
 133     }
 134
 135     @if $include-panel-uis == true {
 136         @include extjs-panel-ui(
 137             'default',
 138
 139             $ui-base-color: $panel-base-color,
 140             $ui-border-color: $panel-border-color,
 141
 142             $ui-header-color: $panel-header-color,
 143             $ui-header-font-size: $panel-header-font-size,
 144             $ui-header-font-weight: $panel-header-font-weight,
 145             $ui-header-border-color: $panel-header-border-color,
 146             $ui-header-background-color: $panel-header-background-color,
 147             $ui-header-background-gradient: $panel-header-background-gradient,
 148
 149             $ui-body-color: $panel-body-color,
 150             $ui-body-border-color: $panel-body-border-color,
 151             $ui-body-border-width: 1px,
 152             $ui-body-background-color: $panel-body-background-color
 153         );
 154
 155         @include extjs-panel-ui(
 156             'default-framed',
 157
 158             $ui-base-color: $panel-base-color,
 159             $ui-border-width: $panel-frame-border-width,
 160             $ui-border-color: $panel-frame-border-color,
 161             $ui-border-radius: $panel-frame-border-radius,
 162
 163             $ui-header-color: $panel-header-color,
 164             $ui-header-font-size: $panel-header-font-size,
 165             $ui-header-font-weight: $panel-header-font-weight,
 166             $ui-header-border-color: $panel-frame-border-color,
 167             $ui-header-background-color: $panel-header-background-color,
 168             $ui-header-background-gradient: $panel-header-background-gradient,
 169
 170             $ui-body-color: $panel-body-color,
 171             $ui-body-border-color: $panel-body-border-color,
 172             $ui-body-border-width: 0,
 173             $ui-body-background-color: $panel-frame-background-color
 174         );
 175     }
 176
 177     .x-panel-header-plain,
 178     .x-panel-body-plain {
 179         border: 0;
 180         padding: 0;
 181     }
 182 }
 183
 184 /**
 185   * @class Ext.Panel
 186   * Used to create a visual theme for an Ext.Panel
 187   */
 188 @mixin extjs-panel-ui(
 189     $ui-label,
 190
 191     $ui-base-color: null,
 192
 193     $ui-border-color: null,
 194     $ui-border-radius: null,
 195     $ui-border-width: 0,
 196
 197     $ui-header-color: null,
 198     $ui-header-font-family: $panel-header-font-family,
 199     $ui-header-font-size: $panel-header-font-size,
 200     $ui-header-font-weight: $panel-header-font-weight,
 201     $ui-header-border-color: $ui-border-color,
 202     $ui-header-background-color: null,
 203     $ui-header-background-gradient: matte,
 204     $ui-header-inner-border-color: null,
 205
 206     $ui-body-color: null,
 207     $ui-body-border-color: null,
 208     $ui-body-border-width: null,
 209     $ui-body-border-style: solid,
 210     $ui-body-background-color: null,
 211     $ui-body-font-size: null,
 212     $ui-body-font-weight: null
 213 ){
 214     @if $ui-base-color != null {
 215         @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
 216
 217         @if $ui-header-color == null { $ui-header-color: #fff; }
 218         @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
 219     }
 220
 221     @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
 222         $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
 223     }
 224
 225     .#{$prefix}panel-#{$ui-label} {
 226         @if $ui-border-color != null { border-color: $ui-border-color; }
 227     }
 228
 229     // header
 230     .#{$prefix}panel-header-#{$ui-label} {
 231         @if $ui-header-font-size != null { font-size: $ui-header-font-size; }
 232         line-height: $panel-header-line-height;
 233
 234         @if $ui-header-border-color != null {
 235             border-color: $ui-header-border-color;
 236             border-width: $panel-header-border-width;
 237             border-style: $panel-header-border-style;
 238         }
 239
 240         @if $supports-gradients or $compile-all {
 241             @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); }
 242
 243             @if $panel-header-inner-border and $ui-header-inner-border-color != null {
 244                 @include inner-border(
 245                     $width: $panel-header-inner-border-width,
 246                     $color: $ui-header-inner-border-color
 247                 );
 248             }
 249         }
 250     }
 251
 252     // header background images
 253     @if $ui-header-background-color != null and $ui-header-background-gradient != null {
 254         @if not $supports-gradients or $compile-all {
 255             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top {
 256                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
 257             }
 258
 259             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
 260                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
 261             }
 262
 263             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
 264                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
 265             }
 266
 267             .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
 268                 background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
 269             }
 270         }
 271     }
 272
 273     // header text
 274     .#{$prefix}panel-header-text-#{$ui-label} {
 275         @if $ui-header-color != null { color: $ui-header-color; }
 276
 277         @if $ui-header-font-size != null {   font-size: $ui-header-font-size; }
 278         @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
 279         @if $ui-header-font-family != null { font-family: $ui-header-font-family; }
 280     }
 281
 282     // body
 283     .#{$prefix}panel-body-#{$ui-label} {
 284         @if $ui-body-background-color != null { background: $ui-body-background-color; }
 285         @if $ui-body-border-color != null {     border-color: $ui-body-border-color; }
 286         @if $ui-body-color != null {            color: $ui-body-color; }
 287         @if $ui-body-font-size != null {        font-size: $ui-body-font-size; }
 288         @if $ui-body-font-weight != null {      font-size: $ui-body-font-weight; }
 289
 290         @if $ui-body-border-width != null {
 291             border-width: $ui-body-border-width;
 292             @if $ui-body-border-style != null { border-style: $ui-body-border-style; }
 293         }
 294     }
 295
 296     .#{$prefix}panel-collapsed {
 297         .#{$prefix}window-header-#{$ui-label},
 298         .#{$prefix}panel-header-#{$ui-label} {
 299             @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
 300         }
 301     }
 302
 303     .#{$prefix}panel-header-#{$ui-label}-vertical {
 304         @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
 305     }
 306
 307     @if $ui-base-color != null {
 308         @if $supports-gradients or $compile-all {
 309             .#{$prefix}panel-header-#{$ui-label}-left,
 310             .#{$prefix}panel-header-#{$ui-label}-right {
 311                 @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
 312             }
 313         }
 314     }
 315
 316     // TODO: Fix this genocide of Sass.
 317     // and window stuff in here, wtf?
 318     @if $include-webkit {
 319         .#{$prefix}webkit {
 320             #{$prefix}panel-ghost > div.#{$prefix}panel-body-#{$ui-label},
 321             #{$prefix}panel-ghost > div.#{$prefix}window-body-#{$ui-label} {
 322                 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(white), color-stop(0.02, #E5ECF7), to(#B7CBE7));
 323             }
 324         }
 325     }
 326
 327     @if $include-ff {
 328         .#{$prefix}gecko {
 329             .#{$prefix}panel-ghost > div.#{$prefix}panel-body-#{$ui-label},
 330             .#{$prefix}panel-ghost > div.#{$prefix}window-body-#{$ui-label} {
 331                 background-image: -moz-linear-gradient(#FFFFFF, #E5ECF7 2%, #B7CBE7);
 332             }
 333         }
 334     }
 335
 336     @if $ui-border-radius != null {
 337         @include x-frame(
 338             'panel',
 339             $ui: '#{$ui-label}',
 340
 341             /* Radius, width, padding and background-color */
 342             $border-radius   : $ui-border-radius,
 343             $border-width    : $ui-border-width,
 344             $padding         : $panel-frame-padding,
 345             $background-color: $ui-body-background-color
 346         );
 347
 348
 349         @include x-frame('panel-header', '#{$ui-label}-top',    top($ui-border-radius) right($ui-border-radius) 0 0,    $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
 350         @include x-frame('panel-header', '#{$ui-label}-right',  0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
 351         @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius),  $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
 352         @include x-frame('panel-header', '#{$ui-label}-left',   top($ui-border-radius) 0 0 left($ui-border-radius),     $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
 353
 354         .#{$prefix}panel-header-#{$ui-label}-top {
 355             @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
 356         }
 357
 358         .#{$prefix}panel-header-#{$ui-label}-right {
 359             @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
 360         }
 361
 362         .#{$prefix}panel-header-#{$ui-label}-bottom {
 363             @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
 364         }
 365
 366         .#{$prefix}panel-header-#{$ui-label}-left {
 367             @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
 368         }
 369     } @else {
 370         .#{$prefix}panel-collapsed {
 371             .#{$prefix}panel-header-#{$ui-label}-top {
 372                 @include border-bottom-radius($ui-border-radius);
 373             }
 374
 375             .#{$prefix}panel-header-#{$ui-label}-right {
 376                 @include border-left-radius($ui-border-radius);
 377             }
 378
 379             .#{$prefix}panel-header-#{$ui-label}-bottom {
 380                 @include border-top-radius($ui-border-radius);
 381             }
 382
 383             .#{$prefix}panel-header-#{$ui-label}-left {
 384                 @include border-right-radius($ui-border-radius);
 385             }
 386         }
 387
 388         .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
 389             background-position: top right;
 390         }
 391
 392         .#{$prefix}panel-header-#{$ui-label}-top {
 393             @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
 394         }
 395
 396         .#{$prefix}panel-header-#{$ui-label}-right {
 397             @include inner-border(0 1px 0 0, $ui-header-inner-border-color);
 398         }
 399
 400         .#{$prefix}panel-header-#{$ui-label}-bottom {
 401             @include inner-border(0 0 1px, $ui-header-inner-border-color);
 402         }
 403
 404         .#{$prefix}panel-header-#{$ui-label}-left {
 405             @include inner-border(0 0 0 1px, $ui-header-inner-border-color);
 406         }
 407     }
 408
 409     .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
 410         background-position: bottom left;
 411     }
 412
 413     @if $ui-border-radius != null {
 414         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
 415             border-bottom-width: 1px !important;
 416         }
 417
 418         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
 419             border-left-width: 1px !important;
 420         }
 421
 422         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
 423             border-top-width: 1px !important;
 424         }
 425
 426         .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
 427             border-right-width: 1px !important;
 428         }
 429
 430         .#{$prefix}panel-header-#{$ui-label}-collapsed {
 431             @include border-radius($ui-border-radius);
 432         }
 433
 434         @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, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
 435         @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, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
 436         @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, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
 437         @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, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
 438     }
 439
 440     //background positioning of images
 441     .#{$prefix}panel-header-#{$ui-label}-right-tc,
 442     .#{$prefix}panel-header-#{$ui-label}-right-mc,
 443     .#{$prefix}panel-header-#{$ui-label}-right-bc {
 444         background-position: right 0;
 445     }
 446
 447     .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
 448     .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
 449     .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
 450         background-position: 0 bottom;
 451     }
 452 }