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"> <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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PrimeVUE</title> <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> </head>
<body> <body>

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .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 { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -719,7 +719,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -723,7 +723,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -722,7 +722,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -722,7 +722,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -722,7 +722,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -722,7 +722,13 @@
} }
.p-input-filled .p-inputtext { .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 { .p-listbox {

View File

@ -19,7 +19,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: var(--surface-a); 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; font-weight: normal;
color: var(--text-color); color: var(--text-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -721,7 +721,6 @@ p {
} }
.layout-config .config-scale .p-button { .layout-config .config-scale .p-button {
margin-right: 0.5rem; margin-right: 0.5rem;
border: 0 none !important;
} }
.layout-config .config-scale i { .layout-config .config-scale i {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -1119,7 +1118,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: var(--surface-a); 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; font-weight: normal;
color: var(--text-color); color: var(--text-color);
-webkit-font-smoothing: antialiased; -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" :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)}]"> :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"> <slot name="option" :option="option" :index="i">
<span class="p-button-text">{{getOptionLabel(option)}}</span> <span class="p-button-label">{{getOptionLabel(option)}}</span>
</slot> </slot>
</div> </div>
</div> </div>

View File

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