@konce-pt/styles 0.7.10 → 0.7.12
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/index.css +42 -0
- package/package.json +2 -2
- package/src/index.scss +23 -0
package/index.css
CHANGED
|
@@ -86,6 +86,48 @@
|
|
|
86
86
|
border-radius: var(--kpt-radius-sm, 0.25rem);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
+
@layer kpt.components {
|
|
90
|
+
.kpt-rich-content ul,
|
|
91
|
+
.kpt-rich-content ol {
|
|
92
|
+
padding-inline-start: 1.5rem;
|
|
93
|
+
}
|
|
94
|
+
.kpt-rich-content ul {
|
|
95
|
+
list-style-type: disc;
|
|
96
|
+
}
|
|
97
|
+
.kpt-rich-content ul ul {
|
|
98
|
+
list-style-type: circle;
|
|
99
|
+
}
|
|
100
|
+
.kpt-rich-content ul ul ul {
|
|
101
|
+
list-style-type: square;
|
|
102
|
+
}
|
|
103
|
+
.kpt-rich-content ul ul ul ul {
|
|
104
|
+
list-style-type: disc;
|
|
105
|
+
}
|
|
106
|
+
.kpt-rich-content ul ul ul ul ul {
|
|
107
|
+
list-style-type: circle;
|
|
108
|
+
}
|
|
109
|
+
.kpt-rich-content ul ul ul ul ul ul {
|
|
110
|
+
list-style-type: square;
|
|
111
|
+
}
|
|
112
|
+
.kpt-rich-content ol {
|
|
113
|
+
list-style-type: decimal;
|
|
114
|
+
}
|
|
115
|
+
.kpt-rich-content ol ol {
|
|
116
|
+
list-style-type: lower-alpha;
|
|
117
|
+
}
|
|
118
|
+
.kpt-rich-content ol ol ol {
|
|
119
|
+
list-style-type: lower-roman;
|
|
120
|
+
}
|
|
121
|
+
.kpt-rich-content ol ol ol ol {
|
|
122
|
+
list-style-type: decimal;
|
|
123
|
+
}
|
|
124
|
+
.kpt-rich-content ol ol ol ol ol {
|
|
125
|
+
list-style-type: lower-alpha;
|
|
126
|
+
}
|
|
127
|
+
.kpt-rich-content ol ol ol ol ol ol {
|
|
128
|
+
list-style-type: lower-roman;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
89
131
|
@layer kpt.utilities {
|
|
90
132
|
.kpt-elevation-1 {
|
|
91
133
|
box-shadow: var(--kpt-elevation-1);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/styles",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.12",
|
|
4
4
|
"description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "konce.pt",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"src"
|
|
43
43
|
],
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@konce-pt/tokens": "0.7.
|
|
45
|
+
"@konce-pt/tokens": "0.7.12"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"sass": "^1.77.0"
|
package/src/index.scss
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
* node_modules/@konce-pt/styles/index.css
|
|
12
12
|
* Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
|
|
13
13
|
*/
|
|
14
|
+
@use 'sass:list';
|
|
15
|
+
|
|
14
16
|
@layer kpt.reset, kpt.base, kpt.components, kpt.utilities;
|
|
15
17
|
|
|
16
18
|
@layer kpt.reset {
|
|
@@ -100,6 +102,27 @@
|
|
|
100
102
|
}
|
|
101
103
|
}
|
|
102
104
|
|
|
105
|
+
@layer kpt.components {
|
|
106
|
+
// Treść zapisana w `kpt-rich-text` i renderowana poza edytorem — HTML z `value` nie niesie klas,
|
|
107
|
+
// więc opakuj go w `.kpt-rich-content`, żeby listy wyglądały tak samo jak w edytorze.
|
|
108
|
+
// Znaczniki cyklują co 3 poziomy (przeglądarka robi to sama tylko dla `ul`), do 6. poziomu —
|
|
109
|
+
// tyle pozwala domyślny `maxListLevel`. Trzymaj zgodnie z `rich-text.component.scss`.
|
|
110
|
+
.kpt-rich-content {
|
|
111
|
+
ul,
|
|
112
|
+
ol {
|
|
113
|
+
padding-inline-start: 1.5rem;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@each $tag, $types in (ul: (disc, circle, square), ol: (decimal, lower-alpha, lower-roman)) {
|
|
117
|
+
$sel: $tag;
|
|
118
|
+
@for $i from 1 through 6 {
|
|
119
|
+
#{$sel} { list-style-type: list.nth($types, ($i - 1) % 3 + 1); }
|
|
120
|
+
$sel: '#{$sel} #{$tag}';
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
103
126
|
@layer kpt.utilities {
|
|
104
127
|
.kpt-elevation-1 { box-shadow: var(--kpt-elevation-1); }
|
|
105
128
|
.kpt-elevation-2 { box-shadow: var(--kpt-elevation-2); }
|