laipower/wp-content/plugins/easy-digital-downloads/assets/css/admin/extension-manager.scss

144 lines
2.9 KiB
SCSS
Raw Normal View History

/* Extension Manager
------------------------------------------------------------- */
.edd-extension-manager__card {
background-color: #fff;
padding: 2em;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.edd-extension-manager__card-group .edd-extension-manager__card {
float: left;
max-width: 360px;
margin: 1em;
}
@supports(grid-area: auto) {
.edd-extension-manager__card-group {
display: grid;
grid-template-columns: auto;
gap: 1em;
margin-top: 24px;
}
.edd-extension-manager__card-group .edd-extension-manager__card {
float: none;
margin: 0;
max-width: unset;
}
}
.inside .edd-extension-manager__card {
padding: 0;
}
.edd-extension-manager__title {
margin: 0 0 1em 0;
}
.edd-extension-manager__group {
display: grid;
}
.edd-extension-manager__step {
grid-area: 1/-1;
margin: 0;
}
.edd-extension-manager__step:not(:first-of-type) {
display: none;
}
.edd-extension-manager__step .button {
display: table;
margin: 0 auto;
text-align: center;
white-space: normal;
}
td .edd-extension-manager__step .button {
display: inline-block;
}
.edd-extension-manager__body {
display: grid;
gap: 1.5em;
grid-template-rows: auto 1fr;
flex-grow: 1;
}
.edd-extension-manager__image img {
display: block;
margin: 0 auto;
max-width: 500px;
width: 100%;
}
.edd-extension-manager__features ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.edd-extension-manager__features .dashicons-yes {
color: #008a20;
margin-right: .25em;
}
.edd-extension-manager__body .notice {
max-width: 320px;
}
/* Extension Manager Style Variations
--------------------------------------- */
.edd-extension-manager__card--horizontal {
margin: 24px 0;
max-width: 700px;
}
.edd-extension-manager__card--detailed {
background-color: transparent;
max-width: 700px;
}
.edd-extension-manager__card--detailed-2col {
background-color: transparent;
max-width: 900px;
}
.edd-extension-manager__card--detailed .edd-extension-manager__title,
.edd-extension-manager__card--detailed-2col .edd-extension-manager__title {
border-bottom: 1px solid #ccc;
padding-bottom: 1em;
}
@media screen and (min-width: 601px) {
.edd-extension-manager__card-group {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.edd-extension-manager__card--horizontal .edd-extension-manager__body {
grid-template-columns: minmax(0, 300px) 1fr;
grid-template-rows: 1fr auto;
grid-auto-flow: column;
}
.edd-extension-manager__card--horizontal .edd-extension-manager__image {
grid-row: 1 / 4;
}
.edd-extension-manager__features,
.edd-extension-manager__card--horizontal .edd-extension-manager__description {
align-self: center;
}
}
@media screen and (min-width: 783px) {
.edd-extension-manager__card--detailed-2col .edd-extension-manager__body {
grid-template-columns: minmax(0, 375px) 1fr;
grid-auto-flow: column;
}
}