| Current Path : /home/ereika83/www/wp-content/plugins/wpmudev-updates/assets/src/scss/admin-ui/ |
| Current File : /home/ereika83/www/wp-content/plugins/wpmudev-updates/assets/src/scss/admin-ui/_plugin-card.scss |
@include body-class(true) {
// ELEMENT: Plugin Card
// This one is commonly used to highlight top and new plugins.
.dashui-plugin-card {
display: block;
margin: 0;
padding: 0;
border: 0;
.dashui-plugin-card-header,
.dashui-plugin-card-body {
margin: 0;
padding: 0;
border: 0;
.dashui-plugin-card-title {
margin: 0;
padding: 0;
border: 0;
color: palette(gray, dark);
font: bold 18px/22px $font;
letter-spacing: $font--letter-spacing;
text-transform: none;
}
+ div {
margin-top: 16px;
}
}
.dashui-plugin-card-header {
display: flex;
align-items: center;
.dashui-plugin-card-title {
overflow: hidden;
display: block;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.sui-button,
a.sui-button,
button.sui-button {
@include media(max-width, md) {
display: none;
}
}
}
.dashui-plugin-card-body {
p {
color: palette(gray, light);
font: 400 13px/22px $font;
letter-spacing: $font--letter-spacing;
&:first-child {
margin: 0;
}
&:not(:first-child) {
margin: 10px 0 0;
}
}
.dashui-plugin-image {
overflow: hidden;
position: relative;
border-radius: $border-radius;
&:before,
button {
opacity: 0;
}
&:before {
content: " ";
backface-visibility: hidden;
display: block;
position: absolute;
z-index: 1;
background-color: rgba(51, 51, 51, 0.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 0.2s ease;
}
img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0;
}
.sui-button,
a.sui-button,
button.sui-button {
position: absolute;
z-index: 2;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:hover,
&:active {
&:before,
button {
opacity: 1;
}
}
}
}
@include media(min-width, lg) {
max-width: 380px;
}
}
.dashui-plugin-card-label {
display: block;
color: $blue;
letter-spacing: $font--letter-spacing;
text-transform: uppercase;
&,
&:focus,
&:active {
outline: none;
box-shadow: none;
}
@include media(max-width, md) {
font: bold 12px/16px $font;
}
@include media(min-width, md) {
font: bold 9px/16px $font;
}
}
// FIX: Top plugin
.dashui-top-plugin,
.dashui-new-plugin {
&:only-child {
@include media(min-width, md) {
margin-top: 40px;
}
}
&:not(:only-child) {
@include media(max-width, md) {
margin-top: 14px;
}
@include media(min-width, md) {
margin-top: 24px;
}
}
}
}