Infragistics
Start Free Trial
Ignite UISass API
ComponentsGet Started

utilities

#

functiondynamic-shadepublicview codeopen_in_new

Calculates a dynamic shade of a color by adjusting its lightness in LCH color space.

Parameters
NameTypeDefaultDescription
$color*
Color
-The base color to shade.
$lightness
Number
50The target lightness value to move toward.
$percentage
Number
0.1The percentage to move toward the target lightness.
$offset
Number
10The offset added or subtracted based on direction.
#

functionborder-radiuspublicview codeopen_in_new

Returns a value between an upper and lower bound.

Example
.my-component {
  border-radius: border-radius(10px, 5px, 20px);
}
Parameters
NameTypeDefaultDescription
$radius*
Number
-The preferred value.
$min
Number
rem(0)The minimum value.
$max
Number
$radiusThe maximum allowed value.
#

functionpadpublicview codeopen_in_new

Returns a value based on the size of the component taking spacing values into consideration. The passed sizes are converted to absolute values before comparing.

Example
.my-component {
  padding: pad(4px, 8px, 16px);
}
Parameters
NameTypeDefaultDescription
$sm*
Number
-The preferred value when the component's size is small.
$md
Number
$smThe preferred value when the component's size is medium.
$lg
Number
$mdThe preferred value when the component's size is large.
$dir
Number
nullThe preferred direction - inline or block.
#

functionpad-inlinepublicview codeopen_in_new

Used to add inline spacing.

Example
.my-component {
  padding: pad-inline(4px, 8px, 16px);
}
Parameters
NameTypeDefaultDescription
$sm*
Number
-The preferred value when the component's size is small.
$md
Number
$smThe preferred value when the component's size is medium.
$lg
Number
$mdThe preferred value when the component's size is large.
#

functionpad-blockpublicview codeopen_in_new

Used to add block spacing.

Example
.my-component {
  padding: pad-block(4px, 8px, 16px);
}
Parameters
NameTypeDefaultDescription
$sm*
Number
-The preferred value when the component's size is small.
$md
Number
$smThe preferred value when the component's size is medium.
$lg
Number
$mdThe preferred value when the component's size is large.
#

functioncleanpublicview codeopen_in_new

Removes all null key-value pairs from a map

Parameters
NameTypeDefaultDescription
$map*
Map
-The target map to be cleaned.
#

functionextendpublicview codeopen_in_new

Extends a Map with the values of another Map, disregarding null values in the process.

Parameters
NameTypeDefaultDescription
$maps*
Map...
-The maps to get extended.
Requires
#

functiondiffpublicview codeopen_in_new

Extracts the differences between two or more maps, comparing the first map against the rest.

Example

Pull out the unique properties of the second map when compared to the first.

$map-1: (
  color: orange,
  background: black,
);


$map-2: (
  color: red,
  background: black,
);


$diffed: diff($map-1, $map-2); // returns (color: red);
Parameters
NameTypeDefaultDescription
$maps*
Map...
-A list of maps that will be diffed.
#

functionto-fixedpublicview codeopen_in_new

Rounds a number to a certain precision

Parameters
NameTypeDefaultDescription
$number*
Number
-The number to be rounded
$precision
Number
2Specifies the number of the digits after the decimal separator
#

functionto-stringpublicview codeopen_in_new

Converts a number to a string.

Parameters
NameTypeDefaultDescription
$num*
Number
-The number to convert.
$radix
Number
16The base radix to use for the conversion.
#

functionis-rootpublicview codeopen_in_new

Returns true if the scope where it's called is the root of the document.

Example

Check if the current scope is root

@mixin smart-mixin() {
  $scope: if(is-root(), ':root', '&');


  #{$scope} {
    /* style rules here */
  }
}
#

functionis-hostpublicview codeopen_in_new

Returns true if the scope where it's called is :host.

Example

Check if the current scope is :root

@mixin smart-mixin() {
  $host: is-host();


  @if is-host() {
    /* style rules here */
  }
}
#

functionsplitpublicview codeopen_in_new

Splits a string into a list by a given separator.

Parameters
NameTypeDefaultDescription
$string*
String
-The string to split.
$separator*
String
-The string separator to split the string by.
#

functionreplacepublicview codeopen_in_new

Returns a new string with one, some, or all matches of a string replaced by a replacement.

Parameters
NameTypeDefaultDescription
$string*
String
-The target string.
$search*
String
-The term to search form.
$replace*
String
-The string to replace the search term with.
#

mixincolor-classespublicview codeopen_in_new

Generates CSS class names for all colors from for a given property and color palette, with optional prefix and suffix attached to the class name.

Example

Generate background classes with colors from the palette.

// Will generate class names like
// .igx-primary-500-bg { ... };
@include color-classes(
  $prop: 'background-color',
  $suffix: 'bg'
);
Parameters
NameTypeDefaultDescription
$prop*
string
-The CSS property to assign the palette color to.
$prefix
string
igxA prefix to be attached to the class name.
$suffix
string
nullA suffix to be attached to the class name.
$palette
Map
$default-paletteThe igx palette to use to generate css class names for.
Requires
#

mixinborder-radiuspublicview codeopen_in_new

Adds border-radius style with a value between an upper and a lower bound.

Example
.my-component {
  @include border-radius(10px, 5px, 20px);
}
Parameters
NameTypeDefaultDescription
$radius*
Number
-The preferred value.
$min
Number
rem(0)The minimum value.
$max
Number
$radiusThe maximum allowed value.
#

mixinline-clamppublicview codeopen_in_new

Truncates text to a specific number of lines.

Example

Truncates text after the fourth line

@include line-clamp(4, true, true);
Parameters
NameTypeDefaultDescription
$lines*
number|string
-The number of lines to show
$inline*
Boolean
-Sets whether an element displays inline-box or box
$vertical*
Boolean
-Sets whether an element lays out its contents horizontally or vertically
#

mixinellipsispublicview codeopen_in_new

Applies text-overflow ellipsis to e text element. This won't work on display flex elements.

Example
.my-class {
  @include ellipsis();
}
#

mixinhide-defaultpublicview codeopen_in_new

Hides the element from the DOM.

Example

Sample usage

input[type="checkbox"] {
  @include hide-default();
}

Search Documentation