@commercetools-frontend/experimental-components 1.1.0 → 3.0.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/dist/styles.css CHANGED
@@ -1,5 +1,7 @@
1
1
  /* imported from search-input.module.css */
2
2
 
3
+ /* @redesign cleanup */
4
+
3
5
  .search-input-module__block___1uM-y {
4
6
  display: inline-flex;
5
7
  flex-direction: row;
@@ -13,27 +15,57 @@
13
15
  flex-grow: 1;
14
16
  }
15
17
 
16
- .search-input-module__input-container___mJnyZ {
18
+ :where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
17
19
  height: var(--spacing-xl);
18
20
  }
21
+ :where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
22
+ height: auto;
23
+ }
24
+
25
+ :where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
26
+ border-color: var(--color-neutral-60);
27
+ }
28
+ :where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
29
+ border-color: var(--border-color-for-input);
30
+ }
19
31
 
20
32
  .search-input-module__input-container___mJnyZ > input {
21
33
  padding-right: calc(var(--spacing-xl) * 2);
22
- border-color: var(--color-neutral-60);
23
34
  }
24
35
 
25
36
  .search-input-module__input-container-disabled___23jR8 > input {
26
37
  border-color: var(--color-neutral);
27
38
  }
28
39
 
29
- .search-input-module__input-container-hoverable___1xjqn > input:hover {
40
+ :where(html[data-theme='default']) .search-input-module__input-container-hoverable___1xjqn > input:hover {
30
41
  border-color: var(--color-primary);
31
42
  }
43
+ :where(html[data-theme='test']) .search-input-module__input-container-hoverable___1xjqn > input:hover {
44
+ border: var(--border-width-for-input) solid var(--border-color-for-input);
45
+ background-color: var(--background-color-for-input-when-hovered);
46
+ }
47
+ :where(html[data-theme='test']) .search-input-module__input-container-hoverable___1xjqn > input:focus {
48
+ box-shadow: var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary));
49
+ border-color: var(--border-color-for-input-when-focused);
50
+ }
51
+
52
+ :where(html[data-theme='default']) .search-input-module__input-container-granular___33Pm- {
53
+ right: 6px;
54
+ }
55
+ :where(html[data-theme='test']) .search-input-module__input-container-granular___33Pm- {
56
+ right: 3px;
57
+ }
32
58
 
33
59
  .search-input-module__input-container-granular___33Pm- {
34
60
  border-color: var(--color-primary);
35
61
  position: relative;
36
- right: 6px;
62
+ }
63
+
64
+ :where(html[data-theme='default']) .search-input-module__search-icon-container___cbHQY {
65
+ top: 5px;
66
+ }
67
+ :where(html[data-theme='test']) .search-input-module__search-icon-container___cbHQY {
68
+ top: 8px;
37
69
  }
38
70
 
39
71
  .search-input-module__search-icon-container___cbHQY {
@@ -41,10 +73,9 @@
41
73
  border-color: transparent;
42
74
  position: absolute;
43
75
  right: 9px;
44
- top: 5px;
45
76
  }
46
77
 
47
- .search-input-module__clear-icon-container___3RQvu {
78
+ :where(html[data-theme='default']) .search-input-module__clear-icon-container___3RQvu {
48
79
  background-color: transparent;
49
80
  border-color: transparent;
50
81
  position: absolute;
@@ -53,6 +84,15 @@
53
84
  z-index: 2;
54
85
  }
55
86
 
87
+ :where(html[data-theme='test']) .search-input-module__clear-icon-container___3RQvu {
88
+ background-color: transparent;
89
+ border-color: transparent;
90
+ position: absolute;
91
+ right: 36px;
92
+ top: 11px;
93
+ z-index: 2;
94
+ }
95
+
56
96
  .search-input-module__clear-icon-container-granular___1mbin {
57
97
  right: 41px;
58
98
  }
@@ -73,77 +113,6 @@
73
113
  flex-shrink: 1;
74
114
  margin-left: var(--spacing-s);
75
115
  }
76
- /* imported from modal-content-layout.module.css */
77
-
78
- :root {
79
- /* save toolbar */
80
- --height-save-toolbar: 57px;
81
-
82
- /* additional spacing at the bottom of view that has a save-toolbar */
83
- --spacing-bottom-with-save-toolbar: calc(
84
- var(--height-save-toolbar) + var(--spacing-m)
85
- );
86
- }
87
-
88
- /* Modal */
89
-
90
- .modal-content-layout-module__container___m-8MJ {
91
- padding: var(--spacing-m) var(--spacing-m) 0;
92
- display: flex;
93
- flex-direction: column;
94
- height: 100%;
95
- }
96
-
97
- .modal-content-layout-module__header___3s8J- {
98
- position: relative;
99
- border-bottom: 2px var(--color-neutral) solid;
100
- padding-bottom: var(--spacing-m);
101
- margin: 0;
102
- }
103
-
104
- .modal-content-layout-module__subtitle___W3B06 {
105
- font-size: 1rem;
106
- color: var(--color-solid);
107
- margin-top: var(--spacing-s);
108
- flex-grow: 1;
109
- }
110
-
111
- .modal-content-layout-module__content___UpG03 {
112
- flex: 1;
113
- overflow-y: auto;
114
- padding: var(--spacing-m) 0;
115
- }
116
-
117
- /*
118
- * manually set the margin bottom of the last child in the container. We need
119
- * to do this in order to add some more space to the bottom of the scroll
120
- * container. Just using a padding-bottom in the .content-container does not
121
- * work in firefox unfortunately. It is a reported bug in FF that is not fixed.
122
- */
123
- .modal-content-layout-module__content___UpG03 > :last-child {
124
- margin-bottom: var(--spacing-bottom-with-save-toolbar);
125
- }
126
-
127
- .modal-content-layout-module__footer___TCdQU {
128
- padding: var(--spacing-m) 0;
129
- }
130
-
131
- .modal-content-layout-module__button-close___2ThEn {
132
- float: right;
133
- margin-top: calc(var(--spacing-xs) * -1);
134
- }
135
-
136
- .modal-content-layout-module__subheader___61dMZ {
137
- display: flex;
138
- justify-content: space-between;
139
- align-items: center;
140
- }
141
-
142
- .modal-content-layout-module__controls___2AEk5 {
143
- position: absolute;
144
- right: 0;
145
- bottom: var(--spacing-s);
146
- }
147
116
  /* imported from required-indicator.module.css */
148
117
 
149
118
  .required-indicator-module__colored____YUFm {
@@ -156,7 +125,9 @@
156
125
  }
157
126
  /* imported from selectable-field-search-input.module.css */
158
127
 
159
- .selectable-field-search-input-module__container___z2ltR {
128
+ /* @redesign cleanup */
129
+
130
+ :where(html[data-theme='default']) .selectable-field-search-input-module__container___z2ltR {
160
131
  width: 100%;
161
132
  position: relative;
162
133
  display: flex;
@@ -164,6 +135,13 @@
164
135
  max-width: 800px;
165
136
  }
166
137
 
138
+ :where(html[data-theme='test']) .selectable-field-search-input-module__container___z2ltR {
139
+ width: 100%;
140
+ position: relative;
141
+ display: flex;
142
+ z-index: 3;
143
+ }
144
+
167
145
  .selectable-field-search-input-module__search-mode-menu___Od6Le {
168
146
  border-radius: var(--border-radius-6);
169
147
  border: 1px solid var(--color-primary);
@@ -181,11 +159,6 @@
181
159
  .validated-input-module__container___3L2KB {
182
160
  display: inline;
183
161
  }
184
- /* imported from autocomplete.module.css */
185
-
186
- .autocomplete-module__container___sBqGo {
187
- position: relative;
188
- }
189
162
  /* imported from label-range.module.css */
190
163
 
191
164
  .label-range-module__label___3Tb0p {
@@ -569,14 +542,7 @@
569
542
  visibility: hidden;
570
543
  width: 1px;
571
544
  height: 1px;
572
- }/* imported from dropdown-indicator.module.css */
573
-
574
- .dropdown-indicator-module__dropdownIndicator___3bkJT {
575
- display: flex;
576
- align-items: center;
577
- margin-left: var(--spacing-s);
578
- }
579
- /* imported from centered-loading-spinner.module.css */
545
+ }/* imported from centered-loading-spinner.module.css */
580
546
 
581
547
  .centered-loading-spinner-module__loading-container___3_9-h {
582
548
  height: 100%;
@@ -585,21 +551,6 @@
585
551
  align-items: center;
586
552
  justify-content: center;
587
553
  }
588
- /* imported from reference-search.module.css */
589
-
590
- .reference-search-module__container___3-iK3 {
591
- width: 100%;
592
- }
593
-
594
- .reference-search-module__container___3-iK3 > div {
595
- width: 100%;
596
- }
597
-
598
- .reference-search-module__missing-label___az9AO {
599
- color: var(--color-warning);
600
- font-size: 0.9rem;
601
- margin-left: var(--spacing-xs);
602
- }
603
554
  /* imported from divider.module.css */
604
555
 
605
556
  html[data-theme='test'] {
@@ -634,298 +585,25 @@ html[data-theme='default'] {
634
585
  .divider-module__size_m___LM34Z {
635
586
  border-top-color: var(--border-top-color-for-divider-size-m);
636
587
  }
637
- /* imported from custom-money-input.module.css */
588
+ /* imported from reference-search.module.css */
638
589
 
639
- .custom-money-input-module__container___1fdO2 {
590
+ .reference-search-module__container___3-iK3 {
640
591
  width: 100%;
641
592
  }
642
- /* imported from tooltip.module.css */
643
-
644
- /* STRUCTURE */
645
-
646
- .tooltip-module__container___2R5k4 {
647
- box-sizing: content-box;
648
- max-height: 150px;
649
- opacity: 1;
650
- visibility: visible;
651
- position: absolute;
652
- margin-left: auto;
653
- margin-right: auto;
654
- cursor: default;
655
- pointer-events: none;
656
- z-index: 99;
657
- }
658
-
659
- .tooltip-module__box___1V72T {
660
- position: relative;
661
- }
662
-
663
- .tooltip-module__body___1hJvc {
664
- padding: 6px;
665
- border-radius: 5px;
666
- min-width: 100px;
667
- background-color: var(--color-surface);
668
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.24);
669
- vertical-align: middle;
670
- font-size: 0.857rem;
671
- }
672
-
673
- .tooltip-module__tooltip-body___2_NJI {
674
- background: red;
675
- }
676
-
677
- /* STATES */
678
-
679
- .tooltip-module__container___2R5k4.tooltip-module__hide___21LcK {
680
- opacity: 0.01;
681
- visibility: hidden;
682
- }
683
-
684
- /* ARROW */
685
-
686
- .tooltip-module__arrow-top-border___3_L66 {
687
- border-top: solid 6px transparent;
688
- }
689
-
690
- .tooltip-module__arrow-top-right-border___2yFxP {
691
- border-top: solid 6px transparent;
692
- }
693
-
694
- .tooltip-module__arrow-bottom-border___2Grv6 {
695
- border-bottom: solid 6px transparent;
696
- transform: translateY(-6px);
697
- }
698
-
699
- .tooltip-module__arrow-left-border___27YP5 {
700
- border-left: solid 6px transparent;
701
- }
702
-
703
- .tooltip-module__arrow-right-border___3TsGO {
704
- border-right: solid 6px transparent;
705
- }
706
-
707
- /* ARROW POSITIONING */
708
- .tooltip-module__arrow-top___1TMUA,
709
- .tooltip-module__arrow-top-border___3_L66,
710
- .tooltip-module__arrow-shadow-top___3vxpn,
711
- .tooltip-module__arrow-bottom___1BM7o,
712
- .tooltip-module__arrow-bottom-border___2Grv6 {
713
- box-sizing: border-box;
714
- height: 6px;
715
- width: 12px;
716
- margin-left: 30px;
717
- margin-right: auto;
718
- border-left: solid 6px transparent;
719
- border-right: solid 6px transparent;
720
- position: absolute;
721
- }
722
-
723
- .tooltip-module__arrow-top-right___2P3cx,
724
- .tooltip-module__arrow-top-right-border___2yFxP,
725
- .tooltip-module__arrow-shadow-top-right___1Yj5N {
726
- box-sizing: border-box;
727
- height: 6px;
728
- width: 12px;
729
- right: 30px;
730
- border-left: solid 6px transparent;
731
- border-right: solid 6px transparent;
732
- position: absolute;
733
- }
734
-
735
- .tooltip-module__arrow-left____OVQd,
736
- .tooltip-module__arrow-left-border___27YP5 {
737
- width: 0;
738
- height: 0;
739
- border-style: solid;
740
- border-width: 6px 0 6px 6px;
741
- border-color: transparent transparent transparent var(--color-info);
742
- position: absolute;
743
- right: -5px;
744
- top: calc(50% - 6px);
745
- }
746
-
747
- .tooltip-module__arrow-right___3WQ2_,
748
- .tooltip-module__arrow-right-border___3TsGO {
749
- width: 0;
750
- height: 0;
751
- border-style: solid;
752
- border-width: 6px 6px 6px 0;
753
- border-color: transparent var(--color-info) transparent transparent;
754
- position: absolute;
755
- left: -6px;
756
- top: calc(50% - 6px);
757
- }
758
-
759
- .tooltip-module__arrow-top___1TMUA {
760
- border-top: solid 6px var(--color-info);
761
- transform: translateY(-1.5px);
762
- }
763
-
764
- .tooltip-module__arrow-top-right___2P3cx {
765
- border-top: solid 6px var(--color-info);
766
- transform: translateY(-1.5px);
767
- }
768
-
769
- .tooltip-module__arrow-bottom___1BM7o {
770
- border-bottom: solid 6px var(--color-primary);
771
- transform: translateY(-6px);
772
- }
773
-
774
- .tooltip-module__arrow-left____OVQd {
775
- border-left: solid 6px var(--color-info);
776
- transform: translateX(-2px);
777
- }
778
-
779
- .tooltip-module__arrow-right___3WQ2_ {
780
- border-right: solid 6px var(--color-info);
781
- transform: translateX(2px);
782
- }
783
-
784
- /* ARROW SHADOW */
785
-
786
- .tooltip-module__arrow-shadow-top___3vxpn {
787
- border-top: solid 6px rgba(176, 176, 176, 0.25);
788
- transform: translate(2px, 2px);
789
- }
790
-
791
- .tooltip-module__arrow-shadow-top-right___1Yj5N {
792
- border-top: solid 6px rgba(176, 176, 176, 0.25);
793
- transform: translate(2px, 2px);
794
- }
795
-
796
- /* TOOLTIP TYPES */
797
-
798
- /* WARNING */
799
-
800
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__body___1hJvc {
801
- border: solid 1px var(--color-warning);
802
- color: var(--color-solid);
803
- }
804
-
805
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-border___3_L66,
806
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right-border___2yFxP {
807
- border-top-color: var(--color-warning);
808
- }
809
-
810
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top___1TMUA,
811
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right___2P3cx {
812
- border-top-color: var(--color-surface);
813
- }
814
-
815
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom___1BM7o {
816
- border-bottom-color: var(--color-surface);
817
- }
818
-
819
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom-border___2Grv6 {
820
- border-bottom-color: var(--color-warning);
821
- }
822
-
823
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left____OVQd {
824
- border-left-color: var(--color-surface);
825
- }
826
-
827
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left-border___27YP5 {
828
- border-left-color: var(--color-warning);
829
- }
830
-
831
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right___3WQ2_ {
832
- border-right-color: var(--color-surface);
833
- }
834
-
835
- .tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right-border___3TsGO {
836
- border-right-color: var(--color-warning);
837
- }
838
-
839
- /* INFO */
840
-
841
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc {
842
- max-height: auto;
843
- min-width: 100px;
844
- white-space: nowrap;
845
- }
846
593
 
847
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__body___1hJvc {
848
- background-color: var(--color-surface);
849
- border: solid 1px var(--color-primary);
850
- color: var(--color-accent);
851
- padding: 12px;
852
- min-width: 100px;
853
- }
854
-
855
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left____OVQd {
856
- border-left-color: var(--color-surface);
857
- }
858
-
859
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left-border___27YP5 {
860
- border-left-color: var(--color-primary);
861
- }
862
-
863
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right___3WQ2_ {
864
- border-right-color: var(--color-surface);
865
- }
866
-
867
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right-border___3TsGO {
868
- border-right-color: var(--color-primary);
869
- }
870
-
871
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top___1TMUA,
872
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right___2P3cx {
873
- border-top-color: var(--color-surface);
874
- }
875
-
876
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-border___3_L66,
877
- .tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right-border___2yFxP {
878
- border-top-color: var(--color-primary);
879
- }
880
-
881
- /* ERROR */
882
-
883
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__body___1hJvc {
884
- background-color: var(--color-warning-95);
885
- border: solid 1px var(--color-error);
886
- color: var(--color-solid);
887
- }
888
-
889
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-border___3_L66,
890
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right-border___2yFxP {
891
- border-top-color: var(--color-error);
892
- }
893
-
894
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top___1TMUA,
895
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right___2P3cx {
896
- border-top-color: var(--color-warning-95);
897
- }
898
-
899
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom___1BM7o {
900
- border-bottom-color: var(--color-warning-95);
901
- }
902
-
903
- .tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom-border___2Grv6 {
904
- border-bottom-color: var(--color-error);
905
- }
906
-
907
- /* POSITIONS */
908
-
909
- .tooltip-module__container-top___2MQTV {
910
- transform: translateY(-100%) translateY(-3px);
911
- }
912
-
913
- .tooltip-module__container-top-right___iR0io {
914
- transform: translate(0, calc(-100% - 10px));
915
- right: 0;
916
- }
917
-
918
- .tooltip-module__container-bottom___1wDKk {
919
- top: calc(100% + 10px);
594
+ .reference-search-module__container___3-iK3 > div {
595
+ width: 100%;
920
596
  }
921
597
 
922
- .tooltip-module__container-left___YePF0 {
923
- transform: translateX(-100%) translateX(-10px) translateY(-6px);
598
+ .reference-search-module__missing-label___az9AO {
599
+ color: var(--color-warning);
600
+ font-size: 0.9rem;
601
+ margin-left: var(--spacing-xs);
924
602
  }
925
- /* imported from button-close.module.css */
603
+ /* imported from custom-money-input.module.css */
926
604
 
927
- .button-close-module__button-close-container___1uz2S {
928
- cursor: pointer;
605
+ .custom-money-input-module__container___1fdO2 {
606
+ width: 100%;
929
607
  }
930
608
  /* imported from set-buttons.module.css */
931
609
 
@@ -941,23 +619,23 @@ html[data-theme='default'] {
941
619
  :where(html[data-theme='test']) .set-buttons-module__gap___38Qr0 {
942
620
  padding: 20px;
943
621
  }
944
- /* imported from platform-limits-customer-groups-status.module.css */
622
+ /* imported from platform-limits-customers-status.module.css */
945
623
 
946
- .platform-limits-customer-groups-status-module__status___6099G {
624
+ .platform-limits-customers-status-module__status___3rXYM {
947
625
  min-width: max-content;
948
626
  }
949
- /* imported from platform-limits-customer-groups-combined.module.css */
627
+ /* imported from platform-limits-customers-combined.module.css */
950
628
 
951
- .platform-limits-customer-groups-combined-module__combined___WjRoI {
629
+ .platform-limits-customers-combined-module__combined___OszDd {
952
630
  margin-bottom: var(--spacing-s);
953
631
  }
954
- /* imported from platform-limits-customers-status.module.css */
632
+ /* imported from platform-limits-customer-groups-status.module.css */
955
633
 
956
- .platform-limits-customers-status-module__status___3rXYM {
634
+ .platform-limits-customer-groups-status-module__status___6099G {
957
635
  min-width: max-content;
958
636
  }
959
- /* imported from platform-limits-customers-combined.module.css */
637
+ /* imported from platform-limits-customer-groups-combined.module.css */
960
638
 
961
- .platform-limits-customers-combined-module__combined___OszDd {
639
+ .platform-limits-customer-groups-combined-module__combined___WjRoI {
962
640
  margin-bottom: var(--spacing-s);
963
641
  }