ui-change
This commit is contained in:
Smart
parent
9ff289a1b1
commit
542eaaa50c
20664
ng-seed/package-lock.json
generated
20664
ng-seed/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -81,7 +81,7 @@
|
||||
<div class="availabilitys">
|
||||
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||
<div class="mt-2">
|
||||
<div class="field mb-1">
|
||||
<div class="field mb-2">
|
||||
<label class="label-container">Staff</label>
|
||||
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
||||
</div>
|
||||
@ -94,24 +94,33 @@
|
||||
</mat-radio-group>
|
||||
</section>
|
||||
</div> -->
|
||||
<div class="field mb-1">
|
||||
|
||||
|
||||
<div class="field mb-2">
|
||||
<label for="name-field" class="mr2">All-day Availability</label>
|
||||
<!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
|
||||
<label class="switch" >
|
||||
<!-- <label class="switch" >
|
||||
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</label> -->
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
|
||||
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field mb-1">
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">From</label>
|
||||
<mat-form-field appearance="outline"class="mate" >
|
||||
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||
<mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
|
||||
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -123,7 +132,7 @@
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||
<mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
|
||||
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
// .outline{
|
||||
// width: 18%;
|
||||
@ -28,6 +29,12 @@
|
||||
.mate{
|
||||
width: 16% !important;
|
||||
}
|
||||
.mates{
|
||||
width: 16% !important;
|
||||
::ng-deep .mat-form-field-outline {
|
||||
width: 115%!important;
|
||||
}
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
@ -38,10 +45,12 @@
|
||||
.mr-8{
|
||||
margin-right: 7rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.mr2{
|
||||
margin-right: 3rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
@ -100,8 +109,8 @@
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
margin-top: -12px;
|
||||
padding-top: 10px;
|
||||
// margin-top: -12px;
|
||||
// padding-top: 10px;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
@ -116,6 +125,7 @@
|
||||
.container-to{
|
||||
margin-right: 9rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0em 0 1em 0;
|
||||
@ -146,115 +156,199 @@
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.time-align{
|
||||
padding-top: 10px!important;
|
||||
padding-top: 10px !important;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
//switch
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: block;
|
||||
// vertical-align: top;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
padding: 3px;
|
||||
margin: 0 10px 10px 0;
|
||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||
border-radius: 18px;
|
||||
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
// background: #eceeef;
|
||||
border-radius: inherit;
|
||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #4CAE4C;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label:before, .switch-label:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
-webkit-transition: inherit;
|
||||
-moz-transition: inherit;
|
||||
-o-transition: inherit;
|
||||
transition: inherit;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label:before {
|
||||
// content: attr(data-off);
|
||||
content: 'enable';
|
||||
right: 11px;
|
||||
color: #111111;
|
||||
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.switch-label:after {
|
||||
// content: attr(data-on);
|
||||
content: 'disable ';
|
||||
left: 11px;
|
||||
color: #111111;
|
||||
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
background: #FFFFFF;
|
||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.switch-input:checked ~ .switch-label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||
border-radius: 100%;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.switch-handle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: 74px;
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
// .switch {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// // vertical-align: top;
|
||||
// width: 100px;
|
||||
// height: 30px;
|
||||
// padding: 3px;
|
||||
// margin: 0 10px 10px 0;
|
||||
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||
// // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||
// border-radius: 18px;
|
||||
// // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
// cursor: pointer;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-input {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// opacity: 0;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// height: inherit;
|
||||
// font-size: 10px;
|
||||
// text-transform: uppercase;
|
||||
// // background: #eceeef;
|
||||
// border-radius: inherit;
|
||||
// // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
// border: 1px solid #4CAE4C;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label:before, .switch-label:after {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// margin-top: -.5em;
|
||||
// line-height: 1;
|
||||
// -webkit-transition: inherit;
|
||||
// -moz-transition: inherit;
|
||||
// -o-transition: inherit;
|
||||
// transition: inherit;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label:before {
|
||||
// // content: attr(data-off);
|
||||
// content: 'enable';
|
||||
// right: 11px;
|
||||
// color: #111111;
|
||||
// // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||
// }
|
||||
// .switch-label:after {
|
||||
// // content: attr(data-on);
|
||||
// content: 'disable ';
|
||||
// left: 11px;
|
||||
// color: #111111;
|
||||
// // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label {
|
||||
// background: #FFFFFF;
|
||||
// // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label:before {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label:after {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .switch-handle {
|
||||
// position: absolute;
|
||||
// top: 4px;
|
||||
// left: 4px;
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
// // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||
// background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||
// border-radius: 100%;
|
||||
// box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// .switch-handle:before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// margin: -6px 0 0 -6px;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||
// border-radius: 6px;
|
||||
// box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-handle {
|
||||
// left: 74px;
|
||||
// box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
|
||||
/* Transition
|
||||
========================== */
|
||||
.switch-label, .switch-handle {
|
||||
transition: All 0.3s ease;
|
||||
-webkit-transition: All 0.3s ease;
|
||||
-moz-transition: All 0.3s ease;
|
||||
-o-transition: All 0.3s ease;
|
||||
// /* Transition
|
||||
// ========================== */
|
||||
// .switch-label, .switch-handle {
|
||||
// transition: All 0.3s ease;
|
||||
// -webkit-transition: All 0.3s ease;
|
||||
// -moz-transition: All 0.3s ease;
|
||||
// -o-transition: All 0.3s ease;
|
||||
// }
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
width: 135px;
|
||||
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// border: 2px solid #4CAE4C;
|
||||
border-radius: 20px;
|
||||
// box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
// transition: margin 0.3s ease-in 0s;
|
||||
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: " Enable";
|
||||
padding-left: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;
|
||||
border: 1px solid #4CAE4C;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "Disable";
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;;
|
||||
text-align: right;
|
||||
border: 1px solid #999999;
|
||||
// border: 1px solid #DDD;
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
|
||||
// box-shadow: 0 0 10px rgb(82 81 144 / 38%);
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
display: block;
|
||||
width: 25px;
|
||||
margin: 2px;
|
||||
background: #999999;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 105px;
|
||||
// border: 1px solid #999999;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
// .onoffswitch-switch:after {
|
||||
// display: block;
|
||||
// background: #999999!important;
|
||||
// }
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
// border: 1px solid #999999;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
background: #4CAE4C;
|
||||
// border: 1px solid #999999;
|
||||
|
||||
}
|
||||
@ -26,21 +26,28 @@
|
||||
</div>
|
||||
<div class="field mb-1">
|
||||
<label for="name-field" class="mr2">All-day Availability</label>
|
||||
<label class="switch" >
|
||||
<!-- <label class="switch" >
|
||||
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||
<span class="switch-handle"></span>
|
||||
</label>
|
||||
</label> -->
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked >
|
||||
<label class="onoffswitch-label" for="myonoffswitch" (click)="toggle()" id="bt" >
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field mb-1">
|
||||
<div class="field">
|
||||
<label for="name-field" class="label-container">From</label>
|
||||
<mat-form-field appearance="outline"class="mate" >
|
||||
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||
<mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
|
||||
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -52,7 +59,7 @@
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="mate date-marge" *ngIf="show">
|
||||
<mat-form-field appearance="outline" class="mates date-marge" *ngIf="show">
|
||||
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
.label-container{
|
||||
margin-right: 8rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
// .outline{
|
||||
// width: 18%;
|
||||
@ -28,6 +29,12 @@
|
||||
.mate{
|
||||
width: 16% !important;
|
||||
}
|
||||
.mates{
|
||||
width: 16% !important;
|
||||
::ng-deep .mat-form-field-outline {
|
||||
width: 115%!important;
|
||||
}
|
||||
}
|
||||
.date-marge{
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
@ -38,10 +45,12 @@
|
||||
.mr-8{
|
||||
margin-right: 7rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.mr2{
|
||||
margin-right: 3rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
.cancel {
|
||||
background: #F5F5F5;
|
||||
@ -100,23 +109,23 @@
|
||||
}
|
||||
::ng-deep .mat-icon-button {
|
||||
margin-right: -3rem;
|
||||
margin-top: -12px;
|
||||
padding-top: 10px;
|
||||
// margin-top: -12px;
|
||||
// padding-top: 10px;
|
||||
}
|
||||
::ng-deep .mat-slide-toggle-bar {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
// ::ng-deep .mat-slide-toggle-bar {
|
||||
// border-radius: 20px!important ;
|
||||
// width: 80px!important;
|
||||
// height: 35px!important;
|
||||
// }
|
||||
|
||||
.form-control{
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
// border: 1px solid #666;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.container-to{
|
||||
margin-right: 9rem;
|
||||
margin-left: 1.5rem;
|
||||
color: #666;
|
||||
}
|
||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||
padding: 0em 0 1em 0;
|
||||
@ -125,7 +134,7 @@
|
||||
display: flex;
|
||||
}
|
||||
.popup-button{
|
||||
margin-top: 3rem;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
.example-h2 {
|
||||
margin: 10px;
|
||||
@ -142,120 +151,199 @@
|
||||
.example-margin {
|
||||
margin: 0 10px!important;
|
||||
margin-left: 25px!important;
|
||||
color: #666;
|
||||
}
|
||||
.mat-radio{
|
||||
margin-left: 6rem;
|
||||
}
|
||||
.time-align{
|
||||
padding-top: 10px!important;
|
||||
padding-top: 10px !important;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
//switch
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: block;
|
||||
// vertical-align: top;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
padding: 3px;
|
||||
margin: 0 10px 10px 0;
|
||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||
border-radius: 18px;
|
||||
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
// background: #eceeef;
|
||||
border-radius: inherit;
|
||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid #4CAE4C;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label:before, .switch-label:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
-webkit-transition: inherit;
|
||||
-moz-transition: inherit;
|
||||
-o-transition: inherit;
|
||||
transition: inherit;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
.switch-label:before {
|
||||
// content: attr(data-off);
|
||||
content: 'enable';
|
||||
right: 11px;
|
||||
color: #111111;
|
||||
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.switch-label:after {
|
||||
// content: attr(data-on);
|
||||
content: 'disable ';
|
||||
left: 11px;
|
||||
color: #111111;
|
||||
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
background: #FFFFFF;
|
||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.switch-input:checked ~ .switch-label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||
border-radius: 100%;
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.switch-handle:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: 74px;
|
||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
// .switch {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// // vertical-align: top;
|
||||
// width: 100px;
|
||||
// height: 30px;
|
||||
// padding: 3px;
|
||||
// margin: 0 10px 10px 0;
|
||||
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||
// // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||
// border-radius: 18px;
|
||||
// // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
// cursor: pointer;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-input {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// opacity: 0;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label {
|
||||
// position: relative;
|
||||
// display: block;
|
||||
// height: inherit;
|
||||
// font-size: 10px;
|
||||
// text-transform: uppercase;
|
||||
// // background: #eceeef;
|
||||
// border-radius: inherit;
|
||||
// // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
// border: 1px solid #4CAE4C;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label:before, .switch-label:after {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// margin-top: -.5em;
|
||||
// line-height: 1;
|
||||
// -webkit-transition: inherit;
|
||||
// -moz-transition: inherit;
|
||||
// -o-transition: inherit;
|
||||
// transition: inherit;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// .switch-label:before {
|
||||
// // content: attr(data-off);
|
||||
// content: 'enable';
|
||||
// right: 11px;
|
||||
// color: #111111;
|
||||
// // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||
// }
|
||||
// .switch-label:after {
|
||||
// // content: attr(data-on);
|
||||
// content: 'disable ';
|
||||
// left: 11px;
|
||||
// color: #111111;
|
||||
// // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label {
|
||||
// background: #FFFFFF;
|
||||
// // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label:before {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-label:after {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// .switch-handle {
|
||||
// position: absolute;
|
||||
// top: 4px;
|
||||
// left: 4px;
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
// // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||
// background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||
// border-radius: 100%;
|
||||
// box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// .switch-handle:before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// margin: -6px 0 0 -6px;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||
// border-radius: 6px;
|
||||
// box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||
// }
|
||||
// .switch-input:checked ~ .switch-handle {
|
||||
// left: 74px;
|
||||
// box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
|
||||
/* Transition
|
||||
========================== */
|
||||
.switch-label, .switch-handle {
|
||||
transition: All 0.3s ease;
|
||||
-webkit-transition: All 0.3s ease;
|
||||
-moz-transition: All 0.3s ease;
|
||||
-o-transition: All 0.3s ease;
|
||||
// /* Transition
|
||||
// ========================== */
|
||||
// .switch-label, .switch-handle {
|
||||
// transition: All 0.3s ease;
|
||||
// -webkit-transition: All 0.3s ease;
|
||||
// -moz-transition: All 0.3s ease;
|
||||
// -o-transition: All 0.3s ease;
|
||||
// }
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
width: 135px;
|
||||
// -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
// border: 2px solid #4CAE4C;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
// transition: margin 0.3s ease-in 0s;
|
||||
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: " Enable";
|
||||
padding-left: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;
|
||||
border: 1px solid #4CAE4C;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "Disable";
|
||||
padding-right: 10px;
|
||||
background-color: #FFFFFF; color: #4C4C4C;;
|
||||
text-align: right;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
display: block;
|
||||
width: 25px;
|
||||
margin: 2px;
|
||||
background: #999999;
|
||||
position: absolute; top: 0; bottom: 0;
|
||||
right: 105px;
|
||||
// border: 1px solid #999999;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
// .onoffswitch-switch:after {
|
||||
// display: block;
|
||||
// background: #999999!important;
|
||||
// }
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
// border: 1px solid #999999;
|
||||
}
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
background: #4CAE4C;
|
||||
// border: 1px solid #999999;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user