RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use :deep instead of global css

old-stable24
Varun Patil 2022-10-26 21:26:28 -07:00
parent 524c029134
commit 95438af1d8
4 changed files with 28 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/frame/Folder.vue
View File

@ -6,7 +6,7 @@
}"
:to="target">
<div class="big-icon fill-block">
<FolderIcon class="memories__big-folder-icon" />
<FolderIcon class="icon" />
<div class="name">{{ data.name }}</div>
</div>
@ -110,13 +110,6 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
}
</script>
<style lang="scss">
/* This cannot be scoped for some reason */
.memories__big-folder-icon > .material-design-icon__svg {
width: 50%; height: 50%;
}
</style>
<style lang="scss" scoped>
.folder {
cursor: pointer;
@ -129,6 +122,10 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
top: 0; left: 0;
transition: opacity 0.2s ease-in-out;
:deep .material-design-icon__svg {
width: 50%; height: 50%;
}
> .name {
cursor: pointer;
width: 100%;

18
src/components/modal/EditDate.vue
View File

@ -19,7 +19,7 @@
</span>
{{ longDateStr }}
<div class="fields memories__editdate__fields">
<div class="fields">
<NcTextField :value.sync="year"
class="field"
@input="newestChange()"
@ -53,7 +53,7 @@
</span>
{{ longDateStrLast }}
<div class="fields memories__editdate__fields">
<div class="fields">
<NcTextField :value.sync="yearLast"
class="field"
:label="t('memories', 'Year')" :label-visible="true"
@ -400,6 +400,12 @@ export default class EditDate extends Mixins(GlobalMixin) {
width: 4.1em;
display: inline-block;
}
:deep label {
font-size: 0.8em;
padding: 0 !important;
padding-left: 3px !important;
}
}
.oldest {
@ -417,11 +423,3 @@ export default class EditDate extends Mixins(GlobalMixin) {
}
}
</style>
<style lang="scss">
.memories__editdate__fields label {
font-size: 0.8em;
padding: 0 !important;
padding-left: 3px !important;
}
</style>

16
src/components/modal/Modal.vue
View File

@ -10,7 +10,7 @@
<slot></slot>
<div class="memories__modal__buttons">
<div class="buttons">
<slot name="buttons"></slot>
</div>
</div>
@ -41,16 +41,14 @@ export default class Modal extends Vue {
.head {
font-weight: 500;
}
}
</style>
<style lang="scss">
.memories__modal__buttons {
margin-top: 10px;
text-align: right;
:deep .buttons {
margin-top: 10px;
text-align: right;
> button {
display: inline-block !important;
> button {
display: inline-block !important;
}
}
}
</style>

18
src/components/top-matter/OnThisDay.vue
View File

@ -11,7 +11,7 @@
</div>
</div>
<div class="left-btn dir-btn memories__onthisday__btn" v-if="hasLeft">
<div class="left-btn dir-btn" v-if="hasLeft">
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Move left')"
@ -21,7 +21,7 @@
</NcActionButton>
</NcActions>
</div>
<div class="right-btn dir-btn memories__onthisday__btn" v-if="hasRight">
<div class="right-btn dir-btn" v-if="hasRight">
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Move right')"
@ -211,6 +211,12 @@ $mobHeight: 150px;
border-radius: 10px;
}
:deep .dir-btn button {
transform: scale(0.6);
box-shadow: var(--color-main-text) 0 0 3px 0 !important;
background-color: var(--color-main-background) !important;
}
.left-btn {
position: absolute;
top: 50%; left: 0;
@ -281,11 +287,3 @@ $mobHeight: 150px;
}
}
</style>
<style lang="scss">
.memories__onthisday__btn button {
transform: scale(0.6);
box-shadow: var(--color-main-text) 0 0 3px 0 !important;
background-color: var(--color-main-background) !important;
}
</style>