Skip to content

Commit

Permalink
fix toggle when pinned
Browse files Browse the repository at this point in the history
  • Loading branch information
azouaoui-med committed Jan 19, 2019
1 parent e0cf63c commit 781e97a
Show file tree
Hide file tree
Showing 10 changed files with 603 additions and 615 deletions.
529 changes: 256 additions & 273 deletions src/css/main.css

Large diffs are not rendered by default.

35 changes: 35 additions & 0 deletions src/sass/_animation.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@

@keyframes swing {
0%,30%,50%,70%,100% {
transform: rotate(0deg);
}

10% {
transform: rotate(10deg);
}


40% {
transform: rotate(-10deg);
}

60% {
transform: rotate(5deg);
}

80% {
transform: rotate(-5deg);
}
}

@keyframes sonar {
0% {
transform: scale(.9);
opacity: 1;
}

100% {
transform: scale(2);
opacity: 0;
}
}
31 changes: 14 additions & 17 deletions src/sass/_sidebar-brand.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
.sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
height: 55px;
.sidebar-wrapper {

>a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar-brand {
padding: 1rem 1.2rem;
display: flex;
align-items: center;
height: $sidebar-brand-height;

#close-sidebar {
cursor: pointer;
font-size: 20px;
transition: color .3s ease;
>a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
231 changes: 117 additions & 114 deletions src/sass/_sidebar-footer.scss
Original file line number Diff line number Diff line change
@@ -1,153 +1,156 @@
.sidebar-footer {

position: absolute;
width: 100%;
bottom: 0;
display: flex;

>div {
flex-grow: 1;
text-align: center;
height: 35px;
line-height: 35px;
position: static;
.sidebar-wrapper {

.sidebar-footer {

position: absolute;
width: 100%;
bottom: 0;
display: flex;

>a {
>div {
flex-grow: 1;
}

a .notification {
position: absolute;
top: 0;
}
text-align: center;
height: $sidebar-footer-height;
line-height: $sidebar-footer-height;
position: static;
display: flex;

&.pinned-footer{
display: none;
}
}
>a {
flex-grow: 1;
}

.dropdown-menu {
bottom: 36px;
left: 0 !important;
top: initial !important;
right: 0;
transform: none !important;
border-radius: 0;
font-size: .9rem;
}
a .notification {
position: absolute;
top: 0;
}

.messages {
.dropdown-item {
padding: .25rem 1rem;
&.pinned-footer {
display: none;
}
}

.messages-header {
padding: 0 1rem;
.dropdown-menu {
bottom: 36px;
left: 0 !important;
top: initial !important;
right: 0;
transform: none !important;
border-radius: 0;
font-size: .9rem;
}

.message-content {
display: flex;

.pic {
width: 40px;
height: 40px;
overflow: hidden;
.messages {
.dropdown-item {
padding: .25rem 1rem;
}

img {
object-fit: cover;
height: 100%;
}
.messages-header {
padding: 0 1rem;
}

.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);
.message-content {
display: flex;

.message-title {
font-size: 13px;
}

.message-detail {
font-size: 12px;
white-space: nowrap;
.pic {
width: 40px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;

img {
object-fit: cover;
height: 100%;
}
}

}
}
.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);

}
.message-title {
font-size: 13px;
}

.notifications {
.dropdown-item {
padding: .25rem 1rem;
}
.message-detail {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.notifications-header {
padding: 0 1rem;
}
}
}

.notification-content {
display: flex;
}

.icon {
width: 40px;
height: 40px;
.notifications {
.dropdown-item {
padding: .25rem 1rem;
}

i {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
.notifications-header {
padding: 0 1rem;
}

.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);
.notification-content {
display: flex;

.notification-time {
font-size: .7rem;
color: #828282;
.icon {
width: 40px;
height: 40px;

i {
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
}
}

.notification-detail {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.content {
line-height: 1.6;
padding-left: 5px;
width: calc(100% - 40px);

.notification-time {
font-size: .7rem;
color: #828282;
}

.notification-detail {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}


.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;

&:after {
content: '';
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;

&:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
}
}


}
}
Loading

0 comments on commit 781e97a

Please sign in to comment.