@carbon/styles 1.28.0-rc.0 → 1.28.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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/styles",
3
3
  "description": "Styles for the Carbon Design System",
4
- "version": "1.28.0-rc.0",
4
+ "version": "1.28.0",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",
@@ -44,7 +44,7 @@
44
44
  "devDependencies": {
45
45
  "@carbon/test-utils": "^10.28.0",
46
46
  "autoprefixer": "^10.4.7",
47
- "browserslist-config-carbon": "^11.2.0-rc.0",
47
+ "browserslist-config-carbon": "^11.2.0",
48
48
  "css": "^3.0.0",
49
49
  "cssnano": "^6.0.0",
50
50
  "lodash.isequal": "^4.5.0",
@@ -59,5 +59,5 @@
59
59
  "scss/**/*.css",
60
60
  "css/**/*.css"
61
61
  ],
62
- "gitHead": "419643a2b37523e0d4add7245c4762e51356e91b"
62
+ "gitHead": "75f69e49161bf54184d4392c3d48115f852dc8fc"
63
63
  }
package/scss/_config.scss CHANGED
@@ -62,7 +62,7 @@ $prefix: 'cds' !default;
62
62
  /// @group @carbon/grid
63
63
  $flex-grid-columns: 16 !default;
64
64
 
65
- /// Specify if the default grid type should be the flexbox grid
65
+ /// Specify if the flexbox grid styles should be emitted
66
66
  /// @type Boolean
67
67
  /// @group config
68
68
  $use-flexbox-grid: false !default;
@@ -33,6 +33,46 @@
33
33
  width: 100%;
34
34
  }
35
35
 
36
+ .#{$prefix}--contained-list .#{$prefix}--search {
37
+ position: sticky;
38
+ z-index: 1;
39
+ top: 48px;
40
+ }
41
+
42
+ .#{$prefix}--search {
43
+ &.#{$prefix}--search--expandable .#{$prefix}--search-input {
44
+ background-color: $field;
45
+ }
46
+ }
47
+
48
+ .#{$prefix}--search .#{$prefix}--search-input {
49
+ border-bottom: 1px solid $border-subtle;
50
+ background-color: $background;
51
+ }
52
+
53
+ .#{$prefix}--search .#{$prefix}--search-close::before {
54
+ display: none;
55
+ }
56
+
57
+ .#{$prefix}--search .#{$prefix}--search-close {
58
+ border-right: 2px solid transparent;
59
+ outline: none;
60
+ }
61
+
62
+ .#{$prefix}--search
63
+ .#{$prefix}--search-input
64
+ ~ .#{$prefix}--search-close:hover {
65
+ border-bottom: 1px solid transparent;
66
+ }
67
+
68
+ .#{$prefix}--search
69
+ .#{$prefix}--search-input:focus
70
+ ~ .#{$prefix}--search-close:hover {
71
+ border: 2px solid $focus;
72
+ border-left: 0;
73
+ outline: none;
74
+ }
75
+
36
76
  // Sizes
37
77
 
38
78
  $sizes: (
@@ -31,6 +31,12 @@
31
31
  flex-direction: column;
32
32
  }
33
33
 
34
+ .#{$prefix}--number
35
+ .#{$prefix}--number__input-wrapper--warning
36
+ input[type='number'] {
37
+ padding-right: rem(128px);
38
+ }
39
+
34
40
  .#{$prefix}--number input[type='number'] {
35
41
  @include type-style('body-compact-01');
36
42
  @include focus-outline('reset');
@@ -40,7 +46,7 @@
40
46
  min-width: 9.375rem;
41
47
  height: rem(40px);
42
48
  box-sizing: border-box;
43
- padding-right: rem(128px);
49
+ padding-right: rem(96px);
44
50
  padding-left: $spacing-05;
45
51
  border: 0;
46
52
  border-bottom: rem(1px) solid $border-strong;
@@ -77,14 +83,38 @@
77
83
  &::-webkit-inner-spin-button {
78
84
  appearance: none;
79
85
  }
86
+
87
+ &[data-invalid] {
88
+ padding-right: rem(128px);
89
+ }
80
90
  }
81
91
 
82
- .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
83
- padding-right: rem(144px);
92
+ .#{$prefix}--number--lg.#{$prefix}--number {
93
+ input[type='number'] {
94
+ padding-right: rem(112px);
95
+
96
+ &[data-invalid] {
97
+ padding-right: rem(144px);
98
+ }
99
+ }
100
+
101
+ .#{$prefix}--number__input-wrapper--warning input[type='number'] {
102
+ padding-right: rem(144px);
103
+ }
84
104
  }
85
105
 
86
- .#{$prefix}--number--sm.#{$prefix}--number input[type='number'] {
87
- padding-right: rem(112px);
106
+ .#{$prefix}--number--sm.#{$prefix}--number {
107
+ input[type='number'] {
108
+ padding-right: rem(80px);
109
+
110
+ &[data-invalid] {
111
+ padding-right: rem(112px);
112
+ }
113
+ }
114
+
115
+ .#{$prefix}--number__input-wrapper--warning input[type='number'] {
116
+ padding-right: rem(112px);
117
+ }
88
118
  }
89
119
 
90
120
  .#{$prefix}--number input[type='number']:disabled {
@@ -12,6 +12,6 @@
12
12
 
13
13
  @if config.$use-flexbox-grid == true {
14
14
  @include grid.flex-grid();
15
- } @else {
16
- @include grid.css-grid();
17
15
  }
16
+
17
+ @include grid.css-grid();