draft-components 0.48.0 → 0.51.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.
Files changed (43) hide show
  1. package/components/checkbox/checkbox.d.ts +2 -1
  2. package/components/checkbox/checkbox.js +6 -2
  3. package/components/checkbox/checkbox.js.map +1 -1
  4. package/components/datetime-field/datetime-field.d.ts +1 -1
  5. package/components/number-field/number-field.d.ts +1 -1
  6. package/components/number-field/number-field.js +3 -7
  7. package/components/number-field/number-field.js.map +1 -1
  8. package/components/radio-button/radio-button.d.ts +2 -1
  9. package/components/radio-button/radio-button.js +6 -2
  10. package/components/radio-button/radio-button.js.map +1 -1
  11. package/components/search-field/search-field.d.ts +1 -1
  12. package/components/segmented-control/segmented-control.d.ts +4 -5
  13. package/components/segmented-control/segmented-control.js +11 -7
  14. package/components/segmented-control/segmented-control.js.map +1 -1
  15. package/components/select/select.d.ts +2 -1
  16. package/components/select/select.js +6 -2
  17. package/components/select/select.js.map +1 -1
  18. package/components/switch/switch.d.ts +1 -1
  19. package/components/switch/switch.js +6 -2
  20. package/components/switch/switch.js.map +1 -1
  21. package/components/table/index.d.ts +6 -0
  22. package/components/table/index.js +6 -0
  23. package/components/table/index.js.map +1 -1
  24. package/components/table/table-header-cell.d.ts +2 -2
  25. package/components/table/table-header-cell.js +2 -2
  26. package/components/table/table-header-cell.js.map +1 -1
  27. package/components/text-field/text-field.d.ts +2 -1
  28. package/components/text-field/text-field.js +4 -1
  29. package/components/text-field/text-field.js.map +1 -1
  30. package/components/textarea/textarea.d.ts +2 -1
  31. package/components/textarea/textarea.js +6 -2
  32. package/components/textarea/textarea.js.map +1 -1
  33. package/css/draft-components-utils.css +1 -1
  34. package/css/draft-components.css +1 -1
  35. package/package.json +3 -2
  36. package/scss/components/_radio-group.scss +2 -1
  37. package/scss/components/_table.scss +0 -5
  38. package/scss/utils/_borders.scss +21 -21
  39. package/scss/utils/_box-model.scss +7 -7
  40. package/scss/utils/_flexbox.scss +38 -38
  41. package/scss/utils/_margin.scss +11 -11
  42. package/scss/utils/_padding.scss +9 -9
  43. package/scss/utils/_typography.scss +35 -32
package/scss/utils/_flexbox.scss CHANGED
@@ -2,141 +2,141 @@
2
2
  #FLEX
3
3
  \*------------------------------------*/
4
4
  .d-flex {
5
- display: flex;
5
+ display: flex !important;
6
6
  }
7
7
  .d-inline-flex {
8
- display: inline-flex;
8
+ display: inline-flex !important;
9
9
  }
10
10
 
11
11
  .flex-center {
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
12
+ display: flex !important;
13
+ align-items: center !important;
14
+ justify-content: center !important;
15
15
  }
16
16
 
17
17
  /*------------------------------------*\
18
18
  #FLEX DIRECTION
19
19
  \*------------------------------------*/
20
20
  .flex-row {
21
- flex-direction: row;
21
+ flex-direction: row !important;
22
22
  }
23
23
  .flex-row-reverse {
24
- flex-direction: row-reverse;
24
+ flex-direction: row-reverse !important;
25
25
  }
26
26
  .flex-column {
27
- flex-direction: column;
27
+ flex-direction: column !important;
28
28
  }
29
29
  .flex-column-reverse {
30
- flex-direction: column-reverse;
30
+ flex-direction: column-reverse !important;
31
31
  }
32
32
 
33
33
  /*------------------------------------*\
34
34
  #FLEX WRAP
35
35
  \*------------------------------------*/
36
36
  .flex-wrap {
37
- flex-wrap: wrap;
37
+ flex-wrap: wrap !important;
38
38
  }
39
39
  .flex-nowrap {
40
- flex-wrap: nowrap;
40
+ flex-wrap: nowrap !important;
41
41
  }
42
42
  .flex-wrap-reverse {
43
- flex-wrap: wrap-reverse;
43
+ flex-wrap: wrap-reverse !important;
44
44
  }
45
45
 
46
46
  /*------------------------------------*\
47
47
  #JUSTIFY CONTENT
48
48
  \*------------------------------------*/
49
49
  .flex-justify-start {
50
- justify-content: flex-start;
50
+ justify-content: flex-start !important;
51
51
  }
52
52
  .flex-justify-end {
53
- justify-content: flex-end;
53
+ justify-content: flex-end !important;
54
54
  }
55
55
  .flex-justify-center {
56
- justify-content: center;
56
+ justify-content: center !important;
57
57
  }
58
58
  .flex-justify-between {
59
- justify-content: space-between;
59
+ justify-content: space-between !important;
60
60
  }
61
61
  .flex-justify-around {
62
- justify-content: space-around;
62
+ justify-content: space-around !important;
63
63
  }
64
64
 
65
65
  /*------------------------------------*\
66
66
  #ALIGN ITEMS
67
67
  \*------------------------------------*/
68
68
  .flex-items-start {
69
- align-items: flex-start;
69
+ align-items: flex-start !important;
70
70
  }
71
71
  .flex-items-end {
72
- align-items: flex-end;
72
+ align-items: flex-end !important;
73
73
  }
74
74
  .flex-items-center {
75
- align-items: center;
75
+ align-items: center !important;
76
76
  }
77
77
  .flex-items-baseline {
78
- align-items: baseline;
78
+ align-items: baseline !important;
79
79
  }
80
80
  .flex-items-stretch {
81
- align-items: stretch;
81
+ align-items: stretch !important;
82
82
  }
83
83
 
84
84
  /*------------------------------------*\
85
85
  #ALIGN CONTENT
86
86
  \*------------------------------------*/
87
87
  .flex-content-start {
88
- align-content: flex-start;
88
+ align-content: flex-start !important;
89
89
  }
90
90
  .flex-content-end {
91
- align-content: flex-end;
91
+ align-content: flex-end !important;
92
92
  }
93
93
  .flex-content-center {
94
- align-content: center;
94
+ align-content: center !important;
95
95
  }
96
96
  .flex-content-between {
97
- align-content: space-between;
97
+ align-content: space-between !important;
98
98
  }
99
99
  .flex-content-around {
100
- align-content: space-around;
100
+ align-content: space-around !important;
101
101
  }
102
102
  .flex-content-stretch {
103
- align-content: stretch;
103
+ align-content: stretch !important;
104
104
  }
105
105
 
106
106
  /*------------------------------------*\
107
107
  #FLEX
108
108
  \*------------------------------------*/
109
109
  .flex-1 {
110
- flex: 1;
110
+ flex: 1 !important;
111
111
  }
112
112
  .flex-auto {
113
- flex: auto;
113
+ flex: auto !important;
114
114
  }
115
115
  .flex-grow-0 {
116
- flex-grow: 0;
116
+ flex-grow: 0 !important;
117
117
  }
118
118
  .flex-shrink-0 {
119
- flex-shrink: 0;
119
+ flex-shrink: 0 !important;
120
120
  }
121
121
 
122
122
  /*------------------------------------*\
123
123
  #ALIGN SELF
124
124
  \*------------------------------------*/
125
125
  .flex-self-auto {
126
- align-self: auto;
126
+ align-self: auto !important;
127
127
  }
128
128
  .flex-self-start {
129
- align-self: flex-start;
129
+ align-self: flex-start !important;
130
130
  }
131
131
  .flex-self-end {
132
- align-self: flex-end;
132
+ align-self: flex-end !important;
133
133
  }
134
134
  .flex-self-center {
135
- align-self: center;
135
+ align-self: center !important;
136
136
  }
137
137
  .flex-self-baseline {
138
- align-self: baseline;
138
+ align-self: baseline !important;
139
139
  }
140
140
  .flex-self-stretch {
141
- align-self: stretch;
141
+ align-self: stretch !important;
142
142
  }
package/scss/utils/_margin.scss CHANGED
@@ -16,37 +16,37 @@ $margin-scale: (
16
16
 
17
17
  @each $scale, $margin in $margin-scale {
18
18
  .m-#{$scale} {
19
- margin: $margin;
19
+ margin: $margin !important;
20
20
  }
21
21
 
22
22
  .mx-#{$scale} {
23
- margin-right: $margin;
24
- margin-left: $margin;
23
+ margin-right: $margin !important;
24
+ margin-left: $margin !important;
25
25
  }
26
26
 
27
27
  .my-#{$scale} {
28
- margin-top: $margin;
29
- margin-bottom: $margin;
28
+ margin-top: $margin !important;
29
+ margin-bottom: $margin !important;
30
30
  }
31
31
 
32
32
  .mt-#{$scale} {
33
- margin-top: $margin;
33
+ margin-top: $margin !important;
34
34
  }
35
35
 
36
36
  .mr-#{$scale} {
37
- margin-right: $margin;
37
+ margin-right: $margin !important;
38
38
  }
39
39
 
40
40
  .mb-#{$scale} {
41
- margin-bottom: $margin;
41
+ margin-bottom: $margin !important;
42
42
  }
43
43
 
44
44
  .ml-#{$scale} {
45
- margin-left: $margin;
45
+ margin-left: $margin !important;
46
46
  }
47
47
  }
48
48
 
49
49
  .mx-auto {
50
- margin-right: auto;
51
- margin-left: auto;
50
+ margin-right: auto !important;
51
+ margin-left: auto !important;
52
52
  }
package/scss/utils/_padding.scss CHANGED
@@ -16,32 +16,32 @@ $padding-scale: (
16
16
 
17
17
  @each $scale, $padding in $padding-scale {
18
18
  .p-#{$scale} {
19
- padding: $padding;
19
+ padding: $padding !important;
20
20
  }
21
21
 
22
22
  .px-#{$scale} {
23
- padding-right: $padding;
24
- padding-left: $padding;
23
+ padding-right: $padding !important;
24
+ padding-left: $padding !important;
25
25
  }
26
26
 
27
27
  .py-#{$scale} {
28
- padding-top: $padding;
29
- padding-bottom: $padding;
28
+ padding-top: $padding !important;
29
+ padding-bottom: $padding !important;
30
30
  }
31
31
 
32
32
  .pt-#{$scale} {
33
- padding-top: $padding;
33
+ padding-top: $padding !important;
34
34
  }
35
35
 
36
36
  .pr-#{$scale} {
37
- padding-right: $padding;
37
+ padding-right: $padding !important;
38
38
  }
39
39
 
40
40
  .pb-#{$scale} {
41
- padding-bottom: $padding;
41
+ padding-bottom: $padding !important;
42
42
  }
43
43
 
44
44
  .pl-#{$scale} {
45
- padding-left: $padding;
45
+ padding-left: $padding !important;
46
46
  }
47
47
  }
package/scss/utils/_typography.scss CHANGED
@@ -4,121 +4,124 @@
4
4
  #TEXT COLOR
5
5
  \*------------------------------------*/
6
6
  .color-inherit {
7
- color: inherit;
7
+ color: inherit !important;
8
8
  }
9
9
  .color-primary {
10
- color: var(--dc-primary-text-color);
10
+ color: var(--dc-primary-text-color) !important;
11
11
  }
12
12
  .color-secondary {
13
- color: var(--dc-secondary-text-color);
13
+ color: var(--dc-secondary-text-color) !important;
14
14
  }
15
15
  .color-tertiary {
16
- color: var(--dc-tertiary-text-color);
16
+ color: var(--dc-tertiary-text-color) !important;
17
17
  }
18
18
  .color-link {
19
- color: var(--dc-link-text-color);
19
+ color: var(--dc-link-text-color) !important;
20
20
  }
21
21
  .color-error {
22
- color: var(--dc-error-text-color);
22
+ color: var(--dc-error-text-color) !important;
23
23
  }
24
24
  .color-warning {
25
- color: var(--dc-warning-text-color);
25
+ color: var(--dc-warning-text-color) !important;
26
26
  }
27
27
  .color-info {
28
- color: var(--dc-info-text-color);
28
+ color: var(--dc-info-text-color) !important;
29
29
  }
30
30
  .color-success {
31
- color: var(--dc-success-text-color);
31
+ color: var(--dc-success-text-color) !important;
32
32
  }
33
33
 
34
34
  /*------------------------------------*\
35
35
  #TEXT WEIGHT
36
36
  \*------------------------------------*/
37
37
  .text-light {
38
- font-weight: 300;
38
+ font-weight: 300 !important;
39
39
  }
40
40
  .text-normal {
41
- font-weight: 400;
41
+ font-weight: 400 !important;
42
42
  }
43
43
  .text-medium {
44
- font-weight: 500;
44
+ font-weight: 500 !important;
45
45
  }
46
46
  .text-semibold {
47
- font-weight: 600;
47
+ font-weight: 600 !important;
48
48
  }
49
49
  .text-bold {
50
- font-weight: 700;
50
+ font-weight: 700 !important;
51
51
  }
52
52
  .text-extrabold {
53
- font-weight: 800;
53
+ font-weight: 800 !important;
54
54
  }
55
55
 
56
56
  /*------------------------------------*\
57
57
  #TEXT STYLE
58
58
  \*------------------------------------*/
59
59
  .text-italic {
60
- font-style: italic;
60
+ font-style: italic !important;
61
61
  }
62
62
  .text-uppercase {
63
- text-transform: uppercase;
63
+ text-transform: uppercase !important;
64
64
  }
65
65
  .text-no-underline {
66
- text-decoration: none;
66
+ text-decoration: none !important;
67
67
  }
68
68
  .text-no-select {
69
69
  user-select: none !important;
70
70
  }
71
+ .text-no-wrap {
72
+ white-space: nowrap !important;
73
+ }
71
74
 
72
75
  /*------------------------------------*\
73
76
  #TEXT ALIGNMENT
74
77
  \*------------------------------------*/
75
78
  .text-right {
76
- text-align: right;
79
+ text-align: right !important;
77
80
  }
78
81
  .text-center {
79
- text-align: center;
82
+ text-align: center !important;
80
83
  }
81
84
  .text-left {
82
- text-align: left;
85
+ text-align: left !important;
83
86
  }
84
87
 
85
88
  /*------------------------------------*\
86
89
  #FONT SIZE
87
90
  \*------------------------------------*/
88
91
  .fs-xs {
89
- font-size: dc.$font-size-xs;
92
+ font-size: dc.$font-size-xs !important;
90
93
  }
91
94
  .fs-sm {
92
- font-size: dc.$font-size-sm;
95
+ font-size: dc.$font-size-sm !important;
93
96
  }
94
97
  .fs-base {
95
- font-size: dc.$font-size-base;
98
+ font-size: dc.$font-size-base !important;
96
99
  }
97
100
  .fs-lg {
98
- font-size: dc.$font-size-lg;
101
+ font-size: dc.$font-size-lg !important;
99
102
  }
100
103
  .fs-xl {
101
- font-size: dc.$font-size-xl;
104
+ font-size: dc.$font-size-xl !important;
102
105
  }
103
106
  .fs-2xl {
104
- font-size: dc.$font-size-2xl;
107
+ font-size: dc.$font-size-2xl !important;
105
108
  }
106
109
  .fs-3xl {
107
- font-size: dc.$font-size-3xl;
110
+ font-size: dc.$font-size-3xl !important;
108
111
  }
109
112
 
110
113
  /*------------------------------------*\
111
114
  #LINE HEIGHT
112
115
  \*------------------------------------*/
113
116
  .leading-default {
114
- $leading-default: 1;
117
+ $leading-default: 1 !important;
115
118
  }
116
119
  .leading-tight {
117
- $leading-tight: 1.25;
120
+ $leading-tight: 1.25 !important;
118
121
  }
119
122
  .leading-normal {
120
- $leading-normal: 1.375;
123
+ $leading-normal: 1.375 !important;
121
124
  }
122
125
  .leading-lg {
123
- $leading-lg: 1.5;
126
+ $leading-lg: 1.5 !important;
124
127
  }