Elep

@import "../start";
@import "badge";

#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-badge.fs-installed-addon-badge {
                        font-size:      1.02em;
                        line-height:    1.3em;
                    }
                }

.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, .button-group
                    {
                        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: 821px !important;
    }
}

#plugin-information
{
    .fyi {
        width: 266px !important;
    }

#section-holder {
        margin-right: 299px;
        clear: none;
    }

#section-description
    {
        h2, h3, p, b, i, blockquote, li, ul, ol
        {
            clear: none;
        }
        
        iframe 
        {
            max-width: 100%;
        }

.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;
        }
    }
}

.fs-dropdown {
  #fs_addons .fs-cards-list .fs-card .fs-inner &, #plugin-information & {
    .button-group {
      .button {
        position: relative;
        width: auto;
        top: 0;
        right: 0;

&:focus {
          z-index: 10;
        }
      }

.fs-dropdown-arrow {
        border-top: 6px solid white;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        top: 12px;
        position: relative;
      }
    }

&.active:not(.up) {
      .button:not(.fs-dropdown-arrow-button) {
        border-bottom-left-radius: 0;
      }

.fs-dropdown-arrow-button {
        border-bottom-right-radius: 0;
      }
    }

&.active.up {
      .button:not(.fs-dropdown-arrow-button) {
        border-top-left-radius: 0;
      }

.fs-dropdown-arrow-button {
        border-top-right-radius: 0;
      }
    }

.fs-dropdown-list {
      position: absolute;
      right: -1px;
      top: 100%;
      margin-left: auto;
      padding: 3px 0;
      border: 1px solid lighten($darkest-color, 75%);
      background-color: #fff;
      z-index: 1;
      width: 230px;
      text-align: left;
      @include box-shadow(0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));

li {
        margin: 0;

a {
          display: block;
          padding: 5px 10px;
          text-decoration: none;
          text-shadow: none;
        }

&:hover {
          background-color: $wp-selected-color;
          color: #fff;

a {
            color: #fff;
          }
        }
      }
    }

&:not(.up) {
      .fs-dropdown-list {
        @include border-radius(3px 0 3px 3px);
      }
    }

&.up {
      .fs-dropdown-list {
        @include border-radius(3px 3px 0 3px);
      }
    }
  }

#plugin-information & {
    .button-group {
      width: 100%;

.button {
        float: none;
        font-size: 14px;
        font-weight: normal;
        text-transform: none;
      }
    }

.fs-dropdown-list {
      margin-top: 1px;
    }

&.up {
      .fs-dropdown-list {
        top: auto;
        bottom: 100%;
        margin-bottom: 2px;
      }
    }
  }
}

#plugin-information.wp-core-ui .fs-pricing-body .fs-dropdown .button-group {
  text-align: center;

display: table;

.button {
    display: table-cell;

&:not(.fs-dropdown-arrow-button) {
      left: 1px;
      width: 100%;
    }
  }
}

#plugin-information-footer {
  > .button, .fs-dropdown {
    position: relative;
    top: 3px;

&.left {
      float: left;
    }
  }

> .right, .fs-dropdown {
    float: right;
  }
}

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