@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -0,0 +1,325 @@
+// Agorapulse Table Styles
+// Uses semantic HTML selectors — no classes needed on <th>, <td>, <tr>
+
+.ap-table {
+    --ap-table-cell-height: 52px;
+    --ap-table-cell-height-small: 40px;
+
+    width: 100%;
+    overflow-x: auto;
+    font-family: var(--ref-font-family);
+    border-radius: var(--ref-border-radius-md);
+    border-collapse: separate;
+    border-spacing: 0;
+    background-color: var(--ref-color-white);
+
+    tbody {
+        height: calc(100% - var(--ap-table-cell-height));
+        max-height: calc(100% - var(--ap-table-cell-height));
+        width: 100%;
+        overflow-y: auto;
+        border-radius: var(--ref-border-radius-md);
+    }
+
+    // Scrollable table
+    &.scrollable {
+        display: block;
+        table-layout: fixed;
+
+        tbody {
+            display: block;
+        }
+
+        thead,
+        tbody tr,
+        tfoot {
+            display: table;
+            width: 100%;
+            table-layout: fixed;
+        }
+    }
+
+    // Outer border variant
+    &.outer-border {
+        border: 1px solid var(--ref-color-grey-20);
+    }
+
+    // Header background variant
+    &.header-background th {
+        background-color: var(--ref-color-grey-05);
+    }
+
+    // Striped variant
+    &.striped tbody {
+        tr:nth-child(even) {
+            background-color: var(--ref-color-grey-bg);
+        }
+
+        tr.selected {
+            background-color: var(--ref-color-soft-blue-10);
+        }
+    }
+
+    // Small variant
+    &.small {
+        th,
+        td {
+            height: var(--ap-table-cell-height-small);
+        }
+
+        tbody {
+            height: calc(100% - var(--ap-table-cell-height-small));
+            max-height: calc(100% - var(--ap-table-cell-height-small));
+        }
+
+        th.checkbox,
+        td.checkbox {
+            width: 36px;
+        }
+
+        th.drag,
+        td.drag {
+            width: 36px;
+        }
+    }
+
+    // Border radius for last row when no footer
+    &:not(:has(tfoot)) tbody tr:last-child {
+        td:first-child {
+            border-bottom-left-radius: var(--ref-border-radius-md);
+        }
+
+        td:last-child {
+            border-bottom-right-radius: var(--ref-border-radius-md);
+        }
+    }
+
+    // === Row styles — implicit tr ===
+    tbody tr {
+        background-color: var(--ref-color-white);
+
+        &.selected {
+            background-color: var(--ref-color-soft-blue-10);
+        }
+
+        &:last-child td {
+            border-bottom: none;
+        }
+    }
+
+    // === Header cells — implicit th ===
+    th {
+        height: var(--ap-table-cell-height);
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+        text-align: left;
+        font-size: var(--ref-font-size-xs);
+        font-weight: var(--ref-font-weight-bold);
+        color: var(--ref-color-grey-100);
+        border: none;
+        border-bottom: 1px solid var(--ref-color-grey-10);
+        background-color: var(--ref-color-white);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &:first-child {
+            border-top-left-radius: var(--ref-border-radius-md);
+        }
+
+        &:last-child {
+            border-top-right-radius: var(--ref-border-radius-md);
+        }
+
+        &.right {
+            text-align: right;
+        }
+
+        &.sortable {
+            cursor: pointer;
+
+            > i {
+                opacity: 0;
+                transition: opacity 0.15s ease;
+            }
+
+            &:hover > i {
+                opacity: 1;
+            }
+        }
+
+        &.sorted {
+            color: var(--ref-color-electric-blue-150);
+
+            > i {
+                opacity: 1;
+            }
+        }
+
+        &.checkbox {
+            width: 40px;
+            padding: 0;
+            text-align: center;
+        }
+
+        &.drag {
+            width: 40px;
+            padding: 0;
+            text-align: center;
+        }
+
+        // Header content — implicit > div
+        > div {
+            display: flex;
+            align-items: center;
+            gap: var(--ref-spacing-xxxs);
+        }
+
+        // Sort icon — implicit > i
+        > i {
+            width: 12px;
+            height: 12px;
+            flex-shrink: 0;
+        }
+    }
+
+    // === Body cells — implicit td ===
+    td {
+        padding: 0 var(--ref-spacing-xs);
+        font-size: var(--ref-font-size-sm);
+        color: var(--ref-color-grey-100);
+        border: none;
+        border-bottom: 1px solid var(--ref-color-grey-10);
+        height: var(--ap-table-cell-height);
+        vertical-align: middle;
+        font-family: var(--ref-font-family);
+
+        &.right {
+            text-align: right;
+
+            .ap-table-cell-content {
+                justify-content: flex-end;
+            }
+        }
+
+        &.checkbox {
+            width: 40px;
+            padding: 0;
+            text-align: center;
+        }
+
+        &.drag {
+            width: 40px;
+            padding: 0;
+            text-align: center;
+        }
+    }
+
+    // === Footer cells — implicit tfoot td ===
+    tfoot td {
+        padding: 0 var(--ref-spacing-xs);
+        font-size: var(--ref-font-size-sm);
+        color: var(--ref-color-grey-100);
+        border: none;
+        border-top: 1px solid var(--ref-color-grey-10);
+        height: var(--ap-table-cell-height);
+        vertical-align: middle;
+        font-family: var(--ref-font-family);
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+        background-color: var(--ref-color-white);
+
+        &.right {
+            text-align: right;
+
+            .ap-table-cell-content {
+                justify-content: flex-end;
+            }
+        }
+
+        &:first-child {
+            border-bottom-left-radius: var(--ref-border-radius-md);
+        }
+
+        &:last-child {
+            border-bottom-right-radius: var(--ref-border-radius-md);
+        }
+    }
+}
+
+// Cell content
+.ap-table-cell-content {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+
+    &.items {
+        flex-wrap: wrap;
+        gap: var(--ref-spacing-xxxs);
+        padding: var(--ref-spacing-xxs) 0;
+    }
+}
+
+// Cell text container
+.ap-table-cell-text-container {
+    display: flex;
+    flex-direction: column;
+}
+
+// Cell text
+.ap-table-cell-text {
+    color: var(--ref-color-grey-100);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--ref-line-height-sm);
+
+    &.bold {
+        font-weight: var(--ref-font-weight-bold);
+    }
+}
+
+// Cell description
+.ap-table-cell-description {
+    color: var(--ref-color-grey-80);
+    font-size: var(--ref-font-size-xs);
+    line-height: var(--ref-line-height-xs);
+}
+
+// Cell actions
+.ap-table-cell-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ref-spacing-xxxs);
+}
+
+// Drag handle
+.ap-table-drag-handle {
+    cursor: move;
+    color: var(--ref-color-grey-40);
+}
+
+// Empty state
+.ap-table-empty {
+    padding: var(--ref-spacing-xl);
+    text-align: center;
+    color: var(--ref-color-grey-60);
+    font-size: var(--ref-font-size-sm);
+}
+
+// Loading state
+.ap-table-loading {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 255, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

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

@@ -0,0 +1,182 @@
+// Agorapulse Tabs Styles
+
+.ap-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    // Full width tabs
+    &.full-width .ap-tabs-tab {
+        flex: 1;
+    }
+}
+
+// Tabs navigation bar
+.ap-tabs-nav {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--comp-tabs-border-color);
+    position: relative;
+
+    // Scrollable tabs
+    &.scrollable {
+        overflow-x: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}
+
+// Individual tab button — flat structure, no wrappers needed
+.ap-tabs-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--comp-tabs-tab-header-gap);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-family: var(--comp-tabs-text-font-family);
+    text-align: center;
+    position: relative;
+    white-space: nowrap;
+    padding: var(--comp-tabs-tab-padding);
+    font-size: var(--comp-tabs-tab-font-size);
+    line-height: var(--comp-tabs-tab-line-height);
+    min-height: var(--comp-tabs-tab-min-height);
+    color: var(--comp-tabs-tab-text-color-default);
+    font-weight: var(--ref-font-weight-regular);
+
+    // Icon — implicit > i
+    > i {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    // Hover state
+    &:hover:not(:disabled):not(.active) {
+        background-color: var(--comp-tabs-tab-hover-background-color);
+    }
+
+    // Focus state
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible:not(.active) {
+        outline: none;
+        box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
+        border-radius: var(--comp-tabs-tab-focus-border-radius);
+        background-color: var(--comp-tabs-tab-focus-background-color);
+    }
+
+    // Active/pressed state
+    &:active:not(:disabled):not(.active) {
+        background-color: var(--comp-tabs-tab-active-background-color);
+    }
+
+    // Disabled state
+    &:disabled,
+    &.disabled {
+        cursor: not-allowed;
+        color: var(--comp-tabs-tab-text-color-disabled);
+        opacity: 0.5;
+    }
+
+    // Active tab
+    &.active {
+        color: var(--comp-tabs-tab-text-color-active);
+        text-shadow: 0.5px 0 0 currentColor;
+
+        // Blue underline — pure CSS, no JS positioning needed
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background-color: var(--comp-tabs-tab-active-indicator-color);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
+            border-radius: var(--comp-tabs-tab-focus-border-radius);
+        }
+    }
+
+    // Feature locked tab
+    &.feature-locked {
+        // Only the lock icon (last <i>) gets feature-lock color;
+        // start icon inherits text color like in Angular
+        > i:last-of-type {
+            color: var(--comp-tabs-tab-feature-lock-color);
+        }
+
+        &:hover:not(:disabled):not(.active) {
+            background-color: var(--comp-tabs-tab-feature-locked-hover-background-color);
+        }
+
+        &:focus-visible:not(.active) {
+            color: var(--comp-tabs-tab-text-color-feature-locked-focus);
+            background-color: var(--comp-tabs-tab-feature-locked-focus-background-color);
+        }
+
+        &:active:not(:disabled):not(.active) {
+            background-color: var(--comp-tabs-tab-feature-locked-active-background-color);
+        }
+
+        &.active {
+            color: var(--comp-tabs-tab-text-color-feature-locked-active);
+            text-shadow: 0.5px 0 0 currentColor;
+
+            &::after {
+                background-color: var(--comp-tabs-tab-feature-locked-indicator-color);
+            }
+
+            &:focus-visible {
+                outline: none;
+                box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
+                border-radius: var(--comp-tabs-tab-focus-border-radius);
+            }
+        }
+    }
+}
+
+// Active indicator (underline)
+.ap-tabs-indicator {
+    position: absolute;
+    bottom: -1px;
+    height: 4px;
+    background-color: var(--comp-tabs-tab-active-indicator-color);
+    transition:
+        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: left;
+
+    &.feature-locked {
+        background-color: var(--comp-tabs-tab-feature-locked-indicator-color);
+    }
+}
+
+// Tab content panel
+.ap-tabs-content {
+    flex: 1;
+    width: 100%;
+}
+
+// Tab panel
+.ap-tabs-panel {
+    display: none;
+    padding: var(--ref-spacing-md) 0;
+
+    &.active {
+        display: block;
+    }
+}

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

@@ -0,0 +1,169 @@
+// Agorapulse Tag Styles
+@use 'mixins' as m;
+
+.ap-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--comp-tag-height);
+    max-height: var(--comp-tag-height);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    padding: 0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);
+    border-radius: var(--comp-tag-border-radius);
+    gap: var(--ref-spacing-xxxs);
+    vertical-align: middle;
+
+    // Text styles on container (span optional)
+    font-size: var(--comp-tag-text-style-size);
+    line-height: var(--comp-tag-text-style-line-height);
+    font-weight: var(--comp-tag-text-style-font-weight);
+    font-family: var(--comp-tag-text-style-font-family);
+    white-space: nowrap;
+    text-decoration: none;
+
+    // Auto-detect close button — tighter right padding
+    &:has(> button) {
+        padding: 0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left);
+    }
+
+    // Mini size
+    &.mini {
+        height: var(--comp-tag-mini-height);
+        padding: 0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left);
+    }
+
+    // Text truncation — use > span when combined with a close button
+    > span {
+        max-width: 180px;
+        @include m.truncate;
+    }
+
+    // Icon slot — implicit > i (for add icon or any free icon)
+    > i {
+        width: 12px;
+        height: 12px;
+    }
+
+    // Close button with <i class="ap-icon-close"> inside
+    > button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: var(--comp-close-button-size);
+        max-width: var(--comp-close-button-size);
+        height: var(--comp-close-button-size);
+        max-height: var(--comp-close-button-size);
+        border-radius: 50%;
+        background: transparent;
+        border: none;
+        padding: var(--comp-close-button-padding);
+        outline: none;
+        cursor: pointer;
+        transition: background-color 0.25s;
+
+        > i {
+            width: 12px;
+            height: 12px;
+        }
+
+        @media (hover: hover) {
+            &:focus:not(:disabled):not(:active) {
+                @include m.focus-ring;
+            }
+        }
+
+        &:hover {
+            background: var(--comp-close-button-hover-background);
+        }
+
+        &:active {
+            background: var(--comp-close-button-active-background);
+            outline: none;
+        }
+    }
+
+    // button.ap-tag — focus ring for clickable tags
+    &:is(button) {
+        cursor: pointer;
+
+        @media (hover: hover) {
+            &:focus:not(:disabled):not(:active) {
+                @include m.focus-ring;
+            }
+        }
+    }
+
+    // Color variants
+    &.blue {
+        background-color: var(--comp-tag-blue-background-color);
+        border-color: var(--comp-tag-blue-border-color);
+        color: var(--comp-tag-blue-text-color);
+
+        > button { color: var(--comp-tag-blue-icon-color); }
+    }
+
+    &.grey {
+        background-color: var(--comp-tag-grey-background-color);
+        border-color: var(--comp-tag-grey-border-color);
+        color: var(--comp-tag-grey-text-color);
+
+        > button { color: var(--comp-tag-grey-icon-color); }
+    }
+
+    &.tagOrange {
+        background-color: var(--comp-tag-tag-orange-background-color);
+        border-color: var(--comp-tag-tag-orange-border-color);
+        color: var(--comp-tag-tag-orange-text-color);
+
+        > button { color: var(--comp-tag-tag-orange-icon-color); }
+    }
+
+    &.menthol {
+        background-color: var(--comp-tag-menthol-background-color);
+        border-color: var(--comp-tag-menthol-border-color);
+        color: var(--comp-tag-menthol-text-color);
+
+        > button { color: var(--comp-tag-menthol-icon-color); }
+    }
+
+    &.green {
+        background-color: var(--comp-tag-green-background-color);
+        border-color: var(--comp-tag-green-border-color);
+        color: var(--comp-tag-green-text-color);
+
+        > button { color: var(--comp-tag-green-icon-color); }
+    }
+
+    &.red {
+        background-color: var(--comp-tag-red-background-color);
+        border-color: var(--comp-tag-red-border-color);
+        color: var(--comp-tag-red-text-color);
+
+        > button { color: var(--comp-tag-red-icon-color); }
+    }
+}
+
+// Tag avatar
+.ap-tag-avatar {
+    --avatar-size: 16px;
+
+    @include m.fixed-size(var(--avatar-size));
+    border-radius: 100%;
+    overflow: hidden;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+// Tag list container
+.ap-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ref-spacing-xxs);
+}