Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-23 02:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(header): move theme-switcher in separate component

Browse source
This commit is contained in:
tibing 2017-09-20 12:54:26 +03:00
parent a0fbdf3636
commit f13fd1c4cd
7 changed files with 152 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/app/@theme/components/header/header.component.scss
View file

@ -1,5 +1,4 @@
@import '../../styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@ -24,13 +23,6 @@
align-items: center;
}
.switcher-container {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
}
.control-item {
display: block;
}
@ -63,86 +55,6 @@
}
}
.theme-switch {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin: 0;
& > span {
font-size: 1.125rem;
font-weight: nb-theme(font-weight-bold);
transition: opacity 0.3s ease;
&.light {
color: nb-theme(color-fg-text);
padding-right: 10px;
}
&.cosmic {
color: nb-theme(color-fg);
padding-left: 10px;
}
@include nb-for-theme(cosmic) {
&.light {
color: nb-theme(color-fg);
}
&.cosmic {
color: nb-theme(color-white);
}
}
&:active {
opacity: 0.78;
}
}
}
.switch {
position: relative;
display: inline-block;
width: 4rem;
height: 1.75rem;
margin: 0;
input {
display: none;
&:checked + .slider::before {
transform: translateX(2.25rem);
}
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.75rem;
background-color: nb-theme(layout-bg);
}
.slider::before {
position: absolute;
content: '';
height: 1.75rem;
width: 1.75rem;
border-radius: 50%;
background-color: nb-theme(color-success);
transition: 0.2s;
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
@include nb-for-theme(cosmic) {
@include btn-hero-primary-gradient();
}
}
}
.toggle-layout /deep/ a {
display: block;
text-decoration: none;
@ -188,12 +100,6 @@
display: none;
}
.switcher-container {
.light, .cosmic {
display: none;
}
}
nb-action:not(.toggle-layout) {
padding: 0;
}
@ -203,10 +109,6 @@
.right /deep/ {
display: none;
}
.switcher-container {
align-items: flex-end;
}
}
}