Fixed #2129 - Replace surface letters with new surface variables
parent
141cd361fb
commit
19de2f1c74
|
@ -28,7 +28,7 @@
|
|||
height: 100%;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
|
||||
color: var(--text-color);
|
||||
background-color: var(--surface-f);
|
||||
background-color: var(--surface-overlay);
|
||||
|
||||
.layout-config-button {
|
||||
display: block;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
padding: 2rem;
|
||||
|
||||
&.introduction {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
color: var(--text-color);
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
&.implementation {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
color: var(--text-color);
|
||||
|
||||
+.documentation {
|
||||
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
&.documentation {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
color: var(--text-color);
|
||||
|
||||
li {
|
||||
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
|
||||
i:not([class~="pi"]) {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-section);
|
||||
color: #2196f3;
|
||||
font-family: Monaco, courier, monospace;
|
||||
font-style: normal;
|
||||
|
@ -95,7 +95,7 @@
|
|||
.p-tabview-nav {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background-color: transparent;
|
||||
|
||||
li {
|
||||
|
@ -180,10 +180,10 @@
|
|||
.doc-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
@ -192,7 +192,7 @@
|
|||
tbody {
|
||||
td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
|
||||
&:first-child {
|
||||
font-family: Courier New,monospace;
|
||||
|
@ -215,7 +215,7 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface-e);
|
||||
background: var(--surface-card);
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
border-radius: 4px;
|
||||
|
@ -227,17 +227,4 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--surface-e);
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
.box-stretched {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ body {
|
|||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-ground);
|
||||
font-family: var(--font-family);
|
||||
font-weight: normal;
|
||||
color: var(--text-color);
|
||||
|
@ -94,9 +94,9 @@ pre[class*="language-"] {
|
|||
}
|
||||
|
||||
code {
|
||||
border-left: 10px solid var(--surface-d) !important;
|
||||
border-left: 10px solid var(--surface-border) !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
background: var(--surface-card) !important;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
.layout-footer {
|
||||
font-size: 1rem;
|
||||
padding: 2rem;
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.introduction {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
background-image: url('./assets/images/home/intro-bg.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
@ -67,7 +67,7 @@
|
|||
}
|
||||
|
||||
.features {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: var(--surface-e);
|
||||
background-color: var(--surface-card);
|
||||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
|
@ -102,7 +102,7 @@
|
|||
}
|
||||
|
||||
.video {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
@ -124,10 +124,10 @@
|
|||
}
|
||||
|
||||
.templates {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
@ -136,10 +136,10 @@
|
|||
}
|
||||
|
||||
.primevue-designer {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
color: var(--text-color);
|
||||
padding: 2rem;
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
|
@ -156,14 +156,13 @@
|
|||
}
|
||||
|
||||
.primeflex {
|
||||
background-color: var(--surface-d);
|
||||
background-color: var(--surface-card);
|
||||
color: var(--text-color);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.prosupport {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
background-color: var(--surface-b);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
padding: 2rem;
|
||||
color: var(--text-color);
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-overlay);
|
||||
width: 250px;
|
||||
user-select: none;
|
||||
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
|
||||
|
@ -15,9 +15,9 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
border-right: 1px solid var(--surface-border);
|
||||
z-index: 1;
|
||||
border-right: 1px solid var(--surface-d);
|
||||
|
||||
img {
|
||||
width: 180px;
|
||||
|
@ -34,7 +34,7 @@
|
|||
padding: 0 1rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
border-right: 1px solid var(--surface-d);
|
||||
border-right: 1px solid var(--surface-border);
|
||||
|
||||
.menu-category {
|
||||
display: block;
|
||||
|
@ -44,7 +44,7 @@
|
|||
padding: 1.5rem 0 1rem 0;
|
||||
font-size: 0.857rem;
|
||||
text-transform: uppercase;
|
||||
border-top: 1px solid var(--surface-d);
|
||||
border-top: 1px solid var(--surface-border);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0 none;
|
||||
|
@ -66,7 +66,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-c);
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
@ -87,24 +87,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.menu-banner {
|
||||
a {
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
img {
|
||||
background-color: var(--surface-c);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.router-link-exact-active {
|
||||
> a {
|
||||
|
@ -140,8 +122,8 @@
|
|||
|
||||
.layout-sidebar-filter {
|
||||
padding: 1.25rem 1rem;
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
background-color: var(--surface-a);
|
||||
border-right: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
border-right: 1px solid var(--surface-border);
|
||||
background-color: var(--surface-card);
|
||||
}
|
||||
}
|
|
@ -41,11 +41,10 @@
|
|||
}
|
||||
|
||||
.topbar-menu {
|
||||
background-color: var(--surface-a);
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--surface-d);
|
||||
border-top: 1px solid var(--surface-border);
|
||||
|
||||
> li {
|
||||
height: 40px;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
.layout-topbar {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
padding: 0;
|
||||
height: 70px;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,0.25);
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 35px;
|
||||
|
@ -24,7 +24,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-c);
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
i {
|
||||
|
@ -95,7 +95,7 @@
|
|||
z-index: 2;
|
||||
width: 275px;
|
||||
max-height: 400px;
|
||||
background-color: var(--surface-f);
|
||||
background-color: var(--surface-overlay);
|
||||
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
|
||||
overflow: auto;
|
||||
list-style-type: none;
|
||||
|
@ -132,7 +132,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-c);
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -211,7 +211,7 @@
|
|||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4>
|
||||
<p>150+ ready to use UI blocks to build spectacular applications in no time.</p>
|
||||
<p>280+ ready to use UI blocks to build spectacular applications in no time.</p>
|
||||
<a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 text-center">
|
||||
|
|
|
@ -139,7 +139,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
|
|
|
@ -431,7 +431,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
|
@ -571,7 +571,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.product-item {
|
||||
.product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
|
@ -716,7 +716,7 @@ export default {
|
|||
|
||||
<style>
|
||||
.product-item .product-item-content {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 3px;
|
||||
margin: .3rem;
|
||||
text-align: center;
|
||||
|
|
|
@ -89,7 +89,7 @@ export default {
|
|||
|
||||
&.custombar1 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-ground);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
|
@ -105,12 +105,12 @@ export default {
|
|||
|
||||
&.custombar2 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-bottom: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-ground);
|
||||
border-bottom: 9px solid var(--surface-ground);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
background-color: var(--surface-d);
|
||||
background-color: var(--surface-border);
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
|
|
|
@ -176,7 +176,7 @@ export default {
|
|||
|
||||
&.custombar1 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-ground);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
|
@ -192,12 +192,12 @@ export default {
|
|||
|
||||
&.custombar2 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-bottom: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-border);
|
||||
border-bottom: 9px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
background-color: var(--surface-d);
|
||||
background-color: var(--surface-ground);
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
|
@ -282,7 +282,7 @@ export default {
|
|||
|
||||
&.custombar1 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-ground);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
|
@ -298,12 +298,12 @@ export default {
|
|||
|
||||
&.custombar2 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-bottom: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-border);
|
||||
border-bottom: 9px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
background-color: var(--surface-d);
|
||||
background-color: var(--surface-ground);
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
|
@ -393,7 +393,7 @@ export default {
|
|||
}
|
||||
|
||||
.p-scrollpanel.custombar1 .p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.p-scrollpanel.custombar1 .p-scrollpanel-bar {
|
||||
|
@ -407,12 +407,12 @@ export default {
|
|||
}
|
||||
|
||||
.p-scrollpanel.custombar2 .p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-bottom: 9px solid var(--surface-b);
|
||||
border-right: 9px solid var(--surface-border);
|
||||
border-bottom: 9px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.p-scrollpanel.custombar2 .p-scrollpanel-bar {
|
||||
background-color: var(--surface-d);
|
||||
background-color: var(--surface-ground);
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
|
|
|
@ -112,7 +112,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>DataTable</h5>
|
||||
<DataTable :value="products" responsiveLayout="scroll">
|
||||
|
@ -162,7 +162,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 4px;
|
||||
|
||||
ul {
|
||||
|
|
|
@ -288,7 +288,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 4px;
|
||||
|
||||
ul {
|
||||
|
@ -303,7 +303,7 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="grid formgrid">
|
||||
<div class="grid formgrid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<h5>Rectangle</h5>
|
||||
<Skeleton class="mb-2"></Skeleton>
|
||||
|
@ -448,7 +448,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 4px;
|
||||
|
||||
ul {
|
||||
|
@ -617,7 +617,7 @@ export default {
|
|||
|
||||
<style>
|
||||
.custom-skeleton {
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
|
@ -213,7 +213,7 @@
|
|||
}
|
||||
|
||||
.options {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
|
||||
.support-box {
|
||||
|
|
|
@ -207,10 +207,10 @@ export default {
|
|||
::v-deep(.p-virtualscroller) {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
|
||||
.scroll-item {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -221,7 +221,7 @@ export default {
|
|||
}
|
||||
|
||||
.odd {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -578,10 +578,10 @@ export default {
|
|||
::v-deep(.p-virtualscroller) {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
|
||||
.scroll-item {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -592,7 +592,7 @@ export default {
|
|||
}
|
||||
|
||||
.odd {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -809,10 +809,10 @@ export default {
|
|||
::v-deep(.p-virtualscroller) {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
|
||||
.scroll-item {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -823,7 +823,7 @@ export default {
|
|||
}
|
||||
|
||||
.odd {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1043,11 +1043,11 @@ export default {
|
|||
.virtualscroller-demo .p-virtualscroller {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--surface-d);
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.virtualscroller-demo .p-virtualscroller .scroll-item {
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -1058,7 +1058,7 @@ export default {
|
|||
}
|
||||
|
||||
.virtualscroller-demo .p-virtualscroller .odd {
|
||||
background-color: var(--surface-b);
|
||||
background-color: var(--surface-ground);
|
||||
}
|
||||
|
||||
.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {
|
||||
|
|
Loading…
Reference in New Issue