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