docs/resources/themes/stylesheets/ext4/default/mixins/_frame.scss

   1 @mixin x-frame(
   2     $cls,
   3     $ui: null,
   4     $border-radius: 0px,
   5     $border-width: 0px,
   6     $padding: null,
   7     $background-color: null,
   8     $background-gradient: null,
   9     $table: false,
  10     $background-direction: top
  11 ) {
  12     $cls-ui: $cls;
  13     @if $ui != null {
  14         $cls-ui: $cls + '-' + $ui;
  15     }
  16
  17     $vertical: false;
  18     @if $background-direction == left or $background-direction == right {
  19         $vertical: true;
  20     }
  21
  22     $frame-top: max(top($border-radius), right($border-radius));
  23     $frame-right: max(right($border-radius), bottom($border-radius));
  24     $frame-bottom: max(bottom($border-radius), left($border-radius));
  25     $frame-left: max(left($border-radius), top($border-radius));
  26
  27     $padding-top: 0;
  28     $padding-right: 0;
  29     $padding-bottom: 0;
  30     $padding-left: 0;
  31
  32     @if $padding == null {
  33         $padding-top: $frame-top - top($border-width);
  34         $padding-right: $frame-right - right($border-width);
  35         $padding-bottom: $frame-bottom - bottom($border-width);
  36         $padding-left: $frame-left - left($border-width);
  37     }
  38     @else {
  39         $padding-top: top($padding);
  40         $padding-right: right($padding);
  41         $padding-bottom: bottom($padding);
  42         $padding-left: left($padding);
  43     }
  44
  45     @if $padding-top < $frame-top {
  46         $padding-top: $frame-top - top($border-width);
  47     }
  48     @if $padding-right < $frame-right {
  49         $padding-right: $frame-right - right($border-width);
  50     }
  51     @if $padding-bottom < $frame-bottom {
  52         $padding-bottom: $frame-bottom - bottom($border-width);
  53     }
  54     @if $padding-left < $frame-left {
  55         $padding-left: $frame-left - left($border-width);
  56     }
  57
  58     .#{$prefix}#{$cls-ui} {
  59         @if $supports-border-radius {
  60             @if length($border-radius) == 2 {
  61                 @include border-top-left-radius(nth($border-radius, 1));
  62                 @include border-top-right-radius(nth($border-radius, 2));
  63             } @else if length($border-radius) == 3 {
  64                 @include border-top-left-radius(nth($border-radius, 1));
  65                 @include border-top-right-radius(nth($border-radius, 2));
  66                 @include border-bottom-right-radius(nth($border-radius, 3));
  67             } @else if length($border-radius) == 4 {
  68                 @include border-top-left-radius(nth($border-radius, 1));
  69                 @include border-top-right-radius(nth($border-radius, 2));
  70                 @include border-bottom-right-radius(nth($border-radius, 3));
  71                 @include border-bottom-left-radius(nth($border-radius, 4));
  72             } @else {
  73                 @include border-radius($border-radius);
  74             }
  75         }
  76         padding: $padding-top $padding-right $padding-bottom $padding-left;
  77         border-width: $border-width;
  78         border-style: solid;
  79         @if $background-color != null {
  80             @if $supports-gradients and $background-gradient != null {
  81                 @include background-gradient($background-color, $background-gradient, $background-direction);
  82             }
  83             @else {
  84                 background-color: $background-color;
  85             }
  86         }
  87     }
  88
  89     @if not $supports-gradients or $compile-all {
  90         .#{$prefix}nlg {
  91             .#{$prefix}#{$cls-ui}-mc {
  92                 @if $background-gradient != null {
  93                     background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
  94                 }
  95                 @if $background-color != null {
  96                     background-color: $background-color;
  97                 }
  98             }
  99         }
 100     }
 101
 102     @if not $supports-border-radius or $compile-all {
 103         .#{$prefix}nbr {
 104             .#{$prefix}#{$cls-ui} {
 105                 padding: 0 !important;
 106                 border-width: 0 !important;
 107                 @include border-radius(0px);
 108                 @if $background-color != null {
 109                     background-color: transparent;
 110                 }
 111                 @else {
 112                     background: #fff;
 113                 }
 114
 115                 @function pad($radius) {
 116                     $radius: boxmax($radius);
 117                     $radius: parseint($radius);
 118                     @if $radius > 10 {
 119                         @return $radius;
 120                     }
 121                     @else {
 122                         @return "0" + $radius;
 123                     }
 124                 }
 125
 126                 $type: '100';
 127                 @if $table == true {
 128                     $type: '110';
 129                 }
 130                 $direction: '100';
 131                 @if $vertical == true {
 132                     $direction: '110';
 133                 }
 134
 135                 $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
 136                 $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
 137                 background-position: unquote($left) unquote($top);
 138             }
 139
 140             .#{$prefix}#{$cls-ui}-tl,
 141             .#{$prefix}#{$cls-ui}-bl,
 142             .#{$prefix}#{$cls-ui}-tr,
 143             .#{$prefix}#{$cls-ui}-br,
 144             .#{$prefix}#{$cls-ui}-tc,
 145             .#{$prefix}#{$cls-ui}-bc,
 146             .#{$prefix}#{$cls-ui}-ml,
 147             .#{$prefix}#{$cls-ui}-mr {
 148                 zoom:1;
 149
 150                 @if $background-color != transparent {
 151                     background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
 152                 }
 153             }
 154
 155             @if $vertical == true {
 156                 .#{$prefix}#{$cls-ui}-tc,
 157                 .#{$prefix}#{$cls-ui}-bc {
 158                     zoom:1;
 159
 160                     @if $background-color != transparent {
 161                         background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
 162                         background-position: 0 0;
 163                         background-repeat: repeat-x;
 164                     }
 165                 }
 166             } @else {
 167                 .#{$prefix}#{$cls-ui}-ml,
 168                 .#{$prefix}#{$cls-ui}-mr {
 169                     zoom:1;
 170
 171                     @if $background-color != transparent {
 172                         background-image: theme-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
 173                         background-position: 0 0;
 174                         @if $background-gradient == null {
 175                             background-repeat: repeat-y;
 176                         }
 177                     }
 178                 }
 179             }
 180
 181             $padding-top: $padding-top - $frame-top;
 182             $padding-right: $padding-right - $frame-right;
 183             $padding-bottom: $padding-bottom - $frame-bottom;
 184             $padding-left: $padding-left - $frame-left;
 185
 186
 187             @if $padding-top < 0 {
 188                 $padding-top: 0;
 189             }
 190             @if $padding-right < 0 {
 191                 $padding-right: 0;
 192             }
 193             @if $padding-bottom < 0 {
 194                 $padding-bottom: 0;
 195             }
 196             @if $padding-left < 0 {
 197                 $padding-left: 0;
 198             }
 199
 200             .#{$prefix}#{$cls-ui}-mc {
 201                 padding: $padding-top $padding-right $padding-bottom $padding-left;
 202             }
 203         }
 204     }
 205 }