add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-windows / sass / etc / mixins.scss

$default-gradient: null;\r
\r
/**\r
 * @class Global_CSS\r
 */\r
\r
/**\r
 * Includes the default styles for toolbar buttons, mostly used as a helper function.\r
 *\r
 * @param {color} $bg-color Base color to be used for the button.\r
 */\r
@mixin toolbar-button($bg-color) {\r
  &,\r
  .x-toolbar & {\r
    border: 2px solid $foreground-color;\r
    background-color: $bg-color;\r
\r
    &,\r
    &.x-button-back:after,\r
    &.x-button-forward:after {\r
      background-color: $bg-color;\r
    }\r
\r
    &.x-button-pressing,\r
    &.x-button-pressed {\r
      &,\r
      &:after {\r
        color: $bg-color;\r
        background-color: $foreground-color;\r
      }\r
    }\r
  }\r
}\r
\r
/**\r
 * Creates a background gradient for masked elements, based on the lightness of their background.\r
 *\r
 * @param {color} $bg-color Background color of element.\r
 * @param {percent} $percent Contrast of the new gradient to its background.\r
 * @param {percent} $style Gradient style of the gradient.\r
 *\r
 */\r
@mixin mask-by-background($bg-color, $contrast: 100%, $style: $base-gradient) {\r
  @if (lightness($bg-color) > 50) { @include background-gradient(darken($bg-color, $contrast), $style) }\r
  @else { @include background-gradient(lighten($bg-color, $contrast), $style) }\r
}\r
\r
\r
@mixin readable-color($color, $contrast: 100) {\r
  @if lightness(lighten($color, 100 - $contrast)) > 30 {\r
      color: $color;\r
      fill: $color;\r
  } @else {\r
      color: darken(lighten($color, 100 - $contrast), 30);\r
      fill: darken(lighten($color, 100 - $contrast), 30);\r
  }\r
}\r
\r
/**\r
* TextBlock styles\r
*/\r
@mixin phone-text-normal(){\r
  font-family: $phone-font-family-normal;\r
  font-size: $font-size-normal;\r
  color: $foreground-color;\r
}\r
\r
@mixin phone-text-title1(){\r
  font-family: $phone-font-family-semilight;\r
  font-size: $font-size-extra-large;\r
  color: $foreground-color;\r
}\r
\r
@mixin phone-text-subtle(){\r
  font-family: $phone-font-family-normal;\r
  font-size: $font-size-normal;\r
  color: $phone-subtle-color;\r
}\r
\r
@mixin phone-text-title2(){\r
  font-family: $phone-font-family-semilight;\r
  font-size: $phone-font-size-large;\r
  color: $foreground-color;\r
}\r
\r
@mixin phone-text-title3(){\r
  font-family: $phone-font-family-semilight;\r
  font-size: $font-size-medium;\r
  color: $foreground-color;\r
}\r
\r
@mixin phone-text-accent(){\r
  font-family: $phone-font-family-semibold;\r
  font-size: $font-size-normal;\r
  color: $base-color;\r
}\r
\r
@mixin fieldset-instructions() {\r
  color: #666666;\r
  font-size: .8em;\r
  text-align: left;\r
  margin: 0.7em 0 0.3em 0;\r
}\r