summaryrefslogtreecommitdiffhomepage
path: root/cloud/web/src/ui/style/component
diff options
context:
space:
mode:
authorFrank <[email protected]>2025-08-29 23:32:17 -0400
committerFrank <[email protected]>2025-08-29 23:32:17 -0400
commit37f284f9a97d3354143d64fc76c2eb9f7d9ccf9e (patch)
tree053db9abcb2178c71b22ebeadd07f920750ef5d2 /cloud/web/src/ui/style/component
parent0178eab29bda2f1b37a29543cd313ede48ad3977 (diff)
downloadopencode-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.css78
-rw-r--r--cloud/web/src/ui/style/component/dialog.css84
-rw-r--r--cloud/web/src/ui/style/component/input.css34
-rw-r--r--cloud/web/src/ui/style/component/label.css17
-rw-r--r--cloud/web/src/ui/style/component/title-bar.css32
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;
- }
-}