golden hour
/var/www/html/Digital_Design/sass/assets/_structure
⬆️ Go Up
Upload
File/Folder
Size
Actions
_media-query.scss
5.09 KB
Del
OK
_navbar.scss
13.7 KB
Del
OK
_sidebar.scss
8.42 KB
Del
OK
Edit: _navbar.scss
/* ===================== Navigation Bar ===================== */ .header-container { z-index: 1030; border-bottom: 1px solid #0e1726; .navbar { padding: 4px 0; } } .navbar { padding: 0; background: #0e1726; .theme-brand { padding: 0.9px 0 0.9px 27px !important; border-radius: 6px 6px 0 0; justify-content: space-between; li { &.theme-logo { align-self: center; img { width: 34px; height: 34px; border-radius: 5px; } } &.theme-text { margin-right: 47px; a { font-size: 24px !important; color: #e0e6ed !important; line-height: 2.75rem; padding: 0 0.8rem; text-transform: initial; position: unset; font-weight: 700; } } } } &.expand-header { margin: 0; } } .navbar-brand { width: 5.5rem; padding-top: 0.0rem; padding-bottom: 0.0rem; margin-right: 0.0rem; } .navbar-expand-sm .navbar-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; .nav-link { line-height: 2.75rem; padding: 6.24px 9.6px; text-transform: initial; position: unset; } } .header-container .navbar { .dropdown-menu { border-radius: 6px; border-color: #e0e6ed; } .dropdown-item { line-height: 1.8; font-size: 0.96rem; padding: 15px 0 15px 0; word-wrap: normal; border-radius: 6px; } .navbar-item .nav-item { .dropdown-item { &.active, &:active { background-color: transparent; color: #16181b; } } &.dropdown { .nav-link:hover span { color: #e0e6ed !important; } .dropdown-menu { top: 109%; border-radius: 0; border: none; border-radius: 6px; -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07); background: #fff; margin-top: 0; &:after { position: absolute; content: ''; top: -10px; margin-left: -7px; height: 0; width: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid #fff; left: auto; right: 7px; border-bottom-color: #fafafa; } } } } .language-dropdown { margin-left: 20px; a { &.nav-link { position: relative; font-size: 24px; padding: 0; } &.dropdown-toggle { &:after { display: none; } img { width: 20px; height: 20px; margin: 11px 0px; } } } .dropdown-menu { min-width: 7rem; left: 50%; transform: translate(-50%, 0); box-shadow: none; top: 105% !important; z-index: 1070; border: 1px solid #e0e6ed; padding: 6px 6px; border-radius: 4px; &:before { top: -10px; left: 41%; right: auto !important; } &:after { top: -8.5px; left: 49% !important; right: auto !important; } .dropdown-item { &:hover { background: rgba(27, 85, 226, 0.1803921569); } &.active, &:active { background: transparent; color: #16181b; } } a { img { width: 20px; height: 20px; margin-right: 16px; } span { color: #3b3f5c; font-weight: 500; } } } } } /* Language */ /* Language Dropdown */ /*Message Dropdown*/ .navbar .navbar-item .nav-item { &.dropdown { &.message-dropdown { margin-left: 20px; .nav-link { padding: 0 0; &:after { display: none; } svg { color: #e0e6ed; width: 22px; height: 22px; } span.badge { position: absolute; top: 13px; right: 2px; width: 18px; height: 18px; border-radius: 50%; padding: 1px 5px 0px; font-size: 10px; color: #fff !important; background: #1b55e2; border: 1px solid #e0e6ed; top: 10px; right: -8px; } } &.double-digit .nav-link span.badge { top: 11px; right: 1px; width: 22px; height: 22px; padding: 3px 3px 0px; font-size: 9px; } .dropdown-menu { min-width: 15rem; right: -15px; left: auto; padding: 10px !important; .dropdown-item { padding: 13px 21px; &.active, &:active { background-color: transparent; } &:focus, &:hover { background-color: rgba(27, 85, 226, 0.1803921569); } &:first-child { padding-top: 16px; } } &:after { right: 17px; } .dropdown-item:last-child { padding-bottom: 16px; } .media { margin: 0; img { width: 40px; height: 40px; margin-right: 11px; } .media-body { h5.usr-name { font-size: 15px; margin-bottom: 0px; color: #1b55e2; } align-self: center; p.msg-title { font-size: 9px; font-weight: 700; color: #3b3f5c; margin-bottom: 0; } } } } } &.notification-dropdown { margin-left: 16px; .nav-link { padding: 0 0; &:after { display: none; } svg { color: #e0e6ed; width: 22px; height: 22px; } span.badge { position: absolute; top: 9px; right: 3px; width: 8px; height: 8px; border-radius: 50%; padding: 3px 0px 0px; font-size: 10px; color: #fff !important; background: #c2d5ff; display: block; border: 1px solid #3b3f5c; } } .dropdown-menu { min-width: 15rem; right: -5px; left: auto; .dropdown-item { padding: 0.625rem 1rem; &:focus, &:hover { background-color: rgba(27, 85, 226, 0.1803921569); } &:not(:last-child) { border-bottom: 1px solid #ebedf2; } } .media { margin: 0; } svg { width: 20px; height: 20px; font-weight: 600; color: #1b55e2; fill: rgba(0, 23, 55, 0.08); margin-right: 14px; align-self: center; } .media-body .notification-para { white-space: normal; line-height: 16px; color: #3b3f5c; .user-name { font-weight: 600; color: #1b55e2; display: inline-block; } } } } } &.search-animated { position: relative; svg { font-weight: 600; margin: 0 9.6px; cursor: pointer; color: #888ea8; position: absolute; width: 18px; height: 18px; top: 9px; } } form.form-inline input.search-form-control { width: 100%; font-size: 14px; background-color: rgba(81, 83, 101, 0.28); border: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #888ea8; letter-spacing: 1px; padding: 0px 4px 0px 35px; height: 36px; font-weight: 600; &:focus { border: 1px solid #3b3f5c; box-shadow: none; } } .form-inline.search .search-form-control { border: 1px solid rgba(81, 83, 101, 0.28); width: 100%; width: 370px; } form.form-inline input.search-form-control { &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder { color: #888ea8; letter-spacing: 1px; font-size: 13px; } &:focus { &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-placeholder { color: #3b3f5c; } } } } /*Notification Dropdown*/ .search-overlay { display: none; position: fixed; width: 100vw; height: 100vh; background: transparent !important; z-index: 814 !important; opacity: 0; transition: all 0.5s ease-in-out; &.show { display: block; opacity: .1; } } /* User Profile Dropdown*/ .navbar .navbar-item .nav-item { &.user-profile-dropdown .nav-link.user { padding: 0 20px 0 16px; position: relative; } &.dropdown.user-profile-dropdown .nav-link:after { display: none; } &.user-profile-dropdown { .nav-link img { width: 28px; border-radius: 4px; height: 28px; } .dropdown-menu { z-index: 9999; min-width: 13rem; padding: 11px; top: 68px; left: -164px; .dropdown-item { padding: 0; a { display: block; color: #3b3f5c; font-size: 13px; font-weight: 600; padding: 9px 30px; } &:focus, &:hover { background-color: rgba(27, 85, 226, 0.1803921569); } &.active, &:active { background-color: transparent; } &:not(:last-child) { border-bottom: 1px solid #ebedf2; } svg { width: 21px; margin-right: 16px; height: 21px; color: #1b55e2; fill: rgba(0, 23, 55, 0.08); } } } } } /* =============== Sidebar =============== */ .sub-header-container { position: fixed; top: 53px; width: 100%; z-index: 1029; display: flex; .navbar { -webkit-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03); -moz-box-shadow: 0px 0px 15px 1px rgba(138, 132, 206, 0.03); box-shadow: 0px 20px 20px rgba(126, 142, 177, 0.12); background: #fafafa; border-radius: 0; padding: 9px 0; justify-content: flex-start; min-height: 53px; width: 100%; .toggle-sidebar { position: relative; padding: 0 25px 0 31px; margin-left: 0; } .sidebarCollapse { position: relative; padding: 0 25px 0 31px; margin-left: 0; svg { width: 20px; height: 20px; color: #888ea8; vertical-align: text-top; } } } } .page-header { display: flex; padding: 0 0; } .sub-header-container { .breadcrumb-one { display: inline-block; .breadcrumb { padding: 0; vertical-align: sub; background-color: transparent; margin-bottom: 0; } .breadcrumb-item { align-self: center; a { color: #888ea8; vertical-align: sub; svg { width: 18px; height: 18px; vertical-align: sub; fill: #888ea8; } } &.active a { color: #515365; } span { vertical-align: sub; } &.active { color: #3b3f5c; font-weight: 600; } + .breadcrumb-item { padding: 0px; &::before { color: #888ea8; padding: 0 6px 0 6px; vertical-align: bottom; } } } } .more-dropdown .custom-dropdown-icon { padding-right: 20px; a.dropdown-toggle { position: relative; padding: 9px 35px 10px 15px; border: 1px solid #d3d3d3; border-radius: 8px; transform: none; font-size: 13px; line-height: 17px; background-color: #fff; letter-spacing: normal; min-width: 115px; text-align: inherit; color: #1b2e4b; box-shadow: none; max-height: 35px; svg { position: absolute; right: 15px; top: 11px; color: #888ea8; width: 13px; height: 13px; margin: 0; -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; } } &.show a.dropdown-toggle svg { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .dropdown-menu { position: absolute; right: 16px; top: 40px !important; padding: 8px 0; border: none; min-width: 155px; border: 1px solid #d3d3d3; a { padding: 8px 15px; font-size: 13px; font-weight: 500; color: #3b3f5c; &:hover { background-color: #bae7ff; color: #2196f3; } } } } } @media (max-width: 575px) { .page-header { display: block; } }
Save