Added balloon css tooltip package. Closes #201.

Reorganised SCSS files and structure for theming. #200.

package.json

@@ -53,6 +53,7 @@
     "@ngx-translate/core": "^9.0.2",
     "@ngx-translate/http-loader": "^2.0.1",
     "@webcomponents/custom-elements": "^1.0.6",
+    "balloon-css": "^0.5.0",
     "body-parser": "^1.17.1",
     "bootstrap": "4.0.0-alpha.5",
     "clarity-angular": "^0.10.21",

src/scss/_all.scss

@@ -0,0 +1,22 @@
+// @import "framework";
+@import "globals";
+@import "helpers";
+@import "layout";
+@import "buttons";
+@import "tooltip";
+@import "loading-screen";
+
+@import "codemirror";
+
+@import "components/loader";
+@import "components/alert";
+@import "components/window-switcher";
+@import "components/header";
+@import "components/url-box";
+@import "components/action-bar";
+@import "components/response-stats";
+@import "components/editor";
+@import "components/dialog";
+@import "components/history";
+
+@import "../app/components/doc-viewer/doc-viewer/doc-viewer.component";

src/scss/_clarity.components.scss

@@ -0,0 +1,149 @@
+/*** CLARITY COMPONENTS ***/
+
+/* Clarity - Begin Part 2 */
+@import "node_modules/clarity-ui/src/utils/maps.clarity";
+
+//Reboot
+@import "node_modules/clarity-ui/src/utils/reboot.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+
+//Popover
+@import "node_modules/clarity-ui/src/popover/common/popover.clarity";
+
+//Icons & Images
+@import "node_modules/clarity-ui/src/image/icons.clarity"; // depends on variables.clarity
+@import "node_modules/clarity-ui/src/image/images.clarity"; // depends on variables.clarity, mixins.clarity, icons.clarity
+
+//Typography
+//depends on colors.clarity, color.clarity, variables.clarity, utilities.clarity
+@import "node_modules/clarity-ui/src/typography/typography.clarity";
+
+//Buttons
+@import "node_modules/clarity-ui/src/button/buttons.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity
+@import "node_modules/clarity-ui/src/button/button-group/button-group.clarity"; // depends on variables.clarity, mixins.clarity
+@import "node_modules/clarity-ui/src/button/toggles.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+@import "node_modules/clarity-ui/src/utils/close.clarity"; //depends on variables.clarity, mixins.clarity
+
+//Alerts
+//depends on variables.clarity, mixins.clarity, color.clarity, icons.clarity, buttons.clarity
+@import "node_modules/clarity-ui/src/emphasis/alert/alert.clarity";
+
+//Cards
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, list-group.clarity, buttons.clarity
+@import "node_modules/clarity-ui/src/layout/card.clarity";
+
+//Code
+// @import "node_modules/clarity-ui/src/code/syntax-highlight/code.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, code.scss
+
+//Dropdowns
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+@import "node_modules/clarity-ui/src/popover/dropdown/dropdown.clarity";
+
+//Labels & Badges
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, typography.clarity
+@import "node_modules/clarity-ui/src/emphasis/labels.clarity";
+
+//Grid
+//depends on variables.clarity, mixins.clarity
+@import "node_modules/clarity-ui/src/layout/grid.clarity";
+
+//Lists
+//depends on variables.clarity, mixins.clarity, helpers.clarity, typograph.clarity
+@import "node_modules/clarity-ui/src/typography/lists.clarity";
+
+//Login
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, icons.clarity
+@import "node_modules/clarity-ui/src/layout/login.clarity";
+
+//Layout
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import "node_modules/clarity-ui/src/layout/main-container/layout.clarity";
+
+//Modal
+//depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import "node_modules/clarity-ui/src/modal/modal.clarity";
+
+//Nav
+//@import "node_modules/clarity-ui/src/navbar/navbar.clarity"; //deleted
+@import "node_modules/clarity-ui/src/layout/nav/header.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@import "node_modules/clarity-ui/src/layout/nav/nav.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@import "node_modules/clarity-ui/src/layout/nav/subnav.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+@import "node_modules/clarity-ui/src/layout/nav/sidenav.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+
+@import "node_modules/clarity-ui/src/layout/vertical-nav/vertical-nav.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity
+
+@import "node_modules/clarity-ui/src/layout/nav/responsive-nav.clarity"; // depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+
+//Progress Bars
+//depends on variables.clarity, helpers.clarity, color.clarity, cards.clarity
+@import "node_modules/clarity-ui/src/progress/progress-bars/progress-bars.clarity";
+//Spinners
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, icons.clarity
+@import "node_modules/clarity-ui/src/progress/spinner/spinner.clarity";
+
+//Tables
+//depends on variables.clarity, mixins.clarity, helpers.clarity, typography.clarity
+@import "node_modules/clarity-ui/src/data/tables.clarity";
+
+//Tooltips
+// depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity
+@import "node_modules/clarity-ui/src/popover/tooltip/tooltips.clarity";
+
+//Forms
+@import "node_modules/clarity-ui/src/forms/utils/form-variables.clarity";
+
+@import "node_modules/clarity-ui/src/forms/utils/mixins.clarity";
+
+// @import "node_modules/clarity-ui/src/forms/inputs.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity
+
+@import "node_modules/clarity-ui/src/forms/checkbox/checkbox.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, form-variables.clarity
+
+@import "node_modules/clarity-ui/src/forms/radio.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, form-variables.clarity
+
+@import "node_modules/clarity-ui/src/forms/select.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, layers.clarity, icons.clarity, images.clarity
+
+@import "node_modules/clarity-ui/src/forms/forms.clarity"; // depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, form-variables.clarity
+
+//Stack View
+//depends on variables.clarity, mixins.clarity, color.clarity, helpers.clarity, forms.clarity
+@import "node_modules/clarity-ui/src/data/stack-view/stack-view.clarity";
+
+//Tree View
+//depends on variables.clarity, mixins.clarity, helpers.clarity, forms.clarity
+@import "node_modules/clarity-ui/src/data/tree-view/tree-view.clarity";
+
+//Datagrid
+//depends on variables.clarity, mixins.clarity, helpers.clarity, layers, icons.clarity, tables.clarity
+@import "node_modules/clarity-ui/src/data/datagrid/datagrid.clarity";
+
+//Animations
+// no dependencies on other clarity scss
+@import "node_modules/clarity-ui/src/utils/animations/animations.clarity";
+
+//Tabs
+@import "node_modules/clarity-ui/src/layout/tabs/tabs.clarity"; // no dependencies on other clarity scss
+
+//Wizards
+// depends on variables.clarity, mixins.clarity, helpers.clarity, color.clarity, layers.clarity
+@import "node_modules/clarity-ui/src/wizard/wizard.clarity";
+
+//Fonts
+@import "node_modules/clarity-ui/src/typography/fonts.clarity"; // no dependencies on other clarity scss
+
+// Signposts
+@import "node_modules/clarity-ui/src/popover/signpost/signposts.clarity";
+
+
+
+// === *** OVERRIDES *** ===
+.header .branding {
+  min-width: 75px;
+}
+.modal-backdrop {
+  background: $theme-bg-color;
+}
+.modal-dialog .modal-content {
+  box-shadow: 0 5px 12px 2px rgba($black, .1);
+}

src/scss/_framework.dark.scss

@@ -0,0 +1,4 @@
+@import "node_modules/clarity-ui/src/utils/dependencies.clarity";
+
+@import "node_modules/clarity-ui/src/utils/theme.dark.clarity";
+@import "clarity.components";