@dialpad/dialtone 7.14.0 → 7.15.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/lib/build/js/dialtone_health_check/deprecated_icons.js +104 -0
- package/lib/build/js/dialtone_health_check/index.js +82 -0
- package/lib/build/js/dialtone_health_check/non_dialtone_properties.js +44 -0
- package/lib/build/less/components/banner.less +2 -2
- package/lib/build/less/components/radio-checkbox.less +1 -76
- package/lib/build/less/components/root-layout.less +19 -0
- package/lib/build/less/dialtone.less +1 -0
- package/lib/dist/css/dialtone.css +8 -59
- package/lib/dist/css/dialtone.min.css +1 -1
- package/lib/dist/js/dialtone_health_check/deprecated_icons.js +104 -0
- package/lib/dist/js/dialtone_health_check/index.js +82 -0
- package/lib/dist/js/dialtone_health_check/non_dialtone_properties.js +44 -0
- package/package.json +5 -4
- package/lib/build/js/dialtone_health_check.js +0 -101
- package/lib/dist/js/dialtone_health_check.js +0 -101
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const iconRegex = /.*@dialpad\/dialtone\/(vue\/.*|.+\.svg)/gim;
|
|
3
|
+
const brandIconsList = [
|
|
4
|
+
'IconAirtable',
|
|
5
|
+
'IconAmex',
|
|
6
|
+
'IconAppStoreBadge',
|
|
7
|
+
'IconApple',
|
|
8
|
+
'IconAsana',
|
|
9
|
+
'IconBrandDialpadMeetings',
|
|
10
|
+
'IconBrandDialpad',
|
|
11
|
+
'IconBullhorn',
|
|
12
|
+
'IconClockify',
|
|
13
|
+
'IconCopperCrm',
|
|
14
|
+
'IconDialpadAi',
|
|
15
|
+
'IconDinersClub',
|
|
16
|
+
'IconDiscover',
|
|
17
|
+
'IconEvernote',
|
|
18
|
+
'IconFacebook',
|
|
19
|
+
'IconFreshsalesCrm',
|
|
20
|
+
'IconFront',
|
|
21
|
+
'IconGmail',
|
|
22
|
+
'IconGoogleBusinessMessaging',
|
|
23
|
+
'IconGoogleCalendar',
|
|
24
|
+
'IconGoogleDocs',
|
|
25
|
+
'IconGoogleDrive',
|
|
26
|
+
'IconGoogleGlyph',
|
|
27
|
+
'IconGreenhouse',
|
|
28
|
+
'IconHighfive',
|
|
29
|
+
'IconHubspot',
|
|
30
|
+
'IconInstagram',
|
|
31
|
+
'IconIntercom',
|
|
32
|
+
'IconJcb',
|
|
33
|
+
'IconJiraServiceDesk',
|
|
34
|
+
'IconLineMessenger',
|
|
35
|
+
'IconLinkedin',
|
|
36
|
+
'IconMaestro',
|
|
37
|
+
'IconMastercard',
|
|
38
|
+
'IconMessenger',
|
|
39
|
+
'IconMicrosoftDynamics365',
|
|
40
|
+
'IconMicrosoftTeams',
|
|
41
|
+
'IconMicrosoft',
|
|
42
|
+
'IconMiro',
|
|
43
|
+
'IconMondayCom',
|
|
44
|
+
'IconOffice365',
|
|
45
|
+
'IconPipedrive',
|
|
46
|
+
'IconPlayStoreBadge',
|
|
47
|
+
'IconSalesforceGlyph',
|
|
48
|
+
'IconSalesforceLogo',
|
|
49
|
+
'IconServicenow',
|
|
50
|
+
'IconSlack',
|
|
51
|
+
'IconSnapchat',
|
|
52
|
+
'IconTelegram',
|
|
53
|
+
'IconTiktok',
|
|
54
|
+
'IconToggl',
|
|
55
|
+
'IconTwitter',
|
|
56
|
+
'IconUnionPay',
|
|
57
|
+
'IconViber',
|
|
58
|
+
'IconVisa',
|
|
59
|
+
'IconWeChat',
|
|
60
|
+
'IconWhatsapp',
|
|
61
|
+
'IconZendesk',
|
|
62
|
+
'IconZohoCrm',
|
|
63
|
+
'IconZohoDesk',
|
|
64
|
+
'IconZoho',
|
|
65
|
+
'IconZoom',
|
|
66
|
+
];
|
|
67
|
+
let totalIconsCount = 0;
|
|
68
|
+
|
|
69
|
+
function isBrandIcon (source) {
|
|
70
|
+
const iconName = source.split('/').pop().slice(0, -2);
|
|
71
|
+
return brandIconsList.includes(iconName);
|
|
72
|
+
}
|
|
73
|
+
const main = (files, noLineNumbers) => {
|
|
74
|
+
try {
|
|
75
|
+
for (const file of files) {
|
|
76
|
+
const data = fs.readFileSync(file, 'utf8');
|
|
77
|
+
const lines = data.split('\n');
|
|
78
|
+
let iconCount = 0;
|
|
79
|
+
|
|
80
|
+
for (const [lineNumber, line] of lines.entries()) {
|
|
81
|
+
const iconMatch = iconRegex.exec(line);
|
|
82
|
+
// If import doesn't match or is a brand or spot icon, continue
|
|
83
|
+
if (!iconMatch ||
|
|
84
|
+
iconMatch.input.includes('/brand/') ||
|
|
85
|
+
iconMatch.input.includes('/spot/') ||
|
|
86
|
+
isBrandIcon(iconMatch.input)) continue;
|
|
87
|
+
|
|
88
|
+
if (!noLineNumbers) {
|
|
89
|
+
console.log(`\tdeprecated icon usage found on line ${lineNumber + 1}: ${iconMatch.input}`);
|
|
90
|
+
}
|
|
91
|
+
iconCount++;
|
|
92
|
+
totalIconsCount++;
|
|
93
|
+
}
|
|
94
|
+
if (iconCount > 0) {
|
|
95
|
+
console.log(`${file}: ${iconCount} Deprecated icons found`);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
console.log(`Found ${totalIconsCount} total deprecated icons usage in this directory.`);
|
|
99
|
+
} catch (err) {
|
|
100
|
+
console.error(err);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
module.exports = main;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
/* Will search the files in the provided directory for any properties that are not set to dialtone values.
|
|
4
|
+
It does this by simply checking whether the property is set to a less @variable or CSS var such as var(--val).
|
|
5
|
+
It does not compare to an actual list of dialtone token values so it is not perfect, and sometimes gives false
|
|
6
|
+
positives. This will however give a pretty good idea of where dialtone values aren't being used that should.
|
|
7
|
+
|
|
8
|
+
Searches some key properties by default as shown in the defaultSearch array below. You are however not limited to
|
|
9
|
+
this, you can make this application search any css property you wish. See the below options or run this application
|
|
10
|
+
with the -h switch for more details. */
|
|
11
|
+
|
|
12
|
+
const path = require('path');
|
|
13
|
+
const fs = require('fs');
|
|
14
|
+
const { exit } = require('process');
|
|
15
|
+
const { docopt } = require('docopt');
|
|
16
|
+
const nonDialtoneProperties = require('./non_dialtone_properties');
|
|
17
|
+
const deprecatedIcons = require('./deprecated_icons');
|
|
18
|
+
|
|
19
|
+
const doc = `
|
|
20
|
+
Usage:
|
|
21
|
+
./dialtone_health_check <path> [options] (--icons|--properties) [<properties>]
|
|
22
|
+
|
|
23
|
+
Examples:
|
|
24
|
+
./dialtone_health_check <path> --ext=vue,js --no-line-numbers --icons
|
|
25
|
+
./dialtone_health_check <path> --ext=vue,js --properties color,background-color
|
|
26
|
+
./dialtone_health_check <path> --ext=vue,js --icons --properties color,background-color
|
|
27
|
+
|
|
28
|
+
Arguments:
|
|
29
|
+
<properties> CSS Properties to search. Default properties if list is not provided:
|
|
30
|
+
color,background-color,border-color,font-family
|
|
31
|
+
<path> The directory to recursively search all files in.
|
|
32
|
+
|
|
33
|
+
Options:
|
|
34
|
+
-p --properties Verify the usage of non-dialtone properties.
|
|
35
|
+
-i --icons Verify the status of icons migration.
|
|
36
|
+
-h --help Show this screen.
|
|
37
|
+
--ext=<ext> Filter by file extension. comma separate to filter multiple. ex: js,vue
|
|
38
|
+
--no-line-numbers Only output files and their total count, do not output individual instances and
|
|
39
|
+
their line number.
|
|
40
|
+
`;
|
|
41
|
+
const options = docopt(doc);
|
|
42
|
+
const extensionFilters = options['--ext']?.split(',') ?? [''];
|
|
43
|
+
const searchProperties = options['--properties'];
|
|
44
|
+
const properties = options['<properties>']?.split(',');
|
|
45
|
+
const noLineNumbers = options['--no-line-numbers'];
|
|
46
|
+
const searchIcons = options['--icons'];
|
|
47
|
+
const files = [];
|
|
48
|
+
|
|
49
|
+
function fromDir (startPath, fileExtension) {
|
|
50
|
+
if (!fs.existsSync(startPath)) {
|
|
51
|
+
console.error('Directory not found');
|
|
52
|
+
exit(1);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const results = [];
|
|
56
|
+
const files = fs.readdirSync(startPath);
|
|
57
|
+
for (let i = 0; i < files.length; i++) {
|
|
58
|
+
const filename = path.join(startPath, files[i]);
|
|
59
|
+
const stat = fs.lstatSync(filename);
|
|
60
|
+
if (stat.isDirectory()) {
|
|
61
|
+
results.push(...fromDir(filename, fileExtension)); // recurse
|
|
62
|
+
} else if (filename.endsWith(fileExtension)) {
|
|
63
|
+
results.push(filename);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
return results;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
extensionFilters.forEach(extension => {
|
|
70
|
+
files.push(...fromDir(options['<path>'], extension));
|
|
71
|
+
});
|
|
72
|
+
if (files.length <= 0) {
|
|
73
|
+
console.error('No files found in directory');
|
|
74
|
+
exit(1);
|
|
75
|
+
}
|
|
76
|
+
if (!searchProperties && !searchIcons) {
|
|
77
|
+
console.error('You must set at least one flag [--icons|--properties]');
|
|
78
|
+
exit(1);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
searchProperties && nonDialtoneProperties(properties, files, noLineNumbers);
|
|
82
|
+
searchIcons && deprecatedIcons(files, noLineNumbers);
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const defaultSearch = [
|
|
3
|
+
'color',
|
|
4
|
+
'background-color',
|
|
5
|
+
'border-color',
|
|
6
|
+
'font-family',
|
|
7
|
+
];
|
|
8
|
+
let totalPropertiesCount = 0;
|
|
9
|
+
|
|
10
|
+
const main = (props = defaultSearch, files, noLineNumbers) => {
|
|
11
|
+
const regex = props.map(property => {
|
|
12
|
+
return new RegExp(`^\\s*${property}:\\s(?:(?!var\\(--))(?:(?!@)).*`, 'gm');
|
|
13
|
+
});
|
|
14
|
+
try {
|
|
15
|
+
for (const file of files) {
|
|
16
|
+
const data = fs.readFileSync(file, 'utf8');
|
|
17
|
+
const lines = data.split('\n');
|
|
18
|
+
let propertiesMatch;
|
|
19
|
+
let propertiesCount = 0;
|
|
20
|
+
|
|
21
|
+
for (const [lineNumber, line] of lines.entries()) {
|
|
22
|
+
regex.forEach(re => {
|
|
23
|
+
// eslint-disable-next-line no-cond-assign
|
|
24
|
+
while (propertiesMatch = re.exec(line)) {
|
|
25
|
+
if (!noLineNumbers) {
|
|
26
|
+
console.log(`\tnon-dialtone property found on line ${lineNumber + 1}: ${propertiesMatch}`);
|
|
27
|
+
}
|
|
28
|
+
propertiesCount++;
|
|
29
|
+
totalPropertiesCount++;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
if (propertiesCount > 0) {
|
|
34
|
+
console.log(`${file}: ${propertiesCount}`);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
console.log(`Found ${totalPropertiesCount} total ${props.join(', ')} \
|
|
38
|
+
CSS properties that are not dialtone in this directory.`);
|
|
39
|
+
} catch (err) {
|
|
40
|
+
console.error(err);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
module.exports = main;
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
--banner-color-background: var(--bgc-secondary);
|
|
19
19
|
--banner-color-text: var(--fc-primary);
|
|
20
20
|
--notice-color-icon: var(--toast-color-text);
|
|
21
|
-
--banner-color-border:
|
|
21
|
+
--banner-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
22
22
|
--banner-font-size: var(--fs-200);
|
|
23
23
|
--banner-line-height: var(--lh-200);
|
|
24
24
|
--banner-dialog-padding-y: var(--space-400);
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
font-size: var(--banner-font-size);
|
|
38
38
|
line-height: var(--banner-line-height);
|
|
39
39
|
background-color: var(--banner-color-background);
|
|
40
|
+
border-bottom: 1px solid var(--banner-color-border);
|
|
40
41
|
border-radius: 0;
|
|
41
42
|
box-shadow: none;
|
|
42
43
|
|
|
@@ -76,7 +77,6 @@
|
|
|
76
77
|
min-height: 100%;
|
|
77
78
|
margin: 0 auto;
|
|
78
79
|
padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
|
|
79
|
-
border-bottom: var(--banner-color-border);
|
|
80
80
|
|
|
81
81
|
.d-notice__content {
|
|
82
82
|
flex-direction: row;
|
|
@@ -13,10 +13,8 @@
|
|
|
13
13
|
// • LABELS
|
|
14
14
|
// • CHECKBOXES
|
|
15
15
|
// - Modifications
|
|
16
|
-
// - Validation States
|
|
17
16
|
// • RADIOS
|
|
18
17
|
// - Modifications
|
|
19
|
-
// - Validation States
|
|
20
18
|
//
|
|
21
19
|
// ============================================================================
|
|
22
20
|
// $ RADIOS & CHECKBOXES
|
|
@@ -29,7 +27,7 @@
|
|
|
29
27
|
--check-radio-color: var(--purple-400);
|
|
30
28
|
--check-radio-color-border: var(--black-400);
|
|
31
29
|
--check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
|
|
32
|
-
--check-radio-color-background: var(--
|
|
30
|
+
--check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
|
|
33
31
|
--check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
|
|
34
32
|
--check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
|
|
35
33
|
|
|
@@ -209,76 +207,3 @@
|
|
|
209
207
|
}
|
|
210
208
|
}
|
|
211
209
|
}
|
|
212
|
-
|
|
213
|
-
// $$ CHECKBOX VALIDATION STATES
|
|
214
|
-
// ----------------------------------------------------------------------------
|
|
215
|
-
.d-checkbox--warning {
|
|
216
|
-
--check-radio-color: var(--gold-500);
|
|
217
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.d-checkbox--error {
|
|
221
|
-
--check-radio-color: var(--red-300);
|
|
222
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.d-checkbox--success {
|
|
226
|
-
--check-radio-color: var(--green-400);
|
|
227
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
// ============================================================================
|
|
231
|
-
// $ RADIOS
|
|
232
|
-
// ----------------------------------------------------------------------------
|
|
233
|
-
.d-radio {
|
|
234
|
-
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
235
|
-
border-radius: var(--br-circle);
|
|
236
|
-
|
|
237
|
-
// Disabled
|
|
238
|
-
&[disabled],
|
|
239
|
-
&--disabled {
|
|
240
|
-
--check-radio-color: var(--fc-disabled);
|
|
241
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
242
|
-
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
&:focus-visible,
|
|
246
|
-
&:checked:focus-visible {
|
|
247
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
&:checked {
|
|
251
|
-
--check-radio-color-background: var(--check-radio-color);
|
|
252
|
-
|
|
253
|
-
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
254
|
-
|
|
255
|
-
// Disabled
|
|
256
|
-
&[disabled] {
|
|
257
|
-
--check-radio-color-background: var(--black-400);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
&--disabled:checked {
|
|
262
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
263
|
-
--check-radio-color-background: var(--black-400);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
// $$ RADIO VALIDATION STATES
|
|
270
|
-
// ----------------------------------------------------------------------------
|
|
271
|
-
.d-radio--warning {
|
|
272
|
-
--check-radio-color: var(--gold-500);
|
|
273
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
.d-radio--error {
|
|
277
|
-
--check-radio-color: var(--red-300);
|
|
278
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.d-radio--success {
|
|
282
|
-
--check-radio-color: var(--green-400);
|
|
283
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
284
|
-
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: Root Layout
|
|
4
|
+
//
|
|
5
|
+
// These are the styles for root layout for Dialpad's design system Dialtone.
|
|
6
|
+
// For further documentation of these and other classes,
|
|
7
|
+
// visit https://dialpad.design/components/root-layout.html
|
|
8
|
+
//
|
|
9
|
+
// TABLE OF CONTENTS
|
|
10
|
+
// • BASE STYLE
|
|
11
|
+
//
|
|
12
|
+
// ============================================================================
|
|
13
|
+
// $ BASE STYLE
|
|
14
|
+
// ----------------------------------------------------------------------------
|
|
15
|
+
.d-root-layout {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
height: 100vh;
|
|
19
|
+
}
|
|
@@ -603,7 +603,7 @@ body {
|
|
|
603
603
|
--banner-color-background: var(--bgc-secondary);
|
|
604
604
|
--banner-color-text: var(--fc-primary);
|
|
605
605
|
--notice-color-icon: var(--toast-color-text);
|
|
606
|
-
--banner-color-border:
|
|
606
|
+
--banner-color-border: hsla(var(--black-900-hsl) / 0.1);
|
|
607
607
|
--banner-font-size: var(--fs-200);
|
|
608
608
|
--banner-line-height: var(--lh-200);
|
|
609
609
|
--banner-dialog-padding-y: var(--space-400);
|
|
@@ -621,6 +621,7 @@ body {
|
|
|
621
621
|
font-size: var(--banner-font-size);
|
|
622
622
|
line-height: var(--banner-line-height);
|
|
623
623
|
background-color: var(--banner-color-background);
|
|
624
|
+
border-bottom: 1px solid var(--banner-color-border);
|
|
624
625
|
border-radius: 0;
|
|
625
626
|
box-shadow: none;
|
|
626
627
|
}
|
|
@@ -649,7 +650,6 @@ body {
|
|
|
649
650
|
min-height: 100%;
|
|
650
651
|
margin: 0 auto;
|
|
651
652
|
padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
|
|
652
|
-
border-bottom: var(--banner-color-border);
|
|
653
653
|
}
|
|
654
654
|
.d-banner__dialog .d-notice__content {
|
|
655
655
|
flex-direction: row;
|
|
@@ -2515,7 +2515,7 @@ body {
|
|
|
2515
2515
|
--check-radio-color: var(--purple-400);
|
|
2516
2516
|
--check-radio-color-border: var(--black-400);
|
|
2517
2517
|
--check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
|
|
2518
|
-
--check-radio-color-background: var(--
|
|
2518
|
+
--check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
|
|
2519
2519
|
--check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
|
|
2520
2520
|
--check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
|
|
2521
2521
|
flex: 0 auto;
|
|
@@ -2659,62 +2659,6 @@ body {
|
|
|
2659
2659
|
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2660
2660
|
}
|
|
2661
2661
|
}
|
|
2662
|
-
.d-checkbox--warning {
|
|
2663
|
-
--check-radio-color: var(--gold-500);
|
|
2664
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2665
|
-
}
|
|
2666
|
-
.d-checkbox--error {
|
|
2667
|
-
--check-radio-color: var(--red-300);
|
|
2668
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2669
|
-
}
|
|
2670
|
-
.d-checkbox--success {
|
|
2671
|
-
--check-radio-color: var(--green-400);
|
|
2672
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2673
|
-
}
|
|
2674
|
-
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
|
|
2675
|
-
.d-radio {
|
|
2676
|
-
border-radius: var(--br-circle);
|
|
2677
|
-
}
|
|
2678
|
-
.d-radio[disabled],
|
|
2679
|
-
.d-radio--disabled {
|
|
2680
|
-
--check-radio-color: var(--fc-disabled);
|
|
2681
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2682
|
-
--check-radio-color-background: var(--check-radio-color-background-disabled);
|
|
2683
|
-
}
|
|
2684
|
-
.d-radio.focus-visible.js-focus-visible,
|
|
2685
|
-
.js-focus-visible .d-radio.focus-visible,
|
|
2686
|
-
.d-radio:checked.focus-visible.js-focus-visible,
|
|
2687
|
-
.js-focus-visible .d-radio:checked.focus-visible {
|
|
2688
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2689
|
-
}
|
|
2690
|
-
.d-radio:focus-visible,
|
|
2691
|
-
.d-radio:checked:focus-visible {
|
|
2692
|
-
box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
|
|
2693
|
-
}
|
|
2694
|
-
.d-radio:checked {
|
|
2695
|
-
--check-radio-color-background: var(--check-radio-color);
|
|
2696
|
-
box-shadow: inset 0 0 0 var(--size-200) var(--white);
|
|
2697
|
-
}
|
|
2698
|
-
.d-radio:checked[disabled] {
|
|
2699
|
-
--check-radio-color-background: var(--black-400);
|
|
2700
|
-
}
|
|
2701
|
-
.d-radio--disabled:checked {
|
|
2702
|
-
--check-radio-color-border: var(--check-radio-color-border-disabled);
|
|
2703
|
-
--check-radio-color-background: var(--black-400);
|
|
2704
|
-
}
|
|
2705
|
-
}
|
|
2706
|
-
.d-radio--warning {
|
|
2707
|
-
--check-radio-color: var(--gold-500);
|
|
2708
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2709
|
-
}
|
|
2710
|
-
.d-radio--error {
|
|
2711
|
-
--check-radio-color: var(--red-300);
|
|
2712
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2713
|
-
}
|
|
2714
|
-
.d-radio--success {
|
|
2715
|
-
--check-radio-color: var(--green-400);
|
|
2716
|
-
--check-radio-color-border: var(--check-radio-color);
|
|
2717
|
-
}
|
|
2718
2662
|
.d-select {
|
|
2719
2663
|
--select-color-border: var(--black-500);
|
|
2720
2664
|
--select-notch-position-right: calc(var(--size-300) * 2);
|
|
@@ -3531,6 +3475,11 @@ body {
|
|
|
3531
3475
|
.d-icon--size-100 {
|
|
3532
3476
|
--icon-size: var(--icon-size-100);
|
|
3533
3477
|
}
|
|
3478
|
+
.d-root-layout {
|
|
3479
|
+
display: flex;
|
|
3480
|
+
flex-direction: column;
|
|
3481
|
+
height: 100vh;
|
|
3482
|
+
}
|
|
3534
3483
|
.d-bgg-from-black-600,
|
|
3535
3484
|
.h\:d-bgg-from-black-600:hover,
|
|
3536
3485
|
.f\:d-bgg-from-black-600:focus {
|