DESKTOP-GBA0BK8\Admin
609 lines
14 KiB
SCSS
609 lines
14 KiB
SCSS
@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;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
} |