Skip to content

Commit

Permalink
[ #17 ] - modernize imputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@razvanaldea89
razvanaldea89 committed Oct 29, 2023
1 parent 8f6b162 commit 1c8a6b4
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 4 deletions.
100 changes: 100 additions & 0 deletions assets/css/back-end-styles.css
View file
Expand Up @@ -219,3 +219,103 @@
.uncr-wrap .uncr-checkbox-wrapper label {
padding-left: 2px;
}

/**
* Input checkbox toggles
*/
/* Toggles */
.raldea-toggle {
position: relative;
user-select: none;
display: inline-block;
vertical-align: middle;
}
.raldea-toggle .raldea-toggle__items {
box-sizing: border-box;
display: inline-block;
position: relative;
}
.raldea-toggle .raldea-toggle__items > * {
box-sizing: inherit;
}
.raldea-toggle .raldea-toggle__items .raldea-toggle__track {
background-color: #fff;
border: 2px solid #6c7781;
border-radius: 9px;
display: inline-block;
height: 18px;
width: 36px;
vertical-align: top;
transition: background 0.2s ease;
}
.raldea-toggle .raldea-toggle__items .raldea-toggle__thumb {
background-color: #6c7781;
border: 5px solid #6c7781;
border-radius: 50%;
display: block;
height: 10px;
width: 10px;
position: absolute;
left: 4px;
top: 4px;
transition: transform 0.2s ease;
min-width: auto;
min-height: auto;
float: none;
padding: 0;
}
.raldea-toggle .raldea-toggle__items .raldea-toggle__off {
position: absolute;
right: 6px;
top: 6px;
color: #6c7781;
fill: currentColor;
}
.raldea-toggle .raldea-toggle__items .raldea-toggle__on {
position: absolute;
top: 6px;
left: 8px;
border: 1px solid #fff;
outline: 1px solid transparent;
outline-offset: -1px;
display: none;
}
.raldea-toggle .raldea-toggle__input[type=checkbox] {
border-radius: 2px;
border: 2px solid #6c7781;
margin-right: 12px;
transition: none;
height: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.raldea-toggle .raldea-toggle__input[type=checkbox]:checked + .raldea-toggle__items .raldea-toggle__track {
background-color: #2271b1;
border: 9px solid transparent;
}
.raldea-toggle .raldea-toggle__input[type=checkbox]:checked + .raldea-toggle__items .raldea-toggle__thumb {
background-color: #fff;
border-width: 0;
transform: translateX(18px);
}
.raldea-toggle .raldea-toggle__input[type=checkbox]:checked + .raldea-toggle__items .raldea-toggle__off {
display: none;
}
.raldea-toggle .raldea-toggle__input[type=checkbox]:checked + .raldea-toggle__items .raldea-toggle__on {
display: inline-block;
}
/**
* Fieldset Styling
*/

.uncr-wrap form fieldset.unrc-checkbox-fieldset {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
padding: 10px;
}
36 changes: 32 additions & 4 deletions includes/helpers/class-ncr-render-engine.php
View file
Expand Up @@ -99,7 +99,7 @@ public function render_radio_field( $args ) {
*/
public function render_multicheckbox_field( $args ) {

$output = '<fieldset>';
$output = '<fieldset class="unrc-checkbox-fieldset">';

$args['options'] = array_flip( $args['options'] );

Expand All @@ -112,7 +112,21 @@ public function render_multicheckbox_field( $args ) {
foreach ( $args['options'] as $value => $key ) {

$output .= '<div class="uncr-checkbox-wrapper">';
$output .= '<input id="' . esc_attr( $args['options'][ $value ] ) . '" type="checkbox" name="' . esc_attr( $this->settings_field ) . '[' . esc_attr( $args['id'] ) . '][]' . '" value="' . esc_attr( $key ) . '"' . checked( in_array( $key, $current_selection ), true, false ) . '>';
$output .= '<div class="raldea-toggle">
<input id="' . esc_attr( $args['options'][ $value ] ) . '" class="raldea-toggle__input" type="checkbox" name="' . esc_attr( $this->settings_field ) . '[' . esc_attr( $args['id'] ) . '][]' . '" value="' . esc_attr( $key ) . '"' . checked( in_array( $key, $current_selection ), true, false ) . '>
<div class="raldea-toggle__items">
<span class="raldea-toggle__track"></span>
<span class="raldea-toggle__thumb"></span>
<svg class="raldea-toggle__off" width="6" height="6" aria-hidden="true" role="img"
focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="raldea-toggle__on" width="2" height="6" aria-hidden="true" role="img"
focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>';
$output .= '<label for="' . esc_attr( $args['options'][ $value ] ) . '">' . esc_attr( $value ) . '</label>';
$output .= '</div>';
}
Expand All @@ -134,14 +148,28 @@ public function render_multicheckbox_field( $args ) {
*/
public function render_checkbox_field( $args ) {

$output = '<fieldset>';
$output = '<fieldset class="unrc-checkbox-fieldset">';

$args['options'] = array_flip( $args['options'] );

foreach ( $args['options'] as $value => $key ) {

$output .= '<div class="uncr-checkbox-wrapper">';
$output .= '<input id="' . esc_attr( $args['options'][ $value ] ) . '" type="checkbox" name="' . esc_attr( $this->settings_field ) . '[' . esc_attr( $args['options'][ $value ] ) . ']' . '" value="' . esc_attr( $args['options'][ $value ] ) . '"' . checked( $this->check_option_value( $args['options'][ $value ] ), $key, false ) . '>';
$output .= '<div class="raldea-toggle">
<input id="' . esc_attr( $args['options'][ $value ] ) . '" type="checkbox" class="raldea-toggle__input" name="' . esc_attr( $this->settings_field ) . '[' . esc_attr( $args['options'][ $value ] ) . ']' . '" value="' . esc_attr( $args['options'][ $value ] ) . '"' . checked( $this->check_option_value( $args['options'][ $value ] ), $key, false ) . '>
<div class="raldea-toggle__items">
<span class="raldea-toggle__track"></span>
<span class="raldea-toggle__thumb"></span>
<svg class="raldea-toggle__off" width="6" height="6" aria-hidden="true" role="img"
focusable="false" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path>
</svg>
<svg class="raldea-toggle__on" width="2" height="6" aria-hidden="true" role="img"
focusable="false" viewBox="0 0 2 6">
<path d="M0 0h2v6H0z"></path>
</svg>
</div>
</div>';
$output .= '<label for="' . esc_attr( $args['options'][ $value ] ) . '">' . esc_attr( $value ) . '</label>';
$output .= '</div>';
}
Expand Down

0 comments on commit 1c8a6b4

Please sign in to comment.