fix: style issues
This commit is contained in:
kolaente
parent
504e201da2
commit
63319e19ad
|
|
@ -168,14 +168,14 @@ $ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
|
|||
v-bind(computedBackgroundColor)
|
||||
);
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
block-size: 40px;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.expandable-initial-height--expanded {
|
||||
height: 100% !important;
|
||||
block-size: 100% !important;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -234,15 +234,15 @@ const buttonText = computed<string>(() => {
|
|||
box-shadow: $shadow;
|
||||
|
||||
&.is-open {
|
||||
width: 500px;
|
||||
height: 320px;
|
||||
inline-size: 500px;
|
||||
block-size: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-with-range {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -252,21 +252,21 @@ const buttonText = computed<string>(() => {
|
|||
}
|
||||
|
||||
.flatpickr-container {
|
||||
width: 70%;
|
||||
inline-size: 70%;
|
||||
border-inline-start: 1px solid var(--grey-200);
|
||||
padding: 1rem;
|
||||
font-size: .9rem;
|
||||
|
||||
// Flatpickr has no option to use it without an input field so we're hiding it instead
|
||||
:deep(input.form-control.input) {
|
||||
height: 0;
|
||||
block-size: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.field .control :deep(.button) {
|
||||
border: 1px solid var(--input-border-color);
|
||||
height: 2.25rem;
|
||||
block-size: 2.25rem;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--input-hover-border-color);
|
||||
|
|
@ -279,7 +279,7 @@ const buttonText = computed<string>(() => {
|
|||
}
|
||||
|
||||
.selections {
|
||||
width: 30%;
|
||||
inline-size: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block-start: .5rem;
|
||||
|
|
@ -287,7 +287,7 @@ const buttonText = computed<string>(() => {
|
|||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
padding: .5rem 1rem;
|
||||
transition: $transition;
|
||||
|
|
|
|||
|
|
@ -180,15 +180,15 @@ const customRangeActive = computed<boolean>(() => {
|
|||
box-shadow: $shadow;
|
||||
|
||||
&.is-open {
|
||||
width: 500px;
|
||||
height: 320px;
|
||||
inline-size: 500px;
|
||||
block-size: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-with-range {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -198,21 +198,21 @@ const customRangeActive = computed<boolean>(() => {
|
|||
}
|
||||
|
||||
.flatpickr-container {
|
||||
width: 70%;
|
||||
inline-size: 70%;
|
||||
border-inline-start: 1px solid var(--grey-200);
|
||||
padding: 1rem;
|
||||
font-size: .9rem;
|
||||
|
||||
// Flatpickr has no option to use it without an input field so we're hiding it instead
|
||||
:deep(input.form-control.input) {
|
||||
height: 0;
|
||||
block-size: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.field .control :deep(.button) {
|
||||
border: 1px solid var(--input-border-color);
|
||||
height: 2.25rem;
|
||||
block-size: 2.25rem;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--input-hover-border-color);
|
||||
|
|
@ -225,7 +225,7 @@ const customRangeActive = computed<boolean>(() => {
|
|||
}
|
||||
|
||||
.selections {
|
||||
width: 30%;
|
||||
inline-size: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-block-start: .5rem;
|
||||
|
|
@ -233,7 +233,7 @@ const customRangeActive = computed<boolean>(() => {
|
|||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
padding: .5rem 1rem;
|
||||
transition: $transition;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const shouldShowMessage = computed(() => {
|
|||
z-index: 5000;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline: 1rem;
|
||||
max-width: max-content;
|
||||
max-inline-size: max-content;
|
||||
margin-inline: auto;
|
||||
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
|
||||
// this makes the truncated text of the project title work
|
||||
// inside the flexbox parent
|
||||
min-width: 0;
|
||||
min-inline-size: 0;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
padding-inline: var(--navbar-gap-width);
|
||||
|
|
@ -243,7 +243,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
|
||||
.project-title-button {
|
||||
align-self: stretch;
|
||||
min-width: var(--navbar-button-min-width);
|
||||
min-inline-size: var(--navbar-button-min-width);
|
||||
display: flex;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -252,14 +252,14 @@ $user-dropdown-width-mobile: 5rem;
|
|||
}
|
||||
|
||||
.navbar-end {
|
||||
margin-left: 0; // overrides bulma core styles
|
||||
margin-inline-start: 0; // overrides bulma core styles
|
||||
margin-inline-start: auto;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
>* {
|
||||
min-width: var(--navbar-button-min-width);
|
||||
min-inline-size: var(--navbar-button-min-width);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -303,7 +303,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
.avatar {
|
||||
border-radius: 100%;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
block-size: 40px;
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -135,8 +135,8 @@ projectStore.loadAllProjects()
|
|||
inset-block-start: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
z-index: 31;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
inline-size: 3rem;
|
||||
block-size: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -156,7 +156,7 @@ projectStore.loadAllProjects()
|
|||
}
|
||||
|
||||
.app-container {
|
||||
min-height: calc(100vh - 65px);
|
||||
min-block-size: calc(100vh - 65px);
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding-block-start: $navbar-height;
|
||||
|
|
@ -174,7 +174,7 @@ projectStore.loadAllProjects()
|
|||
@media screen and (max-width: $tablet) {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
min-height: calc(100vh - 4rem);
|
||||
min-block-size: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
|
|
@ -189,7 +189,7 @@ projectStore.loadAllProjects()
|
|||
|
||||
// Used to make sure the spinner is always in the middle while loading
|
||||
> .loader-container {
|
||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
min-block-size: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||
}
|
||||
|
||||
// FIXME: This should be somehow defined inside Card.vue
|
||||
|
|
@ -205,8 +205,8 @@ projectStore.loadAllProjects()
|
|||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
block-size: 100vh;
|
||||
inline-size: 100vw;
|
||||
background: hsla(var(--grey-100-hsl), 0.8);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -72,10 +72,10 @@ const isFullWidth = computed(() => {
|
|||
}
|
||||
|
||||
.logo {
|
||||
max-width: 300px;
|
||||
width: 90%;
|
||||
max-inline-size: 300px;
|
||||
inline-size: 90%;
|
||||
margin: 1rem auto 2rem;
|
||||
height: 100px;
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -83,14 +83,14 @@ const isFullWidth = computed(() => {
|
|||
}
|
||||
|
||||
.link-share-view {
|
||||
width: 100%;
|
||||
max-width: $desktop;
|
||||
inline-size: 100%;
|
||||
max-inline-size: $desktop;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.link-share-container.link-share-is-fullwidth {
|
||||
.link-share-view {
|
||||
max-width: 100vw;
|
||||
max-inline-size: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)
|
|||
<style lang="scss" scoped>
|
||||
.logo {
|
||||
color: var(--logo-text-color);
|
||||
max-width: 168px;
|
||||
max-height: 48px;
|
||||
max-inline-size: 168px;
|
||||
max-block-size: 48px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,26 +20,26 @@ const menuActive = computed(() => baseStore.menuActive)
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$lineWidth: 2rem;
|
||||
$size: $lineWidth + 1rem;
|
||||
$line-width: 2rem;
|
||||
$size: $line-width + 1rem;
|
||||
|
||||
.menu-show-button {
|
||||
min-height: $size;
|
||||
width: $size;
|
||||
min-block-size: $size;
|
||||
inline-size: $size;
|
||||
|
||||
position: relative;
|
||||
|
||||
$transformX: translateX(-50%);
|
||||
$transform-x: translateX(-50%);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
width: $lineWidth;
|
||||
block-size: 3px;
|
||||
inline-size: $line-width;
|
||||
inset-inline-start: 50%;
|
||||
transform: $transformX;
|
||||
transform: $transform-x;
|
||||
background-color: var(--grey-400);
|
||||
border-radius: 2px;
|
||||
transition: all $transition;
|
||||
|
|
@ -47,12 +47,12 @@ $size: $lineWidth + 1rem;
|
|||
|
||||
&::before {
|
||||
inset-block-start: 50%;
|
||||
transform: $transformX translateY(-0.4rem)
|
||||
transform: $transform-x translateY(-0.4rem)
|
||||
}
|
||||
|
||||
&::after {
|
||||
inset-block-end: 50%;
|
||||
transform: $transformX translateY(0.4rem)
|
||||
transform: $transform-x translateY(0.4rem)
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -63,11 +63,11 @@ $size: $lineWidth + 1rem;
|
|||
}
|
||||
|
||||
&::before {
|
||||
transform: $transformX translateY(-0.5rem);
|
||||
transform: $transform-x translateY(-0.5rem);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: $transformX translateY(0.5rem)
|
||||
transform: $transform-x translateY(0.5rem)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,18 +160,18 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
|
|||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateX(-100%);
|
||||
width: $navbar-width;
|
||||
inline-size: $navbar-width;
|
||||
overflow-y: auto;
|
||||
|
||||
[dir="rtl"] & {
|
||||
inset-inline-start: auto;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
inset-block-start: 0;
|
||||
width: 70vw;
|
||||
inline-size: 70vw;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ const childProjects = computed(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.list-setting-spacer {
|
||||
width: 5rem;
|
||||
inline-size: 5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -171,8 +171,8 @@ const childProjects = computed(() => {
|
|||
|
||||
.color-bubble-wrapper {
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
inline-size: 1rem;
|
||||
block-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -182,15 +182,15 @@ const childProjects = computed(() => {
|
|||
.color-bubble, .icon {
|
||||
transition: all $transition;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
inline-size: 12px;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-handle-standalone {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
inline-size: 1rem;
|
||||
block-size: 1rem;
|
||||
opacity: 0;
|
||||
cursor: grab;
|
||||
transition: opacity $transition;
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ function refreshApp() {
|
|||
z-index: 5000;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline: 1rem;
|
||||
max-width: max-content;
|
||||
max-inline-size: max-content;
|
||||
margin-inline: auto;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -76,7 +76,7 @@ function refreshApp() {
|
|||
}
|
||||
|
||||
.update-notification__message {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -192,20 +192,18 @@ function onUpdateField(e) {
|
|||
border: 1px solid var(--primary);
|
||||
border-block-start: none;
|
||||
|
||||
max-height: 50vh;
|
||||
max-block-size: 50vh;
|
||||
overflow-x: auto;
|
||||
z-index: 100;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
margin-block-start: -2px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
color: var(--grey-800);
|
||||
text-align: start;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -80,15 +80,13 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
|
|||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
min-height: $button-height;
|
||||
block-size: auto;
|
||||
min-block-size: $button-height;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: inline-flex;
|
||||
white-space: var(--button-white-space);
|
||||
line-height: 1;
|
||||
display: inline-flex;
|
||||
padding-left: 0; // override bulma style
|
||||
padding-right: 0; // override bulma style
|
||||
padding-inline: 0; // override bulma style // override bulma style
|
||||
padding-inline: .5rem;
|
||||
gap: .25rem;
|
||||
|
||||
|
|
@ -102,7 +100,7 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
|
|||
|
||||
&.fullheight {
|
||||
padding-inline-end: 7px;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
|
|
|
|||
|
|
@ -147,15 +147,15 @@ function reset() {
|
|||
border: none;
|
||||
}
|
||||
|
||||
$PICKER_SIZE: 24px;
|
||||
$BORDER_WIDTH: 1px;
|
||||
$picker-size: 24px;
|
||||
$border-width: 1px;
|
||||
.picker {
|
||||
display: grid;
|
||||
width: $PICKER_SIZE;
|
||||
height: $PICKER_SIZE;
|
||||
inline-size: $picker-size;
|
||||
block-size: $picker-size;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
border: $BORDER_WIDTH solid var(--grey-300);
|
||||
border: $border-width solid var(--grey-300);
|
||||
box-shadow: $shadow;
|
||||
|
||||
& > * {
|
||||
|
|
@ -166,8 +166,8 @@ function reset() {
|
|||
|
||||
input.picker__input {
|
||||
padding: 0;
|
||||
width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
|
||||
height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
|
||||
inline-size: $picker-size - 2 * $border-width;
|
||||
block-size: $picker-size - 2 * $border-width;
|
||||
}
|
||||
|
||||
.picker__input.is-empty {
|
||||
|
|
|
|||
|
|
@ -128,19 +128,19 @@ function close() {
|
|||
.datepicker-popup {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
inline-size: 320px;
|
||||
background: var(--white);
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@media screen and (max-width: ($tablet)) {
|
||||
width: calc(100vw - 5rem);
|
||||
inline-size: calc(100vw - 5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker__close-button {
|
||||
margin: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
inline-size: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
:deep(.flatpickr-calendar) {
|
||||
|
|
|
|||
|
|
@ -222,8 +222,8 @@ function getWeekdayFromStringInterval(dateString: string) {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
inline-size: 100%;
|
||||
block-size: 2.25rem;
|
||||
color: var(--text);
|
||||
transition: all $transition;
|
||||
|
||||
|
|
@ -236,7 +236,7 @@ function getWeekdayFromStringInterval(dateString: string) {
|
|||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
font-size: .85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -249,7 +249,7 @@ function getWeekdayFromStringInterval(dateString: string) {
|
|||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
inline-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -435,7 +435,7 @@ function focus() {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.multiselect {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
position: relative;
|
||||
|
||||
.control.is-loading::after {
|
||||
|
|
@ -460,7 +460,7 @@ function focus() {
|
|||
background: var(--white);
|
||||
border-color: var(--grey-200);
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--grey-300) !important;
|
||||
|
|
@ -468,12 +468,12 @@ function focus() {
|
|||
|
||||
.input {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-inline-size: 100%;
|
||||
inline-size: 100%;
|
||||
align-items: center;
|
||||
border: none !important;
|
||||
background: transparent;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
|
||||
&::placeholder {
|
||||
font-style: normal !important;
|
||||
|
|
@ -481,7 +481,7 @@ function focus() {
|
|||
}
|
||||
|
||||
&.has-multiple .input {
|
||||
max-width: 250px;
|
||||
max-inline-size: 250px;
|
||||
|
||||
input {
|
||||
padding-inline-start: 0;
|
||||
|
|
@ -515,12 +515,12 @@ function focus() {
|
|||
border: 1px solid var(--primary);
|
||||
border-block-start: none;
|
||||
|
||||
max-height: 50vh;
|
||||
max-block-size: 50vh;
|
||||
overflow-x: auto;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.search-results-inline {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
|
|||
border-radius: $radius;
|
||||
display: block;
|
||||
margin: .1rem 0;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
background: transparent;
|
||||
border-radius: $radius;
|
||||
|
|
@ -125,8 +125,8 @@ export default {
|
|||
|
||||
> svg {
|
||||
box-sizing: border-box;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
border: 1px solid var(--grey-300);
|
||||
padding: .5rem;
|
||||
margin-inline-end: .5rem;
|
||||
|
|
|
|||
|
|
@ -404,8 +404,8 @@ function setLink(event) {
|
|||
}
|
||||
|
||||
.editor-toolbar__button {
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
min-inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
border-radius: $radius;
|
||||
border: 1px solid transparent;
|
||||
color: var(--grey-700);
|
||||
|
|
@ -440,7 +440,7 @@ function setLink(event) {
|
|||
padding: 0 .25rem;
|
||||
border: 1px solid var(--grey-400);
|
||||
font-size: .75rem;
|
||||
height: 1.5rem;
|
||||
block-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -747,7 +747,7 @@ watch(
|
|||
border-radius: $radius;
|
||||
|
||||
&.tiptap__editor-is-edit-enabled {
|
||||
min-height: 10rem;
|
||||
min-block-size: 10rem;
|
||||
|
||||
.ProseMirror {
|
||||
padding: .5rem;
|
||||
|
|
@ -767,8 +767,8 @@ watch(
|
|||
content: attr(data-placeholder);
|
||||
color: var(--grey-400);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
float: left;
|
||||
block-size: 0;
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
// Basic editor styles
|
||||
|
|
@ -806,7 +806,7 @@ watch(
|
|||
pre {
|
||||
background: var(--grey-200);
|
||||
color: var(--grey-700);
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
font-family: JetBrainsMono, monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: $radius;
|
||||
|
||||
|
|
@ -829,7 +829,6 @@ watch(
|
|||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: var(--code-variable);
|
||||
|
|
@ -871,8 +870,8 @@ watch(
|
|||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-inline-size: 100%;
|
||||
block-size: auto;
|
||||
|
||||
&.ProseMirror-selectednode {
|
||||
outline: 3px solid var(--primary);
|
||||
|
|
@ -889,21 +888,18 @@ watch(
|
|||
border-block-start: 2px solid rgba(#0d0d0d, 0.1);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
/* Table-specific styling */
|
||||
|
||||
|
||||
// Table-specific styling
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: 1em;
|
||||
min-inline-size: 1em;
|
||||
border: 2px solid var(--grey-300) !important;
|
||||
padding: 3px 5px;
|
||||
vertical-align: top;
|
||||
|
|
@ -938,8 +934,8 @@ watch(
|
|||
inset-inline-end: -2px;
|
||||
inset-block-start: 0;
|
||||
inset-block-end: -2px;
|
||||
width: 4px;
|
||||
background-color: #adf;
|
||||
inline-size: 4px;
|
||||
background-color: #aaddff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -1022,8 +1018,8 @@ ul[data-type='taskList'] {
|
|||
svg {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ defineProps< {
|
|||
.color-bubble {
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
block-size: 10px;
|
||||
inline-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ $flash-background-duration: 750ms;
|
|||
|
||||
.width-enter-from,
|
||||
.width-leave-to {
|
||||
width: 0;
|
||||
inline-size: 0;
|
||||
}
|
||||
|
||||
.modal-enter,
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ onClickOutside(dropdown, (e) => {
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 12rem;
|
||||
min-inline-size: 12rem;
|
||||
padding-block-start: 4px;
|
||||
position: absolute;
|
||||
inset-block-start: 100%;
|
||||
|
|
@ -114,7 +114,7 @@ onClickOutside(dropdown, (e) => {
|
|||
background-color: var(--border-light);
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
block-size: 1px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ defineProps<DropDownItemProps>()
|
|||
position: relative;
|
||||
text-align: inherit;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left !important;
|
||||
|
|
|
|||
|
|
@ -15,24 +15,24 @@ withDefaults(defineProps<{
|
|||
|
||||
<style scoped lang="scss">
|
||||
.loader-container {
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
min-width: 600px;
|
||||
max-width: 100vw;
|
||||
block-size: 100%;
|
||||
min-block-size: 200px;
|
||||
inline-size: 100%;
|
||||
min-inline-size: 600px;
|
||||
max-inline-size: 100vw;
|
||||
|
||||
&.is-loading-small {
|
||||
min-height: 50px;
|
||||
min-width: 100px;
|
||||
min-block-size: 50px;
|
||||
min-inline-size: 100px;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
min-width: 100%;
|
||||
height: 150px;
|
||||
min-inline-size: 100%;
|
||||
block-size: 150px;
|
||||
|
||||
&.is-loading::after {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
inline-size: 3rem;
|
||||
block-size: 3rem;
|
||||
inset-block-start: calc(50% - 1.5rem);
|
||||
inset-inline-start: calc(50% - 1.5rem);
|
||||
border-width: 3px;
|
||||
|
|
|
|||
|
|
@ -132,19 +132,19 @@ $modal-width: 1024px;
|
|||
z-index: 4000;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
transition: opacity 150ms ease;
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
transition: all 150ms ease;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
max-block-size: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -153,8 +153,8 @@ $modal-width: 1024px;
|
|||
text-align: center;
|
||||
position: absolute;
|
||||
// fine to use top/left since we're only using this to position it centered
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
|
|
@ -176,20 +176,20 @@ $modal-width: 1024px;
|
|||
// scrolling-content
|
||||
// used e.g. for <TaskDetailViewModal>
|
||||
.scrolling .modal-content {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
margin: $modal-margin auto;
|
||||
|
||||
max-height: none; // reset bulma
|
||||
max-block-size: none; // reset bulma
|
||||
overflow: visible; // reset bulma
|
||||
|
||||
@media not print {
|
||||
max-width: $modal-width;
|
||||
max-inline-size: $modal-width;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
max-height: none; // reset bulma
|
||||
max-block-size: none; // reset bulma
|
||||
margin: $modal-margin auto; // reset bulma
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop), print {
|
||||
|
|
@ -198,8 +198,8 @@ $modal-width: 1024px;
|
|||
}
|
||||
|
||||
.is-wide {
|
||||
max-width: $desktop;
|
||||
width: calc(100% - 2rem);
|
||||
max-inline-size: $desktop;
|
||||
inline-size: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.hint-modal {
|
||||
|
|
@ -222,7 +222,7 @@ $modal-width: 1024px;
|
|||
color: var(--white);
|
||||
font-size: 2rem;
|
||||
|
||||
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
|
||||
@media screen and (min-width: $desktop) and (width <= calc(#{$desktop } + #{$close-button-min-space})) {
|
||||
inset-block-start: calc(5px + $modal-margin);
|
||||
inset-inline-end: 50%;
|
||||
// we align the close button to the modal until there is enough space outside for it
|
||||
|
|
@ -240,13 +240,13 @@ $modal-width: 1024px;
|
|||
}
|
||||
|
||||
.modal-container {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
block-size: auto;
|
||||
min-block-size: 100vh;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: static;
|
||||
max-height: none;
|
||||
max-block-size: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
|
|
@ -256,7 +256,7 @@ $modal-width: 1024px;
|
|||
:deep(.card) {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
min-height: 100vh;
|
||||
min-block-size: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -269,7 +269,7 @@ $modal-width: 1024px;
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 1rem;
|
||||
min-height: 100vh
|
||||
min-block-size: 100vh
|
||||
}
|
||||
|
||||
.modal-content :deep(.card .card-header-icon.close) {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ useTitle(() => title.value)
|
|||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
|
||||
min-height: 100vh;
|
||||
min-block-size: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
|
|
@ -82,9 +82,9 @@ useTitle(() => title.value)
|
|||
}
|
||||
|
||||
.noauth-container {
|
||||
max-width: $desktop;
|
||||
width: 100%;
|
||||
min-height: 60vh;
|
||||
max-inline-size: $desktop;
|
||||
inline-size: 100%;
|
||||
min-block-size: 60vh;
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
|
@ -96,7 +96,7 @@ useTitle(() => title.value)
|
|||
}
|
||||
|
||||
.image {
|
||||
width: 50%;
|
||||
inline-size: 50%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -137,18 +137,18 @@ useTitle(() => title.value)
|
|||
padding: 2rem 2rem 1.5rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 450px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $desktop) {
|
||||
width: 50%;
|
||||
inline-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ onClickOutside(popup, () => close())
|
|||
.popup {
|
||||
transition: opacity $transition;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
block-size: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
inset-block-start: 1rem;
|
||||
|
|
@ -88,7 +88,7 @@ onClickOutside(popup, () => close())
|
|||
|
||||
&.is-open {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ withDefaults(defineProps<{
|
|||
appearance: none;
|
||||
border: none;
|
||||
border-radius: var(--progress-border-radius);
|
||||
height: var(--progress-height);
|
||||
block-size: var(--progress-height);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
min-width: 6vw;
|
||||
min-inline-size: 6vw;
|
||||
|
||||
width: 50px;
|
||||
inline-size: 50px;
|
||||
margin: 0 .5rem 0 0;
|
||||
flex: 3 1 auto;
|
||||
|
||||
|
|
@ -49,9 +49,9 @@ withDefaults(defineProps<{
|
|||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0.5rem 0 0 0;
|
||||
margin: 0.5rem 0 0;
|
||||
order: 1;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
|
|
@ -73,6 +73,7 @@ withDefaults(defineProps<{
|
|||
|
||||
// Colors
|
||||
@each $name, $pair in $colors {
|
||||
// stylelint-disable-next-line function-no-unknown
|
||||
$color: nth($pair, 1);
|
||||
&.is-#{$name} {
|
||||
--progress-value-background-color: var(--#{$name}, #{$color});
|
||||
|
|
@ -90,7 +91,7 @@ withDefaults(defineProps<{
|
|||
&:indeterminate {
|
||||
animation-duration: var(--progress-indeterminate-duration);
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-name: move-indeterminate;
|
||||
animation-timing-function: linear;
|
||||
background-color: var(--progress-bar-background-color);
|
||||
background-image: linear-gradient(
|
||||
|
|
@ -120,7 +121,7 @@ withDefaults(defineProps<{
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes moveIndeterminate {
|
||||
@keyframes move-indeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,12 +73,14 @@ const baseStore = useBaseStore()
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// stylelint-disable no-invalid-position-declaration
|
||||
|
||||
.vikunja-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
block-size: 100vh;
|
||||
inline-size: 100vw;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
|
|
@ -91,8 +93,8 @@ const baseStore = useBaseStore()
|
|||
|
||||
.logo {
|
||||
margin-block-end: 1rem;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
inline-size: 100px;
|
||||
block-size: 100px;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
|
|
@ -107,21 +109,19 @@ const baseStore = useBaseStore()
|
|||
.offline {
|
||||
background: url('@/assets/llama-nightscape.jpg') no-repeat center;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
block-size: 100vh;
|
||||
}
|
||||
|
||||
.offline-message {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
inline-size: 100vw;
|
||||
inset-block-end: 5vh;
|
||||
color: $white;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-weight: 700 !important;
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ async function markAllRead() {
|
|||
display: flex;
|
||||
|
||||
.trigger-button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -210,8 +210,8 @@ async function markAllRead() {
|
|||
position: absolute;
|
||||
inset-block-start: 1rem;
|
||||
inset-inline-end: .5rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
inline-size: .75rem;
|
||||
block-size: .75rem;
|
||||
|
||||
background: var(--primary);
|
||||
border-radius: 100%;
|
||||
|
|
@ -222,19 +222,19 @@ async function markAllRead() {
|
|||
position: absolute;
|
||||
inset-inline-end: 1rem;
|
||||
inset-block-start: calc(100% + 1rem);
|
||||
max-height: 400px;
|
||||
max-block-size: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
background: var(--white);
|
||||
width: 350px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
inline-size: 350px;
|
||||
max-inline-size: calc(100vw - 2rem);
|
||||
padding: .75rem .25rem;
|
||||
border-radius: $radius;
|
||||
box-shadow: var(--shadow-sm);
|
||||
font-size: .85rem;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
max-height: calc(100vh - 1rem - #{$navbar-height});
|
||||
max-block-size: calc(100vh - 1rem - #{$navbar-height});
|
||||
}
|
||||
|
||||
.head {
|
||||
|
|
@ -256,8 +256,8 @@ async function markAllRead() {
|
|||
}
|
||||
|
||||
.read-indicator {
|
||||
width: .35rem;
|
||||
height: .35rem;
|
||||
inline-size: .35rem;
|
||||
block-size: .35rem;
|
||||
background: var(--primary);
|
||||
border-radius: 100%;
|
||||
margin: 0 .5rem;
|
||||
|
|
@ -271,7 +271,7 @@ async function markAllRead() {
|
|||
.user {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
margin: 0 .5rem;
|
||||
|
||||
span {
|
||||
|
|
@ -279,7 +279,7 @@ async function markAllRead() {
|
|||
}
|
||||
|
||||
.avatar {
|
||||
height: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ function getViewTitle(view: IProjectView) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.switch-view-container {
|
||||
min-height: $switch-view-height;
|
||||
min-block-size: $switch-view-height;
|
||||
margin-block-end: 1rem;
|
||||
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -374,7 +374,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
|
|||
border-radius: $radius;
|
||||
position: absolute;
|
||||
margin-block-start: calc((0.25em - 0.125rem) * -1);
|
||||
height: 1.75rem;
|
||||
block-size: 1.75rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
|
@ -393,11 +393,9 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
|
|||
position: absolute;
|
||||
background: transparent !important;
|
||||
resize: none;
|
||||
text-fill-color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
&::placeholder {
|
||||
text-fill-color: var(--input-placeholder-color);
|
||||
-webkit-text-fill-color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
|
|
@ -408,7 +406,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
|
|||
|
||||
.filter-input-highlight {
|
||||
background: var(--white);
|
||||
height: 2.5em;
|
||||
block-size: 2.5em;
|
||||
line-height: 1.5;
|
||||
padding: .5em .75em;
|
||||
word-break: break-word;
|
||||
|
|
|
|||
|
|
@ -110,8 +110,8 @@ $filter-bubble-size: .75rem;
|
|||
inset-block-start: math.div($filter-bubble-size, -2);
|
||||
inset-inline-end: math.div($filter-bubble-size, -2);
|
||||
|
||||
width: $filter-bubble-size;
|
||||
height: $filter-bubble-size;
|
||||
inline-size: $filter-bubble-size;
|
||||
block-size: $filter-bubble-size;
|
||||
border-radius: 100%;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const textOnlyDescription = computed(() => {
|
|||
|
||||
.is-archived {
|
||||
font-size: .75rem;
|
||||
float: left;
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
|
|
@ -133,9 +133,9 @@ const textOnlyDescription = computed(() => {
|
|||
font-size: 1.5rem;
|
||||
line-height: var(--title-line-height);
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
margin-block-end: 0;
|
||||
max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
|
||||
max-block-size: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
|
|
|
|||
|
|
@ -192,15 +192,15 @@ const flatPickerConfig = computed(() => ({
|
|||
|
||||
.field {
|
||||
margin-block-end: 0;
|
||||
width: 33%;
|
||||
inline-size: 33%;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-inline-end: .5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 100%;
|
||||
margin-block-start: .5rem;
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
|
|
@ -211,8 +211,8 @@ const flatPickerConfig = computed(() => ({
|
|||
|
||||
.select,
|
||||
.select select {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
block-size: auto;
|
||||
inline-size: 100%;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -792,6 +792,7 @@ function unCollapseBucket(bucket: IBucket) {
|
|||
inset-block-start: 30%;
|
||||
inset-inline-end: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
--loader-border-color: var(--grey-500);
|
||||
}
|
||||
}
|
||||
|
|
@ -803,7 +804,6 @@ $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
|
|||
$bucket-width: 300px;
|
||||
$bucket-header-height: 60px;
|
||||
$bucket-right-margin: 1rem;
|
||||
|
||||
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
|
||||
$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
|
||||
$filter-container-height: '1rem - #{$switch-view-height}';
|
||||
|
|
@ -811,7 +811,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
.kanban {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
height: calc(#{$crazy-height-calculation});
|
||||
block-size: calc(#{$crazy-height-calculation});
|
||||
margin: 0 -1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
|
|
@ -820,7 +820,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
height: calc(#{$crazy-height-calculation} - #{$filter-container-height} + 9px);
|
||||
block-size: calc(#{$crazy-height-calculation} - #{$filter-container-height} + 9px);
|
||||
scroll-snap-type: x mandatory;
|
||||
margin: 0 -0.5rem;
|
||||
}
|
||||
|
|
@ -854,9 +854,9 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
position: relative;
|
||||
|
||||
margin: 0 $bucket-right-margin 0 0;
|
||||
max-height: calc(100% - 1rem); // 1rem spacing to the bottom
|
||||
min-height: 20px;
|
||||
width: $bucket-width;
|
||||
max-block-size: calc(100% - 1rem); // 1rem spacing to the bottom
|
||||
min-block-size: 20px;
|
||||
inline-size: $bucket-width;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden; // Make sure the edges are always rounded
|
||||
|
|
@ -867,7 +867,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
|
||||
.tasks {
|
||||
overflow: hidden auto;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
|
|
@ -898,12 +898,12 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
// To make it still look like it has some, we modify the container to have a padding of 1rem,
|
||||
// which is the same as the margin it should have. Then we make the container itself bigger
|
||||
// to hide the fact we just made the button smaller.
|
||||
min-width: calc(#{$bucket-width} + 1rem);
|
||||
min-inline-size: calc(#{$bucket-width} + 1rem);
|
||||
background: transparent;
|
||||
|
||||
.button {
|
||||
background: var(--grey-100);
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -923,12 +923,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
|
||||
.bucket-header {
|
||||
background-color: var(--grey-100);
|
||||
height: min-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem;
|
||||
height: $bucket-header-height;
|
||||
block-size: $bucket-header-height;
|
||||
|
||||
.limit {
|
||||
padding: 0 .5rem;
|
||||
|
|
@ -940,7 +939,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
}
|
||||
|
||||
.title.input {
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
padding: .4rem .5rem;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
|
@ -954,11 +953,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
.bucket-footer {
|
||||
position: sticky;
|
||||
inset-block-end: 0;
|
||||
height: min-content;
|
||||
block-size: min-content;
|
||||
padding: .5rem;
|
||||
background-color: var(--grey-100);
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
border-end-start-radius: $radius;
|
||||
border-end-end-radius: $radius;
|
||||
transform: none;
|
||||
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@ function handleBubbleSave() {
|
|||
padding: .5rem;
|
||||
border: 1px solid var(--grey-200);
|
||||
border-radius: $radius;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -640,7 +640,7 @@ function reset() {
|
|||
|
||||
.results {
|
||||
text-align: start;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
color: var(--grey-800);
|
||||
}
|
||||
|
||||
|
|
@ -653,7 +653,7 @@ function reset() {
|
|||
|
||||
.result-item-button {
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
background: transparent;
|
||||
color: var(--grey-800);
|
||||
text-align: start;
|
||||
|
|
@ -678,7 +678,7 @@ function reset() {
|
|||
|
||||
.saved-filter-icon {
|
||||
font-size: .75rem;
|
||||
width: .75rem;
|
||||
inline-size: .75rem;
|
||||
margin-inline-end: .25rem;
|
||||
color: var(--grey-400)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ defineExpose({
|
|||
|
||||
.control {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -330,7 +330,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.add-task-button {
|
||||
height: 100% !important;
|
||||
block-size: 100% !important;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.button-text {
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ const dateIsToday = computed(() => (date: Date) => {
|
|||
<style lang="scss">
|
||||
// Not scoped because we need to style the elements inside the gantt chart component
|
||||
.g-gantt-chart {
|
||||
width: max-content;
|
||||
inline-size: max-content;
|
||||
}
|
||||
|
||||
.g-gantt-row-label {
|
||||
|
|
@ -243,7 +243,7 @@ const dateIsToday = computed(() => (date: Date) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
|
||||
&.today {
|
||||
background: var(--primary);
|
||||
|
|
@ -258,7 +258,7 @@ const dateIsToday = computed(() => (date: Date) => {
|
|||
}
|
||||
|
||||
.g-timeaxis {
|
||||
height: auto !important;
|
||||
block-size: auto !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -278,8 +278,8 @@ const dateIsToday = computed(() => (date: Date) => {
|
|||
|
||||
&-handle-left,
|
||||
&-handle-right {
|
||||
width: 6px !important;
|
||||
height: 75% !important;
|
||||
inline-size: 6px !important;
|
||||
block-size: 75% !important;
|
||||
opacity: .75 !important;
|
||||
border-radius: $radius !important;
|
||||
margin-block-start: 4px;
|
||||
|
|
|
|||
|
|
@ -68,9 +68,9 @@ async function createTask() {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.add-new-task {
|
||||
padding: 1rem .7rem .4rem .7rem;
|
||||
padding: 1rem .7rem .4rem;
|
||||
display: flex;
|
||||
max-width: 450px;
|
||||
max-inline-size: 450px;
|
||||
|
||||
.input {
|
||||
margin-inline-end: .7rem;
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@ defineEmits<{
|
|||
display: block;
|
||||
border-radius: 100%;
|
||||
font-size: .75rem;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
inline-size: 18px;
|
||||
block-size: 18px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -289,13 +289,13 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.attachments {
|
||||
input[type=file] {
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -308,7 +308,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
display: grid;
|
||||
grid-template-columns: 9rem 1fr;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
|
||||
padding: .5rem;
|
||||
|
||||
|
|
@ -327,7 +327,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
height: 2rem;
|
||||
block-size: 2rem;
|
||||
color: var(--text);
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -355,7 +355,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-block-end: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
z-index: 4001; // modal z-index is 4000
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -371,9 +371,9 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
inset-inline-end: 0;
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
font-size: 5rem;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
text-shadow: var(--shadow-md);
|
||||
animation: bounce 2s infinite;
|
||||
|
||||
|
|
@ -389,8 +389,8 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
background: var(--primary);
|
||||
padding: 1rem;
|
||||
color: $white; // Should always be white because of the background, regardless of the theme
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
inline-size: 100%;
|
||||
max-inline-size: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -435,11 +435,11 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from,
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
to {
|
||||
100% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -461,12 +461,12 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
}
|
||||
|
||||
.preview-column {
|
||||
max-width: 8rem;
|
||||
height: 5.2rem;
|
||||
max-inline-size: 8rem;
|
||||
block-size: 5.2rem;
|
||||
}
|
||||
|
||||
.attachment-preview {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.is-task-cover {
|
||||
|
|
|
|||
|
|
@ -458,8 +458,8 @@ function getCommentUrl(commentId: string) {
|
|||
img {
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
inline-size: 20px;
|
||||
block-size: 20px;
|
||||
padding-inline-end: 0;
|
||||
margin-inline-end: .5rem;
|
||||
}
|
||||
|
|
@ -494,7 +494,7 @@ function getCommentUrl(commentId: string) {
|
|||
}
|
||||
|
||||
.media-content {
|
||||
width: calc(100% - 48px - 2rem);
|
||||
inline-size: calc(100% - 48px - 2rem);
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
|
|
|
|||
|
|
@ -135,14 +135,14 @@ async function updateDueDate() {
|
|||
$defer-task-max-width: 350px + 100px;
|
||||
|
||||
.defer-task {
|
||||
width: 100%;
|
||||
max-width: $defer-task-max-width;
|
||||
inline-size: 100%;
|
||||
max-inline-size: $defer-task-max-width;
|
||||
|
||||
@media screen and (max-width: ($defer-task-max-width)) {
|
||||
inset-inline-start: .5rem;
|
||||
inset-inline-end: .5rem;
|
||||
max-width: 100%;
|
||||
width: calc(100vw - 1rem - 2rem);
|
||||
max-inline-size: 100%;
|
||||
inline-size: calc(100vw - 1rem - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,11 +162,11 @@ $defer-task-max-width: 350px + 100px;
|
|||
box-shadow: none;
|
||||
|
||||
@media screen and (max-width: ($defer-task-max-width)) {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
width: auto !important;
|
||||
inline-size: auto !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ watchEffect(async () => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
img {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
border-radius: $radius;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,11 +157,11 @@ async function cancel(element: HTMLInputElement) {
|
|||
|
||||
.title.input {
|
||||
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
|
||||
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
|
||||
min-block-size: calc(1.8rem * 1.125 + .6rem + 2px);
|
||||
margin-inline-end: 0;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
|
||||
margin: 0 -.3rem .5rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,8 +171,8 @@ async function cancel(element: HTMLInputElement) {
|
|||
}
|
||||
|
||||
.color-bubble {
|
||||
height: .75rem;
|
||||
width: .75rem;
|
||||
block-size: .75rem;
|
||||
inline-size: .75rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
|
|
|
|||
|
|
@ -228,8 +228,8 @@ $task-background: var(--white);
|
|||
overflow: hidden;
|
||||
|
||||
&.loader-container.is-loading::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
block-size: 1.5rem;
|
||||
inset-block-start: calc(50% - .75rem);
|
||||
inset-inline-start: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
|
|
@ -243,9 +243,10 @@ $task-background: var(--white);
|
|||
|
||||
|
||||
.due-date {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 .25rem;
|
||||
|
||||
.icon {
|
||||
margin-inline-end: .25rem;
|
||||
|
|
@ -303,7 +304,7 @@ $task-background: var(--white);
|
|||
padding: 0 .5rem 0 .25rem;
|
||||
|
||||
.icon {
|
||||
height: 1rem;
|
||||
block-size: 1rem;
|
||||
padding: 0 .25rem;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
|
@ -318,10 +319,6 @@ $task-background: var(--white);
|
|||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.due-date {
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
||||
.task-id {
|
||||
color: var(--grey-500);
|
||||
font-size: .8rem;
|
||||
|
|
@ -334,7 +331,7 @@ $task-background: var(--white);
|
|||
}
|
||||
|
||||
span {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
&.has-custom-background-color {
|
||||
|
|
@ -382,8 +379,8 @@ $task-background: var(--white);
|
|||
}
|
||||
|
||||
.task-progress {
|
||||
margin: 8px 0 0 0;
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
margin: 8px 0 0;
|
||||
inline-size: 100%;
|
||||
block-size: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const minimumPriority = computed(() => {
|
|||
<style lang="scss" scoped>
|
||||
.high-priority {
|
||||
color: var(--danger);
|
||||
width: auto !important; // To override the width set in tasks
|
||||
inline-size: auto !important; // To override the width set in tasks
|
||||
}
|
||||
|
||||
.not-so-high {
|
||||
|
|
@ -66,7 +66,7 @@ const minimumPriority = computed(() => {
|
|||
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
width: auto !important;
|
||||
inline-size: auto !important;
|
||||
padding-inline-end: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -401,7 +401,7 @@ async function toggleTaskDone(task: ITask) {
|
|||
|
||||
.different-project {
|
||||
color: var(--grey-500);
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -461,7 +461,7 @@ async function toggleTaskDone(task: ITask) {
|
|||
// of the component.
|
||||
.task-done-checkbox {
|
||||
padding: 0;
|
||||
height: 18px; // The exact height of the checkbox in the container
|
||||
block-size: 18px; // The exact height of the checkbox in the container
|
||||
margin-inline-end: .75rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -265,11 +265,11 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
|
|||
}
|
||||
|
||||
.reminder-options-popup {
|
||||
width: 310px;
|
||||
inline-size: 310px;
|
||||
z-index: 99;
|
||||
|
||||
@media screen and (max-width: ($tablet)) {
|
||||
width: calc(100vw - 5rem);
|
||||
inline-size: calc(100vw - 5rem);
|
||||
}
|
||||
|
||||
.option-button {
|
||||
|
|
@ -286,7 +286,7 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
|
|||
|
||||
.reminder__close-button {
|
||||
margin: .5rem;
|
||||
width: calc(100% - 1rem);
|
||||
inline-size: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.currently-active {
|
||||
|
|
|
|||
|
|
@ -137,8 +137,8 @@ function updateData() {
|
|||
padding: .5rem .5rem 0;
|
||||
|
||||
.input, .select select {
|
||||
width: 100% !important;
|
||||
height: auto;
|
||||
inline-size: 100% !important;
|
||||
block-size: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -115,13 +115,13 @@ function removeReminderByIndex(index: number) {
|
|||
color: var(--danger);
|
||||
}
|
||||
|
||||
&::last-child {
|
||||
&:last-child {
|
||||
margin-block-end: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.reminder-detail {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.remove {
|
||||
|
|
|
|||
|
|
@ -166,6 +166,6 @@ p {
|
|||
}
|
||||
|
||||
.input {
|
||||
min-width: 2rem;
|
||||
min-inline-size: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -438,7 +438,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.task-project {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
color: var(--grey-400);
|
||||
font-size: .9rem;
|
||||
white-space: nowrap;
|
||||
|
|
@ -448,8 +448,8 @@ defineExpose({
|
|||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
margin-inline-start: 5px;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
block-size: 27px;
|
||||
inline-size: 27px;
|
||||
}
|
||||
|
||||
.project-task-icon {
|
||||
|
|
@ -473,7 +473,7 @@ defineExpose({
|
|||
.favorite {
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
width: 27px;
|
||||
inline-size: 27px;
|
||||
transition: opacity $transition, color $transition;
|
||||
border-radius: $radius;
|
||||
|
||||
|
|
@ -502,7 +502,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
:deep(.fancy-checkbox) {
|
||||
height: 18px;
|
||||
block-size: 18px;
|
||||
padding-block-start: 0;
|
||||
padding-inline-end: .5rem;
|
||||
|
||||
|
|
@ -518,7 +518,7 @@ defineExpose({
|
|||
|
||||
span.parent-tasks {
|
||||
color: var(--grey-500);
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.show-project .parent-tasks {
|
||||
|
|
@ -534,16 +534,16 @@ defineExpose({
|
|||
}
|
||||
|
||||
.settings {
|
||||
float: right;
|
||||
width: 24px;
|
||||
float: inline-end;
|
||||
inline-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.loader-container.is-loading:after {
|
||||
inset-block-start: calc(50% - 1rem);
|
||||
inset-inline-start: calc(50% - 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
border-inline-start-color: var(--grey-300);
|
||||
border-block-end-color: var(--grey-300);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
|
|||
}
|
||||
|
||||
.task-project {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
color: var(--grey-400);
|
||||
font-size: .9rem;
|
||||
white-space: nowrap;
|
||||
|
|
@ -166,8 +166,8 @@ const project = computed(() => projectStore.projects[props.task.projectId])
|
|||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
margin-inline-start: .5rem;
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
block-size: 21px;
|
||||
inline-size: 21px;
|
||||
}
|
||||
|
||||
.project-task-icon {
|
||||
|
|
@ -195,7 +195,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
|
|||
|
||||
span.parent-tasks {
|
||||
color: var(--grey-500);
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
margin-inline-start: .25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const availableMigrators = computed(() => configStore.availableMigrators
|
|||
|
||||
.migration-service-link {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
inline-size: 100px;
|
||||
text-transform: capitalize;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ async function migrate() {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.migration-in-progress-container {
|
||||
max-width: 400px;
|
||||
max-inline-size: 400px;
|
||||
margin: 4rem auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -246,7 +246,7 @@ async function migrate() {
|
|||
.migration-in-progress {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
max-width: 400px;
|
||||
max-inline-size: 400px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-block-end: 2rem;
|
||||
|
|
@ -254,20 +254,20 @@ async function migrate() {
|
|||
|
||||
.logo {
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
max-block-size: 100px;
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
height: 40px;
|
||||
width: 140px;
|
||||
block-size: 40px;
|
||||
inline-size: 140px;
|
||||
overflow: visible;
|
||||
|
||||
span {
|
||||
transition: all 500ms ease;
|
||||
background: var(--grey-500);
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
block-size: 10px;
|
||||
inline-size: 10px;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
animation: wave 2s ease infinite;
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const projects = computed(() => {
|
|||
gap: 1rem;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -268,19 +268,19 @@ async function removeBackground() {
|
|||
}
|
||||
|
||||
.image-search__image-button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.image-search__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-search__info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
inset-block-end: 0;
|
||||
inline-size: 100%;
|
||||
padding: .25rem 0;
|
||||
opacity: 0;
|
||||
text-align: center;
|
||||
|
|
@ -297,6 +297,6 @@ async function removeBackground() {
|
|||
.is-load-more-button {
|
||||
margin: 1rem auto 0 !important;
|
||||
display: block;
|
||||
width: 200px;
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -273,6 +273,6 @@ function validateSelectedEvents() {
|
|||
<style lang="scss" scoped>
|
||||
.available-events-check {
|
||||
margin-inline-end: .5rem;
|
||||
width: 12.5rem;
|
||||
inline-size: 12.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -984,7 +984,7 @@ function setRelatedTasksActive() {
|
|||
color: var(--text);
|
||||
background-color: var(--site-background) !important;
|
||||
|
||||
@media screen and (max-width: calc(#{$desktop} + 1px)) {
|
||||
@media screen and (width <= calc(#{$desktop} + 1px)) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1028,7 +1028,7 @@ h3 .button {
|
|||
}
|
||||
|
||||
:deep(.datepicker) {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
|
||||
.show {
|
||||
color: var(--text);
|
||||
|
|
@ -1037,7 +1037,7 @@ h3 .button {
|
|||
border-radius: $radius;
|
||||
display: block;
|
||||
margin: .1rem 0;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -1076,7 +1076,7 @@ h3 .button {
|
|||
.assignees {
|
||||
:deep(.multiselect) {
|
||||
.input-wrapper {
|
||||
&:not(:focus-within):not(:hover) {
|
||||
&:not(:focus-within, :hover) {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
|
@ -1140,7 +1140,7 @@ h3 .button {
|
|||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
margin-block-end: .5rem;
|
||||
justify-content: left;
|
||||
|
||||
|
|
@ -1157,7 +1157,7 @@ h3 .button {
|
|||
}
|
||||
// this is the moment when the fixed close button is outside the modal
|
||||
// => we can fill up the space again
|
||||
@media screen and (min-width: calc(#{$desktop} + 84px)) {
|
||||
@media screen and (width >= calc(#{$desktop} + 84px)) {
|
||||
inset-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1168,7 +1168,7 @@ h3 .button {
|
|||
|
||||
.detail-content {
|
||||
@media print {
|
||||
width: 100% !important;
|
||||
inline-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -131,11 +131,11 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
|
|||
}
|
||||
|
||||
.navigation {
|
||||
width: 25%;
|
||||
inline-size: 25%;
|
||||
padding-inline-end: 1rem;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
|
|||
display: block;
|
||||
padding: .5rem;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
border-inline-start: 3px solid transparent;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -155,10 +155,10 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
|
|||
}
|
||||
|
||||
.view {
|
||||
width: 75%;
|
||||
inline-size: 75%;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
padding-inline-start: 0;
|
||||
padding-block-start: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ function cropAvatar() {
|
|||
|
||||
<style lang="scss">
|
||||
.cropper {
|
||||
height: 80vh;
|
||||
block-size: 80vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ async function requestDataExport() {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
gap: .5rem;
|
||||
|
||||
> p {
|
||||
|
|
@ -148,7 +148,7 @@ async function requestDataExport() {
|
|||
}
|
||||
|
||||
> :deep(.button) {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -540,11 +540,11 @@ async function updateSettings() {
|
|||
|
||||
<style scoped>
|
||||
.select select {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.timezone-select {
|
||||
min-width: 200px;
|
||||
min-inline-size: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
@ -571,7 +571,7 @@ async function updateSettings() {
|
|||
|
||||
.sticky-save {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
padding: .25rem 1rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue