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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
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>

8
public/themes/arya-blue/theme.css
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 {

8
public/themes/arya-green/theme.css
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 {

8
public/themes/arya-orange/theme.css
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 {

8
public/themes/arya-purple/theme.css
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 {

8
public/themes/bootstrap4-dark-blue/theme.css
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 {

8
public/themes/bootstrap4-dark-purple/theme.css
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 {

8
public/themes/bootstrap4-light-blue/theme.css
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 {

8
public/themes/bootstrap4-light-purple/theme.css
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 {

8
public/themes/luna-amber/theme.css
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 {

8
public/themes/luna-blue/theme.css
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 {

8
public/themes/luna-green/theme.css
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 {

8
public/themes/luna-pink/theme.css
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 {

1885
public/themes/md-dark-deeppurple-green/theme.css
View File

File diff suppressed because it is too large Load Diff

1885
public/themes/md-dark-indigo-pink/theme.css
View File

File diff suppressed because it is too large Load Diff

731
public/themes/md-light-deeppurple-green/theme.css
View File

File diff suppressed because it is too large Load Diff

433
public/themes/md-light-indigo-pink/theme.css
View File

File diff suppressed because it is too large Load Diff

773
public/themes/mdc-dark-deeppurple-green/theme.css
View File

File diff suppressed because it is too large Load Diff

475
public/themes/mdc-dark-indigo-pink/theme.css
View File

File diff suppressed because it is too large Load Diff

731
public/themes/mdc-light-deeppurple-green/theme.css
View File

File diff suppressed because it is too large Load Diff

433
public/themes/mdc-light-indigo-pink/theme.css
View File

File diff suppressed because it is too large Load Diff

8
public/themes/nova-accent/theme.css
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 {

8
public/themes/nova-alt/theme.css
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 {

8
public/themes/nova-vue/theme.css
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 {

8
public/themes/nova/theme.css
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 {

8
public/themes/rhea/theme.css
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 {

8
public/themes/saga-blue/theme.css
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 {

8
public/themes/saga-green/theme.css
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 {

8
public/themes/saga-orange/theme.css
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 {

8
public/themes/vela-blue/theme.css
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 {

8
public/themes/vela-green/theme.css
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 {

8
public/themes/vela-orange/theme.css
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 {

8
public/themes/vela-purple/theme.css
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 {

2
src/App.vue
View File

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

5
src/assets/styles/app/app.css
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;

2
src/components/selectbutton/SelectButton.vue
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>

2
src/components/togglebutton/ToggleButton.vue
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>