New theme: Corner layout #40
Conversation
✅ Deploy Preview for easy-popup ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…aster + '-corner'
src/css/corner-layout.scss
Outdated
| html.easy-popup-open { | ||
| &:has(.easy-popup-master-corner.open) { | ||
| .easy-popup-master { | ||
| opacity: 0; |
There was a problem hiding this comment.
Why do we need to hide .easy-popup-master here?
src/css/corner-layout.scss
Outdated
| position: fixed; | ||
| bottom: 0; | ||
| right: 0; | ||
| max-width: 450px; |
There was a problem hiding this comment.
Please note that we are using the library for multiple purposes. So make it as flexible as you can, the max-width here needs to havea CSS variable for better control.
src/css/corner-layout.scss
Outdated
| .ep-close-button { | ||
| position: fixed; | ||
| transform: translate(0); | ||
| --ep-close-color: #000; |
There was a problem hiding this comment.
Why do you override this variable here? CSS override should use the same selector when possible.
| } | ||
| } | ||
|
|
||
| // Position variants |
There was a problem hiding this comment.
Why do some positions have all top left bottom right properties, while some do not?
src/css/corner-layout.scss
Outdated
| right: var(--ep-corner-offset); | ||
| } | ||
|
|
||
| @media only screen and (max-width: 768px) { |
There was a problem hiding this comment.
Should this breakpoint be consistent with the mobile layout here
easy-popup/src/css/layout-mobile.scss
Line 16 in dd83fa3
src/css/corner-layout.scss
Outdated
| padding: var(--ep-padding); | ||
|
|
||
| .ep-close-button { | ||
| top: var(--ep-padding); |
There was a problem hiding this comment.
Do you know the purpose of --ep-padding? Just because they need the same value, doesn't mean they should share the same variable.
src/css/corner-layout.scss
Outdated
| } | ||
|
|
||
| // Slide animations | ||
| &[class*="right"]:not(.open) { |
There was a problem hiding this comment.
[class*="right"] and [class*="right"] are very risky and less accurate selectors. You should create class is-slide-rlt and is-slide-ltr for this case.
Add new theme
cornerwith 4 positions:top left,top right,bottom left,bottom right(default)Corner layout