bulkrax 9.3.4 → 9.4.0

data/app/assets/stylesheets/bulkrax/stepper/_upload.scss

@@ -0,0 +1,339 @@
+/* ====== Step Content ====== */
+.step-content {
+  min-height: 400px;
+}
+
+.step-title {
+
+  h2,
+  .h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: $color-text-dark;
+    margin-bottom: 5px;
+  }
+
+  .text-muted {
+    font-size: .875rem;
+    margin-bottom: 20px;
+  }
+
+  code {
+    color: $color-info-dark;
+  }
+}
+
+/* ====== Upload Mode Tabs ====== */
+.upload-mode-tabs {
+  display: flex;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background: none;
+  overflow: hidden;
+}
+
+.upload-mode-tab {
+  flex: 1;
+  padding: 12px 20px;
+  background: #fff;
+  border: none;
+  font-size: .875rem;
+  font-weight: 500;
+  color: $color-text-muted;
+  transition: color 0.3s ease, background-color 0.3s ease;
+
+  .fa {
+    margin-right: 6px;
+  }
+
+  &:hover {
+    color: $color-text-dark;
+  }
+
+  &+& {
+    border-left: 1px solid $border-color;
+  }
+
+  &.active {
+    color: $color-primary;
+    background: $bg-primary-light;
+    border-bottom: 2px solid $color-primary;
+  }
+}
+
+/* ====== Upload Files Zone ====== */
+.upload-zone-wrapper {
+  margin: 25px 0;
+}
+
+.upload-dropzone {
+  @include dropzone-base(dashed, 60px, 40px);
+
+  &:hover .upload-icon {
+    background: $bg-primary-hover;
+  }
+
+  p {
+    margin: 5px 0;
+  }
+}
+
+.upload-dropzone-small {
+  @include dropzone-base(dashed, 20px, 20px);
+
+  &:hover .upload-icon-small {
+    background: $bg-primary-hover;
+  }
+
+  p {
+    margin: 5px 0;
+  }
+}
+
+.upload-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 15px;
+  background: $bg-primary-light;
+  border-radius: 12px;
+  @include flex-center;
+  color: $color-primary;
+  font-size: 28px;
+  transition: background-color 0.3s ease;
+}
+
+.upload-accepted-types {
+  @include flex-center;
+  gap: 30px;
+  margin: 25px 0 0;
+
+  .fa {
+    font-size: 18px;
+    color: $color-text-muted;
+    margin: 0 6px;
+  }
+}
+
+.demo-scenarios {
+  margin-top: 15px;
+  padding: 15px;
+  background: $bg-primary-light;
+  border: 1px solid $border-info;
+  border-radius: 6px;
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .btn {
+    margin-bottom: 8px;
+  }
+}
+
+/* ====== Server Path Panel ====== */
+.file-path-input-wrapper {
+  @include dropzone-base(solid, 60px, 40px);
+
+  .control-label {
+    font-size: 16px;
+    margin-bottom: 4px;
+  }
+
+  .text-muted {
+    margin-bottom: 12px;
+  }
+
+  .form-control {
+    font-size: 14px;
+    padding: 10px 12px;
+    margin: 25px 0 0;
+  }
+}
+
+/* ====== Uploaded Files ====== */
+.uploaded-files-container {
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  overflow: hidden;
+  margin: 25px 0;
+}
+
+.uploaded-files-list {
+  padding: 15px;
+}
+
+.file-row {
+  padding: 15px;
+  margin-bottom: 12px;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background: $bg-light;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.file-row-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-remove-btn {
+  border: 0;
+  color: $color-remove;
+  background: unset;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.file-icon {
+  width: 45px;
+  height: 45px;
+  border-radius: $border-radius;
+  @include flex-center;
+  color: #fff;
+  font-size: 18px;
+}
+
+.file-icon-csv {
+  background: $color-primary;
+}
+
+.file-icon-zip {
+  background: $color-primary;
+}
+
+.file-details {
+  flex: 1;
+}
+
+.file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: $color-text-dark;
+  margin-bottom: 3px;
+}
+
+.file-subtitle {
+  font-size: 12px;
+  color: $color-text-muted;
+}
+
+.file-status {
+  font-size: .875rem;
+}
+
+.file-status-success {
+  color: $color-success;
+}
+
+.file-status-warning {
+  color: $color-warning;
+}
+
+.file-status-error {
+  color: $color-error;
+}
+
+/* Upload progress bar (chunked upload) - full-width like v1 */
+.upload-progress-block {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid $border-color;
+}
+
+.upload-progress-label {
+  font-size: 12px;
+  color: $color-text-muted;
+  margin-bottom: 6px;
+}
+
+.upload-progress-bar-container {
+  height: 12px;
+  background: $border-color;
+  border-radius: 6px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.upload-progress-bar {
+  height: 100%;
+  background: $color-primary;
+  border-radius: 6px;
+  transition: width 0.2s ease;
+}
+
+.upload-info-message {
+  padding: 0 15px 15px;
+}
+
+.upload-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: $color-text-muted;
+  padding: 8px 0;
+
+  .fa {
+    color: $color-text-muted;
+  }
+}
+
+/* ====== File Upload Errors ====== */
+.file-upload-errors {
+  margin: 20px 0;
+
+  .alert {
+    border-radius: 6px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+
+    strong {
+      display: block;
+      margin-bottom: 8px;
+
+      .fa {
+        margin-right: 6px;
+      }
+    }
+
+    ul {
+      padding-left: 20px;
+      margin-bottom: 0;
+
+      li {
+        margin-bottom: 4px;
+        line-height: 1.6;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+/* ====== Download Template ====== */
+.download-template-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 20px 0;
+  font-size: 14px;
+
+  .fa {
+    font-size: 15px;
+  }
+}

data/app/assets/stylesheets/bulkrax/stepper/_validation.scss

@@ -0,0 +1,237 @@
+/* ====== Validate Button ====== */
+.validate-btn {
+  margin: 25px 0;
+  font-weight: 600;
+
+  .fa {
+    margin-right: 8px;
+  }
+}
+
+/* ====== Validation Results ====== */
+.validation-results {
+  margin-top: 30px;
+}
+
+/* ====== Import Size Gauge ====== */
+.import-size-gauge {
+  margin-bottom: 25px;
+}
+
+.gauge-card {
+  padding: 20px;
+  border-radius: $border-radius;
+  border: 1px solid;
+}
+
+// Gauge severity variants
+$gauge-variants: (
+  optimal: (bg: $bg-success, border: $border-success, text: $color-success-dark, segment: $border-success, marker: $color-success-bright, radius: 6px 0 0 6px),
+  moderate: (bg: $bg-warning, border: $border-warning, text: $color-warning-dark, segment: $border-warning, marker: $color-warning, radius: 0),
+  large: (bg: $bg-error, border: $border-error, text: $color-error-dark, segment: $border-error, marker: $color-error, radius: 0 6px 6px 0),
+);
+
+@each $name, $colors in $gauge-variants {
+  .gauge-card-#{$name} {
+    background: map-get($colors, bg);
+    border-color: map-get($colors, border);
+  }
+
+  .gauge-segment-#{$name} {
+    background: map-get($colors, segment);
+
+    @if map-get($colors, radius) !=0 {
+      border-radius: map-get($colors, radius);
+    }
+  }
+
+  .gauge-marker-#{$name} {
+    background: map-get($colors, marker);
+  }
+}
+
+.gauge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.gauge-zone {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.gauge-track {
+  height: 12px;
+  border-radius: 6px;
+  overflow: visible;
+  display: flex;
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.gauge-segment {
+  flex: 1;
+}
+
+.gauge-marker {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  margin-left: -10px;
+  z-index: 10;
+}
+
+.gauge-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: $color-text-muted;
+  margin-bottom: 10px;
+}
+
+.gauge-message {
+  margin: 0;
+}
+
+/* ====== Accordion ====== */
+.accordion-wrapper {
+  margin-bottom: 25px;
+}
+
+.accordion-item {
+  border: 1px solid;
+  border-radius: $border-radius;
+  margin-bottom: 12px;
+  overflow: hidden;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Accordion severity variants
+$accordion-variants: (
+  success: (bg: $bg-success, border: $border-success, icon: $color-success-bright, count-bg: $border-success, count-text: $color-success-dark),
+  warning: (bg: $bg-warning, border: $border-warning, icon: $color-warning, count-bg: $border-warning, count-text: $color-warning-dark),
+  error: (bg: $bg-error, border: $border-error, icon: $color-error, count-bg: $border-error, count-text: $color-error-dark),
+  info: (bg: $bg-info, border: $border-info, icon: $color-info, count-bg: $border-info, count-text: $color-info-darker),
+  default: (bg: #fff, border: $border-color, icon: $color-text-muted, count-bg: $bg-muted, count-text: $color-text-default),
+);
+
+@each $name, $colors in $accordion-variants {
+  .accordion-#{$name} {
+    border-color: map-get($colors, border);
+    background: map-get($colors, bg);
+
+    .accordion-status-icon {
+      color: map-get($colors, icon);
+    }
+
+    .accordion-count {
+      background: map-get($colors, count-bg);
+      color: map-get($colors, count-text);
+    }
+
+    .accordion-content {
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+}
+
+.accordion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+  // Button reset — element changed from <div> to <button> for keyboard accessibility
+  width: 100%;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4a90d9;
+    outline-offset: -2px;
+    border-radius: 4px;
+  }
+}
+
+.accordion-title-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.accordion-status-icon {
+  font-size: 16px;
+}
+
+.accordion-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  margin-left: 4px;
+}
+
+.accordion-chevron {
+  color: $color-text-muted;
+  font-size: 14px;
+  transition: transform 0.2s ease;
+}
+
+.accordion-content {
+  padding: 12px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 13px;
+
+  ul {
+    margin: 5px 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}
+
+/* ====== Missing Required Fields ====== */
+.missing-field-group {
+  margin-bottom: 16px;
+  background-color: $bg-error;
+  padding: 12px 16px;
+  border-radius: $border-radius;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ul {
+    margin: 4px 0 0 0;
+    padding-left: 20px;
+  }
+}
+
+.accordion-item.accordion-warning .missing-field-group {
+  background-color: $bg-warning;
+}

data/app/assets/stylesheets/bulkrax/stepper/_variables.scss

@@ -0,0 +1,46 @@
+// ---- Brand / Theme Colors ----
+$color-primary: #2b6da5;
+$color-success: #5cb85c;
+$color-success-bright: #28a745;
+$color-warning: #ffc107;
+$color-error: #dc3545;
+$color-info: #17a2b8;
+
+// ---- Text Colors ----
+$color-text-dark: #333;
+$color-text-muted: #595f64;
+$color-text-disabled: #6c757d;
+$color-text-default: #495057;
+
+// ---- Severity Dark Text ----
+$color-success-dark: #155724;
+$color-warning-dark: #856404;
+$color-error-dark: #721c24;
+$color-info-dark: #0c5460;
+$color-info-darker: #004085;
+
+// ---- Severity Backgrounds ----
+$bg-success: #d7e5d7;
+$bg-warning: #fff3cd;
+$bg-error: #f8d7da;
+$bg-info: #d1ecf1;
+
+// ---- Severity Borders ----
+$border-success: #c3e6cb;
+$border-warning: #ffeaa7;
+$border-error: #f5c6cb;
+$border-info: #b8daff;
+$border-info-light: #bee5eb;
+
+// ---- Neutral Colors ----
+$bg-light: #f8f9fa;
+$border-color: #dee2e6;
+$bg-muted: #e9ecef;
+$bg-primary-light: #e7f3ff;
+$bg-primary-hover: #d4e9ff;
+$bg-success-light: #e8f5e9;
+$bg-success-hover: #c8e6c9;
+$color-remove: #d33a35;
+
+// ---- Shared Dimensions ----
+$border-radius: 8px;

data/app/assets/stylesheets/bulkrax/stepper.scss

@@ -0,0 +1,32 @@
+/* Bulk Import Stepper Styles */
+
+@import 'stepper/variables';
+@import 'stepper/mixins';
+
+.bulk-import-stepper-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px 0;
+
+  .text-muted {
+    color: $color-text-muted !important;
+  }
+}
+
+.stepper-wrapper {
+  background: #fff;
+  border-radius: $border-radius;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  margin-bottom: 20px;
+}
+
+@import 'stepper/header';
+@import 'stepper/success';
+@import 'stepper/upload';
+@import 'stepper/validation';
+@import 'stepper/summary';
+@import 'stepper/settings';
+@import 'stepper/review';
+@import 'stepper/navigation';
+@import 'stepper/responsive';