218 lines
3.8 KiB
CSS
218 lines
3.8 KiB
CSS
/* Copyright 2017-2019 @polkadot/apps authors & contributors
|
|
/* This software may be modified and distributed under the terms
|
|
/* of the Apache-2.0 license. See the LICENSE file for details. */
|
|
|
|
@import '../../../ui-app/src/styles/theme/_colors-polkadot.css';
|
|
@import '../../../ui-app/src/styles/theme/_colors-substrate.css';
|
|
|
|
.apps-Wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
transition: width 0.3s linear;
|
|
|
|
.apps-Menu-bg {
|
|
background: rgba(0,0,0,0.6);
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: opacity 0.2s;
|
|
width: 100%;
|
|
z-index: 299;
|
|
|
|
&.closed {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
&.open {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.apps-SideBar-Wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
transition: width 0.3s linear;
|
|
z-index: 300;
|
|
|
|
&.collapsed {
|
|
width: 4.2rem;
|
|
}
|
|
|
|
&.expanded {
|
|
width: 12rem;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar {
|
|
align-items: center;
|
|
background: #3f3f3f;
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: auto;
|
|
position: relative;
|
|
transition: left 0.3s linear;
|
|
width: 100%;
|
|
|
|
.ui.vertical.menu {
|
|
display: flex;
|
|
height: 100vh;
|
|
margin: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
position: sticky;
|
|
}
|
|
|
|
.apps-SideBar-Scroll {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0px;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar-Item {
|
|
align-self: flex-end;
|
|
flex-grow: 0;
|
|
padding: 0 !important;
|
|
width: inherit;
|
|
|
|
.text {
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar-logo {
|
|
margin: 0.5rem 1.5rem 1.5rem 0.75rem;
|
|
padding-top: 0.75em;
|
|
width: 9rem;
|
|
}
|
|
|
|
.apps--SideBar-collapse {
|
|
background: #3f3f3f;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 1rem 0 .75rem .5rem;
|
|
position: sticky;
|
|
right: 0;
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
.ui.circular.button {
|
|
background: white !important;
|
|
color: #3f3f3f !important;
|
|
box-shadow: 0 0 0 1px #eee inset !important;
|
|
margin: 0;
|
|
transition: transform 0.15s;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar-toggle {
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
transition: all 0.2s;
|
|
width: 6px;
|
|
|
|
&:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.expanded .apps--SideBar {
|
|
text-align: left;
|
|
|
|
.apps-SideBar-Scroll {
|
|
padding-left: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&.collapsed .apps--SideBar {
|
|
text-align: center;
|
|
|
|
.divider {
|
|
display: none;
|
|
}
|
|
|
|
.apps--SideBar-Item {
|
|
margin-left: 5px;
|
|
.icon {
|
|
font-size: 1.28rem;
|
|
}
|
|
.text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar-logo {
|
|
margin: 0.125rem auto 0.625rem auto;
|
|
width: 3rem;
|
|
}
|
|
|
|
a.apps--SideBar-Item-NavLink {
|
|
padding-bottom: 0.92em;
|
|
padding-top: 0.92em;
|
|
|
|
> i {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.apps--SideBar-collapse .ui.basic.secondary.button {
|
|
left: 0.66rem;
|
|
}
|
|
}
|
|
|
|
&.fixed {
|
|
.apps-SideBar-Wrapper {
|
|
position: absolute;
|
|
width: 0px;
|
|
|
|
.apps--SideBar {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.menu-open {
|
|
.apps-SideBar-Wrapper {
|
|
width: 12rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
a.apps--SideBar-Item-NavLink {
|
|
color: #eee;
|
|
display: block;
|
|
padding: 0.75em 0.75em;
|
|
transition: background 0.15s;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: rgba(0,0,0,0.15);
|
|
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
|
}
|
|
}
|
|
|
|
a.apps--SideBar-Item-NavLink-active {
|
|
background: #fafafa !important;
|
|
border-radius: 0.28571429rem 0 0 0.28571429rem;
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|