flex migration floating column + hover timeline
This commit is contained in:
parent
909b190b33
commit
46adf207bb
|
@ -10,7 +10,7 @@
|
||||||
<div class="floating-column__inner--left">
|
<div class="floating-column__inner--left">
|
||||||
<div class="floating-column__header">
|
<div class="floating-column__header">
|
||||||
<a class="close-button" href (click)="closePanel()" title="close">
|
<a class="close-button" href (click)="closePanel()" title="close">
|
||||||
<fa-icon [icon]="faTimes"></fa-icon>
|
<fa-icon class="close-button__icon" [icon]="faTimes"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -29,9 +29,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
|
// outline: 1px dotted orange;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: white;
|
color: white;
|
||||||
margin: 10px 16px 0 0;
|
margin: 5px 5px 0 0;
|
||||||
|
|
||||||
|
width: 40px;
|
||||||
|
height: 34px;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
left: 17px;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,9 +1,5 @@
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<div class="overlay__header">
|
<div class="overlay__header">
|
||||||
<a href class="overlay__button overlay-close" title="close" (click)="close()">
|
|
||||||
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href class="overlay__button overlay-previous"
|
<a href class="overlay__button overlay-previous"
|
||||||
[ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
|
[ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
|
||||||
<fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
|
<fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
|
||||||
|
@ -13,13 +9,17 @@
|
||||||
<fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
|
<fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href title="return to top" class="overlay-gototop" (click)="goToTop()">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
|
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
|
||||||
title="next" (click)="next()">
|
title="next" (click)="next()">
|
||||||
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
|
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a href title="return to top" class="overlay-gototop" (click)="goToTop()">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href class="overlay__button overlay-close" title="close" (click)="close()">
|
||||||
|
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngFor="let e of loadedElements" class="overlay__content-wrapper"
|
<div *ngFor="let e of loadedElements" class="overlay__content-wrapper"
|
||||||
|
|
|
@ -12,6 +12,8 @@ $header-content-height: 40px;
|
||||||
height: $header-content-height;
|
height: $header-content-height;
|
||||||
background-color: $column-header-background-color;
|
background-color: $column-header-background-color;
|
||||||
border-bottom: 1px solid #222736;
|
border-bottom: 1px solid #222736;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
&__content-wrapper {
|
&__content-wrapper {
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
@ -44,11 +46,17 @@ $header-content-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button {
|
&__button {
|
||||||
|
// outline: 1px dotted orange;
|
||||||
|
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
|
|
||||||
|
width: $header-content-height;
|
||||||
|
height: $header-content-height;
|
||||||
|
|
||||||
color: #354060;
|
color: #354060;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
margin: 8px 0 0 8px;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #536599;
|
color: #536599;
|
||||||
color: #7a8dc7;
|
color: #7a8dc7;
|
||||||
|
@ -68,19 +76,8 @@ $header-content-height: 40px;
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 7px;
|
left: 17px;
|
||||||
top: -1px
|
top: 7px
|
||||||
}
|
|
||||||
}
|
|
||||||
&-next {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
position: relative;
|
|
||||||
left: 8px;
|
|
||||||
top: -1px
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-refresh {
|
&-refresh {
|
||||||
|
@ -90,29 +87,38 @@ $header-content-height: 40px;
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 5px;
|
left: 13px;
|
||||||
top: 1px
|
top: 9px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-next {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: relative;
|
||||||
|
left: 13px;
|
||||||
|
top: 7px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-gototop {
|
&-gototop {
|
||||||
position: absolute;
|
// outline: 1px dotted orange;
|
||||||
top: 0;
|
|
||||||
left: 110px;
|
flex-grow: 1;
|
||||||
right: 40px;
|
|
||||||
display: block;
|
display: block;
|
||||||
height: $header-content-height;
|
height: $header-content-height;
|
||||||
}
|
}
|
||||||
&-close {
|
&-close {
|
||||||
display: block;
|
display: block;
|
||||||
float: right;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: white;
|
color: white;
|
||||||
margin-right: 8px;
|
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 7px;
|
left: 15px;
|
||||||
top: 1px
|
top: 9px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue