Skip to content

Commit

Permalink
Fixed #11244 and Fixed #11243
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Feb 28, 2022
1 parent 1116097 commit b7c4bc1
Show file tree
Hide file tree
Showing 43 changed files with 1,149 additions and 1,821 deletions.
2 changes: 1 addition & 1 deletion src/app/showcase/components/colors/colors.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { AppConfigService } from '../../service/appconfigservice';
})
export class ColorsDemoComponent {

colors: any[] = ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'gray'];
colors: any[] = ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'red', 'teal', 'orange', 'bluegray', 'purple', 'gray'];

shades: any[] = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];

Expand Down
66 changes: 25 additions & 41 deletions src/assets/components/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,16 @@
--purple-700:#6d1b7b;
--purple-800:#561561;
--purple-900:#3e1046;
--red-50:#fff5f5;
--red-100:#ffd1ce;
--red-200:#ffada7;
--red-300:#ff8980;
--red-400:#ff6459;
--red-500:#ff4032;
--red-600:#d9362b;
--red-700:#b32d23;
--red-800:#8c231c;
--red-900:#661a14;
}

.p-autocomplete .p-autocomplete-loader {
Expand Down Expand Up @@ -354,16 +364,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
.p-datepicker .p-datepicker-header .p-datepicker-title {
line-height: 2rem;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
color: rgba(255, 255, 255, 0.87);
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
font-weight: 600;
padding: 0.5rem;
.p-datepicker .p-datepicker-header .p-datepicker-title select {
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
color: #64B5F6;
.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64B5F6;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
margin-right: 0.5rem;
Expand Down Expand Up @@ -461,31 +469,19 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
.p-datepicker .p-yearpicker {
margin: 0.5rem 0;
}
.p-datepicker .p-yearpicker .p-yearpicker-year {
padding: 0.5rem;
transition: box-shadow 0.2s;
border-radius: 3px;
}
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
border-left: 1px solid #383838;
border-right: 1px solid #383838;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-top: 0;
padding-bottom: 0;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
padding-left: 0;
border-left: 0 none;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
padding-right: 0;
border-right: 0 none;
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
Expand All @@ -495,18 +491,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
background: rgba(255, 255, 255, 0.03);
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
Expand Down Expand Up @@ -707,7 +695,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {

.p-colorpicker-panel {
background: #1e1e1e;
border: 1px solid #383838;
border-color: 1px solid #383838;
}
.p-colorpicker-panel .p-colorpicker-color-handle,
.p-colorpicker-panel .p-colorpicker-hue-handle {
Expand Down Expand Up @@ -832,9 +820,6 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
background-color: transparent;
}

.p-editor-container .p-editor-toolbar {
background: #1e1e1e;
Expand Down Expand Up @@ -1377,7 +1362,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
background-color: #383838;
}

p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
.p-password.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
}

Expand Down Expand Up @@ -1479,7 +1464,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star-fill {
.p-rating .p-rating-icon.pi-star {
color: #64B5F6;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down Expand Up @@ -1661,8 +1646,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}

Expand Down
66 changes: 25 additions & 41 deletions src/assets/components/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,16 @@
--purple-700:#6d1b7b;
--purple-800:#561561;
--purple-900:#3e1046;
--red-50:#fff5f5;
--red-100:#ffd1ce;
--red-200:#ffada7;
--red-300:#ff8980;
--red-400:#ff6459;
--red-500:#ff4032;
--red-600:#d9362b;
--red-700:#b32d23;
--red-800:#8c231c;
--red-900:#661a14;
}

.p-autocomplete .p-autocomplete-loader {
Expand Down Expand Up @@ -354,16 +364,14 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
.p-datepicker .p-datepicker-header .p-datepicker-title {
line-height: 2rem;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
color: rgba(255, 255, 255, 0.87);
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
font-weight: 600;
padding: 0.5rem;
.p-datepicker .p-datepicker-header .p-datepicker-title select {
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
color: #81C784;
.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81C784;
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
margin-right: 0.5rem;
Expand Down Expand Up @@ -461,31 +469,19 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
.p-datepicker .p-yearpicker {
margin: 0.5rem 0;
}
.p-datepicker .p-yearpicker .p-yearpicker-year {
padding: 0.5rem;
transition: box-shadow 0.2s;
border-radius: 3px;
}
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
border-left: 1px solid #383838;
border-right: 1px solid #383838;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-top: 0;
padding-bottom: 0;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
padding-left: 0;
border-left: 0 none;
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
padding-right: 0;
border-right: 0 none;
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
Expand All @@ -495,18 +491,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
background: rgba(255, 255, 255, 0.03);
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
background: rgba(255, 255, 255, 0.03);
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
Expand Down Expand Up @@ -707,7 +695,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {

.p-colorpicker-panel {
background: #1e1e1e;
border: 1px solid #383838;
border-color: 1px solid #383838;
}
.p-colorpicker-panel .p-colorpicker-color-handle,
.p-colorpicker-panel .p-colorpicker-hue-handle {
Expand Down Expand Up @@ -832,9 +820,6 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
background-color: transparent;
}

.p-editor-container .p-editor-toolbar {
background: #1e1e1e;
Expand Down Expand Up @@ -1377,7 +1362,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
background-color: #383838;
}

p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
.p-password.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
}

Expand Down Expand Up @@ -1479,7 +1464,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star-fill {
.p-rating .p-rating-icon.pi-star {
color: #81C784;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down Expand Up @@ -1661,8 +1646,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
.p-treeselect.p-invalid.p-component {
border-color: #ef9a9a;
}

Expand Down
Loading

0 comments on commit b7c4bc1

Please sign in to comment.