@seed-design/css 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.css +24 -23
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/app-bar.css +6 -1
- package/recipes/app-screen.css +0 -16
- package/recipes/input-button.css +14 -4
- package/vars/component/input-button.d.ts +11 -0
- package/vars/component/input-button.mjs +11 -0
package/all.css
CHANGED
|
@@ -1571,8 +1571,14 @@
|
|
|
1571
1571
|
color: var(--seed-icon-color, var(--seed-color-fg-neutral));
|
|
1572
1572
|
}
|
|
1573
1573
|
|
|
1574
|
+
.seed-app-bar__root--tone_transparent {
|
|
1575
|
+
--transparent-gradient-dim-height: 120px;
|
|
1576
|
+
--transparent-gradient-dim-background: linear-gradient(180deg, #00000059 0%, #0000 100%);
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1574
1579
|
.seed-app-bar__root--tone_transparent:before {
|
|
1575
|
-
|
|
1580
|
+
height: var(--transparent-gradient-dim-height);
|
|
1581
|
+
background: var(--transparent-gradient-dim-background);
|
|
1576
1582
|
}
|
|
1577
1583
|
|
|
1578
1584
|
.seed-app-bar__icon--tone_transparent {
|
|
@@ -2021,24 +2027,6 @@
|
|
|
2021
2027
|
padding-bottom: var(--seed-safe-area-bottom);
|
|
2022
2028
|
}
|
|
2023
2029
|
|
|
2024
|
-
.seed-app-screen__layer--tone_transparent {
|
|
2025
|
-
--transparent-gradient-dim-height: 120px;
|
|
2026
|
-
--transparent-gradient-dim-offset: -54px;
|
|
2027
|
-
--transparent-gradient-dim-background: linear-gradient(180deg, #00000059 0%, #0000 100%);
|
|
2028
|
-
}
|
|
2029
|
-
|
|
2030
|
-
.seed-app-screen__layer--tone_transparent:after {
|
|
2031
|
-
content: "";
|
|
2032
|
-
height: var(--transparent-gradient-dim-height);
|
|
2033
|
-
transform: translateY(var(--transparent-gradient-dim-offset));
|
|
2034
|
-
background: var(--transparent-gradient-dim-background);
|
|
2035
|
-
display: block;
|
|
2036
|
-
position: absolute;
|
|
2037
|
-
top: 0;
|
|
2038
|
-
left: 0;
|
|
2039
|
-
right: 0;
|
|
2040
|
-
}
|
|
2041
|
-
|
|
2042
2030
|
.seed-article {
|
|
2043
2031
|
user-select: text;
|
|
2044
2032
|
word-break: normal;
|
|
@@ -4547,15 +4535,20 @@
|
|
|
4547
4535
|
inset: 0;
|
|
4548
4536
|
}
|
|
4549
4537
|
|
|
4550
|
-
.seed-input-button__button
|
|
4538
|
+
.seed-input-button__button[data-disabled] {
|
|
4551
4539
|
cursor: not-allowed;
|
|
4552
4540
|
background-color: var(--seed-color-bg-disabled);
|
|
4553
4541
|
}
|
|
4554
4542
|
|
|
4555
|
-
.seed-input-button__button:is(:active, [data-active]) {
|
|
4543
|
+
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
|
|
4556
4544
|
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
4557
4545
|
}
|
|
4558
4546
|
|
|
4547
|
+
.seed-input-button__button[data-readonly]:not([data-disabled]) {
|
|
4548
|
+
cursor: default;
|
|
4549
|
+
background-color: var(--seed-color-bg-disabled);
|
|
4550
|
+
}
|
|
4551
|
+
|
|
4559
4552
|
.seed-input-button__button:is(:focus, [data-focus]) {
|
|
4560
4553
|
outline: none;
|
|
4561
4554
|
}
|
|
@@ -4576,10 +4569,14 @@
|
|
|
4576
4569
|
overflow: hidden;
|
|
4577
4570
|
}
|
|
4578
4571
|
|
|
4579
|
-
.seed-input-button__value
|
|
4572
|
+
.seed-input-button__value[data-disabled] {
|
|
4580
4573
|
color: var(--seed-color-fg-disabled);
|
|
4581
4574
|
}
|
|
4582
4575
|
|
|
4576
|
+
.seed-input-button__value[data-readonly]:not([data-disabled]) {
|
|
4577
|
+
color: var(--seed-color-fg-neutral);
|
|
4578
|
+
}
|
|
4579
|
+
|
|
4583
4580
|
.seed-input-button__placeholder {
|
|
4584
4581
|
font-size: var(--seed-font-size-t5);
|
|
4585
4582
|
line-height: var(--seed-line-height-t5);
|
|
@@ -4592,10 +4589,14 @@
|
|
|
4592
4589
|
overflow: hidden;
|
|
4593
4590
|
}
|
|
4594
4591
|
|
|
4595
|
-
.seed-input-button__placeholder
|
|
4592
|
+
.seed-input-button__placeholder[data-disabled] {
|
|
4596
4593
|
color: var(--seed-color-fg-disabled);
|
|
4597
4594
|
}
|
|
4598
4595
|
|
|
4596
|
+
.seed-input-button__placeholder[data-readonly]:not([data-disabled]) {
|
|
4597
|
+
color: var(--seed-color-fg-placeholder);
|
|
4598
|
+
}
|
|
4599
|
+
|
|
4599
4600
|
.seed-input-button__prefixText {
|
|
4600
4601
|
font-size: var(--seed-font-size-t5);
|
|
4601
4602
|
line-height: var(--seed-line-height-t5);
|