mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-23 02:40:14 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -1,31 +1,30 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '../../styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
order: 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
.right {
|
||||
order: 1;
|
||||
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 {
|
||||
|
|
@ -33,179 +32,38 @@
|
|||
align-items: center;
|
||||
width: auto;
|
||||
|
||||
.navigation {
|
||||
@include nb-ltr(padding-right, nb-theme(padding));
|
||||
@include nb-rtl(padding-left, nb-theme(padding));
|
||||
font-size: 2.5rem;
|
||||
.sidebar-toggle {
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
color: nb-theme(text-hint-color);
|
||||
nb-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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 /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 /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;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-user /deep/ .user-name {
|
||||
.control-item {
|
||||
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) {
|
||||
.user-action {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.right /deep/ {
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue