resources/themes/stylesheets/ext4/default/layout/_layout.scss

   1 @mixin extjs-layout {
   2     .#{$prefix}docked {
   3         position: absolute;
   4         z-index: 1;
   5     }
   6
   7     /**
   8       * Dock Layouts
   9       * @todo move this somewhere else?
  10       */
  11     .#{$prefix}docked-top {
  12         border-bottom-width: 0 !important;
  13     }
  14
  15     .#{$prefix}docked-bottom {
  16         border-top-width: 0 !important;
  17     }
  18
  19     .#{$prefix}docked-left {
  20         border-right-width: 0 !important;
  21     }
  22
  23     .#{$prefix}docked-right {
  24         border-left-width: 0 !important;
  25     }
  26
  27     .#{$prefix}docked-noborder-top {
  28         border-top-width: 0 !important;
  29     }
  30
  31     .#{$prefix}docked-noborder-right {
  32         border-right-width: 0 !important;
  33     }
  34
  35     .#{$prefix}docked-noborder-bottom {
  36         border-bottom-width: 0 !important;
  37     }
  38
  39     .#{$prefix}docked-noborder-left {
  40         border-left-width: 0 !important;
  41     }
  42
  43 /*
  44     // Needs important to win over the .#{$prefix}docked-left/right/top/bottom rules above.
  45     .\#{$prefix}panel-collapsed-placeholder {
  46         border-width: 1px !important;
  47     }
  48
  49     .\#{$prefix}region-collapsed-placeholder {
  50         border-width: 1px;
  51     }
  52     */
  53
  54
  55     .#{$prefix}box-inner {
  56         overflow:hidden;
  57
  58         zoom:1;
  59
  60         position:relative;
  61         left:0;
  62         top:0;
  63     }
  64
  65     .#{$prefix}box-item {
  66         position:absolute !important;
  67         left:0;
  68         top:0;
  69     }
  70
  71     .#{$prefix}box-layout-ct,
  72     .#{$prefix}border-layout-ct {
  73         overflow: hidden;
  74         zoom: 1;
  75     }
  76
  77     .#{$prefix}overflow-hidden {
  78         overflow:hidden !important;
  79     }
  80
  81     .#{$prefix}inline-children > * {
  82         display: inline-block !important;
  83     }
  84
  85     .#{$prefix}abs-layout-item {
  86         position: absolute;
  87     }
  88
  89     .#{$prefix}border-layout-ct {
  90         background-color: $border-layout-ct-background;
  91     }
  92
  93     .#{$prefix}border-region-slide-in {
  94         z-index: 5;
  95     }
  96
  97     .#{$prefix}region-collapsed-placeholder {
  98         z-index: 4;
  99     }
 100
 101     .#{$prefix}accordion-hd .#{$prefix}panel-header-text {
 102         color: $accordion-header-color;
 103         font-weight: normal;
 104     }
 105
 106     .#{$prefix}accordion-hd {
 107         .#{$prefix}tool-collapse-top,
 108         .#{$prefix}tool-collapse-right,
 109         .#{$prefix}tool-collapse-bottom,
 110         .#{$prefix}tool-collapse-left {
 111             background-position: 0 -255px;
 112         }
 113
 114         .#{$prefix}tool-expand-top,
 115         .#{$prefix}tool-expand-right,
 116         .#{$prefix}tool-expand-bottom,
 117         .#{$prefix}tool-expand-left {
 118             background-position: 0 -240px;
 119         }
 120
 121         .#{$prefix}tool-over {
 122             .#{$prefix}tool-collapse-top,
 123             .#{$prefix}tool-collapse-right,
 124             .#{$prefix}tool-collapse-bottom,
 125             .#{$prefix}tool-collapse-left {
 126                 background-position: -15px -255px;
 127             }
 128         }
 129
 130         .#{$prefix}tool-over {
 131             .#{$prefix}tool-expand-top,
 132             .#{$prefix}tool-expand-right,
 133             .#{$prefix}tool-expand-bottom,
 134             .#{$prefix}tool-expand-left {
 135                 background-position: -15px -240px;
 136             }
 137         }
 138
 139         background: $accordion-header-background-color !important;
 140         @include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true);
 141     }
 142
 143     .#{$prefix}accordion-hd {
 144         border-width: 1px 0 1px 0 !important;
 145         padding: 4px 5px 5px 5px;
 146         border-top-color: $panel-header-inner-border-color !important;
 147     }
 148
 149     .#{$prefix}accordion-body {
 150         border-width: 0 !important;
 151     }
 152
 153     .#{$prefix}accordion-hd-sibling-expanded {
 154         border-top-color: $panel-border-color !important;
 155         @include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true);
 156     }
 157
 158     .#{$prefix}accordion-hd-last-collapsed {
 159         border-bottom-color: $accordion-header-background-color !important;
 160     }
 161
 162     .#{$prefix}frame-tl,
 163     .#{$prefix}frame-tr,
 164     .#{$prefix}frame-tc,
 165     .#{$prefix}frame-bl,
 166     .#{$prefix}frame-br,
 167     .#{$prefix}frame-bc {
 168         overflow: hidden;
 169         background-repeat: no-repeat;
 170     }
 171
 172     .#{$prefix}frame-tc,
 173     .#{$prefix}frame-bc {
 174         background-repeat: repeat-x;
 175     }
 176
 177     .#{$prefix}frame-mc {
 178         position: relative;
 179         background-repeat: repeat-x;
 180         overflow: hidden;
 181     }
 182
 183     // Classes for horizontal Box layout scroller.
 184     // Uses the *TAB* scroller image because it's all we have.
 185     // This will not work well in other cases
 186     .#{$prefix}box-scroller-left {
 187         float: left;
 188         height: 100%;
 189
 190         z-index: 5;
 191
 192         .#{$prefix}toolbar-scroll-left,
 193         .#{$prefix}tabbar-scroll-left {
 194             width: 18px;
 195             position: relative;
 196             cursor: pointer;
 197             height: $tab-height;
 198             background: theme-image($theme-name, 'tab-bar/scroll-left.gif') transparent no-repeat -18px 0;
 199         }
 200         .#{$prefix}toolbar-scroll-left-hover {
 201             background-position: 0 0;
 202         }
 203         .#{$prefix}toolbar-scroll-left-disabled,
 204         .#{$prefix}tabbar-scroll-left-disabled {
 205             background-position: -18px 0;
 206             @include opacity(.5);
 207         }
 208
 209         .#{$prefix}toolbar-scroll-left {
 210             background-image: theme-image($theme-name, 'toolbar/scroll-left.gif');
 211             background-position: -14px 0;
 212         }
 213         .#{$prefix}toolbar-scroll-left-hover {
 214             background-position: 0 0;
 215         }
 216         .#{$prefix}toolbar-scroll-left-disabled {
 217             background-position: -14px 0;
 218         }
 219
 220         .#{$prefix}toolbar-scroll-left {
 221             width: 14px;
 222             height: 22px;
 223
 224             border-bottom: 1px solid #8db2e3;
 225         }
 226     }
 227
 228     .#{$prefix}horizontal-box-overflow-body {
 229         float: left;
 230     }
 231     .#{$prefix}box-scroller-right {
 232         float: right;
 233         height: 100%;
 234
 235         z-index: 5;
 236
 237         .#{$prefix}toolbar-scroll-right,
 238         .#{$prefix}tabbar-scroll-right {
 239             width: 18px;
 240             position: relative;
 241             cursor: pointer;
 242             height: $tab-height;
 243             background: theme-image($theme-name, 'tab-bar/scroll-right.gif') transparent no-repeat 0 0;
 244         }
 245         .#{$prefix}toolbar-scroll-right-hover {
 246             background-position: -18px 0;
 247         }
 248         .#{$prefix}toolbar-scroll-right-disabled,
 249         .#{$prefix}tabbar-scroll-right-disabled {
 250             background-position: 0 0;
 251             @include opacity(.5);
 252         }
 253
 254         .#{$prefix}toolbar-scroll-right {
 255             background-image: theme-image($theme-name, 'toolbar/scroll-right.gif');
 256         }
 257         .#{$prefix}toolbar-scroll-right-hover {
 258             background-position: -14px 0;
 259         }
 260         .#{$prefix}toolbar-scroll-right-disabled {
 261             background-position: 0 0;
 262         }
 263
 264         .#{$prefix}toolbar-scroll-right {
 265             width: 14px;
 266             height: 22px;
 267
 268             border-bottom: 1px solid #8db2e3;
 269         }
 270     }
 271
 272 // Classes for vertical Box layout scroller
 273     .#{$prefix}box-scroller-top {
 274         .#{$prefix}box-scroller {
 275             line-height: 0;
 276             font-size: 0;
 277         }
 278         .#{$prefix}menu-scroll-top {
 279             background: theme-image($theme-name, 'layout/mini-top.gif') transparent no-repeat center center;
 280             height: 8px;
 281             cursor: pointer;
 282         }
 283     }
 284     .#{$prefix}box-scroller-bottom {
 285         .#{$prefix}box-scroller {
 286             line-height: 0;
 287             font-size: 0;
 288         }
 289         .#{$prefix}menu-scroll-bottom {
 290             background: theme-image($theme-name, 'layout/mini-bottom.gif') transparent no-repeat center center;
 291             height: 8px;
 292             cursor: pointer;
 293         }
 294     }
 295
 296     .#{$prefix}box-menu-right {
 297         float: right;
 298         padding-right: $toolbar-horizontal-spacing;
 299     }
 300
 301     .#{$prefix}column {
 302         float: left;
 303     }
 304     @if $include-ie {
 305         .#{$prefix}ie6 .#{$prefix}column {
 306             display: inline; /*prevent IE6 double-margin bug*/
 307         }
 308     }
 309 }