commit 0e98f214318545f6322cf48ae699f01dd27d2f5b Author: Eden Kirin Date: Fri Dec 16 11:42:30 2022 +0100 Initial diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3e22129 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/dist \ No newline at end of file diff --git a/img/border.png b/img/border.png new file mode 100644 index 0000000..7862c79 Binary files /dev/null and b/img/border.png differ diff --git a/img/dot.png b/img/dot.png new file mode 100644 index 0000000..c176a13 Binary files /dev/null and b/img/dot.png differ diff --git a/img/expected.png b/img/expected.png new file mode 100644 index 0000000..db9fc1b Binary files /dev/null and b/img/expected.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8ab50e7 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + + + Document + + + + +

Sidebar menu structure playground

+ +
+
+

Playground

+ +
+ +
+

Expected

+
    +
  • First Level
    • +
  • + First Level +
      +
    • Second Level
      • +
    • Second Level
      • +
    • Second Level
      • +
    • Second Level
      • +
    • + Second Level +
        +
      • Third Level
        • +
      • Third Level
        • +
      • Third Level
        • +
      • Third Level
        • +
      +
      • +
    +
    • +
  • First Level
    • +
  • First Level
    • +
  • + First Level +
      +
    • Second Level
      • +
    • Second Level
      • +
    • Second Level
      • +
    • Second Level
      • +
    +
    • +
  • First Level
    • +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..9fd2eed --- /dev/null +++ b/style.scss @@ -0,0 +1,100 @@ +body { + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, + sans-serif; + font-size: 14pt; + padding: 1rem 5rem; +} + +.wrapper { + display: flex; +} + +ul { + list-style-type: none; +} + +section.tree-structure { + width: 50%; + padding: 0 2rem 0 2rem; +} + +section.tree-structure-expected { + width: 50%; + padding: 0 2rem 0 2rem; + .selected-first { + color: green; + } + .selected-last { + color: red; + } + .not-selected { + color: black; + } +} + +section.example { + margin-top: 5rem; + img { + max-width: 100%; + } +} + +ul.subnav { + li { + a { + display: flex; + padding: 0 0.75rem; + cursor: pointer; + height: 56px; + align-items: center; + text-decoration: none; + + &::before { + content: " "; + display: inline-block; + width: 32px; + margin-right: 15px; + height: 100%; + background-image: url("../img/border.png"); + background-repeat: no-repeat; + background-position: top center; + } + } + } + + > li { + border: 1px solid red; + + &:first-of-type { + > a { + height: 57px; + &::before { + align-self: flex-end; + height: 30px; + background-image: url("../img/border.png"), url("../img/dot.png"); + } + } + } + + &:last-of-type { + margin: 0; + > a { + &::before { + align-self: flex-start; + height: 30px; + background-image: url("../img/border.png"), url("../img/dot.png"); + background-position: bottom center; + } + } + } + + // single item - just a dot + &:first-of-type:last-of-type { + > a { + &::before { + background-image: url("../img/dot.png"); + } + } + } + } +}