softui-css 1.0.8 → 1.2.0

package/dist/softui.css

@@ -1719,8 +1719,8 @@ a.sui-btn-warning:visited {
   transform: scaleX(1);
 }
 
-.sui-tab-list-underlined + .sui-tab-panel > .sui-card:only-child,
-.sui-tab-list-underlined ~ .sui-tab-panel > .sui-card:only-child {
+.sui-tab-list-underlined + .sui-tab-panel > .sui-card:only-child.sui-tab-flush,
+.sui-tab-list-underlined ~ .sui-tab-panel > .sui-card:only-child.sui-tab-flush {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -7828,3 +7828,844 @@ a.sui-btn-warning:visited {
     width: 100%;
   }
 }
+
+/* ===========================================
+   Sidebar
+   =========================================== */
+.sui-sidebar {
+  --sui-sidebar-width: 260px;
+  width: var(--sui-sidebar-width);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--sui-bg);
+  box-shadow: var(--sui-shadow);
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+/* --- Sticky behaviour --- */
+.sui-sidebar-sticky {
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100vh;
+}
+
+/* Offset for a fixed navbar above */
+.sui-sidebar-sticky.sui-sidebar-nav-offset {
+  top: 56px;
+  height: calc(100vh - 56px);
+}
+
+/* --- Header / Content / Footer --- */
+.sui-sidebar-header {
+  flex-shrink: 0;
+  padding: 20px 16px 12px;
+}
+
+.sui-sidebar-header-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sui-sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  font-weight: 700;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sui-sidebar-content {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.sui-sidebar-header + .sui-sidebar-divider + .sui-sidebar-content,
+.sui-sidebar-header + .sui-sidebar-content {
+  padding-top: 4px;
+}
+
+.sui-sidebar-footer {
+  flex-shrink: 0;
+  padding: 12px 16px 20px;
+  margin-top: auto;
+}
+
+/* --- Groups --- */
+.sui-sidebar-group {
+  margin-bottom: 8px;
+}
+
+.sui-sidebar-group-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--sui-text-muted);
+  padding: 8px 12px 4px;
+  margin: 0;
+}
+
+/* --- Nav list --- */
+.sui-sidebar-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sui-sidebar-nav li a,
+.sui-sidebar-nav li button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  background: none;
+  border-radius: var(--sui-radius-sm);
+  color: var(--sui-text-muted);
+  text-decoration: none;
+  font-family: var(--sui-font);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--sui-transition);
+}
+
+.sui-sidebar-nav li a:hover,
+.sui-sidebar-nav li button:hover {
+  background: rgba(91, 84, 224, 0.06);
+  color: var(--sui-text);
+}
+
+.sui-sidebar-nav li a.active,
+.sui-sidebar-nav li button.active {
+  background: rgba(91, 84, 224, 0.1);
+  color: var(--sui-primary);
+  font-weight: 600;
+  box-shadow: var(--sui-shadow-inset-sm);
+}
+
+[data-theme="dark"] .sui-sidebar-nav li a:hover,
+[data-theme="dark"] .sui-sidebar-nav li button:hover {
+  background: rgba(124, 107, 255, 0.1);
+}
+
+[data-theme="dark"] .sui-sidebar-nav li a.active,
+[data-theme="dark"] .sui-sidebar-nav li button.active {
+  background: rgba(124, 107, 255, 0.15);
+}
+
+/* Nav item icon */
+.sui-sidebar-nav li svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.sui-sidebar-nav li a.active svg,
+.sui-sidebar-nav li button.active svg {
+  opacity: 1;
+}
+
+/* Nav item badge (right-aligned) */
+.sui-sidebar-nav li .sui-sidebar-badge {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--sui-radius-full);
+  background: rgba(91, 84, 224, 0.1);
+  color: var(--sui-primary);
+}
+
+/* --- Divider --- */
+.sui-sidebar-divider {
+  height: 1px;
+  background: var(--sui-bg-dark);
+  margin: 8px 12px;
+  border: none;
+}
+
+/* --- Width variants --- */
+.sui-sidebar-sm {
+  --sui-sidebar-width: 200px;
+}
+
+.sui-sidebar-lg {
+  --sui-sidebar-width: 300px;
+}
+
+/* --- Border variant (no shadow) --- */
+.sui-sidebar-bordered {
+  box-shadow: none;
+  border-right: 1px solid var(--sui-bg-dark);
+}
+
+/* --- Inset variant (flat, blends with page) --- */
+.sui-sidebar-inset {
+  box-shadow: none;
+  background: transparent;
+}
+
+/* --- Compact variant (docs-style, tighter spacing) --- */
+.sui-sidebar-compact {
+  --sui-sidebar-width: 220px;
+}
+
+.sui-sidebar-compact .sui-sidebar-content {
+  padding: 12px 10px;
+}
+
+.sui-sidebar-compact .sui-sidebar-group-label {
+  font-size: 10px;
+  padding: 12px 12px 4px;
+  color: var(--sui-text-light);
+}
+
+.sui-sidebar-compact .sui-sidebar-group-label:first-child {
+  padding-top: 0;
+}
+
+.sui-sidebar-compact .sui-sidebar-nav li a,
+.sui-sidebar-compact .sui-sidebar-nav li button {
+  padding: 7px 12px;
+  font-size: 13px;
+  border-radius: var(--sui-radius-xs);
+}
+
+.sui-sidebar-compact .sui-sidebar-nav li a.active,
+.sui-sidebar-compact .sui-sidebar-nav li button.active {
+  box-shadow: none;
+}
+
+/* --- Collapsed (icon-only) --- */
+.sui-sidebar-collapsed {
+  --sui-sidebar-width: 64px;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-header,
+.sui-sidebar-collapsed .sui-sidebar-content,
+.sui-sidebar-collapsed .sui-sidebar-footer {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-group-label,
+.sui-sidebar-collapsed .sui-sidebar-badge,
+.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
+  display: none;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-nav li a,
+.sui-sidebar-collapsed .sui-sidebar-nav li button {
+  justify-content: center;
+  padding: 10px;
+  gap: 0;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-nav li svg {
+  width: 20px;
+  height: 20px;
+  opacity: 0.85;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-divider {
+  margin: 8px 4px;
+}
+
+/* --- Collapsible (animated collapse/expand) --- */
+.sui-sidebar-collapsible {
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sui-sidebar-collapsible .sui-sidebar-header,
+.sui-sidebar-collapsible .sui-sidebar-content,
+.sui-sidebar-collapsible .sui-sidebar-footer {
+  transition: padding 0.25s ease;
+}
+
+.sui-sidebar-collapsible .sui-sidebar-nav li a,
+.sui-sidebar-collapsible .sui-sidebar-nav li button {
+  transition: padding 0.25s ease, gap 0.25s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.sui-sidebar-collapsible .sui-sidebar-group-label {
+  transition: opacity 0.15s ease, max-height 0.25s ease, margin 0.25s ease;
+  max-height: 30px;
+  overflow: hidden;
+}
+
+.sui-sidebar-collapsible .sui-sidebar-nav li span:not(.sui-sidebar-icon),
+.sui-sidebar-collapsible .sui-sidebar-badge {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 180px;
+  transition: opacity 0.15s ease, max-width 0.25s ease, padding 0.25s ease, margin 0.25s ease;
+}
+
+.sui-sidebar-collapsible .sui-sidebar-header span,
+.sui-sidebar-collapsible .sui-sidebar-footer span {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 180px;
+  transition: opacity 0.15s ease, max-width 0.25s ease;
+}
+
+.sui-sidebar-collapsible .sui-sidebar-divider {
+  transition: margin 0.25s ease;
+}
+
+/* Override static display:none for collapsible — use animated properties instead */
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-group-label {
+  display: block;
+  opacity: 0;
+  max-height: 0;
+  margin: 0;
+}
+
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-badge,
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-nav li span:not(.sui-sidebar-icon) {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header span,
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer span {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header > *:not(.sui-sidebar-toggle) {
+  display: none;
+}
+
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-header {
+  display: flex;
+  justify-content: center;
+}
+
+.sui-sidebar-collapsible.sui-sidebar-collapsed .sui-sidebar-footer {
+  display: flex;
+  justify-content: center;
+}
+
+/* Toggle button */
+.sui-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--sui-bg-dark);
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-xs);
+  cursor: pointer;
+  color: var(--sui-text-muted);
+  transition: var(--sui-transition);
+  flex-shrink: 0;
+}
+
+.sui-sidebar-toggle:hover {
+  color: var(--sui-text);
+  border-color: var(--sui-primary);
+}
+
+.sui-sidebar-toggle svg {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.25s ease;
+}
+
+.sui-sidebar-collapsed .sui-sidebar-toggle svg {
+  transform: rotate(180deg);
+}
+
+/* --- Trigger button --- */
+.sui-sidebar-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--sui-bg-dark);
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-xs);
+  cursor: pointer;
+  color: var(--sui-text-muted);
+  transition: var(--sui-transition);
+}
+
+.sui-sidebar-trigger:hover {
+  color: var(--sui-text);
+  border-color: var(--sui-primary);
+}
+
+/* --- Responsive --- */
+@media (max-width: 900px) {
+  .sui-sidebar {
+    display: none;
+  }
+
+  .sui-sidebar.sui-sidebar-mobile-open {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: 100vh;
+    z-index: 200;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* Sidebar overlay for mobile */
+.sui-sidebar-overlay {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .sui-sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 199;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+  }
+
+  .sui-sidebar-overlay.open {
+    display: block;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* ===========================================
+   Timeline
+   =========================================== */
+.sui-timeline {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  position: relative;
+}
+
+.sui-timeline-item {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  min-height: 70px;
+}
+
+.sui-timeline-item:last-child .sui-timeline-connector {
+  display: none;
+}
+
+/* --- Separator (dot + connector column) --- */
+.sui-timeline-separator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  margin-right: 20px;
+}
+
+/* --- Dot --- */
+.sui-timeline-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--sui-bg-dark);
+  box-shadow: var(--sui-shadow-raised-sm);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  transition: var(--sui-transition);
+}
+
+/* Inset dot */
+.sui-timeline-dot-inset {
+  background: var(--sui-bg);
+  box-shadow: var(--sui-shadow-inset-sm);
+}
+
+.sui-timeline-dot-inset.sui-timeline-dot-primary { background: rgba(91, 84, 224, 0.15); box-shadow: var(--sui-shadow-inset-sm); }
+.sui-timeline-dot-inset.sui-timeline-dot-success { background: rgba(45, 206, 137, 0.15); box-shadow: var(--sui-shadow-inset-sm); }
+.sui-timeline-dot-inset.sui-timeline-dot-danger { background: rgba(231, 76, 111, 0.15); box-shadow: var(--sui-shadow-inset-sm); }
+.sui-timeline-dot-inset.sui-timeline-dot-warning { background: rgba(245, 166, 35, 0.15); box-shadow: var(--sui-shadow-inset-sm); }
+.sui-timeline-dot-inset.sui-timeline-dot-info { background: rgba(54, 163, 247, 0.15); box-shadow: var(--sui-shadow-inset-sm); }
+
+/* --- Connector --- */
+.sui-timeline-connector {
+  width: 2px;
+  flex: 1;
+  min-height: 24px;
+  background: var(--sui-bg-dark);
+  box-shadow: var(--sui-shadow-inset-sm);
+  border-radius: 1px;
+  margin: 4px 0;
+}
+
+/* --- Content --- */
+.sui-timeline-content {
+  flex: 1;
+  padding-bottom: 24px;
+  min-width: 0;
+}
+
+.sui-timeline-content h6 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--sui-text);
+  margin: -2px 0 4px;
+  line-height: 1.3;
+}
+
+.sui-timeline-content p {
+  font-size: 13px;
+  color: var(--sui-text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* --- Opposite content --- */
+.sui-timeline-opposite {
+  flex: 1;
+  text-align: right;
+  padding-right: 20px;
+  padding-bottom: 24px;
+  font-size: 13px;
+  color: var(--sui-text-muted);
+  min-width: 0;
+}
+
+/* ===========================================
+   Timeline — Right Aligned
+   =========================================== */
+.sui-timeline-right .sui-timeline-item {
+  flex-direction: row-reverse;
+}
+
+.sui-timeline-right .sui-timeline-separator {
+  margin-right: 0;
+  margin-left: 20px;
+}
+
+.sui-timeline-right .sui-timeline-content {
+  text-align: right;
+}
+
+/* ===========================================
+   Timeline — Alternating
+   =========================================== */
+.sui-timeline-alternate .sui-timeline-separator {
+  margin: 0 20px;
+}
+
+.sui-timeline-alternate .sui-timeline-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sui-timeline-alternate .sui-timeline-opposite {
+  flex: 1;
+  min-width: 0;
+  padding-right: 0;
+}
+
+/* Odd items: opposite left, content right */
+.sui-timeline-alternate .sui-timeline-item .sui-timeline-opposite {
+  text-align: right;
+}
+
+.sui-timeline-alternate .sui-timeline-item .sui-timeline-content {
+  text-align: left;
+}
+
+/* Even items: flip to content on left */
+.sui-timeline-alternate .sui-timeline-item:nth-child(even) {
+  flex-direction: row-reverse;
+}
+
+.sui-timeline-alternate .sui-timeline-item:nth-child(even) .sui-timeline-opposite {
+  text-align: left;
+}
+
+.sui-timeline-alternate .sui-timeline-item:nth-child(even) .sui-timeline-content {
+  text-align: right;
+}
+
+/* When no opposite div exists, use pseudo spacer */
+.sui-timeline-alternate .sui-timeline-item::before {
+  content: '';
+  flex: 1;
+}
+
+.sui-timeline-alternate .sui-timeline-item:has(.sui-timeline-opposite)::before {
+  display: none;
+}
+
+.sui-timeline-alternate .sui-timeline-item:nth-child(even):not(:has(.sui-timeline-opposite)) .sui-timeline-content {
+  text-align: right;
+}
+
+/* ===========================================
+   Timeline — Colored Dots
+   =========================================== */
+.sui-timeline-dot-primary {
+  background: var(--sui-primary);
+  box-shadow: 3px 3px 8px rgba(91, 84, 224, 0.4), -3px -3px 8px var(--sui-shadow-light);
+}
+
+.sui-timeline-dot-success {
+  background: var(--sui-success);
+  box-shadow: 3px 3px 8px rgba(45, 206, 137, 0.3), -3px -3px 8px var(--sui-shadow-light);
+}
+
+.sui-timeline-dot-danger {
+  background: var(--sui-danger);
+  box-shadow: 3px 3px 8px rgba(231, 76, 111, 0.3), -3px -3px 8px var(--sui-shadow-light);
+}
+
+.sui-timeline-dot-warning {
+  background: var(--sui-warning);
+  box-shadow: 3px 3px 8px rgba(245, 166, 35, 0.3), -3px -3px 8px var(--sui-shadow-light);
+}
+
+.sui-timeline-dot-info {
+  background: var(--sui-info);
+  box-shadow: 3px 3px 8px rgba(54, 163, 247, 0.3), -3px -3px 8px var(--sui-shadow-light);
+}
+
+/* ===========================================
+   Timeline — Outlined Dots
+   =========================================== */
+.sui-timeline-dot-outline {
+  background: transparent;
+  box-shadow: none;
+  border: 2px solid var(--sui-bg-dark);
+}
+
+.sui-timeline-dot-outline.sui-timeline-dot-primary {
+  border-color: var(--sui-primary);
+  background: transparent;
+  box-shadow: none;
+}
+
+.sui-timeline-dot-outline.sui-timeline-dot-success {
+  border-color: var(--sui-success);
+  background: transparent;
+  box-shadow: none;
+}
+
+.sui-timeline-dot-outline.sui-timeline-dot-danger {
+  border-color: var(--sui-danger);
+  background: transparent;
+  box-shadow: none;
+}
+
+.sui-timeline-dot-outline.sui-timeline-dot-warning {
+  border-color: var(--sui-warning);
+  background: transparent;
+  box-shadow: none;
+}
+
+.sui-timeline-dot-outline.sui-timeline-dot-info {
+  border-color: var(--sui-info);
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ===========================================
+   Timeline — Icon Dots
+   =========================================== */
+.sui-timeline-dot-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sui-bg);
+  box-shadow: var(--sui-shadow-raised-sm);
+}
+
+.sui-timeline-dot-icon svg {
+  width: 18px;
+  height: 18px;
+  stroke: var(--sui-text-muted);
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.sui-timeline-dot-icon.sui-timeline-dot-primary {
+  background: var(--sui-primary);
+}
+.sui-timeline-dot-icon.sui-timeline-dot-primary svg { stroke: #fff; }
+
+.sui-timeline-dot-icon.sui-timeline-dot-success {
+  background: var(--sui-success);
+}
+.sui-timeline-dot-icon.sui-timeline-dot-success svg { stroke: #fff; }
+
+.sui-timeline-dot-icon.sui-timeline-dot-danger {
+  background: var(--sui-danger);
+}
+.sui-timeline-dot-icon.sui-timeline-dot-danger svg { stroke: #fff; }
+
+.sui-timeline-dot-icon.sui-timeline-dot-warning {
+  background: var(--sui-warning);
+}
+.sui-timeline-dot-icon.sui-timeline-dot-warning svg { stroke: #fff; }
+
+.sui-timeline-dot-icon.sui-timeline-dot-info {
+  background: var(--sui-info);
+}
+.sui-timeline-dot-icon.sui-timeline-dot-info svg { stroke: #fff; }
+
+/* Outlined icon dots */
+.sui-timeline-dot-icon.sui-timeline-dot-outline {
+  background: transparent;
+  box-shadow: none;
+  border: 2px solid var(--sui-bg-dark);
+}
+
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-primary {
+  border-color: var(--sui-primary);
+  background: transparent;
+  box-shadow: none;
+}
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-primary svg { stroke: var(--sui-primary); }
+
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-success {
+  border-color: var(--sui-success);
+  background: transparent;
+  box-shadow: none;
+}
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-success svg { stroke: var(--sui-success); }
+
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-danger {
+  border-color: var(--sui-danger);
+  background: transparent;
+  box-shadow: none;
+}
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-danger svg { stroke: var(--sui-danger); }
+
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-warning {
+  border-color: var(--sui-warning);
+  background: transparent;
+  box-shadow: none;
+}
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-warning svg { stroke: var(--sui-warning); }
+
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-info {
+  border-color: var(--sui-info);
+  background: transparent;
+  box-shadow: none;
+}
+.sui-timeline-dot-icon.sui-timeline-dot-outline.sui-timeline-dot-info svg { stroke: var(--sui-info); }
+
+/* Adjust content alignment for icon dots */
+.sui-timeline-item:has(.sui-timeline-dot-icon) .sui-timeline-content h6 {
+  margin-top: 7px;
+}
+.sui-timeline-item:has(.sui-timeline-dot-icon) .sui-timeline-opposite {
+  padding-top: 8px;
+}
+
+/* ===========================================
+   Timeline — Compact
+   =========================================== */
+.sui-timeline-compact .sui-timeline-item {
+  min-height: 48px;
+}
+
+.sui-timeline-compact .sui-timeline-dot {
+  width: 10px;
+  height: 10px;
+}
+
+.sui-timeline-compact .sui-timeline-dot-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.sui-timeline-compact .sui-timeline-dot-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sui-timeline-compact .sui-timeline-connector {
+  min-height: 16px;
+  margin: 4px 0;
+}
+
+.sui-timeline-compact .sui-timeline-content {
+  padding-bottom: 14px;
+}
+
+.sui-timeline-compact .sui-timeline-content h6 {
+  font-size: 13px;
+}
+
+.sui-timeline-compact .sui-timeline-content p {
+  font-size: 12px;
+}
+
+.sui-timeline-compact .sui-timeline-opposite {
+  padding-bottom: 14px;
+  font-size: 12px;
+}
+
+.sui-timeline-compact .sui-timeline-separator {
+  margin-right: 14px;
+}
+
+/* ===========================================
+   Timeline — Responsive
+   =========================================== */
+@media (max-width: 600px) {
+  .sui-timeline-alternate .sui-timeline-item,
+  .sui-timeline-alternate .sui-timeline-item:nth-child(even) {
+    flex-direction: row;
+  }
+
+  .sui-timeline-alternate .sui-timeline-item::before {
+    display: none;
+  }
+
+  .sui-timeline-alternate .sui-timeline-separator {
+    margin: 0 16px 0 0;
+  }
+
+  .sui-timeline-alternate .sui-timeline-content,
+  .sui-timeline-alternate .sui-timeline-item:nth-child(even) .sui-timeline-content {
+    text-align: left;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .sui-timeline-alternate .sui-timeline-opposite,
+  .sui-timeline-alternate .sui-timeline-item:nth-child(even) .sui-timeline-opposite {
+    display: none;
+  }
+}