modals

warning-moda   

Copy
Edit
<!-- components/modals/warning-moda.html --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#my-modal-warning"> Launch demo modal </button> <!-- Modal --> <div class="modal fade warning--modal" id="my-modal-warning" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog center--modal" role="document"> <div class="modal-content"> <div class="modal-body"> <span class="warning--modal__icon"> <i class="icomoon-check-circle"></i> </span> <h3 class="gray-900 text-lg">Delete 4 Products</h3> <p class="gray-500 text-md">Are you sure you want to delete 4 products? This action cannot be undone.</p> </div> <div class="modal-footer"> <button type="button" class="base-btn secondary-gray-btn" data-dismiss="modal">Cancel</button> <button type="button" class="base-btn primary-btn" data-dismiss="modal">Use Same Entries</button> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/modals/_warning-moda.scss */
Cancel

success-modal   

Copy
Edit
<!-- components/modals/success-modal.html --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalsuccess"> Launch demo modal </button> <!-- Modal --> <div class="modal fade success--modal" id="myModalsuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog center--modal" role="document"> <div class="modal-content"> <div class="modal-body"> <span class="success--modal__icon"> <i class="icomoon-check-circle"></i> </span> <h3 class="gray-900 text-lg">Delete 4 Products</h3> <p class="gray-500 text-md">Are you sure you want to delete 4 products? This action cannot be undone.</p> </div> <div class="modal-footer"> <button type="button" class="base-btn primary-btn" data-dismiss="modal">Done</button> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/modals/_success-modal.scss */
Cancel

theme-modal   

Copy
Edit
<!-- components/modals/theme-modal.html --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalTheme"> Launch demo modal </button> <!-- Modal --> <div class="modal fade theme-modal" id="myModalTheme" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog center--modal" role="document"> <div class="modal-content"> <div class="theme-modal--head"> <h4 class="title text-lg weight-m gray-900 mr-2">Update Quantity <span id="ps-title"></span></h4> <button class="base-btn tertiary-gray-btn btn-icon-md close-modal" data-dismiss="modal"> <i class="icomoon-x"></i> </button> </div> <div class="theme-modal--body"> <div class="modal-body"> <p class="text-xl">content......</p> </div> </div> <div class="theme-modal--footer"> <button type="button" class="base-btn secondary-gray-btn" data-dismiss="modal">btn</button> <div class="btns"> <button type="button" class="base-btn secondary-gray-btn" data-dismiss="modal">Cancel</button> <button type="button" class="base-btn primary-btn">Delete</button> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/modals/_theme-modal.scss */ .theme-modal { .modal-content { box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.1), 0px 8px 8px -4px rgba(16, 24, 40, 0.04); border-radius: 12px; } .theme-modal--head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; box-shadow: inset 0 -1px 0 #e4e7ec; } .theme-modal--body { padding: 20px 24px; } .theme-modal--footer { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; } }
Cancel

danger-modal   

Copy
Edit
<!-- components/modals/danger-modal.html --> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade danger--modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog center--modal" role="document"> <div class="modal-content"> <div class="modal-body"> <span class="danger--modal__icon"> <i class="icomoon-alert-circle"></i> </span> <h3 class="gray-900 text-lg">Delete 4 Products</h3> <p class="gray-500 text-md">Are you sure you want to delete 4 products? This action cannot be undone.</p> </div> <div class="modal-footer"> <button type="button" class="base-btn secondary-gray-btn" data-dismiss="modal">Cancel</button> <button type="button" class="base-btn danger-btn">Delete</button> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/modals/_danger-modal.scss */ .danger--modal , .success--modal, .warning--modal{ .modal-dialog{ width: 26%; max-width: 400px; @media (max-width: 991px) { width: 100%; max-width: 100%; padding: 8px; } .modal-content{ box-shadow: 0px 20px 24px -4px #1018281a, 0px 8px 8px -4px #1018280a; border-radius: 12px; .modal-body{ padding: 24px; .danger--modal__icon , .success--modal__icon , .warning--modal__icon{ width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; i{ font-size: 20px; } } .danger--modal__icon { background: #FEE4E2; border: 8px solid #FEF3F2; i{ color: #D92D20; } } .success--modal__icon{ background: #D1FADF; border: 8px solid #ECFDF3; i{ color: #039855; } } .warning--modal__icon{ background: #FEF0C7; border: 8px solid #FFFAEB; i{ color: #DC6803; } } } .modal-footer{ padding: 24px; padding-top: 0; border: none; display: flex; align-items: center; justify-content: space-between; button{ width: 100%; font-size: 16px; &:first-child{ margin-#{$end}: 12px; } } } } } } .center--modal{ min-height: 100%; margin: 0 auto; display: flex; align-items: center; padding: 20px 0; .modal-content { width: 100%; } }
Cancel