Fixed up sidebar and added animation transitions

This commit is contained in:
Fergal Moran
2021-03-01 20:16:39 +00:00
parent 39340da5a0
commit b299042f9d
2 changed files with 27 additions and 10 deletions

View File

@@ -1,14 +1,33 @@
.circle-icon {
background-color: #d1e6a1;
color: #e07969;
padding: 30px;
border-radius: 50%;
transition: 0.3s;
}
.pink-icon {
.circle-icon:hover {
border-radius: 15%;
}
.orange-icon {
background: #ffcfc0;
.list-group-item {
background-color: transparent;
transition: 0.5s;
}
.blue-icon {
.list-group-item:hover {
border-left: blueviolet;
border-left-style: groove;
}
#buttons-pane {
background-color: #202225;
}
#channels-pane {
background-color: #2f3136;
color: white;
}
#main-pane {
background-color: #36393f;
color: white;
}
#friends-pane {
background-color: #2f3136;
color: white;
}

View File

@@ -3,8 +3,7 @@
<div class="container-fluid">
<div class="row h-100">
<div id="buttons-pane"
class="col-1 bg-dark pt-3">
class="col-1 pt-3">
<ul class="list-group">
<li class="list-group-item d-flex justify-content align-items-center">
<i class="fas fa-ambulance circle-icon pink-icon"></i>
@@ -16,7 +15,6 @@
<i class="fas fa-ban circle-icon blue-icon"></i>
</li>
</ul>
</div>
<div id="channels-pane"
class="col-2">