Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-01-31 10:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add triangle icon for expandable menu items

Browse Source
This commit is contained in:
Roman Hotsiy 2017-04-30 14:24:24 +03:00
parent 583c5719db
commit e7130d2d04
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/components/SideMenu/side-menu-items.html
View File

@ -3,6 +3,9 @@
<label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)"> <label class="menu-item-header" [ngClass]="{disabled: !item.ready}" (click)="activateItem(item)">
<span class="operation-type" [ngClass]="item?.metadata?.operation" *ngIf="item?.metadata?.operation"> {{item?.metadata?.operation}} </span><!-- <span class="operation-type" [ngClass]="item?.metadata?.operation" *ngIf="item?.metadata?.operation"> {{item?.metadata?.operation}} </span><!--
--><span class="menu-item-title">{{item.name}}</span> --><span class="menu-item-title">{{item.name}}</span>
<svg *ngIf="item.items?.length" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
</svg>
</label> </label>
<ul *ngIf="item.items" class="menu-subitems" [@itemAnimation]="(item.active || item.isGroup) ? 'expanded' : 'collapsed'"> <ul *ngIf="item.items" class="menu-subitems" [@itemAnimation]="(item.active || item.isGroup) ? 'expanded' : 'collapsed'">
<side-menu-items [items]="item.items" (activate)="activateItem($event)"> </side-menu-items> <side-menu-items [items]="item.items" (activate)="activateItem($event)"> </side-menu-items>

23
lib/components/SideMenu/side-menu-items.scss
View File

@ -20,6 +20,25 @@
cursor: default; cursor: default;
color: lighten($text-color, 60%); color: lighten($text-color, 60%);
} }
display: flex;
justify-content: space-between;
> svg {
height: 18px;
vertical-align: middle;
float: right;
transform: rotateZ(-90deg);
//transition: transform 0.3s ease-out;
polygon {
fill: $border-color;
}
.active > & {
transform: rotateZ(0);
}
}
} }
.menu-item { .menu-item {
@ -98,6 +117,10 @@
font-size: 0.8em; font-size: 0.8em;
padding-bottom: 0; padding-bottom: 0;
cursor: default; cursor: default;
> svg {
display: none;
}
} }
&:hover, &:hover,
&.active { &.active {