samples/packages/mdc_web/src/scss/shape/_functions.scss

//
// Copyright 2018 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "./variables";

//
// Flips the radius values based on RTL context.
//
// Examples:
//
// 1. mdc-shape-flip-radius((0, 4px, 4px, 0)) => 4px 0 0 4px
// 2. mdc-shape-flip-radius((0, 8px)) => 8px 0
//
@function mdc-shape-flip-radius($radius) {
  @if type-of($radius) == "list" {
    @if length($radius) > 4 {
      @error "Invalid radius: '#{$radius}' is more than 4 values";
    }
  }

  @if length($radius) == 4 {
    @return nth($radius, 2) nth($radius, 1) nth($radius, 4) nth($radius, 3);
  } @else if length($radius) == 3 {
    @return nth($radius, 2) nth($radius, 1) nth($radius, 2) nth($radius, 3);
  } @else if length($radius) == 2 {
    @return nth($radius, 2) nth($radius, 1);
  } @else {
    @return $radius;
  }
}

//
// Resolves the percentage unit radius to appropriate absolute radius value based on component height.
// Use this for fixed height components only.
//
// Examples:
//
// mdc-shape-resolve-percentage-radius(36px, 50%) => `18px` (i.e., 36px / 2)
//
@function mdc-shape-resolve-percentage-radius($component-height, $radius) {
  $radius: mdc-shape-prop-value($radius);

  @if type-of($radius) == "list" {
    $radius-value: ();

    @each $corner in $radius {
      $radius-value: append($radius-value, mdc-shape-resolve-percentage-for-corner_($component-height, $corner));
    }

    @return $radius-value;
  } @else {
    @return mdc-shape-resolve-percentage-for-corner_($component-height, $radius);
  }
}

//
// Returns $radius value of shape category - `large`, `medium` or `small`.
// Otherwise, it returns the $radius itself if valid.
// $radius can be a single value, or a list of up to 4 values.
//
// Examples:
//
// mdc-shape-prop-value(small) => 4px
// mdc-shape-prop-value(small small 0 0) => 4px 4px 0 0
//
@function mdc-shape-prop-value($radius) {
  @if type-of($radius) == "list" {
    @if length($radius) > 4 {
      @error "Invalid radius: '#{$radius}' is more than 4 values";
    }

    $radius-values: ();

    @for $i from 1 through length($radius) {
      $corner: nth($radius, $i);

      @if map-has-key($mdc-shape-category-values, $corner) {
        // If a category is encountered within a list of radii, apply the category's value for the corresponding corner
        $radius-values:
          append($radius-values, nth(mdc-shape-unpack-radius_(map-get($mdc-shape-category-values, $corner)), $i));
      } @else {
        $radius-values: append($radius-values, mdc-shape-validate-radius-value_($corner));
      }
    }

    @return $radius-values;
  } @else {
    @if map-has-key($mdc-shape-category-values, $radius) {
      @return map-get($mdc-shape-category-values, $radius);
    } @else {
      @return mdc-shape-validate-radius-value_($radius);
    }
  }
}

//
// Accepts radius number or list of 2-4 radius values and returns 4 value list with
// masked corners as mentioned in `$masked-corners`
//
// Example:
//
// 1. mdc-shape-mask-radius(2px 3px, 1 1 0 0) => 2px 3px 0 0
// 2. mdc-shape-mask-radius(8px, 0 0 1 1) => 0 0 8px 8px
// 3. mdc-shape-mask-radius(4px 4px 4px 4px, 0 1 1 0) => 0 4px 4px 0
//
@function mdc-shape-mask-radius($radius, $masked-corners) {
  @if type-of($radius) == "list" {
    @if length($radius) > 4 {
      @error "Invalid radius: '#{$radius}' is more than 4 values";
    }
  }

  @if length($masked-corners) != 4 {
    @error "Expected masked-corners of length 4 but got '#{length($masked-corners)}'.";
  }

  $radius: mdc-shape-unpack-radius_($radius);

  @return if(nth($masked-corners, 1) == 1, nth($radius, 1), 0)
    if(nth($masked-corners, 2) == 1, nth($radius, 2), 0)
    if(nth($masked-corners, 3) == 1, nth($radius, 3), 0)
    if(nth($masked-corners, 4) == 1, nth($radius, 4), 0);
}

//
// Unpacks shorthand values for border-radius (i.e. lists of 1-3 values).
// If a list of 4 values is given, it is returned as-is.
//
// Examples:
//
// 1. mdc-shape-unpack-radius_(4px) => 4px 4px 4px 4px
// 2. mdc-shape-unpack-radius_(4px 2px) => 4px 2px 4px 2px
// 3. mdc-shape-unpack-radius_(4px 2px 2px) => 4px 2px 2px 2px
// 2. mdc-shape-unpack-radius_(4px 2px 0 2px) => 4px 2px 0 2px
//
// TODO: This is private for purposes of getting it into a patch; make it public for a future minor/major release.
//
@function mdc-shape-unpack-radius_($radius) {
  @if length($radius) == 4 {
    @return $radius;
  } @else if length($radius) == 3 {
    @return nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 2);
  } @else if length($radius) == 2 {
    @return nth($radius, 1) nth($radius, 2) nth($radius, 1) nth($radius, 2);
  } @else if length($radius) == 1 {
    @return $radius $radius $radius $radius;
  }

  @error "Invalid radius: '#{$radius}' is more than 4 values";
}

@function mdc-shape-resolve-percentage-for-corner_($component-height, $radius) {
  @if type-of($radius) == "number" and unit($radius) == "%" {
    // Converts the percentage to number without unit. Example: 50% => 50.
    $percentage: $radius / ($radius * 0 + 1);

    @return $component-height * ($percentage / 100);
  } @else {
    @return $radius;
  }
}

@function mdc-shape-validate-radius-value_($radius) {
  $is-number: type-of($radius) == "number";

  @if not ($is-number or str_index($radius, "var(") or str_index($radius, "calc(")) {
    @error "Invalid radius: #{$radius}";
  }

  @return $radius;
}