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