lubuntu.me/plugins/so-widgets-bundle/widgets/features/styles/default.less

@import "../../../base/less/mixins";

.widget-function('import_google_font');

@title_font: default;
@title_font_weight: 400;
@title_size: default;
@title_color: default;

@text_font: default;
@text_font_weight: 400;
@text_size: default;
@text_color: default;

@more_text_font: default;
@more_text_font_weight: 400;
@more_text_size: default;
@more_text_color: default;

@container_size: 84px;
@icon_size: 24px;
@use_icon_size: false;

@responsive_breakpoint: 520px;

.sow-features-list {

    margin: 0 -25px;

    .clearfix();

    .sow-features-feature {
        position: relative;
        float: left;
        .box-sizing(border-box);
        padding: 0 25px;
        display: flex;

        &.sow-icon-container-position-top {
            flex-direction: column;
            text-align: center;

            .sow-icon-container {
                margin-bottom: 10px;
            }
        }

        &.sow-icon-container-position-right {
            text-align: left;
            flex-direction: row;

            .sow-icon-container {
                margin-right: 10px;
            }
        }

        &.sow-icon-container-position-left {
            text-align: left;
            flex-direction: row-reverse;

            .sow-icon-container {
                margin-left: 10px;
            }
        }

        &.sow-icon-container-position-bottom {
            text-align: center;
            flex-direction: column-reverse;

            .sow-icon-container {
                margin-top: 10px;
            }
        }

        .sow-icon-container {
            width: @container_size;
            height: @container_size;
            font-size: @container_size;
            text-decoration: none;
            margin: auto;

            [class^="sow-icon-"],
            .sow-icon-image {
				text-decoration: none;
				color: #FFFFFF;
				width: @container_size;
				height: @container_size;
				position: absolute;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon_size() when ( @use_icon_size = true) {
                	background-size: @icon_size @icon_size;
				}
				.icon_size() when not ( @use_icon_size = true) {
                	background-size: contain;
				}
				.icon_size();
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        h5 {
            margin: 1em 0;

            a{
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        p.sow-more-text {
            a {
                font-weight: 500;
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        p:last-child {
            margin-bottom: 0;
        }

        margin-bottom: 40px;

        &.sow-features-feature-last-row {
            margin-bottom: 0;
        }

        .textwidget {
            margin: auto;
            > h5 {
                .font(@title_font, @title_font_weight);
                font-size: @title_size;
                color: @title_color;
            }

            > p {
                .font(@text_font, @text_font_weight);
                font-size: @text_size;
                color: @text_color;
            }

            > p.sow-more-text {
                .font(@more_text_font, @more_text_font_weight);
                font-size: @more_text_size;
                color: @more_text_color;
            }
        }
    }

    .sow-features-clear {
        clear: both;
    }

    @media (max-width: @responsive_breakpoint) {
        &.sow-features-responsive {
            margin: 0;

            .sow-features-feature {
                width: 100% !important;
                float: none;
                margin-bottom: 40px;

                &:last-child {
                    margin-bottom: 0px;
                }
            }

            .sow-features-clear {
                clear: none;
            }

        }
    }
}