Trong Nhan / Booking Wizard

Download as
Browse Code ยป

Commit 75d6e3a50d7f6252261693ba398385f45e686983

Authored by Vu Bui
1 parent 7212357100
Exists in master

update

Showing 2 changed files with 72 additions and 2 deletions Side-by-side Diff

... ... @@ -39,10 +39,25 @@ function BookingWizard(props) {
39 39 <div className="bw-booking-modal">
40 40 <button className="bw-btn-close" onClick={() => handleCloseModal()}><i className="bw-icon-close"></i></button>
41 41 <div className="bw-booking-modal-body">
42   - {renderStep(step)}
  42 + {step!=='step-login' && <div className="bw-booking-modal-header">
  43 + <div className="bw-row">
  44 + <div className="bw-col-left">
  45 + <i className="bw-icon-health-care"></i>
  46 + <span>Confirm your services</span>
  47 + </div>
  48 + <div className="bw-col-right"></div>
  49 + </div>
  50 + </div> }
  51 + <div className="bw-booking-modal-content">
  52 + <div className="bw-booking-modal-inner">
  53 +
  54 + {renderStep(step)}
  55 + </div>
  56 + </div>
43 57 </div>
44 58 </div>
45   - <div className="bw-booking-step-wrapper">
  59 +
  60 + <div className={`bw-booking-step-wrapper ${step ==='step-login' ?'require-login':''}`}>
46 61 <BookingWizardStep />
47 62 </div>
48 63 </div>}
... ... @@ -10,6 +10,40 @@
10 10 z-index: 90;
11 11 }
12 12 .bw-booking-popup-wraper {
  13 + * {
  14 + scrollbar-width: thin;
  15 + scrollbar-color: #dbdee3 #fff;
  16 + }
  17 +
  18 + /* Works on Chrome, Edge, and Safari */
  19 + *::-webkit-scrollbar {
  20 + width: 12px;
  21 + height: 12px;
  22 + }
  23 +
  24 + *::-webkit-scrollbar-track {
  25 + background: #fff;
  26 + }
  27 +
  28 + *::-webkit-scrollbar-thumb {
  29 + background-color: #dbdee3;
  30 + border-radius: 20px;
  31 + border: 3px solid #fff;
  32 + }
  33 +
  34 + ::-webkit-scrollbar {
  35 + width: 12px;
  36 + }
  37 +
  38 + ::-webkit-scrollbar-track {
  39 + // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  40 + border-radius: 10px;
  41 + }
  42 +
  43 + ::-webkit-scrollbar-thumb {
  44 + border-radius: 10px;
  45 + // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  46 + }
13 47 -webkit-box-sizing: border-box;
14 48 box-sizing: border-box;
15 49 * {
... ... @@ -38,6 +72,23 @@
38 72 height: 100%;
39 73 box-shadow: 2px 4px 45px rgba(26, 41, 106, 0.12);
40 74 border-radius: 30px;
  75 + padding: 25px 0;
  76 + display: flex;
  77 + flex-direction: column;
  78 + }
  79 + .bw-booking-modal-content {
  80 + flex: 1;
  81 + position: relative;
  82 + }
  83 + .bw-booking-modal-inner {
  84 + position: absolute;
  85 + height: 100%;
  86 + top: 0;
  87 + left: 0;
  88 + width: 100%;
  89 + overflow-y: auto;
  90 + overflow-x: hidden;
  91 + padding: 0 48px;
41 92 }
42 93 .bw-btn-close {
43 94 position: absolute;
... ... @@ -65,5 +116,9 @@
65 116 flex: 0 0 100%;
66 117 padding-left: 59px;
67 118 padding-right: 59px;
  119 + &.require-login {
  120 + filter: grayscale(100%);
  121 + pointer-events: none;
  122 + }
68 123 }
69 124 }
70 125 \ No newline at end of file