Designer

client access

Example of custom LESS code for styling of 'settings' slot. See "Settings" menu in the navigation at the top for preview.

The content of 'settings' slot is not styled by the UI Toolkit itself because it can contain any type of markup.

You can copy & paste the code to your own LESS, to style "Settings" menu as seen in the demo navigation, or modify it to match requirements of your app.

See repository of this styleguide for more details.


//
// custom styling for 'settings' content
//
dl-navigation div[slot="settings"] {

    h3 {
        color: @color-midnight;
        margin: 0;
        padding: 12px 16px;
    }

    .account,
    .clients {
        margin: 0 0 32px;
    }

    .clients {
        margin-bottom: 0;

        figure {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 2px;
            margin: 0 16px 0 0;
            mix-blend-mode: multiply;
        }
    }

    ul {
        li.selected {
            a {
                position: relative;
            }

            a:after {
                .icon();
                position: absolute;
                content: @icon-action-check;
                top: 7px;
                right: 12px;
                color: @color-midnight;
            }

            &:hover a:after {
                color: @color-cerulean;
            }
        }
    }
}

.dl-navigation.wide div[slot="settings"] {
    h3 {
        padding: 0 0 8px;
    }

    .account,
    .clients {
        margin: 16px 0 32px;
    }

    .clients {
        margin-bottom: 0;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0 -16px;

        li {
            display: block;
        }

        a {
            display: block;
            position: relative;
            padding: 6px 16px;
            color: @color-midnight;
            text-decoration: none;
        }

        figure {
            display: inline-block;
            margin: 0 6px 0 0;
            padding: 0;
            width: 1em;
            height: 1em;
            border-radius: 2px;
            background-position: 50% 50%;
            background-size: cover;
            vertical-align: middle;
        }

        li:hover {
            a {
                color: @color-cerulean;
                background: @color-ice;
            }
        }

        li.selected {
            a:after {
                .icon();
                position: absolute;
                content: @icon-action-check;
                top: 7px;
                right: 12px;
                color: @color-midnight;
            }

            &:hover a:after {
                color: @color-cerulean;
            }
        }
    }
}

.dl-navigation.narrow div[slot="settings"] {
    ul {
        li.selected {
            a:after {
                top: 18px;
                right: 16px;
            }
        }
    }
}

.dl-navigation.wide div[slot="controls"] {
    dl-autocomplete {
        width: 180px;
    }
}

.dl-navigation.narrow div[slot="controls"] {
    dl-autocomplete {
        width: 240px;
    }
}