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: transparent no-repeat -18px 0;
 187             @include theme-background-image($theme-name, 'tab-bar/scroll-left.gif');
 188         }
 189         .#{$prefix}toolbar-scroll-left-hover {
 190             background-position: 0 0;
 191         }
 192         .#{$prefix}toolbar-scroll-left-disabled,
 193         .#{$prefix}tabbar-scroll-left-disabled {
 194             background-position: -18px 0;
 195             @include opacity(.5);
 196
 197             cursor:default;
 198         }
 199
 200         .#{$prefix}toolbar-scroll-left {
 201             @include theme-background-image($theme-name, 'toolbar/scroll-left.gif');
 202             background-position: -14px 0;
 203         }
 204         .#{$prefix}toolbar-scroll-left-hover {
 205             background-position: 0 0;
 206         }
 207         .#{$prefix}toolbar-scroll-left-disabled {
 208             background-position: -14px 0;
 209         }
 210
 211         .#{$prefix}toolbar-scroll-left {
 212             width: 14px;
 213             height: 22px;
 214
 215             border-bottom: 1px solid #8db2e3;
 216         }
 217     }
 218
 219     .#{$prefix}horizontal-box-overflow-body {
 220         float: left;
 221     }
 222     .#{$prefix}box-scroller-right {
 223         float: right;
 224         height: 100%;
 225
 226         z-index: 5;
 227
 228         .#{$prefix}toolbar-scroll-right,
 229         .#{$prefix}tabbar-scroll-right {
 230             width: 18px;
 231             position: relative;
 232             cursor: pointer;
 233             height: $tab-height;
 234             background: transparent no-repeat 0 0;
 235             @include theme-background-image($theme-name, 'tab-bar/scroll-right.gif');
 236         }
 237         .#{$prefix}toolbar-scroll-right-hover {
 238             background-position: -18px 0;
 239         }
 240         .#{$prefix}toolbar-scroll-right-disabled,
 241         .#{$prefix}tabbar-scroll-right-disabled {
 242             background-position: 0 0;
 243             @include opacity(.5);
 244
 245             cursor:default;
 246         }
 247
 248         .#{$prefix}toolbar-scroll-right {
 249             @include theme-background-image($theme-name, 'toolbar/scroll-right.gif');
 250         }
 251         .#{$prefix}toolbar-scroll-right-hover {
 252             background-position: -14px 0;
 253         }
 254         .#{$prefix}toolbar-scroll-right-disabled {
 255             background-position: 0 0;
 256         }
 257
 258         .#{$prefix}toolbar-scroll-right {
 259             width: 14px;
 260             height: 22px;
 261
 262             border-bottom: 1px solid #8db2e3;
 263         }
 264     }
 265
 266 // Classes for vertical Box layout scroller
 267     .#{$prefix}box-scroller-top {
 268         .#{$prefix}box-scroller {
 269             line-height: 0;
 270             font-size: 0;
 271         }
 272         .#{$prefix}menu-scroll-top {
 273             background: transparent no-repeat center center;
 274             @include theme-background-image($theme-name, 'layout/mini-top.gif');
 275             height: 8px;
 276             cursor: pointer;
 277         }
 278     }
 279     .#{$prefix}box-scroller-bottom {
 280         .#{$prefix}box-scroller {
 281             line-height: 0;
 282             font-size: 0;
 283         }
 284         .#{$prefix}menu-scroll-bottom {
 285             background: transparent no-repeat center center;
 286             @include theme-background-image($theme-name, 'layout/mini-bottom.gif');
 287             height: 8px;
 288             cursor: pointer;
 289         }
 290     }
 291
 292     .#{$prefix}box-menu-right {
 293         float: right;
 294         padding-right: $toolbar-horizontal-spacing;
 295     }
 296
 297     .#{$prefix}column {
 298         float: left;
 299     }
 300     @if $include-ie {
 301         .#{$prefix}ie6 .#{$prefix}column {
 302             display: inline; /*prevent IE6 double-margin bug*/
 303         }
 304     }
 305 }