partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

_frame.scss (7773B)


      1 @function pad($radius) {
      2     $radius: boxmax($radius);
      3     $radius: parseint($radius);
      4     @if $radius >= 10 {
      5         @return $radius;
      6     }
      7     @else {
      8         @return "0" + $radius;
      9     }
     10 }
     11 
     12 @mixin x-frame(
     13     $cls,
     14     $ui: null,
     15     $border-radius: 0px,
     16     $border-width: 0px,
     17     $padding: null,
     18     $background-color: null,
     19     $background-gradient: null,
     20     $table: false,
     21     $background-direction: top
     22 ) {
     23     $cls-ui: $cls;
     24     @if $ui != null {
     25         $cls-ui: $cls + '-' + $ui;
     26     }
     27 
     28     $vertical: false;
     29     @if $background-direction == left or $background-direction == right {
     30         $vertical: true;
     31     }
     32 
     33     $frame-top: max(top($border-radius), right($border-radius));
     34     $frame-right: max(right($border-radius), bottom($border-radius));
     35     $frame-bottom: max(bottom($border-radius), left($border-radius));
     36     $frame-left: max(left($border-radius), top($border-radius));
     37 
     38     $padding-top: 0;
     39     $padding-right: 0;
     40     $padding-bottom: 0;
     41     $padding-left: 0;
     42 
     43     @if $padding == null {
     44         $padding-top: $frame-top - top($border-width);
     45         $padding-right: $frame-right - right($border-width);
     46         $padding-bottom: $frame-bottom - bottom($border-width);
     47         $padding-left: $frame-left - left($border-width);
     48     }
     49     @else {
     50         $padding-top: top($padding);
     51         $padding-right: right($padding);
     52         $padding-bottom: bottom($padding);
     53         $padding-left: left($padding);
     54     }
     55 
     56     @if $padding-top < $frame-top {
     57         $padding-top: $frame-top - top($border-width);
     58     }
     59     @if $padding-right < $frame-right {
     60         $padding-right: $frame-right - right($border-width);
     61     }
     62     @if $padding-bottom < $frame-bottom {
     63         $padding-bottom: $frame-bottom - bottom($border-width);
     64     }
     65     @if $padding-left < $frame-left {
     66         $padding-left: $frame-left - left($border-width);
     67     }
     68 
     69     .#{$prefix}#{$cls-ui} {
     70         @if $supports-border-radius {
     71             @if length($border-radius) == 2 {
     72                 @include border-top-left-radius(nth($border-radius, 1));
     73                 @include border-top-right-radius(nth($border-radius, 2));
     74             } @else if length($border-radius) == 3 {
     75                 @include border-top-left-radius(nth($border-radius, 1));
     76                 @include border-top-right-radius(nth($border-radius, 2));
     77                 @include border-bottom-right-radius(nth($border-radius, 3));
     78             } @else if length($border-radius) == 4 {
     79                 @include border-top-left-radius(nth($border-radius, 1));
     80                 @include border-top-right-radius(nth($border-radius, 2));
     81                 @include border-bottom-right-radius(nth($border-radius, 3));
     82                 @include border-bottom-left-radius(nth($border-radius, 4));
     83             } @else {
     84                 @include border-radius($border-radius);
     85             }
     86         }
     87         padding: $padding-top $padding-right $padding-bottom $padding-left;
     88         border-width: $border-width;
     89         border-style: solid;
     90         @if $background-color != null {
     91             @if $supports-gradients and $background-gradient != null {
     92                 @include background-gradient($background-color, $background-gradient, $background-direction);
     93             }
     94             @else {
     95                 background-color: $background-color;
     96             }
     97         }
     98     }
     99 
    100     @if not $supports-gradients or $compile-all {
    101         .#{$prefix}nlg {
    102             .#{$prefix}#{$cls-ui}-mc {
    103                 @if $background-gradient != null {
    104                     background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
    105                 }
    106                 @if $background-color != null {
    107                     background-color: $background-color;
    108                 }
    109             }
    110         }
    111     }
    112 
    113     @if not $supports-border-radius or $compile-all {
    114         .#{$prefix}nbr {
    115             .#{$prefix}#{$cls-ui} {
    116                 padding: 0 !important;
    117                 border-width: 0 !important;
    118                 @include border-radius(0px);
    119                 @if $background-color != null {
    120                     background-color: transparent;
    121                 }
    122                 @else {
    123                     background: #fff;
    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-background-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-background-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-background-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 + top($border-width);
    182             $padding-right: $padding-right - $frame-right + right($border-width);
    183             $padding-bottom: $padding-bottom - $frame-bottom + bottom($border-width);
    184             $padding-left: $padding-left - $frame-left + left($border-width);
    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         @if $include-ie {
    206             // framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to
    207             // be shrink-wrapped to the width of their contents.  This hack forces the elements' widths to fit to their parent
    208             .#{$prefix}strict .#{$prefix}ie7 {
    209                 .#{$prefix}#{$cls-ui}-tl,
    210                 .#{$prefix}#{$cls-ui}-bl {
    211                     position: relative;
    212                     right: 0;
    213                 }
    214             }
    215         }
    216     }
    217 }