Source

mobile-demo-set / static / sdk / resources / themes / stylesheets / sencha-touch / default / _mixins.scss

Full commit
@import 'compass/css3';

/**
 * @class Global_CSS
 */

/**
 * Add a background gradient to a selector.
 *
 *     .my-element {
 *       @include background-gradient(green, 'recessed')
 *     }
 *
 * @param {color} $bg-color The base color of the gradient.
 * @param {string} $type The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or flat.
 */
@mixin background-gradient($bg-color, $type: $base-gradient) {
  background-color: $bg-color;
  @if $include-highlights {
    @if $type == bevel {
      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 15%) 2%, lighten($bg-color, 8%) 30%, $bg-color 65%, darken($bg-color, 10%))));
    } @else if $type == glossy {
      @include background-image(linear-gradient(color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%))));
    } @else if $type == recessed {
      @include background-image(linear-gradient(color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%))));
    } @else if $type == matte {
      @include background-image(linear-gradient(color_stops(lighten($bg-color, 30%), lighten($bg-color, 7%) 2%, darken($bg-color, 7%))));
    } @else {
      background-image: none;
    }
  }
}

/**
 * Includes a base64-encoded icon for use within tab bars and buttons (With the component parameter iconMask: true).
 *
 *     @include pictos-iconmask('attachment');
 *
 * @param {string} $name The name of the icon to be included. This is to match the name of the icon file (located at resources/themes/images/default/pictos) without its extention (.png).
 */
@mixin pictos-iconmask($name) {
  .x-tab .x-button-icon.#{$name},
  .x-button .x-button-icon.x-icon-mask.#{$name} {
    -webkit-mask-image: theme_image($theme-name, "pictos/" + $name + ".png");
  }
}

/**
 * Includes the default styles for toolbar buttons, mostly used as a helper function.
 *
 * @param {color} $bg-color Base color to be used for the button.
 * @param {color} $type Gradient style for the button, will automatically use "recessed" when pressed.
 */
@mixin toolbar-button($bg-color, $type: $button-gradient){
  &, .x-toolbar & {
    border: 1px solid darken($bg-color, 20%);
    border-top-color: darken($bg-color, 15%);
    @include color-by-background($bg-color);

    &.x-button-back:before, &.x-button-forward:before {
      background: darken($bg-color, 20%);
    }

    &, &.x-button-back:after, &.x-button-forward:after {
      @include background-gradient($bg-color, $type);
    }

    .x-button-icon.x-icon-mask {
      @include mask-by-background($bg-color);
    }

    &.x-button-pressing, &.x-button-pressed, &.x-button-active {
      &, &:after {
        @include background-gradient(darken($bg-color, 3%), 'recessed');
      }
    }
  }
}

/**
 * Adds a small text shadow (or highlight) to give the impression of beveled text.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-text($type: 'shadow') {
  @if $include-highlights {
    @if $type == shadow {
      text-shadow: rgba(0,0,0,.5) 0 -.08em 0;
    } @else {
      text-shadow: rgba(255,255,255,.25) 0 .08em 0;
    }
  }
}

/**
 * Adds a small box shadow (or highlight) to give the impression of being beveled.
 *
 * @param {string} $type Either shadow or highlight, decides whether to apply a light shadow or dark.
 */
@mixin bevel-box($type: 'light') {
  @if $include-highlights {
    @if $type == shadow {
      -webkit-box-shadow: rgba(#000, .5) 0 -.06em 0;
    } @else {
      -webkit-box-shadow: rgba(#fff, .35) 0 .06em 0;
    }
  }
}

/**
 * Adds basic styles to :before or :after pseudo-elements.
 *
 *     .my-element:after {
 *       @include insertion(50px, 50px);
 *     }
 *
 * @param {measurement} $width Height of pseudo-element.
 * @param {measurement} $height Height of pseudo-element.
 * @param {measurement} $top Top positioning of pseudo-element.
 * @param {measurement} $left Left positioning of pseudo-element.
 *
 */
@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) {
  content: "";
  position: absolute;
  width: $width;
  height: $height;
  top: $top;
  left: $left;
}

/**
 * Makes an element stretch to its parent's bounds.
 */
@mixin stretch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/**
 * Colors the text of an element based on lightness of its background.
 *
 *     .my-element {
 *       @include color-by-background(#fff); // Colors text black.
 *     }
 *
 *     .my-element {
 *       @include color-by-background(#fff, 40%); // Colors text gray.
 *     }
 *
 * @param {color} $bg-color Background color of element.
 * @param {percent} $contrast Contrast of text color to its background.
 *
 */
@mixin color-by-background($bg-color, $contrast: 100%) {
  @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) }
  @else { color: lighten($bg-color, $contrast) }
}

/**
 * Bevels the text based on its background.
 *
 * @param {color} $bg-color Background color of element.
 * @see bevel-text
 *
 */
@mixin bevel-by-background($bg-color) {
  @if (lightness($bg-color) > 50) { @include bevel-text(light) }
  @else { @include bevel-text; }
}

/**
 * Creates a background gradient for masked elements, based on the lightness of their background.
 *
 * @param {color} $bg-color Background color of element.
 * @param {percent} $percent Contrast of the new gradient to its background.
 * @param {percent} $style Gradient style of the gradient.
 * @see background-gradient
 *
 */
@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {
  @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }
  @else { @include background-gradient(lighten($bg-color, $contrast), $style) }
}

/**
 * Makes the element text overflow to use ellipsis.
 */
@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}