Added desktop directions (right to left, left to right, top to bottom, bottom to top)

[aletail]

Summary

Added desktop directions (right to left, left to right, top to bottom, bottom to top)

Testing Steps

• Test with any site
• On a container (If a newer site) test the Layout -> Direction settings, confirm these work for Desktop

Issues/Concerns

• This originally came up when updating flexcut, their "cart" page uses a direction class (The side bar should appear on the right side, not the left)

Git Flow

• DO NOT delete "release/*" or "hotfix/*" branches after merging a PR. These are used to publish the next release, and they are deleted automatically.
• "Squash and merge" is good on "feature/*" into "develop"
• "Create a merge commit" is good on "release/*" or "hotfix/*" into "main"
• With npm repositories, the version number must be incremented manually, before merging the release.

[tiller1010]

• The direction is only set in @media screen and (min-width: 1366px), so it reverts back to the initial direction if there isn't a tablet- class too.

With npm repositories, the version number must be incremented manually, before merging the release.

• We'll need to update package.json to 2.1.14

[tiller1010]

There are still duplicate rules inside of the media query.
We could also still make use of breakpointDesktop, by simply moving those styles outside of the media query, but still within the @each

/*
  DESKTOP BREAKPOINTS
  Loop through each desktop defined breakpoint
*/
@each $label, $breakpoint in getThemeProperty(breakpointDesktop){

  /* Flex Container Direction */
  .flex-container{
    &.#{$label}-ltr{
      flex-direction: row;
    }
    &.#{$label}-rtl{
      flex-direction: row-reverse;
    }
    &.#{$label}-ttb{
      flex-direction: column;
    }
    &.#{$label}-btt{
      flex-direction: column-reverse;
    }
  }

  @media screen and (min-width: $breakpoint) {
    .#{$label}-half{
      width: 0.5%;
      min-height: 1px;
    }
    @for $i from 1 through 100 {
      .#{$label}-#{$i} {
        width: round(percentage(math.div($i, 100)));
      }
    }
    .#{$label}-auto{
      width: auto;
    }
    .#{$label}-hide{
      display: none;
    }
    .#{$label}-show{
      display: inherit;
    }
  }
}

[aletail]

There are still duplicate rules inside of the media query.

Right, not sure how to get around this. The "desktop-" rules outside of the mediaquery act as a default/fall back mostly - we could rename those to "default-" ....but that would be a major change and require more class tags to be used in the html. If we are looking to optimize this and remove the duplicate rules I think we should handle in a separate PR

We could also still make use of breakpointDesktop, by simply moving those styles outside of the media query, but still within the @each

But this would add those for each breakpoint added to the desktop list and they would exist outside of their related mediaquery

[tiller1010]

The "desktop-" rules outside of the mediaquery act as a default/fall back mostly...
...this would add those for each breakpoint added to the desktop list and they would exist outside of their related mediaquery

This makes sense. Everything looks good then!