@inriver/inri 1.14.0 → 1.16.0

package/src/styles/components/_forms.scss

@@ -1,203 +1,203 @@
-.c-input {
-  // Input, select etc overrides
-  &.q-field--outlined .q-field__control {
-    padding: 0 16px 0 12px;
-    border-radius: 5px;
-    background: var(--input-bg-color);
-
-    &::after {
-      border-width: 1px;
-    }
-  }
-
-  // Outline color
-  &.q-field--outlined .q-field__control::before {
-    border-color: var(--color-grey);
-  }
-
-  // Focus
-  &.q-field--highlighted:not(.q-field--error) {
-    &.q-field--outlined .q-field__control::after {
-      border-color: var(--q-accent);
-    }
-  }
-
-  // Padding below the input
-  &.q-field--with-bottom {
-    padding-bottom: 36px;
-  }
-
-  // Label
-  .q-field__label {
-    transition: all 0.3s !important;
-    font-size: 14px;
-    color: var(--color-grey-dark);
-  }
-
-  // Move the floated label
-  &.q-field--float .q-field__label {
-    top: 0 !important;
-    background: var(--input-bg-color);
-    padding: 0 4px;
-    left: -4px;
-    z-index: 1;
-  }
-
-  // Set label color
-  &.q-field--float:not(.q-field--focused):not(.q-field--error) {
-    .q-field__label {
-      color: var(--color-grey-darker);
-    }
-  }
-
-  // If you have a prepended icon then offset the label to the left on focus
-  &.q-field--float {
-    .q-field__prepend + .q-field__control-container {
-      .q-field__label {
-        left: -34px;
-      }
-    }
-  }
-
-  // Reset top padding on inputs to compensate for offset label
-  .q-field__native {
-    padding: 8px 0 !important;
-
-    // Smaller min-height than default
-    min-height: 40px !important;
-  }
-
-  // Reset top padding on select boxes to compensate for offset label
-  &.q-field--auto-height.q-field--labeled .q-field__control-container {
-    padding-top: 0;
-  }
-
-  .q-field--auto-height {
-    min-height: 50px !important;
-  }
-
-  // Field with errors and hints
-  .q-field__bottom {
-    padding-top: 4px;
-  }
-
-  // Textarea overrides
-  &.q-textarea {
-    .q-field__control-container {
-      padding-top: 8px !important;
-    }
-
-    .q-field__control {
-      padding: 0;
-    }
-
-    textarea {
-      resize: none !important;
-      padding: 8px 16px 8px 12px !important;
-      height: 138px;
-    }
-
-    .q-field__label {
-      left: 10px;
-    }
-
-    .q-field__append {
-      position: absolute;
-      right: 16px;
-    }
-  }
-
-  // Disabled input
-  &.q-field--disabled {
-    .q-field__control::before {
-      border-color: var(--color-grey-lighter) !important;
-    }
-
-    .q-field__native {
-      color: var(--color-grey-dark);
-    }
-  }
-
-  // Select overrides
-  .q-select__dropdown-icon {
-    color: var(--color-grey-dark);
-  }
-
-  &.q-select--with-input .q-field__control {
-    cursor: pointer;
-
-    input {
-      cursor: pointer;
-    }
-  }
-
-  // Error icon
-  .mdi-alert-circle-outline {
-    font-size: 18px;
-  }
-}
-
-// Default modifier
-.c-input.c-input--default:not(.q-textarea) {
-  .q-field__control {
-    height: auto;
-    min-height: 50px;
-  }
-
-  .q-field__label {
-    top: 15px;
-  }
-
-  .q-field__marginal {
-    height: 50px;
-  }
-}
-
-// Rounded
-.c-input.q-field--rounded .q-field__control {
-  border-radius: 25px;
-}
-
-// Dense modifier
-.c-input--dense {
-  // Outline color
-  &.q-field--outlined .q-field__control::before {
-    border-color: var(--color-grey);
-  }
-
-  .q-field__label {
-    color: var(--color-grey-darkest);
-  }
-
-  ::placeholder {
-    color: var(--color-text);
-  }
-
-  &.q-textarea {
-    .q-field__control {
-      padding: 0;
-    }
-
-    textarea {
-      padding: 8px 20px 8px 16px !important;
-      height: 80px;
-    }
-
-    .q-field__label {
-      left: 16px;
-    }
-
-    .q-field__append {
-      right: 20px;
-    }
-  }
-
-  &.q-field--float .q-field__label {
-    top: -2px !important;
-  }
-
-  // Dense rounded
-  &.q-field--rounded .q-field__control {
-    padding: 0 16px;
-  }
-}
+.c-input {
+  // Input, select etc overrides
+  &.q-field--outlined .q-field__control {
+    padding: 0 16px 0 12px;
+    border-radius: 5px;
+    background: var(--input-bg-color);
+
+    &::after {
+      border-width: 1px;
+    }
+  }
+
+  // Outline color
+  &.q-field--outlined .q-field__control::before {
+    border-color: var(--color-grey);
+  }
+
+  // Focus
+  &.q-field--highlighted:not(.q-field--error) {
+    &.q-field--outlined .q-field__control::after {
+      border-color: var(--q-accent);
+    }
+  }
+
+  // Padding below the input
+  &.q-field--with-bottom {
+    padding-bottom: 36px;
+  }
+
+  // Label
+  .q-field__label {
+    transition: all 0.3s !important;
+    font-size: 14px;
+    color: var(--color-grey-dark);
+  }
+
+  // Move the floated label
+  &.q-field--float .q-field__label {
+    top: 0 !important;
+    background: var(--input-bg-color);
+    padding: 0 4px;
+    left: -4px;
+    z-index: 1;
+  }
+
+  // Set label color
+  &.q-field--float:not(.q-field--focused):not(.q-field--error) {
+    .q-field__label {
+      color: var(--color-grey-darker);
+    }
+  }
+
+  // If you have a prepended icon then offset the label to the left on focus
+  &.q-field--float {
+    .q-field__prepend + .q-field__control-container {
+      .q-field__label {
+        left: -34px;
+      }
+    }
+  }
+
+  // Reset top padding on inputs to compensate for offset label
+  .q-field__native {
+    padding: 8px 0 !important;
+
+    // Smaller min-height than default
+    min-height: 40px !important;
+  }
+
+  // Reset top padding on select boxes to compensate for offset label
+  &.q-field--auto-height.q-field--labeled .q-field__control-container {
+    padding-top: 0;
+  }
+
+  .q-field--auto-height {
+    min-height: 50px !important;
+  }
+
+  // Field with errors and hints
+  .q-field__bottom {
+    padding-top: 4px;
+  }
+
+  // Textarea overrides
+  &.q-textarea {
+    .q-field__control-container {
+      padding-top: 8px !important;
+    }
+
+    .q-field__control {
+      padding: 0;
+    }
+
+    textarea {
+      resize: none !important;
+      padding: 8px 16px 8px 12px !important;
+      height: 138px;
+    }
+
+    .q-field__label {
+      left: 10px;
+    }
+
+    .q-field__append {
+      position: absolute;
+      right: 16px;
+    }
+  }
+
+  // Disabled input
+  &.q-field--disabled {
+    .q-field__control::before {
+      border-color: var(--color-grey-lighter) !important;
+    }
+
+    .q-field__native {
+      color: var(--color-grey-dark);
+    }
+  }
+
+  // Select overrides
+  .q-select__dropdown-icon {
+    color: var(--color-grey-dark);
+  }
+
+  &.q-select--with-input .q-field__control {
+    cursor: pointer;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  // Error icon
+  .mdi-alert-circle-outline {
+    font-size: 18px;
+  }
+}
+
+// Default modifier
+.c-input.c-input--default:not(.q-textarea) {
+  .q-field__control {
+    height: auto;
+    min-height: 50px;
+  }
+
+  .q-field__label {
+    top: 15px;
+  }
+
+  .q-field__marginal {
+    height: 50px;
+  }
+}
+
+// Rounded
+.c-input.q-field--rounded .q-field__control {
+  border-radius: 25px;
+}
+
+// Dense modifier
+.c-input--dense {
+  // Outline color
+  &.q-field--outlined .q-field__control::before {
+    border-color: var(--color-grey);
+  }
+
+  .q-field__label {
+    color: var(--color-grey-darkest);
+  }
+
+  ::placeholder {
+    color: var(--color-text);
+  }
+
+  &.q-textarea {
+    .q-field__control {
+      padding: 0;
+    }
+
+    textarea {
+      padding: 8px 20px 8px 16px !important;
+      height: 80px;
+    }
+
+    .q-field__label {
+      left: 16px;
+    }
+
+    .q-field__append {
+      right: 20px;
+    }
+  }
+
+  &.q-field--float .q-field__label {
+    top: -2px !important;
+  }
+
+  // Dense rounded
+  &.q-field--rounded .q-field__control {
+    padding: 0 16px;
+  }
+}

package/src/styles/components/_menu.scss

@@ -1,12 +1,12 @@
-.q-menu {
-  border: 1px solid var(--color-border-dark);
-
-  .q-item {
-    min-height: 40px;
-    padding: 4px 16px;
-  }
-
-  .q-item:not(:last-child) {
-    border-bottom: 1px solid var(--color-border-dark);
-  }
-}
+.q-menu {
+  border: 1px solid var(--color-border-dark);
+
+  .q-item {
+    min-height: 40px;
+    padding: 4px 16px;
+  }
+
+  .q-item:not(:last-child) {
+    border-bottom: 1px solid var(--color-border-dark);
+  }
+}

package/src/styles/components/_notifications.scss

@@ -1,24 +1,24 @@
-.c-notify {
-  .c-spinner {
-    width: 18px !important;
-    height: 18px !important;
-    color: #fff !important;
-    margin-right: 20px !important;
-  }
-
-  .q-notification__icon--additional {
-    margin-right: 20px;
-  }
-
-  &.q-notification--standard {
-    .q-notification__actions {
-      padding: 0;
-      margin-right: 0;
-    }
-  }
-}
-
-.c-notify__btn {
-  padding: 8px;
-  margin-left: 12px;
-}
+.c-notify {
+  .c-spinner {
+    width: 18px !important;
+    height: 18px !important;
+    color: #fff !important;
+    margin-right: 20px !important;
+  }
+
+  .q-notification__icon--additional {
+    margin-right: 20px;
+  }
+
+  &.q-notification--standard {
+    .q-notification__actions {
+      padding: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+.c-notify__btn {
+  padding: 8px;
+  margin-left: 12px;
+}

package/src/styles/components/_q-editor.scss

@@ -1,14 +1,14 @@
-.q-editor__toolbar-group + .q-editor__toolbar-group::before {
-  top: 0;
-  bottom: 0;
-}
-
-.q-editor .q-btn {
-  color: var(--color-grey-dark);
-  margin: 6px 0;
-  padding: 6px;
-}
-
-.q-editor__toolbar-group:first-child {
-  margin-left: 12px;
-}
+.q-editor__toolbar-group + .q-editor__toolbar-group::before {
+  top: 0;
+  bottom: 0;
+}
+
+.q-editor .q-btn {
+  color: var(--color-grey-dark);
+  margin: 6px 0;
+  padding: 6px;
+}
+
+.q-editor__toolbar-group:first-child {
+  margin-left: 12px;
+}

package/src/styles/components/_radio-buttons.scss

@@ -1,17 +1,17 @@
-.c-radio {
-  &.q-radio[aria-label] {
-    max-width: max-content;
-  }
-
-  &.q-radio.disabled {
-    opacity: 0.4 !important;
-  }
-
-  .q-radio__inner--falsy .q-radio__icon {
-    color: var(--radio-border-color);
-  }
-
-  .q-radio__label {
-    padding: 4px 10px;
-  }
-}
+.c-radio {
+  &.q-radio[aria-label] {
+    max-width: max-content;
+  }
+
+  &.q-radio.disabled {
+    opacity: 0.4 !important;
+  }
+
+  .q-radio__inner--falsy .q-radio__icon {
+    color: var(--radio-border-color);
+  }
+
+  .q-radio__label {
+    padding: 4px 10px;
+  }
+}