Add styling for the toggle input type

This commit is contained in:
James Koster 2016-10-11 12:33:33 +01:00
parent ed20d545a7
commit 9bd88f5677
4 changed files with 5375 additions and 15 deletions

File diff suppressed because one or more lines are too long

View File

@ -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;

View File

@ -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