From: Sarah White Date: Thu, 5 Apr 2018 18:16:04 +0000 (-0600) Subject: move list styles to new page X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=879cb445a14c48e4f381b74da0a9089ba2eaab6a;p=working%2Feg-antora.git move list styles to new page --- diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc index 3bd9374..ef86635 100644 --- a/docs/modules/ROOT/nav.adoc +++ b/docs/modules/ROOT/nav.adoc @@ -6,3 +6,7 @@ * xref:stylesheets.adoc[Work with the CSS Stylesheets] * xref:style-guide.adoc[UI Element Styles] ** xref:inline-text-styles.adoc[Inline Text] +** xref:admonition-styles.adoc[Admonitions] +** xref:list-styles.adoc[Lists] +** xref:sidebar-styles.adoc[Sidebars] +** xref:ui-macro-styles.adoc[UI Macros] diff --git a/docs/modules/ROOT/pages/list-styles.adoc b/docs/modules/ROOT/pages/list-styles.adoc new file mode 100644 index 0000000..f7fe6b5 --- /dev/null +++ b/docs/modules/ROOT/pages/list-styles.adoc @@ -0,0 +1,83 @@ += List Styles +ifndef::env-site,env-github[] +include::_attributes.adoc[] +endif::[] + +== Ordered list numeration + +The browser automatically numbers xref:antora:asciidoc:ordered-and-unordered-lists.adoc[ordered lists] and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. + +AsciiDoc allows the author to override the numeration style for an ordered list. +Here's an example of that output: + +[source,html] +---- +
+
    +
  1. a

  2. +
  3. b

  4. +
  5. c

  6. +
+
+---- + +In order to support this customization, you must assign the list-style-type property to the following classes on the `
    ` element in your stylesheet. + +|=== +|
      class |list-style-type property value + +|arabic +|decimal + +|decimal +|decimal-leading-zero + +|loweralpha +|lower-alpha + +|lowergreek +|lower-greek + +|lowerroman +|lower-roman + +|upperalpha +|upper-alpha + +|upperroman +|upper-roman +|=== + +== Task list + +A xref:antora:asciidoc:task-lists.adoc[task list] is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked). +Here's an AsciiDoc source example that produces a task list: + +[source,asciidoc] +---- +* [ ] todo +* [x] done! +---- + +If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text. + +[source,html] +---- +
      +
        +
      • +

        todo

        +
      • +
      • +

        done!

        +
      • +
      +
      +---- + +The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element. + +Here's how it might appear: + +* [ ] todo +* [*] done! diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc index cea71c7..813664f 100644 --- a/docs/modules/ROOT/pages/style-guide.adoc +++ b/docs/modules/ROOT/pages/style-guide.adoc @@ -20,85 +20,7 @@ These elements include: * xref:inline-text-styles.adoc[Emphasized inline text, such as bold, italics, etc.] * xref:admonition-styles.adoc[Admonitions] - -=== Ordered List Numeration Styles - -The browser automatically numbers ordered lists and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. - -AsciiDoc allows the author to override the numeration style for an ordered list. -Here's an example of that output: - -[source,html] ----- -
      -
        -
      1. a

      2. -
      3. b

      4. -
      5. c

      6. -
      -
      ----- - -In order to support this customization, you must assign the list-style-type property to the following classes on the
        element in your stylesheet. - -|=== -|
          class |list-style-type property value - -|arabic -|decimal - -|decimal -|decimal-leading-zero - -|loweralpha -|lower-alpha - -|lowergreek -|lower-greek - -|lowerroman -|lower-roman - -|upperalpha -|upper-alpha - -|upperroman -|upper-roman -|=== - -=== Task Lists - -A task list is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked). -Here's an AsciiDoc source example that produces a task list: - -[source,asciidoc] ----- -* [ ] todo -* [x] done! ----- - -If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text. - -[source,html] ----- -
          -
            -
          • -

            todo

            -
          • -
          • -

            done!

            -
          • -
          -
          ----- - -The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element. - -Here's how it might appear: - -* [ ] todo -* [*] done! +* xref:list-styles.adoc[Lists] === UI Elements