diff options
| author | Frank <[email protected]> | 2025-08-29 23:32:17 -0400 |
|---|---|---|
| committer | Frank <[email protected]> | 2025-08-29 23:32:17 -0400 |
| commit | 37f284f9a97d3354143d64fc76c2eb9f7d9ccf9e (patch) | |
| tree | 053db9abcb2178c71b22ebeadd07f920750ef5d2 /cloud/web/src/ui/style/component | |
| parent | 0178eab29bda2f1b37a29543cd313ede48ad3977 (diff) | |
| download | opencode-37f284f9a97d3354143d64fc76c2eb9f7d9ccf9e.tar.gz opencode-37f284f9a97d3354143d64fc76c2eb9f7d9ccf9e.zip | |
wip: cloud
Diffstat (limited to 'cloud/web/src/ui/style/component')
| -rw-r--r-- | cloud/web/src/ui/style/component/button.css | 78 | ||||
| -rw-r--r-- | cloud/web/src/ui/style/component/dialog.css | 84 | ||||
| -rw-r--r-- | cloud/web/src/ui/style/component/input.css | 34 | ||||
| -rw-r--r-- | cloud/web/src/ui/style/component/label.css | 17 | ||||
| -rw-r--r-- | cloud/web/src/ui/style/component/title-bar.css | 32 |
5 files changed, 0 insertions, 245 deletions
diff --git a/cloud/web/src/ui/style/component/button.css b/cloud/web/src/ui/style/component/button.css deleted file mode 100644 index 9604f9865..000000000 --- a/cloud/web/src/ui/style/component/button.css +++ /dev/null @@ -1,78 +0,0 @@ -[data-component="button"] { - width: fit-content; - display: flex; - line-height: 1; - align-items: center; - justify-content: center; - gap: var(--space-2); - font-size: var(--font-size-md); - text-transform: uppercase; - height: var(--space-11); - outline: none; - font-weight: 500; - padding: 0 var(--space-4); - border-width: 2px; - border-color: var(--color-border); - cursor: pointer; - - &:disabled { - opacity: 0.5; - cursor: default; - } - - &[data-color="primary"] { - background-color: var(--color-text); - border-color: var(--color-text); - color: var(--color-text-invert); - - &:active { - border-color: var(--color-accent); - } - } - - &[data-color="secondary"] { - &:active { - border-color: var(--color-accent); - } - } - - &[data-color="ghost"] { - border: none; - text-decoration: underline; - - &:active { - color: var(--color-text-accent); - } - } - - &:has([data-slot="icon"]) { - padding-left: var(--space-3); - padding-right: var(--space-3); - } - - &[data-size="sm"] { - height: var(--space-8); - padding: var(--space-3); - font-size: var(--font-size-xs); - - [data-slot="icon"] { - width: var(--space-3-5); - height: var(--space-3-5); - } - - &:has([data-slot="icon"]) { - padding-left: var(--space-2); - padding-right: var(--space-2); - } - } - - [data-slot="icon"] { - width: var(--space-4); - height: var(--space-4); - transition: transform 0.2s ease; - } - - &[data-rotate] [data-slot="icon"] { - transform: rotate(180deg); - } -} diff --git a/cloud/web/src/ui/style/component/dialog.css b/cloud/web/src/ui/style/component/dialog.css deleted file mode 100644 index 59867818f..000000000 --- a/cloud/web/src/ui/style/component/dialog.css +++ /dev/null @@ -1,84 +0,0 @@ -[data-component="dialog-overlay"] { - pointer-events: none !important; - position: fixed; - inset: 0; - animation-name: fadeOut; - animation-duration: 200ms; - animation-timing-function: ease; - opacity: 0; - backdrop-filter: blur(2px); - - &[data-expanded] { - animation-name: fadeIn; - opacity: 1; - pointer-events: auto !important; - } -} - -[data-component="dialog-center"] { - position: fixed; - inset: 0; - padding-top: 10vh; - justify-content: center; - pointer-events: none; - - [data-slot="content"] { - width: 45rem; - margin: 0 auto; - transition: 150ms width; - background-color: var(--color-bg); - border-width: 2px; - border-color: var(--color-border); - overflow: hidden; - display: flex; - flex-direction: column; - gap: var(--space-3); - outline: none; - animation-duration: 1ms; - animation-name: zoomOut; - animation-timing-function: ease; - - box-shadow: 8px 8px 0px 0px var(--color-gray-4); - - &[data-expanded] { - animation-name: zoomIn; - } - - &[data-transition] { - animation-duration: 200ms; - } - - &[data-size="sm"] { - width: 30rem; - } - - [data-slot="header"] { - display: flex; - padding: var(--space-4) var(--space-4) 0; - - [data-slot="title"] { - } - } - - [data-slot="main"] { - padding: 0 var(--space-4); - - &:has([data-slot="options"]) { - padding: 0; - display: flex; - flex-direction: column; - gap: var(--space-4); - } - } - - [data-slot="input"] { - } - - [data-slot="footer"] { - padding: var(--space-4); - display: flex; - gap: var(--space-4); - justify-content: end; - } - } -} diff --git a/cloud/web/src/ui/style/component/input.css b/cloud/web/src/ui/style/component/input.css deleted file mode 100644 index 59535d763..000000000 --- a/cloud/web/src/ui/style/component/input.css +++ /dev/null @@ -1,34 +0,0 @@ -[data-component="input"] { - font-size: var(--font-size-md); - background: transparent; - caret-color: var(--color-accent); - font-family: var(--font-mono); - height: var(--space-11); - padding: 0 var(--space-4); - width: 100%; - resize: none; - border: 2px solid var(--color-border); - - &::placeholder { - color: var(--color-text-dimmed); - opacity: 0.75; - } - - &:focus { - outline: 0; - } - - &[data-size="sm"] { - height: var(--space-9); - padding: 0 var(--space-3); - font-size: var(--font-size-xs); - } - - &[data-size="md"] { - } - - &[data-size="lg"] { - height: var(--space-12); - font-size: var(--font-size-lg); - } -} diff --git a/cloud/web/src/ui/style/component/label.css b/cloud/web/src/ui/style/component/label.css deleted file mode 100644 index e0dd5fef4..000000000 --- a/cloud/web/src/ui/style/component/label.css +++ /dev/null @@ -1,17 +0,0 @@ -[data-component="label"] { - letter-spacing: -0.03125rem; - text-transform: uppercase; - color: var(--color-text-dimmed); - font-weight: 500; - font-size: var(--font-size-md); - - &[data-size="sm"] { - font-size: var(--font-size-sm); - } - &[data-size="md"] { - } - &[data-size="lg"] { - font-size: var(--font-size-lg); - } -} - diff --git a/cloud/web/src/ui/style/component/title-bar.css b/cloud/web/src/ui/style/component/title-bar.css deleted file mode 100644 index 7ee32bfdc..000000000 --- a/cloud/web/src/ui/style/component/title-bar.css +++ /dev/null @@ -1,32 +0,0 @@ -[data-component="title-bar"] { - display: flex; - align-items: center; - justify-content: space-between; - height: 72px; - padding: 0 var(--space-4); - border-bottom: 2px solid var(--color-border); - - [data-slot="left"] { - display: flex; - flex-direction: column; - gap: var(--space-1-5); - - h1 { - letter-spacing: -0.03125rem; - font-size: var(--font-size-xl); - text-transform: uppercase; - font-weight: 600; - } - - p { - color: var(--color-text-dimmed); - } - } - -} - -@media (max-width: 40rem) { - [data-component="title-bar"] { - display: none; - } -} |
