diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b5b1f6b4..06589e3f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/). +## [2.1.1] - 2022-03-15 + +### Added +- Control border radius and elevation from `--igc-radius-factor` and `--igc-elevation-factor`: + + Example: + ```css + /* Make all components square and remove all shadows */ + :root { + --igc-radius-factor: 0; + --igc-elevation-factor: 0; + } + ``` + ## [2.1.0] - 2022-03-15 ### Added @@ -61,6 +75,7 @@ Initial release of Ignite UI Web Components - Ripple component - Switch component +[2.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.1.0...2.1.1 [2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/2.0.0...2.1.0 [2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/1.0.0...2.0.0 [1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0 diff --git a/src/styles/utilities/_elevations.scss b/src/styles/utilities/_elevations.scss index ee8774bec..a0ac92cbd 100644 --- a/src/styles/utilities/_elevations.scss +++ b/src/styles/utilities/_elevations.scss @@ -2,18 +2,40 @@ @use 'sass:math'; @use 'sass:meta'; @use 'sass:string'; +@use 'sass:list'; //// /// @group elevations /// @author Simeon Simeonoff //// +@function _transform-levels($levels) { + $result: (); + $x: var(--igc-elevation-factor, 1); + + @each $k, $v in $levels { + $l: (); + + @each $d in $v { + @if meta.type-of($d) != color and $d != 0 { + $l: list.append($l, calc($x * $d)); + } @else { + $l: list.append($l, $d); + } + } + + $result: map.merge($result, ($k: $l)); + } + + @return $result; +} + /// Level 1 - Umbra Shadows /// @access private /// @param {Color} $color - The color used to generate umbra shadows. /// @returns {Map} Returns a map of 24 shadow elevations with the umbra color. @function _l1-shadows($color) { - @return ( + @return _transform-levels(( 1: 0 1px 3px 0 $color, 2: 0 1px 5px 0 $color, 3: 0 1px 8px 0 $color, @@ -38,7 +60,7 @@ 22: 0 10px 14px -6px $color, 23: 0 11px 14px -7px $color, 24: 0 11px 15px -7px $color - ); + )); } /// Level 2 - Penumbra Shadows @@ -46,7 +68,7 @@ /// @param {Color} $color - The color used to generate penumbra shadows. /// @returns {Map} Returns a map of 24 shadow elevations with the penumbra color. @function _l2-shadows($color) { - @return ( + @return _transform-levels(( 1: 0 1px 1px 0 $color, 2: 0 2px 2px 0 $color, 3: 0 3px 4px 0 $color, @@ -71,7 +93,7 @@ 22: 0 22px 35px 3px $color, 23: 0 23px 36px 3px $color, 24: 0 24px 38px 3px $color - ); + )); } /// Level 3 - Ambient Shadows @@ -79,7 +101,7 @@ /// @param {Color} $color - The color used to generate ambient shadows. /// @returns {Map} Returns a map of 24 shadow elevations with the ambient color. @function _l3-shadows($color) { - @return ( + @return _transform-levels(( 1: 0 2px 1px -1px $color, 2: 0 3px 1px -2px $color, 3: 0 3px 3px -2px $color, @@ -104,7 +126,7 @@ 22: 0 8px 42px 7px $color, 23: 0 9px 44px 8px $color, 24: 0 9px 46px 8px $color - ); + )); } /// Returns shadow based on elevation, umbra, penumbra, and ambient shadow colors.