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

Fixed #2129 - Replace surface letters with new surface variables

pull/2131/head
Tuğçe Küçükoğlu 2022-02-09 12:21:39 +03:00 committed by Tuğçe Küçükoğlu
parent 141cd361fb
commit 19de2f1c74
19 changed files with 79 additions and 1322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/app/_config.scss
View File

@ -28,7 +28,7 @@
height: 100%; height: 100%;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
color: var(--text-color); color: var(--text-color);
background-color: var(--surface-f); background-color: var(--surface-overlay);
.layout-config-button { .layout-config-button {
display: block; display: block;

31
src/assets/styles/app/_content.scss
View File

@ -5,7 +5,7 @@
padding: 2rem; padding: 2rem;
&.introduction { &.introduction {
background-color: var(--surface-b); background-color: var(--surface-ground);
color: var(--text-color); color: var(--text-color);
padding-bottom: 0; padding-bottom: 0;
display: flex; display: flex;
@ -43,7 +43,7 @@
} }
&.implementation { &.implementation {
background-color: var(--surface-b); background-color: var(--surface-ground);
color: var(--text-color); color: var(--text-color);
+.documentation { +.documentation {
@ -52,7 +52,7 @@
} }
&.documentation { &.documentation {
background-color: var(--surface-b); background-color: var(--surface-ground);
color: var(--text-color); color: var(--text-color);
li { li {
@ -75,7 +75,7 @@
} }
i:not([class~="pi"]) { i:not([class~="pi"]) {
background-color: var(--surface-a); background-color: var(--surface-section);
color: #2196f3; color: #2196f3;
font-family: Monaco, courier, monospace; font-family: Monaco, courier, monospace;
font-style: normal; font-style: normal;
@ -95,7 +95,7 @@
.p-tabview-nav { .p-tabview-nav {
border-radius: 0; border-radius: 0;
padding: 0; padding: 0;
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
background-color: transparent; background-color: transparent;
li { li {
@ -180,10 +180,10 @@
.doc-table { .doc-table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
background-color: var(--surface-a); background-color: var(--surface-card);
th { th {
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
@ -192,7 +192,7 @@
tbody { tbody {
td { td {
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
&:first-child { &:first-child {
font-family: Courier New,monospace; font-family: Courier New,monospace;
@ -215,7 +215,7 @@
} }
.card { .card {
background: var(--surface-e); background: var(--surface-card);
padding: 2rem; 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); 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; border-radius: 4px;
@ -227,17 +227,4 @@
justify-content: space-between; 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%;
}
} }

6
src/assets/styles/app/_core.scss
View File

@ -10,7 +10,7 @@ body {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: var(--surface-a); background-color: var(--surface-ground);
font-family: var(--font-family); font-family: var(--font-family);
font-weight: normal; font-weight: normal;
color: var(--text-color); color: var(--text-color);
@ -94,9 +94,9 @@ pre[class*="language-"] {
} }
code { code {
border-left: 10px solid var(--surface-d) !important; border-left: 10px solid var(--surface-border) !important;
box-shadow: none !important; box-shadow: none !important;
background: var(--surface-e) !important; background: var(--surface-card) !important;
color: var(--text-color); color: var(--text-color);
font-size: 14px; font-size: 14px;

2
src/assets/styles/app/_footer.scss
View File

@ -1,7 +1,7 @@
.layout-footer { .layout-footer {
font-size: 1rem; font-size: 1rem;
padding: 2rem; padding: 2rem;
background-color: var(--surface-a); background-color: var(--surface-card);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

21
src/assets/styles/app/_home.scss
View File

@ -15,7 +15,7 @@
} }
.introduction { .introduction {
background-color: var(--surface-a); background-color: var(--surface-card);
background-image: url('./assets/images/home/intro-bg.jpg'); background-image: url('./assets/images/home/intro-bg.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -67,7 +67,7 @@
} }
.features { .features {
background-color: var(--surface-b); background-color: var(--surface-ground);
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
@ -76,7 +76,7 @@
} }
.feature-card { .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); 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%; height: 100%;
border-radius: 3px; border-radius: 3px;
@ -102,7 +102,7 @@
} }
.video { .video {
background-color: var(--surface-a); background-color: var(--surface-card);
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
} }
@ -124,10 +124,10 @@
} }
.templates { .templates {
background-color: var(--surface-b); background-color: var(--surface-ground);
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
img { img {
width: 100%; width: 100%;
@ -136,10 +136,10 @@
} }
.primevue-designer { .primevue-designer {
background-color: var(--surface-a); background-color: var(--surface-card);
color: var(--text-color); color: var(--text-color);
padding: 2rem; padding: 2rem;
img { img {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
@ -156,14 +156,13 @@
} }
.primeflex { .primeflex {
background-color: var(--surface-d); background-color: var(--surface-card);
color: var(--text-color); color: var(--text-color);
padding: 2rem; padding: 2rem;
} }
.prosupport { .prosupport {
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
background-color: var(--surface-b);
padding: 2rem; padding: 2rem;
color: var(--text-color); color: var(--text-color);

36
src/assets/styles/app/_menu.scss
View File

@ -3,7 +3,7 @@
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
background-color: var(--surface-a); background-color: var(--surface-overlay);
width: 250px; width: 250px;
user-select: none; user-select: none;
transition: transform .4s cubic-bezier(.05,.74,.2,.99); transition: transform .4s cubic-bezier(.05,.74,.2,.99);
@ -15,9 +15,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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; z-index: 1;
border-right: 1px solid var(--surface-d);
img { img {
width: 180px; width: 180px;
@ -34,7 +34,7 @@
padding: 0 1rem; padding: 0 1rem;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
border-right: 1px solid var(--surface-d); border-right: 1px solid var(--surface-border);
.menu-category { .menu-category {
display: block; display: block;
@ -44,7 +44,7 @@
padding: 1.5rem 0 1rem 0; padding: 1.5rem 0 1rem 0;
font-size: 0.857rem; font-size: 0.857rem;
text-transform: uppercase; text-transform: uppercase;
border-top: 1px solid var(--surface-d); border-top: 1px solid var(--surface-border);
&:first-child { &:first-child {
border-top: 0 none; border-top: 0 none;
@ -66,7 +66,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--surface-c); background-color: var(--surface-hover);
} }
&:focus { &: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 { div {
&.router-link-exact-active { &.router-link-exact-active {
> a { > a {
@ -140,8 +122,8 @@
.layout-sidebar-filter { .layout-sidebar-filter {
padding: 1.25rem 1rem; padding: 1.25rem 1rem;
border-bottom: 1px solid var(--surface-d); border-bottom: 1px solid var(--surface-border);
background-color: var(--surface-a); border-right: 1px solid var(--surface-border);
border-right: 1px solid var(--surface-d); background-color: var(--surface-card);
} }
} }

3
src/assets/styles/app/_responsive.scss
View File

@ -41,11 +41,10 @@
} }
.topbar-menu { .topbar-menu {
background-color: var(--surface-a);
width: 100%; width: 100%;
height: 40px; height: 40px;
margin: 0; margin: 0;
border-top: 1px solid var(--surface-d); border-top: 1px solid var(--surface-border);
> li { > li {
height: 40px; height: 40px;

10
src/assets/styles/app/_topbar.scss
View File

@ -1,9 +1,9 @@
.layout-topbar { .layout-topbar {
background-color: var(--surface-a); background-color: var(--surface-card);
padding: 0; padding: 0;
height: 70px; height: 70px;
box-shadow: 0 0 4px rgba(0,0,0,0.25); 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; display: flex;
align-items: center; align-items: center;
padding: 0 35px; padding: 0 35px;
@ -24,7 +24,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--surface-c); background-color: var(--surface-hover);
} }
i { i {
@ -95,7 +95,7 @@
z-index: 2; z-index: 2;
width: 275px; width: 275px;
max-height: 400px; 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); 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; overflow: auto;
list-style-type: none; list-style-type: none;
@ -132,7 +132,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--surface-c); background-color: var(--surface-hover);
} }
span { span {

1210
src/assets/styles/app/app.css
View File

File diff suppressed because it is too large Load Diff

2
src/views/Home.vue
View File

@ -211,7 +211,7 @@
<div class="grid"> <div class="grid">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4> <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> <a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a>
</div> </div>
<div class="col-12 md:col-6 text-center"> <div class="col-12 md:col-6 text-center">

2
src/views/carousel/CarouselDemo.vue
View File

@ -139,7 +139,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.product-item { .product-item {
.product-item-content { .product-item-content {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 3px; border-radius: 3px;
margin: .3rem; margin: .3rem;
text-align: center; text-align: center;

6
src/views/carousel/CarouselDoc.vue
View File

@ -431,7 +431,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.product-item { .product-item {
.product-item-content { .product-item-content {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 3px; border-radius: 3px;
margin: .3rem; margin: .3rem;
text-align: center; text-align: center;
@ -571,7 +571,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.product-item { .product-item {
.product-item-content { .product-item-content {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 3px; border-radius: 3px;
margin: .3rem; margin: .3rem;
text-align: center; text-align: center;
@ -716,7 +716,7 @@ export default {
<style> <style>
.product-item .product-item-content { .product-item .product-item-content {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 3px; border-radius: 3px;
margin: .3rem; margin: .3rem;
text-align: center; text-align: center;

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

@ -89,7 +89,7 @@ export default {
&.custombar1 { &.custombar1 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-ground);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
@ -105,12 +105,12 @@ export default {
&.custombar2 { &.custombar2 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-ground);
border-bottom: 9px solid var(--surface-b); border-bottom: 9px solid var(--surface-ground);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
background-color: var(--surface-d); background-color: var(--surface-border);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;

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

@ -176,7 +176,7 @@ export default {
&.custombar1 { &.custombar1 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-ground);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
@ -192,12 +192,12 @@ export default {
&.custombar2 { &.custombar2 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-border);
border-bottom: 9px solid var(--surface-b); border-bottom: 9px solid var(--surface-border);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
background-color: var(--surface-d); background-color: var(--surface-ground);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;
@ -282,7 +282,7 @@ export default {
&.custombar1 { &.custombar1 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-ground);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
@ -298,12 +298,12 @@ export default {
&.custombar2 { &.custombar2 {
.p-scrollpanel-wrapper { .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-border);
border-bottom: 9px solid var(--surface-b); border-bottom: 9px solid var(--surface-border);
} }
.p-scrollpanel-bar { .p-scrollpanel-bar {
background-color: var(--surface-d); background-color: var(--surface-ground);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;
@ -393,7 +393,7 @@ export default {
} }
.p-scrollpanel.custombar1 .p-scrollpanel-wrapper { .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 { .p-scrollpanel.custombar1 .p-scrollpanel-bar {
@ -407,12 +407,12 @@ export default {
} }
.p-scrollpanel.custombar2 .p-scrollpanel-wrapper { .p-scrollpanel.custombar2 .p-scrollpanel-wrapper {
border-right: 9px solid var(--surface-b); border-right: 9px solid var(--surface-border);
border-bottom: 9px solid var(--surface-b); border-bottom: 9px solid var(--surface-border);
} }
.p-scrollpanel.custombar2 .p-scrollpanel-bar { .p-scrollpanel.custombar2 .p-scrollpanel-bar {
background-color: var(--surface-d); background-color: var(--surface-ground);
border-radius: 0; border-radius: 0;
opacity: 1; opacity: 1;
transition: background-color .2s; transition: background-color .2s;

4
src/views/skeleton/SkeletonDemo.vue
View File

@ -112,7 +112,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<h5>DataTable</h5> <h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll"> <DataTable :value="products" responsiveLayout="scroll">
@ -162,7 +162,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-skeleton { .custom-skeleton {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 4px; border-radius: 4px;
ul { ul {

8
src/views/skeleton/SkeletonDoc.vue
View File

@ -288,7 +288,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-skeleton { .custom-skeleton {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 4px; border-radius: 4px;
ul { ul {
@ -303,7 +303,7 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<div class="grid formgrid"> <div class="grid formgrid">
<div class="field col-12 md:col-6"> <div class="field col-12 md:col-6">
<h5>Rectangle</h5> <h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton> <Skeleton class="mb-2"></Skeleton>
@ -448,7 +448,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-skeleton { .custom-skeleton {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 4px; border-radius: 4px;
ul { ul {
@ -617,7 +617,7 @@ export default {
<style> <style>
.custom-skeleton { .custom-skeleton {
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
border-radius: 4px; border-radius: 4px;
} }

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

@ -213,7 +213,7 @@
} }
.options { .options {
background-color: var(--surface-b); background-color: var(--surface-ground);
} }
.support-box { .support-box {

6
src/views/virtualscroller/VirtualScrollerDemo.vue
View File

@ -207,10 +207,10 @@ export default {
::v-deep(.p-virtualscroller) { ::v-deep(.p-virtualscroller) {
height: 200px; height: 200px;
width: 200px; width: 200px;
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
.scroll-item { .scroll-item {
background-color: var(--surface-a); background-color: var(--surface-card);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -221,7 +221,7 @@ export default {
} }
.odd { .odd {
background-color: var(--surface-b); background-color: var(--surface-ground);
} }
} }

18
src/views/virtualscroller/VirtualScrollerDoc.vue
View File

@ -578,10 +578,10 @@ export default {
::v-deep(.p-virtualscroller) { ::v-deep(.p-virtualscroller) {
height: 200px; height: 200px;
width: 200px; width: 200px;
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
.scroll-item { .scroll-item {
background-color: var(--surface-a); background-color: var(--surface-card);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -592,7 +592,7 @@ export default {
} }
.odd { .odd {
background-color: var(--surface-b); background-color: var(--surface-ground);
} }
} }
@ -809,10 +809,10 @@ export default {
::v-deep(.p-virtualscroller) { ::v-deep(.p-virtualscroller) {
height: 200px; height: 200px;
width: 200px; width: 200px;
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
.scroll-item { .scroll-item {
background-color: var(--surface-a); background-color: var(--surface-card);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -823,7 +823,7 @@ export default {
} }
.odd { .odd {
background-color: var(--surface-b); background-color: var(--surface-ground);
} }
} }
@ -1043,11 +1043,11 @@ export default {
.virtualscroller-demo .p-virtualscroller { .virtualscroller-demo .p-virtualscroller {
height: 200px; height: 200px;
width: 200px; width: 200px;
border: 1px solid var(--surface-d); border: 1px solid var(--surface-border);
} }
.virtualscroller-demo .p-virtualscroller .scroll-item { .virtualscroller-demo .p-virtualscroller .scroll-item {
background-color: var(--surface-a); background-color: var(--surface-card);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -1058,7 +1058,7 @@ export default {
} }
.virtualscroller-demo .p-virtualscroller .odd { .virtualscroller-demo .p-virtualscroller .odd {
background-color: var(--surface-b); background-color: var(--surface-ground);
} }
.virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content { .virtualscroller-demo .p-horizontal-scroll .p-virtualscroller-content {