Recount-Server/web/sass/nav.scss

132 lines
3.4 KiB
SCSS

header {
background-color: var(--#{$prefix}-nav-bg);
height: 30px;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
border-radius: $border-radius;
}
nav {
display: flex;
flex-direction: column;
a#logo-a {
font-size: 12pt;
pointer-events: none;
color: var(--#{$prefix}-nav-color);
background-color: var(--#{$prefix}-nav-logo-bg);
}
ul {
margin: 0;
padding: 0;
list-style: none;
padding-left: 0;
}
li {
margin-top: 8px;
margin-bottom: 8px;
}
a.active {
pointer-events: none;
background-color: var(--#{$prefix}-nav-active-bg);
color: var(--#{$prefix}-nav-active-color);
}
a {
transition: background-color $hl-trn-spd ease-in, color $hl-trn-spd ease-in;
border-radius: 5px;
text-align: center;
padding: 6px 0px;
display: inline-block;
cursor: pointer;
color: var(--#{$prefix}-nav-color);
width: 100%;
text-decoration: none;
}
a:hover {
background-color: var(--#{$prefix}-nav-hover);
}
}
#transaction-quick-access-panel {
display:flex;
flex-direction: column;
height: 60%;
.t-header {
display: flex;
margin-top: 10px;
margin-bottom: 20px;
input {
margin-top: auto;
margin-bottom: auto;
margin-left: 5px;
margin-right: 8px;
border-radius: 0.25rem;
border: 1px solid var(--#{$prefix}-text);
width: 1.25em;
height: 1.25em;
}
}
.t-list {
display: flex;
height: inherit;
.tab-div {
height: 100%;
width: 50px;
display: flex;
#open-draft {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
background-color: var(--#{$prefix}-base);
color: var(--#{$prefix}-text);
border: 2px solid var(--#{$prefix}-overlay1);
border-right-color: transparent;
margin-top: 40px;
margin-left: auto;
margin-right: -3px;
height: 50px;
width: 50px;
display:flex;
z-index: 1;
cursor: pointer;
svg {
margin: auto;
}
}
}
.t-list-container {
overflow-y: scroll;
border: 2px solid var(--#{$prefix}-surface1);
background-color: var(--#{$prefix}-base);
flex-grow: 1;
border-radius: $border-radius;
.card-item {
border-radius: $border-radius;
background-color: var(--#{$prefix}-surface0);
margin: 10px;
.row {
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
}
#quick-access-panel {
background-color: var(--#{$prefix}-base);
border-radius: $border-radius;
height: 100%;
border: 2px solid var(--#{$prefix}-surface1);
}
#new-transaction-pane {
height: 75vh;
width: 50vw;
position: absolute;
transition: left 0.35s ease-in, top 0.35s ease-in, opacity 0.35s linear;
outline: solid var(--#{$prefix}-surface1);
}