right navigation css

master
Boris Voropaev 2023-11-28 12:29:08 +03:00
parent 6009c41521
commit 258721a698
5 changed files with 87 additions and 92 deletions

View File

@ -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>

View File

@ -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

View File

@ -30,7 +30,7 @@
align-items: center;
}
$layout-width: 1160px;
$layout-width: 1280px;
$page-width: 900px;
$pxl:40px;

View File

@ -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{

View File

@ -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;
}
}
}
}