vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

::v-deep migration

pull/496/head
Cagatay Civici 2020-09-17 22:09:37 +03:00
parent 16b101c2a2
commit 8860a174bb
27 changed files with 181 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/datatable/DataTableDemo.vue
View File

@ -178,13 +178,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .p-paginator { ::v-deep(.p-paginator) {
.p-paginator-current { .p-paginator-current {
margin-left: auto; margin-left: auto;
} }
} }
::v-deep .p-progressbar { ::v-deep(.p-progressbar) {
height: .5rem; height: .5rem;
background-color: #D8DADC; background-color: #D8DADC;
@ -198,7 +198,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
::v-deep .p-datepicker { ::v-deep(.p-datepicker) {
min-width: 25rem; min-width: 25rem;
td { td {
@ -206,7 +206,7 @@ export default {
} }
} }
::v-deep .p-datatable.p-datatable-customers { ::v-deep(.p-datatable.p-datatable-customers) {
.p-datatable-header { .p-datatable-header {
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
@ -236,7 +236,7 @@ export default {
} }
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-customers { &.p-datatable-customers {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {

54
src/views/datatable/DataTableDoc.vue
View File

@ -1655,7 +1655,7 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-responsive-demo { &.p-datatable-responsive-demo {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
@ -1739,7 +1739,7 @@ export default {
} }
} }
::v-deep .orange-car { .orange-car {
background-color: #344b5f !important; background-color: #344b5f !important;
color: #ffffff !important; color: #ffffff !important;
} }
@ -2583,18 +2583,18 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep .p-paginator { ::v-deep(.p-paginator) {
.p-paginator-current { .p-paginator-current {
margin-left: auto; margin-left: auto;
} }
} }
::v-deep .p-progressbar { ::v-deep(.p-progressbar) {
height: .5rem; height: .5rem;
background-color: #D8DADC; background-color: #D8DADC;
.p-progressbar-value { .p-progressbar-value {
background-color: #00ACAD; background-color: #607D8B;
} }
} }
@ -2603,7 +2603,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
::v-deep .p-datepicker { ::v-deep(.p-datepicker) {
min-width: 25rem; min-width: 25rem;
td { td {
@ -2611,7 +2611,7 @@ export default {
} }
} }
::v-deep .p-datatable.p-datatable-customers { ::v-deep(.p-datatable.p-datatable-customers) {
.p-datatable-header { .p-datatable-header {
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
@ -2640,29 +2640,37 @@ export default {
display: none; display: none;
} }
@media screen and (max-width: 64em) { @media screen and (max-width: 960px) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-customers { &.p-datatable-customers {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
display: none !important; display: none !important;
} }
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr {
text-align: left; border-bottom: 1px solid var(--layer-2);
display: block;
border: 0 none !important;
width: 100% !important;
float: left;
clear: left;
border: 0 none;
.p-column-title { > td {
padding: .4rem; text-align: left;
min-width: 30%; display: block;
display: inline-block; border: 0 none !important;
margin: -.4rem 1rem -.4rem -.4rem; width: 100% !important;
font-weight: bold; float: left;
clear: left;
border: 0 none;
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4rem 1rem -.4rem -.4rem;
font-weight: bold;
}
.p-progressbar {
margin-top: .5rem;
}
} }
} }
} }

4
src/views/datatable/DataTableEditDemo.vue
View File

@ -288,7 +288,7 @@ export default {
</template> </template>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.editable-cells-table td.p-cell-editing { ::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -396,7 +396,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .editable-cells-table td.p-cell-editing { ::v-deep(.editable-cells-table td.p-cell-editing) {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }

10
src/views/datatable/DataTableFilterDemo.vue
View File

@ -322,13 +322,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .p-paginator { ::v-deep(.p-paginator) {
.p-paginator-current { .p-paginator-current {
margin-left: auto; margin-left: auto;
} }
} }
::v-deep .p-progressbar { ::v-deep(.p-progressbar) {
height: .5rem; height: .5rem;
background-color: #D8DADC; background-color: #D8DADC;
@ -342,7 +342,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
::v-deep .p-datepicker { ::v-deep(.p-datepicker) {
min-width: 25rem; min-width: 25rem;
td { td {
@ -350,7 +350,7 @@ export default {
} }
} }
::v-deep .p-datatable.p-datatable-customers { ::v-deep(.p-datatable.p-datatable-customers) {
.p-datatable-header { .p-datatable-header {
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
@ -380,7 +380,7 @@ export default {
} }
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-customers { &.p-datatable-customers {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {

4
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -103,7 +103,7 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-responsive-demo { &.p-datatable-responsive-demo {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
@ -165,7 +165,7 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep .p-datatable { ::v-deep(.p-datatable) {
&.p-datatable-responsive-demo { &.p-datatable-responsive-demo {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {

2
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -300,7 +300,7 @@ export default {
font-weight: 700; font-weight: 700;
} }
::v-deep .p-rowgroup-header { ::v-deep(.p-rowgroup-header) {
span { span {
font-weight: 700; font-weight: 700;
} }

6
src/views/datatable/DataTableStyleDemo.vue
View File

@ -94,9 +94,8 @@ export default {
color: #66BB6A; color: #66BB6A;
} }
::v-deep .row-accessories { ::v-deep(.row-accessories) {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0,0,0,.15) !important;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
@ -155,8 +154,7 @@ export default {
color: #66BB6A; color: #66BB6A;
} }
::v-deep .row-accessories { ::v-deep(.row-accessories) {
background-color: rgba(0,0,0,.15) !important; background-color: rgba(0,0,0,.15) !important;
} }
</style> </style>

4
src/views/dataview/DataViewDemo.vue
View File

@ -144,7 +144,7 @@ export default {
vertical-align: middle; vertical-align: middle;
} }
::v-deep .product-list-item { ::v-deep(.product-list-item) {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
@ -181,7 +181,7 @@ export default {
} }
} }
::v-deep .product-grid-item { ::v-deep(.product-grid-item) {
margin: .5rem; margin: .5rem;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;

176
src/views/galleria/GalleriaAdvancedDemo.vue
View File

@ -100,64 +100,62 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep { ::v-deep(.custom-galleria) {
.custom-galleria { &.fullscreen {
&.fullscreen { display: flex;
display: flex; flex-direction: column;
flex-direction: column;
.p-galleria-content {
flex-grow: 1;
justify-content: center;
}
}
.p-galleria-content { .p-galleria-content {
position: relative; flex-grow: 1;
justify-content: center;
} }
}
.p-galleria-thumbnail-wrapper { .p-galleria-content {
position: absolute; position: relative;
bottom: 0; }
left: 0;
width: 100%;
}
.p-galleria-thumbnail-items-container { .p-galleria-thumbnail-wrapper {
width: 100%; position: absolute;
} bottom: 0;
left: 0;
width: 100%;
}
.custom-galleria-footer { .p-galleria-thumbnail-items-container {
display: flex; width: 100%;
align-items: center; }
background-color: rgba(0, 0, 0, .9);
.custom-galleria-footer {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
color: #ffffff; color: #ffffff;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
> button { &.fullscreen-button {
background-color: transparent; margin-left: auto;
color: #ffffff; }
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button { &:hover {
margin-left: auto; background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
} }
} }
}
.title-container { .title-container {
> span { > span {
font-size: .9rem; font-size: .9rem;
padding-left: .829rem; padding-left: .829rem;
&.title { &.title {
font-weight: bold; font-weight: bold;
}
} }
} }
} }
@ -259,64 +257,62 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep(.custom-galleria) {
.custom-galleria { &.fullscreen {
&.fullscreen { display: flex;
display: flex; flex-direction: column;
flex-direction: column;
.p-galleria-content {
flex-grow: 1;
justify-content: center;
}
}
.p-galleria-content { .p-galleria-content {
position: relative; flex-grow: 1;
justify-content: center;
} }
}
.p-galleria-thumbnail-wrapper { .p-galleria-content {
position: absolute; position: relative;
bottom: 0; }
left: 0;
width: 100%;
}
.p-galleria-thumbnail-items-container { .p-galleria-thumbnail-wrapper {
width: 100%; position: absolute;
} bottom: 0;
left: 0;
width: 100%;
}
.custom-galleria-footer { .p-galleria-thumbnail-items-container {
display: flex; width: 100%;
align-items: center; }
background-color: rgba(0, 0, 0, .9);
.custom-galleria-footer {
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, .9);
color: #ffffff;
> button {
background-color: transparent;
color: #ffffff; color: #ffffff;
border: 0 none;
border-radius: 0;
margin: .2rem 0;
> button { &.fullscreen-button {
background-color: transparent; margin-left: auto;
color: #ffffff; }
border: 0 none;
border-radius: 0;
margin: .2rem 0;
&.fullscreen-button { &:hover {
margin-left: auto; background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
} }
} }
}
.title-container { .title-container {
> span { > span {
font-size: .9rem; font-size: .9rem;
padding-left: .829rem; padding-left: .829rem;
&.title { &.title {
font-weight: bold; font-weight: bold;
}
} }
} }
} }

36
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -190,17 +190,15 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep { ::v-deep(.custom-indicator-galleria) {
.custom-indicator-galleria { .indicator-text {
.indicator-text { color: #e9ecef;
color: #e9ecef; cursor: pointer;
cursor: pointer; }
}
.p-highlight { .p-highlight {
.indicator-text { .indicator-text {
color: var(--primary-color); color: var(--primary-color);
}
} }
} }
} }
@ -249,17 +247,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep(.custom-indicator-galleria) {
.custom-indicator-galleria { .indicator-text {
.indicator-text { color: #e9ecef;
color: #e9ecef; cursor: pointer;
cursor: pointer; }
}
.p-highlight { .p-highlight {
.indicator-text { .indicator-text {
color: var(--primary-color); color: var(--primary-color);
}
} }
} }
} }

2
src/views/multiselect/MultiSelectDemo.vue
View File

@ -78,7 +78,7 @@ export default {
min-width: 15rem; min-width: 15rem;
} }
::v-deep .multiselect-custom { ::v-deep(.multiselect-custom) {
.p-multiselect-label:not(.p-placeholder) { .p-multiselect-label:not(.p-placeholder) {
padding-top: .25rem; padding-top: .25rem;
padding-bottom: .25rem; padding-bottom: .25rem;

2
src/views/multiselect/MultiSelectDoc.vue
View File

@ -375,7 +375,7 @@ export default {
min-width: 15rem; min-width: 15rem;
} }
::v-deep .multiselect-custom { ::v-deep(.multiselect-custom) {
.p-multiselect-label:not(.p-placeholder) { .p-multiselect-label:not(.p-placeholder) {
padding-top: .25rem; padding-top: .25rem;
padding-bottom: .25rem; padding-bottom: .25rem;

2
src/views/organizationchart/OrganizationChartDemo.vue
View File

@ -182,7 +182,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .p-organizationchart { ::v-deep(.p-organizationchart) {
.p-person { .p-person {
padding: 0; padding: 0;
border: 0 none; border: 0 none;

2
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -648,7 +648,7 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep .p-organizationchart { ::v-deep(.p-organizationchart) {
.p-person { .p-person {
padding: 0; padding: 0;
border: 0 none; border: 0 none;

2
src/views/ripple/RippleDemo.vue
View File

@ -31,7 +31,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .card-container { ::v-deep(.card-container) {
.card { .card {
width: 75px; width: 75px;
height: 75px; height: 75px;

2
src/views/ripple/RippleDoc.vue
View File

@ -99,7 +99,7 @@ export default {}
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep .card-container { ::v-deep(.card-container) {
.card { .card {
width: 75px; width: 75px;
height: 75px; height: 75px;

2
src/views/scrollpanel/ScrollPanelDemo.vue
View File

@ -79,7 +79,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .p-scrollpanel { ::v-deep(.p-scrollpanel) {
p { p {
padding: .5rem; padding: .5rem;
line-height: 1.5; line-height: 1.5;

2
src/views/scrollpanel/ScrollPanelDoc.vue
View File

@ -155,7 +155,7 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
::v-deep .p-scrollpanel { ::v-deep(.p-scrollpanel) {
p { p {
padding: .5rem; padding: .5rem;
line-height: 1.5; line-height: 1.5;

6
src/views/steps/StepsDemo.vue
View File

@ -68,11 +68,11 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep b { ::v-deep(b) {
display: block display: block;
} }
::v-deep .p-card-body { ::v-deep(.p-card-body) {
padding: 2rem; padding: 2rem;
} }
</style> </style>

9
src/views/support/Support.vue
View File

@ -59,7 +59,7 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .pro-section { ::v-deep(.pro-section) {
display: flex; display: flex;
margin-top: .75rem; margin-top: .75rem;
@ -79,8 +79,7 @@
} }
} }
li { li {
line-height: 1.5; line-height: 1.5;
} }
</style> </style>

2
src/views/tabmenu/TabMenuDemo.vue
View File

@ -40,7 +40,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .tabmenudemo-content { ::v-deep(.tabmenudemo-content) {
padding: 2rem 1rem; padding: 2rem 1rem;
} }
</style> </style>

2
src/views/terminal/TerminalDemo.vue
View File

@ -66,7 +66,7 @@ p {
margin-top: 0; margin-top: 0;
} }
::v-deep .dark-demo-terminal { ::v-deep(.dark-demo-terminal) {
background-color: #212121; background-color: #212121;
color: #ffffff; color: #ffffff;

2
src/views/terminal/TerminalDoc.vue
View File

@ -176,7 +176,7 @@ p {
margin-top: 0; margin-top: 0;
} }
::v-deep .dark-demo-terminall { ::v-deep(.dark-demo-terminal) {
background-color: #212121; background-color: #212121;
color: #ffffff; color: #ffffff;

2
src/views/theming/Theming.vue
View File

@ -58,7 +58,7 @@ html {
<CodeHighlight> <CodeHighlight>
&lt;style lang="scss" scoped&gt; &lt;style lang="scss" scoped&gt;
::v-deep .dark-panel.p-panel { ::v-deep(.dark-panel.p-panel) {
.p-panel-titlebar { .p-panel-titlebar {
background: #212121; background: #212121;
} }

3
src/views/tree/TreeTemplatingDemo.vue
View File

@ -108,10 +108,9 @@ button {
margin-right: .5rem; margin-right: .5rem;
} }
::v-deep .p-tree { ::v-deep(.p-tree) {
a { a {
color: #2196f3; color: #2196f3;
} }
} }
</style> </style>

12
src/views/treetable/TreeTableDoc.vue
View File

@ -1239,15 +1239,9 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep { ::v-deep(.sm-visible) {
.sm-invisible { display: inline;
display: none; margin-right: .5rem;
}
.sm-visible {
display: inline;
margin-right: .5rem;
}
} }
} }
</CodeHighlight> </CodeHighlight>

24
src/views/treetable/TreeTableResponsiveDemo.vue
View File

@ -73,15 +73,9 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep { ::v-deep(.sm-visible) {
.sm-invisible { display: inline;
display: none; margin-right: .5rem;
}
.sm-visible {
display: inline;
margin-right: .5rem;
}
} }
} }
</CodeHighlight> </CodeHighlight>
@ -117,15 +111,9 @@ export default {
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
::v-deep { ::v-deep(.sm-visible) {
.sm-invisible { display: inline;
display: none; margin-right: .5rem;
}
.sm-visible {
display: inline;
margin-right: .5rem;
}
} }
} }
</style> </style>