linkding/bookmarks/styles/responsive.scss
Sascha Ißbrücker 9c48085829
Add bookmark details view (#665)
* Experiment with bookmark details

* Add basic tests

* Refactor details into modal

* Implement edit and delete button

* Remove slide down animation

* Add fallback details view

* Add status actions

* Improve dark theme

* Improve return URLs

* Make bookmark details sharable

* Fix E2E tests
2024-03-29 12:37:20 +01:00

116 lines
1.4 KiB
SCSS

.container {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: $size-lg;
}
.show-sm,
.show-md {
display: none !important;
}
.width-25 {
width: 25%;
}
.width-50 {
width: 50%;
}
.width-75 {
width: 75%;
}
.width-100 {
width: 100%;
}
.grid {
--grid-columns: 3;
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
grid-gap: $unit-4;
}
.grid > * {
min-width: 0;
}
.columns-2 {
--grid-columns: 2;
}
.gap-0 {
gap: 0;
}
.col-1 {
grid-column: unquote("span min(1, var(--grid-columns))");
}
.col-2 {
grid-column: unquote("span min(2, var(--grid-columns))");
}
.col-3 {
grid-column: unquote("span min(3, var(--grid-columns))");
}
@media (max-width: $size-md) {
.hide-md {
display: none !important;
}
.show-md {
display: block !important;
}
.width-md-25 {
width: 25%;
}
.width-md-50 {
width: 50%;
}
.width-md-75 {
width: 75%;
}
.width-md-100 {
width: 100%;
}
.columns-md-1 {
--grid-columns: 1;
}
.columns-md-2 {
--grid-columns: 2;
}
}
@media (max-width: $size-sm) {
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
.width-sm-25 {
width: 25%;
}
.width-sm-50 {
width: 50%;
}
.width-sm-75 {
width: 75%;
}
.width-sm-100 {
width: 100%;
}
.columns-sm-1 {
--grid-columns: 1;
}
.columns-sm-2 {
--grid-columns: 2;
}
}