@agorapulse/ui-theme 20.1.19 → 20.1.20

package/assets/style/css-ui/_selection-dropdown.scss

@@ -0,0 +1,183 @@
+// Agorapulse Selection Dropdown Styles
+@use 'mixins' as m;
+
+.ap-selection-dropdown {
+    display: flex;
+    flex-direction: column;
+    width: 370px;
+    max-height: 400px;
+    background: var(--ref-color-white);
+    border-radius: var(--sys-border-radius-sm);
+    box-shadow: var(--comp-action-dropdown-box-shadow);
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+// Header with title + optional action button
+.ap-selection-dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+    flex-shrink: 0;
+
+    > span {
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-md);
+        font-weight: var(--ref-font-weight-bold);
+        line-height: var(--sys-text-style-h3-line-height);
+        color: var(--ref-color-grey-100);
+    }
+}
+
+// Search bar
+.ap-selection-dropdown-search {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
+    border-bottom: 1px solid var(--ref-color-grey-10);
+
+    > i {
+        @include m.fixed-size(16px);
+        color: var(--ref-color-grey-40);
+        flex-shrink: 0;
+    }
+
+    > input {
+        flex: 1;
+        border: none;
+        outline: none;
+        font-family: var(--ref-font-family);
+        font-size: var(--sys-text-style-body-size);
+        line-height: var(--sys-text-style-body-line-height);
+        color: var(--ref-color-grey-100);
+        background: transparent;
+
+        &::placeholder {
+            color: var(--ref-color-grey-40);
+        }
+    }
+}
+
+// Scrollable items container
+.ap-selection-dropdown-items {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--ref-spacing-xxs) 0;
+    min-height: 0;
+}
+
+// Selected items section (pinned at top)
+.ap-selection-dropdown-selected {
+    margin-bottom: var(--ref-spacing-xxs);
+    border-bottom: 1px solid var(--ref-color-grey-10);
+    padding-bottom: var(--ref-spacing-xxs);
+
+    .ap-selection-dropdown-item > span {
+        font-weight: var(--ref-font-weight-bold);
+    }
+}
+
+// Individual item (button)
+.ap-selection-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    width: 100%;
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
+    min-height: 40px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: var(--ref-font-family);
+    font-size: var(--sys-text-style-body-size);
+    line-height: var(--sys-text-style-body-line-height);
+    color: var(--ref-color-grey-100);
+    text-align: left;
+    box-sizing: border-box;
+    transition: background-color 0.1s;
+
+    &:hover:not(:disabled):not(.locked) {
+        background: var(--ref-color-electric-blue-10);
+    }
+
+    &:active:not(:disabled):not(.locked) {
+        background: var(--ref-color-electric-blue-20);
+    }
+
+    &:focus-visible {
+        @include m.focus-ring;
+        outline-offset: -2px;
+    }
+
+    &:disabled {
+        pointer-events: none;
+        color: var(--ref-color-grey-40);
+    }
+
+    // Locked item
+    &.locked {
+        cursor: default;
+        color: var(--ref-color-grey-60);
+
+        > i.ap-icon-feature-lock {
+            margin-left: auto;
+            color: var(--ref-color-purple-100);
+            @include m.fixed-size(16px);
+        }
+    }
+
+    // Icon sizing
+    > i:not(.ap-icon-feature-lock) {
+        @include m.fixed-size(16px);
+        flex-shrink: 0;
+    }
+
+    // Text span
+    > span:not(.ap-badge) {
+        flex: 0 1 auto;
+        min-width: 0;
+        @include m.truncate;
+    }
+
+    // Badge
+    > .ap-badge {
+        flex: 0 0 auto;
+    }
+}
+
+// Group header
+.ap-selection-dropdown-group {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xs);
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
+    border-top: 1px solid var(--ref-color-grey-10);
+    background: var(--ref-color-grey-bg);
+    font-family: var(--ref-font-family);
+    font-size: var(--sys-text-style-body-size);
+    font-weight: var(--ref-font-weight-bold);
+    color: var(--ref-color-grey-100);
+}
+
+// Empty state
+.ap-selection-dropdown-empty {
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
+    font-family: var(--ref-font-family);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--sys-text-style-body-line-height);
+    color: var(--ref-color-grey-80);
+    font-style: italic;
+}
+
+// Footer with action buttons
+.ap-selection-dropdown-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 40px;
+    padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+    border-top: 1px solid var(--ref-color-grey-10);
+    flex-shrink: 0;
+}

package/assets/style/css-ui/_snackbar.scss

@@ -0,0 +1,166 @@
+// Agorapulse Snackbar Styles
+@use 'ui-symbol/icons/build/ap-icons-data' as icons;
+
+@keyframes ap-snackbar-slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes ap-snackbar-slide-out {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+// Snackbar thread container
+.ap-snackbar-thread {
+    position: fixed;
+    top: 68px;
+    right: var(--ref-spacing-lg);
+    width: var(--comp-snackbar-width);
+    z-index: 999999999;
+    gap: var(--comp-snackbar-spacing);
+    display: flex;
+    flex-direction: column;
+}
+
+// Individual snackbar
+.ap-snackbar {
+    display: flex;
+    align-items: center;
+    height: auto;
+    padding: var(--comp-snackbar-padding-vertical) var(--comp-snackbar-padding-horizontal);
+    box-sizing: border-box;
+    box-shadow: var(--comp-snackbar-shadow);
+    border-radius: var(--comp-snackbar-border-radius);
+    flex-direction: row;
+    justify-content: space-between;
+    gap: var(--comp-snackbar-spacing);
+
+    &.success {
+        background-color: var(--comp-snackbar-success-background-color);
+
+        .ap-snackbar-left > i {
+            color: var(--comp-snackbar-success-icon-color);
+            @include icons.icon('rounded-check');
+        }
+    }
+
+    &.error {
+        background-color: var(--comp-snackbar-error-background-color);
+
+        .ap-snackbar-left > i {
+            color: var(--comp-snackbar-error-icon-color);
+            @include icons.icon('error');
+        }
+    }
+
+    &.animate-in {
+        animation: ap-snackbar-slide-in 0.3s ease-out forwards;
+    }
+
+    &.animate-out {
+        animation: ap-snackbar-slide-out 0.3s ease-in forwards;
+    }
+}
+
+// Left side (icon + text)
+.ap-snackbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--comp-snackbar-spacing);
+    flex: 1;
+    min-width: 0;
+
+    // Snackbar icon — implicit > i
+    > i {
+        @include icons.icon-base;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    // Snackbar text — implicit > span
+    > span {
+        display: flex;
+        font-family: var(--comp-snackbar-text-style-font-family);
+        font-size: var(--comp-snackbar-text-style-size);
+        font-weight: var(--comp-snackbar-text-style-font-weight);
+        line-height: var(--comp-snackbar-text-style-line-height);
+        justify-content: flex-start;
+        align-items: center;
+        overflow-wrap: anywhere;
+        color: var(--comp-snackbar-text-color);
+    }
+}
+
+// Right side (actions)
+.ap-snackbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--comp-snackbar-spacing);
+    flex-shrink: 0;
+
+    // Action link — implicit > a
+    > a {
+        width: max-content;
+        font-family: var(--comp-snackbar-text-style-font-family);
+        font-size: var(--comp-snackbar-text-style-size);
+        font-weight: var(--ref-font-weight-semibold);
+        line-height: var(--comp-snackbar-text-style-line-height);
+        color: var(--ref-color-electric-blue-100);
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    // Close button — implicit > button
+    > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        color: var(--ref-color-grey-60);
+        border-radius: 50%;
+        transition: background-color 0.15s;
+
+        &:hover {
+            background: var(--ref-color-grey-10);
+            color: var(--ref-color-grey-80);
+        }
+
+        > i {
+            @include icons.icon-base;
+            @include icons.icon('close');
+            width: 12px;
+            height: 12px;
+        }
+    }
+}

package/assets/style/css-ui/_split-button.scss

@@ -0,0 +1,79 @@
+// Agorapulse Split Button Styles
+@use 'mixins' as m;
+@use '../button-mixins' as btn;
+
+.ap-split-button {
+    display: inline-flex;
+    gap: 1px;
+    position: relative;
+
+    > button {
+        border: none;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--comp-split-button-spacing);
+        padding: var(--comp-split-button-padding-horizontal) var(--comp-split-button-padding-vertical);
+        max-height: var(--comp-button-height);
+        min-height: var(--comp-button-height);
+        font-size: var(--comp-split-button-text-size);
+        font-family: var(--comp-split-button-text-font-family);
+        line-height: var(--comp-split-button-text-line-height);
+        font-weight: var(--comp-split-button-text-weight);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+
+        &:disabled {
+            pointer-events: none;
+        }
+
+        &:focus:not(:disabled):not(:active) {
+            @include m.focus-ring;
+            z-index: 10;
+        }
+
+        > i {
+            @include m.fixed-size(16px);
+            flex-shrink: 0;
+        }
+
+        &:first-child {
+            border-radius: var(--comp-split-button-border-radius) 0 0 var(--comp-split-button-border-radius);
+        }
+
+        &:last-child {
+            border-radius: 0 var(--comp-split-button-border-radius) var(--comp-split-button-border-radius) 0;
+            padding: var(--comp-split-button-padding-horizontal) 10px;
+
+            > i {
+                will-change: transform;
+                transition: transform 0.2s ease-in-out;
+            }
+
+            &.open > i {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    // Icon position: inverse puts icon on left side of main button
+    &.inverse > button:first-child {
+        flex-direction: row-reverse;
+    }
+
+    // Primary color variants
+    &.primary > button {
+        color: var(--ref-color-white);
+    }
+
+    &.primary.orange > button {
+        @include btn.btn-primary-color('orange');
+    }
+
+    &.primary.blue > button {
+        @include btn.btn-primary-color('electric-blue');
+    }
+}

package/assets/style/css-ui/_status.scss

@@ -0,0 +1,71 @@
+// Agorapulse Status Styles
+@use 'mixins' as m;
+
+.ap-status {
+    --dot-size: 8px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--comp-status-padding-horizontal);
+    gap: var(--comp-status-spacing);
+    width: fit-content;
+    height: var(--comp-status-height);
+    border-radius: var(--comp-status-height);
+    color: var(--comp-status-color);
+    font-family: var(--comp-status-font-family);
+    font-size: var(--comp-status-font-size);
+    line-height: var(--comp-status-line-height);
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    // Dot — shown by default via ::before (matches Angular where dot=true is default)
+    // Add .no-dot to hide it
+    &::before {
+        content: '';
+        display: flex;
+        @include m.fixed-size(var(--dot-size));
+        border-radius: 100%;
+        flex-shrink: 0;
+    }
+
+    &.no-dot::before {
+        display: none;
+    }
+
+    &.blue {
+        background-color: var(--comp-status-blue-background-color);
+
+        &::before { background-color: var(--comp-status-blue-dot-background-color); }
+    }
+
+    &.green {
+        background-color: var(--comp-status-green-background-color);
+
+        &::before { background-color: var(--comp-status-green-dot-background-color); }
+    }
+
+    &.orange {
+        background-color: var(--comp-status-orange-background-color);
+
+        &::before { background-color: var(--comp-status-orange-dot-background-color); }
+    }
+
+    &.tagOrange {
+        background-color: var(--comp-status-tag-orange-background-color);
+
+        &::before { background-color: var(--comp-status-tag-orange-dot-background-color); }
+    }
+
+    &.grey {
+        background-color: var(--comp-status-grey-background-color);
+
+        &::before { background-color: var(--comp-status-grey-dot-background-color); }
+    }
+
+    &.red {
+        background-color: var(--comp-status-red-background-color);
+
+        &::before { background-color: var(--comp-status-red-dot-background-color); }
+    }
+}

package/assets/style/css-ui/_stepper.scss

@@ -0,0 +1,127 @@
+// Agorapulse Stepper Styles
+
+.ap-stepper {
+    display: flex;
+    align-items: flex-start;
+
+    // Vertical variant
+    &.vertical {
+        flex-direction: column;
+        gap: var(--ref-spacing-sm);
+
+        .ap-stepper-item {
+            flex-direction: row;
+        }
+
+        .ap-stepper-separator {
+            display: none;
+        }
+    }
+
+    // With line connector
+    &.with-line .ap-stepper-item {
+        position: relative;
+
+        &:not(:last-child)::after {
+            content: '';
+            position: absolute;
+            left: 12px;
+            top: 28px;
+            width: 1px;
+            height: calc(100% - 4px);
+            background-color: var(--ref-color-grey-20);
+        }
+
+        &.completed:not(:last-child)::after {
+            background-color: var(--ref-color-electric-blue-100);
+        }
+    }
+}
+
+// Stepper item — state modifiers on this element
+.ap-stepper-item {
+    display: flex;
+    align-items: center;
+    height: fit-content;
+
+    // Step number circle — implicit > span:first-child
+    > span:first-child {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        min-width: 24px;
+        border-radius: 24px;
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-sm);
+        font-weight: var(--ref-font-weight-regular);
+        line-height: 24px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+
+    // Step text label — implicit > span:last-child
+    > span:last-child {
+        padding-left: var(--ref-spacing-xs);
+        height: fit-content;
+        margin: auto;
+        line-height: 24px;
+        vertical-align: middle;
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-sm);
+        color: var(--ref-color-grey-100);
+    }
+
+    // Active state
+    &.active {
+        > span:first-child {
+            background-color: var(--ref-color-electric-blue-100);
+            color: var(--ref-color-white);
+            box-shadow: 0 0 0 1.5px var(--ref-color-electric-blue-10);
+            border: 1.5px solid var(--ref-color-electric-blue-10);
+            line-height: 21px;
+        }
+
+        > span:last-child {
+            font-weight: var(--ref-font-weight-bold);
+        }
+    }
+
+    // Completed state
+    &.completed > span:first-child {
+        background-color: var(--ref-color-electric-blue-10);
+        color: var(--ref-color-electric-blue-100);
+    }
+
+    // Pending state
+    &.pending > span:first-child {
+        background-color: transparent;
+        color: var(--ref-color-electric-blue-100);
+        border: 1px solid var(--ref-color-electric-blue-10);
+        line-height: 22px;
+    }
+
+    // Clickable step (completed steps that can be navigated to)
+    &.clickable > span:last-child {
+        cursor: pointer;
+
+        &:hover {
+            color: var(--ref-color-electric-blue-100);
+        }
+    }
+}
+
+// Separator between steps
+.ap-stepper-separator {
+    display: inline-flex;
+    align-items: center;
+    margin: auto 10px;
+    color: var(--ref-color-grey-60);
+
+    // Separator icon — implicit > i
+    > i {
+        width: 16px;
+        height: 16px;
+    }
+}