@cosxai/ui 0.2.2 → 0.2.3
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/package.json +1 -1
- package/src/styles/chrome-swiss.css +27 -2
package/package.json
CHANGED
|
@@ -75,7 +75,12 @@ html[data-ck-chrome="swiss"] .ck-btn--ghost:hover:not(:disabled) {
|
|
|
75
75
|
|
|
76
76
|
/* ===== Inputs — bottom-border-only (canonical Swiss form) === */
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
/* :not(.ck-input--with-addon) — when the input is inside a
|
|
79
|
+
prefix/suffix wrapper the wrapper carries the border + padding,
|
|
80
|
+
and stripping the input's own padding makes the placeholder
|
|
81
|
+
collide with the addon. The addon variant gets the swiss
|
|
82
|
+
underline only at the OUTER wrap level (rule further down). */
|
|
83
|
+
html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon),
|
|
79
84
|
html[data-ck-chrome="swiss"] .ck-textarea {
|
|
80
85
|
background: transparent !important;
|
|
81
86
|
border: none !important;
|
|
@@ -86,7 +91,7 @@ html[data-ck-chrome="swiss"] .ck-textarea {
|
|
|
86
91
|
color: var(--ck-text-primary);
|
|
87
92
|
transition: border-bottom-color 120ms ease, border-bottom-width 120ms ease;
|
|
88
93
|
}
|
|
89
|
-
html[data-ck-chrome="swiss"] .ck-input:focus-visible,
|
|
94
|
+
html[data-ck-chrome="swiss"] .ck-input:not(.ck-input--with-addon):focus-visible,
|
|
90
95
|
html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
|
|
91
96
|
outline: none;
|
|
92
97
|
border-bottom-color: var(--ck-text-primary) !important;
|
|
@@ -94,6 +99,26 @@ html[data-ck-chrome="swiss"] .ck-textarea:focus-visible {
|
|
|
94
99
|
box-shadow: none !important;
|
|
95
100
|
}
|
|
96
101
|
|
|
102
|
+
/* Addon variant — flatten the wrapper to the swiss underline-only
|
|
103
|
+
form so the whole field (input + addons) reads as one bar. The
|
|
104
|
+
inner .ck-input keeps its default padding; the wrap loses its
|
|
105
|
+
side / top borders and its corner radius. */
|
|
106
|
+
html[data-ck-chrome="swiss"] .ck-input-addon-wrap {
|
|
107
|
+
border: none !important;
|
|
108
|
+
border-bottom: 1px solid var(--ck-border-subtle) !important;
|
|
109
|
+
border-radius: 0 !important;
|
|
110
|
+
background: transparent !important;
|
|
111
|
+
}
|
|
112
|
+
html[data-ck-chrome="swiss"] .ck-input-addon-wrap:focus-within {
|
|
113
|
+
border-bottom-color: var(--ck-text-primary) !important;
|
|
114
|
+
border-bottom-width: 2px !important;
|
|
115
|
+
}
|
|
116
|
+
/* Recess the addon further so the slab still reads against the
|
|
117
|
+
underlined input column. */
|
|
118
|
+
html[data-ck-chrome="swiss"] .ck-input-addon {
|
|
119
|
+
background: var(--ck-bg-muted) !important;
|
|
120
|
+
}
|
|
121
|
+
|
|
97
122
|
/* ===== Cards — rules-only sectioning ======================== */
|
|
98
123
|
|
|
99
124
|
html[data-ck-chrome="swiss"] .ck-card {
|