Add material dark

pull/358/head
cagataycivici 2020-06-26 11:06:51 +03:00
parent 1abd44429a
commit b50c9a2b9f
37 changed files with 3875 additions and 3676 deletions

View File

@ -13,7 +13,7 @@
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title>
<link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/saga-blue/theme.css">
<link id="theme-link" rel="stylesheet" href="<%= BASE_URL %>themes/md-dark-indigo-pink/theme.css">
</head>
<body>

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #383838;
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #383838;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #383838;
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #383838;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #383838;
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #383838;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #383838;
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #383838;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #383838;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #3f4b5b;
background-color: #3f4b5b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #3f4b5b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #3f4b5b;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #3f4b5b;
background-color: #3f4b5b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #3f4b5b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #3f4b5b;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: rgba(0, 0, 0, 0.03);
background-color: rgba(0, 0, 0, 0.03);
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: rgba(0, 0, 0, 0.03);
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: rgba(0, 0, 0, 0.03);
background-color: rgba(0, 0, 0, 0.03);
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: rgba(0, 0, 0, 0.03);
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: rgba(0, 0, 0, 0.03);
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #4b4b4b;
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #4b4b4b;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #4b4b4b;
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #4b4b4b;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #4b4b4b;
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #4b4b4b;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #4b4b4b;
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #4b4b4b;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #4b4b4b;
}
.p-listbox {

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -719,7 +719,13 @@
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f4f4f4;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f4f4f4;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f4f4f4;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f4f4f4;
}
.p-listbox {

View File

@ -719,7 +719,13 @@
}
.p-input-filled .p-inputtext {
background: #f4f4f4;
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f4f4f4;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f4f4f4;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f8f9fa;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f8f9fa;
}
.p-listbox {

View File

@ -723,7 +723,13 @@
}
.p-input-filled .p-inputtext {
background: #f8f9fa;
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #f8f9fa;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #f8f9fa;
}
.p-listbox {

View File

@ -722,7 +722,13 @@
}
.p-input-filled .p-inputtext {
background: #304562;
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #304562;
}
.p-listbox {

View File

@ -722,7 +722,13 @@
}
.p-input-filled .p-inputtext {
background: #304562;
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #304562;
}
.p-listbox {

View File

@ -722,7 +722,13 @@
}
.p-input-filled .p-inputtext {
background: #304562;
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #304562;
}
.p-listbox {

View File

@ -722,7 +722,13 @@
}
.p-input-filled .p-inputtext {
background: #304562;
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:hover {
background-color: #304562;
}
.p-input-filled .p-inputtext:enabled:focus {
background-color: #304562;
}
.p-listbox {

View File

@ -117,7 +117,7 @@ export default {
computed: {
containerClass() {
return [{
'layout-news-active': this.newsActive,
'layout-news-active': this.newsActive,
'p-input-filled': this.$appState.inputStyle === 'filled',
'p-ripple-disabled': this.$appState.ripple === false
}];

View File

@ -19,7 +19,7 @@ body {
overflow-x: hidden;
overflow-y: auto;
background-color: var(--surface-a);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: var(--font-family);
font-weight: normal;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
@ -721,7 +721,6 @@ p {
}
.layout-config .config-scale .p-button {
margin-right: 0.5rem;
border: 0 none !important;
}
.layout-config .config-scale i {
margin-right: 0.5rem;
@ -1119,7 +1118,7 @@ body {
overflow-x: hidden;
overflow-y: auto;
background-color: var(--surface-a);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: var(--font-family);
font-weight: normal;
color: var(--text-color);
-webkit-font-smoothing: antialiased;

View File

@ -5,7 +5,7 @@
:tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy"
:class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
<slot name="option" :option="option" :index="i">
<span class="p-button-text">{{getOptionLabel(option)}}</span>
<span class="p-button-label">{{getOptionLabel(option)}}</span>
</slot>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div :class="buttonClass" @click="onClick($event)" role="checkbox" :aria-labelledby="ariaLabelledBy" :aria-checked="value" :tabindex="$attrs.disabled ? null : '0'">
<span v-if="hasIcon" :class="iconClass"></span>
<span class="p-button-text">{{label}}</span>
<span class="p-button-label">{{label}}</span>
</div>
</template>