@transferwise/neptune-css 0.0.0-experimental-a44fd6f → 0.0.0-experimental-3ede9cc

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.
@@ -2248,8 +2248,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2248
2248
  .np-theme-personal .alert-detach {
2249
2249
  color: #5d7079;
2250
2250
  color: var(--color-content-secondary);
2251
- line-height: 1.2;
2252
- line-height: var(--line-height-control);
2253
2251
  margin: 8px 0;
2254
2252
  margin: var(--padding-x-small) 0;
2255
2253
  padding: 0;
@@ -2265,10 +2263,28 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2265
2263
  }
2266
2264
  .np-theme-personal .has-success .alert-positive .tw-icon,
2267
2265
  .np-theme-personal .has-success .alert-success .tw-icon,
2268
- .np-theme-personal .has-warning .alert-warning .warning,
2266
+ .np-theme-personal .has-warning .alert-warning .tw-icon,
2269
2267
  .np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
2270
2268
  margin-right: 4px;
2271
2269
  margin-right: var(--size-4);
2270
+ padding-top: 2px;
2271
+ }
2272
+ .np-theme-personal .has-warning .alert-warning .tw-icon {
2273
+ color: var(--color-sentiment-warning);
2274
+ position: relative;
2275
+ z-index: 1;
2276
+ }
2277
+ .np-theme-personal .has-warning .alert-warning .tw-icon::before {
2278
+ content: '';
2279
+ display: block;
2280
+ position: absolute;
2281
+ top: 5px;
2282
+ left: 4px;
2283
+ height: 10px;
2284
+ width: 50%;
2285
+ background-color: var(--color-dark);
2286
+ border-radius: 50%;
2287
+ z-index: -1;
2272
2288
  }
2273
2289
  .np-theme-personal .has-error .error-messages,
2274
2290
  .np-theme-personal .has-error .alert-detach.alert-danger {
@@ -11815,8 +11815,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
11815
11815
  .np-theme-personal .alert-detach {
11816
11816
  color: #5d7079;
11817
11817
  color: var(--color-content-secondary);
11818
- line-height: 1.2;
11819
- line-height: var(--line-height-control);
11820
11818
  margin: 8px 0;
11821
11819
  margin: var(--padding-x-small) 0;
11822
11820
  padding: 0;
@@ -11834,10 +11832,30 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
11834
11832
 
11835
11833
  .np-theme-personal .has-success .alert-positive .tw-icon,
11836
11834
  .np-theme-personal .has-success .alert-success .tw-icon,
11837
- .np-theme-personal .has-warning .alert-warning .warning,
11835
+ .np-theme-personal .has-warning .alert-warning .tw-icon,
11838
11836
  .np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
11839
11837
  margin-right: 4px;
11840
11838
  margin-right: var(--size-4);
11839
+ padding-top: 2px;
11840
+ }
11841
+
11842
+ .np-theme-personal .has-warning .alert-warning .tw-icon {
11843
+ color: var(--color-sentiment-warning);
11844
+ position: relative;
11845
+ z-index: 1;
11846
+ }
11847
+
11848
+ .np-theme-personal .has-warning .alert-warning .tw-icon::before {
11849
+ content: '';
11850
+ display: block;
11851
+ position: absolute;
11852
+ top: 5px;
11853
+ left: 4px;
11854
+ height: 10px;
11855
+ width: 50%;
11856
+ background-color: var(--color-dark);
11857
+ border-radius: 50%;
11858
+ z-index: -1;
11841
11859
  }
11842
11860
 
11843
11861
  .np-theme-personal .has-error .error-messages,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "0.0.0-experimental-a44fd6f",
4
+ "version": "0.0.0-experimental-3ede9cc",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -1189,7 +1189,6 @@ input[type="password"] {
1189
1189
  .alert-detach {
1190
1190
  color: var(--color-content-secondary);
1191
1191
 
1192
- line-height: var(--line-height-control);
1193
1192
  margin: var(--padding-x-small) 0;
1194
1193
  padding: 0;
1195
1194
  background-color: unset;
@@ -1205,9 +1204,30 @@ input[type="password"] {
1205
1204
 
1206
1205
  .has-success .alert-positive .tw-icon,
1207
1206
  .has-success .alert-success .tw-icon,
1208
- .has-warning .alert-warning .warning,
1207
+ .has-warning .alert-warning .tw-icon,
1209
1208
  .has-error .alert-detach.alert-danger .tw-icon {
1210
1209
  margin-right: var(--size-4);
1210
+ padding-top: 2px; // We should have top space to align the icon with 155% line-height of the text
1211
+ }
1212
+
1213
+ .has-warning .alert-warning .tw-icon {
1214
+ color: var(--color-sentiment-warning);
1215
+ position: relative;
1216
+ z-index: 1;
1217
+
1218
+ // This code and relative position above helps to add appropriate colors to warning icon
1219
+ &::before {
1220
+ content: '';
1221
+ display: block;
1222
+ position: absolute;
1223
+ top: 5px;
1224
+ left: 4px;
1225
+ height: 10px;
1226
+ width: 50%;
1227
+ background-color: var(--color-dark);
1228
+ border-radius: 50%;
1229
+ z-index: -1;
1230
+ }
1211
1231
  }
1212
1232
 
1213
1233
  .has-error .error-messages,