Custom CSS

Description

Define custom CSS for styling the menu. This property is only available when CSS type is set to "Custom".

Discussion

When you click the Sample css link, the built-in CSS used to style the ExpandingMenu control is inserted into the CSS editor. The build-in CSS uses SASS, which is an extension of CSS. Multiple variables are defined that contain colors and sizes. It also includes a function called makeColorSafe.

The makeColorSafe function takes a foreground and background color as input and modifies the foreground color so that text, svg images, borders, etc using the color are readable when placed over the background color.

@function makeColorSafe($foreColor,$backColor) {
    $f-h: hue($foreColor);
    $f-s: saturation($foreColor);
    $f-l: lightness($foreColor);
    $b-h: hue($backColor);
    $b-s: saturation($backColor);
    $b-l: lightness($backColor);
    $d-h: abs( $f-h - $b-h );
    $d-s: abs( $f-s - $b-s );
    $d-l: abs( $f-l - $b-l );
    @if $d-h < 15deg {
        @if $d-l < 60% {
            $n-l: if( $b-l > 50%, $b-l - 60%, $b-l + 60% );
            $n-s: if( $d-s > 20%, $f-s, if( $b-s > 75% , $f-s - 20%, $f-s + 20% ));
            @return change-color( $foreColor , $lightness: $n-l , $saturation: $n-s )
        }
    } @else {
        @if $d-l < 50% and $d-s < 50% {
            $n-l: if( $b-l > 55%, $b-l - 50%, $b-l + 50% );
            @return change-color( $foreColor , $lightness: $n-l )
        }
    }
    @return $foreColor
}




$color: #5f4ede; //this sets the color of the menu tree. the PanelCard that contains this ViewBox has its background color set to the same value
$colorHover: lighten($color,5);
$colorBranch: lighten($color,10);
$colorBranchHover: lighten($color,15);
$foreColor: makeColorSafe(#000,$color);
$indent: 24px;

.item .icon {
    fill: $foreColor;
    stroke: $foreColor;
}

.item {
	position: relative;
	padding: 6px 12px;
	background: $color;
	cursor: pointer;
	line-height: 26px;
	color: $foreColor;
}

.item:hover {
	background: $colorHover;
}
.branch .item {
	padding-left: $indent;
	background: transparent;
}
.branch .item:hover {
	background: $colorBranchHover;
}
.branch {
	background: $colorBranch;
}
.branch .branch .item {
	padding-left: $indent*2;
}
.branch .branch .branch .item {
	padding-left: $indent*3;
}
.branch .branch .branch .branch .item {
	padding-left: $indent*4;
}

//supports up to 5 level of menu indentation
.branch .branch .branch .branch .branch .item {
	padding-left: $indent*5;
}

See Also

• Getting Started with SASS