@sc-360-v2/storefront-cms-library 0.3.14 → 0.3.16

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.
Files changed (7) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/fb-dropdown.scss +66 -89
  3. package/dist/form-preview.scss +2 -0
  4. package/dist/icons.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/dist/types/builder/elements/form-builder/index.d.ts +6 -2
  7. package/package.json +1 -1
package/dist/fb-dropdown.scss CHANGED
@@ -1,124 +1,101 @@
1
- .dropdown_macro {
2
- &.underline {
3
- .dropdown_label {
4
- border-radius: 0;
5
- border: none;
6
- border-bottom: 1px solid #333;
7
- padding-inline: 0px;
8
-
9
- &:focus-within,
10
- &:focus {
11
- border: 0;
12
- box-shadow: none;
13
- border-bottom: 1px solid #333;
14
- // box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
15
- background-color: var(--_base-white);
1
+ .fb_dropdown_main {
2
+ position: relative;
3
+ width: 100%;
4
+ }
16
5
 
17
- .dropdown_text {
18
- color: var(--_primary-500);
19
- }
6
+ .dropdown_label {
7
+ width: 100%;
8
+ height: 40px;
9
+ border: 1px solid var(--_gray-300);
10
+ border-radius: 6px;
11
+ background: var(--_base-white);
12
+ cursor: pointer;
13
+ padding: 0 12px;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: space-between;
17
+ transition: border 0.2s ease;
20
18
 
21
- svg {
22
- stroke: var(--_primary-500);
23
- }
24
- }
25
- }
26
- }
27
- .label {
28
- font-size: 14px;
29
- display: block;
30
- margin-bottom: 4px;
19
+ &:focus,
20
+ &:focus-within {
21
+ border-color: var(--_primary-300);
22
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
23
+ outline: none;
31
24
  }
32
- .dropdown_label {
33
- width: 100%;
34
- height: 40px;
35
- border: 1px solid var(--_gray-300);
36
- border-radius: 6px;
37
- background: white;
38
- cursor: pointer;
39
- padding-inline: 12px;
40
- display: flex;
41
- align-items: center;
42
- justify-content: space-between;
43
-
44
- .dropdown_icon {
45
- display: flex;
46
- transition: transform 400ms ease;
47
- will-change: transform;
48
25
 
49
- &.open {
50
- transform: rotate(180deg); // flipped up
51
- }
26
+ &.disabled {
27
+ cursor: not-allowed;
28
+ background: var(--_gray-100);
29
+ color: var(--_gray-400);
30
+ }
52
31
 
53
- &.close {
54
- transform: rotate(0deg); // pointing down
55
- }
56
- }
32
+ .dropdown_text {
33
+ color: var(--_gray-800);
34
+ }
57
35
 
36
+ .dropdown_icon {
37
+ display: flex;
38
+ transition: transform 300ms ease;
58
39
  svg {
59
40
  width: 16px;
60
41
  height: 16px;
61
42
  }
62
43
 
63
- &:focus-within,
64
- &:focus {
65
- border: 1px solid var(--_primary-300);
66
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
67
- background-color: var(--_base-white);
68
-
69
- .dropdown_text {
70
- color: var(--_primary-500);
71
- }
72
-
73
- svg {
74
- stroke: var(--_primary-500);
75
- }
44
+ &.open {
45
+ transform: rotate(180deg);
76
46
  }
77
47
  }
78
48
  }
79
49
 
80
- .dropdown_panel_macro {
81
- border: 1px solid var(--_gray-300);
82
- padding: 4px;
83
- border-radius: 6px;
50
+ .fb_dropdown_panel {
84
51
  position: absolute;
85
- top: var(--_top-pos, 100%);
86
- left: var(--_left-pos, 0);
87
- width: var(--_panel-width, auto);
52
+ width: 100%;
88
53
  background-color: var(--_base-white);
89
- opacity: 0;
90
- pointer-events: none;
91
- transition:
92
- opacity 300ms ease,
93
- transform 300ms ease;
54
+ border: 1px solid var(--_gray-300);
55
+ border-radius: 6px;
56
+ margin-top: 4px;
57
+ z-index: 10;
58
+ max-height: 200px;
59
+ overflow-y: auto;
60
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
94
61
 
95
- &.open {
96
- opacity: 1;
97
- transform: translateY(0);
98
- pointer-events: auto;
62
+ &.drop-up {
63
+ bottom: 44px; // height of dropdown + margin
64
+ top: auto;
65
+ margin-top: 0;
66
+ margin-bottom: 4px;
99
67
  }
100
68
 
101
- &.closed {
102
- opacity: 0;
103
- transform: translateY(20px);
104
- pointer-events: none;
69
+ &.drop-down {
70
+ top: 100%;
105
71
  }
106
72
 
107
73
  ul {
108
74
  list-style: none;
109
- padding: 0;
75
+ padding: 4px 0;
110
76
  margin: 0;
77
+
111
78
  li {
112
- padding: 8px 12px;
79
+ padding: 0;
80
+ }
81
+
82
+ .dropdown_option {
83
+ padding: 10px 12px;
113
84
  font-size: 14px;
114
- color: var(--_gray-600);
115
- background-color: var(--_base-white);
85
+ color: var(--_gray-700);
116
86
  cursor: pointer;
117
- border-radius: 4px;
87
+ transition: background 0.2s;
88
+
118
89
  &:hover {
119
90
  background-color: var(--_primary-50);
120
91
  color: var(--_primary-500);
121
92
  }
93
+
94
+ &.selected {
95
+ background-color: var(--_primary-100);
96
+ color: var(--_primary-700);
97
+ font-weight: 500;
98
+ }
122
99
  }
123
100
  }
124
101
  }
package/dist/form-preview.scss CHANGED
@@ -97,6 +97,7 @@
97
97
  font-size: 16px;
98
98
  cursor: pointer;
99
99
  user-select: none;
100
+ flex-wrap: wrap;
100
101
 
101
102
  input {
102
103
  display: none;
@@ -107,6 +108,7 @@
107
108
  height: 20px;
108
109
  background-color: #fff;
109
110
  border: 2px solid #ccc;
111
+ margin: 0px 4px;
110
112
  position: relative;
111
113
  transition: all 0.2s ease;
112
114