akastijn
ebe66c87c0
Pages are now grouped per group they appear in on in the header (where possible) Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc
172 lines
3.4 KiB
SCSS
172 lines
3.4 KiB
SCSS
main .container {
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1300px;
|
|
}
|
|
|
|
.columnSection {
|
|
padding: 20px 0 20px 0;
|
|
max-width: 1300px;
|
|
}
|
|
|
|
.historyButtonContainer {
|
|
width: 80%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.historySearchContainer {
|
|
width: 20%;
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.button-outer {
|
|
margin-right: 15px;
|
|
background: var(--history-link-color);
|
|
}
|
|
|
|
.button-outer.active {
|
|
color: var(--navlink-color);
|
|
}
|
|
|
|
#currentButton {
|
|
text-decoration: none;
|
|
color: var(--white);
|
|
background: var(--link-color);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input.historySearch {
|
|
font-family: 'open-sans', sans-serif;
|
|
width: 260px;
|
|
border: 1px solid #DEDEDE;
|
|
padding: 9px 4px 9px 40px;
|
|
background: #DEDEDE url(/public/img/random/search.svg) no-repeat 10px;
|
|
background-size: 18px 18px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.searchButton {
|
|
vertical-align: -15px;
|
|
}
|
|
|
|
.historyTable {
|
|
font-family: 'open-sans', sans-serif;
|
|
margin-bottom: 20px;
|
|
width: 100%;
|
|
text-align: center;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
border-radius: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-results {
|
|
font-family: 'open-sans', sans-serif;
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 0;
|
|
width: 100%;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background-color: #DEDEDE;
|
|
border: 1px solid #ddd;
|
|
border-top: none;
|
|
z-index: 1050;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.changePageButtons {
|
|
margin: 0 auto;
|
|
padding: 10px 0 30px 0;
|
|
}
|
|
|
|
.historyPageButton {
|
|
align-items: center;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: .25rem;
|
|
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
|
|
box-sizing: border-box;
|
|
background-color: var(--history-page-button-background);
|
|
color: var(--font-color);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-family: 'opensans', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
justify-content: center;
|
|
line-height: 1.25;
|
|
margin: 0 5px 0 5px;
|
|
min-height: 3rem;
|
|
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
|
|
position: relative;
|
|
text-decoration: none;
|
|
transition: all 250ms;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
vertical-align: baseline;
|
|
width: auto;
|
|
}
|
|
|
|
.historyPageButton.active:hover,
|
|
.historyPageButton.active:focus {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
|
|
color: var(--font-color-hover);
|
|
}
|
|
|
|
.historyPageButton.active:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.historyPageButton.active:active {
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
|
|
color: var(--font-color-hover);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.historyPageButton.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background-color: var(--color-quaternary);
|
|
color: var(--font-color);
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Prevent hover effects on disabled buttons */
|
|
.historyPageButton.disabled:hover,
|
|
.historyPageButton.disabled:focus {
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: none;
|
|
transform: none;
|
|
color: #999;
|
|
}
|
|
|
|
.pageNumber {
|
|
font-family: 'open-sans', sans-serif;
|
|
margin: 0 25px 0 25px;
|
|
color: var(--font-color);
|
|
transition: 0.5s ease;
|
|
}
|
|
|