mirror of https://github.com/FreeTubeApp/FreeTube
Add themes for handling ft-prompt styling
This is a portal-compatible way of affecting prompt styling, as ':deep' does not work for portals.
This commit is contained in:
parent
fbb6332758
commit
8b2fb32b41
|
@ -6,16 +6,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style for `ft-prompt` */
|
||||
:deep(.promptCard) {
|
||||
/* Currently only this prompt has enough content to make prompt too high */
|
||||
max-block-size: 95%;
|
||||
|
||||
/* Some child(s) will grow vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.searchInputsRow {
|
||||
display: grid;
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<ft-prompt
|
||||
theme="flex-column"
|
||||
@click="hide"
|
||||
>
|
||||
<h2 class="heading">
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
.promptCard {
|
||||
overflow-y: scroll;
|
||||
max-block-size: 95%;
|
||||
}
|
||||
|
||||
.promptCard.autosize {
|
||||
|
@ -34,6 +35,31 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.promptCard.flex-column {
|
||||
/* Some child(ren) will grow vertically */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.promptCard.slim {
|
||||
max-inline-size: 70%;
|
||||
inset-inline-start: 15%;
|
||||
padding-block: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (width <= 680px) {
|
||||
.promptCard.slim {
|
||||
padding-block: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 500px) {
|
||||
.promptCard.slim {
|
||||
max-inline-size: 80%;
|
||||
inset-inline-start: 10%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -36,6 +36,10 @@ export default defineComponent({
|
|||
autosize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
}
|
||||
},
|
||||
emits: ['click'],
|
||||
|
|
|
@ -9,7 +9,9 @@
|
|||
>
|
||||
<ft-card
|
||||
class="promptCard"
|
||||
:class="{ autosize }"
|
||||
:class="{ autosize, [theme]: true }"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="('dialog-' + sanitizedLabel)"
|
||||
>
|
||||
<slot>
|
||||
|
|
|
@ -4,16 +4,6 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
/* Style for `ft-prompt` */
|
||||
:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
|
||||
max-inline-size: 70%;
|
||||
inset-inline-start: 15%;
|
||||
padding-block: 10px;
|
||||
|
||||
/* Currently only this prompt has enough content to make prompt too high */
|
||||
max-block-size: 95%;
|
||||
}
|
||||
|
||||
.searchRadio {
|
||||
padding: 5px;
|
||||
}
|
||||
|
@ -29,11 +19,6 @@
|
|||
}
|
||||
|
||||
@media only screen and (width <= 680px) {
|
||||
/* Style for `ft-prompt` */
|
||||
:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
|
||||
padding-block: 5px;
|
||||
}
|
||||
|
||||
.searchRadio {
|
||||
border-inline-end: 0;
|
||||
padding-block-start: 0;
|
||||
|
@ -43,11 +28,3 @@
|
|||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (width <= 500px) {
|
||||
/* Style for `ft-prompt` */
|
||||
:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
|
||||
max-inline-size: 80%;
|
||||
inset-inline-start: 10%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { defineComponent, nextTick } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { mapActions } from 'vuex'
|
||||
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
|
||||
import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<ft-prompt
|
||||
theme="slim"
|
||||
@click="hideSearchFilters"
|
||||
>
|
||||
<div>
|
||||
|
|
Loading…
Reference in New Issue