Style sidebar
This commit is contained in:
Amir
Vendored
+352
@@ -16459,3 +16459,355 @@ readers do not read off random characters that represent icons */
|
||||
text-transform: capitalize;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 15px 10px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
margin-bottom: 40px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
/* display: flex; */
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
SIDEBAR STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
#sidebar {
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
width: 265px;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
background: #1E1E2D;
|
||||
/* color: rgb(41, 39, 39); */
|
||||
color: #808080;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
margin-left: -265px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* border-bottom: 0.2px solid #6d7fcc; */
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.074rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-color: white;
|
||||
align-self: center;
|
||||
/* border-bottom: border 1px solid white; */
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
/* #sidebar ul.components {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #fff;
|
||||
} */
|
||||
|
||||
/* #sidebar ul p {
|
||||
color: rgb(41, 39, 39);
|
||||
padding: 10px;
|
||||
} */
|
||||
|
||||
#sidebar ul li {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
#sidebar ul li.active {
|
||||
background: #2a2a3c;
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#sidebar ul li.active:hover {
|
||||
background: #2a2a3ca1;
|
||||
/* color: white; */
|
||||
}
|
||||
|
||||
#sidebar ul li a {
|
||||
padding: 7px 5px;
|
||||
font-size: 1.05em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover {
|
||||
color: white;
|
||||
/* background: var(--indigo); */
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* #sidebar ul li.active a{
|
||||
color: white;
|
||||
background: #F0F0F0;
|
||||
} */
|
||||
|
||||
#sidebar ul li .active a{
|
||||
color: white;
|
||||
/* background: #2a2a3c; */
|
||||
border-radius: 15px;
|
||||
margin: 2px;
|
||||
background-position: 20px;
|
||||
/* width: 70%; */
|
||||
}
|
||||
|
||||
#sidebar ul li .active a:hover{
|
||||
color: #ffffffd6;
|
||||
background: #2a2a3ca1;
|
||||
}
|
||||
|
||||
/* #sidebar ul li.active>a,
|
||||
a[aria-expanded="true"] {
|
||||
color: #111;
|
||||
background: #F0F0F0;
|
||||
} */
|
||||
|
||||
#sidebar ul li ul li a:before{
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 600;
|
||||
content: "\f111";
|
||||
font-size: 4px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
} */
|
||||
|
||||
#sidebar ul ul a {
|
||||
font-size: 0.9em;
|
||||
padding-left: 30px !important;
|
||||
/* background: #fff; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-menu-title {
|
||||
margin-top: 20px;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
.sidebar-menu-item-expand {
|
||||
align-self: center;
|
||||
font-size: 1.0em;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
/* .sidebar-menu-item-expand::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
content: "\f078";
|
||||
} */
|
||||
|
||||
.sidebar-menu-main-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar-menu-item-main {
|
||||
font-size: 1.0em;
|
||||
/* vertical-align: sub; */
|
||||
margin-right: 9px;
|
||||
margin-left: 7px;
|
||||
align-self: center;
|
||||
color: var(--indigo);
|
||||
}
|
||||
|
||||
/* .sidebar-menu-item-main:hover {
|
||||
color: white;
|
||||
background: white;
|
||||
} */
|
||||
|
||||
/* ul.CTAs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
ul.CTAs a {
|
||||
text-align: center;
|
||||
font-size: 0.9em !important;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
} */
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a.download {
|
||||
background: #fff;
|
||||
color: #7386D5;
|
||||
}
|
||||
|
||||
a.article,
|
||||
a.article:hover {
|
||||
background: #6d7fcc !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
CONTENT STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
#content {
|
||||
width: calc(100% - 265px);
|
||||
padding: 3x;
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#content.active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hovernone:hover {
|
||||
background-color: #3490dc !important;
|
||||
cursor: context-menu !important;
|
||||
}
|
||||
|
||||
.hovernone-success:hover {
|
||||
background-color: #38c172 !important;
|
||||
cursor: context-menu !important;
|
||||
}
|
||||
|
||||
.hovernone-danger:hover {
|
||||
background-color: #e3342f !important;
|
||||
cursor: context-menu !important;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4) url("") no-repeat center center;
|
||||
z-index: 99999;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#loader-image {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 45%;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #E09215;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#sidebar {
|
||||
margin-left: -265px;
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content.active {
|
||||
width: calc(100% - 265px);
|
||||
}
|
||||
|
||||
#sidebarCollapse span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
/* position: absolute; */
|
||||
/* bottom: 0; */
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.sidebar-footer-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
border: 2px solid #2a2a3c;
|
||||
padding: 10px;
|
||||
margin: 46px;
|
||||
border-radius: 10px;
|
||||
color: #484859;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
/* display: flex; */
|
||||
}
|
||||
Reference in New Issue
Block a user