dvlden / slope Goto Github PK

As I stated, I won't be supporting top edge, because it makes no sense. Nobody should be adding both top and bottom edges like top-left and bottom-right to a single section, that's just insane. But I've seen it, so I'm hoping that whoever supports those or whoever thought that this is OK, think again, please.

As for the feature that I have on my mind, I know that there are people who are building horizontal pages instead of vertical, and that is fine. But if you are that person, you cannot use my mixin yet, because it does not support that nifty right edge; but it will...

When I think about it, it is the right thing to do.

Reasoning:
If you do not specifiy $height argument, it will default to 5rem. Thus, we know that padding-top can match this $height value, because each section has the same height of sloped edge.

But...

• Maybe you want to set that padding manually to be much bigger on each section
• Maybe you want to have the padding even on the first section
• Maybe you have the last section as in my examples which has no "sloped edge", but still needs padding (which is impossible this way, unless it is sloped edge)

So all those "maybes" makes me think that it is the best to specifiy padding manually or generate it in the loop outside of the mixin.

Main reason would be that mixin cannot know what is the size of the previous sloped edge on the section, so if you set different $height on each section, this purpose of generating a padding within the mixin would fail.

I did not test this, but I know that it wont work, right?
It's that easy...

In the mixin, to prevent code duplication I used $root argument and an @if statement to check for the root argument. So this code block runs only one time for the $root obviously, cause we are preventing code duplication... But since that code block, depends on the $height, if you intentionally want different $height for at least one section, this logic will break.

For Example:

.section {
  min-height: 50vh;
  @include sloped-edge($root: true); // defaults to $height: 5rem

  &:first-child {
    background-color: #fafafa;
    @include sloped-edge('#fafafa', 'right'); // has $height: 5rem, so it will work
  }

  &:last-child {
    background-color: #292929;
    @include sloped-edge('#292929', 'left', 8rem); // has $height: 8rem, so it will break
  }
}

Pay attention to this example... The compiled code would look something like this: (manually typing the code below, as if it was compiled, sorry if I make any typo)

.section {
  min-height: 50vh;
  position: relative;
}

.section:not(:first-child) {
  padding-top: 5rem;
}

.section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5rem;
  border: 0 solid transparent;
  -webkit-transform: rotate(360deg);
  z-index: 1;
}

.section:first-child {
  background-color: #fafafa;
}

.section:first-child::after {
  border-bottom-width: 5rem;
  border-right-width: 100vw;
  border-right-color: #fafafa;
}

.section:last-child {
  background-color: #292929;
}

.section:last-child {
  border-bottom-width: 8rem;
  border-right-width: 100vw;
  border-right-color: #292929;
}

As you can see, our 2nd section has a bottom width of 8rems, but it should be 5rem or our main class that matches all sections, should have a different values for this one.

Since this is a major bug for those that were to attempt and try this, as it might be required for some pages, I will do this fix today along with the release for horizontal layouts.

This will be major update, so I'll release it under v2.