diff options
| author | Adam <[email protected]> | 2025-10-17 12:05:52 -0500 |
|---|---|---|
| committer | Adam <[email protected]> | 2025-10-17 12:06:36 -0500 |
| commit | 887a819f2444c8454a43049983d831194883c6cd (patch) | |
| tree | 7247e5d619c6065a4b1c7d02c74366d43e7e3c05 /packages/css/src/components | |
| parent | fe8b3a25155c0aaad20b506d0ba6fc6b8f2d0e5b (diff) | |
| download | opencode-887a819f2444c8454a43049983d831194883c6cd.tar.gz opencode-887a819f2444c8454a43049983d831194883c6cd.zip | |
wip: desktop work
Diffstat (limited to 'packages/css/src/components')
| -rw-r--r-- | packages/css/src/components/button.css | 94 | ||||
| -rw-r--r-- | packages/css/src/components/icon.css | 6 | ||||
| -rw-r--r-- | packages/css/src/components/select.css | 122 | ||||
| -rw-r--r-- | packages/css/src/components/tabs.css | 95 | ||||
| -rw-r--r-- | packages/css/src/components/tooltip.css | 53 |
5 files changed, 0 insertions, 370 deletions
diff --git a/packages/css/src/components/button.css b/packages/css/src/components/button.css deleted file mode 100644 index c50d76412..000000000 --- a/packages/css/src/components/button.css +++ /dev/null @@ -1,94 +0,0 @@ -[data-component="button"] { - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - border-style: solid; - border-width: 1px; - border-radius: var(--radius-md); - font-size: var(--text-base); - line-height: var(--text-base--line-height); - font-weight: var(--font-weight-normal); - text-decoration: none; - user-select: none; - gap: calc(var(--spacing) * 0.5); - - &[data-variant="primary"] { - border-color: var(--border-base); - background-color: var(--surface-brand-base); - color: var(--text-on-brand-strong); - - &:hover:not(:disabled) { - border-color: var(--border-hover); - background-color: var(--surface-brand-hover); - } - &:active:not(:disabled) { - border-color: var(--border-active); - background-color: var(--surface-brand-active); - } - &:focus:not(:disabled) { - border-color: var(--border-focus); - background-color: var(--surface-brand-focus); - } - } - - &[data-variant="secondary"] { - border-color: var(--border-base); - background-color: var(--surface-base); - color: var(--text-strong); - - &:hover:not(:disabled) { - border-color: var(--border-hover); - background-color: var(--surface-hover); - } - &:active:not(:disabled) { - border-color: var(--border-active); - background-color: var(--surface-active); - } - &:focus:not(:disabled) { - border-color: var(--border-focus); - background-color: var(--surface-focus); - } - } - - &[data-variant="ghost"] { - border-color: transparent; - background-color: transparent; - color: var(--text-strong); - - &:hover:not(:disabled) { - background-color: var(--surface-hover); - } - &:active:not(:disabled) { - border-color: var(--border-active); - background-color: var(--surface-active); - } - &:focus:not(:disabled) { - border-color: var(--border-focus); - background-color: var(--surface-focus); - } - } - - &[data-size="normal"] { - padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3); - font-size: var(--text-xs); - line-height: var(--text-sm--line-height); - } - - &[data-size="large"] { - padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4); - font-size: var(--text-sm); - line-height: var(--text-sm--line-height); - } - - &:disabled { - border-color: var(--border-disabled); - background-color: var(--surface-disabled); - color: var(--text-weak); - cursor: not-allowed; - } - - &:focus { - outline: none; - } -} diff --git a/packages/css/src/components/icon.css b/packages/css/src/components/icon.css deleted file mode 100644 index abc193220..000000000 --- a/packages/css/src/components/icon.css +++ /dev/null @@ -1,6 +0,0 @@ -[data-component="icon"] { - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} diff --git a/packages/css/src/components/select.css b/packages/css/src/components/select.css deleted file mode 100644 index da3334853..000000000 --- a/packages/css/src/components/select.css +++ /dev/null @@ -1,122 +0,0 @@ -[data-component="select"] { - [data-slot="trigger"] { - [data-slot="value"] { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - [data-slot="icon"] { - width: fit-content; - height: fit-content; - flex-shrink: 0; - color: var(--text-weak); - transition: transform 0.1s ease-in-out; - } - } -} - -[data-component="select-content"] { - min-width: 8rem; - overflow: hidden; - border-radius: var(--radius-md); - border-width: 1px; - border-style: solid; - border-color: var(--border-weak-base); - background-color: var(--surface-raised-base); - padding: calc(var(--spacing) * 1); - box-shadow: var(--shadow-md); - z-index: 50; - - &[data-closed] { - animation: select-close 0.15s ease-out; - } - - &[data-expanded] { - animation: select-open 0.15s ease-out; - } - - [data-slot="list"] { - overflow-y: auto; - max-height: 12rem; - white-space: nowrap; - overflow-x: hidden; - - &:focus { - outline: none; - } - } - - [data-slot="section"] { - font-size: var(--text-xs); - line-height: var(--text-xs--line-height); - font-weight: var(--font-weight-light); - text-transform: uppercase; - color: var(--text-weak); - opacity: 0.6; - margin-top: calc(var(--spacing) * 3); - margin-left: calc(var(--spacing) * 2); - &:first-child { - margin-top: 0; - } - } - - [data-slot="item"] { - position: relative; - display: flex; - align-items: center; - padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2); - border-radius: var(--radius-sm); - font-size: var(--text-xs); - line-height: var(--text-xs--line-height); - color: var(--text-base); - cursor: pointer; - transition: - background-color 0.2s ease-in-out, - color 0.2s ease-in-out; - outline: none; - user-select: none; - - &[data-highlighted] { - background-color: var(--surface-base); - } - - &[data-disabled] { - background-color: var(--surface-disabled); - pointer-events: none; - } - - [data-slot="item-indicator"] { - margin-left: auto; - } - - &:focus { - outline: none; - } - - &:hover { - background-color: var(--surface-hover); - } - } -} - -@keyframes select-open { - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } -} - -@keyframes select-close { - from { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.95); - } -} diff --git a/packages/css/src/components/tabs.css b/packages/css/src/components/tabs.css deleted file mode 100644 index 3790859d1..000000000 --- a/packages/css/src/components/tabs.css +++ /dev/null @@ -1,95 +0,0 @@ -[data-component="tabs"] { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - border-width: 1px; - border-style: solid; - border-radius: var(--radius-sm); - border-color: var(--border-weak-base); - background-color: var(--background-weaker); - overflow: clip; - - & [data-slot="list"] { - width: 100%; - position: relative; - display: flex; - align-items: center; - overflow-x: auto; - - /* Hide scrollbar */ - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - - /* After element to fill remaining space */ - &::after { - content: ""; - display: block; - flex-grow: 1; - height: 100%; - border-bottom: 1px solid var(--border-weak-base); - background-color: var(--background-weak); - border-top-right-radius: var(--radius-sm); - } - - &:empty::after { - display: none; - } - } - - & [data-slot="trigger"] { - position: relative; - height: 36px; - padding: 8px 12px; - display: flex; - align-items: center; - font-size: var(--text-sm); - font-weight: var(--font-weight-medium); - color: var(--text-weak); - cursor: pointer; - white-space: nowrap; - flex-shrink: 0; - border-bottom: 1px solid var(--border-weak-base); - border-right: 1px solid var(--border-weak-base); - background-color: var(--background-weak); - transition: - background-color 0.15s ease, - color 0.15s ease; - - &:disabled { - pointer-events: none; - color: var(--text-weaker); - } - &:focus-visible { - outline: none; - box-shadow: 0 0 0 2px var(--border-focus); - } - &[data-selected] { - color: var(--text-base); - background-color: transparent; - border-bottom-color: transparent; - } - &:hover:not(:disabled):not([data-selected]) { - color: var(--text-strong); - } - } - - & [data-slot="content"] { - overflow-y: auto; - flex: 1; - - /* Hide scrollbar */ - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - - &:focus-visible { - outline: none; - } - } -} diff --git a/packages/css/src/components/tooltip.css b/packages/css/src/components/tooltip.css deleted file mode 100644 index a17ed4026..000000000 --- a/packages/css/src/components/tooltip.css +++ /dev/null @@ -1,53 +0,0 @@ -/* [data-component="tooltip-trigger"] { */ -/* display: flex; */ -/* align-items: center; */ -/* } */ - -[data-component="tooltip"] { - z-index: 1000; - max-width: 320px; - border-radius: var(--radius-md); - background-color: var(--surface-base); - padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1); - font-size: var(--text-xs); - font-weight: var(--font-weight-medium); - color: var(--text-base); - box-shadow: var(--shadow-md); - pointer-events: none !important; - transition: all 150ms ease-out; - transform: translate3d(0, 0, 0); - transform-origin: var(--kb-tooltip-content-transform-origin); - - &[data-expanded] { - opacity: 1; - transform: translate3d(0, 0, 0); - } - - &[data-closed] { - opacity: 0; - } - - &[data-placement="top"] { - &[data-closed] { - transform: translate3d(0, 4px, 0); - } - } - - &[data-placement="bottom"] { - &[data-closed] { - transform: translate3d(0, -4px, 0); - } - } - - &[data-placement="left"] { - &[data-closed] { - transform: translate3d(4px, 0, 0); - } - } - - &[data-placement="right"] { - &[data-closed] { - transform: translate3d(-4px, 0, 0); - } - } -} |
