Skip to content

Commit

Permalink
Bug fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbalganjjm
bbalganjjm committed Jun 27, 2024
1 parent 97dc9b2 commit 0d4f9b9
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 55 deletions.
4 changes: 2 additions & 2 deletions src/main/resources/static/html/com/app/sample/type0201.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@
</select></td>
<td rowspan="2" style="text-align: center;"><input id="age" type="text" data-validate='[["required"], ["integer"]]'></td>
<td><input id="registered" type="text" data-format='[["date", 8, "date"]]' data-validate='[["required"]]'></td>
<td style="text-align: center; line-height: 0;"><label class="toggle-switch">
<td style="text-align: center; line-height: 0;"><label class="switch__">
<input id="isActive" type="checkbox">
<span class="slider"></span>
<span class="switch_slider__"></span>
</label></td>
</tr>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/static/html/com/app/sample/type0401.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,9 +134,9 @@
</li>
<li>
<label for="isActive"><span>Active</span></label>
<label class="toggle-switch">
<label class="switch__">
<input id="isActive" type="checkbox">
<span class="slider"></span>
<span class="switch_slider__"></span>
</label>
</li>
<li>
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/static/html/com/app/sample/type0402.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,9 @@
</li>
<li>
<label for="isActive"><span>Active</span></label>
<label class="toggle-switch">
<label class="switch__">
<input id="isActive" type="checkbox">
<span class="slider"></span>
<span class="switch_slider__"></span>
</label>
</li>
<li>
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/static/html/com/app/sample/type0501.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,9 +140,9 @@
</li>
<li>
<label for="isActive"><span>Active</span></label>
<label class="toggle-switch">
<label class="switch__">
<input id="isActive" type="checkbox">
<span class="slider"></span>
<span class="switch_slider__"></span>
</label>
</li>
<li>
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/static/html/com/app/sample/type0601.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@
</select></td>
<td style="text-align: center;"><input id="age" type="text" data-validate='[["required"],["integer"]]'></td>
<td><input id="registered" type="text" data-format='[["date",8,"date"]]' data-validate='[["required"]]'></td>
<td style="text-align: center; line-height: 0;"><label class="toggle-switch">
<td style="text-align: center; line-height: 0;"><label class="switch__">
<input id="isActive" type="checkbox">
<span class="slider"></span>
<span class="switch_slider__"></span>
</label></td>
<td><textarea id="about" style="min-width: 500px; min-height: 100px;"></textarea></td>
<td><textarea id="greeting"></textarea></td>
Expand Down
75 changes: 30 additions & 45 deletions src/main/resources/static/js/natural_js/css/natural.ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1815,77 +1815,62 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
background-color: var(--md-sys-color-surface-container-highest);
}

/* Checkbox toggle switch */
/**
HTML Template & variables
<label class="toggle-switch" style="
--njs-toggle-switch-height: ${height};
--njs-toggle-switch-width: ${width};
--njs-toggle-switch-padding: ${padding};
--njs-toggle-switch-height: ${height};
--njs-toggle-switch-on-content: ${on-content};
--njs-toggle-switch-off-content: ${off-content};
--njs-toggle-switch-font-size: ${font-size};
">
<input id="${id}" type="checkbox">
<span class="slider"></span>
</label>
*/
.toggle-switch {
--njs-toggle-switch-height: 27px;
--njs-toggle-switch-width: calc(var(--njs-toggle-switch-height) * 2);
--njs-toggle-switch-padding: calc(var(--njs-toggle-switch-height) / 7);
--njs-toggle-switch-on-content: "ON";
--njs-toggle-switch-off-content: "OFF";
/* Switch */
.switch__ {
--njs-switch-height: 27px;
--njs-switch-width: calc(var(--njs-switch-height) * 2);
--njs-switch-padding: calc(var(--njs-switch-height) / 7);
--njs-switch-on-content: "ON";
--njs-switch-off-content: "OFF";
display: inline-block;
position: relative;
height: var(--njs-toggle-switch-height);
width: var(--njs-toggle-switch-width);
height: var(--njs-switch-height);
width: var(--njs-switch-width);
}
.toggle-switch input {
.switch__ input {
display: none;
}
.toggle-switch .slider {
.switch__ .switch_slider__ {
display: flex;
height: var(--njs-toggle-switch-height);
padding: var(--njs-toggle-switch-padding);
height: var(--njs-switch-height);
padding: var(--njs-switch-padding);
cursor: pointer;
background-color: var(--md-sys-color-primary-container);
transition: left var(--njs-motion-duration-fast) ease, background-color var(--njs-motion-duration-fast) ease;
border-radius: 999999px;
}
.toggle-switch .slider:before {
.switch__ .switch_slider__:before {
content: "";
position: absolute;
display: inline-block;
height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
width: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
width: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
background-color: var(--md-sys-color-inverse-on-surface);
transition: var(--njs-motion-duration-normal);
left: var(--njs-toggle-switch-padding);
left: var(--njs-switch-padding);
border-radius: 999999px;
}
.toggle-switch input:checked+.slider {
.switch__ input:checked+.switch_slider__ {
background-color: var(--md-sys-color-primary);
}
.toggle-switch input:checked+.slider:before {
left: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) - var(--njs-toggle-switch-padding)));
.switch__ input:checked+.switch_slider__:before {
left: calc(var(--njs-switch-width) - (var(--njs-switch-height) - var(--njs-switch-padding)));
}
.toggle-switch .slider::after {
content: var(--njs-toggle-switch-off-content);
.switch__ .switch_slider__::after {
content: var(--njs-switch-off-content);
display: inline-block;
position: absolute;
text-align: center;
line-height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-padding) * 2));
width: calc(var(--njs-toggle-switch-width) - (var(--njs-toggle-switch-height) + (var(--njs-toggle-switch-padding) * 2)));
right: calc(var(--njs-toggle-switch-padding) * 2);
line-height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
height: calc(var(--njs-switch-height) - (var(--njs-switch-padding) * 2));
width: calc(var(--njs-switch-width) - (var(--njs-switch-height) + (var(--njs-switch-padding) * 2)));
right: calc(var(--njs-switch-padding) * 2);
color: var(--md-sys-color-on-primary-container);
white-space: nowrap;
font-size: var(--njs-toggle-switch-font-size, calc((var(--njs-toggle-switch-height) / 2) - (var(--njs-toggle-switch-padding) / 1.3)));
font-size: var(--njs-switch-font-size, calc((var(--njs-switch-height) / 2) - (var(--njs-switch-padding) / 1.3)));
}
.toggle-switch input:checked+.slider::after {
content: var(--njs-toggle-switch-on-content);
left: calc(var(--njs-toggle-switch-padding) * 2);
.switch__ input:checked+.switch_slider__::after {
content: var(--njs-switch-on-content);
left: calc(var(--njs-switch-padding) * 2);
color: var(--md-sys-color-on-primary);
}

0 comments on commit 0d4f9b9

Please sign in to comment.