right navigation css
parent
6009c41521
commit
258721a698
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="space jumbotron-edit-field" *ngIf="editable">
|
||||
<div class="page-corral jumbotron-edit-field-row">
|
||||
<div class="layout-corral jumbotron-edit-field-row">
|
||||
<div class="switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@ export class PagesMenuItemComponent {
|
|||
'parent': this.parent,
|
||||
'open': this.open,
|
||||
'selected': this.selected,
|
||||
'nav': this.nav
|
||||
'nav': this.nav,
|
||||
'children':this.hasChildren
|
||||
}
|
||||
resp['lvl-'+this.level] = true;
|
||||
return resp
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
$layout-width: 1160px;
|
||||
$layout-width: 1280px;
|
||||
$page-width: 900px;
|
||||
|
||||
$pxl:40px;
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
.space{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.layout-corral{
|
||||
max-width: calc($layout-width + 2 * $pxl);
|
||||
>.layout-corral{
|
||||
flex-basis: calc($layout-width + 2 * $pxl);
|
||||
padding: 0 $pxl;
|
||||
flex-grow: 1;
|
||||
}
|
||||
display: flex;
|
||||
};
|
||||
.page-corral{
|
||||
max-width: calc($page-width + 2 * $pxl);
|
||||
flex-basis: calc($page-width + 2 * $pxl);
|
||||
padding: 0 $pxl;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,14 +29,15 @@ jumbotron{
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.user-bar{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
header-user-bar{
|
||||
align-self: flex-end;
|
||||
margin-top: $pl;
|
||||
align-self: flex-end;
|
||||
}
|
||||
h1{
|
||||
margin-top: calc( 0px - $pl );
|
||||
max-width: $page-width;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +45,6 @@ jumbotron{
|
|||
.jumbotron-edit-field{
|
||||
height: 60px;
|
||||
.jumbotron-edit-field-row{
|
||||
max-width: calc($page-width + 2 * $pxl);
|
||||
div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -58,11 +58,7 @@ jumbotron{
|
|||
|
||||
|
||||
left-content{
|
||||
flex-basis: 180px;
|
||||
flex-shrink: 0;
|
||||
pages-menu:not(.lvl-0,.open){
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
right-content{
|
||||
|
|
|
|||
|
|
@ -126,91 +126,89 @@ slider-menu{
|
|||
}
|
||||
}
|
||||
right-content{
|
||||
drop-down{
|
||||
display: none !important;
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
.item{
|
||||
min-height: 0;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.item.lvl-0{
|
||||
>a{
|
||||
display: none;
|
||||
}
|
||||
&.nav+pages-menu{
|
||||
pages-menu.lvl-2{
|
||||
border-radius: 8px;
|
||||
background: var(#FFF);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
padding: 20px;
|
||||
pages-menu{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
padding: 10px;
|
||||
}
|
||||
.sub-menu>pages-menu{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.level-1{
|
||||
&.item{
|
||||
display: none;
|
||||
a{
|
||||
color: var(--second);
|
||||
}
|
||||
}
|
||||
|
||||
.level-2{
|
||||
&.item{
|
||||
display: none;
|
||||
}
|
||||
&.sub-menu{
|
||||
display: none;
|
||||
&.parent,&.current{
|
||||
display: block;
|
||||
>pages-menu{
|
||||
background-color: var(--white);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
>a {
|
||||
&.lvl-1{display: none;}
|
||||
&.lvl-2{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
/* 133.333% */
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--second);
|
||||
|
||||
&:hover {
|
||||
color: var(--prime-act);
|
||||
&.current>a,&.parent>a{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
&.parent>a,
|
||||
&.current>a {
|
||||
color: var(--prime);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.level-4 {
|
||||
a {
|
||||
font-family: PT Sans;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
||||
color: var(--second);
|
||||
|
||||
&:hover {
|
||||
color: var(--second-act);
|
||||
}
|
||||
&.current:not(.lvl-2){
|
||||
background-color: #EDEDED;
|
||||
}
|
||||
|
||||
&.current,&.parent {
|
||||
background-color: #ededed;
|
||||
border-radius: 8px;
|
||||
a {
|
||||
color: var(--second-act);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:not(.nav)+pages-menu{
|
||||
border-radius: 8px;
|
||||
background: var(#FFF);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
padding: 20px;
|
||||
pages-menu{
|
||||
padding: 0;
|
||||
}
|
||||
.item{
|
||||
a{
|
||||
color: var(--second);
|
||||
}
|
||||
&.lvl-1{
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
letter-spacing: 0.24px;
|
||||
&.current>a,&.parent>a{
|
||||
color: var(--prime);
|
||||
}
|
||||
}
|
||||
&.current:not(.lvl-1){
|
||||
background-color: #EDEDED;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&+pages-menu{
|
||||
&:not(.parent,.current){
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue