mirror of
https://github.com/sissbruecker/linkding
synced 2024-09-20 14:01:59 +00:00
bca9bf9b11
* Replace flexbox grid with CSS grid * Update new and edit forms * Update settings views * Update auth views * Fix margin in menu * Remove unused Spectre modules * Simplify navbar * Reuse CSS variables * Fix grid gap on small screen sizes * Simplify grid system * Improve section headers * Restructure SASS files * Cleanup base styles * Update test
118 lines
1.6 KiB
SCSS
118 lines
1.6 KiB
SCSS
/* Main layout */
|
|
body {
|
|
margin: 20px 10px;
|
|
|
|
@media (min-width: $size-sm) {
|
|
// Horizontal padding accounts for checkboxes that show up in bulk edit mode
|
|
margin: 20px 32px;
|
|
}
|
|
}
|
|
|
|
header {
|
|
margin-bottom: $unit-10;
|
|
|
|
.logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 0 $unit-3;
|
|
font-size: $font-size-lg;
|
|
}
|
|
}
|
|
|
|
header .toasts {
|
|
margin-bottom: 20px;
|
|
|
|
.toast {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.toast a.btn-clear:visited {
|
|
color: currentColor;
|
|
}
|
|
}
|
|
|
|
/* Shared components */
|
|
|
|
// Content area component
|
|
section.content-area {
|
|
h2 {
|
|
font-size: $font-size-lg;
|
|
}
|
|
|
|
.content-area-header {
|
|
border-bottom: solid 1px $border-color;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-bottom: $unit-2;
|
|
margin-bottom: $unit-4;
|
|
|
|
h2 {
|
|
line-height: 1.8rem;
|
|
margin-right: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Confirm button component
|
|
span.confirmation {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
span.confirmation .btn.btn-link {
|
|
color: $error-color !important;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* Additional utilities */
|
|
|
|
.truncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.text-gray-dark {
|
|
color: $gray-color-dark;
|
|
}
|
|
|
|
.align-baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mb-4 {
|
|
margin-bottom: $unit-4;
|
|
}
|
|
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.btn.btn-wide {
|
|
padding-left: $unit-6;
|
|
padding-right: $unit-6;
|
|
}
|