partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

_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 }