@snyk-mktg/brand-ui 2.5.8 → 2.5.9-canary.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.
@@ -635,6 +635,18 @@
635
635
  font-size: 0.875rem;
636
636
  line-height: 1.5rem;
637
637
  }
638
+ .button.search-trigger:hover, .button.search-trigger:focus {
639
+ color: #145deb;
640
+ }
641
+ .button.search-trigger:hover.dark-mode, .dark-mode .button.search-trigger:hover, .button.search-trigger:focus.dark-mode, .dark-mode .button.search-trigger:focus {
642
+ color: #9bcfff;
643
+ }
644
+ .button.search-trigger:hover, .button.search-trigger:focus {
645
+ background-color: transparent;
646
+ }
647
+ .button.search-trigger:hover.dark-mode, .dark-mode .button.search-trigger:hover, .button.search-trigger:focus.dark-mode, .dark-mode .button.search-trigger:focus {
648
+ background-color: transparent;
649
+ }
638
650
 
639
651
  .buttons {
640
652
  max-width: max-content;
@@ -9140,6 +9152,57 @@ a.tag:focus {
9140
9152
  color: #3ea2ff;
9141
9153
  }
9142
9154
 
9155
+ .search-wrapper {
9156
+ position: relative;
9157
+ display: flex;
9158
+ align-items: center;
9159
+ width: 100%;
9160
+ padding: 2px;
9161
+ border-width: 0.0625rem;
9162
+ border-radius: 100rem;
9163
+ border-style: solid;
9164
+ }
9165
+ .search-wrapper {
9166
+ border-color: #383f76;
9167
+ }
9168
+ .search-wrapper.dark-mode, .dark-mode .search-wrapper {
9169
+ border-color: #fff;
9170
+ }
9171
+ .search-input {
9172
+ border: none;
9173
+ border-radius: 100rem;
9174
+ outline: none;
9175
+ padding: 0.5rem 1.5rem;
9176
+ width: 100%;
9177
+ font-family: "Roboto", sans-serif;
9178
+ min-width: 300px;
9179
+ font-size: 1rem;
9180
+ }
9181
+ .search-input {
9182
+ color: #383f76;
9183
+ }
9184
+ .search-input.dark-mode, .dark-mode .search-input {
9185
+ color: #fff;
9186
+ }
9187
+ .search-input::placeholder {
9188
+ font-size: 1rem;
9189
+ font-family: "Roboto", sans-serif;
9190
+ }
9191
+ @media (min-width: 769px) {
9192
+ .search-input {
9193
+ min-width: 500px;
9194
+ }
9195
+ }
9196
+ .search-submit {
9197
+ position: absolute;
9198
+ right: 0;
9199
+ }
9200
+
9201
+ .search-result-highlight {
9202
+ border-radius: 2px;
9203
+ background-color: #ffe792;
9204
+ }
9205
+
9143
9206
  .table-comparison-caption {
9144
9207
  width: calc(1440px / 12 * 6);
9145
9208
  }
@@ -9219,7 +9282,7 @@ a.tag:focus {
9219
9282
  background-color: "none";
9220
9283
  }
9221
9284
  .table-comparison-row-header {
9222
- width: calc(1440px / 12 * 6);
9285
+ width: calc(1440px / 12 * 4);
9223
9286
  padding-left: 1rem;
9224
9287
  text-align: left;
9225
9288
  vertical-align: top;
@@ -14113,6 +14176,16 @@ a.tag:focus {
14113
14176
  transform: unset;
14114
14177
  }
14115
14178
  }
14179
+ .brandui-navigation .navigation-wrapper:has(.with-search) {
14180
+ justify-content: end;
14181
+ gap: 1rem;
14182
+ }
14183
+ @media (max-width: 1024px) {
14184
+ .brandui-navigation .navigation-wrapper:has(.with-search) {
14185
+ justify-content: start;
14186
+ gap: 0.5rem;
14187
+ }
14188
+ }
14116
14189
  @media (max-width: 1024px) {
14117
14190
  .brandui-navigation .navigation-wrapper {
14118
14191
  margin-top: 5rem;
@@ -14959,6 +15032,11 @@ a.tag:focus {
14959
15032
  transition: 0.2s ease-in-out;
14960
15033
  margin-left: auto;
14961
15034
  }
15035
+ @media (min-width: 1025px) {
15036
+ .brandui-navigation .navigation-buttons.with-search {
15037
+ margin-left: 0;
15038
+ }
15039
+ }
14962
15040
  @media (max-width: 1024px) {
14963
15041
  .brandui-navigation .navigation-buttons {
14964
15042
  margin: 0 auto;
@@ -14966,6 +15044,9 @@ a.tag:focus {
14966
15044
  align-items: center;
14967
15045
  flex-direction: column-reverse;
14968
15046
  }
15047
+ .brandui-navigation .navigation-buttons.no-reverse {
15048
+ flex-direction: column;
15049
+ }
14969
15050
  }
14970
15051
  @media (max-width: 1024px) {
14971
15052
  .brandui-navigation .navigation {