More work on theming refactor
cagataycivici
parent
3d5eec7d80
commit
1979589d83
|
|
@ -31,36 +31,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul li {
|
||||
display: inline-block;
|
||||
margin: 0 .25em;
|
||||
}
|
||||
|
||||
.p-breadcrumb-chevron, .p-breadcrumb-home {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-breadcrumb ul li .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -212,7 +212,6 @@ export default {
|
|||
<style>
|
||||
.p-contextmenu {
|
||||
width: 12.5em;
|
||||
padding: .25em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -221,37 +220,21 @@ export default {
|
|||
}
|
||||
|
||||
.p-contextmenu ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-submenu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 12.5em;
|
||||
padding: .25em;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-active > .p-submenu-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-link {
|
||||
padding: .25em;
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem {
|
||||
|
|
@ -259,14 +242,7 @@ export default {
|
|||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-link .p-submenu-icon {
|
||||
position: absolute;
|
||||
margin-top: -.5em;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.p-contextmenu .p-menuitem-active > .p-submenu > .p-submenu-list {
|
||||
display: block !important;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-contextmenu-enter {
|
||||
|
|
|
|||
|
|
@ -261,105 +261,41 @@ export default {
|
|||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
transition-property: background-color;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.p-dialog-mask.p-component-overlay {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.p-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
pointer-events: auto;
|
||||
max-height: 90%;
|
||||
transform: scale(1);
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar {
|
||||
padding: .5em .75em;
|
||||
position: relative;
|
||||
border: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.p-dialog .p-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: .5em .75em;
|
||||
background: none;
|
||||
zoom: 1;
|
||||
|
||||
.p-dialog-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.p-dialog-resizable .p-dialog-content {
|
||||
overflow: auto;
|
||||
}
|
||||
.p-dialog .p-resizable-handle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
position: absolute;
|
||||
font-size: .1px;
|
||||
display: block;
|
||||
cursor: se-resize;
|
||||
}
|
||||
.p-draggable .p-dialog-titlebar {
|
||||
cursor: move;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icons {
|
||||
float: right;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icons:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
|
||||
.p-dialog-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-dialog .p-dialog-titlebar-icon {
|
||||
text-decoration: none;
|
||||
padding: .125em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.p-dialog .p-dialog-titlebar-icon span {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.p-dialog-footer {
|
||||
padding: 1em;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* ConfirmDialog */
|
||||
.p-confirmdialog {
|
||||
width: 30em;
|
||||
}
|
||||
.p-confirmdialog.p-dialog .p-dialog-content {
|
||||
padding: 1em 2em;
|
||||
}
|
||||
.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-dialog-footer .p-button {
|
||||
width: auto;
|
||||
}
|
||||
/* RTL */
|
||||
.p-rtl .p-dialog .p-dialog-titlebar-close {
|
||||
float: left;
|
||||
}
|
||||
.p-rtl .p-dialog .p-dialog-footer {
|
||||
text-align: left;
|
||||
}
|
||||
@media screen and (max-width: 40em) {
|
||||
.p-confirmdialog {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
/* Center */
|
||||
.p-dialog-enter-active {
|
||||
|
|
@ -432,6 +368,7 @@ export default {
|
|||
.p-dialog-bottomright .p-dialog-leave-to {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
|
||||
/* Maximize */
|
||||
.p-dialog-maximized {
|
||||
-webkit-transition: none;
|
||||
|
|
|
|||
|
|
@ -348,62 +348,22 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-fileupload-buttonbar .p-fileupload-choose.p-disabled input {
|
||||
.p-fileupload-choose.p-disabled input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-fileupload-buttonbar {
|
||||
padding: .5em;
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
|
||||
.p-fileupload-buttonbar .p-button {
|
||||
vertical-align: middle;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.p-fileupload-content {
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
transition: border-color .3s;
|
||||
}
|
||||
|
||||
.p-fileupload-content.p-fileupload-highlight {
|
||||
border-color: #156090;
|
||||
}
|
||||
|
||||
.p-fileupload-files img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.p-fileupload-files {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.p-fileupload-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.p-fileupload-row > div {
|
||||
display: table-cell;
|
||||
padding: .5em 1em;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
height: .25em;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-fileupload-content .p-progressbar-value {
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.p-button.p-fileupload-choose {
|
||||
|
|
@ -432,8 +392,4 @@ export default {
|
|||
.p-fluid .p-fileupload .p-button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-fileupload-content .p-button-icon-only {
|
||||
width: 2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -299,10 +299,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-megamenu {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-megamenu-root-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -314,18 +310,9 @@ export default {
|
|||
}
|
||||
|
||||
.p-megamenu .p-menuitem-link {
|
||||
padding: .25em;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-megamenu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-megamenu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-megamenu-panel {
|
||||
|
|
@ -339,10 +326,6 @@ export default {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.p-megamenu-panel .p-menuitem {
|
||||
margin: .125em 0;
|
||||
}
|
||||
|
||||
.p-megamenu-submenu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -350,18 +333,10 @@ export default {
|
|||
width: 12.5em;
|
||||
}
|
||||
|
||||
.p-megamenu-submenu-header {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
/* Horizontal */
|
||||
.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
|
||||
vertical-align: middle;
|
||||
margin-left: .25em;
|
||||
.p-megamenu-horizontal .p-megamenu-root-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
|
|
@ -369,12 +344,8 @@ export default {
|
|||
width: 12.5em;
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link {
|
||||
position: relative;
|
||||
.p-megamenu-vertical .p-megamenu-root-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
|
||||
|
|
@ -383,16 +354,6 @@ export default {
|
|||
}
|
||||
|
||||
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
|
||||
position: absolute;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -.5em;
|
||||
}
|
||||
|
||||
.p-megamenu .p-grid {
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -182,10 +182,9 @@ export default {
|
|||
<style>
|
||||
.p-menu {
|
||||
width: 12.5em;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-menu.p-menu-dynamic {
|
||||
.p-menu-dynamic {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -194,33 +193,14 @@ export default {
|
|||
}
|
||||
|
||||
.p-menu ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-menu .p-submenu-header {
|
||||
padding: .25em .5em;
|
||||
margin: .125em 0;
|
||||
}
|
||||
|
||||
.p-menu .p-menuitem {
|
||||
margin: .125em 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-menu .p-menuitem-link {
|
||||
padding: .25em;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-menu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-menu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,20 +31,9 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-menubar {
|
||||
padding: .25em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-menubar .p-menu-separator {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
|
||||
.p-menubar:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.p-menubar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -52,33 +41,18 @@ export default {
|
|||
}
|
||||
|
||||
.p-menubar .p-menuitem-link {
|
||||
display: block;
|
||||
padding: .25em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
.p-menubar .p-menuitem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-root-list {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-root-list > .p-menuitem {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
|
||||
vertical-align: middle;
|
||||
margin-left: .25em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-root-list > li ul {
|
||||
|
|
@ -93,13 +67,8 @@ export default {
|
|||
.p-menubar .p-submenu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 12.5em;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-menubar .p-submenu-list .p-menuitem {
|
||||
margin: .125em 0;
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
|
||||
|
|
@ -108,31 +77,17 @@ export default {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {
|
||||
position: absolute;
|
||||
margin-top: -.5em;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-menubar .p-menuitem-active > .p-submenu > .p-submenu-list {
|
||||
display: block;
|
||||
.p-menubar .p-menu-separator {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
|
||||
.p-menubar .p-menubar-custom,
|
||||
.p-menubar .p-menubar-end {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
margin-right: .25em;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -65,35 +65,12 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-messages-wrapper {
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-messages-icon-container,
|
||||
.p-messages-close-container {
|
||||
flex-basis: auto;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-messages-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-messages-icon {
|
||||
padding: 0;
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-messages .p-messages-summary {
|
||||
font-weight: bold;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
.p-messages-close {
|
||||
position: absolute;
|
||||
.p-messages-close.p-link {
|
||||
margin-left: auto
|
||||
}
|
||||
|
||||
.p-messages-enter {
|
||||
|
|
|
|||
|
|
@ -152,8 +152,6 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-overlaypanel {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -163,25 +161,10 @@ export default {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.p-overlaypanel-content {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.p-overlaypanel-close {
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
right: -1em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.p-overlaypanel-close-icon {
|
||||
line-height: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
|
|
|
|||
|
|
@ -94,67 +94,25 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.p-panelmenu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menu-separator {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-content-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-header {
|
||||
margin: -1px 0 0 0;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-header-link {
|
||||
padding: .5em;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-content {
|
||||
padding: 0.25em;
|
||||
border-top: 0;
|
||||
margin-bottom: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-submenu-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-panelmenu-content > .p-panelmenu-root-submenu.p-submenu-list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menuitem {
|
||||
overflow: hidden;
|
||||
margin: .125em 0;
|
||||
}
|
||||
|
||||
.p-panelmenu .p-menuitem-link {
|
||||
padding: .25em;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -247,10 +247,9 @@ export default {
|
|||
height: 30em;
|
||||
}
|
||||
|
||||
.p-sidebar-close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
.p-sidebar-close.p-link {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 64em) {
|
||||
|
|
|
|||
|
|
@ -35,17 +35,6 @@ export default {
|
|||
default: true
|
||||
}
|
||||
},
|
||||
stepsStyle: null,
|
||||
watch: {
|
||||
model(newValue) {
|
||||
if (this.model !== newValue) {
|
||||
this.createStyle();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.createStyle();
|
||||
},
|
||||
methods: {
|
||||
onItemClick(event, item) {
|
||||
if (item.disabled || this.readonly) {
|
||||
|
|
@ -72,21 +61,6 @@ export default {
|
|||
isItemDisabled(item) {
|
||||
return (item.disabled || (this.readonly && !this.isActive(item)));
|
||||
},
|
||||
createStyle() {
|
||||
if (!this.stepsStyle) {
|
||||
this.stepsStyle = document.createElement('style');
|
||||
this.stepsStyle.type = 'text/css';
|
||||
document.body.appendChild(this.stepsStyle);
|
||||
}
|
||||
|
||||
let innerHTML = `
|
||||
#${this.id} .p-steps-item {
|
||||
flex: 1 0 ${ (100/ this.model.length) }%
|
||||
}
|
||||
`;
|
||||
|
||||
this.stepsStyle.innerHTML = innerHTML;
|
||||
},
|
||||
visible(item) {
|
||||
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
|
||||
}
|
||||
|
|
@ -104,56 +78,35 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-steps ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.p-steps-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-steps-item .p-menuitem-link {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-steps.p-steps-readonly .p-steps-item {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
padding: 1em;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item.p-steps-current .p-menuitem-link,
|
||||
.p-steps .p-steps-item.p-disabled .p-menuitem-link {
|
||||
.p-steps-item.p-steps-current .p-menuitem-link,
|
||||
.p-steps-item.p-disabled .p-menuitem-link {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-number {
|
||||
font-size: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-title {
|
||||
display: block;
|
||||
.p-steps-title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 40em) {
|
||||
.p-steps ul {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-steps .p-steps-item .p-menuitem-link {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,44 +64,21 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
/** TabMenu **/
|
||||
.p-tabmenu .p-tabmenu-nav {
|
||||
.p-tabmenu-nav {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: .25em .5em 0 .25em;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0 .2em 1px 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
border-bottom: 0;
|
||||
top: 1px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem a {
|
||||
float: left;
|
||||
padding: 0.5em 1em;
|
||||
text-decoration: none;
|
||||
.p-tabmenu-nav a {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenu-nav a {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-disabled a {
|
||||
cursor: default;
|
||||
.p-tabmenu-nav li.p-disabled a {
|
||||
cursor: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -159,10 +159,9 @@ export default {
|
|||
<style>
|
||||
.p-tieredmenu {
|
||||
width: 12.5em;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-tieredmenu.p-tieredmenu-dynamic {
|
||||
.p-tieredmenu-dynamic {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -171,46 +170,30 @@ export default {
|
|||
}
|
||||
|
||||
.p-tieredmenu ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-submenu-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 12.5em;
|
||||
padding: .25em;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-link {
|
||||
padding: .25em;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-icon {
|
||||
margin-right: .25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-text {
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem {
|
||||
position: relative;
|
||||
margin: .125em 0;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
|
||||
position: absolute;
|
||||
margin-top: -.5em;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-left: auto;;
|
||||
}
|
||||
|
||||
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
|
||||
|
|
|
|||
|
|
@ -99,6 +99,10 @@ export default {
|
|||
width: 20em;
|
||||
}
|
||||
|
||||
.p-toast-message {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-toast-topright {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
|
@ -119,53 +123,15 @@ export default {
|
|||
right: 20px;
|
||||
}
|
||||
|
||||
.p-toast-item-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-toast-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: .5em 1em;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-toast-item .p-toast-detail {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-toast-icon-close {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
.p-toast-icon-close.p-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-toast-title {
|
||||
font-weight: bold;
|
||||
padding: 0 0 .5em 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.p-toast-image {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: .5em;
|
||||
top: .25em;
|
||||
padding: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.p-toast-message {
|
||||
padding: 0 0 .25em 0;
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
|
||||
.p-toast-message p {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.p-toast-message-enter {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<div class="p-toast-item" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
|
||||
<span class="p-toast-icon-close-icon pi pi-times"></span>
|
||||
</button>
|
||||
<span :class="iconClass"></span>
|
||||
<div class="p-toast-message">
|
||||
<span class="p-toast-title">{{message.summary}}</span>
|
||||
<div class="p-toast-detail">{{message.detail}}</div>
|
||||
</div>
|
||||
<button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
|
||||
<span class="p-toast-icon-close-icon pi pi-times"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@
|
|||
}
|
||||
|
||||
.p-tooltip .p-tooltip-text {
|
||||
padding: .125em .5em;
|
||||
background-color: rgb(76, 76, 76);
|
||||
color: #ffffff;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +32,6 @@
|
|||
left: 0;
|
||||
margin-top: -.25em;
|
||||
border-width: .25em .25em .25em 0;
|
||||
border-right-color: rgb(76, 76, 76);
|
||||
}
|
||||
|
||||
.p-tooltip-left .p-tooltip-arrow {
|
||||
|
|
@ -43,7 +39,6 @@
|
|||
right: 0;
|
||||
margin-top: -.25em;
|
||||
border-width: .25em 0 .25em .25em;
|
||||
border-left-color: rgb(76, 76, 76);
|
||||
}
|
||||
|
||||
.p-tooltip.p-tooltip-top {
|
||||
|
|
@ -55,7 +50,6 @@
|
|||
left: 50%;
|
||||
margin-left: -.25em;
|
||||
border-width: .25em .25em 0;
|
||||
border-top-color: rgb(76, 76, 76);
|
||||
}
|
||||
|
||||
.p-tooltip-bottom .p-tooltip-arrow {
|
||||
|
|
@ -63,5 +57,4 @@
|
|||
left: 50%;
|
||||
margin-left: -.25em;
|
||||
border-width: 0 .25em .25em;
|
||||
border-bottom-color: rgb(76, 76, 76);
|
||||
}
|
||||
|
|
@ -44,19 +44,11 @@ export default {
|
|||
|
||||
<style>
|
||||
.p-message {
|
||||
border: 1px solid;
|
||||
margin: 0px .25em;
|
||||
padding: .25em .5em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.p-message .p-message-icon,
|
||||
.p-message .p-message-text {
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-fluid .p-message {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue