/* Template Name: Admin Template Author: Wrappixel File: scss */ @import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700); /*Theme Colors*/ /** * Table Of Content * * 1. Color system * 2. Options * 3. Body * 4. Typography * 5. Breadcrumbs * 6. Cards * 7. Dropdowns * 8. Buttons * 9. Typography * 10. Progress bars * 11. Tables * 12. Forms * 14. Component */ /******************* ribbons page ******************/ .ribbon-wrapper, .ribbon-wrapper-reverse, .ribbon-wrapper-bottom, .ribbon-wrapper-right-bottom { position: relative; padding: 50px 15px 15px 15px; } .ribbon-vwrapper { padding: 15px 15px 15px 50px; position: relative; } .ribbon-overflow { overflow: hidden; } .ribbon-vwrapper-reverse { padding: 15px 50px 15px 15px; } .ribbon-wrapper-bottom { padding: 15px 15px 50px 50px; } .ribbon-wrapper-right-bottom { padding: 15px 50px 50px 15px; } .ribbon-content { margin-bottom: 0px; } .ribbon { padding: 0 20px; height: 30px; line-height: 30px; clear: left; position: absolute; top: 12px; left: -2px; color: #fff; } .ribbon-bookmark:before { position: absolute; top: 0; left: 100%; display: block; width: 0; height: 0; content: ''; border: 15px solid #343a40; border-right: 10px solid transparent; } .ribbon-right { left: auto; right: -2px; } .ribbon-bookmark.ribbon-right:before { right: 100%; left: auto; border-right: 15px solid #343a40; border-left: 10px solid transparent; } .ribbon-vertical-l, .ribbon-vertical-r { clear: none; padding: 0 5px; height: 70px; width: 30px; line-height: 70px; text-align: center; left: 12px; top: -2px; } .ribbon-vertical-r { left: auto; right: 12px; } .ribbon-bookmark.ribbon-vertical-l:before, .ribbon-bookmark.ribbon-vertical-r:before { top: 100%; left: 0; margin-top: -14px; border-right: 15px solid #343a40; border-bottom: 10px solid transparent; } .ribbon-badge { top: 15px; overflow: hidden; left: -90px; width: 100%; text-align: center; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ribbon-badge.ribbon-right { left: auto; right: -90px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ribbon-badge.ribbon-bottom { top: auto; bottom: 15px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ribbon-badge.ribbon-right.ribbon-bottom { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ribbon-corner { top: 0; left: 0; background-color: transparent !important; padding: 6px 0 0 10px; } .ribbon-corner i { position: relative; } .ribbon-corner:before { position: absolute; top: 0; left: 0; width: 0; height: 0; content: ''; border: 30px solid transparent; border-top-color: #fb9678; border-left-color: #fb9678; } .ribbon-corner.ribbon-right:before { right: 0; left: auto; border-right-color: #526069; border-left-color: transparent; } .ribbon-corner.ribbon-right { right: 0; left: auto; padding: 6px 10px 0 0; } .ribbon-corner.ribbon-bottom:before { top: auto; bottom: 0; border-top-color: transparent; border-bottom-color: #526069; } .ribbon-corner.ribbon-bottom { bottom: 0; top: auto; padding: 0 10px 6px 10px; } .ribbon-custom { background: #fb9678; } .ribbon-bookmark.ribbon-right.ribbon-custom:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before { border-right-color: #fb9678; border-bottom-color: transparent; } .ribbon-primary { background: #fb9678; } .ribbon-bookmark.ribbon-primary:before { border-color: #fb9678; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-primary:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before { border-right-color: #fb9678; border-bottom-color: transparent; } .ribbon-primary.ribbon-corner:before { border-top-color: #fb9678; border-left-color: #fb9678; } .ribbon-primary.ribbon-corner.ribbon-right:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-primary.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #fb9678; } .ribbon-success { background: #00c292; } .ribbon-bookmark.ribbon-success:before { border-color: #00c292; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-success:before { border-right-color: #00c292; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-success:before { border-right-color: #00c292; border-bottom-color: transparent; } .ribbon-success.ribbon-corner:before { border-top-color: #00c292; border-left-color: #00c292; } .ribbon-success.ribbon-corner.ribbon-right:before { border-right-color: #00c292; border-left-color: transparent; } .ribbon-success.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #00c292; } .ribbon-info { background: #03a9f3; } .ribbon-bookmark.ribbon-info:before { border-color: #03a9f3; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-info:before { border-right-color: #03a9f3; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-info:before { border-right-color: #03a9f3; border-bottom-color: transparent; } .ribbon-info.ribbon-corner:before { border-top-color: #03a9f3; border-left-color: #03a9f3; } .ribbon-info.ribbon-corner.ribbon-right:before { border-right-color: #03a9f3; border-left-color: transparent; } .ribbon-info.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #03a9f3; } .ribbon-warning { background: #fec107; } .ribbon-bookmark.ribbon-warning:before { border-color: #fec107; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-warning:before { border-right-color: #fec107; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before { border-right-color: #fec107; border-bottom-color: transparent; } .ribbon-warning.ribbon-corner:before { border-top-color: #fec107; border-left-color: #fec107; } .ribbon-warning.ribbon-corner.ribbon-right:before { border-right-color: #fec107; border-left-color: transparent; } .ribbon-warning.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #fec107; } .ribbon-danger { background: #e46a76; } .ribbon-bookmark.ribbon-danger:before { border-color: #e46a76; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-danger:before { border-right-color: #e46a76; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before { border-right-color: #e46a76; border-bottom-color: transparent; } .ribbon-danger.ribbon-corner:before { border-top-color: #e46a76; border-left-color: #e46a76; } .ribbon-danger.ribbon-corner.ribbon-right:before { border-right-color: #e46a76; border-left-color: transparent; } .ribbon-danger.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #e46a76; } .ribbon-default { background: #343a40; } .ribbon-bookmark.ribbon-default:before { border-color: #343a40; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-default:before { border-right-color: #343a40; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-default:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-default:before { border-right-color: #343a40; border-bottom-color: transparent; } .ribbon-default.ribbon-corner:before { border-top-color: #343a40; border-left-color: #343a40; } .ribbon-default.ribbon-corner.ribbon-right:before { border-right-color: #343a40; border-left-color: transparent; } .ribbon-default.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #343a40; }