refactor: css ::v-deep to :deep()

This commit is contained in:
axolotle 2024-03-04 05:17:08 +01:00
parent 298dc73dfd
commit 1b8dd46395
10 changed files with 25 additions and 27 deletions

View file

@ -105,7 +105,7 @@ export default {
margin-bottom: 1em; margin-bottom: 1em;
border-bottom: solid $border-width $gray-500; border-bottom: solid $border-width $gray-500;
} }
::v-deep .panel-section:not(:last-child) { :deep(.panel-section:not(:last-child)) {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
</style> </style>

View file

@ -57,7 +57,7 @@ export default {
background-color: $white; background-color: $white;
border-width: 2px; border-width: 2px;
::v-deep .popover-body { :deep(.popover-body) {
color: $dark; color: $dark;
} }
} }

View file

@ -145,7 +145,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .invalid-feedback code { :deep(.invalid-feedback code) {
background-color: $gray-200; background-color: $gray-200;
} }
</style> </style>

View file

@ -67,7 +67,7 @@ export default {
#top-bar-right { #top-bar-right {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
::v-deep > * { :deep(> *) {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
} }
@ -88,7 +88,7 @@ export default {
margin-left: auto; margin-left: auto;
} }
::v-deep .btn { :deep(.btn) {
margin-left: 0.5rem; margin-left: 0.5rem;
&.dropdown-toggle-split { &.dropdown-toggle-split {
margin-left: 0; margin-left: 0;

View file

@ -83,7 +83,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card-header { :deep(.card-header) {
display: flex; display: flex;
.custom-header { .custom-header {
@ -97,7 +97,7 @@ export default {
} }
} }
.card-footer { :deep(.card-footer) {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
@ -106,7 +106,7 @@ export default {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
} }
.collapse:not(.show) + .card-footer { :deep(.collapse:not(.show) + .card-footer) {
display: none; display: none;
} }
</style> </style>

View file

@ -80,7 +80,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .custom-file-label { :deep(.custom-file-label) {
color: $input-placeholder-color; color: $input-placeholder-color;
.btn-danger + .b-form-file & { .btn-danger + .b-form-file & {

View file

@ -176,7 +176,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .dropdown-menu { :deep(.dropdown-menu) {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
padding-top: 0; padding-top: 0;

View file

@ -74,8 +74,7 @@ export default {
margin: 0 15%; margin: 0 15%;
} }
::v-deep { :deep(.card-body) {
.card-body {
padding: 1.5rem; padding: 1.5rem;
padding-bottom: 0; padding-bottom: 0;
max-height: 60vh; max-height: 60vh;
@ -86,12 +85,11 @@ export default {
} }
} }
.card-footer { :deep(.card-footer) {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
}
.card-header { .card-header {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;

View file

@ -514,7 +514,7 @@ export default {
flex-basis: 90%; flex-basis: 90%;
.card-body { :deep(.card-body) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

View file

@ -291,7 +291,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .on-off-switch { :deep(.on-off-switch) {
.custom-control-input { .custom-control-input {
&:checked ~ .custom-control-label::before { &:checked ~ .custom-control-label::before {
border-color: $success; border-color: $success;
@ -322,7 +322,7 @@ export default {
} }
} }
::v-deep form { :deep(form) {
margin-bottom: -1rem; margin-bottom: -1rem;
& > * { & > * {