@stackoverflow/stacks 2.3.1 → 2.3.2

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 CHANGED
@@ -32,14 +32,14 @@ Stacks documentation can be found at https://stackoverflow.design/
32
32
  - [License](#license)
33
33
 
34
34
  ## Using Stacks
35
- Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
35
+ Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/develop/using-stacks).
36
36
 
37
37
  ## Migrating from v1 to v2
38
38
 
39
39
  To migrate from Stacks v1 to v2, see our [migration guide](/MIGRATION_GUIDE.md).
40
40
 
41
41
  ## Building Stacks
42
- To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/guidelines/building).
42
+ To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/develop/building).
43
43
 
44
44
  Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
45
45
 
@@ -5933,20 +5933,12 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
5933
5933
  --focus-theme: var(--blue-200);
5934
5934
  }
5935
5935
  @media (max-width: 640px) {
5936
- .s-topbar .s-topbar--searchbar {
5936
+ .s-topbar {
5937
5937
  --_tb-searchbar-d: none;
5938
5938
  --_tb-searchbar-p: var(--su8) var(--su12);
5939
5939
  --_tb-searchbar-open-d: flex;
5940
5940
  --_tb-searchbar-open-mxw: none;
5941
- background: var(--theme-topbar-item-background-hover, var(--black-200));
5942
- left: 0;
5943
- max-width: 100%;
5944
- position: absolute;
5945
- right: 0;
5946
- top: 100%;
5947
- }
5948
- .s-topbar .s-topbar--searchbar .s-select {
5949
- width: 25% !important;
5941
+ --_tb-searchbar-select-w: 25%;
5950
5942
  }
5951
5943
  }
5952
5944
  .s-topbar.s-topbar__light {
@@ -6169,6 +6161,16 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6169
6161
  flex-shrink: 10000;
6170
6162
  padding: var(--_tb-searchbar-p);
6171
6163
  }
6164
+ @media (max-width: 640px) {
6165
+ .s-topbar .s-topbar--searchbar {
6166
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
6167
+ left: 0;
6168
+ max-width: 100%;
6169
+ position: absolute;
6170
+ right: 0;
6171
+ top: 100%;
6172
+ }
6173
+ }
6172
6174
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group {
6173
6175
  flex-grow: 1;
6174
6176
  position: relative;
@@ -6196,6 +6198,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6196
6198
  margin-right: calc(var(--su-static1) * -1);
6197
6199
  max-width: calc(var(--s-step) * 2) !important;
6198
6200
  }
6201
+ @media (max-width: 640px) {
6202
+ .s-topbar .s-topbar--searchbar .s-select {
6203
+ width: 25% !important;
6204
+ }
6205
+ }
6199
6206
  .s-topbar .s-topbar--searchbar .s-select > select {
6200
6207
  background-color: var(--theme-topbar-select-background, var(--black-200));
6201
6208
  border-bottom-right-radius: 0 !important;
@@ -6217,9 +6224,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6217
6224
  .s-topbar .s-topbar--searchbar .s-select:after {
6218
6225
  z-index: var(--zi-active);
6219
6226
  }
6220
- .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6221
- display: var(--_tb-searchbar-open-d);
6222
- max-width: var(--_tb-searchbar-open-mxw);
6227
+ @media (max-width: 640px) {
6228
+ .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6229
+ display: var(--_tb-searchbar-open-d);
6230
+ max-width: var(--_tb-searchbar-open-mxw);
6231
+ }
6223
6232
  }
6224
6233
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
6225
6234
  color: var(--theme-topbar-item-color, var(--black-400));