Add styling for the toggle input type
This commit is contained in:
parent
ed20d545a7
commit
9bd88f5677
5335
assets/css/admin.css
5335
assets/css/admin.css
File diff suppressed because one or more lines are too long
|
@ -2830,19 +2830,13 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
|
|||
}
|
||||
.wc-shipping-zone-method-enabled {
|
||||
text-align: center;
|
||||
.status-enabled {
|
||||
margin-top: 1px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
&::before {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
.status-disabled {
|
||||
margin-top: 1px;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.woocommerce-input-toggle {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
|
@ -2860,6 +2854,39 @@ table.wc-shipping-zones, table.wc-shipping-zone-methods, table.wc-shipping-class
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce-input-toggle {
|
||||
height: 16px;
|
||||
width: 32px;
|
||||
border: 2px solid #935687;
|
||||
background-color: #935687;
|
||||
display: inline-block;
|
||||
text-indent: -9999px;
|
||||
border-radius: 10em;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&.woocommerce-input-toggle--disabled {
|
||||
border-color: #999;
|
||||
background-color: #999;
|
||||
|
||||
&:before {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wc-modal-shipping-method-settings {
|
||||
background: #f8f8f8;
|
||||
padding: 1em !important;
|
||||
|
|
|
@ -128,9 +128,9 @@
|
|||
// Populate $tbody with the current methods
|
||||
$.each( methods, function( id, rowData ) {
|
||||
if ( 'yes' === rowData.enabled ) {
|
||||
rowData.enabled_icon = '<span class="status-enabled">' + data.strings.yes + '</span>';
|
||||
rowData.enabled_icon = '<span class="woocommerce-input-toggle woocommerce-input-toggle--enabled">' + data.strings.yes + '</span>';
|
||||
} else {
|
||||
rowData.enabled_icon = '<span class="status-disabled">' + data.strings.no + '</span>';
|
||||
rowData.enabled_icon = '<span class="woocommerce-input-toggle woocommerce-input-toggle--disabled">' + data.strings.no + '</span>';
|
||||
}
|
||||
|
||||
view.$el.append( view.rowTemplate( rowData ) );
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue