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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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