@cloud-ru/ds-markdown 1.0.27-preview-d50a3da1.0 → 1.0.27-preview-d90ac2be.0
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/dist/cjs/components/Markdown/styles.module.css +32 -32
- package/dist/cjs/components/MarkdownEditor/styles.module.css +40 -40
- package/dist/cjs/helperComponents/PrivateButton/styles.module.css +11 -11
- package/dist/cjs/helperComponents/TableSelectItem/styles.module.css +5 -5
- package/dist/cjs/helperComponents/TableSelectSettingsGrid/styles.module.css +6 -6
- package/dist/cjs/style.css +98 -98
- package/dist/cjs/styles/syntax.module.css +4 -4
- package/dist/esm/components/Markdown/styles.module.css +32 -32
- package/dist/esm/components/MarkdownEditor/styles.module.css +40 -40
- package/dist/esm/helperComponents/PrivateButton/styles.module.css +11 -11
- package/dist/esm/helperComponents/TableSelectItem/styles.module.css +5 -5
- package/dist/esm/helperComponents/TableSelectSettingsGrid/styles.module.css +6 -6
- package/dist/esm/style.css +98 -98
- package/dist/esm/styles/syntax.module.css +4 -4
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +13 -13
- package/src/components/MarkdownEditor/styles.module.scss +5 -5
- package/src/helperComponents/PrivateButton/styles.module.scss +3 -3
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.root{
|
|
2
2
|
box-sizing:border-box;
|
|
3
3
|
max-width:100%;
|
|
4
|
-
font-family:var(--sn-brand-font-fontFamily-regular-body,
|
|
5
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
6
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
4
|
+
font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
|
|
5
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
6
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
7
7
|
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
|
|
8
8
|
}
|
|
9
9
|
.root p,
|
|
@@ -22,42 +22,42 @@
|
|
|
22
22
|
margin:0;
|
|
23
23
|
}
|
|
24
24
|
.root h1{
|
|
25
|
-
font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
25
|
+
font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
26
26
|
font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
27
|
-
line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-
|
|
28
|
-
font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-
|
|
27
|
+
line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
|
|
28
|
+
font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
|
|
29
29
|
letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
30
30
|
paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
|
|
31
31
|
}
|
|
32
32
|
.root h2{
|
|
33
|
-
font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
33
|
+
font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
34
34
|
font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
35
|
-
line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-
|
|
36
|
-
font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-
|
|
35
|
+
line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
|
|
36
|
+
font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
|
|
37
37
|
letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
38
38
|
paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
|
|
39
39
|
}
|
|
40
40
|
.root h3{
|
|
41
|
-
font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
41
|
+
font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
42
42
|
font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
43
|
-
line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-
|
|
44
|
-
font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-
|
|
43
|
+
line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
|
|
44
|
+
font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
|
|
45
45
|
letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
46
46
|
paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
|
|
47
47
|
}
|
|
48
48
|
.root h4{
|
|
49
|
-
font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
|
|
49
|
+
font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
50
50
|
font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
51
|
-
line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-
|
|
52
|
-
font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-
|
|
51
|
+
line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
52
|
+
font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
|
|
53
53
|
letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
|
|
54
54
|
paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
|
|
55
55
|
}
|
|
56
56
|
.root h5{
|
|
57
|
-
font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
|
|
57
|
+
font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
58
58
|
font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
59
|
-
line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-
|
|
60
|
-
font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-
|
|
59
|
+
line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
60
|
+
font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
61
61
|
letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
|
|
62
62
|
paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
|
|
63
63
|
}
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
.root code{
|
|
79
79
|
min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
|
|
80
80
|
padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
|
|
81
|
-
border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-
|
|
82
|
-
font-family:var(--sn-brand-font-fontFamily-mono-body,
|
|
81
|
+
border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
|
|
82
|
+
font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
|
|
83
83
|
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
|
|
84
84
|
}
|
|
85
85
|
.root a{
|
|
86
|
-
color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-
|
|
86
|
+
color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
|
|
87
87
|
text-decoration:underline;
|
|
88
88
|
}
|
|
89
89
|
.root table{
|
|
@@ -141,8 +141,8 @@
|
|
|
141
141
|
.root .codeBlock{
|
|
142
142
|
overflow:hidden;
|
|
143
143
|
border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
144
|
-
border-radius:var(--sn-density-radius-2xs, var(--sn-
|
|
145
|
-
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-
|
|
144
|
+
border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
|
|
145
|
+
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
|
|
146
146
|
}
|
|
147
147
|
.root .codeHeader{
|
|
148
148
|
display:flex;
|
|
@@ -153,14 +153,14 @@
|
|
|
153
153
|
border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
154
154
|
}
|
|
155
155
|
.root .codeLang{
|
|
156
|
-
font-family:var(--sn-brand-font-fontFamily-mono-body,
|
|
157
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-
|
|
158
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
156
|
+
font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
|
|
157
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
|
|
158
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
|
|
159
159
|
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
|
|
160
160
|
text-transform:lowercase;
|
|
161
161
|
}
|
|
162
162
|
.root .codeCopy[data-copied]{
|
|
163
|
-
color:var(--sn-theme-color-green-text, var(--sn-
|
|
163
|
+
color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
|
|
164
164
|
}
|
|
165
165
|
.root .codeBody{
|
|
166
166
|
display:flex;
|
|
@@ -175,9 +175,9 @@
|
|
|
175
175
|
flex-shrink:0;
|
|
176
176
|
padding:var(--sn-primitive-dimension-12, 12px) 0;
|
|
177
177
|
border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
178
|
-
font-family:var(--sn-brand-font-fontFamily-mono-body,
|
|
179
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
180
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
178
|
+
font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
|
|
179
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
180
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
181
181
|
color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
|
|
182
182
|
text-align:right;
|
|
183
183
|
}
|
|
@@ -195,8 +195,8 @@
|
|
|
195
195
|
.root .codeContent{
|
|
196
196
|
min-height:0;
|
|
197
197
|
padding:0;
|
|
198
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
199
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
198
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
199
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
200
200
|
background:transparent;
|
|
201
201
|
}
|
|
202
202
|
.root hr{
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
gap:var(--sn-primitive-dimension-8, 8px);
|
|
11
11
|
align-items:center;
|
|
12
12
|
justify-content:space-between;
|
|
13
|
-
font-family:var(--sn-brand-font-fontFamily-regular-body,
|
|
14
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-
|
|
15
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
13
|
+
font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
|
|
14
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
|
|
15
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
|
|
16
16
|
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.previewToggleLabel{
|
|
30
|
-
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
|
|
30
|
+
font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
31
31
|
font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
|
|
32
|
-
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
33
|
-
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
32
|
+
line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
33
|
+
font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
34
34
|
letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
|
|
35
35
|
paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
|
|
36
|
-
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-
|
|
36
|
+
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.label{
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
display:flex;
|
|
51
51
|
box-sizing:border-box;
|
|
52
52
|
width:100%;
|
|
53
|
-
padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-
|
|
53
|
+
padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.resizeBox{
|
|
@@ -69,14 +69,14 @@
|
|
|
69
69
|
|
|
70
70
|
.postfix{
|
|
71
71
|
position:absolute;
|
|
72
|
-
top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-
|
|
73
|
-
right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-
|
|
72
|
+
top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
|
|
73
|
+
right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
|
|
74
74
|
display:grid;
|
|
75
|
-
grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-
|
|
75
|
+
grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
76
76
|
grid-template-columns:100%;
|
|
77
77
|
row-gap:var(--sn-primitive-dimension-2, 2px);
|
|
78
78
|
place-items:center center;
|
|
79
|
-
width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-
|
|
79
|
+
width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.rawInputWrapper{
|
|
@@ -91,11 +91,11 @@
|
|
|
91
91
|
flex:1 1 auto;
|
|
92
92
|
min-height:0;
|
|
93
93
|
padding:0;
|
|
94
|
-
padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-
|
|
94
|
+
padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
|
|
95
95
|
border:none;
|
|
96
|
-
font-family:var(--sn-brand-font-fontFamily-regular-body,
|
|
97
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
98
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
96
|
+
font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
|
|
97
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
98
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
99
99
|
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
|
|
100
100
|
background:transparent;
|
|
101
101
|
outline:none;
|
|
@@ -111,14 +111,14 @@
|
|
|
111
111
|
overflow-y:auto;
|
|
112
112
|
flex:1 1 auto;
|
|
113
113
|
min-height:0;
|
|
114
|
-
font-family:var(--sn-brand-font-fontFamily-regular-body,
|
|
115
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
116
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
114
|
+
font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
|
|
115
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
116
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
117
117
|
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
|
|
118
118
|
}
|
|
119
119
|
.content :global(.ProseMirror){
|
|
120
120
|
min-height:100%;
|
|
121
|
-
padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-
|
|
121
|
+
padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
|
|
122
122
|
outline:none;
|
|
123
123
|
}
|
|
124
124
|
.content :global(.ProseMirror) p,
|
|
@@ -137,42 +137,42 @@
|
|
|
137
137
|
margin:0;
|
|
138
138
|
}
|
|
139
139
|
.content :global(.ProseMirror) h1{
|
|
140
|
-
font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
140
|
+
font-family:var(--sn-regular-headline-l-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
141
141
|
font-weight:var(--sn-regular-headline-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-l, var(--sn-brand-font-fontWeight-light-regular-headline-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
142
|
-
line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-
|
|
143
|
-
font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-
|
|
142
|
+
line-height:var(--sn-regular-headline-l-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightL, var(--sn-primitive-font-lineHeight-by40, 48px)));
|
|
143
|
+
font-size:var(--sn-regular-headline-l-fontSize, var(--sn-density-typography-roleHeadline-fontSizeL, var(--sn-primitive-font-fontSize-36, 36px)));
|
|
144
144
|
letter-spacing:var(--sn-regular-headline-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
145
145
|
paragraph-spacing:var(--sn-regular-headline-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize32, 16px));
|
|
146
146
|
}
|
|
147
147
|
.content :global(.ProseMirror) h2{
|
|
148
|
-
font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
148
|
+
font-family:var(--sn-regular-headline-m-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
149
149
|
font-weight:var(--sn-regular-headline-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-m, var(--sn-brand-font-fontWeight-light-regular-headline-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
150
|
-
line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-
|
|
151
|
-
font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-
|
|
150
|
+
line-height:var(--sn-regular-headline-m-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightM, var(--sn-primitive-font-lineHeight-by32, 40px)));
|
|
151
|
+
font-size:var(--sn-regular-headline-m-fontSize, var(--sn-density-typography-roleHeadline-fontSizeM, var(--sn-primitive-font-fontSize-32, 32px)));
|
|
152
152
|
letter-spacing:var(--sn-regular-headline-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
153
153
|
paragraph-spacing:var(--sn-regular-headline-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize28, 14px));
|
|
154
154
|
}
|
|
155
155
|
.content :global(.ProseMirror) h3{
|
|
156
|
-
font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, SB Sans Interface));
|
|
156
|
+
font-family:var(--sn-regular-headline-s-fontFamily, var(--sn-brand-font-fontFamily-regular-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
157
157
|
font-weight:var(--sn-regular-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-headline-s, var(--sn-brand-font-fontWeight-light-regular-headline-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
158
|
-
line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-
|
|
159
|
-
font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-
|
|
158
|
+
line-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
|
|
159
|
+
font-size:var(--sn-regular-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
|
|
160
160
|
letter-spacing:var(--sn-regular-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
|
|
161
161
|
paragraph-spacing:var(--sn-regular-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
|
|
162
162
|
}
|
|
163
163
|
.content :global(.ProseMirror) h4{
|
|
164
|
-
font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
|
|
164
|
+
font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
165
165
|
font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
166
|
-
line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-
|
|
167
|
-
font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-
|
|
166
|
+
line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
|
|
167
|
+
font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
|
|
168
168
|
letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
|
|
169
169
|
paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
|
|
170
170
|
}
|
|
171
171
|
.content :global(.ProseMirror) h5{
|
|
172
|
-
font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
|
|
172
|
+
font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
|
|
173
173
|
font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
|
|
174
|
-
line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-
|
|
175
|
-
font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-
|
|
174
|
+
line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
|
|
175
|
+
font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
|
|
176
176
|
letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
|
|
177
177
|
paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
|
|
178
178
|
}
|
|
@@ -193,12 +193,12 @@
|
|
|
193
193
|
.content :global(.ProseMirror) code{
|
|
194
194
|
min-height:var(--sn-markdown-anatomy-size-syntax-inlineCode-minHeight, var(--sn-primitive-dimension-20, 20px));
|
|
195
195
|
padding:0 var(--sn-markdown-anatomy-size-syntax-inlineCode-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
|
|
196
|
-
border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-
|
|
197
|
-
font-family:var(--sn-brand-font-fontFamily-mono-body,
|
|
196
|
+
border-radius:var(--sn-markdown-anatomy-size-syntax-inlineCode-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
|
|
197
|
+
font-family:var(--sn-brand-font-fontFamily-mono-body, var(--sn-primitive-fontFamily-brandA-mono, SB Sans Text Mono));
|
|
198
198
|
background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
|
|
199
199
|
}
|
|
200
200
|
.content :global(.ProseMirror) a{
|
|
201
|
-
color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-
|
|
201
|
+
color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
|
|
202
202
|
text-decoration:underline;
|
|
203
203
|
}
|
|
204
204
|
.content :global(.ProseMirror) table{
|
|
@@ -256,8 +256,8 @@
|
|
|
256
256
|
.content :global(.ProseMirror) pre{
|
|
257
257
|
overflow-x:auto;
|
|
258
258
|
padding:var(--sn-primitive-dimension-12, 12px);
|
|
259
|
-
border-radius:var(--sn-density-radius-2xs, var(--sn-
|
|
260
|
-
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-
|
|
259
|
+
border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
|
|
260
|
+
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
|
|
261
261
|
}
|
|
262
262
|
.content :global(.ProseMirror) pre code{
|
|
263
263
|
min-height:0;
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
align-items:center;
|
|
12
12
|
justify-content:center;
|
|
13
13
|
box-sizing:border-box;
|
|
14
|
-
min-width:var(--sn-button-anatomy-size-s-container-iconOnly-minWidth, var(--sn-density-size-s, var(--sn-
|
|
15
|
-
height:var(--sn-button-anatomy-size-s-container-minHeight, var(--sn-density-size-s, var(--sn-
|
|
14
|
+
min-width:var(--sn-button-anatomy-size-s-container-iconOnly-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
|
|
15
|
+
height:var(--sn-button-anatomy-size-s-container-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
|
|
16
16
|
padding:0;
|
|
17
17
|
border:0;
|
|
18
|
-
border-radius:var(--sn-density-radius-2xs, var(--sn-
|
|
19
|
-
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-
|
|
18
|
+
border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
|
|
19
|
+
color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
|
|
20
20
|
background:transparent;
|
|
21
21
|
}
|
|
22
22
|
.root:has(.chevron){
|
|
@@ -25,18 +25,18 @@
|
|
|
25
25
|
}
|
|
26
26
|
.root svg{
|
|
27
27
|
flex:0 0 auto;
|
|
28
|
-
stroke-width:var(--sn-density-
|
|
28
|
+
stroke-width:var(--sn-density-size-icon-strokeWeight-s, 1.5px);
|
|
29
29
|
}
|
|
30
30
|
.root svg:not(.chevron){
|
|
31
|
-
width:var(--sn-density-
|
|
32
|
-
height:var(--sn-density-
|
|
31
|
+
width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
|
|
32
|
+
height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
|
|
33
33
|
}
|
|
34
34
|
.root:focus-visible{
|
|
35
35
|
outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
|
|
36
36
|
outline-offset:0;
|
|
37
37
|
}
|
|
38
38
|
.root[data-checked]{
|
|
39
|
-
color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-
|
|
39
|
+
color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
40
40
|
}
|
|
41
41
|
.root[data-disabled]{
|
|
42
42
|
cursor:not-allowed;
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
|
|
57
57
|
}
|
|
58
58
|
.root .stateLayer[data-state=activatedOnBackground]{
|
|
59
|
-
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.
|
|
59
|
+
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
|
|
60
60
|
}
|
|
61
61
|
.root .stateLayer[data-state=versionOnColor]{
|
|
62
62
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
|
|
82
82
|
}
|
|
83
83
|
.root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
84
|
-
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.
|
|
84
|
+
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
|
|
85
85
|
}
|
|
86
86
|
.root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
87
87
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
|
|
109
109
|
}
|
|
110
110
|
.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
111
|
-
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.
|
|
111
|
+
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
|
|
112
112
|
}
|
|
113
113
|
.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
114
114
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
height:var(--sn-markdown-anatomy-size-tableSelect-container-item-size, var(--sn-primitive-dimension-16, 16px));
|
|
12
12
|
padding:0;
|
|
13
13
|
border:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderWidth, var(--sn-primitive-strokeWeight-strokeRegular, 1px)) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
|
|
14
|
-
border-radius:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderRadius, var(--sn-density-radius-2xs, var(--sn-
|
|
14
|
+
border-radius:var(--sn-markdown-anatomy-size-tableSelect-container-item-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
|
|
15
15
|
}
|
|
16
16
|
.root[data-checked]{
|
|
17
|
-
border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-
|
|
17
|
+
border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
|
|
18
18
|
}
|
|
19
19
|
.root .stateLayer{
|
|
20
20
|
position:absolute;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
|
|
31
31
|
}
|
|
32
32
|
.root .stateLayer[data-state=activatedOnBackground]{
|
|
33
|
-
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.
|
|
33
|
+
background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
|
|
34
34
|
}
|
|
35
35
|
.root .stateLayer[data-state=versionOnColor]{
|
|
36
36
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
|
|
56
56
|
}
|
|
57
57
|
.root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
58
|
-
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.
|
|
58
|
+
background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
|
|
59
59
|
}
|
|
60
60
|
.root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
61
61
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
|
|
83
83
|
}
|
|
84
84
|
.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
|
|
85
|
-
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.
|
|
85
|
+
background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
|
|
86
86
|
}
|
|
87
87
|
.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
|
|
88
88
|
background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.label{
|
|
21
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-
|
|
22
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-
|
|
21
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px));
|
|
22
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px));
|
|
23
23
|
color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
|
|
24
24
|
text-align:center;
|
|
25
25
|
}
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
box-sizing:border-box;
|
|
34
34
|
padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
|
|
35
35
|
border:none;
|
|
36
|
-
font-family:var(--sn-brand-font-fontFamily-regular-body,
|
|
37
|
-
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-
|
|
38
|
-
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-
|
|
36
|
+
font-family:var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface));
|
|
37
|
+
font-size:var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px));
|
|
38
|
+
line-height:var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px));
|
|
39
39
|
color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
|
|
40
40
|
text-align:left;
|
|
41
41
|
background:transparent;
|
|
42
42
|
}
|
|
43
43
|
.customize:hover{
|
|
44
|
-
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-
|
|
44
|
+
background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.customizeLabel{
|