mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 13:45:33 +02:00
parent
5f8a83fd47
commit
33b132c463
@ -74,7 +74,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
/* Check that row & column span is valid, and not over the max */
|
/* Check that row & column span is valid, and not over the max */
|
||||||
checkSpanNum(span, classPrefix) {
|
checkSpanNum(span, classPrefix) {
|
||||||
const maxSpan = 5;
|
const maxSpan = 6;
|
||||||
let numSpan = /^\d*$/.test(span) ? parseInt(span, 10) : 1;
|
let numSpan = /^\d*$/.test(span) ? parseInt(span, 10) : 1;
|
||||||
numSpan = (numSpan > maxSpan) ? maxSpan : numSpan;
|
numSpan = (numSpan > maxSpan) ? maxSpan : numSpan;
|
||||||
return `${classPrefix}-${numSpan}`;
|
return `${classPrefix}-${numSpan}`;
|
||||||
@ -142,43 +142,36 @@ export default {
|
|||||||
@import '@/styles/media-queries.scss';
|
@import '@/styles/media-queries.scss';
|
||||||
|
|
||||||
.collapsable {
|
.collapsable {
|
||||||
padding: var(--item-group-padding);
|
|
||||||
margin: 10px;
|
|
||||||
border-radius: var(--curve-factor);
|
|
||||||
background: var(--item-group-outer-background);
|
|
||||||
box-shadow: var(--item-group-shadow);
|
|
||||||
height: fit-content;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
width: stretch;
|
width: stretch;
|
||||||
|
height: fit-content;
|
||||||
|
margin: 10px;
|
||||||
|
padding: var(--item-group-padding);
|
||||||
|
border-radius: var(--curve-factor);
|
||||||
|
box-shadow: var(--item-group-shadow);
|
||||||
|
background: var(--item-group-outer-background);
|
||||||
|
|
||||||
|
/* Options allowing sections to SPAN multiple rows or columns */
|
||||||
grid-row-start: span 1;
|
grid-row-start: span 1;
|
||||||
&.row-2 { grid-row-start: span 2; }
|
&.row-2 { grid-row-start: span 2; }
|
||||||
&.row-3 { grid-row-start: span 3; }
|
&.row-3 { grid-row-start: span 3; }
|
||||||
&.row-4 { grid-row-start: span 4; }
|
&.row-4 { grid-row-start: span 4; }
|
||||||
&.row-5 { grid-row-start: span 5; }
|
&.row-5 { grid-row-start: span 5; }
|
||||||
|
&.row-6 { grid-row-start: span 6; }
|
||||||
grid-column-start: span 1;
|
grid-column-start: span 1;
|
||||||
@include tablet-up {
|
@include tablet-up {
|
||||||
&.col-2 { grid-column-start: span 2; }
|
&.col-2, &.col-3, &.col-4, &.col-5, &.col-6 { grid-column-start: span 2; }
|
||||||
&.col-3 { grid-column-start: span 2; }
|
|
||||||
&.col-4 { grid-column-start: span 2; }
|
|
||||||
&.col-5 { grid-column-start: span 2; }
|
|
||||||
}
|
}
|
||||||
@include laptop-up {
|
@include laptop-up {
|
||||||
&.col-2 { grid-column-start: span 2; }
|
&.col-2 { grid-column-start: span 2; }
|
||||||
&.col-3 { grid-column-start: span 3; }
|
&.col-3, &.col-4, &.col-5, &.col-6 { grid-column-start: span 3; }
|
||||||
&.col-4 { grid-column-start: span 3; }
|
|
||||||
&.col-5 { grid-column-start: span 3; }
|
|
||||||
}
|
}
|
||||||
@include monitor-up {
|
@include monitor-up {
|
||||||
&.col-2 { grid-column-start: span 2; }
|
&.col-2 { grid-column-start: span 2; }
|
||||||
&.col-3 { grid-column-start: span 3; }
|
&.col-3 { grid-column-start: span 3; }
|
||||||
&.col-4 { grid-column-start: span 4; }
|
&.col-4 { grid-column-start: span 4; }
|
||||||
&.col-5 { grid-column-start: span 5; }
|
&.col-5 { grid-column-start: span 5; }
|
||||||
}
|
&.col-6 { grid-column-start: span 6; }
|
||||||
|
|
||||||
.wrap-collabsible {
|
|
||||||
margin-bottom: 1.2rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='checkbox'] {
|
input[type='checkbox'] {
|
||||||
@ -203,13 +196,10 @@ export default {
|
|||||||
display: inline;
|
display: inline;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
&:hover {
|
||||||
|
|
||||||
.lbl-toggle:hover {
|
|
||||||
color: var(--item-group-heading-text-color-hover);
|
color: var(--item-group-heading-text-color-hover);
|
||||||
}
|
}
|
||||||
|
&::before {
|
||||||
.lbl-toggle::before {
|
|
||||||
content: ' ';
|
content: ' ';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-top: 5px solid transparent;
|
border-top: 5px solid transparent;
|
||||||
@ -220,8 +210,9 @@ export default {
|
|||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
transition: transform .2s ease-out;
|
transition: transform .2s ease-out;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.toggle:checked + .lbl-toggle::before {
|
input.toggle:checked + .lbl-toggle::before {
|
||||||
transform: rotate(90deg) translateX(-3px);
|
transform: rotate(90deg) translateX(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -233,11 +224,11 @@ export default {
|
|||||||
border-radius: 0 0 var(--curve-factor) var(--curve-factor);
|
border-radius: 0 0 var(--curve-factor) var(--curve-factor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle:checked + .lbl-toggle + .collapsible-content {
|
input.toggle:checked + .lbl-toggle + .collapsible-content {
|
||||||
max-height: 3000px;
|
max-height: var(--section-max-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle:checked + .lbl-toggle {
|
input.toggle:checked + .lbl-toggle {
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
@ -246,6 +237,7 @@ export default {
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Section edit button, shown when in edit mode */
|
||||||
.edit-mode-item {
|
.edit-mode-item {
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
@ -253,15 +245,18 @@ export default {
|
|||||||
right: 0.5rem;
|
right: 0.5rem;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
}
|
}
|
||||||
// Makes sections fill available space
|
|
||||||
|
/* Makes sections fill available space */
|
||||||
|
@include phone-up {
|
||||||
&.is-open.full-height {
|
&.is-open.full-height {
|
||||||
height: -webkit-fill-available;
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: normal;
|
align-items: normal;
|
||||||
|
flex-direction: column;
|
||||||
.collapsible-content {
|
.collapsible-content {
|
||||||
height: -webkit-fill-available;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,7 @@
|
|||||||
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
|
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
|
||||||
--item-group-shadow: var(--item-shadow);
|
--item-group-shadow: var(--item-shadow);
|
||||||
--context-menu-shadow: var(--item-shadow);
|
--context-menu-shadow: var(--item-shadow);
|
||||||
|
--section-max-height: 3000px;
|
||||||
|
|
||||||
/* Settings and config menu */
|
/* Settings and config menu */
|
||||||
--settings-container-shadow: none;
|
--settings-container-shadow: none;
|
||||||
|
@ -45,6 +45,11 @@ $extra-large: 2800px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin phone-up {
|
||||||
|
@media (min-width: #{$tiny}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
@mixin tablet-up {
|
@mixin tablet-up {
|
||||||
@media (min-width: #{$small}) {
|
@media (min-width: #{$small}) {
|
||||||
@content;
|
@content;
|
||||||
@ -71,3 +76,10 @@ $extra-large: 2800px;
|
|||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin safari {
|
||||||
|
_::-webkit-full-page-media, _:future, :root .safari_only {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user