@flux-ui/components 3.0.0-next.0

package/src/css/component/Notice.module.scss

@@ -0,0 +1,279 @@
+@use '$flux/css/mixin';
+
+@value basePane, basePaneElement from './base/Pane.module.scss';
+
+.notice {
+    composes: basePaneElement;
+
+    display: flex;
+    padding: 12px 15px;
+    gap: 12px;
+    border-radius: var(--radius);
+
+    .button {
+        margin-top: -6px;
+        margin-right: -9px;
+        margin-bottom: -6px;
+        height: 36px;
+    }
+
+    a {
+        color: currentColor;
+    }
+
+    ul {
+        margin-top: 3px;
+        padding-left: 1em;
+        list-style-type: disc;
+
+        li + li {
+            margin-top: 9px;
+        }
+    }
+}
+
+.noticeBody {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    text-wrap: pretty;
+
+    :global(p) {
+        line-height: 1.6;
+    }
+
+    &:last-child {
+        flex-grow: 0;
+    }
+}
+
+.noticeClose {
+    display: flex;
+    height: 20px;
+    width: 20px;
+    margin: 2px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 12px;
+    color: currentColor;
+    cursor: pointer;
+    transition: opacity 150ms var(--swift-out);
+
+    @include mixin.hover {
+        opacity: .75;
+    }
+
+    > .icon {
+        font-size: 14px;
+    }
+}
+
+.noticePrefix {
+    margin-top: 2px;
+    flex-shrink: 0;
+    font-size: 20px;
+}
+
+.noticeMessage,
+.noticeTitle {
+    margin: 0;
+}
+
+.noticeTitle {
+    font-weight: 600;
+}
+
+.notice.isCenter {
+    justify-content: center;
+    text-align: center;
+}
+
+.notice.isFluid {
+    border-style: solid;
+    border-width: 1px;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+
+    &:first-child {
+        border-top: 0;
+    }
+
+    &:last-child {
+        border-bottom: 0;
+    }
+}
+
+.noticeGray {
+    composes: notice;
+
+    background: rgb(var(--gray-2));
+    border-color: rgb(var(--gray-3));
+    color: var(--foreground);
+
+    .noticeClose {
+        background: rgb(var(--gray-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: var(--foreground-prominent);
+    }
+}
+
+.noticePrimary {
+    composes: notice;
+
+    background: rgb(var(--primary-2));
+    border-color: rgb(var(--primary-3));
+    color: rgb(var(--primary-11));
+
+    .noticeClose {
+        background: rgb(var(--primary-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: rgb(var(--primary-7));
+    }
+
+    :local(.button) {
+        border-color: rgb(var(--primary-4));
+    }
+
+    :local(.spinnerTrack) {
+        stroke: rgb(var(--primary-3));
+    }
+
+    :local(.spinnerEffect),
+    :local(.spinnerValue) {
+        stroke: rgb(var(--primary-7));
+    }
+}
+
+.noticeDanger {
+    composes: notice;
+
+    background: rgb(var(--danger-2));
+    border-color: rgb(var(--danger-3));
+    color: rgb(var(--danger-11));
+
+    .noticeClose {
+        background: rgb(var(--danger-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: rgb(var(--danger-7));
+    }
+
+    :local(.button) {
+        border-color: rgb(var(--danger-4));
+    }
+
+    :local(.spinnerTrack) {
+        stroke: rgb(var(--danger-3));
+    }
+
+    :local(.spinnerEffect),
+    :local(.spinnerValue) {
+        stroke: rgb(var(--danger-7));
+    }
+}
+
+.noticeInfo {
+    composes: notice;
+
+    background: rgb(var(--info-2));
+    border-color: rgb(var(--info-3));
+    color: rgb(var(--info-11));
+
+    .noticeClose {
+        background: rgb(var(--info-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: rgb(var(--info-7));
+    }
+
+    :local(.button) {
+        border-color: rgb(var(--info-4));
+    }
+
+    :local(.spinnerTrack) {
+        stroke: rgb(var(--info-3));
+    }
+
+    :local(.spinnerEffect),
+    :local(.spinnerValue) {
+        stroke: rgb(var(--info-7));
+    }
+}
+
+.noticeSuccess {
+    composes: notice;
+
+    background: rgb(var(--success-2));
+    border-color: rgb(var(--success-3));
+    color: rgb(var(--success-11));
+
+    .noticeClose {
+        background: rgb(var(--success-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: rgb(var(--success-7));
+    }
+
+    :local(.button) {
+        border-color: rgb(var(--success-4));
+    }
+
+    :local(.spinnerTrack) {
+        stroke: rgb(var(--success-3));
+    }
+
+    :local(.spinnerEffect),
+    :local(.spinnerValue) {
+        stroke: rgb(var(--success-7));
+    }
+}
+
+.noticeWarning {
+    composes: notice;
+
+    background: rgb(var(--warning-2));
+    border-color: rgb(var(--warning-3));
+    color: rgb(var(--warning-11));
+
+    .noticeClose {
+        background: rgb(var(--warning-3));
+    }
+
+    .noticePrefix,
+    .noticeTitle {
+        color: rgb(var(--warning-7));
+    }
+
+    :local(.button) {
+        border-color: rgb(var(--warning-4));
+    }
+
+    :local(.spinnerTrack) {
+        stroke: rgb(var(--warning-3));
+    }
+
+    :local(.spinnerEffect),
+    :local(.spinnerValue) {
+        stroke: rgb(var(--warning-7));
+    }
+}
+
+:local(.basePane) > .notice {
+    padding-left: 21px;
+    padding-right: 21px;
+}

package/src/css/component/Overlay.module.scss

@@ -0,0 +1,149 @@
+.overlay {
+    position: fixed;
+    display: flex;
+    inset: 0;
+    height: 100dvh;
+    width: 100dvw;
+    background: rgb(var(--gray-3) / .5);
+    backdrop-filter: blur(3px) saturate(180%);
+    z-index: 10000;
+
+    > .basePaneStructure {
+        display: flex;
+        margin: auto;
+        max-height: min(840px, 100dvh - 180px);
+        width: calc(100dvw - 90px);
+        flex-flow: column nowrap;
+        box-shadow: var(--shadow-lg);
+        overflow: auto;
+
+        .paneFooter {
+            position: sticky;
+            bottom: 0;
+            margin-top: auto;
+        }
+    }
+}
+
+.overlaySmall {
+    composes: overlay;
+
+    > .basePaneStructure {
+        max-width: 420px;
+    }
+}
+
+.overlayMedium {
+    composes: overlay;
+
+    > .basePaneStructure {
+        max-width: 540px;
+    }
+}
+
+.overlayLarge {
+    composes: overlay;
+
+    > .basePaneStructure {
+        max-width: 720px;
+    }
+}
+
+.slideOver {
+    composes: overlay;
+
+    justify-content: flex-end;
+
+    > .basePaneStructure {
+        margin: 9px;
+        max-height: calc(100% - 18px);
+        width: min(100dvw, 720px);
+        contain: paint;
+        overflow: auto;
+
+        > .paneHeader,
+        > .paneFooter {
+            position: sticky;
+            z-index: 100;
+        }
+
+        > .paneHeader {
+            top: 0;
+            padding-bottom: 21px;
+            border-bottom: 1px solid rgb(var(--gray-2));
+            box-shadow: var(--shadow-xs);
+
+            &:has(+ :where(.tabs, .tabBar)) {
+                padding-bottom: 0;
+                border-bottom: 0;
+                box-shadow: none;
+            }
+
+            &:not(:has(+ :where(.tabs, .tabBar))) {
+                background: inherit;
+            }
+        }
+
+        > .paneHeader + .tabBar {
+            position: sticky;
+            top: 45px;
+            z-index: 100;
+        }
+
+        > .paneHeader:has(.paneHeaderCaption > :is(span)) + .tabBar {
+            top: 69px;
+        }
+
+        > .paneFooter {
+            bottom: 0;
+        }
+    }
+}
+
+.overlayTransitionEnterActive,
+.overlayTransitionLeaveActive {
+    transition: opacity 420ms var(--swift-out);
+
+    > .basePaneStructure {
+        transition: 420ms var(--swift-out);
+        transition-property: opacity, scale;
+    }
+}
+
+.overlayTransitionEnterFrom {
+    opacity: 0;
+
+    > .basePaneStructure {
+        opacity: 0;
+        scale: .9;
+    }
+}
+
+.overlayTransitionLeaveTo {
+    opacity: 0;
+
+    > .basePaneStructure {
+        opacity: 0;
+        scale: .95;
+    }
+}
+
+.slideOverTransitionEnterActive,
+.slideOverTransitionLeaveActive {
+    transition: opacity 600ms var(--swift-out);
+
+    > .basePaneStructure {
+        transition: 600ms var(--swift-out);
+        transition-property: opacity, transform;
+    }
+}
+
+.slideOverTransitionEnterFrom,
+.slideOverTransitionLeaveTo {
+    opacity: 0;
+    transition-delay: 210ms;
+
+    > .basePaneStructure {
+        transform: translate3d(100%, 0, 0);
+    }
+}

package/src/css/component/Pagination.module.scss

@@ -0,0 +1,59 @@
+@use '$flux/css/mixin';
+
+.pagination {
+    z-index: 0;
+
+    .button {
+        min-width: 40px;
+    }
+
+    .buttonLabel {
+        margin-left: 0;
+        margin-right: 0;
+        min-width: 18px;
+
+        &:nth-child(2) {
+            min-width: unset;
+        }
+    }
+
+    .primaryButton {
+        z-index: 1;
+    }
+}
+
+.paginationCurrent {
+    gap: 3px;
+    font-variant-numeric: tabular-nums;
+}
+
+.paginationBar {
+    align-items: center;
+    flex-direction: column;
+
+    .formInputGroup {
+        max-width: max-content;
+    }
+
+    .formSelect {
+        width: 78px;
+    }
+
+    .pagination .button:first-child {
+        border-radius: 0;
+    }
+
+    @include mixin.breakpoint-up(lg) {
+        flex-direction: row;
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .paginationBarSpacer {
+        display: none;
+    }
+}
+
+.paneFooter > .paginationBar {
+    flex-grow: 1;
+}

package/src/css/component/Pane.module.scss

@@ -0,0 +1,218 @@
+@value baseAutoGrid from './base/Grid.module.scss';
+@value basePaneElement, basePaneLoader, basePaneStructure from './base/Pane.module.scss';
+
+@layer flux-base {
+    .pane {
+        composes: basePaneStructure;
+    }
+
+    .paneDefault {
+        composes: pane;
+
+        box-shadow: var(--shadow-sm);
+    }
+
+    .paneFlat {
+        composes: pane;
+    }
+
+    .paneWell {
+        composes: pane;
+
+        background: rgb(var(--gray-1));
+    }
+
+    .paneHeader {
+        composes: basePaneElement;
+
+        display: flex;
+        padding: 21px 21px 0;
+        gap: 15px;
+
+        &:only-child {
+            padding: 21px;
+        }
+
+        &:has(+ :local(.basePaneElement):not(.paneBody)) {
+            padding: 21px;
+        }
+    }
+
+    .paneHeaderCaption {
+        display: flex;
+        flex-flow: column;
+        flex-grow: 1;
+        line-height: 24px;
+
+        :is(strong) {
+            color: var(--foreground-prominent);
+            font-weight: 600;
+
+            &:has(+ :is(span)) {
+                font-size: 16px;
+            }
+        }
+
+        :is(span) {
+            font-size: 14px;
+        }
+    }
+
+    .paneHeaderIcon {
+        margin-top: 2px;
+        color: rgb(var(--primary-7));
+    }
+
+    .paneBody {
+        composes: basePaneElement;
+
+        padding: 21px;
+    }
+
+    .paneBody + .paneBody {
+        padding-top: 0;
+    }
+
+    .paneFooter {
+        composes: basePaneElement;
+
+        display: flex;
+        padding: 21px;
+        gap: 9px;
+        background: rgb(var(--gray-1));
+        border-top: 1px solid rgb(var(--gray-2));
+    }
+}
+
+.paneLoader {
+    composes: basePaneLoader;
+}
+
+.paneTag {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    padding: 6px 9px;
+    background: rgb(var(--gray-10));
+    border-radius: calc(var(--radius) / 2);
+    color: rgb(var(--gray-0));
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 1;
+    text-transform: uppercase;
+}
+
+.paneMedia {
+    position: relative;
+    overflow: hidden;
+}
+
+.paneMediaInset {
+    composes: paneMedia;
+
+    margin: 21px;
+    border-radius: calc(var(--radius) / 2);
+
+    &:not(:first-child) {
+        margin-top: 0;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
+}
+
+.paneMediaImage {
+    display: block;
+    height: auto;
+    width: 100%;
+    margin: 0;
+    aspect-ratio: 2 / 1;
+    object-fit: cover;
+    object-position: center;
+}
+
+.paneDeck {
+    composes: paneDefault;
+
+    overflow: hidden;
+
+    > :local(.baseAutoGrid) {
+        margin-right: -1px;
+        margin-bottom: -1px;
+
+        > .pane {
+            border-top: 0;
+            border-left: 0;
+            border-radius: 0;
+        }
+    }
+}
+
+.paneGroup {
+    position: relative;
+}
+
+.paneGroup + .paneGroup {
+    border-top: 1px solid rgb(var(--gray-11) / .05);
+}
+
+.paneIllustration {
+    --mask: linear-gradient(to bottom, black, transparent);
+    --mask-content: linear-gradient(to bottom, black, rgb(0 0 0 / .75), transparent);
+
+    position: relative;
+    border-radius: calc(var(--radius) - 1px);
+
+    &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.paneIllustrationContent {
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.paneIllustrationContentControlled {
+    composes: paneIllustrationContent;
+
+    overflow: hidden;
+
+    -webkit-mask-image: var(--mask-content);
+    mask-image: var(--mask-content);
+}
+
+.paneIllustrationMagic {
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+}
+
+.paneIllustrationMasked {
+    composes: paneIllustration;
+
+    .paneIllustrationMagic {
+        -webkit-mask-image: var(--mask);
+        mask-image: var(--mask);
+    }
+}
+
+.paneIllustration + :where(.paneBody, .paneHeader) {
+    position: relative;
+    margin-top: -60px;
+}
+
+.paneBody:has(.iconBoxed:only-child):has(+ .paneHeader) {
+    padding-bottom: 0;
+}

package/src/css/component/PercentageBar.module.scss

@@ -0,0 +1,31 @@
+.percentageBar {
+    display: flex;
+    flex-flow: column;
+    gap: 12px;
+}
+
+.percentageBarSegment {
+    height: 12px;
+    border-radius: calc(var(--radius) / 3);
+    transition: 180ms var(--swift-out);
+    transition-property: height, margin;
+
+    &:hover {
+        height: 16px;
+        margin-top: -2px;
+        margin-bottom: -2px;
+    }
+}
+
+.percentageBarTooltip {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    gap: 9px;
+}
+
+.percentageBarTrack {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 3px;
+}