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

Merge branch '2.x' into steps-demo-issue

pull/3027/head
Bahadır 2022-09-23 18:45:48 +03:00 committed by GitHub
parent 14ae2f9e47 20c1febcef
commit ab1a1ae217
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 215 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/speeddial/SpeedDial.vue
View File

@ -6,7 +6,7 @@
</slot>
<ul ref="list" class="p-speeddial-list" role="menu">
<li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
<template v-if="!$slots.item">
<template v-if="!$scopedSlots.item">
<a :href="item.url || '#'" role="menuitem" :class="['p-speeddial-action', { 'p-disabled': item.disabled }]" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" v-ripple>
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
@ -338,4 +338,4 @@ export default {
.p-speeddial-direction-right .p-speeddial-list {
flex-direction: row;
}
</style>
</style>

25
src/components/textarea/Textarea.vue
View File

@ -3,21 +3,29 @@
</template>
<script>
import DomHandler from '../utils/DomHandler';
export default {
props: {
value: null,
autoResize: Boolean
},
resizeListener: null,
mounted() {
if (this.$el.offsetParent && this.autoResize) {
this.resize();
this.bindResizeListener();
}
},
updated() {
if (this.$el.offsetParent && this.autoResize) {
if (DomHandler.isVisible(this.$el) && this.$el.offsetParent.tagName !== 'BODY' && this.autoResize) {
this.resize();
this.bindResizeListener();
}
},
beforeDestroy() {
this.unbindResizeListener();
},
methods: {
resize() {
const style = window.getComputedStyle(this.$el);
@ -32,6 +40,21 @@ export default {
else {
this.$el.style.overflow = "hidden";
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
this.resize();
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
}
},
computed: {

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

@ -432,7 +432,7 @@ export default {
}
@media screen and (max-width: 960px) {
::v-deep .p-toolbar {
:deep(.p-toolbar) {
flex-wrap: wrap;
.p-button {
@ -597,7 +597,7 @@ export default {
}
@media screen and (max-width: 960px) {
::v-deep .p-toolbar {
:deep(.p-toolbar) {
flex-wrap: wrap;
.p-button {

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

@ -189,13 +189,13 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .p-paginator {
:deep(.p-paginator) {
.p-paginator-current {
margin-left: auto;
}
}
::v-deep .p-progressbar {
:deep(.p-progressbar) {
height: .5rem;
background-color: #D8DADC;
@ -204,7 +204,7 @@ export default {
}
}
::v-deep .p-datepicker {
:deep(.p-datepicker) {
min-width: 25rem;
td {
@ -212,7 +212,7 @@ export default {
}
}
::v-deep .p-datatable.p-datatable-customers {
:deep(.p-datatable.p-datatable-customers) {
.p-datatable-header {
padding: 1rem;
text-align: left;

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

@ -2816,13 +2816,13 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep .p-paginator {
:deep(.p-paginator) {
.p-paginator-current {
margin-left: auto;
}
}
::v-deep .p-progressbar {
:deep(.p-progressbar) {
height: .5rem;
background-color: #D8DADC;
@ -2831,7 +2831,7 @@ export default {
}
}
::v-deep .p-datepicker {
:deep(.p-datepicker) {
min-width: 25rem;
td {
@ -2839,7 +2839,7 @@ export default {
}
}
::v-deep .p-datatable.p-datatable-customers {
:deep(.p-datatable.p-datatable-customers) {
.p-datatable-header {
padding: 1rem;
text-align: left;

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

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

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

@ -567,13 +567,13 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .p-paginator {
:deep(.p-paginator) {
.p-paginator-current {
margin-left: auto;
}
}
::v-deep .p-progressbar {
:deep(.p-progressbar) {
height: .5rem;
background-color: #D8DADC;
@ -582,7 +582,7 @@ export default {
}
}
::v-deep .p-datepicker {
:deep(.p-datepicker) {
min-width: 25rem;
td {
@ -590,7 +590,7 @@ export default {
}
}
::v-deep .p-datatable.p-datatable-customers {
:deep(.p-datatable.p-datatable-customers) {
.p-datatable-header {
padding: 1rem;
text-align: left;

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

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

8
src/views/datatable/DataTableScrollDemo.vue
View File

@ -338,11 +338,11 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep .p-datatable-frozen-tbody {
:deep(.p-datatable-frozen-tbody) {
font-weight: bold;
}
::v-deep .p-datatable-scrollable .p-frozen-column {
:deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold;
}
</CodeHighlight>
@ -444,11 +444,11 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .p-datatable-frozen-tbody {
:deep(.p-datatable-frozen-tbody) {
font-weight: bold;
}
::v-deep .p-datatable-scrollable .p-frozen-column {
:deep(.p-datatable-scrollable .p-frozen-column) {
font-weight: bold;
}
</style>

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

@ -94,7 +94,7 @@ export default {
color: #66BB6A;
}
::v-deep .row-accessories {
:deep(.row-accessories) {
background-color: rgba(0,0,0,.15) !important;
}
@ -155,7 +155,7 @@ export default {
color: #66BB6A;
}
::v-deep .row-accessories {
:deep(.row-accessories) {
background-color: rgba(0,0,0,.15) !important;
}

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

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

2
src/views/dock/DockDemo.vue
View File

@ -340,7 +340,7 @@ export default {
</script>
<style scoped lang="scss">
::v-deep .dock-demo {
:deep(.dock-demo) {
.dock-window {
width: 100%;
height: 450px;

2
src/views/dock/DockDoc.vue
View File

@ -469,7 +469,7 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep .dock-demo {
:deep(.dock-demo) {
.dock-window {
width: 100%;
height: 450px;

2
src/views/fullcalendar/FullCalendarDemo.vue
View File

@ -58,7 +58,7 @@ export default {
<style scoped>
@media screen and (max-width: 960px) {
::v-deep .fc-header-toolbar {
:deep(.fc-header-toolbar) {
display: flex;
flex-wrap: wrap;
}

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;
}
}
: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;
}
}
: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;
}
: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;
}
: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

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

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

@ -430,7 +430,7 @@ export default {
min-width: 15rem;
}
::v-deep .multiselect-custom {
: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 {
: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 {
:deep(.p-organizationchart) {
.p-person {
padding: 0;
border: 0 none;

2
src/views/password/PasswordDemo.vue
View File

@ -61,7 +61,7 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .p-password input {
:deep(.p-password input) {
width: 15rem
}
</style>

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

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

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

@ -101,7 +101,7 @@ export default {}
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep .card-container {
: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 {
: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 {
:deep(.p-scrollpanel) {
p {
padding: .5rem;
line-height: 1.5;

2
src/views/scrolltop/ScrollTopDemo.vue
View File

@ -47,7 +47,7 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .custom-scrolltop {
:deep(.custom-scrolltop) {
width: 2rem;
height: 2rem;
border-radius: 4px;

2
src/views/scrolltop/ScrollTopDoc.vue
View File

@ -129,7 +129,7 @@ import ScrollTop from 'primevue/scrolltop';
</CodeHighlight>
<CodeHighlight>
::v-deep .custom-scrolltop {
:deep(.custom-scrolltop) {
width: 2rem;
height: 2rem;
background-color: var(--primary-color);

10
src/views/speeddial/SpeedDialDemo.vue
View File

@ -112,7 +112,7 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .speeddial-linear-demo {
:deep() {
.p-speeddial-direction-up {
left: calc(50% - 2rem);
bottom: 0;
@ -130,7 +130,7 @@ export default {
top: calc(50% - 2rem);
}
}
::v-deep .speeddial-circle-demo {
:deep(.speeddial-circle-demo) {
.p-speeddial-circle {
top: calc(50% - 2rem);
left: calc(50% - 2rem);
@ -172,7 +172,7 @@ export default {
}
}
}
::v-deep .speeddial-tooltip-demo {
:deep(.speeddial-tooltip-demo) {
.p-speeddial-direction-up {
&.speeddial-left {
left: 0;
@ -184,13 +184,13 @@ export default {
}
}
}
::v-deep .speeddial-delay-demo {
:deep(.speeddial-delay-demo) {
.p-speeddial-direction-up {
left: calc(50% - 2rem);
bottom: 0;
}
}
::v-deep .speeddial-mask-demo {
:deep(.speeddial-mask-demo) {
.p-speeddial-direction-up {
right: 0;
bottom: 0;

10
src/views/speeddial/SpeedDialDoc.vue
View File

@ -384,7 +384,7 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
::v-deep .speeddial-linear-demo {
:deep(.speeddial-linear-demo) {
.p-speeddial-direction-up {
left: calc(50% - 2rem);
bottom: 0;
@ -402,7 +402,7 @@ export default {
top: calc(50% - 2rem);
}
}
::v-deep .speeddial-circle-demo {
:deep(.speeddial-circle-demo) {
.p-speeddial-circle {
top: calc(50% - 2rem);
left: calc(50% - 2rem);
@ -444,7 +444,7 @@ export default {
}
}
}
::v-deep .speeddial-tooltip-demo {
:deep(.speeddial-tooltip-demo) {
.p-speeddial-direction-up {
&.speeddial-left {
left: 0;
@ -456,13 +456,13 @@ export default {
}
}
}
::v-deep .speeddial-delay-demo {
:deep(.speeddial-delay-demo) {
.p-speeddial-direction-up {
left: calc(50% - 2rem);
bottom: 0;
}
}
::v-deep .speeddial-mask-demo {
:deep(.speeddial-mask-demo) {
.p-speeddial-direction-up {
right: 0;
bottom: 0;

6
src/views/steps/StepsDemo.vue Executable file → Normal file
View File

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

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

@ -60,7 +60,7 @@ export default {
</script>
<style scoped lang="scss">
::v-deep .tabmenudemo-content {
: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 {
:deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;

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

@ -20,7 +20,7 @@ import TerminalService from 'primevue/terminalservice';
import TerminalService from 'primevue/terminalservice';
export default {
methods: {
methods: {
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
@ -95,7 +95,7 @@ export default {
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>p-terminal</td>
<td>Container element.</td>
</tr>
@ -107,7 +107,7 @@ export default {
<td>p-terminal-prompt</td>
<td>Prompt text.</td>
</tr>
<tr>
<tr>
<td>p-terminal-response</td>
<td>Command response.</td>
</tr>
@ -136,7 +136,7 @@ export default {
import TerminalService from 'primevue/terminalservice';
export default {
methods: {
methods: {
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
@ -176,7 +176,7 @@ p {
margin-top: 0;
}
::v-deep .dark-demo-terminall {
:deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;

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

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

6
src/views/timeline/TimelineDemo.vue
View File

@ -141,13 +141,13 @@ export default {
z-index: 1;
}
::v-deep .p-timeline-event-content,
::v-deep .p-timeline-event-opposite {
:deep(.p-timeline-event-content),
:deep(.p-timeline-event-opposite) {
line-height: 1;
}
@media screen and (max-width: 960px) {
::v-deep .customized-timeline {
:deep(.customized-timeline) {
.p-timeline-event:nth-child(even) {
flex-direction: row !important;

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

@ -108,7 +108,7 @@ button {
margin-right: .5rem;
}
::v-deep .p-tree {
:deep(.p-tree) {
a {
color: #2196f3;
}

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

@ -889,7 +889,7 @@ data() {
<p>Optionally a global filter is available to search against all the fields, in this case the special <i>global</i> keyword should be the property to be populated.</p>
<p>In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
<CodeHighlight>
<template v-pre>
&lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
@ -1232,23 +1232,21 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
.sm-visible {
display: none;
}
.sm-visible {
display: none;
}
@media screen and (max-width: 40em) {
::v-deep {
.sm-invisible {
@media screen and (max-width: 40em) {
:deep(.sm-invisible) {
display: none;
}
.sm-visible {
:deep(.sm-visible) {
display: inline;
margin-right: .5rem;
}
}
}
</CodeHighlight>
</CodeHighlight>
<h5>Properties</h5>
<p>Any property such as style and class are passed to the underlying root element. Following is the additional property to configure the component.</p>
@ -1312,7 +1310,7 @@ export default {
<td>null</td>
<td>Number of total records, defaults to length of value when not defined.</td>
</tr>
<tr>
<tr>
<td>paginator</td>
<td>boolean</td>
<td>false</td>
@ -1388,7 +1386,7 @@ export default {
<td>sortField</td>
<td>string</td>
<td>null</td>
<td>Property name or a getter function of a row data used for sorting by default.</td>
<td>Property name or a getter function of a row data used for sorting by default.</td>
</tr>
<tr>
<td>sortOrder</td>

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

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