@inriver/inri 1.14.0 → 1.16.0

package/src/styles/components/_tables.scss

@@ -1,92 +1,92 @@
-.c-table {
-  th {
-    padding: 7px 12px;
-    font-size: 14px;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  td {
-    padding: 7px 12px;
-    border-bottom: none !important;
-    border-top: 1px solid var(--color-border);
-  }
-
-  thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  thead tr:first-child th {
-    top: 0;
-    background: var(--table-header-bg-color);
-  }
-
-  tbody tr:first-child td {
-    border-color: transparent;
-  }
-
-  tbody tr.selected {
-    background-color: var(--item-selected-bg-color);
-
-    td {
-      border-color: transparent;
-    }
-
-    td::after {
-      background: transparent;
-    }
-
-    // Also hide the border from the next sibling
-    & + tr {
-      td {
-        border-color: transparent;
-      }
-    }
-  }
-
-  // Hide the border on hovered items
-  tbody tr:hover {
-    td {
-      border-color: transparent;
-    }
-
-    // Also hide the border from the next sibling
-    & + tr {
-      td {
-        border-color: transparent;
-      }
-    }
-  }
-}
-
-// This will align the content to the top instead of being centered
-.c-table.align-top {
-  td {
-    padding: 14px 12px 13px;
-  }
-
-  td {
-    vertical-align: top;
-  }
-}
-
-// If the items are selectable then we want to hide the default checkboxes
-.c-table.hide-checkboxes {
-  th:first-child,
-  td:first-child {
-    display: none;
-  }
-
-  th:first-child + th,
-  td:first-child + td {
-    border-left: 0;
-  }
-}
-
-.c-table.with-action-buttons {
-  th:last-child,
-  td:last-child {
-    border-left: 0;
-  }
-}
+.c-table {
+  th {
+    padding: 7px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 7px 12px;
+    border-bottom: none !important;
+    border-top: 1px solid var(--color-border);
+  }
+
+  thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  thead tr:first-child th {
+    top: 0;
+    background: var(--table-header-bg-color);
+  }
+
+  tbody tr:first-child td {
+    border-color: transparent;
+  }
+
+  tbody tr.selected {
+    background-color: var(--item-selected-bg-color);
+
+    td {
+      border-color: transparent;
+    }
+
+    td::after {
+      background: transparent;
+    }
+
+    // Also hide the border from the next sibling
+    & + tr {
+      td {
+        border-color: transparent;
+      }
+    }
+  }
+
+  // Hide the border on hovered items
+  tbody tr:hover {
+    td {
+      border-color: transparent;
+    }
+
+    // Also hide the border from the next sibling
+    & + tr {
+      td {
+        border-color: transparent;
+      }
+    }
+  }
+}
+
+// This will align the content to the top instead of being centered
+.c-table.align-top {
+  td {
+    padding: 14px 12px 13px;
+  }
+
+  td {
+    vertical-align: top;
+  }
+}
+
+// If the items are selectable then we want to hide the default checkboxes
+.c-table.hide-checkboxes {
+  th:first-child,
+  td:first-child {
+    display: none;
+  }
+
+  th:first-child + th,
+  td:first-child + td {
+    border-left: 0;
+  }
+}
+
+.c-table.with-action-buttons {
+  th:last-child,
+  td:last-child {
+    border-left: 0;
+  }
+}

package/src/styles/components/_tooltips.scss

@@ -1,5 +1,5 @@
-// More is defined in quasar.variables.scss
-
-.q-tooltip {
-  border: 1px solid var(--tooltip-border-color);
-}
+// More is defined in quasar.variables.scss
+
+.q-tooltip {
+  border: 1px solid var(--tooltip-border-color);
+}

package/src/styles/components/_tree.scss

@@ -1,86 +1,86 @@
-.c-tree.q-tree {
-  .q-icon {
-    font-size: 20px;
-    width: 12px;
-    margin-right: 8px;
-    color: var(--tree-icon-color);
-
-    &:hover {
-      color: var(--tree-text-color);
-    }
-  }
-
-  & > .q-tree__node--child > .q-tree__node-header {
-    padding-left: 36px !important;
-  }
-
-  // Remove the top margin on the first item in the list
-  & > .q-tree__node:first-child > .q-tree__node-header {
-    margin-top: 0;
-  }
-
-  // Make item content be on top of the q-focus-helper instead of below
-  .q-tree__node-header > * {
-    z-index: 1;
-  }
-
-  .q-tree__node {
-    padding-bottom: 0;
-  }
-
-  // Override relative to that we can extend the focus background to go from edge to edge
-  .q-tree__node.relative-position,
-  .q-tree__node-header.relative-position {
-    position: static;
-  }
-
-  .q-tree__node-header {
-    border-radius: 0;
-    margin-top: 8px;
-    padding: 2px 16px;
-    min-height: 32px;
-
-    &:hover .q-focus-helper,
-    &:focus .q-focus-helper {
-      opacity: 1 !important;
-    }
-  }
-
-  .q-tree__node-header-content {
-    color: var(--tree-text-color);
-    padding-left: 4px;
-  }
-
-  .q-tree__node-header-content div:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  // Do some overrides on the focus effect
-  .q-focus-helper {
-    background: var(--item-hover-bg-color) !important;
-    height: 32px !important;
-    top: auto !important;
-
-    &::before,
-    &::after {
-      opacity: 0 !important;
-    }
-  }
-
-  // Selected item
-  .q-tree__node--selected {
-    font-weight: 600;
-
-    .q-focus-helper {
-      background: var(--item-selected-bg-color) !important;
-      opacity: 1;
-    }
-
-    .q-icon {
-      pointer-events: all;
-      color: var(--tree-text-color);
-    }
-  }
-}
+.c-tree.q-tree {
+  .q-icon {
+    font-size: 20px;
+    width: 12px;
+    margin-right: 8px;
+    color: var(--tree-icon-color);
+
+    &:hover {
+      color: var(--tree-text-color);
+    }
+  }
+
+  & > .q-tree__node--child > .q-tree__node-header {
+    padding-left: 36px !important;
+  }
+
+  // Remove the top margin on the first item in the list
+  & > .q-tree__node:first-child > .q-tree__node-header {
+    margin-top: 0;
+  }
+
+  // Make item content be on top of the q-focus-helper instead of below
+  .q-tree__node-header > * {
+    z-index: 1;
+  }
+
+  .q-tree__node {
+    padding-bottom: 0;
+  }
+
+  // Override relative to that we can extend the focus background to go from edge to edge
+  .q-tree__node.relative-position,
+  .q-tree__node-header.relative-position {
+    position: static;
+  }
+
+  .q-tree__node-header {
+    border-radius: 0;
+    margin-top: 8px;
+    padding: 2px 16px;
+    min-height: 32px;
+
+    &:hover .q-focus-helper,
+    &:focus .q-focus-helper {
+      opacity: 1 !important;
+    }
+  }
+
+  .q-tree__node-header-content {
+    color: var(--tree-text-color);
+    padding-left: 4px;
+  }
+
+  .q-tree__node-header-content div:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Do some overrides on the focus effect
+  .q-focus-helper {
+    background: var(--item-hover-bg-color) !important;
+    height: 32px !important;
+    top: auto !important;
+
+    &::before,
+    &::after {
+      opacity: 0 !important;
+    }
+  }
+
+  // Selected item
+  .q-tree__node--selected {
+    font-weight: 600;
+
+    .q-focus-helper {
+      background: var(--item-selected-bg-color) !important;
+      opacity: 1;
+    }
+
+    .q-icon {
+      pointer-events: all;
+      color: var(--tree-text-color);
+    }
+  }
+}

package/src/styles/components/_truncated-chips.scss

@@ -1,39 +1,39 @@
-// This is used when having chips/tags in tables. If there are more chips than fits the cell then hide chips and show some icons.
-// It is used together with the useTruncateChips composable function.
-
-// Only shown when more chips than fits in the cell
-.truncated-chips__ellipsis,
-.truncated-chips__show-more-btn {
-  display: none;
-}
-
-// This is the wrapper for all the chips
-.truncated-chips {
-  overflow: hidden;
-  max-width: 1px;
-  padding-left: 6px !important;
-}
-
-// When a chip is overflown truncate it and all the sibling chips. Toggle the status of some buttons/icons.
-.truncated-chip {
-  display: none !important;
-
-  & ~ .q-chip {
-    display: none;
-  }
-
-  & ~ .truncated-chips__show-more-btn {
-    display: inline-flex;
-  }
-
-  & ~ .truncated-chips__edit-btn {
-    display: none;
-  }
-
-  & ~ .truncated-chips__ellipsis {
-    display: inline-flex;
-    color: var(--color-grey);
-    position: relative;
-    top: 8px;
-  }
-}
+// This is used when having chips/tags in tables. If there are more chips than fits the cell then hide chips and show some icons.
+// It is used together with the useTruncateChips composable function.
+
+// Only shown when more chips than fits in the cell
+.truncated-chips__ellipsis,
+.truncated-chips__show-more-btn {
+  display: none;
+}
+
+// This is the wrapper for all the chips
+.truncated-chips {
+  overflow: hidden;
+  max-width: 1px;
+  padding-left: 6px !important;
+}
+
+// When a chip is overflown truncate it and all the sibling chips. Toggle the status of some buttons/icons.
+.truncated-chip {
+  display: none !important;
+
+  & ~ .q-chip {
+    display: none;
+  }
+
+  & ~ .truncated-chips__show-more-btn {
+    display: inline-flex;
+  }
+
+  & ~ .truncated-chips__edit-btn {
+    display: none;
+  }
+
+  & ~ .truncated-chips__ellipsis {
+    display: inline-flex;
+    color: var(--color-grey);
+    position: relative;
+    top: 8px;
+  }
+}

package/src/styles/main.scss

@@ -1,45 +1,45 @@
-@import 'css-variables';
-@import './quasar.variables.scss';
-@import 'quasar/dist/quasar.sass';
-@import 'transitions';
-@import 'reset';
-@import 'components/forms';
-@import 'components/chips';
-@import 'components/checkboxes';
-@import 'components/radio-buttons';
-@import 'components/tables';
-@import 'components/q-editor';
-@import 'components/tree';
-@import 'components/tooltips';
-@import 'components/notifications';
-@import 'components/breadcrumbs';
-@import 'components/menu';
-@import 'components/truncated-chips';
-@import 'utils';
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('/fonts/Wallop-Regular.woff2') format("woff2");
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('/fonts/Wallop-Medium.woff2') format("woff2");
-  font-weight: 500;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('/fonts/Wallop-SemiBold.woff2') format("woff2");
-  font-weight: 600;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Wallop';
-  src: url('/fonts/Wallop-Bold.woff2') format("woff2");
-  font-weight: 700;
-  font-display: swap;
-}
+@import 'css-variables';
+@import './quasar.variables.scss';
+@import 'quasar/dist/quasar.sass';
+@import 'transitions';
+@import 'reset';
+@import 'components/forms';
+@import 'components/chips';
+@import 'components/checkboxes';
+@import 'components/radio-buttons';
+@import 'components/tables';
+@import 'components/q-editor';
+@import 'components/tree';
+@import 'components/tooltips';
+@import 'components/notifications';
+@import 'components/breadcrumbs';
+@import 'components/menu';
+@import 'components/truncated-chips';
+@import 'utils';
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Regular.woff2') format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Medium.woff2') format("woff2");
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-SemiBold.woff2') format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Bold.woff2') format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}

package/src/styles/quasar.variables.scss

@@ -1,50 +1,50 @@
-$primary   : #000;
-$secondary : var(--color-grey-lighter);
-$accent    : var(--color-green);
-
-$dark      : #1d1d1d;
-
-$positive  : var(--color-green);
-$negative  : var(--color-red);
-$info      : var(--color-blue);
-$warning   : var(--color-yellow);
-
-$typography-font-family: var(--font-family);
-
-$h1:        (size: 24px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-$h2:        (size: 22px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-$h3:        (size: 18px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-$h4:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-
-// These should not be used but are always bundled by Quasar. Let's give them fallback sizes just in case (h4 clones)
-$h5:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-$h6:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
-
-$body1:     (size: 14px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
-$body2:     (size: 12px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
-
-$separator-color: var(--color-border);
-
-$input-text-color: var(--color-grey-darker);
-
-$editor-border-color: var(--color-grey);
-
-$generic-border-radius: 0;
-
-$menu-box-shadow: 0;
-
-// Tooltips
-$tooltip-color: var(--tooltip-text-color);
-$tooltip-background: var(--tooltip-bg-color);
-$tooltip-fontsize: 14px;
-$tooltip-border-radius: 5px;
-$tooltip-padding: 4px 10px;
-
-// Override Quasar color palette
-$grey: var(--color-grey);
-$blue: var(--color-blue);
-$purple: var(--color-purple);
-$red: var(--color-red);
-$orange: var(--color-orange);
-$yellow: var(--color-yellow);
-$green: var(--color-green);
+$primary   : #000;
+$secondary : var(--color-grey-lighter);
+$accent    : var(--color-green);
+
+$dark      : #1d1d1d;
+
+$positive  : var(--color-green);
+$negative  : var(--color-red);
+$info      : var(--color-blue);
+$warning   : var(--color-yellow);
+
+$typography-font-family: var(--font-family);
+
+$h1:        (size: 24px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h2:        (size: 22px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h3:        (size: 18px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h4:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+
+// These should not be used but are always bundled by Quasar. Let's give them fallback sizes just in case (h4 clones)
+$h5:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h6:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+
+$body1:     (size: 14px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
+$body2:     (size: 12px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
+
+$separator-color: var(--color-border);
+
+$input-text-color: var(--color-grey-darker);
+
+$editor-border-color: var(--color-grey);
+
+$generic-border-radius: 0;
+
+$menu-box-shadow: 0;
+
+// Tooltips
+$tooltip-color: var(--tooltip-text-color);
+$tooltip-background: var(--tooltip-bg-color);
+$tooltip-fontsize: 14px;
+$tooltip-border-radius: 5px;
+$tooltip-padding: 4px 10px;
+
+// Override Quasar color palette
+$grey: var(--color-grey);
+$blue: var(--color-blue);
+$purple: var(--color-purple);
+$red: var(--color-red);
+$orange: var(--color-orange);
+$yellow: var(--color-yellow);
+$green: var(--color-green);

package/src/styles/tailwind/index.css

@@ -1,3 +1,3 @@
-@tailwind base;
-@tailwind components;
+@tailwind base;
+@tailwind components;
 @tailwind utilities;