Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Remove unnecessary CSS class nesting

Browse Source 
[MAILPOET-2792]
This commit is contained in:
Jan Jakeš
2020-06-17 13:17:24 +02:00
committed by Veljko V
parent bb3ac3c179
commit eba90309bd
1 changed files with 124 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
assets/css/src/components-plugin/_premium-page.scss
View File

@@ -30,133 +30,133 @@
}
}
.mailpoet-premium-page-intro {
display: flex;
flex-direction: row;
margin-bottom: 3em;
@include breakpoint-max-width(500px) {
flex-wrap: wrap;
}
img {
margin-right: 100px;
@include breakpoint-max-width(1100px) {
height: 50%;
margin-right: 75px;
width: 50%;
}
@include breakpoint-max-width(500px) {
height: 40%;
margin: 0 auto;
width: 40%;
}
}
@include breakpoint-max-width(500px) {
.mailpoet-premium-page-intro-link-wrap {
text-align: center;
}
}
}
.mailpoet-premium-page-bullet-list {
li:before {
content: '·';
padding-right: 5px;
}
}
.mailpoet-premium-page-text {
padding-bottom: 4em;
text-align: center;
.button.mailpoet-button-bigger:last-child {
margin-bottom: 0;
}
.mailpoet-premium-page-paragraph-before-heading {
margin-top: 2.8em;
}
.mailpoet-premium-page-paragraph-before-heading + h1 {
margin-top: 0;
}
}
.mailpoet-premium-page-text-narrow {
margin: auto;
max-width: 700px;
}
.mailpoet-premium-page-features {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
.mailpoet-premium-page-feature {
width: 29%;
@include breakpoint-max-width(640px) {
width: 49%;
}
@include breakpoint-max-width(500px) {
width: 100%;
}
p,
h2 {
text-align: left;
}
}
}
.mailpoet-premium-page-options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
> div {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
@include breakpoint-max-width(500px) {
width: 100%;
}
}
@include breakpoint-max-width(880px) {
display: block;
> div { display: block; }
}
ul {
display: inline-block;
text-align: left;
li:before {
content: '-';
padding-right: 5px;
}
}
}
.mailpoet-premium-page-options-divider {
flex-grow: 100;
}
@include breakpoint-max-width(1100px) {
h2 {
font-size: 2em; // The text WooCommerce is too long and so on smaller displays it overflows. This helps.
}
}
}
.mailpoet-premium-page-intro {
display: flex;
flex-direction: row;
margin-bottom: 3em;
@include breakpoint-max-width(500px) {
flex-wrap: wrap;
}
img {
margin-right: 100px;
@include breakpoint-max-width(1100px) {
height: 50%;
margin-right: 75px;
width: 50%;
}
@include breakpoint-max-width(500px) {
height: 40%;
margin: 0 auto;
width: 40%;
}
}
@include breakpoint-max-width(500px) {
.mailpoet-premium-page-intro-link-wrap {
text-align: center;
}
}
}
.mailpoet-premium-page-bullet-list {
li:before {
content: '·';
padding-right: 5px;
}
}
.mailpoet-premium-page-text {
padding-bottom: 4em;
text-align: center;
.button.mailpoet-button-bigger:last-child {
margin-bottom: 0;
}
.mailpoet-premium-page-paragraph-before-heading {
margin-top: 2.8em;
}
.mailpoet-premium-page-paragraph-before-heading + h1 {
margin-top: 0;
}
}
.mailpoet-premium-page-text-narrow {
margin: auto;
max-width: 700px;
}
.mailpoet-premium-page-features {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
.mailpoet-premium-page-feature {
width: 29%;
@include breakpoint-max-width(640px) {
width: 49%;
}
@include breakpoint-max-width(500px) {
width: 100%;
}
p,
h2 {
text-align: left;
}
}
}
.mailpoet-premium-page-options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
> div {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
@include breakpoint-max-width(500px) {
width: 100%;
}
}
@include breakpoint-max-width(880px) {
display: block;
> div { display: block; }
}
ul {
display: inline-block;
text-align: left;
li:before {
content: '-';
padding-right: 5px;
}
}
}
.mailpoet-premium-page-options-divider {
flex-grow: 100;
}