mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-31 14:48:49 +01:00
nebular update and structure refactoring
This commit is contained in:
Dmitry Nehaychik
parent
78e4d2cfe9
commit
df489ad17e
100 changed files with 736 additions and 3945 deletions
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
//@import '~bootstrap/scss/mixins/breakpoints';
|
||||
//@import '~@nebular/theme/styles/global/breakpoints';
|
||||
//
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -18,14 +18,24 @@
|
|||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.logo-containter {
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: block;
|
||||
nb-action {
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
nb-user {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep nb-search button {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
|
|
@ -34,179 +44,173 @@
|
|||
width: auto;
|
||||
|
||||
.navigation {
|
||||
@include nb-ltr(padding-right, nb-theme(padding));
|
||||
@include nb-rtl(padding-left, nb-theme(padding));
|
||||
font-size: 2.5rem;
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 nb-theme(padding);
|
||||
padding: 0 1.25rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(divider-color));
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
font-weight: nb-theme(font-weight-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
$menu-action-separator-color: #3f4550;
|
||||
|
||||
nb-action {
|
||||
@include nb-ltr(border-left-color, $menu-action-separator-color);
|
||||
@include nb-rtl(border-right-color, $menu-action-separator-color);
|
||||
}
|
||||
|
||||
.header-container .logo {
|
||||
@include nb-ltr(border, none);
|
||||
@include nb-rtl(border, none);
|
||||
}
|
||||
|
||||
.header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
|
||||
color: nb-theme(color-white);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
margin: nb-theme(layout-padding);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-settings ::ng-deep a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
|
||||
i {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
font-size: 2.25rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation-name: pulse-light;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
// hack to be able to set border-radius
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 52.3%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 13%;
|
||||
height: 13%;
|
||||
|
||||
animation: 3s linear infinite pulse;
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
animation-name: pulse-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse) {
|
||||
0% {
|
||||
//box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
20% {
|
||||
//box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
}
|
||||
100% {
|
||||
//box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse-light) {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
nb-action:not(.toggle-settings) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-settings {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-user ::ng-deep .user-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
|
||||
.header-container {
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nb-action:not(.toggle-settings) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.right ::ng-deep {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
//
|
||||
// @include nb-for-theme(corporate) {
|
||||
// $menu-action-separator-color: #3f4550;
|
||||
//
|
||||
// nb-action {
|
||||
// @include nb-ltr(border-left-color, $menu-action-separator-color);
|
||||
// @include nb-rtl(border-right-color, $menu-action-separator-color);
|
||||
// }
|
||||
//
|
||||
// .header-container .logo {
|
||||
// @include nb-ltr(border, none);
|
||||
// @include nb-rtl(border, none);
|
||||
// }
|
||||
//
|
||||
// .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
|
||||
// color: nb-theme(color-white);
|
||||
// background: transparent;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ngx-layout-direction-switcher {
|
||||
// margin: 0 1.5rem;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// margin: nb-theme(layout-padding);
|
||||
// margin-top: 0;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xl) {
|
||||
// ngx-layout-direction-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .toggle-settings ::ng-deep a {
|
||||
// display: block;
|
||||
// text-decoration: none;
|
||||
// line-height: 1;
|
||||
//
|
||||
// i {
|
||||
// color: nb-theme(color-fg-highlight);
|
||||
// font-size: 2.25rem;
|
||||
// border-radius: 50%;
|
||||
// position: relative;
|
||||
// animation-name: pulse-light;
|
||||
//
|
||||
// &::after {
|
||||
// content: ' ';
|
||||
// // hack to be able to set border-radius
|
||||
// background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
|
||||
// border-radius: 50%;
|
||||
// pointer-events: none;
|
||||
//
|
||||
// position: absolute;
|
||||
// top: 52.3%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// width: 13%;
|
||||
// height: 13%;
|
||||
//
|
||||
// animation: 3s linear infinite pulse;
|
||||
//
|
||||
// @include nb-for-theme(default) {
|
||||
// animation-name: pulse-light;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include keyframes(pulse) {
|
||||
// 0% {
|
||||
// //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
|
||||
// }
|
||||
// 20% {
|
||||
// //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
// }
|
||||
// 100% {
|
||||
// //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include keyframes(pulse-light) {
|
||||
// 0% {
|
||||
// box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
|
||||
// }
|
||||
// 20% {
|
||||
// box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
|
||||
// }
|
||||
// 100% {
|
||||
// box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(md) {
|
||||
//
|
||||
// nb-action:not(.toggle-settings) {
|
||||
// border: none;
|
||||
// }
|
||||
//
|
||||
// .control-item {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// .toggle-settings {
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// ngx-layout-direction-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// margin: 0 0.5rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(sm) {
|
||||
//
|
||||
// nb-user ::ng-deep .user-name {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(is) {
|
||||
//
|
||||
// .header-container {
|
||||
// .logo {
|
||||
// font-size: 1.25rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .toggle-settings {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// ngx-theme-switcher {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// nb-action:not(.toggle-settings) {
|
||||
// padding: 0;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// @include media-breakpoint-down(xs) {
|
||||
// .right ::ng-deep {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue