"Admin Panel"
Bootstrap 4.1.1 Snippet by CreativeTim

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.3.1/css/all.min.css" rel="stylesheet"> <body> <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand pt-0 text-primary" href="https://www.creative-tim.com/product/argon-dashboard" target="_blank"> Creative Tim </a> <ul class="nav align-items-center d-md-none"> <li class="nav-item dropdown"> <a class="nav-link nav-link-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="ni ni-bell-55"></i> </a> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="media align-items-center"> <span class="avatar avatar-sm rounded-circle"> <img alt="Image placeholder" src="https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/img/theme/team-1-800x800.jpg"> </span> </div> </a> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right"> <div class=" dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome!</h6> </div> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-single-02"></i> <span>My profile</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-settings-gear-65"></i> <span>Settings</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-calendar-grid-58"></i> <span>Activity</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-support-16"></i> <span>Support</span> </a> <div class="dropdown-divider"></div> <a href="#!" class="dropdown-item"> <i class="ni ni-user-run"></i> <span>Logout</span> </a> </div> </li> </ul> <div class="collapse navbar-collapse" id="sidenav-collapse-main"> <div class="navbar-collapse-header d-md-none"> <div class="row"> <div class="col-6 collapse-brand"> <a href="javascript:void(0)"> Creative Tim </a> </div> <div class="col-6 collapse-close"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav"> <span></span> <span></span> </button> </div> </div> </div> <form class="mt-4 mb-3 d-md-none"> <div class="input-group input-group-rounded input-group-merge"> <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search"> <div class="input-group-prepend"> <div class="input-group-text"> <span class="fa fa-search"></span> </div> </div> </div> </form> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="ni ni-tv-2 text-primary"></i> Dashboard </a> </li> </ul> </div> </div> </nav> <div class="main-content"> <!-- Top navbar --> <nav class="navbar navbar-tp navbar-expand-md navbar-dark bg-primary" id="navbar-main"> <div class="container-fluid"> <!-- Brand --> <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./index.html">Dashboard</a> <!-- Form --> <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto"> <div class="form-group mb-0"> <div class="input-group input-group-alternative"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-search"></i></span> </div> <input class="form-control" placeholder="Search" type="text"> </div> </div> </form> <!-- User --> <ul class="navbar-nav align-items-center d-none d-md-flex"> <li class="nav-item dropdown"> <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="media align-items-center"> <span class="avatar avatar-sm rounded-circle"> <img alt="Image placeholder" src="https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/img/theme/team-4-800x800.jpg"> </span> <div class="media-body ml-2 d-none d-lg-block"> <span class="mb-0 text-sm font-weight-bold">Jessica Jones</span> </div> </div> </a> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right"> <div class=" dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome!</h6> </div> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-single-02"></i> <span>My profile</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-settings-gear-65"></i> <span>Settings</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-calendar-grid-58"></i> <span>Activity</span> </a> <a href="./examples/profile.html" class="dropdown-item"> <i class="ni ni-support-16"></i> <span>Support</span> </a> <div class="dropdown-divider"></div> <a href="#!" class="dropdown-item"> <i class="ni ni-user-run"></i> <span>Logout</span> </a> </div> </li> </ul> </div> </nav> <div class="container-fluid text-center"> <p class="mt-5">Add your content here...</p> </div> <footer class="footer" style="margin-top: 70%;"> <div class="row align-items-center justify-content-xl-between"> <div class="col-xl-6 m-auto text-center"> <div class="copyright"> <p>Made with <a href="https://www.creative-tim.com/product/argon-dashboard" target="_blank">Argon Dashboard</a> by Creative Tim</p> </div> </div> </div> </footer> </div> </body>
:root { --blue: #5e72e4; --indigo: #5603ad; --purple: #8965e0; --pink: #f3a4b5; --red: #f5365c; --orange: #fb6340; --yellow: #ffd600; --green: #2dce89; --teal: #11cdef; --cyan: #2bffc6; --white: #fff; --gray: #8898aa; --gray-dark: #32325d; --light: #ced4da; --lighter: #e9ecef; --primary: #5e72e4; --secondary: #f7fafc; --success: #2dce89; --info: #11cdef; --warning: #fb6340; --danger: #f5365c; --light: #adb5bd; --dark: #212529; --default: #172b4d; --white: #fff; --neutral: #fff; --darker: black; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: Open Sans, sans-serif; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } *, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } @-ms-viewport { width: device-width; } figcaption, footer, main, nav, section { display: block; } body { font-family: Open Sans, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0; text-align: left; color: #525f7f; background-color: #f8f9fe; } [tabindex='-1']:focus { outline: 0 !important; } h4, h6 { margin-top: 0; margin-bottom: .5rem; } p { margin-top: 0; margin-bottom: 1rem; } ul { margin-top: 0; margin-bottom: 1rem; } ul ul { margin-bottom: 0; } dfn { font-style: italic; } strong { font-weight: bolder; } a { text-decoration: none; color: #5e72e4; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { text-decoration: none; color: #233dd2; } a:not([href]):not([tabindex]) { text-decoration: none; color: inherit; } a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { text-decoration: none; color: inherit; } a:not([href]):not([tabindex]):focus { outline: 0; } img { vertical-align: middle; border-style: none; } caption { padding-top: 1rem; padding-bottom: 1rem; caption-side: bottom; text-align: left; color: #8898aa; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; } button, input { overflow: visible; } button { text-transform: none; } button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { padding: 0; border-style: none; } input[type='radio'], input[type='checkbox'] { box-sizing: border-box; padding: 0; } input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month'] { -webkit-appearance: listbox; } legend { font-size: 1.5rem; line-height: inherit; display: block; width: 100%; max-width: 100%; margin-bottom: .5rem; padding: 0; white-space: normal; color: inherit; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; -webkit-appearance: none; } [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } [hidden] { display: none !important; } h4, h6, .h4, .h6 { font-family: inherit; font-weight: 600; line-height: 1.5; margin-bottom: .5rem; color: #32325d; } h4, .h4 { font-size: .9375rem; } h6, .h6 { font-size: .625rem; } .form-control { font-size: 1rem; line-height: 1.5; display: block; width: 100%; height: calc(2.75rem + 2px); padding: .625rem .75rem; transition: all .2s cubic-bezier(.68, -.55, .265, 1.55); color: #8898aa; border: 1px solid #cad1d7; border-radius: .375rem; background-color: #fff; background-clip: padding-box; box-shadow: none; } @media screen and (prefers-reduced-motion: reduce) { .form-control { transition: none; } } .form-control::-ms-expand { border: 0; background-color: transparent; } .form-control:focus { color: #8898aa; border-color: rgba(50, 151, 211, .25); outline: 0; background-color: #fff; box-shadow: none, none; } .form-control:-ms-input-placeholder { opacity: 1; color: #adb5bd; } .form-control::-ms-input-placeholder { opacity: 1; color: #adb5bd; } .form-control::placeholder { opacity: 1; color: #adb5bd; } .form-control:disabled, .form-control[readonly] { opacity: 1; background-color: #e9ecef; } .form-group { margin-bottom: 1.5rem; } .form-inline { display: flex; flex-flow: row wrap; align-items: center; } @media (min-width: 576px) { .form-inline .form-group { display: flex; margin-bottom: 0; flex: 0 0 auto; flex-flow: row wrap; align-items: center; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } .form-inline .input-group { width: auto; } } .collapse:not(.show) { display: none; } .dropdown { position: relative; } .dropdown-menu { font-size: 1rem; position: absolute; z-index: 1000; top: 100%; left: 0; display: none; float: left; min-width: 10rem; margin: .125rem 0 0; padding: .5rem 0; list-style: none; text-align: left; color: #525f7f; border: 0 solid rgba(0, 0, 0, .15); border-radius: .4375rem; background-color: #fff; background-clip: padding-box; box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); } .dropdown-menu.show { opacity: 1 !important; display: block; } .dropdown-menu-right { right: 0; left: auto; } .dropdown-menu[x-placement^='top'], .dropdown-menu[x-placement^='right'], .dropdown-menu[x-placement^='bottom'], .dropdown-menu[x-placement^='left'] { right: auto; bottom: auto; } .dropdown-divider { overflow: hidden; height: 0; margin: .5rem 0; border-top: 1px solid #e9ecef; } .dropdown-item { font-weight: 400; display: block; clear: both; width: 100%; padding: .25rem 1.5rem; text-align: inherit; white-space: nowrap; color: #212529; border: 0; background-color: transparent; } .dropdown-item:hover, .dropdown-item:focus { text-decoration: none; color: #16181b; background-color: #f6f9fc; } .dropdown-item:active { text-decoration: none; color: #fff; background-color: #5e72e4; } .dropdown-item:disabled { color: #8898aa; background-color: transparent; } .dropdown-header { font-size: .875rem; display: block; margin-bottom: 0; padding: .5rem 1.5rem; white-space: nowrap; color: #8898aa; } .input-group { position: relative; display: flex; width: 100%; flex-wrap: wrap; align-items: stretch; } .input-group>.form-control { position: relative; width: 1%; margin-bottom: 0; flex: 1 1 auto; } .input-group>.form-control+.form-control { margin-left: -1px; } .input-group>.form-control:focus { z-index: 3; } .input-group>.form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group>.form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-prepend { display: flex; } .input-group-prepend .input-group-text+.input-group-text { margin-left: -1px; } .input-group-prepend { margin-right: -1px; } .input-group-text { font-size: 1rem; font-weight: 400; line-height: 1.5; display: flex; margin-bottom: 0; padding: .625rem .75rem; text-align: center; white-space: nowrap; color: #adb5bd; border: 1px solid #cad1d7; border-radius: .375rem; background-color: #fff; align-items: center; } .input-group-text input[type='radio'], .input-group-text input[type='checkbox'] { margin-top: 0; } .input-group>.input-group-prepend>.input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group>.input-group-prepend:not(:first-child)>.input-group-text, .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .nav { display: flex; margin-bottom: 0; padding-left: 0; list-style: none; flex-wrap: wrap; } .nav-link { display: block; padding: .25rem .75rem; } .nav-link:hover, .nav-link:focus { text-decoration: none; } .navbar { position: relative; display: flex; padding: 1rem 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar>.container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-brand { font-size: 1.25rem; line-height: inherit; display: inline-block; margin-right: 1rem; padding-top: .0625rem; padding-bottom: .0625rem; white-space: nowrap; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-nav { display: flex; flex-direction: column; margin-bottom: 0; padding-left: 0; list-style: none; } .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar-nav .dropdown-menu { position: static; float: none; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar-toggler { font-size: 1.25rem; line-height: 1; padding: .25rem .75rem; border: 1px solid transparent; border-radius: .375rem; background-color: transparent; } .navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; } .navbar-toggler:not(:disabled):not(.disabled) { cursor: pointer; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; content: ''; vertical-align: middle; background: no-repeat center center; background-size: 100% 100%; } @media (max-width: 767.98px) { .navbar-expand-md>.container-fluid { padding-right: 0; padding-left: 0; } } @media (min-width: 768px) { .navbar-expand-md { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-md .navbar-nav { flex-direction: row; } .navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-md .navbar-nav .nav-link { padding-right: 1rem; padding-left: 1rem; } .navbar-expand-md>.container-fluid { flex-wrap: nowrap; } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-md .navbar-toggler { display: none; } } .navbar-light .navbar-brand { color: rgba(0, 0, 0, .9); } .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(0, 0, 0, .9); } .navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, .5); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: rgba(0, 0, 0, .7); } .navbar-light .navbar-toggler { color: rgba(0, 0, 0, .5); border-color: transparent; } .navbar-light .navbar-toggler-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'rgba(0, 0, 0, 0.5)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E'); } .navbar-dark .navbar-brand { color: rgba(255, 255, 255, .65); } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: rgba(255, 255, 255, .65); } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .95); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, .65); } .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, .95); border-color: transparent; } .navbar-dark .navbar-toggler-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath stroke=\'rgba(255, 255, 255, 0.95)\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' d=\'M4 7h22M4 15h22M4 23h22\'/%3E%3C/svg%3E'); } @keyframes progress-bar-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } .media { display: flex; align-items: flex-start; } .media-body { flex: 1 1; } .bg-primary { background-color: #5e72e4 !important; } a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { background-color: #324cdd !important; } .bg-default { background-color: #172b4d !important; } a.bg-default:hover, a.bg-default:focus, button.bg-default:hover, button.bg-default:focus { background-color: #0b1526 !important; } .bg-white { background-color: #fff !important; } a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus { background-color: #e6e6e6 !important; } .bg-white { background-color: #fff !important; } .rounded-circle { border-radius: 50% !important; } .d-none { display: none !important; } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } } @media (min-width: 992px) { .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } } .align-items-center { align-items: center !important; } @media (min-width: 1200px) { .justify-content-xl-between { justify-content: space-between !important; } } .m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-2 { margin-left: .5rem !important; } .mr-3 { margin-right: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .m-auto { margin: auto !important; } @media (min-width: 992px) { .ml-lg-auto { margin-left: auto !important; } } .text-center { text-align: center !important; } .text-uppercase { text-transform: uppercase !important; } .font-weight-bold { font-weight: 600 !important; } .text-white { color: #fff !important; } .text-primary { color: #5e72e4 !important; } a.text-primary:hover, a.text-primary:focus { color: #324cdd !important; } .text-white { color: #fff !important; } a.text-white:hover, a.text-white:focus { color: #e6e6e6 !important; } @media print { *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } a:not(.btn) { text-decoration: underline; } img { page-break-inside: avoid; } p { orphans: 3; widows: 3; } @ page { size: a3; } body { min-width: 992px !important; } .navbar { display: none; } } figcaption, main { display: block; } main { overflow: hidden; } .bg-white { background-color: #fff !important; } a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus { background-color: #e6e6e6 !important; } @keyframes floating-lg { 0% { transform: translateY(0px); } 50% { transform: translateY(15px); } 100% { transform: translateY(0px); } } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } @keyframes floating-sm { 0% { transform: translateY(0px); } 50% { transform: translateY(5px); } 100% { transform: translateY(0px); } } [class*='shadow'] { transition: all .15s ease; } .text-sm { font-size: .875rem !important; } .text-white { color: #fff !important; } a.text-white:hover, a.text-white:focus { color: #e6e6e6 !important; } .avatar { font-size: 1rem; display: inline-flex; width: 48px; height: 48px; color: #fff; border-radius: 50%; background-color: #adb5bd; align-items: center; justify-content: center; } .avatar img { width: 100%; border-radius: 50%; } .avatar-sm { font-size: .875rem; width: 36px; height: 36px; } [class*='btn-outline-'] { border-width: 1px; } .main-content { position: relative; } @media (min-width: 768px) { .main-content .container-fluid { padding-right: 39px !important; padding-left: 39px !important; } } @media (min-width: 768px) { .navbar-vertical.navbar-expand-md.fixed-left+.main-content { margin-left: 250px; } } .dropdown { display: inline-block; } .dropdown-menu { min-width: 12rem; } .dropdown-menu .dropdown-item { font-size: .875rem; padding: .5rem 1rem; } .dropdown-menu .dropdown-item>i { font-size: 1rem; margin-right: 1rem; vertical-align: -17%; } .dropdown-header { font-size: .625rem; font-weight: 700; padding-right: 1rem; padding-left: 1rem; text-transform: uppercase; color: #f6f9fc; } .dropdown-menu a.media>div:first-child { line-height: 1; } .dropdown-menu a.media p { color: #8898aa; } .dropdown-menu a.media:hover p { color: #172b4d !important; } .footer { padding: 2.5rem 0; background: #f7fafc; } .footer .nav .nav-item .nav-link { color: #8898aa !important; } .footer .nav .nav-item .nav-link:hover { color: #525f7f !important; } .footer .copyright { font-size: .875rem; } .form-control { font-size: .875rem; } .form-control:focus:-ms-input-placeholder { color: #adb5bd; } .form-control:focus::-ms-input-placeholder { color: #adb5bd; } .form-control:focus::placeholder { color: #adb5bd; } .input-group { transition: all .15s ease; border-radius: .375rem; box-shadow: none; } .input-group .form-control { box-shadow: none; } .input-group .form-control:not(:first-child) { padding-left: 0; border-left: 0; } .input-group .form-control:not(:last-child) { padding-right: 0; border-right: 0; } .input-group .form-control:focus { box-shadow: none; } .input-group-text { transition: all .2s cubic-bezier(.68, -.55, .265, 1.55); } .input-group-alternative { transition: box-shadow .15s ease; border: 0; box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); } .input-group-alternative .form-control, .input-group-alternative .input-group-text { border: 0; box-shadow: none; } .input-group { transition: all .15s ease; border-radius: .375rem; box-shadow: none; } .input-group .form-control { box-shadow: none; } .input-group .form-control:not(:first-child) { padding-left: 0; border-left: 0; } .input-group .form-control:not(:last-child) { padding-right: 0; border-right: 0; } .input-group .form-control:focus { box-shadow: none; } .input-group-text { transition: all .2s cubic-bezier(.68, -.55, .265, 1.55); } .input-group-alternative { transition: box-shadow .15s ease; border: 0; box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); } .input-group-alternative .form-control, .input-group-alternative .input-group-text { border: 0; box-shadow: none; } .nav-link { color: #525f7f; } .nav-link:hover { color: #5e72e4; } .nav-link i.ni { position: relative; top: 2px; } .navbar-vertical { box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !important; } .navbar-vertical .navbar { border-width: 0 0 1px 0; border-style: solid; } .navbar-vertical .navbar-light { border-color: #f6f9fc; background-color: transparent; } .navbar-vertical .navbar-brand { margin-right: 0; } .navbar-vertical .navbar-brand>img { max-width: 100%; max-height: 2rem; } @media (min-width: 768px) { .navbar-vertical .navbar-collapse { margin-right: -1rem; margin-left: -1rem; padding-right: 1rem; padding-left: 1rem; } .navbar-vertical .navbar-collapse:before { display: block; margin: 1rem -1rem; content: ''; } } .navbar-vertical .navbar-nav { margin-right: -1rem; margin-left: -1rem; } .navbar-vertical .navbar-nav .nav-link { font-size: .9rem; padding-right: 1rem; padding-left: 1rem; } .navbar-vertical .navbar-nav .nav-link>i { font-size: .9375rem; line-height: 1.5rem; min-width: 2.25rem; } .navbar-vertical .navbar-nav .nav-link .dropdown-menu { border: none; } .navbar-vertical .navbar-nav .nav-link .dropdown-menu .dropdown-menu { margin-left: .75rem; } .navbar-vertical .navbar-nav .nav-link { display: flex; align-items: center; } .navbar-vertical .navbar-nav .nav-link[data-toggle='collapse']:after { font-family: 'Font Awesome 5 Free'; font-weight: 700; font-style: normal; font-variant: normal; display: inline-block; margin-left: auto; content: '\f105'; transition: all .15s ease; color: #8898aa; text-rendering: auto; -webkit-font-smoothing: antialiased; } .navbar-vertical .navbar-nav .nav-link[data-toggle='collapse'][aria-expanded='true']:after { transform: rotate(90deg); } .navbar-vertical .navbar-nav .nav .nav-link { padding-left: 3.25rem; } .navbar-vertical .navbar-nav .nav .nav .nav-link { padding-left: 3.75rem; } @media (min-width: 768px) { .navbar-vertical.navbar-expand-md { position: fixed; top: 0; bottom: 0; display: block; overflow-y: auto; width: 100%; max-width: 250px; padding-right: 1.5rem; padding-left: 1.5rem; } .navbar-vertical.navbar-expand-md>[class*='container'] { flex-direction: column; min-height: 100%; padding-right: 0; padding-left: 0; align-items: stretch; } } @media all and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) { .navbar-vertical.navbar-expand-md>[class*='container'] { height: 100%; min-height: none; } } @media (min-width: 768px) { .navbar-vertical.navbar-expand-md.fixed-left { left: 0; border-width: 0 1px 0 0; } .navbar-vertical.navbar-expand-md .navbar-collapse { display: flex; flex-direction: column; margin-right: -1.5rem; margin-left: -1.5rem; padding-right: 1.5rem; padding-left: 1.5rem; flex: 1 1; align-items: stretch; } .navbar-vertical.navbar-expand-md .navbar-collapse>* { min-width: 100%; } .navbar-vertical.navbar-expand-md .navbar-nav { flex-direction: column; margin-right: -1.5rem; margin-left: -1.5rem; } .navbar-vertical.navbar-expand-md .navbar-nav .nav-link { padding: .65rem 1.5rem; } .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav-link { padding-left: 3.75rem; } .navbar-vertical.navbar-expand-md .navbar-nav .nav .nav .nav-link { padding-left: 4.5rem; } .navbar-vertical.navbar-expand-md .navbar-brand { display: block; padding-top: 1rem; padding-bottom: 1rem; text-align: center; } } .navbar-search .input-group { border: 2px solid; border-radius: 2rem; background-color: transparent; } .navbar-search .input-group .input-group-text { padding-left: 1rem; background-color: transparent; } .navbar-search .form-control { width: 270px; background-color: transparent; } .navbar-search-dark .input-group { border-color: rgba(255, 255, 255, .6); } .navbar-search-dark .input-group-text { color: rgba(255, 255, 255, .6); } .navbar-search-dark .form-control { color: rgba(255, 255, 255, .9); } .navbar-search-dark .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, .6); } .navbar-search-dark .form-control::-ms-input-placeholder { color: rgba(255, 255, 255, .6); } .navbar-search-dark .form-control::placeholder { color: rgba(255, 255, 255, .6); } @media (min-width: 768px) { .navbar .dropdown-menu { margin: 0; pointer-events: none; opacity: 0; } .navbar .dropdown-menu-arrow:before { position: absolute; z-index: -5; bottom: 100%; left: 20px; display: block; width: 12px; height: 12px; content: ''; transform: rotate(-45deg) translateY(12px); border-radius: 2px; background: #fff; box-shadow: none; } .navbar .dropdown-menu-right:before { right: 20px; left: auto; } @ keyframes show-navbar-dropdown { 0% { transition: visibility .25s, opacity .25s, transform .25s; transform: translate(0, 10px) perspective(200px) rotateX(-2deg); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes hide-navbar-dropdown { from { opacity: 1; } to { transform: translate(0, 10px); opacity: 0; } } } .navbar-collapse-header { display: none; } @media (max-width: 767.98px) { .navbar-nav .nav-link { padding: .625rem 0; color: #172b4d !important; } .navbar-nav .dropdown-menu { min-width: auto; box-shadow: none; } .navbar-collapse { position: absolute; z-index: 1050; top: 0; right: 0; left: 0; overflow-y: auto; width: calc(100% - 1.4rem); height: auto !important; margin: .7rem; opacity: 0; } .navbar-collapse .navbar-toggler { position: relative; display: inline-block; width: 20px; height: 20px; padding: 0; cursor: pointer; } .navbar-collapse .navbar-toggler span { position: absolute; display: block; width: 100%; height: 2px; opacity: 1; border-radius: 2px; background: #283448; } .navbar-collapse .navbar-toggler :nth-child(1) { transform: rotate(135deg); } .navbar-collapse .navbar-toggler :nth-child(2) { transform: rotate(-135deg); } .navbar-collapse .navbar-collapse-header { display: block; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, .1); } .navbar-collapse .collapse-brand img { height: 36px; } .navbar-collapse .collapse-close { text-align: right; } } @keyframes show-navbar-collapse { 0% { transform: scale(.95); transform-origin: 100% 0; opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes hide-navbar-collapse { from { transform: scale(1); transform-origin: 100% 0; opacity: 1; } to { transform: scale(.95); opacity: 0; } } p { font-size: 1rem; font-weight: 300; line-height: 1.7; } #navbar .navbar { margin-bottom: 20px; } #navbar .navbar-toggler { pointer-events: none; } @font-face { font-family: 'NucleoIcons'; src: url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.eot"); src: url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.eot") format('embedded-opentype'), url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.woff2") format('woff2'), url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.woff") format('woff'), url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.ttf") format('truetype'), url("https://raw.githack.com/creativetimofficial/argon-dashboard/master/assets/fonts/nucleo/nucleo-icons.svg") format('svg'); font-weight: normal; font-style: normal; } .ni { display: inline-block; font: normal normal normal 14px/1 NucleoIcons; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @-webkit-keyframes nc-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes nc-spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes nc-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .ni-bell-55::before { content: "\ea0e"; } .ni-calendar-grid-58::before { content: "\ea1f"; } .ni-settings-gear-65::before { content: "\ea4c"; } .ni-single-02::before { content: "\ea4e"; } .ni-support-16::before { content: "\ea53"; } .ni-tv-2::before { content: "\ea59"; } .ni-user-run::before { content: "\ea5b"; } #navbar .navbar { margin-bottom: 20px; } #navbar .navbar-toggler { pointer-events: none; }

Related: See More


Questions / Comments: