resources/themes/stylesheets/ext4/default/mixins/_btn.scss

   1 @mixin x-btn(
   2     $ui,
   3
   4     $border-radius: null,
   5
   6     $border-width: null,
   7
   8     $border-color: null,
   9     $border-color-over: null,
  10     $border-color-focus: null,
  11     $border-color-pressed: null,
  12     $border-color-disabled: null,
  13
  14     $padding: null,
  15     $text-padding: null,
  16
  17     $background-color: null,
  18     $background-color-over: null,
  19     $background-color-focus: null,
  20     $background-color-pressed: null,
  21     $background-color-disabled: null,
  22
  23     $background-gradient: null,
  24     $background-gradient-over: null,
  25     $background-gradient-focus: null,
  26     $background-gradient-pressed: null,
  27     $background-gradient-disabled: null,
  28
  29     $color: null,
  30     $color-over: null,
  31     $color-focus: null,
  32     $color-pressed: null,
  33     $color-disabled: null,
  34
  35     $font-size: null,
  36     $font-size-over: null,
  37     $font-size-focus: null,
  38     $font-size-pressed: null,
  39     $font-size-disabled: null,
  40
  41     $font-weight: null,
  42     $font-weight-over: null,
  43     $font-weight-focus: null,
  44     $font-weight-pressed: null,
  45     $font-weight-disabled: null,
  46
  47     $font-family: null,
  48     $font-family-over: null,
  49     $font-family-focus: null,
  50     $font-family-pressed: null,
  51     $font-family-disabled: null,
  52
  53     $icon-size: null
  54 ) {
  55     .#{$prefix}btn-#{$ui} {
  56         border-color: $border-color;
  57     }
  58
  59     @include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, $background-gradient, true);
  60
  61     .#{$prefix}btn-#{$ui} .#{$prefix}btn-inner {
  62         font-size: $font-size;
  63         font-weight: $font-weight;
  64         font-family: $font-family;
  65         color: $color;
  66         background-repeat: no-repeat;
  67         padding: 0 $text-padding;
  68     }
  69
  70     .#{$prefix}btn-#{$ui}-icon,
  71     .#{$prefix}btn-#{$ui}-noicon {
  72         button,
  73         .#{$prefix}btn-inner {
  74             height: $icon-size;
  75             line-height: $icon-size;
  76         }
  77     }
  78
  79     //icons
  80     .#{$prefix}btn-#{$ui}-icon {
  81         .#{$prefix}btn-inner {
  82             padding: 0;
  83             width: $icon-size !important;
  84         }
  85     }
  86
  87     .#{$prefix}btn-#{$ui}-icon-text-left {
  88         button {
  89             height: $icon-size;
  90         }
  91         .#{$prefix}btn-inner {
  92             height: $icon-size;
  93             line-height: $icon-size;
  94             padding-left: $icon-size + 4px;
  95         }
  96     }
  97
  98     .#{$prefix}btn-#{$ui}-icon-text-right {
  99         button {
 100             height: $icon-size;
 101         }
 102         .#{$prefix}btn-inner {
 103             height: $icon-size;
 104             line-height: $icon-size;
 105             padding-right: $icon-size + 4px !important;
 106         }
 107     }
 108
 109     .#{$prefix}btn-#{$ui}-icon-text-top {
 110         .#{$prefix}btn-inner {
 111             padding-top: $icon-size + 4px;
 112         }
 113     }
 114
 115     .#{$prefix}btn-#{$ui}-icon-text-bottom {
 116         .#{$prefix}btn-inner {
 117             padding-bottom: $icon-size + 4px;
 118         }
 119     }
 120
 121     .#{$prefix}btn-#{$ui}-over {
 122         @if $border-color-over != $border-color {
 123             border-color: $border-color-over;
 124         }
 125         @if $background-color-over != null {
 126             @if $background-gradient-over != $background-gradient {
 127                 @include background-gradient($background-color-over, $background-gradient-over);
 128             }
 129             @else if $background-color-over != $background-color {
 130                 background-color: $background-color-over;
 131             }
 132         }
 133
 134         .#{$prefix}btn-inner {
 135             @if $color-over != $color {
 136                 color: $color-over;
 137             }
 138             @if $font-weight-over != $font-weight {
 139                 font-weight: $font-weight-over;
 140             }
 141             @if $font-size-over != $font-size {
 142                 font-size: $font-size-over;
 143             }
 144             @if $font-family-over != $font-family {
 145                 font-family: $font-family-over;
 146             }
 147         }
 148     }
 149
 150     .#{$prefix}btn-#{$ui}-focus {
 151         @if $border-color-focus != $border-color {
 152             border-color: $border-color-focus;
 153         }
 154         @if $background-color-focus != null {
 155             @if $background-gradient-focus != $background-gradient {
 156                 @include background-gradient($background-color-focus, $background-gradient-focus);
 157             }
 158             @else if $background-color-focus != $background-color {
 159                 background-color: $background-color-focus;
 160             }
 161         }
 162
 163         .#{$prefix}btn-inner {
 164             @if $color-focus != $color {
 165                 color: $color-focus;
 166             }
 167             @if $font-weight-focus != $font-weight {
 168                 font-weight: $font-weight-focus;
 169             }
 170             @if $font-size-focus != $font-size {
 171                 font-size: $font-size-focus;
 172             }
 173             @if $font-family-focus != $font-family {
 174                 font-family: $font-family-focus;
 175             }
 176         }
 177     }
 178
 179     .#{$prefix}btn-#{$ui}-menu-active,
 180     .#{$prefix}btn-#{$ui}-pressed {
 181         @if $border-color-pressed != $border-color {
 182             border-color: $border-color-pressed;
 183         }
 184         @if $background-color-pressed != null {
 185             @if $background-gradient-pressed != $background-gradient {
 186                 @include background-gradient($background-color-pressed, $background-gradient-pressed);
 187             }
 188             @else if $background-color-pressed != $background-color {
 189                 background-color: $background-color-pressed;
 190             }
 191         }
 192
 193         .#{$prefix}btn-inner {
 194             @if $color-pressed != $color {
 195                 color: $color-pressed;
 196             }
 197             @if $font-weight-pressed != $font-weight {
 198                 font-weight: $font-weight-pressed;
 199             }
 200             @if $font-size-pressed != $font-size {
 201                 font-size: $font-size-pressed;
 202             }
 203             @if $font-family-pressed != $font-family {
 204                 font-family: $font-family-pressed;
 205             }
 206         }
 207     }
 208
 209     .#{$prefix}btn-#{$ui}-disabled {
 210         @if $border-color-disabled != $border-color {
 211             border-color: $border-color-disabled;
 212         }
 213         @if $background-color-disabled != null {
 214             @if $background-gradient-disabled != $background-gradient {
 215                 @include background-gradient($background-color-disabled, $background-gradient-disabled);
 216             }
 217             @else if $background-color-disabled != $background-color {
 218                 background-color: $background-color-disabled;
 219             }
 220         }
 221
 222         .#{$prefix}btn-inner {
 223             @if $color-disabled != $color {
 224                 color: $color !important;
 225             }
 226             @if $font-weight-disabled != $font-weight {
 227                 font-weight: $font-weight-disabled;
 228             }
 229             @if $font-size-disabled != $font-size {
 230                 font-size: $font-size-disabled;
 231             }
 232             @if $font-family-disabled != $font-family {
 233                 font-family: $font-family-disabled;
 234             }
 235         }
 236     }
 237
 238     .#{$prefix}ie .#{$prefix}btn-#{$ui}-disabled {
 239         .#{$prefix}btn-inner {
 240             color: darken($color-disabled, 20) !important;
 241         }
 242     }
 243
 244     .#{$prefix}ie6 .#{$prefix}btn-#{$ui}-disabled {
 245         .#{$prefix}btn-inner {
 246             color: $color-disabled !important;
 247         }
 248     }
 249
 250     @if not $supports-border-radius or $compile-all {
 251         .#{$prefix}nbr {
 252             .#{$prefix}btn-#{$ui}-over {
 253                 .#{$prefix}frame-tl,
 254                 .#{$prefix}frame-bl,
 255                 .#{$prefix}frame-tr,
 256                 .#{$prefix}frame-br,
 257                 .#{$prefix}frame-tc,
 258                 .#{$prefix}frame-bc {
 259                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif');
 260                 }
 261                 .#{$prefix}frame-ml,
 262                 .#{$prefix}frame-mr {
 263                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif');
 264                 }
 265                 .#{$prefix}frame-mc {
 266                     background-color: $background-color-over;
 267                     @if $background-gradient-over {
 268                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
 269                     }
 270                 }
 271             }
 272
 273             .#{$prefix}btn-#{$ui}-focus {
 274                 .#{$prefix}frame-tl,
 275                 .#{$prefix}frame-bl,
 276                 .#{$prefix}frame-tr,
 277                 .#{$prefix}frame-br,
 278                 .#{$prefix}frame-tc,
 279                 .#{$prefix}frame-bc {
 280                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif');
 281                 }
 282                 .#{$prefix}frame-ml,
 283                 .#{$prefix}frame-mr {
 284                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif');
 285                 }
 286                 .#{$prefix}frame-mc {
 287                     background-color: $background-color-focus;
 288                     @if $background-gradient-focus {
 289                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
 290                     }
 291                 }
 292             }
 293
 294             .#{$prefix}btn-#{$ui}-menu-active,
 295             .#{$prefix}btn-#{$ui}-pressed {
 296                 .#{$prefix}frame-tl,
 297                 .#{$prefix}frame-bl,
 298                 .#{$prefix}frame-tr,
 299                 .#{$prefix}frame-br,
 300                 .#{$prefix}frame-tc,
 301                 .#{$prefix}frame-bc {
 302                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif');
 303                 }
 304                 .#{$prefix}frame-ml,
 305                 .#{$prefix}frame-mr {
 306                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif');
 307                 }
 308                 .#{$prefix}frame-mc {
 309                     background-color: $background-color-pressed;
 310                     @if $background-gradient-pressed {
 311                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
 312                     }
 313                 }
 314             }
 315
 316             .#{$prefix}btn-#{$ui}-disabled {
 317                 .#{$prefix}frame-tl,
 318                 .#{$prefix}frame-bl,
 319                 .#{$prefix}frame-tr,
 320                 .#{$prefix}frame-br,
 321                 .#{$prefix}frame-tc,
 322                 .#{$prefix}frame-bc {
 323                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif');
 324                 }
 325                 .#{$prefix}frame-ml,
 326                 .#{$prefix}frame-mr {
 327                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif');
 328                 }
 329                 .#{$prefix}frame-mc {
 330                     background-color: $background-color-disabled;
 331                     @if $background-gradient-disabled {
 332                         background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
 333                     }
 334                 }
 335             }
 336         }
 337     }
 338
 339     @if not $supports-gradients or $compile-all {
 340         @if $background-gradient != null {
 341             .#{$prefix}nlg {
 342                 .#{$prefix}btn-#{$ui} {
 343                     background-repeat: repeat-x;
 344                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-bg.gif');
 345                 }
 346             }
 347         }
 348
 349         @if $background-gradient-over != null {
 350             .#{$prefix}nlg {
 351                 .#{$prefix}btn-#{$ui}-over {
 352                     background-repeat: repeat-x;
 353                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
 354                 }
 355             }
 356         }
 357
 358         @if $background-gradient-focus != null {
 359             .#{$prefix}nlg {
 360                 .#{$prefix}btn-#{$ui}-focus {
 361                     background-repeat: repeat-x;
 362                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
 363                 }
 364             }
 365         }
 366
 367         @if $background-gradient-pressed != null {
 368             .#{$prefix}nlg {
 369                 .#{$prefix}btn-#{$ui}-menu-active,
 370                 .#{$prefix}btn-#{$ui}-pressed {
 371                     background-repeat: repeat-x;
 372                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
 373                 }
 374             }
 375         }
 376
 377         @if $background-gradient-disabled != null {
 378             .#{$prefix}nlg {
 379                 .#{$prefix}btn-#{$ui}-disabled {
 380                     background-repeat: repeat-x;
 381                     background-image: theme-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
 382                 }
 383             }
 384         }
 385     }
 386 };