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">
|
<div class="availabilitys">
|
||||||
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
<form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<div class="field mb-1">
|
<div class="field mb-2">
|
||||||
<label class="label-container">Staff</label>
|
<label class="label-container">Staff</label>
|
||||||
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
<input type="text" class="form-control mat-pane" placeholder="Staff" name="staff" ngModel #staffRef="ngModel">
|
||||||
</div>
|
</div>
|
||||||
@ -94,24 +94,33 @@
|
|||||||
</mat-radio-group>
|
</mat-radio-group>
|
||||||
</section>
|
</section>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="field mb-1">
|
|
||||||
|
|
||||||
|
<div class="field mb-2">
|
||||||
<label for="name-field" class="mr2">All-day Availability</label>
|
<label for="name-field" class="mr2">All-day Availability</label>
|
||||||
<!-- <mat-slide-toggle class="toggle" (click)="toggleData()"></mat-slide-toggle> -->
|
<!-- <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" />
|
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||||
<span class="switch-handle"></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>
|
||||||
|
|
||||||
<div class="field mb-1">
|
<div class="field">
|
||||||
<label for="name-field" class="label-container">From</label>
|
<label for="name-field" class="label-container">From</label>
|
||||||
<mat-form-field appearance="outline"class="mate" >
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
<mat-datepicker #picker></mat-datepicker>
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
</mat-form-field>
|
</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">
|
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
@ -123,7 +132,7 @@
|
|||||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
<mat-datepicker #picker></mat-datepicker>
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
</mat-form-field>
|
</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">
|
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,6 +21,7 @@
|
|||||||
.label-container{
|
.label-container{
|
||||||
margin-right: 8rem;
|
margin-right: 8rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
// .outline{
|
// .outline{
|
||||||
// width: 18%;
|
// width: 18%;
|
||||||
@ -28,6 +29,12 @@
|
|||||||
.mate{
|
.mate{
|
||||||
width: 16% !important;
|
width: 16% !important;
|
||||||
}
|
}
|
||||||
|
.mates{
|
||||||
|
width: 16% !important;
|
||||||
|
::ng-deep .mat-form-field-outline {
|
||||||
|
width: 115%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
.date-marge{
|
.date-marge{
|
||||||
margin-left: 4.5rem;
|
margin-left: 4.5rem;
|
||||||
}
|
}
|
||||||
@ -38,10 +45,12 @@
|
|||||||
.mr-8{
|
.mr-8{
|
||||||
margin-right: 7rem;
|
margin-right: 7rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
.mr2{
|
.mr2{
|
||||||
margin-right: 3rem;
|
margin-right: 3rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
.cancel {
|
.cancel {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
@ -100,8 +109,8 @@
|
|||||||
}
|
}
|
||||||
::ng-deep .mat-icon-button {
|
::ng-deep .mat-icon-button {
|
||||||
margin-right: -3rem;
|
margin-right: -3rem;
|
||||||
margin-top: -12px;
|
// margin-top: -12px;
|
||||||
padding-top: 10px;
|
// padding-top: 10px;
|
||||||
}
|
}
|
||||||
::ng-deep .mat-slide-toggle-bar {
|
::ng-deep .mat-slide-toggle-bar {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
@ -116,6 +125,7 @@
|
|||||||
.container-to{
|
.container-to{
|
||||||
margin-right: 9rem;
|
margin-right: 9rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||||
padding: 0em 0 1em 0;
|
padding: 0em 0 1em 0;
|
||||||
@ -146,115 +156,199 @@
|
|||||||
margin-left: 6rem;
|
margin-left: 6rem;
|
||||||
}
|
}
|
||||||
.time-align{
|
.time-align{
|
||||||
padding-top: 10px!important;
|
padding-top: 10px !important;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//switch
|
//switch
|
||||||
|
|
||||||
.switch {
|
// .switch {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
// vertical-align: top;
|
// // vertical-align: top;
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
height: 30px;
|
// height: 30px;
|
||||||
padding: 3px;
|
// padding: 3px;
|
||||||
margin: 0 10px 10px 0;
|
// margin: 0 10px 10px 0;
|
||||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
// // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||||
border-radius: 18px;
|
// border-radius: 18px;
|
||||||
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
// // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-input {
|
// .switch-input {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label {
|
// .switch-label {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
height: inherit;
|
// height: inherit;
|
||||||
font-size: 10px;
|
// font-size: 10px;
|
||||||
text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
// background: #eceeef;
|
// // background: #eceeef;
|
||||||
border-radius: inherit;
|
// 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);
|
// // 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;
|
// border: 1px solid #4CAE4C;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label:before, .switch-label:after {
|
// .switch-label:before, .switch-label:after {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
margin-top: -.5em;
|
// margin-top: -.5em;
|
||||||
line-height: 1;
|
// line-height: 1;
|
||||||
-webkit-transition: inherit;
|
// -webkit-transition: inherit;
|
||||||
-moz-transition: inherit;
|
// -moz-transition: inherit;
|
||||||
-o-transition: inherit;
|
// -o-transition: inherit;
|
||||||
transition: inherit;
|
// transition: inherit;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label:before {
|
// .switch-label:before {
|
||||||
// content: attr(data-off);
|
// // content: attr(data-off);
|
||||||
content: 'enable';
|
// content: 'enable';
|
||||||
right: 11px;
|
// right: 11px;
|
||||||
color: #111111;
|
// color: #111111;
|
||||||
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
// // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||||
}
|
// }
|
||||||
.switch-label:after {
|
// .switch-label:after {
|
||||||
// content: attr(data-on);
|
// // content: attr(data-on);
|
||||||
content: 'disable ';
|
// content: 'disable ';
|
||||||
left: 11px;
|
// left: 11px;
|
||||||
color: #111111;
|
// color: #111111;
|
||||||
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
// // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-label {
|
// .switch-input:checked ~ .switch-label {
|
||||||
background: #FFFFFF;
|
// background: #FFFFFF;
|
||||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
// // 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 {
|
// .switch-input:checked ~ .switch-label:before {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-label:after {
|
// .switch-input:checked ~ .switch-label:after {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
}
|
// }
|
||||||
.switch-handle {
|
// .switch-handle {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 4px;
|
// top: 4px;
|
||||||
left: 4px;
|
// left: 4px;
|
||||||
width: 28px;
|
// width: 28px;
|
||||||
height: 28px;
|
// height: 28px;
|
||||||
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
// // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||||
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
// background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||||
border-radius: 100%;
|
// border-radius: 100%;
|
||||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
// box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
}
|
// }
|
||||||
.switch-handle:before {
|
// .switch-handle:before {
|
||||||
content: "";
|
// content: "";
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
left: 50%;
|
// left: 50%;
|
||||||
margin: -6px 0 0 -6px;
|
// margin: -6px 0 0 -6px;
|
||||||
width: 12px;
|
// width: 12px;
|
||||||
height: 12px;
|
// height: 12px;
|
||||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||||
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
// box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-handle {
|
// .switch-input:checked ~ .switch-handle {
|
||||||
left: 74px;
|
// left: 74px;
|
||||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
// box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Transition
|
// /* Transition
|
||||||
========================== */
|
// ========================== */
|
||||||
.switch-label, .switch-handle {
|
// .switch-label, .switch-handle {
|
||||||
transition: All 0.3s ease;
|
// transition: All 0.3s ease;
|
||||||
-webkit-transition: All 0.3s ease;
|
// -webkit-transition: All 0.3s ease;
|
||||||
-moz-transition: All 0.3s ease;
|
// -moz-transition: All 0.3s ease;
|
||||||
-o-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>
|
||||||
<div class="field mb-1">
|
<div class="field mb-1">
|
||||||
<label for="name-field" class="mr2">All-day Availability</label>
|
<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" />
|
<input class="switch-input" type="checkbox" (click)="toggle()" id="bt" />
|
||||||
<span class="switch-label" data-on="On" data-off="Off"></span>
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
||||||
<span class="switch-handle"></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>
|
||||||
|
|
||||||
<div class="field mb-1">
|
<div class="field">
|
||||||
<label for="name-field" class="label-container">From</label>
|
<label for="name-field" class="label-container">From</label>
|
||||||
<mat-form-field appearance="outline"class="mate" >
|
<mat-form-field appearance="outline"class="mate" >
|
||||||
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
<input matInput [matDatepicker]="picker" name="from" ngModel #pickerRef="ngModel">
|
||||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
<mat-datepicker #picker></mat-datepicker>
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
</mat-form-field>
|
</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">
|
<input class="time-align" type="time" matInput name="from-time" min="09:00" max="18:00" ngModel #timeRef="ngModel">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
@ -52,7 +59,7 @@
|
|||||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
<mat-datepicker #picker></mat-datepicker>
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
</mat-form-field>
|
</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">
|
<input class="time-align" type="time" matInput name="to-time" min="09:00" max="18:00" ngModel #timesRef="ngModel">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,6 +21,7 @@
|
|||||||
.label-container{
|
.label-container{
|
||||||
margin-right: 8rem;
|
margin-right: 8rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
// .outline{
|
// .outline{
|
||||||
// width: 18%;
|
// width: 18%;
|
||||||
@ -28,6 +29,12 @@
|
|||||||
.mate{
|
.mate{
|
||||||
width: 16% !important;
|
width: 16% !important;
|
||||||
}
|
}
|
||||||
|
.mates{
|
||||||
|
width: 16% !important;
|
||||||
|
::ng-deep .mat-form-field-outline {
|
||||||
|
width: 115%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
.date-marge{
|
.date-marge{
|
||||||
margin-left: 4.5rem;
|
margin-left: 4.5rem;
|
||||||
}
|
}
|
||||||
@ -38,10 +45,12 @@
|
|||||||
.mr-8{
|
.mr-8{
|
||||||
margin-right: 7rem;
|
margin-right: 7rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
.mr2{
|
.mr2{
|
||||||
margin-right: 3rem;
|
margin-right: 3rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
.cancel {
|
.cancel {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
@ -100,23 +109,23 @@
|
|||||||
}
|
}
|
||||||
::ng-deep .mat-icon-button {
|
::ng-deep .mat-icon-button {
|
||||||
margin-right: -3rem;
|
margin-right: -3rem;
|
||||||
margin-top: -12px;
|
// margin-top: -12px;
|
||||||
padding-top: 10px;
|
// 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{
|
.form-control{
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
// border: 1px solid #666;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
.container-to{
|
.container-to{
|
||||||
margin-right: 9rem;
|
margin-right: 9rem;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
|
||||||
padding: 0em 0 1em 0;
|
padding: 0em 0 1em 0;
|
||||||
@ -125,7 +134,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.popup-button{
|
.popup-button{
|
||||||
margin-top: 3rem;
|
margin-top: 7rem;
|
||||||
}
|
}
|
||||||
.example-h2 {
|
.example-h2 {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
@ -142,120 +151,199 @@
|
|||||||
.example-margin {
|
.example-margin {
|
||||||
margin: 0 10px!important;
|
margin: 0 10px!important;
|
||||||
margin-left: 25px!important;
|
margin-left: 25px!important;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
.mat-radio{
|
.mat-radio{
|
||||||
margin-left: 6rem;
|
margin-left: 6rem;
|
||||||
}
|
}
|
||||||
.time-align{
|
.time-align{
|
||||||
padding-top: 10px!important;
|
padding-top: 10px !important;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//switch
|
//switch
|
||||||
|
|
||||||
.switch {
|
// .switch {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
// vertical-align: top;
|
// // vertical-align: top;
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
height: 30px;
|
// height: 30px;
|
||||||
padding: 3px;
|
// padding: 3px;
|
||||||
margin: 0 10px 10px 0;
|
// margin: 0 10px 10px 0;
|
||||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
|
||||||
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
// // background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
|
||||||
border-radius: 18px;
|
// border-radius: 18px;
|
||||||
// box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
// // box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-input {
|
// .switch-input {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label {
|
// .switch-label {
|
||||||
position: relative;
|
// position: relative;
|
||||||
display: block;
|
// display: block;
|
||||||
height: inherit;
|
// height: inherit;
|
||||||
font-size: 10px;
|
// font-size: 10px;
|
||||||
text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
// background: #eceeef;
|
// // background: #eceeef;
|
||||||
border-radius: inherit;
|
// 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);
|
// // 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;
|
// border: 1px solid #4CAE4C;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label:before, .switch-label:after {
|
// .switch-label:before, .switch-label:after {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
margin-top: -.5em;
|
// margin-top: -.5em;
|
||||||
line-height: 1;
|
// line-height: 1;
|
||||||
-webkit-transition: inherit;
|
// -webkit-transition: inherit;
|
||||||
-moz-transition: inherit;
|
// -moz-transition: inherit;
|
||||||
-o-transition: inherit;
|
// -o-transition: inherit;
|
||||||
transition: inherit;
|
// transition: inherit;
|
||||||
box-sizing:content-box;
|
// box-sizing:content-box;
|
||||||
}
|
// }
|
||||||
.switch-label:before {
|
// .switch-label:before {
|
||||||
// content: attr(data-off);
|
// // content: attr(data-off);
|
||||||
content: 'enable';
|
// content: 'enable';
|
||||||
right: 11px;
|
// right: 11px;
|
||||||
color: #111111;
|
// color: #111111;
|
||||||
// text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
// // text-shadow: 0 1px rgba(255, 255, 255, 0.5);
|
||||||
}
|
// }
|
||||||
.switch-label:after {
|
// .switch-label:after {
|
||||||
// content: attr(data-on);
|
// // content: attr(data-on);
|
||||||
content: 'disable ';
|
// content: 'disable ';
|
||||||
left: 11px;
|
// left: 11px;
|
||||||
color: #111111;
|
// color: #111111;
|
||||||
// text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
// // text-shadow: 0 1px rgba(0, 0, 0, 0.2);
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-label {
|
// .switch-input:checked ~ .switch-label {
|
||||||
background: #FFFFFF;
|
// background: #FFFFFF;
|
||||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
|
// // 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 {
|
// .switch-input:checked ~ .switch-label:before {
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-label:after {
|
// .switch-input:checked ~ .switch-label:after {
|
||||||
opacity: 1;
|
// opacity: 1;
|
||||||
}
|
// }
|
||||||
.switch-handle {
|
// .switch-handle {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 4px;
|
// top: 4px;
|
||||||
left: 4px;
|
// left: 4px;
|
||||||
width: 28px;
|
// width: 28px;
|
||||||
height: 28px;
|
// height: 28px;
|
||||||
// background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
// // background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
|
||||||
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
// background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
|
||||||
border-radius: 100%;
|
// border-radius: 100%;
|
||||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
// box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
}
|
// }
|
||||||
.switch-handle:before {
|
// .switch-handle:before {
|
||||||
content: "";
|
// content: "";
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
left: 50%;
|
// left: 50%;
|
||||||
margin: -6px 0 0 -6px;
|
// margin: -6px 0 0 -6px;
|
||||||
width: 12px;
|
// width: 12px;
|
||||||
height: 12px;
|
// height: 12px;
|
||||||
// background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
// // background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
|
||||||
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
// background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
|
||||||
border-radius: 6px;
|
// border-radius: 6px;
|
||||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
// box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
|
||||||
}
|
// }
|
||||||
.switch-input:checked ~ .switch-handle {
|
// .switch-input:checked ~ .switch-handle {
|
||||||
left: 74px;
|
// left: 74px;
|
||||||
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
// box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Transition
|
// /* Transition
|
||||||
========================== */
|
// ========================== */
|
||||||
.switch-label, .switch-handle {
|
// .switch-label, .switch-handle {
|
||||||
transition: All 0.3s ease;
|
// transition: All 0.3s ease;
|
||||||
-webkit-transition: All 0.3s ease;
|
// -webkit-transition: All 0.3s ease;
|
||||||
-moz-transition: All 0.3s ease;
|
// -moz-transition: All 0.3s ease;
|
||||||
-o-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