From 976f67bfbcf879c67aa0876b67b638491363d97e Mon Sep 17 00:00:00 2001
From: Gordon <gordonlarrigan@gmail.com>
Date: Sat, 10 Apr 2021 18:45:32 +0100
Subject: [PATCH] Add classnames reference

---
 docs/styles.md | 120 ++++++++++++++++++++++++++++++++++---------------
 1 file changed, 83 insertions(+), 37 deletions(-)

diff --git a/docs/styles.md b/docs/styles.md
index d9b50b6..b2f624c 100644
--- a/docs/styles.md
+++ b/docs/styles.md
@@ -1,46 +1,92 @@
 # Styles
 
-The kanbn board has a default style which is based on the current vscode theme, however this can be overridden by creating a CSS file `board.css` inside the `.kanbn/` directory.
+The Kanbn board has a default style which is based on the current vscode theme, however you can override this by creating a CSS file `.kanbn/board.css`. A reference of class names is provided below.
 
-## CSS class structure
+To view the default stylesheet, see `src/index.css` in the extension folder (see [here](https://code.visualstudio.com/docs/editor/extension-gallery#_where-are-extensions-installed) to find out where extensions are installed on your platform).
+
+Visual Studio Code will add `vscode-light`, `vscode-dark` and `vscode-high-contrast` class names to the `body` tag, depending on the current theme.
+
+## CSS classes
 
 ### Kanbn board
 
-- `div.kanbn-header`
-  - `h1.kanbn-header-name`
-  - `p.kanbn-header-description`
-- `div.kanbn-board`
-  - `div.kanbn-column.kanbn-column-{column name in snakecase}`
-    - `h2.kanbn-column-name`
-      - `i.codicon.codicon-{chevron-right or check}`
-      - `span.kanbn-column-count`
-      - `button.kanbn-create-task-button`
-        - `i.codicon.codicon-add`
-    - `div.kanbn-column-task-list[.drag-over when dragging a task over this column]`
-      - `div.kanbn-task[.drag when being dragged]`
-        - `div.kanbn-task-row`
-          - `button.kanbn-task-name`
-        - `div.kanbn-task-row`
-          - `div.kanbn-task-data.kanbn-task-tags`
-            - `span.kanbn-task-tag.kanbn-task-tag-{tag name in snakecase}`
-        - `div.kanbn-task-row`
-          - `div.kanbn-task-data.kanbn-task-assigned`
-            - `i.codicon.codicon-account`
-          - `div.kanbn-task-data.kanbn-task-date`
-            - `i.codicon.codicon-clock`
-          - `div.kanbn-task-data.kanbn-task-comments`
-            - `i.codicon.codicon-comment`
-          - `div.kanbn-task-data.kanbn-task-sub-tasks`
-            - `i.codicon.codicon-tasklist`
-          - `div.kanbn-task-data.kanbn-task-workload`
-            - `i.codicon.codicon-run`
-          - `div.kanbn-task-progress`
+- `kanbn-header`
+- `kanbn-header-name`
+- `kanbn-filter`
+- `kanbn-filter-input`
+- `kanbn-filter-button`
+- `kanbn-header-description`
+- `kanbn-board`
+- `kanbn-column`
+- `kanbn-column-{Column name in snake-case}`
+- `kanbn-column-name`
+- `kanbn-column-count`
+- `kanbn-create-task-button`
+- `kanbn-column-task-list-container`
+- `kanbn-column-task-list`
+- `kanbn-task`
+- `kanbn-task-row`
+- `kanbn-task-name`
+- `kanbn-task-data`
+- `kanbn-task-tags`
+- `kanbn-task-tag`
+- `kanbn-task-tag-{Tag name in snake-case}`
+- `kanbn-task-assigned`
+- `kanbn-task-date`
+- `kanbn-task-workload`
+- `kanbn-task-progress`
+- `kanbn-task-overdue`
+- `kanbn-task-comments`
+- `kanbn-task-sub-tasks`
 
 ### Task editor
 
-- `div.kanbn-task-editor`
-  - `h1.kanbn-task-editor-title`
-  - `div.kanbn-task-editor-form`
-    - `div.kanbn-task-editor-column-left`
-    - `div.kanbn-task-editor-column-right`
-    - `// TODO finish class structure docs...`
+- `kanbn-task-editor`
+- `kanbn-task-editor-title`
+- `kanbn-task-editor-dates`
+- `kanbn-task-editor-form`
+- `kanbn-task-editor-column-left`
+- `kanbn-task-editor-field`
+- `kanbn-task-editor-field-name`
+- `kanbn-task-editor-field-label`
+- `kanbn-task-editor-field-input`
+- `kanbn-task-editor-id`
+- `kanbn-task-editor-field-description`
+- `kanbn-task-editor-field-textarea`
+- `kanbn-task-editor-field-subtasks`
+- `kanbn-task-editor-row`
+- `kanbn-task-editor-row-subtask`
+- `kanbn-task-editor-column`
+- `kanbn-task-editor-field-subtask-completed`
+- `kanbn-task-editor-field-checkbox`
+- `kanbn-task-editor-field-subtask-text`
+- `kanbn-task-editor-column-buttons`
+- `kanbn-task-editor-button`
+- `kanbn-task-editor-button-delete`
+- `kanbn-task-editor-buttons`
+- `kanbn-task-editor-button-add`
+- `kanbn-task-editor-field-relations`
+- `kanbn-task-editor-row-relation`
+- `kanbn-task-editor-field-relation-type`
+- `kanbn-task-editor-field-relation-task`
+- `kanbn-task-editor-field-select`
+- `kanbn-task-editor-field-comments`
+- `kanbn-task-editor-row-comment`
+- `kanbn-task-editor-field-comment-author`
+- `kanbn-task-editor-field-comment-date`
+- `kanbn-task-editor-field-comment-text`
+- `kanbn-task-editor-column-right`
+- `kanbn-task-editor-button-submit`
+- `kanbn-task-editor-field-column`
+- `kanbn-task-editor-field-assigned`
+- `kanbn-task-editor-field-started`
+- `kanbn-task-editor-field-due`
+- `kanbn-task-overdue`
+- `kanbn-task-editor-field-completed`
+- `kanbn-task-editor-field-progress`
+- `kanbn-task-progress`
+- `kanbn-task-editor-field-tags`
+- `kanbn-task-editor-row-tag`
+- `kanbn-task-editor-field-tag`
+- `kanbn-task-editor-tag-highlight`
+- `kanbn-task-tag-{Tag name in snake-case}`