@terrahq/wysiwyg 1.0.0

package/src/scss/global-content/_global-mixins/blocks/_content-list.scss

@@ -0,0 +1,960 @@
+@use "sass:map";
+@use "../_global-mixins" as *;
+
+$lists-wysiwyg-options: (
+  "number-font": null,
+  "first-number-width": null,
+  "first-level-number-color": null,
+  "first-level-artwork-width": null,
+  "first-level-artwork-top": null,
+  "first-level-artwork-image": null,
+  "first-level-artwork-background": null,
+  "first-level-artwork-border-radius": null,
+  "first-level-artwork-border-width": null,
+  "first-level-artwork-border-color": null,
+  "second-level-number-color": null,
+  "second-level-artwork-width": null,
+  "second-level-artwork-top": null,
+  "second-level-artwork-image": null,
+  "second-level-artwork-background": null,
+  "second-level-artwork-border-radius": null,
+  "second-level-artwork-border-width": null,
+  "second-level-artwork-border-color": null,
+  "third-level-number-color": null,
+  "third-level-artwork-width": null,
+  "third-level-artwork-top": null,
+  "third-level-artwork-image": null,
+  "third-level-artwork-background": null,
+  "third-level-artwork-border-radius": null,
+  "third-level-artwork-border-width": null,
+  "third-level-artwork-border-color": null,
+  "margin-bottom": null,
+  "nested-list-spacing": null,
+  "font-styles": null,
+);
+
+@mixin lists-wysiwyg-wp() {
+  ul:not([class]),
+  ol:not([class]),
+  ul[class^="wp-"],
+  ol[class^="wp-"] {
+    list-style: none;
+    ol,
+    ul {
+      margin-bottom: 0;
+    }
+  }
+  ul:not([class]),
+  ul[class^="wp-"] {
+    > li {
+      position: relative;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+  ol:not([class]),
+  ol[class^="wp-"] {
+    counter-reset: item;
+    > li {
+      position: relative;
+      &::before {
+        content: counters(item, ".") ".";
+        counter-increment: item;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+  }
+}
+
+@mixin lists-wysiwyg-wp-modifier($options) {
+  @each $property, $value in $options {
+    @if map.has-key($lists-wysiwyg-options, $property) {
+      @if $value {
+        @if $property == "number-font" {
+          ol:not([class]),
+          ol[class^="wp-"] {
+            > li {
+              &::before {
+                @include make-font-wysiwyg-options($options: $value);
+              }
+            }
+          }
+        } @else if $property == "first-number-width" {
+          ol:not([class]),
+          ol[class^="wp-"] {
+            > li {
+              padding-left: calc(
+                1rem + #{$value}
+              ); //* space between number and text + number width
+              //* Nested ol
+              ol {
+                > li {
+                  padding-left: calc(
+                    1rem + #{$value * 2}
+                  ); //* space between number and text + number width
+                  ol {
+                    > li {
+                      padding-left: calc(
+                        1rem + #{$value * 3}
+                      ); //* space between number and text + number width
+                      ol {
+                        > li {
+                          padding-left: calc(
+                            1rem + #{$value * 4}
+                          ); //* space between number and text + number width
+                          ol {
+                            > li {
+                              padding-left: calc(
+                                1rem + #{$value * 5}
+                              ); //* space between number and text + number width
+                              ol {
+                                > li {
+                                  padding-left: calc(
+                                    1rem + #{$value * 6}
+                                  ); //* space between number and text + number width
+                                }
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "first-level-number-color" {
+          ol:not([class]),
+          ol[class^="wp-"] {
+            > li {
+              &:before {
+                color: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              padding-left: calc(
+                1rem + #{$value}
+              ); //* space between artwork and text + artwork width
+              &:before {
+                width: $value;
+                height: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-top" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                top: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-image" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                background-image: url#{$value};
+                background-repeat: no-repeat;
+                background-size: contain;
+                background-position: center;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-background" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                background: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-radius" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                border-radius: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                border-width: $value;
+                border-style: solid;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-color" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              &:before {
+                border-color: $value;
+              }
+            }
+          }
+        } @else if $property == "second-level-number-color" {
+          ol:not([class]),
+          ol[class^="wp-"] {
+            > li {
+              ol {
+                > li {
+                  &:before {
+                    color: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  padding-left: calc(
+                    1rem + #{$value}
+                  ); //* space between artwork and text + artwork width
+                  &::before {
+                    width: $value;
+                    height: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-top" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  &::before {
+                    top: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-image" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    background: url(#{$value});
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    background-position: center;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-background" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    background: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-radius" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-radius: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-width: $value;
+                    border-style: solid;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-color" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-color: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-number-color" {
+          ol:not([class]),
+          ol[class^="wp-"] {
+            > li {
+              ol {
+                > li {
+                  ol {
+                    > li {
+                      &:before {
+                        color: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      padding-left: calc(
+                        1rem + #{$value}
+                      ); //* space between artwork and text + artwork width
+                      &::before {
+                        width: $value;
+                        height: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-top" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &::before {
+                        top: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-image" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        background: url(#{$value});
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-background" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        background: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-radius" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-radius: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-width" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-width: $value;
+                        border-style: solid;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-color" {
+          ul:not([class]),
+          ul[class^="wp-"] {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-color: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "nested-list-spacing" {
+          ul:not([class]),
+          ol:not([class]),
+          ul[class^="wp-"],
+          ol[class^="wp-"] {
+            > li {
+              ul, ol {
+                margin-top: $value;
+              }
+            }
+          }
+        } @else if $property == "font-styles" {
+          ul:not([class]),
+          ol:not([class]),
+          ul[class^="wp-"],
+          ol[class^="wp-"] {
+            li {
+              @include make-font-wysiwyg-options($options: $value);
+            }
+            @if map.has-key($value, "margin-bottom") {
+              ul,
+              ol {
+                margin-bottom: map.get($value, "margin-bottom");
+              }
+            }
+          }
+        } @else {
+          ul:not([class]),
+          ol:not([class]),
+          ul[class^="wp-"],
+          ol[class^="wp-"] {
+            #{$property}: $value;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin lists-wysiwyg-sanity() {
+  ul:not([class]),
+  ol:not([class]) {
+    list-style: none;
+    ol,
+    ul {
+      margin-bottom: 0;
+    }
+  }
+  ul:not([class]) {
+    > li {
+      position: relative;
+      &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+  ol:not([class]) {
+    counter-reset: item;
+    > li {
+      position: relative;
+      &::before {
+        content: counters(item, ".") ".";
+        counter-increment: item;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+    }
+    ol {
+      counter-reset: itemSecond;
+      > li {
+        &::before {
+          content: counters(item, ".") "." counters(itemSecond, ".") ".";
+          counter-increment: itemSecond;
+        }
+      }
+    }
+  }
+}
+
+@mixin lists-wysiwyg-sanity-modifier($options) {
+  @each $property, $value in $options {
+    @if map.has-key($lists-wysiwyg-options, $property) {
+      @if $value {
+        @if $property == "number-font" {
+          ol:not([class]) {
+            > li {
+              &::before {
+                @include make-font-wysiwyg-options($options: $value);
+              }
+            }
+          }
+        } @else if $property == "first-number-width" {
+          ol:not([class]) {
+            > li {
+              padding-left: calc(
+                1rem + #{$value}
+              ); //* space between number and text + number width
+            }
+            //* Nested ol
+            ol {
+              padding-left: calc(
+                1rem + #{$value}
+              ); //* space between number and text + number width
+              > li {
+                padding-left: calc(
+                  1rem + #{$value * 2}
+                ); //* space between number and text + number width
+              }
+              ol {
+                padding-left: calc(
+                  1rem + #{$value * 2}
+                ); //* space between number and text + number width
+                > li {
+                  padding-left: calc(
+                    1rem + #{$value * 3}
+                  ); //* space between number and text + number width
+                }
+                ol {
+                  padding-left: calc(
+                    1rem + #{$value * 3}
+                  ); //* space between number and text + number width
+                  > li {
+                    padding-left: calc(
+                      1rem + #{$value * 4}
+                    ); //* space between number and text + number width
+                  }
+                  ol {
+                    padding-left: calc(
+                      1rem + #{$value * 4}
+                    ); //* space between number and text + number width
+                    > li {
+                      padding-left: calc(
+                        1rem + #{$value * 5}
+                      ); //* space between number and text + number width
+                    }
+                    ol {
+                      padding-left: calc(
+                        1rem + #{$value * 5}
+                      ); //* space between number and text + number width
+                      > li {
+                        padding-left: calc(
+                          1rem + #{$value * 6}
+                        ); //* space between number and text + number width
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "first-level-number-color" {
+          ol:not([class]) {
+            > li {
+              &:before {
+                color: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-width" {
+          ul:not([class]) {
+            > li {
+              padding-left: calc(
+                1rem + #{$value}
+              ); //* space between artwork and text + artwork width
+              &:before {
+                width: $value;
+                height: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-top" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                top: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-image" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                background-image: url#{$value};
+                background-repeat: no-repeat;
+                background-size: contain;
+                background-position: center;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-background" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                background: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-radius" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                border-radius: $value;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-width" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                border-width: $value;
+                border-style: solid;
+              }
+            }
+          }
+        } @else if $property == "first-level-artwork-border-color" {
+          ul:not([class]) {
+            > li {
+              &:before {
+                border-color: $value;
+              }
+            }
+          }
+        } @else if $property == "second-level-number-color" {
+          ol:not([class]) {
+            ol {
+              > li {
+                &:before {
+                  color: $value;
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-width" {
+          ul:not([class]) {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  padding-left: calc(
+                    1rem + #{$value}
+                  ); //* space between artwork and text + artwork width
+                  &::before {
+                    width: $value;
+                    height: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-top" {
+          ul:not([class]) {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  &::before {
+                    top: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-image" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    background: url(#{$value});
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    background-position: center;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-background" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    background: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-radius" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-radius: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-width" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-width: $value;
+                    border-style: solid;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "second-level-artwork-border-color" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  &:before {
+                    border-color: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-number-color" {
+          ol:not([class]) {
+            ol {
+              ol {
+                > li {
+                  &:before {
+                    color: $value;
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-width" {
+          ul:not([class]) {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      padding-left: calc(
+                        1rem + #{$value}
+                      ); //* space between artwork and text + artwork width
+                      &::before {
+                        width: $value;
+                        height: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-top" {
+          ul:not([class]) {
+            > li {
+              //* Nested ul
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &::before {
+                        top: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-image" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        background: url(#{$value});
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-background" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        background: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-radius" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-radius: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-width" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-width: $value;
+                        border-style: solid;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "third-level-artwork-border-color" {
+          ul:not([class]) {
+            > li {
+              ul {
+                > li {
+                  ul {
+                    > li {
+                      &:before {
+                        border-color: $value;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        } @else if $property == "nested-list-spacing" {
+          ul:not([class]),
+          ol:not([class]) {
+            > li {
+              ul, ol {
+                margin-top: $value;
+              }
+            }
+          }
+        } @else if $property == "font-styles" {
+          ul:not([class]),
+          ol:not([class]) {
+            li {
+              @include make-font-wysiwyg-options($options: $value);
+            }
+          }
+        } @else {
+          ul:not([class]),
+          ol:not([class]) {
+            #{$property}: $value;
+          }
+        }
+      }
+    }
+  }
+}