asda2432es

✏️ Editing: add-ons.scss

@import "../start";

#fs_addons
{
    .fs-cards-list
    {
        list-style: none;

.fs-card
        {
            float:      left;
            //            height: 185px; // With reviews/ratings
            height:     152px;
            width:      310px;
            padding:    0;
            margin:     0 0 30px 30px;
            font-size:  14px;
            list-style: none;
            border:     1px solid #ddd;
            cursor:     pointer;
            position:   relative;

.fs-overlay
            {
                position: absolute;
                left:     0;
                right:    0;
                bottom:   0;
                top:      0;
                z-index:  9;
            }

.fs-inner
            {
                background-color: #fff;
                overflow:         hidden;
                height:           100%;
                position:         relative;

ul
                {
                    @include transition(all, 0.15s);
                    left:     0;
                    right:    0;
                    top:      0;
                    position: absolute;
                }

li
                {
                    list-style:  none;
                    line-height: 18px;
                    padding:     0 15px;
                    width:       100%;
                    display:     block;
                    @include box-sizing(border-box);
                }

.fs-card-banner
                {
                    padding:           0;
                    margin:            0;
                    line-height:       0;
                    display:           block;
                    height:            100px;
                    background-repeat: repeat-x;
                    background-size:   100% 100%;
                    @include transition(all, 0.15s);
                }

.fs-title
                {
                    margin:        10px 0 0 0;
                    height:        18px;
                    overflow:      hidden;
                    color:         #000;
                    white-space:   nowrap;
                    text-overflow: ellipsis;
                    font-weight:   bold;
                }

.fs-offer
                {
                    font-size: 0.9em;
                }

.fs-description
                {
                    background-color: #f9f9f9;
                    padding:          10px 15px 100px 15px;
                    border-top:       1px solid #eee;
                    margin:           0 0 10px 0;
                    color:            #777;
                }

.fs-tag
                {
                    position: absolute;
                    top: 10px;
                    right: 0px;
                    background: greenyellow;
                    display: block;
                    padding: 2px 10px;
                    @include box-shadow(1px 1px 1px rgba(0,0,0,0.3));
                    text-transform: uppercase;
                    font-size: 0.9em;
                    font-weight: bold;
                }

.fs-cta
                {
                    .button
                    {
                        position: absolute;
                        top: 112px;
                        right: 10px;
                    }
                }
            }

@media screen and (min-width: 960px) {
                &:hover
                {
                    .fs-overlay
                    {
                        border:      2px solid $fms-link-color;
                        margin-left: -1px;
                        margin-top:  -1px;
                    }

.fs-inner
                    {
                        ul
                        {
                            top: -100px;
                        }

.fs-card-banner
                        {
                            //                        background-position: 50% -100px;
                        }

.fs-title,
                        .fs-offer
                        {
                            color: $fms-link-color;
                        }
                    }
                }
            }
        }
    }
}

#TB_window
{
    &, iframe
    {
        width: 772px !important;
    }
}

#plugin-information
{
    #section-description
    {
        h2, h3, p, b, i, blockquote, li, ul, ol
        {
            clear: none;
        }

.fs-selling-points
        {
            padding-bottom: 10px;
            border-bottom:  1px solid #ddd;

ul
            {
                margin: 0;

li
                {
                    padding:    0;
                    list-style: none outside none;

i.dashicons
                    {
                        color:          $fs-logo-green-color;
                        font-size:      3em;
                        vertical-align: middle;
                        line-height:    30px;
                        float:          left;
                        margin:         0 0 0 -15px;
                    }

h3
                    {
                        margin: 1em 30px !important;
                    }
                }
            }
        }

.fs-screenshots
        {
            @include clearfix();
            ul
            {
                list-style: none;
                margin:     0;

li
                {
                    width:         225px;
                    height:        225px;
                    float:         left;
                    margin-bottom: 20px;
                    @include box-sizing(content-box);

a
                    {
                        display:         block;
                        width:           100%;
                        height:          100%;
                        border:          1px solid;
                        @include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
                        background-size: cover;
                    }

&.odd
                    {
                        margin-right: 20px;
                    }
                }
            }
        }
    }

.plugin-information-pricing
    {
        $pricing_color: #FFFEEC;
        $borders_color: #DDD;
        margin:        -16px;
        //        padding: 20px;
        border-bottom: 1px solid $borders_color;

.fs-plan
        {

h3
            {
                margin-top: 0;
                padding:    20px;
                font-size:  16px;
            }

.nav-tab-wrapper
            {
                border-bottom: 1px solid $borders_color;

.nav-tab
                {
                    cursor:    pointer;
                    position:  relative;
                    padding:   0 10px;
                    font-size: 0.9em;

label
                    {
                        text-transform: uppercase;
                        color:          green;
                        background:     greenyellow;
                        position:       absolute;
                        left:           -1px;
                        right:          -1px;
                        bottom:         100%;
                        border:         1px solid darkgreen;
                        padding:        2px;
                        text-align:     center;
                        font-size:      0.9em;
                        line-height:    1em;
                    }

&.nav-tab-active
                    {
                        cursor:              default;
                        background:          $pricing_color;
                        border-bottom-color: $pricing_color;
                    }
                }
            }

&.fs-single-cycle
            {
                h3
                {
                    background:     $pricing_color;
                    margin:         0;
                    padding-bottom: 0;
                    color:          #0073aa;
                }

.nav-tab-wrapper,
                .fs-billing-frequency
                {
                    display: none;
                }
            }

.fs-pricing-body
            {
                background: $pricing_color;
                padding:    20px;
            }

.button
            {
                width:          100%;
                text-align:     center;
                font-weight:    bold;
                text-transform: uppercase;
                font-size:      1.1em;
            }

label
            {
                white-space: nowrap;
            }

var {
                font-style: normal;
            }

.fs-billing-frequency,
            .fs-annual-discount
            {
                text-align: center;
                display: block;
                font-weight: bold;
                margin-bottom: 10px;
                text-transform: uppercase;
                background: #F3F3F3;
                padding: 2px;
                border: 1px solid #ccc;
            }

.fs-annual-discount
            {
                text-transform: none;
                color:          green;
                background:     greenyellow;
            }

ul.fs-trial-terms
            {
                font-size: 0.9em;

i
                {
                    float:  left;
                    margin: 0 0 0 -15px;
                }

li
                {
                    margin: 10px 0 0 0;
                }
            }
        }
    }

#section-features
    {
        .fs-features
        {
            margin: -20px -26px;
        }

table
        {
            width:           100%;
            border-spacing:  0;
            border-collapse: separate;

thead
            {
                th
                {
                    padding: 10px 0;
                }

.fs-price
                {
                    color:       $fs-logo-green-color;
                    font-weight: normal;
                    display:     block;
                    text-align:  center;
                }
            }

tbody
            {
                td
                {
                    border-top: 1px solid #ccc;
                    padding:    10px 0;
                    text-align: center;
                    width:      100px;
                    color:      $fs-logo-green-color;

&:first-child
                    {
                        text-align:   left;
                        width:        auto;
                        color:        inherit;
                        padding-left: 26px;
                    }
                }
                tr.fs-odd
                {
                    td
                    {
                        background: #fefefe;
                    }
                }
            }
        }

.dashicons-yes
        {
            width:     30px;
            height:    30px;
            font-size: 30px;
        }
    }
}

@media screen and (max-width: 961px) {
    #fs_addons
    {
        .fs-cards-list
        {
            .fs-card
            {
                height: 265px;
            }
        }
    }
}

Ubuntu

Sid Gifari From Gifari Industries - BD Cyber Security Team