@dialpad/dialtone-css 8.29.2 → 8.30.0-alpha.1
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/README.md +2 -2
- package/lib/build/less/components/icon.less +6 -0
- package/lib/build/less/dialtone-globals.less +1 -0
- package/lib/build/less/utilities/interactivity.less +3 -3
- package/lib/dist/{css/dialtone.css → dialtone.css} +15 -6
- package/lib/dist/dialtone.min.css +1 -0
- package/package.json +11 -5
- package/CHANGELOG.json +0 -1
- package/lib/dist/css/dialtone.min.css +0 -1
package/README.md
CHANGED
|
@@ -16,13 +16,13 @@ npm install @dialpad/dialtone-css@latest
|
|
|
16
16
|
- CSS/LESS:
|
|
17
17
|
|
|
18
18
|
```less
|
|
19
|
-
@import "
|
|
19
|
+
@import "@dialpad/dialtone-css";
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
- Javascript:
|
|
23
23
|
|
|
24
24
|
```js
|
|
25
|
-
import '@dialpad/dialtone-css
|
|
25
|
+
import '@dialpad/dialtone-css';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
### Add dialtone's theme class to the `<body>`
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
// Sets the style, width, color, and other characteristics
|
|
43
43
|
// elements' outlines. These shouldn't be confused with borders.
|
|
44
44
|
// ----------------------------------------------------------------------------
|
|
45
|
-
.d-ol-focusring { box-shadow: var(--dt-shadow-focus) !important; }
|
|
46
|
-
.d-ol-focusring-inset { box-shadow: var(--dt-shadow-focus-inset) !important; }
|
|
47
|
-
.d-ol-none { box-shadow: none !important; }
|
|
45
|
+
.d-ol-focusring { box-shadow: var(--dt-shadow-focus) !important; outline: none !important; }
|
|
46
|
+
.d-ol-focusring-inset { box-shadow: var(--dt-shadow-focus-inset) !important; outline: none !important; }
|
|
47
|
+
.d-ol-none { box-shadow: none !important; outline: none !important; }
|
|
48
48
|
|
|
49
49
|
//============================================================================
|
|
50
50
|
// $ POINTER EVENTS
|
|
@@ -4193,6 +4193,11 @@ legend .d-label {
|
|
|
4193
4193
|
.d-icon--size-100 {
|
|
4194
4194
|
--icon-size: var(--icon-size-100);
|
|
4195
4195
|
}
|
|
4196
|
+
.d-icon__wrapper {
|
|
4197
|
+
display: inline-flex;
|
|
4198
|
+
align-items: center;
|
|
4199
|
+
justify-content: center;
|
|
4200
|
+
}
|
|
4196
4201
|
.d-bga-scroll {
|
|
4197
4202
|
background-attachment: scroll !important;
|
|
4198
4203
|
}
|
|
@@ -6141,12 +6146,15 @@ legend .d-label {
|
|
|
6141
6146
|
}
|
|
6142
6147
|
.d-ol-focusring {
|
|
6143
6148
|
box-shadow: var(--dt-shadow-focus) !important;
|
|
6149
|
+
outline: none !important;
|
|
6144
6150
|
}
|
|
6145
6151
|
.d-ol-focusring-inset {
|
|
6146
6152
|
box-shadow: var(--dt-shadow-focus-inset) !important;
|
|
6153
|
+
outline: none !important;
|
|
6147
6154
|
}
|
|
6148
6155
|
.d-ol-none {
|
|
6149
6156
|
box-shadow: none !important;
|
|
6157
|
+
outline: none !important;
|
|
6150
6158
|
}
|
|
6151
6159
|
.d-pe-auto {
|
|
6152
6160
|
pointer-events: auto !important;
|
|
@@ -7391,6 +7399,7 @@ body {
|
|
|
7391
7399
|
font: var(--dt-typography-body-md);
|
|
7392
7400
|
background-color: var(--dt-color-surface-primary);
|
|
7393
7401
|
-webkit-text-size-adjust: 100%;
|
|
7402
|
+
-webkit-font-smoothing: antialiased;
|
|
7394
7403
|
}
|
|
7395
7404
|
body {
|
|
7396
7405
|
--bgo: 100%;
|
|
@@ -7461,7 +7470,7 @@ body {
|
|
|
7461
7470
|
}
|
|
7462
7471
|
/**
|
|
7463
7472
|
* Do not edit directly
|
|
7464
|
-
* Generated on
|
|
7473
|
+
* Generated on Wed, 03 Apr 2024 22:36:17 GMT
|
|
7465
7474
|
*/
|
|
7466
7475
|
|
|
7467
7476
|
.dialtone-theme-light {
|
|
@@ -7936,13 +7945,13 @@ body {
|
|
|
7936
7945
|
--dt-shadow-focus-2-x: 0rem;
|
|
7937
7946
|
--dt-shadow-focus-2-y: 0rem;
|
|
7938
7947
|
--dt-shadow-focus-2-blur: 0rem;
|
|
7939
|
-
--dt-shadow-focus-2-spread: 0.
|
|
7948
|
+
--dt-shadow-focus-2-spread: 0.3rem;
|
|
7940
7949
|
--dt-shadow-focus-2-color: #51A0FE;
|
|
7941
7950
|
--dt-shadow-focus-2-type: dropShadow;
|
|
7942
7951
|
--dt-shadow-focus-inset-1-x: 0rem;
|
|
7943
7952
|
--dt-shadow-focus-inset-1-y: 0rem;
|
|
7944
7953
|
--dt-shadow-focus-inset-1-blur: 0rem;
|
|
7945
|
-
--dt-shadow-focus-inset-1-spread: 0.
|
|
7954
|
+
--dt-shadow-focus-inset-1-spread: 0.2rem;
|
|
7946
7955
|
--dt-shadow-focus-inset-1-color: #51A0FE;
|
|
7947
7956
|
--dt-shadow-focus-inset-1-type: innerShadow;
|
|
7948
7957
|
--dt-typography-body-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base default medium text style for main content. */
|
|
@@ -8278,7 +8287,7 @@ body {
|
|
|
8278
8287
|
|
|
8279
8288
|
/**
|
|
8280
8289
|
* Do not edit directly
|
|
8281
|
-
* Generated on
|
|
8290
|
+
* Generated on Wed, 03 Apr 2024 22:36:17 GMT
|
|
8282
8291
|
*/
|
|
8283
8292
|
|
|
8284
8293
|
.dialtone-theme-dark {
|
|
@@ -8873,13 +8882,13 @@ body {
|
|
|
8873
8882
|
--dt-shadow-focus-2-x: 0rem;
|
|
8874
8883
|
--dt-shadow-focus-2-y: 0rem;
|
|
8875
8884
|
--dt-shadow-focus-2-blur: 0rem;
|
|
8876
|
-
--dt-shadow-focus-2-spread: 0.
|
|
8885
|
+
--dt-shadow-focus-2-spread: 0.3rem;
|
|
8877
8886
|
--dt-shadow-focus-2-color: #51A0FE;
|
|
8878
8887
|
--dt-shadow-focus-2-type: dropShadow;
|
|
8879
8888
|
--dt-shadow-focus-inset-1-x: 0rem;
|
|
8880
8889
|
--dt-shadow-focus-inset-1-y: 0rem;
|
|
8881
8890
|
--dt-shadow-focus-inset-1-blur: 0rem;
|
|
8882
|
-
--dt-shadow-focus-inset-1-spread: 0.
|
|
8891
|
+
--dt-shadow-focus-inset-1-spread: 0.2rem;
|
|
8883
8892
|
--dt-shadow-focus-inset-1-color: #51A0FE;
|
|
8884
8893
|
--dt-shadow-focus-inset-1-type: innerShadow;
|
|
8885
8894
|
--dt-typography-body-md-font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Base default medium text style for main content. */
|