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