apirocket 0.0.9 → 0.0.13

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.
@@ -378,6 +378,154 @@
378
378
  width: 100%;
379
379
  box-shadow: none;
380
380
  }
381
+ }.apirocket-modal *,
382
+ .apirocket-modal *::before,
383
+ .apirocket-modal *::after { box-sizing: border-box; }
384
+
385
+ .apirocket-modal {
386
+ display: flex;
387
+ justify-content: center;
388
+ align-items: flex-start;
389
+ position: fixed;
390
+ z-index: 10001;
391
+ right: 0;
392
+ top: 0;
393
+ overflow: hidden;
394
+ overflow-y: auto;
395
+ width: 100%;
396
+ height: 100vh;
397
+ font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
398
+ background-color: #f5f5f5;
399
+ }
400
+
401
+ .apirocket-modal-nav {
402
+ position: absolute;
403
+ display: flex;
404
+ align-items: center;
405
+ width: 90%;
406
+ max-width: 1100px;
407
+ height: 96px;
408
+ }
409
+
410
+ .apirocket-modal-nav > div {
411
+ display: block;
412
+ text-align: left;
413
+ color: #737373;
414
+ font-size: 16px;
415
+ font-weight: normal;
416
+ cursor: pointer;
417
+ }
418
+
419
+ .apirocket-modal-nav > div svg { margin-right: 16px; }
420
+
421
+ .apirocket-modal-content {
422
+ display: flex;
423
+ flex-flow: column;
424
+ width: 480px;
425
+ height: auto;
426
+ padding: 32px;
427
+ background-color: #fff;
428
+ margin-top: 96px;
429
+ margin-bottom: 32px;
430
+ }
431
+
432
+ .apirocket-modal-header {
433
+ position: relative;
434
+ padding-bottom: 32px;
435
+ }
436
+
437
+ .apirocket-modal-title {
438
+ font-size: 18px;
439
+ font-weight: bold;
440
+ line-height: 1;
441
+ color: #404040;
442
+ margin-bottom: 8px;
443
+ }
444
+
445
+ .apirocket-modal-subtitle {
446
+ font-size: 14px;
447
+ font-weight: normal;
448
+ line-height: 16px;
449
+ color: #737373;
450
+ }
451
+
452
+ .apirocket-modal-close {
453
+ position: absolute;
454
+ right: -16px;
455
+ top: -16px;
456
+ }
457
+
458
+ .apirocket-modal-close-icon {
459
+ height: var(--cart-header-text-close-icon-size, 24px);
460
+ width: var(--cart-header-text-close-icon-size, 24px);
461
+ color: var(--cart-header-text-close-icon-color, #a3a3a3);
462
+ cursor: pointer;
463
+ }
464
+
465
+ .apirocket-modal-body-text-password {
466
+ color: #404040;
467
+ font-size: 14px;
468
+ font-weight: normal;
469
+ line-height: 16px;
470
+ margin-top: -8px;text-align: right;
471
+ cursor: pointer;
472
+ }
473
+
474
+ .apirocket-modal-body-text-password:hover { text-decoration: underline; }
475
+
476
+ .apirocket-modal-footer-text {
477
+ color: #a3a3a3;
478
+ font-size: 14px;
479
+ font-weight: normal;
480
+ line-height: 16px;
481
+ text-align: center;
482
+ margin-top: 16px;
483
+ }
484
+
485
+ .apirocket-modal-footer-text span {
486
+ color: #404040;
487
+ cursor: pointer;
488
+ }
489
+
490
+ .apirocket-modal-footer-text span:hover { text-decoration: underline; }
491
+
492
+
493
+ .apirocket-modal-body {}
494
+
495
+ .apirocket-modal-footer {
496
+ padding-top: 32px;
497
+ }
498
+
499
+ .apirocket-modal-row {
500
+ display: flex;
501
+ justify-content: space-between;
502
+ align-items: flex-start;
503
+ }
504
+
505
+ .apirocket-modal-row > * {
506
+ flex: 1 1;
507
+ margin-right: 16px;
508
+ }
509
+
510
+ .apirocket-modal-row > *:last-child { margin-right: 0; }
511
+
512
+
513
+ @media (max-width: 720px) {
514
+ .apirocket-modal-row { display: block; }
515
+ .apirocket-modal-row > * { margin-right: 0; }
516
+
517
+ .apirocket-modal-nav { display: none; }
518
+
519
+ .apirocket-modal-content {
520
+ width: 95%;
521
+ margin-top: 32px;
522
+ padding: 24px;
523
+ }
524
+
525
+ .apirocket-modal-close {
526
+ right: -8px;
527
+ top: -8px;
528
+ }
381
529
  }.apirocket-checkout * { box-sizing: content-box; }
382
530
 
383
531
  .apirocket-checkout {
@@ -401,6 +549,7 @@
401
549
  min-height: 100%;
402
550
  max-width: 1100px;
403
551
  padding: 0 5%;
552
+
404
553
  }
405
554
 
406
555
  .apirocket-checkout-main {
@@ -693,12 +842,12 @@
693
842
  max-width: 100%;
694
843
  }
695
844
 
696
- .apirocket-checkout-actions * { flex: 1 1; }
845
+ .apirocket-checkout-actions > * { flex: 1 1; }
697
846
 
698
847
  .apirocket-checkout-footer {
699
848
  margin-top: 72px;
700
849
  border-top: 1px solid #d9d9d9;
701
- padding-bottom: 64px;
850
+ margin-bottom: 64px;
702
851
  padding-top: 16px;
703
852
  }
704
853
 
@@ -753,7 +902,6 @@
753
902
  .apirocket-checkout-mobile-menu {
754
903
  background-color: #f5f5f5;
755
904
  border-top: 1px solid #d9d9d9;
756
- border-bottom: 1px solid #d9d9d9;
757
905
  }
758
906
 
759
907
  .apirocket-checkout-mobile-wrapper {
@@ -789,12 +937,12 @@
789
937
  transition-duration: 350ms;
790
938
  max-height: 0px;
791
939
  overflow: hidden;
940
+ border-bottom: 1px solid #d9d9d9;
792
941
  }
793
942
 
794
943
  .apirocket-checkout-mobile-summary--show {
795
944
  max-height: 1000px;
796
945
  overflow: auto;
797
- border-bottom: 1px solid #d9d9d9;
798
946
  }
799
947
 
800
948
  .apirocket-checkout-mobile-summary-wrapper {
@@ -854,7 +1002,10 @@
854
1002
  color: #404040;
855
1003
  }
856
1004
 
857
- .apirocket-checkout-fieldset-row > :last-child img { max-height: 24px; }
1005
+ .apirocket-checkout-fieldset-row > :last-child img {
1006
+ display: block;
1007
+ max-height: 24px;
1008
+ }
858
1009
 
859
1010
  .apirocket-checkout-fieldset-row-wrapper {
860
1011
  background-color: #f5f5f5;
@@ -1006,7 +1157,119 @@
1006
1157
  }
1007
1158
 
1008
1159
 
1160
+ .apirocket-summary {}
1161
+
1162
+ .apirocket-summary-top {
1163
+ margin-top: 56px;
1164
+ margin-bottom: 32px;
1165
+ }
1166
+
1167
+ .apirocket-summary-header {
1168
+ display: flex;
1169
+ justify-content: flex-start;
1170
+ align-items: center;
1171
+ margin-bottom: 32px;
1172
+ }
1173
+
1174
+ .apirocket-summary-header-icon {
1175
+ flex: 0 1;
1176
+ margin-right: 16px;
1177
+ }
1009
1178
 
1179
+ .apirocket-summary-header-content {}
1180
+
1181
+ .apirocket-summary-header-title {
1182
+ font-size: 24px;
1183
+ font-weight: bold;
1184
+ line-height: 1.2;
1185
+ color: #404040;
1186
+ margin-bottom: 4px;
1187
+ }
1188
+
1189
+ .apirocket-summary-header-subtitle {
1190
+ font-size: 18px;
1191
+ font-weight: normal;
1192
+ line-height: 1.2;
1193
+ color: #737373;
1194
+ }
1195
+
1196
+ .apirocket-summary-section {
1197
+ margin-top: 16px;
1198
+ border: 1px solid #d9d9d9;
1199
+ border-radius: 4px;
1200
+ padding: 24px;
1201
+ }
1202
+
1203
+ .apirocket-summary-section .apirocket-checkout-row { margin-bottom: 32px; }
1204
+ .apirocket-summary-section .apirocket-checkout-row:last-child { margin-bottom: 0px; }
1205
+
1206
+ .apirocket-summary-section-title {
1207
+ font-size: 18px;
1208
+ font-weight: bold;
1209
+ line-height: 1.2;
1210
+ color: #404040;
1211
+ margin-bottom: 24px;
1212
+ }
1213
+
1214
+ .apirocket-summary-section-subtitle {
1215
+ font-size: 16px;
1216
+ font-weight: bold;
1217
+ line-height: 1;
1218
+ color: #404040;
1219
+ margin-bottom: 16px;
1220
+ }
1221
+
1222
+ .apirocket-summary-section-text {
1223
+ font-size: 14px;
1224
+ font-weight: normal;
1225
+ line-height: 18px;
1226
+ color: #404040;
1227
+ }
1228
+
1229
+ .apirocket-summary-help {
1230
+ display: flex;
1231
+ justify-content: flex-start;
1232
+ align-items: center;
1233
+ }
1234
+
1235
+ .apirocket-summary-help-icon {
1236
+ flex: 0 1;
1237
+ padding-right: 12px;
1238
+ }
1239
+
1240
+ .apirocket-summary-help-content {
1241
+ font-size: 14px;
1242
+ font-weight: normal;
1243
+ line-height: 1.2;
1244
+ color: #404040;
1245
+ }
1246
+
1247
+ .apirocket-summary-help-content a {
1248
+ display: block;
1249
+ color: #737373;
1250
+ }
1251
+
1252
+ @media (max-width: 1000px) {
1253
+ .apirocket-summary-top { display: none; }
1254
+ .apirocket-summary-header { margin-top: 32px; }
1255
+ }
1256
+
1257
+ @media (max-width: 720px) {
1258
+ .apirocket-summary-section-subtitle { margin-top: 24px; }
1259
+ .apirocket-summary-header {
1260
+ flex-direction: column;
1261
+ align-items: center;
1262
+ text-align: center;
1263
+ }
1264
+ .apirocket-summary-header-icon {
1265
+ margin-right: 0px;
1266
+ margin-bottom: 16px;
1267
+ }
1268
+ .apirocket-summary-header-title {
1269
+ font-size: 28px;
1270
+ margin-bottom: 8px;
1271
+ }
1272
+ }
1010
1273
  .apirocket-button {
1011
1274
  box-sizing: border-box !important;
1012
1275
  display: block;
@@ -1072,154 +1335,6 @@
1072
1335
  text-align: center;
1073
1336
  }
1074
1337
 
1075
- }.apirocket-modal *,
1076
- .apirocket-modal *::before,
1077
- .apirocket-modal *::after { box-sizing: border-box; }
1078
-
1079
- .apirocket-modal {
1080
- display: flex;
1081
- justify-content: center;
1082
- align-items: flex-start;
1083
- position: fixed;
1084
- z-index: 10001;
1085
- right: 0;
1086
- top: 0;
1087
- overflow: hidden;
1088
- overflow-y: auto;
1089
- width: 100%;
1090
- height: 100vh;
1091
- font-family: var(--cart-font-family, "Arial, Helvetica, sans-serif");
1092
- background-color: #f5f5f5;
1093
- }
1094
-
1095
- .apirocket-modal-nav {
1096
- position: absolute;
1097
- display: flex;
1098
- align-items: center;
1099
- width: 90%;
1100
- max-width: 1100px;
1101
- height: 96px;
1102
- }
1103
-
1104
- .apirocket-modal-nav > div {
1105
- display: block;
1106
- text-align: left;
1107
- color: #737373;
1108
- font-size: 16px;
1109
- font-weight: normal;
1110
- cursor: pointer;
1111
- }
1112
-
1113
- .apirocket-modal-nav > div svg { margin-right: 16px; }
1114
-
1115
- .apirocket-modal-content {
1116
- display: flex;
1117
- flex-flow: column;
1118
- width: 480px;
1119
- height: auto;
1120
- padding: 32px;
1121
- background-color: #fff;
1122
- margin-top: 96px;
1123
- margin-bottom: 32px;
1124
- }
1125
-
1126
- .apirocket-modal-header {
1127
- position: relative;
1128
- padding-bottom: 32px;
1129
- }
1130
-
1131
- .apirocket-modal-title {
1132
- font-size: 18px;
1133
- font-weight: bold;
1134
- line-height: 1;
1135
- color: #404040;
1136
- margin-bottom: 8px;
1137
- }
1138
-
1139
- .apirocket-modal-subtitle {
1140
- font-size: 14px;
1141
- font-weight: normal;
1142
- line-height: 16px;
1143
- color: #737373;
1144
- }
1145
-
1146
- .apirocket-modal-close {
1147
- position: absolute;
1148
- right: -16px;
1149
- top: -16px;
1150
- }
1151
-
1152
- .apirocket-modal-close-icon {
1153
- height: var(--cart-header-text-close-icon-size, 24px);
1154
- width: var(--cart-header-text-close-icon-size, 24px);
1155
- color: var(--cart-header-text-close-icon-color, #a3a3a3);
1156
- cursor: pointer;
1157
- }
1158
-
1159
- .apirocket-modal-body-text-password {
1160
- color: #404040;
1161
- font-size: 14px;
1162
- font-weight: normal;
1163
- line-height: 16px;
1164
- margin-top: -8px;text-align: right;
1165
- cursor: pointer;
1166
- }
1167
-
1168
- .apirocket-modal-body-text-password:hover { text-decoration: underline; }
1169
-
1170
- .apirocket-modal-footer-text {
1171
- color: #a3a3a3;
1172
- font-size: 14px;
1173
- font-weight: normal;
1174
- line-height: 16px;
1175
- text-align: center;
1176
- margin-top: 16px;
1177
- }
1178
-
1179
- .apirocket-modal-footer-text span {
1180
- color: #404040;
1181
- cursor: pointer;
1182
- }
1183
-
1184
- .apirocket-modal-footer-text span:hover { text-decoration: underline; }
1185
-
1186
-
1187
- .apirocket-modal-body {}
1188
-
1189
- .apirocket-modal-footer {
1190
- padding-top: 32px;
1191
- }
1192
-
1193
- .apirocket-modal-row {
1194
- display: flex;
1195
- justify-content: space-between;
1196
- align-items: flex-start;
1197
- }
1198
-
1199
- .apirocket-modal-row > * {
1200
- flex: 1 1;
1201
- margin-right: 16px;
1202
- }
1203
-
1204
- .apirocket-modal-row > *:last-child { margin-right: 0; }
1205
-
1206
-
1207
- @media (max-width: 720px) {
1208
- .apirocket-modal-row { display: block; }
1209
- .apirocket-modal-row > * { margin-right: 0; }
1210
-
1211
- .apirocket-modal-nav { display: none; }
1212
-
1213
- .apirocket-modal-content {
1214
- width: 95%;
1215
- margin-top: 32px;
1216
- padding: 24px;
1217
- }
1218
-
1219
- .apirocket-modal-close {
1220
- right: -8px;
1221
- top: -8px;
1222
- }
1223
1338
  }
1224
1339
 
1225
1340
 
@@ -1434,7 +1549,8 @@
1434
1549
  .form-radio-label svg {
1435
1550
  position: absolute;
1436
1551
  display: inline-block;
1437
- max-height: 24px;
1552
+ height: 24px;
1553
+ min-height: 24px;
1438
1554
  top: -2px;
1439
1555
  }
1440
1556