Skip to content

Commit b81c595

Browse files
arifBurakDemirayarifBurakDemiray
authored
Merge pull request #7008 from Countly/sdk-ui-update-fix
[sdk] ui updates fix: wrap it all css and html
2 parents b944239 + f56494d commit b81c595

File tree

2 files changed

+373
-370
lines changed

2 files changed

+373
-370
lines changed

‎plugins/sdk/frontend/public/stylesheets/main.scss‎

Lines changed: 165 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -72,182 +72,183 @@
7272
}
7373
}
7474

75-
76-
.preset-button {
77-
border-radius: 20px; // pill shape
78-
padding: 6px 18px;
79-
font-weight: 500;
80-
font-size: 14px;
81-
background-color: #f0f0f0;
82-
color: #606266;
83-
border: 1px solid #dcdfe6;
84-
transition: all 0.2s ease;
85-
86-
&.active {
87-
background-color: #12AF51; // Element UI's "success"
88-
color: #fff;
89-
border-color: #12AF51;
90-
}
91-
92-
&:hover:not(.active) {
93-
background-color: #e6f7ff;
94-
color: #409eff;
95-
border-color: #c6e2ff;
96-
}
97-
}
98-
99-
/* Some changes for making left column of config to stay top-aligned. */
100-
.bu-columns.config-section,
101-
.config-section.bu-columns,
102-
.config-section.bu-is-vcentered,
103-
.bu-columns.config-section.bu-is-vcentered {
104-
align-items: flex-start !important;
105-
}
106-
107-
@media (max-width: 1750px) {
108-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start {
109-
display: flex !important;
110-
flex-direction: column !important;
111-
gap: 12px !important;
112-
align-items: stretch !important;
75+
.sdk-behavior-settings-wrapper {
76+
.preset-button {
77+
border-radius: 20px; // pill shape
78+
padding: 6px 18px;
79+
font-weight: 500;
80+
font-size: 14px;
81+
background-color: #f0f0f0;
82+
color: #606266;
83+
border: 1px solid #dcdfe6;
84+
transition: all 0.2s ease;
85+
86+
&.active {
87+
background-color: #12AF51; // Element UI's "success"
88+
color: #fff;
89+
border-color: #12AF51;
11390
}
114-
.sdk-preset-select-wrapper { margin-left: 0px !important; }
11591

116-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-preset-select-wrapper,
117-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .validation-wrapper,
118-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-number-wrapper,
119-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-select,
120-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input,
121-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input-number,
122-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .cly-colorpicker,
123-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-upload {
124-
width: 100% !important;
125-
min-width: 0 !important;
92+
&:hover:not(.active) {
93+
background-color: #e6f7ff;
94+
color: #409eff;
95+
border-color: #c6e2ff;
12696
}
127-
128-
.sdk-enforce-btn {
129-
margin: 0 !important;
13097
}
13198

132-
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-enforce-btn {
133-
min-width: 0 !important;
134-
align-self: flex-start !important;
99+
/* Some changes for making left column of config to stay top-aligned. */
100+
.bu-columns.config-section,
101+
.config-section.bu-columns,
102+
.config-section.bu-is-vcentered,
103+
.bu-columns.config-section.bu-is-vcentered {
104+
align-items: flex-start !important;
135105
}
136-
}
137106

138-
/* SDK config validation styles */
139-
.config-invalid textarea,
140-
.config-invalid input,
141-
.config-invalid .el-textarea__inner {
142-
border-color: var(--cly-danger, #e74c3c) !important;
143-
box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.12) !important;
144-
}
145-
146-
.el-textarea {
147-
width: 180px;
148-
}
107+
@media (max-width: 1750px) {
108+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start {
109+
display: flex !important;
110+
flex-direction: column !important;
111+
gap: 12px !important;
112+
align-items: stretch !important;
113+
}
114+
.sdk-preset-select-wrapper { margin-left: 0px !important; }
115+
116+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-preset-select-wrapper,
117+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .validation-wrapper,
118+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-number-wrapper,
119+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-select,
120+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input,
121+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input-number,
122+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .cly-colorpicker,
123+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-upload {
124+
width: 100% !important;
125+
min-width: 0 !important;
126+
}
149127

150-
.validation-wrapper {
151-
display: flex;
152-
flex-direction: column;
153-
// align-items: stretch;
154-
}
128+
.sdk-enforce-btn {
129+
margin: 0 !important;
130+
}
155131

156-
.config-validation-box {
157-
margin-top: 6px;
158-
font-size: 0.95em;
159-
width: 100%;
160-
box-sizing: border-box;
161-
}
162-
.config-validation-box .status-box {
163-
display: flex;
164-
align-items: center;
165-
gap: 8px;
166-
padding: 8px 12px;
167-
border-radius: 6px;
168-
border: 1px solid transparent;
169-
width: 100%;
170-
box-sizing: border-box;
171-
}
172-
.config-validation-box .status-box.valid {
173-
color: var(--cly-success, #176f2c);
174-
background: rgba(23, 111, 44, 0.06);
175-
border-color: rgba(23, 111, 44, 0.18);
176-
}
177-
.config-validation-box .status-box.invalid {
178-
color: var(--cly-danger, #c0392b);
179-
background: rgba(192, 57, 43, 0.04);
180-
border-color: rgba(192, 57, 43, 0.18);
181-
}
182-
.config-validation-box .dot {
183-
width: 10px;
184-
height: 10px;
185-
border-radius: 50%;
186-
display: inline-block;
187-
}
188-
.config-validation-box .dot.green { background: var(--cly-success, #2ecc71); }
189-
.config-validation-box .dot.red { background: var(--cly-danger, #e74c3c); }
190-
191-
.sdk-applied-indicator {
192-
display: inline-flex;
193-
align-items: center;
194-
margin-left: 8px;
195-
color: #10a14a;
196-
font-size: 10px;
197-
padding: 0 6px;
198-
border-radius: 4px;
199-
height: 20px;
200-
line-height: 20px;
201-
font-weight: 500;
202-
white-space: nowrap;
203-
}
204-
.sdk-applied-indicator i { font-size: 12px; margin-right: 4px; }
205-
.configuration-warning-container--applied { @extend .sdk-applied-indicator; background: #ebfaee; }
206-
207-
.sdk-enforce-btn { margin-left: 8px; padding: 0 14px !important; display: inline-flex; align-items: center; justify-content: center; }
208-
.sdk-enforce-btn i { margin-right: 6px; }
209-
.sdk-enforce-btn.enforced {
210-
background: #fff !important;
211-
color: #34495e !important;
212-
border-color: #dcdfe6 !important;
213-
min-width: 180px;
214-
}
215-
.sdk-enforce-btn.enforced i { color: #c0bbbb; }
216-
217-
.sdk-support-text {
218-
display: flex;
219-
align-items: flex-start;
220-
gap: 6px;
221-
font-size: 12px;
222-
margin-top: 6px;
223-
padding: 6px 8px;
224-
border-radius: 6px;
225-
border: 1px solid transparent;
226-
}
227-
.sdk-support-text i { font-size: 12px; margin-top: 2px; }
228-
.sdk-support-text.tooltip-neutral { background: transparent; color: #0166D6; }
229-
.sdk-support-text.tooltip-danger { background: transparent; color: #D23F00; }
230-
.sdk-support-text.tooltip-success { background: transparent; color: #ffffff; }
231-
.sdk-support-text.tooltip-warning { background: transparent; color: #E49700; }
132+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-enforce-btn {
133+
min-width: 0 !important;
134+
align-self: flex-start !important;
135+
}
136+
}
232137

233-
.sdk-default-flag { font-style: italic; color: #909399; }
234-
.sdk-default-hint { margin-top: 4px; font-size: 11px; color: #909399; text-align: center; }
235-
.sdk-enforce-fixed { min-width: 140px; text-align: center; }
236-
.sdk-enforce-btn { align-self: flex-start; height: 32px !important; line-height: 30px !important; }
138+
/* SDK config validation styles */
139+
.config-invalid textarea,
140+
.config-invalid input,
141+
.config-invalid .el-textarea__inner {
142+
border-color: var(--cly-danger, #e74c3c) !important;
143+
box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.12) !important;
144+
}
237145

238-
.sdk-number-wrapper { display: flex; flex-direction: column; }
239-
.sdk-number-wrapper .el-input-number { width: 180px; }
240-
.el-select>.el-input { width: 180px; }
241-
.sdk-switch-select { min-width: 180px; width: 180px; }
242-
.sdk-preset-select-wrapper .el-select { width: 180px; }
146+
.el-textarea {
147+
width: 180px;
148+
}
243149

244-
.sdk-switch-select { min-width: 140px; }
150+
.validation-wrapper {
151+
display: flex;
152+
flex-direction: column;
153+
// align-items: stretch;
154+
}
245155

246-
.sdk-preset-select-wrapper { width: 100%; display: flex; justify-content: flex-start; margin-left: 188px; }
156+
.config-validation-box {
157+
margin-top: 6px;
158+
font-size: 0.95em;
159+
width: 100%;
160+
box-sizing: border-box;
161+
}
162+
.config-validation-box .status-box {
163+
display: flex;
164+
align-items: center;
165+
gap: 8px;
166+
padding: 8px 12px;
167+
border-radius: 6px;
168+
border: 1px solid transparent;
169+
width: 100%;
170+
box-sizing: border-box;
171+
}
172+
.config-validation-box .status-box.valid {
173+
color: var(--cly-success, #176f2c);
174+
background: rgba(23, 111, 44, 0.06);
175+
border-color: rgba(23, 111, 44, 0.18);
176+
}
177+
.config-validation-box .status-box.invalid {
178+
color: var(--cly-danger, #c0392b);
179+
background: rgba(192, 57, 43, 0.04);
180+
border-color: rgba(192, 57, 43, 0.18);
181+
}
182+
.config-validation-box .dot {
183+
width: 10px;
184+
height: 10px;
185+
border-radius: 50%;
186+
display: inline-block;
187+
}
188+
.config-validation-box .dot.green { background: var(--cly-success, #2ecc71); }
189+
.config-validation-box .dot.red { background: var(--cly-danger, #e74c3c); }
247190

248-
.el-input-number {
249-
.el-input-number__decrease,
250-
.el-input-number__increase {
251-
background: white;
191+
.sdk-applied-indicator {
192+
display: inline-flex;
193+
align-items: center;
194+
margin-left: 8px;
195+
color: #10a14a;
196+
font-size: 10px;
197+
padding: 0 6px;
198+
border-radius: 4px;
199+
height: 20px;
200+
line-height: 20px;
201+
font-weight: 500;
202+
white-space: nowrap;
252203
}
253-
}
204+
.sdk-applied-indicator i { font-size: 12px; margin-right: 4px; }
205+
.configuration-warning-container--applied { @extend .sdk-applied-indicator; background: #ebfaee; }
206+
207+
.sdk-enforce-btn { margin-left: 8px; padding: 0 14px !important; display: inline-flex; align-items: center; justify-content: center; }
208+
.sdk-enforce-btn i { margin-right: 6px; }
209+
.sdk-enforce-btn.enforced {
210+
background: #fff !important;
211+
color: #34495e !important;
212+
border-color: #dcdfe6 !important;
213+
min-width: 180px;
214+
}
215+
.sdk-enforce-btn.enforced i { color: #c0bbbb; }
216+
217+
.sdk-support-text {
218+
display: flex;
219+
align-items: flex-start;
220+
gap: 6px;
221+
font-size: 12px;
222+
margin-top: 6px;
223+
padding: 6px 8px;
224+
border-radius: 6px;
225+
border: 1px solid transparent;
226+
}
227+
.sdk-support-text i { font-size: 12px; margin-top: 2px; }
228+
.sdk-support-text.tooltip-neutral { background: transparent; color: #0166D6; }
229+
.sdk-support-text.tooltip-danger { background: transparent; color: #D23F00; }
230+
.sdk-support-text.tooltip-success { background: transparent; color: #ffffff; }
231+
.sdk-support-text.tooltip-warning { background: transparent; color: #E49700; }
232+
233+
.sdk-default-flag { font-style: italic; color: #909399; }
234+
.sdk-default-hint { margin-top: 4px; font-size: 11px; color: #909399; text-align: center; }
235+
.sdk-enforce-fixed { min-width: 140px; text-align: center; }
236+
.sdk-enforce-btn { align-self: flex-start; height: 32px !important; line-height: 30px !important; }
237+
238+
.sdk-number-wrapper { display: flex; flex-direction: column; }
239+
.sdk-number-wrapper .el-input-number { width: 180px; }
240+
.el-select>.el-input { width: 180px; }
241+
.sdk-switch-select { min-width: 180px; width: 180px; }
242+
.sdk-preset-select-wrapper .el-select { width: 180px; }
243+
244+
.sdk-switch-select { min-width: 140px; }
245+
246+
.sdk-preset-select-wrapper { width: 100%; display: flex; justify-content: flex-start; margin-left: 188px; }
247+
248+
.el-input-number {
249+
.el-input-number__decrease,
250+
.el-input-number__increase {
251+
background: white;
252+
}
253+
}
254+
}

0 commit comments

Comments
 (0)